/* ========== HERO CAROUSEL STYLES ========== */
.hero-carousel-section {
    position: relative;
    margin-bottom: 0;
}

.carousel {
    margin-bottom: 0;
}

.carousel-inner {
    border-radius: 0;
}

.carousel-image {
    height: 75vh;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

@media (max-width: 768px) {
    .carousel-image {
        height: 55vh;
    }
}

/* Carousel Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(125, 46, 63, 0.9);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: #7d2e3f;
    border-color: #f39c12;
    transform: scale(1.1);
}

/* Carousel Indicators */
.carousel-indicators {
    margin-bottom: 30px;
}

.carousel-indicators button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background-color: #f39c12;
    border-color: white;
    transform: scale(1.2);
}

.carousel-indicators button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* ========== FEATURES SECTION - PROFESSIONAL DESIGN ========== */
.features-section {
    position: relative;
    margin-top: -80px;
    z-index: 10;
    padding: 0;
}

.features-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.professional-feature-card {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background Image Layer - Hidden by Default */
.professional-feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

/* Left Card - Gradient Background (Default) */
.feature-card-left {
    background: linear-gradient(135deg, #3b007b 0%, #3b008d 100%);
    border-radius: 50px 0 0 50px;
}

.feature-card-left::after {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), var(--bg-image);
}

.feature-card-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(125, 46, 63, 0.1);
    transition: all 0.4s ease;
    z-index: 1;
}

.feature-card-left:hover::before {
    background: rgba(125, 46, 63, 0.2);
}

/* Middle Card - Orange/Gold Background (Default) */
.feature-card-middle {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.feature-card-middle::after {
    background-image: linear-gradient(rgba(243, 156, 18, 0.7), rgba(230, 126, 34, 0.7)), var(--bg-image);
}

/* Right Card - School Primary Color (Maroon/Purple) - Default */
.feature-card-right {
    background: linear-gradient(135deg, #7d2e3f 0%, #5a1f2e 100%);
    border-radius: 0 50px 50px 0;
}

.feature-card-right::after {
    background-image: linear-gradient(rgba(125, 46, 63, 0.7), rgba(90, 31, 46, 0.7)), var(--bg-image);
}

@media (max-width: 991px) {
    .feature-card-right {
        border-radius: 0 0 50px 50px;
    }
}

/* Show Background Image on Hover */
.professional-feature-card:hover::after {
    opacity: 1;
}

/* Hover Effects */
.professional-feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Card Content */
.feature-card-content {
    position: relative;
    z-index: 2;
    padding: 50px 40px;
    text-align: center;
    color: white;
}

/* Feature Icons */
.feature-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.feature-card-icon i {
    font-size: 3rem;
    color: white;
    transition: all 0.4s ease;
}

.professional-feature-card:hover .feature-card-icon {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1) rotate(10deg);
}

.professional-feature-card:hover .feature-card-icon i {
    transform: scale(1.1);
}

/* Typography */
.feature-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    font-family: var(--font-heading);
    line-height: 1.3;
}

.feature-card-description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

/* Feature Button - Professional Style */
.feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #f39c12;
    color: #000;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 1px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.feature-btn:hover {
    background: #fff;
    color: #000;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(243, 156, 18, 0.4);
}

.feature-btn i {
    transition: transform 0.3s ease;
}

.feature-btn:hover i {
    transform: translateX(5px);
}

/* Dark Button Variant for Middle Card */
.feature-btn-dark {
    background: #2d2d2d;
    color: white;
}

.feature-btn-dark:hover {
    background: #1a1a1a;
    color: #f39c12;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 991px) {
    .features-section {
        margin-top: 30px;
    }

    .professional-feature-card {
        min-height: 400px;
        margin-bottom: 20px;
    }

    .feature-card-content {
        padding: 40px 30px;
    }

    .feature-card-title {
        font-size: 1.5rem;
    }

    .feature-card-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 767px) {
    .features-section {
        margin-top: -100px;
    }

    .professional-feature-card {
        min-height: 350px;
    }

    .feature-card-icon {
        width: 70px;
        height: 70px;
    }

    .feature-card-icon i {
        font-size: 2.5rem;
    }

    .feature-card-title {
        font-size: 1.35rem;
    }
}

/* ========== PROFESSIONAL SECTION TITLES ========== */
.section-title {
    text-align: center;
}

.section-subtitle-top {
    color: #7d2e3f;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.section-main-title {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0;
    display: block;
}

.title-regular {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #2d2d2d;
}

.title-serif {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #2d2d2d;
}

.title-serif-accent {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #f39c12;
    font-style: italic;
}

/* Orange Ampersand - Italic */
.title-ampersand {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #f39c12;
    font-style: italic;
    font-size: 3.2rem;
}

/* Orange Text - Italic */
.title-serif-orange {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #f39c12;
    font-style: italic;
}

.title-underline {
    width: 160px;
    height: 4px;
    background: linear-gradient(90deg, #7d2e3f 0%, #f39c12 100%);
    margin: 15px auto 20px;
    border-radius: 2px;
}

.section-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .section-main-title {
        font-size: 2.5rem;
    }

    .title-ampersand {
        font-size: 2.7rem;
    }

    .section-description {
        font-size: 1rem;
    }

    .title-underline {
        width: 130px;
    }
}

@media (max-width: 767px) {
    .section-subtitle-top {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    .section-main-title {
        font-size: 1.75rem;
    }

    .title-ampersand {
        font-size: 2rem;
    }

    .section-description {
        font-size: 0.95rem;
    }

    .title-underline {
        width: 100px;
        height: 3px;
    }
}

/* ========== ABOUT SECTION ========== */
.experience-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: var(--secondary-color);
    color: white;
    padding: 2rem;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
}

.experience-badge h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.feature-item i {
    font-size: 1.5rem;
}

/* ========== VALUE CARDS ========== */
/* Circular Values Design */
.values-circle-container {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 60px 20px;
}

.values-circle-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 700px;
    margin: 0 auto;
}

/* Center Content Circle */
.circle-center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border: 4px solid #f5f5f5;
}

.center-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #7d2e3f;
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.center-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Connecting Lines Background */
.circle-connecting-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 550px;
    border-radius: 50%;
    border: 2px dashed rgba(125, 46, 63, 0.15);
    z-index: 1;
}

/* Value Circle Items */
.value-circle-item {
    position: absolute;
    z-index: 5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.value-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.value-icon-circle i {
    font-size: 2.5rem;
    color: white;
    transition: transform 0.3s ease;
}

.value-circle-item:hover .value-icon-circle {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

.value-circle-item:hover .value-icon-circle i {
    transform: scale(1.1);
}

/* Value Tooltips - Positioned Outside Circle */
.value-tooltip {
    position: absolute;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 30;
    border: 2px solid #f5f5f5;
}

.value-tooltip h5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d2d2d;
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.value-tooltip p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.value-circle-item:hover .value-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip Arrows */
.value-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Top Tooltip - Value 1 (Sustainability) */
.value-position-1 .value-tooltip-top {
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.value-position-1 .value-tooltip-top::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent white transparent;
}

.value-position-1:hover .value-tooltip-top {
    top: 130px;
}

/* Top Right Tooltip - Value 2 (Possibility) - Shows Below */
.value-position-2 .value-tooltip-bottom {
    bottom: -140px;
    left: 50%;
    transform: translateX(-50%);
}

.value-position-2 .value-tooltip-bottom::before {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent white transparent;
}

.value-position-2:hover .value-tooltip-bottom {
    bottom: -150px;
}

/* Bottom Right Tooltip - Value 3 (Integrity) - Shows Above */
.value-position-3 .value-tooltip-top {
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
}

.value-position-3 .value-tooltip-top::before {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: white transparent transparent transparent;
}

.value-position-3:hover .value-tooltip-top {
    top: -150px;
}

/* Bottom Tooltip - Value 4 (Collaboration) */
.value-position-4 .value-tooltip-bottom {
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.value-position-4 .value-tooltip-bottom::before {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: white transparent transparent transparent;
}

.value-position-4:hover .value-tooltip-bottom {
    bottom: 130px;
}

/* Bottom Left Tooltip - Value 5 (Empathy) */
.value-position-5 .value-tooltip-left {
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
}

.value-position-5 .value-tooltip-left::before {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.value-position-5:hover .value-tooltip-left {
    right: 130px;
}

/* Top Left Tooltip - Value 6 (Youthfulness) */
.value-position-6 .value-tooltip-left {
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
}

.value-position-6 .value-tooltip-left::before {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.value-position-6:hover .value-tooltip-left {
    right: 130px;
}

/* Positioning for 6 items around circle - Perfect Circle Distribution */
/* Using circular positioning: radius 275px from center */
.value-position-1 {
    /* Top - 0 degrees */
    top: 30px;
    left: 43%;
    transform: translateX(-50%);
}

.value-position-2 {
    /* Top Right - 60 degrees */
    top: 170px;
    right: 60px;
}

.value-position-3 {
    /* Bottom Right - 120 degrees */
    bottom: 185px;
    right: 65px;
}

.value-position-4 {
    /* Bottom - 180 degrees */
    bottom: 35px;
    left: 295px;
    transform: translateX(-50%);
}

.value-position-5 {
    /* Bottom Left - 240 degrees */
    bottom: 180px;
    left: 60px;
}

.value-position-6 {
    /* Top Left - 300 degrees */
    top: 160px;
    left: 80px;
}

/* Responsive Design for Circle */
@media (max-width: 991px) {
    .values-circle-wrapper {
        height: 600px;
        max-width: 600px;
    }

    .circle-center-content {
        width: 260px;
        height: 260px;
        padding: 30px;
    }

    .center-title {
        font-size: 1.5rem;
    }

    .center-description {
        font-size: 0.85rem;
    }

    .circle-connecting-lines {
        width: 450px;
        height: 450px;
    }

    .value-icon-circle {
        width: 85px;
        height: 85px;
    }

    .value-icon-circle i {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .values-circle-container {
        padding: 40px 10px;
        margin-bottom: 40px;
    }

    .values-circle-wrapper {
        height: 500px;
        max-width: 500px;
    }

    .circle-center-content {
        width: 200px;
        height: 200px;
        padding: 20px;
    }

    .center-title {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .center-description {
        font-size: 0.75rem;
    }

    .circle-connecting-lines {
        width: 350px;
        height: 350px;
    }

    .value-icon-circle {
        width: 70px;
        height: 70px;
    }

    .value-icon-circle i {
        font-size: 1.75rem;
    }

    .value-tooltip {
        display: none;
    }

    .value-detail-icon {
        width: 70px;
        height: 70px;
    }

    .value-detail-icon i {
        font-size: 2rem;
    }

    .value-detail-title {
        font-size: 1.25rem;
    }
}


/* ========== ACHIEVEMENTS SECTION - PROFESSIONAL DESIGN ========== */
.achievements-section {
    background: #f5f5f5;
}

/* Featured Achievement Banner */
.featured-achievement-banner {
    background: linear-gradient(135deg, #5e4a7e 0%, #4a3866 100%);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.featured-achievement-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.achievement-banner-content {
    position: relative;
    z-index: 2;
}

.banner-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1.4;
}

/* Achievement Images Grid */
.achievement-images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.achievement-img-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 4px solid transparent;
    background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080) border-box;
    border-image-slice: 1;
    transition: all 0.3s ease;
}

.achievement-img-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
    padding: 4px;
    border-radius: 12px;
    z-index: -1;
}

.achievement-img-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.achievement-img-item:hover img {
    transform: scale(1.05);
}

.banner-description p {
    color: white;
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.banner-description strong {
    color: #f39c12;
}

/* Competition Achievement Cards */
.competition-achievement-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    height: 100%;
}

.competition-achievement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.competition-image-wrapper {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.competition-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.competition-achievement-card:hover .competition-image-wrapper img {
    transform: scale(1.1);
}

.competition-badge {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.competition-logo {
    max-width: 120px;
    height: auto;
}

.competition-content {
    padding: 60px 30px 30px;
    text-align: center;
}

.competition-title {
    color: #f39c12;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.competition-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Stat Achievement Cards */
.stat-achievement-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #f39c12, #e67e22);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-achievement-card:hover::before {
    transform: scaleX(1);
}

.stat-achievement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.stat-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #7d2e3f 0%, #5a1f2e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.stat-icon-wrapper i {
    font-size: 2.5rem;
    color: white;
}

.stat-achievement-card:hover .stat-icon-wrapper {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: scale(1.1) rotate(10deg);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #7d2e3f;
    margin: 15px 0 10px;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: 1rem;
    color: #666;
    font-weight: 500;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 991px) {
    .achievement-images-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-achievement-banner {
        padding: 40px 30px;
    }

    .banner-title {
        font-size: 1.75rem;
    }

    .competition-image-wrapper {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .achievement-images-grid {
        grid-template-columns: 1fr;
    }

    .featured-achievement-banner {
        padding: 30px 20px;
    }

    .banner-title {
        font-size: 1.5rem;
    }

    .achievement-img-item img {
        height: 200px;
    }

    .competition-image-wrapper {
        height: 250px;
    }

    .competition-logo {
        max-width: 100px;
    }

    .competition-title {
        font-size: 1.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .experience-badge {
        width: 100px;
        height: 100px;
        padding: 1.5rem;
    }

    .experience-badge h3 {
        font-size: 2rem;
    }

    .feature-box {
        margin-bottom: 0 !important;
    }

    .activity-image {
        height: 270px;
    }

    .achievement-stat-card h3 {
        font-size: 2.5rem;
    }
}
/* ========================================
   ONE BELIEF, ENDLESS POSSIBILITIES SECTION
   Interactive hover cards with gradient backgrounds
   ======================================== */

.possibilities-section {
    position: relative;
    overflow: hidden;
}

/* Card Container */
.possibility-card {
    position: relative;
    height: 100%;
    min-height: 380px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Inner Wrapper */
.card-inner {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Gradient Overlay - Hidden by default */
.card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 20px;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Gradient backgrounds for each card */
.possibility-card[data-gradient="orange"] .card-inner::before {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.possibility-card[data-gradient="green"] .card-inner::before {
    background: linear-gradient(135deg, #27ae60 0%, #1abc9c 100%);
}

.possibility-card[data-gradient="red"] .card-inner::before {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.possibility-card[data-gradient="blue"] .card-inner::before {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.possibility-card[data-gradient="pink"] .card-inner::before {
    background: linear-gradient(135deg, #ff6ba6 0%, #ff8b3d 100%);
}

/* Hover Effect - Show gradient */
.possibility-card:hover .card-inner::before {
    opacity: 1;
}

/* Card Content - Above overlay */
.card-inner > * {
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

/* Icon Wrapper */
.card-icon-wrapper {
    margin-bottom: 25px;
}

/* Card Icon */
.card-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-icon i {
    font-size: 3rem;
    color: white;
    transition: all 0.4s ease;
}

/* Hover - Icon animation */
.possibility-card:hover .card-icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

.possibility-card:hover .card-icon i {
    transform: scale(1.1);
}

/* Card Title */
.card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2d2d2d;
    margin-bottom: 20px;
    font-family: var(--font-heading);
    line-height: 1.3;
    transition: color 0.4s ease;
}

/* Hover - Title color change */
.possibility-card:hover .card-title {
    color: white;
}

/* Card Description */
.card-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
    transition: color 0.4s ease;
}

/* Hover - Description color change */
.possibility-card:hover .card-description {
    color: rgba(255, 255, 255, 0.95);
}

/* Card Hover - Lift effect */
.possibility-card:hover {
    transform: translateY(-15px);
}

.possibility-card:hover .card-inner {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ========== RESPONSIVE DESIGN ========== */

/* Large Desktop */
@media (min-width: 1400px) {
    .card-inner {
        min-height: 400px;
        padding: 45px 35px;
    }
}

/* Tablets and Medium Desktop */
@media (max-width: 1199px) {
    .card-inner {
        min-height: 360px;
        padding: 35px 25px;
    }
    
    .card-icon {
        width: 90px;
        height: 90px;
    }
    
    .card-icon i {
        font-size: 2.75rem;
    }
    
    .card-title {
        font-size: 1.4rem;
    }
}

/* Small Tablets */
@media (max-width: 991px) {
    .possibility-card {
        min-height: 340px;
        margin-bottom: 20px;
    }
    
    .card-inner {
        min-height: 340px;
        padding: 30px 20px;
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
    }
    
    .card-icon i {
        font-size: 2.5rem;
    }
    
    .card-title {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    .card-description {
        font-size: 0.95rem;
    }
}

/* Mobile Devices */
@media (max-width: 767px) {
    .possibilities-section {
        padding: 60px 0;
    }
    
    .possibility-card {
        min-height: 320px;
        margin-bottom: 15px;
    }
    
    .card-inner {
        min-height: 320px;
        padding: 30px 25px;
    }
    
    .card-icon {
        width: 75px;
        height: 75px;
    }
    
    .card-icon i {
        font-size: 2.25rem;
    }
    
    .card-title {
        font-size: 1.25rem;
        margin-bottom: 15px;
    }
    
    .card-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* Small Mobile */
@media (max-width: 575px) {
    .card-inner {
        padding: 25px 20px;
    }
    
    .card-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .card-icon i {
        font-size: 2rem;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
}

/* ========== ACCESSIBILITY ========== */

/* Focus states for keyboard navigation */
.possibility-card:focus-within .card-inner {
    outline: 3px solid #f39c12;
    outline-offset: 3px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .possibility-card,
    .card-inner,
    .card-icon,
    .card-icon i,
    .card-title,
    .card-description {
        transition: none;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .possibility-card:hover .card-inner::before {
        opacity: 0;
    }
    
    .card-inner {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* ========================================
   ONE PROMISE, ONE PURPOSE SECTION
   Title on top, Image left with cards on right
   ======================================== */

   .promise-purpose-section {
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

/* ========== TOP SECTION: TITLE & DESCRIPTION ========== */

.promise-header {
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.promise-title-wrapper {
    flex: 0 0 40%;
    max-width: 40%;
}

.promise-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0;
    font-family: var(--font-heading);
    text-align: center;
}

.promise-title .title-black {
    color: #2d2d2d;
    font-weight: 800;
}

.promise-title .title-orange {
    color: #f39c12;
    font-weight: 800;
}

.promise-description-wrapper {
    flex: 0 0 55%;
    max-width: 55%;
}

.promise-description {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

/* ========== BOTTOM SECTION: IMAGE & CARDS CONTAINER ========== */

.promise-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* ========== LEFT SIDE: IMAGE ONLY ========== */

.promise-image-container {
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
}

/* 3:4 Aspect Ratio Container */
.promise-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%; /* 4/3 = 1.333... = 133.33% for 3:4 ratio */
    overflow: hidden;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.promise-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    transition: transform 0.4s ease;
}

/* ========== RIGHT SIDE: CARDS ONLY ========== */

.promise-cards-container {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* ========== FLOATING CARDS ========== */

.floating-card {
    padding: 35px 40px;
    border-radius: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.floating-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* Card Title */
.floating-card-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    line-height: 1.3;
}

/* Card Text */
.floating-card-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

/* ========== CARD COLORS ========== */

/* Orange Cards */
.card-orange {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

/* Purple Card */
.card-purple {
    background: linear-gradient(135deg, #6b5b7e 0%, #4a3d5c 100%);
}

/* ========== RESPONSIVE DESIGN ========== */

/* Extra Large Desktop (1600px+) */
@media (min-width: 1600px) {
    .promise-title {
        font-size: 4rem;
    }
    
    .promise-content-wrapper {
        gap: 80px;
    }
    
    .floating-card {
        padding: 40px 45px;
    }
    
    .floating-card-title {
        font-size: 1.75rem;
    }
}

/* Large Desktop (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
    .promise-content-wrapper {
        gap: 60px;
    }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
    .promise-content-wrapper {
        gap: 40px;
    }
    
    .promise-image-container {
        flex: 0 0 43%;
        max-width: 43%;
    }
    
    .promise-cards-container {
        flex: 0 0 52%;
        max-width: 52%;
    }
}

/* Laptop/Tablet Landscape (992px - 1199px) */
@media (max-width: 1199px) {
    .promise-purpose-section {
        padding: 70px 0;
    }
    
    .promise-header {
        margin-bottom: 50px;
    }
    
    .promise-title {
        font-size: 3rem;
    }
    
    .promise-description {
        font-size: 1.08rem;
    }
    
    .promise-content-wrapper {
        gap: 35px;
    }
    
    .floating-card {
        padding: 30px 35px;
    }
    
    .floating-card-title {
        font-size: 1.45rem;
    }
    
    .floating-card-text {
        font-size: 1rem;
    }
}

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) {
    .promise-purpose-section {
        padding: 60px 0;
    }
    
    /* Stack header layout vertically */
    .promise-header {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }
    
    .promise-title-wrapper,
    .promise-description-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    
    .promise-title {
        font-size: 2.75rem;
    }
    
    .promise-description {
        font-size: 1.05rem;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Stack layout vertically */
    .promise-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .promise-image-container,
    .promise-cards-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .promise-image-container {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Adjust aspect ratio for tablet */
    .promise-image-wrapper {
        padding-bottom: 120%; /* Slightly taller for tablet */
    }
    
    .promise-cards-container {
        gap: 20px;
    }
    
    .floating-card {
        padding: 28px 32px;
    }
    
    .floating-card-title {
        font-size: 1.35rem;
    }
    
    .floating-card-text {
        font-size: 0.98rem;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
    .promise-purpose-section {
        padding: 50px 0;
    }
    
    .promise-header {
        gap: 25px;
        margin-bottom: 40px;
    }
    
    .promise-title {
        font-size: 2.25rem;
    }
    
    .promise-description {
        font-size: 1.02rem;
    }
    
    .promise-content-wrapper {
        gap: 35px;
    }
    
    .promise-image-wrapper {
        border-radius: 30px;
        padding-bottom: 125%; /* Adjusted for mobile */
    }
    
    .promise-main-image {
        border-radius: 30px;
    }
    
    .floating-card {
        padding: 25px 30px;
        border-radius: 30px;
    }
    
    .floating-card-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    .floating-card-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
    .promise-purpose-section {
        padding: 40px 0;
    }
    
    .promise-header {
        gap: 20px;
        margin-bottom: 35px;
    }
    
    .promise-title {
        font-size: 2rem;
    }
    
    .promise-description {
        font-size: 0.98rem;
        line-height: 1.7;
    }
    
    .promise-content-wrapper {
        gap: 30px;
    }
    
    .promise-image-wrapper {
        border-radius: 25px;
        padding-bottom: 130%; /* Taller for small mobile */
    }
    
    .promise-main-image {
        border-radius: 25px;
    }
    
    .floating-card {
        padding: 22px 28px;
        border-radius: 25px;
    }
    
    .floating-card-title {
        font-size: 1.2rem;
    }
    
    .floating-card-text {
        font-size: 0.92rem;
    }
}

/* Extra Small Mobile (< 400px) */
@media (max-width: 399px) {
    .promise-title {
        font-size: 1.75rem;
    }
    
    .promise-description {
        font-size: 0.95rem;
    }
    
    .floating-card {
        padding: 20px 25px;
    }
    
    .floating-card-title {
        font-size: 1.15rem;
    }
    
    .floating-card-text {
        font-size: 0.9rem;
    }
}

/* ========== ANIMATIONS ========== */

/* Subtle scale animation on scroll */
@media (min-width: 992px) {
    .floating-card {
        animation: fadeInUp 0.6s ease-out backwards;
    }
    
    .floating-card:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .floating-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .floating-card:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ========== ACCESSIBILITY ========== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .floating-card {
        animation: none !important;
        transition: none;
    }
}

/* Focus states */
.floating-card:focus-within {
    outline: 3px solid #f39c12;
    outline-offset: 3px;
}

.floating-card:focus {
    outline: 3px solid #f39c12;
    outline-offset: 3px;
}

/* ========== PRINT STYLES ========== */
@media print {
    .promise-purpose-section {
        padding: 40px 0;
        background: white;
    }
    
    .promise-content-wrapper {
        flex-direction: column;
    }
    
    .floating-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 2px solid #ddd;
        margin-bottom: 15px;
    }
}

/* ========== ENHANCED VISUAL EFFECTS ========== */

/* Add subtle backdrop effect on hover */
@media (min-width: 992px) {
    .floating-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 35px;
        background: rgba(255, 255, 255, 0.05);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .floating-card:hover::before {
        opacity: 1;
    }
}

/* Smooth transitions */
.promise-image-wrapper,
.floating-card {
    will-change: transform;
}

/* Image hover effect */
.promise-image-container:hover .promise-main-image {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .promise-image-container:hover .promise-main-image {
        transform: none;
    }
}