/* ---------- Section wrapper ---------- */
#alwTabsSection {
    background: #fff;
    padding: 80px 0; /* single value (was split: 56px then 80px) */
    color: #0a0a0a;
    position: relative;
}

    /* ---------- Inner container ---------- */
    #alwTabsSection .tab-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        background: transparent;
    }

    /* ============================================================
   TABS BAR
   ============================================================ */
    #alwTabsSection .tabs {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
        padding-bottom: 10px;
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 28px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        background: #fff;
    }

        #alwTabsSection .tabs::-webkit-scrollbar {
            display: none;
        }

        /* ---------- Tab buttons ---------- */
        #alwTabsSection .tabs .tab-link {
            -webkit-appearance: none;
            appearance: none;
            border: 0;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 44px;
            padding: 0 18px;
            box-sizing: border-box;
            border-radius: 22px;
            background: transparent;
            color: #666;
            font: 600 16px/1 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            white-space: nowrap;
            cursor: pointer;
            vertical-align: middle;
            transform: translateZ(0);
            transition: background 0.25s, color 0.25s, box-shadow 0.25s;
        }

            #alwTabsSection .tabs .tab-link i {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                font-size: 16px;
                line-height: 1;
                flex: 0 0 18px;
                opacity: 0.75;
                transition: opacity 0.25s;
            }

            #alwTabsSection .tabs .tab-link:hover {
                background: #f4f4f4;
                color: #111;
            }

            #alwTabsSection .tabs .tab-link.active {
                background: #f4f4f4;
                color: #111;
            }

                #alwTabsSection .tabs .tab-link.active i {
                    opacity: 1;
                }

    /* ---------- Animated underline (desktop only) ---------- */
    #alwTabsSection .tab-underline {
        position: absolute;
        bottom: -1px;
        height: 3px;
        border-radius: 2px;
        background: #000;
        background-size: 200% auto;
        animation: alwUnderlineSweep 6s linear infinite;
        transition: left 0.35s ease, width 0.35s ease;
    }

@keyframes alwUnderlineSweep {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ============================================================
   TAB CONTENT VISIBILITY
   ============================================================ */
#alwTabsSection .tab-content {
    display: none;
}

    #alwTabsSection .tab-content.active {
        display: block;
    }

/* ============================================================
   CARDS
   ============================================================ */
#alwTabsSection .card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    #alwTabsSection .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    #alwTabsSection .card img {
        width: 100%;
        height: 220px;
        display: block;
        object-fit: cover;
        flex: 0 0 auto;
    }

#alwTabsSection .card-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

#alwTabsSection .tag {
    display: inline-block;
    background: #002147;
    color: #fff;
    font: 600 12px/1 "Poppins", sans-serif;
    letter-spacing: 0.2px;
    padding: 6px 12px;
    border-radius: 999px;
}

#alwTabsSection .card-body h4 {
    margin: 6px 0 0;
    font: 600 16px/1.35 "Poppins", sans-serif;
    color: #0a0a0a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#alwTabsSection .card-body p {
    margin: 0;
    color: #666;
    font: 400 14px/1.6 "Poppins", sans-serif;
}

#alwTabsSection .date-row {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 14px;
}

/* ============================================================
   OWL CAROUSEL
   ============================================================ */

/* Fallback grid before Owl JS initialises */
#alwTabsSection .owl-carousel:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Dots */
#alwTabsSection .owl-dots {
    margin-top: 14px;
}

/* ---------- Nav wrapper ---------- */
#alwTabsSection .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: -12px;
    right: -12px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 20;
    padding: 0 8px;
}

    /* ---------- Arrow buttons (single consolidated rule) ---------- */
    #alwTabsSection .owl-carousel .owl-nav button {
        pointer-events: auto;
        position: relative;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ddd !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        padding: 0;
        margin: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: background 0.25s ease, transform 0.25s ease;
    }

        /* Icon: absolutely centered for pixel-perfect alignment */
        #alwTabsSection .owl-carousel .owl-nav button i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            line-height: 1;
            color: #111;
            display: block;
            margin: 0;
            padding: 0;
        }

        /* Hover state */
        #alwTabsSection .owl-carousel .owl-nav button:hover {
            background: #000;
            transform: scale(1.06);
        }

            #alwTabsSection .owl-carousel .owl-nav button:hover i {
                color: #fff;
            }

/* ============================================================
   AOS FALLBACK
   ============================================================ */
html:not(.aos-enabled) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   FOOTER VARIABLES (keep as-is)
   ============================================================ */
:root {
    --grad-strong: linear-gradient(90deg, #00b4ff 0%, #00ffa3 15%, #ffd84d 40%, #ffc300 70%, #ffae00 100%);
}

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

/* — 1024px — */
@media (max-width: 1024px) {
    #alwTabsSection .card img {
        height: 210px;
    }

    #alwTabsSection .owl-carousel:not(.owl-loaded) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* — 768px — */
@media (max-width: 768px) {
    #alwTabsSection {
        padding: 60px 0;
    }

        #alwTabsSection .tab-container {
            padding: 0 16px;
        }

        /* Tabs */
        #alwTabsSection .tabs {
            gap: 12px;
            padding: 10px 12px;
        }

            #alwTabsSection .tabs .tab-link {
                font-size: 15px;
                padding: 0 14px;
                height: 44px;
            }

        /* Hide desktop underline on mobile */
        #alwTabsSection .tab-underline {
            display: none !important;
        }

        /* Active pill styling on mobile */
        #alwTabsSection .tabs .tab-link.active {
            background: #111;
            color: #fff;
        }

            #alwTabsSection .tabs .tab-link.active i {
                color: #fff;
            }

        /* Card image */
        #alwTabsSection .owl-carousel .card img {
            height: 180px;
        }

        /* Nav arrows */
        #alwTabsSection .owl-carousel .owl-nav {
            left: -6px;
            right: -6px;
        }

            #alwTabsSection .owl-carousel .owl-nav button {
                width: 40px;
                height: 40px;
            }

                #alwTabsSection .owl-carousel .owl-nav button i {
                    font-size: 18px;
                }
}

/* — 576px — */
@media (max-width: 576px) {
    #alwTabsSection .owl-carousel:not(.owl-loaded) {
        grid-template-columns: 1fr;
    }
}

/* — 480px — */
@media (max-width: 480px) {
    #alwTabsSection .card img {
        height: 200px;
    }

    #alwTabsSection .tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

        #alwTabsSection .tabs::-webkit-scrollbar {
            display: none;
        }
}

/* about */

.vda-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 650px;
    width: 100%;
    overflow: hidden;
}

.vda-about-left {
    background: linear-gradient(135deg, #000000 0%, #0f0f0f 50%, #111111 100%);
    padding: 80px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .vda-about-left::before {
        content: "";
        position: absolute;
        top: -100px;
        left: -120px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, #00b4ff40, transparent 70%);
        filter: blur(60px);
        pointer-events: none;
    }

    .vda-about-left::after {
        content: "";
        position: absolute;
        bottom: -120px;
        right: -120px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, #ffae0040, transparent 70%);
        filter: blur(60px);
        pointer-events: none;
    }

.vda-about-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 25px;
    display: block;
}

.vda-about-left h2 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 40px;
    line-height: 0.95;
    margin-bottom: 35px;
    color: #ffffff;
}

.vda-about-left p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #d6d6d6;
    max-width: 100%;
    text-align: justify;
}

.vda-about-left strong {
    color: #ffae00;
}

.vda-about-right {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

    .vda-about-right img {
        width: 100%;
        height: 100%;
        max-height: 920px;
        object-fit: cover;
        border-radius: 6px;
        display: block;
    }

/* ============================================================
   GOLD ACCENT LINE (new element added in HTML)
   ============================================================ */
.vda-accent-line {
    display: block;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #ffae00, #fff176);
    border-radius: 2px;
    margin: -20px 0 28px 0;
}

/* ============================================================
   HIDDEN STATES — before .vda-in fires
   ============================================================ */

/* Left panel — slams in from left */
.vda-about-split .vda-about-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Right panel — slams in from right */
.vda-about-split .vda-about-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Heading — starts blurred, snaps sharp */
.vda-about-split .vda-about-left h2 {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.96);
    transition: opacity 0.5s ease 0.3s, filter 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

/* Label — fades in */
.vda-about-split .vda-about-label {
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

/* Paragraphs — fade up as one group */
.vda-about-split .vda-about-left p {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease 0.55s, transform 0.55s ease 0.55s;
}

/* Image — starts zoomed in, settles to normal */
.vda-about-split .vda-about-right img {
    transform: scale(1.12);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* Gold line — shoots across */
.vda-about-split .vda-accent-line {
    width: 0;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

/* ============================================================
   ACTIVE STATES — after .vda-in fires
   ============================================================ */
.vda-about-split.vda-in .vda-about-left {
    opacity: 1;
    transform: translateX(0);
}

.vda-about-split.vda-in .vda-about-right {
    opacity: 1;
    transform: translateX(0);
}

.vda-about-split.vda-in .vda-about-left h2 {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

.vda-about-split.vda-in .vda-about-label {
    opacity: 1;
}

.vda-about-split.vda-in .vda-about-left p {
    opacity: 1;
    transform: translateY(0);
}

.vda-about-split.vda-in .vda-about-right img {
    transform: scale(1);
}

.vda-about-split.vda-in .vda-accent-line {
    width: 72px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .vda-about-left {
        padding: 60px 40px;
    }

        .vda-about-left h2 {
            font-size: 38px;
        }

        .vda-about-left p {
            font-size: 16px;
        }
}

@media (max-width: 768px) {
    .vda-about-split {
        grid-template-columns: 1fr;
    }

        /* On mobile — drop X slide, use Y only (safer) */
        .vda-about-split .vda-about-left {
            transform: translateY(50px);
            order: 2;
            padding: 40px 22px;
        }

        .vda-about-split .vda-about-right {
            transform: translateY(-30px);
            order: 1;
            width: 100%;
            height: auto;
            min-height: 260px;
        }

        .vda-about-split.vda-in .vda-about-left,
        .vda-about-split.vda-in .vda-about-right {
            transform: translateY(0);
        }

    .vda-about-right img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        border-radius: 0;
        /* keep scale animation but softer on mobile */
        transform: scale(1.05);
    }

    .vda-about-split.vda-in .vda-about-right img {
        transform: scale(1);
    }

    .vda-about-left h2 {
        font-size: 28px;
        line-height: 1.15;
    }

    .vda-about-left p {
        font-size: 15px;
        text-align: left;
    }

    .vda-about-left::before,
    .vda-about-left::after {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .vda-about-left {
        padding: 32px 18px;
    }

        .vda-about-left h2 {
            font-size: 24px;
            line-height: 1.2;
            margin-bottom: 24px;
        }

    .vda-about-label {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .vda-about-right {
        min-height: 200px;
    }
}


/* why */

.why-vda .why-card {
    animation: none !important;
}

/* ── Section ── */
.why-vda {
    padding: 80px 20px;
    background: #f4f6f8;
    overflow: hidden;
    position: relative;
}

    .why-vda .container {
        max-width: 1300px;
        margin: auto;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    /* ── Title ── */
    .why-vda .why-title {
        font-family: 'Oswald', sans-serif;
        font-size: 30px;
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 15px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .why-vda .why-subtitle {
        max-width: 860px;
        margin: 0 auto 50px;
        color: #555;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }

    /* When section is active — title + subtitle appear */
    .why-vda.vda-active .why-title,
    .why-vda.vda-active .why-subtitle {
        opacity: 1;
        transform: translateY(0);
    }

    /* ── Grid ── */
    .why-vda .why-grid {
        display: grid;
        padding-top: 30px;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* ── Card hidden state ── */
    .why-vda .why-card {
        background: #fff;
        padding: 18px;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.10);
        text-align: left;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* Hidden — 3D tilted (desktop) */
        opacity: 0;
        transform: perspective(600px) rotateX(25deg) translateY(50px);
        transform-origin: bottom center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }

        /* ── Card visible ── */
        .why-vda .why-card.vda-card-show {
            opacity: 1 !important;
            transform: perspective(600px) rotateX(0deg) translateY(0) !important;
        }

/* Hover — only real pointer devices (not touch) */
@media (hover: hover) and (pointer: fine) {
    .why-vda .why-card.vda-card-show:hover {
        transform: translateY(-10px) scale(1.02) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    }

        .why-vda .why-card.vda-card-show:hover img {
            transform: scale(1.08);
        }
}

/* ── Image wrap ── */
.why-vda .why-card .img-wrap {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
}

.why-vda .why-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.why-vda .why-card.vda-card-show:hover img {
    transform: scale(1.08);
}

/* ── Text ── */
.why-vda .why-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #000;
}

.why-vda .why-card p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .why-vda .why-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 24px;
    }

    .why-vda .why-card img {
        height: 210px;
    }
}

/* On touch/mobile — swap 3D for simple translateY to avoid iOS flicker */
@media (max-width: 768px) {
    .why-vda .why-card {
        transform: translateY(50px); /* no perspective/rotateX on mobile */
    }

        .why-vda .why-card.vda-card-show {
            transform: translateY(0) !important;
        }
}

@media (max-width: 600px) {
    .why-vda {
        padding: 60px 16px;
    }

        .why-vda .why-title {
            font-size: 24px;
        }

        .why-vda .why-subtitle {
            font-size: 14px;
            margin-bottom: 30px;
        }

        .why-vda .why-grid {
            grid-template-columns: 1fr;
            gap: 20px;
            padding-top: 20px;
        }

        .why-vda .why-card img {
            height: 200px;
        }

        .why-vda .why-card h3 {
            font-size: 16px;
        }

        .why-vda .why-card p {
            font-size: 14px;
        }
}

@media (max-width: 400px) {
    .why-vda .why-title {
        font-size: 21px;
    }

    .why-vda .why-card img {
        height: 180px;
    }
}
        /* programmes*/


/* ── Section ── */
.mouSection {
    background: #1c1c1c;
    padding: 80px 20px;
    color: #fff;
    /* Slide-up initial state */
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Triggered by JS — slides into view */
.mouSection.show {
    opacity: 1;
    transform: translateY(0);
}

/* ── Container ── */
.mouContainer {
    max-width: 1200px;
    margin: auto;
}

/* ── Title ── */
.mouTitle {
    font-size: 38px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin-bottom: 0;
}

/* ── Subtitle ── */
.mouSubtitle {
    text-align: center;
    color: #aaa;
    max-width: 700px;
    margin: 15px auto 50px;
    line-height: 1.7;
}

/* ── Grid ── */
.mouGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: stretch; /* equal height cards */
}

/* ── Card ── */
.mouCard {
    flex: 0 0 360px;
    max-width: 360px;
    background: #0f0f0f;
    padding: 35px 30px;
    border-radius: 18px;
    border: 1px solid rgba(253, 188, 1, 0.2);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column; /* push footer to bottom */
}

    .mouCard:hover {
        transform: translateY(-10px);
        border-color: #FDBC01;
        box-shadow: 0 0 25px rgba(253, 188, 1, 0.25);
    }

/* ── Logo ── */
.mouLogo {
    height: 95px;
    width: 100%;
    max-width: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto 25px;
    transition: transform 0.4s ease;
}

.mouCard:hover .mouLogo {
    transform: scale(1.08);
}

/* ── Card heading ── */
.mouCard h3 {
    font-size: 20px;
    color: #FDBC01;
    margin-bottom: 12px;
}

/* ── Description ── */
.mouDesc {
    color: #bbb;
    margin-bottom: 18px;
    line-height: 1.7;
    font-size: 14px;
}

/* ── Schedule block ── */
.mou-schedule {
    margin: 0 0 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(253, 188, 1, 0.15);
    flex: 1 1 auto; /* grow to fill space → equal card heights */
}

.mou-schedule-header {
    background: rgba(253, 188, 1, 0.1);
    padding: 10px 14px;
    border-bottom: 1px solid rgba(253, 188, 1, 0.15);
}

/* ── Badge (pulsing) ── */
.mou-badge {
    background: #FDBC01;
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    display: inline-block;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 188, 1, 0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(253, 188, 1, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(253, 188, 1, 0);
    }
}

/* ── Day rows ── */
.mou-days {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mou-days li {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        min-height: 40px;
    }

        .mou-days li:last-child {
            border-bottom: none;
        }

.mou-day-label {
    flex: 0 0 90px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #FDBC01;
    background: rgba(253, 188, 1, 0.06);
    border-right: 1px solid rgba(253, 188, 1, 0.12);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.mou-day-desc {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #ddd;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

/* ── Footer ── */
.mouFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    margin-top: auto; /* always pinned to bottom */
}

    .mouFooter span {
        font-size: 13px;
        color: #aaa;
    }

    /* Apply button */
    .mouFooter a {
        background: #FDBC01;
        color: #000;
        padding: 8px 18px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        position: relative;
        animation: buttonPulse 2.5s infinite;
        transition: background 0.3s ease;
    }

@keyframes buttonPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}

.mouFooter a:hover {
    background: #ffcf40;
    animation: none;
    transform: scale(1);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .mouSection {
        padding: 60px 16px;
    }

    .mouTitle {
        font-size: 26px;
    }

    .mouSubtitle {
        font-size: 14px;
        margin-bottom: 36px;
    }

    .mouCard {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 25px 20px;
    }

    .mouLogo {
        height: 80px;
        max-width: 180px;
    }

    .mouCard h3 {
        font-size: 18px;
    }

    .mou-day-label {
        flex: 0 0 80px;
        font-size: 11px;
    }

    .mou-day-desc {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .mouTitle {
        font-size: 22px;
    }

    .mouCard {
        padding: 20px 16px;
    }
}

/* daywisetraining*/

#daywisetraining {
    background: #fff !important;
    color: #000;
    padding-top: 40px !important;
    padding-bottom: 65px !important;
    font-family: "Poppins", sans-serif;
}

    #daywisetraining .container {
        background: #fff;
    }

    #daywisetraining .cg-header {
        background: #fff !important;
    }

/* ============================================================
   HEADER — STICKY
   ============================================================ */
.cg-header-sticky {
    position: sticky;
    top: 100px;
    z-index: 20;
    background: #fff !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

.cg-header {
    text-align: center;
    margin: 0;
    padding: 0;
}

    /* Header h2 — eyebrow label */
    .cg-header h2 {
        font-family: "Outfit", sans-serif;
        letter-spacing: 0.25rem;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #999;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        line-height: 1.4;
        /* animation */
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Header h4 — big statement */
    .cg-header h4 {
        font-family: 'Playfair Display', serif;
        font-size: 28px !important;
        font-weight: 700;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3;
        letter-spacing: -0.3px;
        /* animation */
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
    }

    .cg-header.cg-header-in h2 {
        opacity: 1;
        transform: translateY(0);
    }

    .cg-header.cg-header-in h4 {
        opacity: 1;
        transform: translateY(0);
    }

/* ============================================================
   LEFT MENU
   ============================================================ */
.cg-menu-wrapper {
    position: sticky !important;
    top: 250px;
    padding: 28px 24px;
    background: #0a0a0a;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.cg-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

    .cg-menu li {
        font-size: 15px;
        font-weight: 400;
        color: #666;
        padding: 14px 0 14px 16px;
        cursor: pointer;
        opacity: 0;
        transform: translateX(-20px);
        transition: color 0.25s ease, background 0.25s ease, padding 0.25s ease;
        border-radius: 8px;
        line-height: 1.4;
    }

        .cg-menu li:hover {
            color: #ccc;
            padding-left: 20px;
        }

        .cg-menu li.active {
            color: #fff;
            font-weight: 600;
            background: rgba(255,255,255,0.05);
            padding-left: 20px;
        }

.cg-active-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 28px;
    background: linear-gradient(180deg, #00b4ff, #ffae00);
    border-radius: 5px;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), height 0.3s ease;
}

/* ============================================================
   RIGHT CONTENT CARDS — MODERN
   ============================================================ */
.cg-section {
    background: #fff;
    border-radius: 24px;
    padding: 44px 48px;
    margin-bottom: 32px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    /* animation — reset state */
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}

    /* Active card */
    .cg-section.cg-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Reset when scrolled out — allows re-animation on scroll back */
    .cg-section.cg-hidden {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .cg-section:hover {
        box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 20px 48px rgba(0,0,0,0.10);
    }

    /* Large bg number — decorative */
    .cg-section::before {
        content: attr(data-day);
        position: absolute;
        top: -10px;
        right: 30px;
        font-family: 'Outfit', sans-serif;
        font-size: 130px;
        font-weight: 900;
        color: rgba(0,0,0,0.03);
        line-height: 1;
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

/* ============================================================
   SECTION HEADING — MODERN NUMBERED STYLE
   ============================================================ */
.cg-section-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.cg-section:not(.cg-visible) .cg-section-head {
    opacity: 0;
    transform: translateX(-20px);
}

.cg-section.cg-visible .cg-section-head {
    opacity: 1;
    transform: translateX(0);
}

.cg-section.cg-hidden .cg-section-head {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cg-day-num {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 4px;
    transition: opacity 0.4s ease 0.2s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.2s;
}

.cg-section:not(.cg-visible) .cg-day-num {
    opacity: 0;
    transform: scale(0.5);
}

.cg-section.cg-visible .cg-day-num {
    opacity: 1;
    transform: scale(1);
}

.cg-section.cg-hidden .cg-day-num {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cg-head-text {
    flex: 1;
}

/* Day label */
.cg-day-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 4px;
    display: block;
}

/* Main heading */
.cg-section h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

/* Animated underline bar */
.cg-underline {
    display: block;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #00b4ff, #ffae00);
    border-radius: 2px;
    margin-top: 8px;
    transition: width 0.7s cubic-bezier(0.22,1,0.36,1) 0.35s;
}

.cg-section.cg-visible .cg-underline {
    width: 56px;
}

.cg-section.cg-hidden .cg-underline {
    width: 0;
    transition: width 0.2s ease;
}

/* Description paragraph */
#daywisetraining .cg-section p {
    font-size: 15px;
    color: #666;
    line-height: 1.75;
    margin: 0 0 28px 0;
    position: relative;
    z-index: 1;
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

#daywisetraining .cg-section:not(.cg-visible) p {
    opacity: 0;
    transform: translateY(10px);
}

#daywisetraining .cg-section.cg-visible p {
    opacity: 1;
    transform: translateY(0);
}

#daywisetraining .cg-section.cg-hidden p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================
   BULLET POINTS — MODERN CHIP GRID
   ============================================================ */
#daywisetraining .cg-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    position: relative;
    z-index: 1;
}

    #daywisetraining .cg-section ul li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
        /* NO opacity:0 here — controlled only by parent classes below */
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.45s ease, transform 0.45s ease;
    }

/* Hover on chips — desktop only */
@media (hover: hover) and (pointer: fine) {
    #daywisetraining .cg-section ul li:hover {
        background: #fff;
        border-color: #000;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
}

/* Chip icon dot */
#daywisetraining .cg-section ul li::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    margin-top: 5px;
    flex-shrink: 0;
}

/* DEFAULT — chips hidden only when card has NO class yet OR is hidden */
#daywisetraining .cg-section:not(.cg-visible) ul li {
    opacity: 0;
    transform: translateY(16px);
}

/* VISIBLE — stagger each chip in */
.cg-section.cg-visible ul li {
    opacity: 1;
    transform: translateY(0);
}

    .cg-section.cg-visible ul li:nth-child(1) {
        transition-delay: 0.30s;
    }

    .cg-section.cg-visible ul li:nth-child(2) {
        transition-delay: 0.38s;
    }

    .cg-section.cg-visible ul li:nth-child(3) {
        transition-delay: 0.46s;
    }

    .cg-section.cg-visible ul li:nth-child(4) {
        transition-delay: 0.54s;
    }

    .cg-section.cg-visible ul li:nth-child(5) {
        transition-delay: 0.62s;
    }

    .cg-section.cg-visible ul li:nth-child(6) {
        transition-delay: 0.70s;
    }

    .cg-section.cg-visible ul li:nth-child(7) {
        transition-delay: 0.78s;
    }

    .cg-section.cg-visible ul li:nth-child(8) {
        transition-delay: 0.86s;
    }

    .cg-section.cg-visible ul li:nth-child(9) {
        transition-delay: 0.94s;
    }

/* HIDDEN — snap back instantly, no delay */
.cg-section.cg-hidden ul li {
    opacity: 0;
    transform: translateY(16px);
    transition-delay: 0s !important;
}

/* ============================================================
   MEDIA — images/video
   ============================================================ */
.cg-section img, .cg-section video {
    width: 100%;
    margin-top: 20px;
    border-radius: 16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    #daywisetraining {
        padding-top: 30px !important;
        padding-bottom: 45px !important;
    }

        #daywisetraining .col-lg-4, .cg-menu-wrapper {
            display: none !important;
        }

        #daywisetraining .col-lg-8 {
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }

    .cg-header-sticky {
        position: static !important;
        top: unset !important;
        margin-bottom: 20px !important;
    }

    .cg-header h4 {
        font-size: 20px !important;
    }

    .cg-section {
        padding: 28px 22px;
        border-radius: 18px;
    }

        .cg-section h3 {
            font-size: 19px;
        }

    #daywisetraining .cg-section ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .cg-section {
        padding: 22px 18px;
    }

    .cg-day-num {
        width: 42px;
        height: 42px;
        font-size: 15px;
        flex: 0 0 42px;
    }

    .cg-section h3 {
        font-size: 17px;
    }

    #daywisetraining .cg-section ul li {
        font-size: 13px;
        padding: 12px 14px;
    }
}

/* opportunities*/

.drone-opportunities {
    padding: 80px 20px;
    background: #000;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    /* ── Scanline sweep — fires once on section enter ── */
    .drone-opportunities::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(0,180,255,0.06) 40%, rgba(255,174,0,0.08) 60%, transparent 100%);
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    .drone-opportunities.do-active::after {
        animation: doScanline 1.2s cubic-bezier(0.4,0,0.2,1) 0.1s forwards;
    }

@keyframes doScanline {
    0% {
        left: -60%;
        opacity: 1;
    }

    100% {
        left: 160%;
        opacity: 1;
    }
}

.drone-opportunities .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: auto;
}

/* ── Header elements ── */
.drone-opportunities .section-label {
    font-size: 11px;
    letter-spacing: 3px;
    color: #555;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.drone-opportunities.do-active .section-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.drone-opportunities .section-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
    line-height: 1.15;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.drone-opportunities.do-active .section-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.drone-opportunities .section-desc {
    max-width: 700px;
    margin: 0 auto 50px;
    color: #bbb;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.drone-opportunities.do-active .section-desc {
    opacity: 1;
    transition-delay: 0.5s;
}

/* ============================================================
   GRID
   ============================================================ */
.drone-opportunities .industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

/* ============================================================
   CARDS — alternating slam-in
   ============================================================ */
.drone-opportunities .industry-card {
    background: #111;
    padding: 28px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
    position: relative;
    overflow: hidden;
    /* hidden: odd from left, even from right — set by JS */
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
}

    .drone-opportunities .industry-card.do-from-left {
        transform: translateX(-60px) scale(0.95);
    }

    .drone-opportunities .industry-card.do-from-right {
        transform: translateX( 60px) scale(0.95);
    }

    /* Card visible */
    .drone-opportunities .industry-card.do-card-in {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    /* Card reset (scroll out) */
    .drone-opportunities .industry-card.do-card-out {
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

        .drone-opportunities .industry-card.do-card-out.do-from-left {
            transform: translateX(-60px) scale(0.95);
        }

        .drone-opportunities .industry-card.do-card-out.do-from-right {
            transform: translateX( 60px) scale(0.95);
        }

    /* Gradient border on hover */
    .drone-opportunities .industry-card:hover {
        border-color: transparent;
        background: linear-gradient(#111, #111) padding-box, linear-gradient(90deg, #00b4ff, #ffae00) border-box;
        box-shadow: 0 0 30px rgba(0,180,255,0.12), 0 0 60px rgba(255,174,0,0.06);
        transform: translateY(-6px) !important;
    }

    /* ── Glint line — sweeps across card on enter ── */
    .drone-opportunities .industry-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
        pointer-events: none;
        z-index: 0;
    }

    .drone-opportunities .industry-card.do-card-in::before {
        animation: cardGlint 0.7s ease forwards;
    }

@keyframes cardGlint {
    0% {
        left: -60%;
    }

    100% {
        left: 160%;
    }
}

/* ============================================================
   CARD CONTENT — reveal after card lands
   ============================================================ */

/* Icon */
.drone-opportunities .industry-card i {
    font-size: 34px;
    margin-bottom: 12px;
    display: block;
    background: #FDBC01;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.drone-opportunities .industry-card.do-card-in i {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}

.drone-opportunities .industry-card.do-card-out i {
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
    transition-delay: 0s !important;
}

/* Heading */
.drone-opportunities .industry-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    z-index: 1;
    line-height: 1.3;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.drone-opportunities .industry-card.do-card-in h3 {
    opacity: 1;
    transform: translateX(0);
}

.drone-opportunities .industry-card.do-card-out h3 {
    opacity: 0;
    transform: translateX(-12px);
    transition-delay: 0s !important;
}

/* List */
.drone-opportunities .industry-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Each li — terminal-style sequential reveal */
.drone-opportunities .industry-card li {
    padding: 5px 0 5px 18px;
    font-size: 13px;
    color: #aaa;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease;
}

    .drone-opportunities .industry-card li:last-child {
        border-bottom: none;
    }

    /* Dot prefix */
    .drone-opportunities .industry-card li::before {
        content: "›";
        position: absolute;
        left: 0;
        color: #FDBC01;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.4;
    }

/* Stagger li reveal */
.drone-opportunities .industry-card.do-card-in li:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.40s;
}

.drone-opportunities .industry-card.do-card-in li:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.50s;
}

.drone-opportunities .industry-card.do-card-in li:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.60s;
}

.drone-opportunities .industry-card.do-card-in li:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.70s;
}

/* Reset li */
.drone-opportunities .industry-card.do-card-out li {
    opacity: 0 !important;
    transform: translateX(-8px) !important;
    transition-delay: 0s !important;
}

/* Li hover */
.drone-opportunities .industry-card.do-card-in li:hover {
    color: #fff;
    padding-left: 22px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .drone-opportunities .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .drone-opportunities {
        padding: 60px 16px;
    }

        .drone-opportunities .section-title {
            font-size: 28px;
        }

        .drone-opportunities .industry-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        /* No X-slide on mobile — use Y only */
        .drone-opportunities .industry-card.do-from-left,
        .drone-opportunities .industry-card.do-from-right {
            transform: translateY(30px) scale(0.97);
        }

        .drone-opportunities .industry-card.do-card-out.do-from-left,
        .drone-opportunities .industry-card.do-card-out.do-from-right {
            transform: translateY(30px) scale(0.97);
        }

        /* No hover on touch */
        .drone-opportunities .industry-card:hover {
            transform: none !important;
        }
}

/*faqs*/

.faq-sec {
    background: linear-gradient(90deg, #06B6D4 0%, #5EEAD4 10%, #F9C80E 55%, #E89C00 90%);
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.faq-pattern-blob {
    display: none;
}

.faq-sec .container {
    position: relative;
    z-index: 3;
}

/* ── Page texture overlay ── */
.faq-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( 0deg, transparent, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px );
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   HEADER ANIMATION — pages flutter in
   ============================================================ */
.faq-sec .about-title1 {
    color: #001442;
    font-weight: 800;
    margin-bottom: 15px;
    opacity: 0;
    transform: rotateX(-40deg) translateY(-30px);
    transform-origin: top center;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
    perspective: 600px;
}

.faq-sec .lead {
    opacity: 0;
    transform: rotateX(-25deg) translateY(-15px);
    transform-origin: top center;
    transition: opacity 0.6s ease 0.2s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s;
}

.faq-sec.faq-in .about-title1 {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
}

.faq-sec.faq-in .lead {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
}

/* ============================================================
   ACCORDION WRAPPER — book cover
   ============================================================ */
.accordion-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffffff, #f9f7f3);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06), 6px 6px 0 rgba(0,0,0,0.04), /* book depth shadow */
    12px 12px 0 rgba(0,0,0,0.02);
    border-left: 6px solid #D4AF37;
    /* Book cover flips open */
    opacity: 0;
    transform: perspective(1200px) rotateY(-18deg) scale(0.96);
    transform-origin: left center;
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s;
}

.faq-sec.faq-in .accordion-wrapper {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) scale(1);
}

/* ============================================================
   ACCORDION ITEMS — each page flips in
   ============================================================ */
.accordion-item {
    border: none;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    transform-origin: top center;
    transform-style: preserve-3d;
    /* Hidden — page folded back */
    opacity: 0;
    transform: perspective(800px) rotateX(-35deg) translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.25s ease;
}

    /* Page turns in when visible */
    .accordion-item.faq-item-in {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg) translateY(0);
    }

    /* Page folds back out */
    .accordion-item.faq-item-out {
        opacity: 0;
        transform: perspective(800px) rotateX(-35deg) translateY(-20px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .accordion-item:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
    }

/* ============================================================
   ACCORDION BUTTON
   ============================================================ */
.accordion-button {
    font-weight: 600;
    color: #001442;
    background: #fff;
    padding: 16px 20px;
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

    /* Page number badge — decorative */
    .accordion-button::before {
        content: attr(data-page);
        position: absolute;
        right: 52px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #ccc;
        font-family: 'Courier New', monospace;
    }

    .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, #ffffff, #f9f7f3);
        border-left: 5px solid #D4AF37;
        color: #19409A;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(212,175,55,0.25);
    }

    .accordion-button:hover {
        background: linear-gradient(135deg, #ffffff, #f9f7f3);
        color: #19409A;
        box-shadow: 0 4px 12px rgba(212,175,55,0.25);
    }

    .accordion-button::after {
        background-size: 1rem;
        transition: transform 0.3s ease;
    }

    .accordion-button:not(.collapsed)::after {
        transform: rotate(180deg);
        filter: invert(58%) sepia(78%) saturate(412%) hue-rotate(20deg) brightness(95%) contrast(88%);
    }

/* ============================================================
   ACCORDION BODY — page content reveal
   ============================================================ */
.accordion-body {
    background: #fff;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 20px;
    border-top: 1px solid #eee;
    position: relative;
}

    /* Ruled lines inside body — like notebook paper */
    .accordion-body::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient( 0deg, transparent, transparent 23px, #f0f0f0 23px, #f0f0f0 24px );
        pointer-events: none;
        opacity: 0.5;
        border-radius: 0 0 12px 12px;
    }

    /* Body content above lines */
    .accordion-body > * {
        position: relative;
        z-index: 1;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .faq-sec {
        padding: 40px 0;
    }

    /* Soften 3D on mobile — avoid perspective clipping */
    .accordion-wrapper {
        transform: perspective(800px) rotateY(-8deg) scale(0.97);
        padding: 24px 18px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    }

    .faq-sec.faq-in .accordion-wrapper {
        transform: perspective(800px) rotateY(0deg) scale(1);
    }

    .accordion-item {
        transform: perspective(600px) rotateX(-20deg) translateY(-12px);
    }

        .accordion-item.faq-item-in {
            transform: perspective(600px) rotateX(0deg) translateY(0);
        }

    .accordion-button::before {
        display: none;
    }

    .faq-sec .about-title1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .accordion-wrapper {
        padding: 18px 14px;
    }

    .faq-sec .about-title1 {
        font-size: 1.5rem;
    }
}

/* vision*/


:root {
    --vm-header-h: 70px;
    --vm-grad: linear-gradient(90deg,#00b4ff 0%,#00ffa3 25%,#ffd84d 65%,#ffae00 100%);
}

#vm-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: "Poppins", system-ui, Arial, sans-serif;
}

/* Remove the tab bar completely */
.vm-tabs {
    display: none !important;
}

#vm-visionMission {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    min-height: 380px;
    margin-top: var(--vm-header-h);
}

.vm-wrapper {
    display: flex;
    width: 200%;
    height: 100%;
    transform: translateX(0);
    will-change: transform;
}

.vm-panel {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6%;
    box-sizing: border-box;
}

.vm-vision {
    background: #fff;
    color: #000;
}

.vm-mission {
    background: #000;
    color: #fff;
}

.vm-inner {
    max-width: 820px;
    text-align: center;
}

    .vm-inner h1 {
        font-size: clamp(20px, 5vw, 36px);
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
    }

        .vm-inner h1 strong {
            background: var(--vm-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

.vm-heading {
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    /* background: var(--vm-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #vm-visionMission {
        height: 70svh;
        min-height: 420px;
    }
}


:root {
    --vm-grad: linear-gradient(90deg,#00b4ff 0%,#00ffa3 25%,#ffd84d 65%,#ffae00 100%);
}

.vm-heading {
    font-size: clamp(22px, 5vw, 42px);
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    /* background: var(--vm-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    text-shadow: 0px 2px 8px rgba(255, 174, 0, 0.2);
    opacity: 0; /* for animation */
    transform: translateY(30px);
}



    /* Add some subtle glow for the gradient */
    .vm-heading::after {
        content: "";
        display: block;
        height: 3px;
        width: 60px;
        margin: 10px auto 0;
        /* background: var(--vm-grad);*/
        border-radius: 2px;
        box-shadow: 0 0 15px rgba(255, 174, 0, 0.6);
    }


:root {
    --black: #000;
    --white: #fff;
    --gold: #ffae00; /* for underline accent */
}

.vm-heading {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    position: relative;
    display: inline-block;
}

    .vm-heading::after {
        content: "";
        display: block;
        height: 3px;
        width: 80px;
        margin: 12px auto 0;
        background: var(--gold);
        border-radius: 2px;
        box-shadow: 0 0 15px rgba(255, 174, 0, 0.6);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.6s ease, opacity 0.4s ease;
    }

.vm-body {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 600;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(40px);
}

/* White background panel (Vision) */
.vm-panel.vm-vision .vm-heading {
    color: var(--black);
}

.vm-panel.vm-vision .vm-body {
    color: var(--black);
}

/* Black background panel (Mission) */
.vm-panel.vm-mission .vm-heading {
    color: var(--white);
}

.vm-panel.vm-mission .vm-body {
    color: var(--white);
}
/* Heading base */
.vm-heading {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0; /* animated in */
    transform: translateY(30px); /* animated in */
}

/* Solid colors per panel */
.vm-panel.vm-vision .vm-heading {
    color: #000;
}
/* white bg */
.vm-panel.vm-mission .vm-heading {
    color: #fff;
}
/* black bg */

/* Underline (hidden initially) */
.vm-heading::after {
    content: "";
    display: block;
    width: 80px; /* tweak width if you want */
    height: 3px;
    margin: 12px auto 0; /* centers under the text */
    background: #ffae00; /* gold accent */
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(255,174,0,.6);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s ease, opacity .35s ease;
}

/* When revealed -> show/grow underline */
.vm-heading.underline-on::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Body copy (just for completeness) */
.vm-body {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(18px,3vw,26px);
    font-weight: 600;
    line-height: 1.5;
    color: inherit; /* black on white / white on black */
    opacity: 0;
    transform: translateY(40px);
}



/*new*/

/* ✅ Mobile fix */
@media (max-width: 768px) {
    #vm-visionMission {
        margin-top: 0;
        display: block;
        padding-top: 5rem; /* visual breathing space below header */

        height: 100vh;
    }
}

/* milestones*/



:root {
    --deep-navy: #061B3A;
    --royal: #1D4E89;
    --gold: #D4AF37;
    --light: #fff;
}

/* =================== TIMELINE SECTION =================== */
.milestones-timeline {
    position: relative;
    /* Parallax image + dark overlay */
    /*      background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/gray.jpg') center center / cover fixed no-repeat !important ;
*/

    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://res.cloudinary.com/dc0lbwnlg/image/upload/v1768386866/buile_meygxn_dm1au5.png') center center / cover fixed no-repeat !important;
    /*background:
    linear-gradient(180deg, rgba(6,27,58,0.88) 0%, rgba(29,78,137,0.88) 100%),
    url("img/mile.jpg") center / cover fixed no-repeat;*/ /* ← change path if needed */
    color: var(--light);
    font-family: 'Poppins',sans-serif;
    overflow: hidden;
}
    /* ensure all text respects original casing (fixes 2010s vs 2010S everywhere) */
    .milestones-timeline,
    .milestones-timeline * {
        text-transform: none !important;
    }

/* top heading styles */
.mt-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gold);
    position: relative;
}

    .mt-title::after {
        content: "";
        display: block;
        width: 80px;
        height: 3px;
        background: var(--gold);
        margin: 10px auto 0;
    }

.mt-sub {
    font-size: 1.1rem;
    opacity: .9;
}

.mt-quote {
    font-style: italic;
    color: #ccc;
}

/* Golden particles overlay */
.milestones-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: .15;
    animation: moveStars 60s linear infinite;
    z-index: 0;
}

@keyframes moveStars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1000px 1000px;
    }
}

.milestones-timeline .container {
    position: relative;
    z-index: 1;
}
/* content above particles */

/* =================== LEFT STICKY DECADE SIDEBAR =================== */
.decade-indicator {
    position: fixed;
    top: 30%;
    left: 20px;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    background: black;
    backdrop-filter: blur(4px);
    padding: 10px 15px;
    border-radius: 8px;
}

    .decade-indicator.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .decade-indicator ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .decade-indicator li {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(255,255,255,.6);
        margin: 10px 0;
        cursor: pointer;
        transition: color .3s, transform .3s;
    }

        .decade-indicator li:hover,
        .decade-indicator li.active {
            color: var(--gold);
        }

        .decade-indicator li.active {
            transform: scale(1.15);
        }

@media (max-width:768px) {
    .decade-indicator {
        display: none;
    }
}

/* =================== TIMELINE SPINE =================== */
@keyframes glowLine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.timeline {
    position: relative;
    margin: 40px auto;
    padding: 20px 0;
    width: 90%;
}

    .timeline::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 3px;
        margin-left: -1.5px;
        background: linear-gradient(90deg,#FFD966,var(--gold),#FFD966);
        background-size: 200% 200%;
        animation: glowLine 6s linear infinite;
    }

/* =================== TIMELINE ITEMS / CARDS =================== */
.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 30px;
    opacity: 0;
    transform: translateY(50px);
    transition: all .8s ease;
}

    .timeline-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .timeline-item.left {
        left: 0;
    }

    .timeline-item.right {
        left: 50%;
    }

/* floating card */
@keyframes floatCard {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.timeline-item .content {
    position: relative;
    z-index: 1;
    padding: 20px;
    background: white;
    backdrop-filter: blur(8px);
    color: black;
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 12px;
    animation: floatCard 6s ease-in-out infinite;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .timeline-item .content:hover {
        animation: none;
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 0 25px rgba(212,175,55,.6);
    }

/* dots (real elements injected by JS) */
@keyframes pulse {
    0% {
        box-shadow: 0 0 6px rgba(212,175,55,.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(212,175,55,1);
    }

    100% {
        box-shadow: 0 0 6px rgba(212,175,55,.6);
    }
}

.timeline-item::before {
    content: none !important;
}
/* disable legacy pseudo pin */
.timeline-item .dot {
    position: absolute;
    top: 25px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--deep-navy);
    box-shadow: 0 0 10px rgba(212,175,55,.7);
    animation: pulse 2s infinite;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    z-index: 3;
    will-change: transform, box-shadow;
}

.timeline-item.left .dot {
    right: -10px;
}

.timeline-item.right .dot {
    left: -10px;
}
/* .timeline-item.active .dot{
  transform:scale(1.3); background:#FFD966; box-shadow:0 0 20px rgba(212,175,55,.8);
} */
.timeline-item.active .dot {
    transform: scale(2.5);
    background: #FFD966;
    box-shadow: 0 0 8px rgba(212,175,55,0.9), 0 0 20px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.6);
}



/* decade heading in card */
.decade {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    font-variant-numeric: lining-nums; /* crisp digits */
}

    .decade::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 40%;
        height: 2px;
        background: var(--gold);
    }

/* year list */
.year {
    font-weight: 600;
    color: var(--gold);
}

.timeline-item ul {
    margin: 0;
    padding-left: 15px;
}

.timeline-item li {
    margin-bottom: 6px;
    position: relative;
}

    .timeline-item li::before {
        content: "•";
        position: absolute;
        left: -12px;
        color: var(--gold);
    }

/* disable big shimmer watermarks (you had them hidden) */
.timeline-item .watermark {
    display: none !important;
}

/* latest highlight */
.timeline-item.latest .content {
    border: 2px solid var(--gold);
    box-shadow: 0 0 25px rgba(212,175,55,.7);
}

/* staggered entrance */
.timeline-item:nth-child(1) {
    transition-delay: .2s;
}

.timeline-item:nth-child(2) {
    transition-delay: .4s;
}

.timeline-item:nth-child(3) {
    transition-delay: .6s;
}

.timeline-item:nth-child(4) {
    transition-delay: .8s;
}

.timeline-item:nth-child(5) {
    transition-delay: 1s;
}

.timeline-item:nth-child(6) {
    transition-delay: 1.2s;
}

/* =================== RESPONSIVE =================== */
@media (max-width:768px) {
    .timeline::after {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 20px;
    }

        .timeline-item.right {
            left: 0;
        }

        .timeline-item .dot {
            left: 10px !important;
            right: auto !important;
        }

        .timeline-item .content {
            animation: none;
        }
    /* smoother on mobile */
}
/* Fade in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 8s ease forwards;
}

    .fade-in.delay {
        animation-delay: 2s; /* start after the subtitle */
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .timeline-item .content {
        text-align: left;
        color: black; /* keep everything left-aligned */
        padding-left: 20px; /* same padding for all sides */
        padding-right: 20px;
    }

    .timeline-item ul {
        margin: 0;
        padding-left: 20px; /* standard bullet padding */
        list-style-position: inside; /* align bullets with text neatly */
    }

    .timeline-item li {
        margin-bottom: 8px;
        padding-left: 0; /* remove custom offsets */
    }

        .timeline-item li::before {
            display: none; /* remove custom pseudo bullets */
        }
}

@media (max-width: 768px) {
    .timeline-item .content {
        padding: 16px;
    }
}


.timeline-item .dot {
    position: absolute;
    top: 25px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* black ring + gold center */
    background: radial-gradient(circle, #FFD966 60%, #FFD966 60%) padding-box, black border-box;
    box-shadow: 0 0 10px rgba(212,175,55,.7);
    animation: pulse 2s infinite;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    z-index: 3;
    will-change: transform, box-shadow;
}

.timeline-item.left .dot {
    right: -10px;
}

.timeline-item.right .dot {
    left: -10px;
}

.timeline-item.active .dot {
    transform: scale(2.5);
    background: radial-gradient(circle, #FFD966 60%, #FFD966 60%) padding-box, black border-box;
    box-shadow: 0 0 8px rgba(212,175,55,0.9), 0 0 20px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.6);
}


.decade-indicator {
    position: fixed;
    top: 30%;
    left: 20px;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    /* Black background fill */
    background: black;
    /* Gradient border (same as your button) */
    border: 2px solid transparent;
    background-image: linear-gradient(black, black), linear-gradient(90deg, #06B6D4 0%, #5EEAD4 10%, #F9C80E 55%, #E89C00 90%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 10px 15px;
    border-radius: 8px;
}


/* change to white card */
.timeline-item .content {
    background: rgba(0, 0, 0, 0.45); /* translucent black */
    color: #fff;
    border: 1px solid rgba(212, 175, 55, 0.6); /* gold border */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

    .timeline-item .content h3,
    .timeline-item .content .decade,
    .timeline-item .content .year {
        color: #FFD966; /* bright gold */
    }

.timeline-item li {
    color: #fff;
}

.decade {
    background: linear-gradient(90deg, #FFD966, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/*mu video*/



.mu-section {
    background: var(--white);
    padding: 120px 0;
    display: flex;
    justify-content: center;
}

.mu-black-box {
    position: relative;
    background: var(--black);
    width: 90%;
    max-width: 1150px;
    min-height: 280px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 40px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.mu-content-box {
    background: var(--white);
    padding: 40px 55px;
    border-radius: 12px;
    max-width: 700px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
    z-index: 1;
}

.mu-video-frame {
    position: absolute;
    left: 40px;
    top: -50px;
    bottom: -50px;
    width: 300px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5);
    background: #000;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

.mu-video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

    .mu-video-slide.active {
        opacity: 1;
    }

    .mu-video-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mu-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 14px 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    transition: 0.3s;
}

    .mu-play i {
        font-size: 32px;
        color: var(--black);
    }

    .mu-play:hover {
        background: var(--black);
    }

        .mu-play:hover i {
            color: var(--white);
        }

.mu-text-box h3 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 16px;
    color: var(--black);
}

.mu-text-box p {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

.mu-btn {
    background: var(--black);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    display: inline-block;
}

    .mu-btn:hover {
        background: #444;
    }

.typing::after {
    content: '▍';
    margin-left: 2px;
    animation: blink 1s steps(1, end) infinite;
    opacity: .8;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

#mu-typed-body {
    max-width: 62ch;
}

@keyframes float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 900px) {
    .mu-black-box {
        flex-direction: column;
        padding: 20px;
        align-items: center;
    }

    .mu-video-frame {
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 450px;
        height: auto;
        margin-bottom: 20px;
        aspect-ratio: 9 / 16;
    }

    .mu-content-box {
        max-width: 100%;
        padding: 25px 20px;
        text-align: center;
    }

    .mu-text-box h3 {
        font-size: 1.6rem;
    }

    .mu-text-box p {
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .mu-content-box {
        padding: 20px 18px;
        text-align: center;
    }

    .mu-text-box h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    .mu-text-box p {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .mu-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        margin-top: 10px;
    }
}

/* accreditaion*/

/* Spacer to force scrolling */
.spacer {
    height: 100vh;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

/* ── BASE ── */
.accreditations-dark {
    background: #000;
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

    .accreditations-dark::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at center, rgba(255,215,0,0.05), transparent 70%);
        z-index: 0;
    }

    .accreditations-dark .container {
        position: relative;
        z-index: 1;
    }

.acc-eyebrow {
    color: #D4AF37;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 0.95rem;
}

.acc-sub {
    color: #bbb;
}

.ls-gradient {
    background: linear-gradient(90deg,#00b4ff,#ffae00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accredit-card-dark {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 28px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

    .accredit-card-dark::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #D4AF37, #b38b2e);
    }

.icon-circle-dark {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .icon-circle-dark img {
        max-width: 55px;
        max-height: 55px;
    }

.accredit-card-dark h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.accredit-card-dark p {
    font-size: 0.95rem;
    color: #bbb;
    margin-bottom: 0;
    line-height: 1.4;
}

.accredit-text {
    flex: 1;
}

/* ── ANIMATION ── */
.acc-header {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

#accreditations.acc-in .acc-header {
    opacity: 1;
    transform: translateY(0);
}

.accredit-card-dark {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .accredit-card-dark.acc-card-in {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .accredit-card-dark .icon-circle-dark {
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.4s ease 0.2s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s;
    }

    .accredit-card-dark.acc-card-in .icon-circle-dark {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .accredit-card-dark .accredit-text {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 0.45s ease 0.32s, transform 0.45s ease 0.32s;
    }

    .accredit-card-dark.acc-card-in .accredit-text {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* contact*/

.contact-modern {
    background: #000;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

    /* Subtle animated grid dots background */
    .contact-modern::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        transition: opacity 1.2s ease;
    }

    .contact-modern.cm-in::before {
        opacity: 1;
    }

.contact-card {
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    padding: 50px 40px;
    max-width: 1180px;
    position: relative;
    z-index: 1;
}

/* ── LEFT SIDE ── */
.badge-black {
    background: #000;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.contact-form .form-control {
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

    .contact-form .form-control:focus {
        border-color: #D4AF37;
        box-shadow: 0 0 6px rgba(212,175,55,0.3);
        outline: none;
    }

.cta-btn {
    padding: 14px 24px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .cta-btn:hover {
        background: #000;
        color: #fff;
    }

.map-container {
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

    .map-container iframe {
        width: 100%;
        height: 180px; /* ← increase from 120px */
        border: 0;
        display: block;
    }

.map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    border-radius: 16px;
    transition: background 0.3s ease;
}

.map-container:hover .map-overlay {
    background: rgba(0,0,0,0.15);
}

/* ── RIGHT SIDE ── */
.contact-content {
    padding: 0 10px;
}

    .contact-content h2 {
        font-weight: 800;
        color: #000;
        margin-bottom: 15px;
        font-size: 2rem;
    }

    .contact-content .highlight {
        color: #D4AF37;
    }

    .contact-content .info-row {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .contact-content .info-box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 16px;
        border-radius: 16px;
        background: #f9f9f9;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        width: 100%;
        text-align: left;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

        .contact-content .info-box:hover {
            box-shadow: 0 8px 24px rgba(212,175,55,0.15);
            transform: translateX(4px);
        }

        .contact-content .info-box i {
            flex-shrink: 0;
            font-size: 1.3rem;
            margin-top: 4px;
            margin-right: 12px;
            color: #D4AF37;
            transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }

        .contact-content .info-box:hover i {
            transform: scale(1.2) rotate(-8deg);
        }

        .contact-content .info-box h6 {
            margin: 0 0 4px;
            font-weight: 600;
            font-size: 1rem;
            color: #000;
        }

        .contact-content .info-box p,
        .contact-content .info-box a {
            margin: 0;
            font-size: 0.95rem;
            color: #333;
            line-height: 1.4;
        }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .contact-card {
        padding: 40px 20px;
    }

    .contact-content {
        text-align: center;
    }

    .info-box {
        justify-content: center;
        text-align: left;
    }
}

@media (max-width: 576px) {
    .contact-content h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .map-container iframe {
        height: 200px;
    }

    .info-box {
        text-align: left;
        flex-direction: column;
        gap: 10px;
    }

        .info-box i {
            font-size: 1.5rem;
            margin-bottom: 6px;
        }

    .badge-black {
        margin: 0 auto 10px;
        display: inline-block;
    }
}

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

/* ── Card: lifts in as one unit ── */
#contactus .contact-card {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}

#contactus.cm-in .contact-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Left badge ── */
#contactus .contact-form .badge-black {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}

#contactus.cm-in .contact-form .badge-black {
    opacity: 1;
    transform: translateY(0);
}

/* ── Form fields stagger in ── */
#contactus .contact-form .form-control,
#contactus .contact-form .cta-btn {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#contactus.cm-in .contact-form .row .col-12:nth-child(1) .form-control {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.50s;
}

#contactus.cm-in .contact-form .row .col-12:nth-child(2) .form-control {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.60s;
}

#contactus.cm-in .contact-form .row .col-12:nth-child(3) .form-control {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.70s;
}

#contactus.cm-in .contact-form .row .col-12:nth-child(4) .form-control {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.80s;
}

#contactus.cm-in .contact-form .cta-btn {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.92s;
}

/* ── Map shutter wipe ── */
#contactus .map-container {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.22,1,0.36,1) 0.95s;
}

#contactus.cm-in .map-container {
    clip-path: inset(0 0% 0 0);
}

/* ── Right badge + heading ── */
#contactus .contact-content .badge-black {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
}

#contactus.cm-in .contact-content .badge-black {
    opacity: 1;
    transform: translateY(0);
}

#contactus .contact-content h2 {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease 0.55s, transform 0.6s ease 0.55s;
}

#contactus.cm-in .contact-content h2 {
    opacity: 1;
    transform: translateY(0);
}

/* ── Info boxes slide in from right, staggered ── */
#contactus .info-box {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}

#contactus.cm-in .info-row .info-box:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.65s;
}

#contactus.cm-in .info-row .info-box:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.78s;
}

#contactus.cm-in .info-row .info-box:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.91s;
}

#contactus.cm-in .info-row .info-box:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.04s;
}

/* ── Icon gold pulse when box arrives ── */
#contactus.cm-in .info-row .info-box:nth-child(1) i {
    animation: iconPulse 0.5s ease 0.85s both;
}

#contactus.cm-in .info-row .info-box:nth-child(2) i {
    animation: iconPulse 0.5s ease 0.98s both;
}

#contactus.cm-in .info-row .info-box:nth-child(3) i {
    animation: iconPulse 0.5s ease 1.11s both;
}

#contactus.cm-in .info-row .info-box:nth-child(4) i {
    animation: iconPulse 0.5s ease 1.24s both;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35) rotate(-10deg);
        filter: drop-shadow(0 0 6px #D4AF37);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ── Reset on scroll out ── */
#contactus:not(.cm-in) .contact-card {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
}

#contactus:not(.cm-in) .contact-form .badge-black,
#contactus:not(.cm-in) .contact-content .badge-black,
#contactus:not(.cm-in) .contact-content h2 {
    opacity: 0;
}

#contactus:not(.cm-in) .contact-form .form-control,
#contactus:not(.cm-in) .contact-form .cta-btn {
    opacity: 0;
    transform: translateX(-20px);
}

#contactus:not(.cm-in) .map-container {
    clip-path: inset(0 100% 0 0);
}

#contactus:not(.cm-in) .info-box {
    opacity: 0;
    transform: translateX(40px);
}
.contact-card .row > .col-lg-6:first-child {
    padding-left: 30px;
}

.contact-card.container {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px; /* ← add this */
}
.contact-card {
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    padding: 50px; /* ← uniform padding all sides */
    max-width: 1180px;
    position: relative;
    z-index: 1;
    overflow: visible; /* ← was not set, ensure content isn't clipped */
}

@media (max-width: 576px) {
    .contact-card.container {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
}
.ie-footer .footer-quote {
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.ie-footer:not(.ft-in) .footer-quote {
    opacity: 0;
    transform: translateY(-40px);
}

.ie-footer.ft-in .footer-quote {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* gold line removed — was causing unwanted border lines */

/* ── Column headings — fade + rise ── */
.ie-footer h3,
.ie-footer h4 {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ie-footer:not(.ft-in) h3,
.ie-footer:not(.ft-in) h4 {
    opacity: 0;
    transform: translateY(16px);
}

/* Each column heading staggered via nth-child on columns */
.ie-footer.ft-in .ie-footer-main > *:nth-child(1) h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.ie-footer.ft-in .ie-footer-main > *:nth-child(2) h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.48s;
}

.ie-footer.ft-in .ie-footer-main > *:nth-child(3) h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.61s;
}

.ie-footer.ft-in .ie-footer-main > *:nth-child(4) h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.74s;
}

/* ── Contact cards — slide in from left ── */
.ie-footer-contact .contact-card {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.ie-footer:not(.ft-in) .ie-footer-contact .contact-card {
    opacity: 0;
    transform: translateX(-30px);
}

.ie-footer.ft-in .ie-footer-contact .contact-card:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
}

.ie-footer.ft-in .ie-footer-contact .contact-card:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.58s;
}

.ie-footer.ft-in .ie-footer-contact .contact-card:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.71s;
}

.ie-footer.ft-in .ie-footer-contact .contact-card:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.84s;
}

/* ── Nav links in columns 2,3,4 — stagger fade up ── */
.ie-footer-col:not(.ie-footer-contact) li {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hidden only on desktop — mobile always visible */
@media (min-width: 1025px) {
    .ie-footer-col:not(.ie-footer-contact).ft-col-hidden li {
        opacity: 0;
        transform: translateX(-10px);
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(1) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.10s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(2) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.18s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(3) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.26s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(4) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.34s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(5) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.42s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(6) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.50s;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in li:nth-child(7) {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.58s;
    }

    /* heading */
    .ie-footer-col:not(.ie-footer-contact).ft-col-hidden h3 {
        opacity: 0;
        transform: translateY(16px);
    }

    .ie-footer-col:not(.ie-footer-contact) h3 {
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .ie-footer-col:not(.ie-footer-contact).ft-col-in h3 {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.05s;
    }
}

/* Mobile — always show everything, no animation on columns */
@media (max-width: 1024px) {
    .ie-footer-col li,
    .ie-footer-col h3,
    .ie-footer-col h4,
    .ie-footer-contact .contact-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Bottom bar — single gold divider line ── */
.ie-footer-bottom {
    border-top: 1px solid #D4AF37 !important;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.ie-footer:not(.ft-in) .ie-footer-bottom {
    opacity: 0;
    transform: translateY(20px);
}

.ie-footer.ft-in .ie-footer-bottom {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}

/* ── Social icons — spring bounce, staggered ── */
.ie-footer-social a {
    transition: color 0.25s, transform 0.25s;
    display: inline-flex;
}

.ie-footer:not(.ft-in) .ie-footer-social a {
    opacity: 0;
    transform: translateY(16px) scale(0.5);
}

.ie-footer-social a {
    opacity: 0;
    transform: translateY(16px) scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.25s ease;
}

.ie-footer.ft-in .ie-footer-social a:nth-child(1) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.0s;
}

.ie-footer.ft-in .ie-footer-social a:nth-child(2) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.1s;
}

.ie-footer.ft-in .ie-footer-social a:nth-child(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.2s;
}

.ie-footer.ft-in .ie-footer-social a:nth-child(4) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.3s;
}

.ie-footer.ft-in .ie-footer-social a:nth-child(5) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 1.4s;
}

/* Keep hover working after animation */
.ie-footer.ft-in .ie-footer-social a:hover {
    color: #D4AF37;
    transform: translateY(-3px) scale(1) !important;
}

/* ── Brand logo — fades + scales in ── */
.ie-footer-brand {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

    .ie-footer-brand img {
        width: 120px;
        height: auto;
        object-fit: contain;
    }

.ie-footer:not(.ft-in) .ie-footer-brand {
    opacity: 0;
    transform: scale(0.85);
}

.ie-footer.ft-in .ie-footer-brand {
    opacity: 1;
    transform: scale(1);
    transition-delay: 1.05s;
}

/* ── Bottom links — stagger fade ── */
.ie-footer-links a {
    transition: color 0.25s, opacity 0.3s ease, transform 0.3s ease;
}

.ie-footer:not(.ft-in) .ie-footer-links a {
    opacity: 0;
    transform: translateY(8px);
}

.ie-footer.ft-in .ie-footer-links a:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.95s;
}

.ie-footer.ft-in .ie-footer-links a:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.02s;
}

.ie-footer.ft-in .ie-footer-links a:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.09s;
}

.ie-footer.ft-in .ie-footer-links a:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.16s;
}

.ie-footer.ft-in .ie-footer-links a:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.23s;
}

/* Keep hover on links */
.ie-footer.ft-in .ie-footer-links a:hover,
.ie-footer.ft-in .ie-footer-col a:hover {
    color: #D4AF37 !important;
    transform: translateX(4px) !important;
}



.enquire-floating {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 35px;
    background: #4B1D69;
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    z-index: 9999;
    animation: pulseGlow 2s infinite;
}

/* SAME animation you used in announcement bar */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0.6);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(0,0,0,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
}

/* hover */
.enquire-floating:hover {
    animation: none;
    background: #222;
}

/* MOBILE POSITION */
@media(max-width:768px) {
    .enquire-floating {
        left: auto;
        right: 20px;
        transform: none;
        bottom: 80px;
    }
}

.enquire-floating {
    position: fixed;
    right: 20px;
    bottom: 140px; /* IMPORTANT — push above scroll + chatbot */
    background: #000;
    color: #fff;
    padding: 12px 22px;
    border-radius: 28px;
    font-weight: 600;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Desktop center placement */
@media(min-width:769px) {
    .enquire-floating {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 30px;
    }
}

#facilities {
    background: #000;
    padding-block: clamp(48px, 6vw, 96px);
    overflow: hidden;
}

    #facilities .facility-heading {
        text-align: center;
        color: #fff;
        margin-bottom: clamp(24px,4vw,40px);
    }

        #facilities .facility-heading .top-label {
            display: inline-block;
            background: #111;
            color: #fff;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: .06em;
            padding: 8px 18px;
            border-radius: 999px;
            line-height: 1;
            font-size: clamp(.72rem, 1.6vw, .95rem);
            margin-bottom: clamp(10px, 1.5vw, 14px);
        }

        #facilities .facility-heading h2 {
            margin: 0;
            font-weight: 800;
            line-height: 1.15;
            font-size: clamp(1.6rem, 4vw + .5rem, 3.2rem);
            color: #fff;
        }

        #facilities .facility-heading .ls-gradient {
            background: linear-gradient(90deg, #00b4ff 0%, #00ffa3 15%, #ffd84d 40%, #ffc300 70%, #ffae00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #facilities .underline {
        width: 80px;
        height: 3px;
        background: #FFAE00;
        margin: clamp(12px, 2vw, 20px) auto 0;
        border-radius: 2px;
    }

    /* === Desktop 3D Carousel === */
    #facilities .facility-carousel-wrapper {
        width: min(1200px, 95vw);
        margin-inline: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #facilities .facility-carousel {
        position: relative;
        perspective: 1600px;
        height: clamp(240px, 40vw, 420px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #facilities .facility-card {
        position: absolute;
        width: clamp(160px, 26vw, 320px);
        height: clamp(200px, 33vw, 400px);
        border-radius: 14px;
        overflow: hidden;
        transform-origin: center;
        cursor: grab;
        opacity: .75;
        transition: box-shadow .3s ease;
        box-shadow: 0 10px 25px rgba(255,255,255,.05);
    }

        #facilities .facility-card.active {
            transform: scale(1.18) !important;
            z-index: 10;
            opacity: 1;
            border: 2px solid #FFAE00;
            box-shadow: 0 0 20px rgba(255,174,0,.5), 0 10px 30px rgba(0,0,0,.8);
        }

            #facilities .facility-card.active::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%);
                z-index: 1;
            }

    #facilities .overlay-content {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        display: none;
        text-align: left;
        color: #fff;
    }

    #facilities .facility-card.active .overlay-content {
        display: block;
    }

/* MOBILE – same 3D wheel, just smaller */
@media (max-width: 768px) {

    #facilities .facility-carousel {
        perspective: 1200px !important;
        height: 260px !important;
    }

    #facilities .facility-card {
        width: 68% !important;
        height: 68% !important;
        transform-origin: center !important;
    }

        #facilities .facility-card.active {
            transform: scale(1.12) !important;
            z-index: 10 !important;
        }

    #facilities .overlay-content {
        bottom: 10px;
        padding: 10px;
    }

    #facilities {
        padding-bottom: 40px;
    }
}

/*new*/
/* 1) Kill any old "polaroid base" that was making the white strip */
#facilities .facility-card::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* 2) Use ::before for the dark overlay instead of ::after */
#facilities .facility-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
    opacity: 0; /* off by default */
    transition: opacity .3s ease;
    z-index: 1;
}

#facilities .facility-card.active::before {
    opacity: 1; /* show on the active card */
}

/* 3) Ensure images fill the card on desktop as well (not only mobile) */
#facilities .facility-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== FIX WHITE STRIP ON MOBILE ===== */
#facilities .facility-card::after,
#facilities .facility-card::before {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Apply consistent dark overlay for both desktop & mobile */
#facilities .facility-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
}

#facilities .facility-card.active::before,
#facilities .facility-card:hover::before {
    opacity: 1;
}

/* Ensure images fully fill the card on mobile */
#facilities .facility-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Make sure overlay text stays above the gradient */
#facilities .overlay-content {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
    color: #fff;
    text-align: left;
}

/* Responsive fallback for mobile scroll layout */
@media (max-width: 992px) {
    #facilities .facility-card::before {
        opacity: 1; /* Always show slight gradient */
    }

    #facilities .overlay-content {
        position: relative;
        text-align: center;
        background: transparent;
    }
}

@media (max-width: 992px) {
    #facilities .facility-carousel {
        height: auto !important;
        perspective: none !important;
    }

    #facilities .facility-card {
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.15);
    }

        #facilities .facility-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    #facilities .overlay-content {
        position: absolute;
        bottom: 14px;
        left: 14px;
        right: 14px;
        z-index: 2;
        color: #fff;
    }

    #facilities .facility-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 70%);
        z-index: 1;
    }
}


#facilities .overlay-content {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    padding: 12px 14px;
    border-radius: 10px;
    /* ✨ Semi-transparent background */
    background: rgba(0, 0, 0, 0.55);
    /* Smooth fade */
    backdrop-filter: blur(2px);
}

    #facilities .overlay-content h3,
    #facilities .overlay-content p {
        margin: 0;
        color: #fff !important;
    }


/* MOBILE — same 3D design, just resized */
@media (max-width: 768px) {

    /* Keep 3D wheel active */
    #facilities .facility-carousel {
        perspective: 1200px !important;
        height: 260px !important;
    }

    /* Cards same 3D positions, just smaller */
    #facilities .facility-card {
        width: 70% !important;
        height: 70% !important;
    }

        /* Active/center card highlight stays same */
        #facilities .facility-card.active {
            transform: scale(1.15) !important;
            z-index: 10;
        }

        /* Maintain odd/even rotation positions – required for 3D wheel */
        #facilities .facility-card:nth-child(n) {
            transform-origin: center !important;
        }

    /* Text box small */
    #facilities .overlay-content {
        padding: 10px;
        bottom: 12px;
    }

    /* Section spacing */
    #facilities {
        padding-bottom: 40px;
    }
}
/* FORCE DESKTOP 3D EFFECT ON MOBILE */
@media (max-width: 992px) {

    /* Enable perspective */
    #facilities .facility-carousel {
        perspective: 1400px !important;
        height: 300px !important;
        overflow: visible !important;
    }

    /* Allow GSAP transforms again */
    #facilities .facility-card {
        transform: translateX(0) rotateY(0) scale(1) !important;
        position: absolute !important;
        width: 72% !important;
        height: 72% !important;
    }

        /* Active card highlight */
        #facilities .facility-card.active {
            transform: scale(1.18) !important;
            border: 2px solid #ffae00;
            z-index: 10 !important;
        }

    /* Small text box on mobile */
    #facilities .overlay-content {
        bottom: 12px;
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* FIX MOBILE 3D CAROUSEL — FORCE PROPER CARD SIZE */
@media (max-width: 768px) {

    /* Carousel size */
    #facilities .facility-carousel {
        width: 100% !important;
        height: 300px !important;
        perspective: 1400px !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* FIX: each facility card proper size */
    #facilities .facility-card {
        width: 240px !important;
        height: 320px !important;
        position: absolute !important;
        left: 50% !important;
        transform-origin: center !important;
    }

        /* Active card scaling */
        #facilities .facility-card.active {
            transform: scale(1.15) !important;
            z-index: 10 !important;
        }

        /* Prevent thin image issue */
        #facilities .facility-card img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

    /* Text overlay */
    #facilities .overlay-content {
        bottom: 12px !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
    }
}
/* FORCE 3D WHEEL ON ALL MOBILE DEVICES */
@media (max-width: 992px) {

    /* Force absolute position so GSAP can rotate cards */
    #facilities .facility-card {
        position: absolute !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
        left: 50% !important;
        top: 50% !important;
        width: 240px !important;
        height: 320px !important;
        flex: none !important; /* IMPORTANT FIX */
    }

        /* Allow GSAP rotation & scaling */
        #facilities .facility-card,
        #facilities .facility-card.active {
            transform-style: preserve-3d !important;
        }

    /* Re-enable perspective on container */
    #facilities .facility-carousel {
        perspective: 1400px !important;
        height: 330px !important;
        overflow: visible !important;
    }

    /* Prevent images from stretching */
    #facilities .facility-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Overlay styling */
    #facilities .overlay-content {
        bottom: 14px !important;
        padding: 10px !important;
    }
}
/* FULL FIX FOR MOBILE CENTER + TEXT VISIBILITY */
@media (max-width: 992px) {

    /* Center the card perfectly */
    #facilities .facility-card {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        /* THIS IS THE MAIN FIX FOR CENTERING */
        transform: translate(-50%, -50%) !important;
        width: 240px !important;
        height: 330px !important;
        transform-origin: center !important;
        flex: none !important;
    }

        /* Keep GSAP 3D transforms */
        #facilities .facility-card,
        #facilities .facility-card.active {
            transform-style: preserve-3d !important;
        }

            /* Gradient under text (not above) */
            #facilities .facility-card::before {
                z-index: 1 !important; /* gradient behind */
            }

    /* TEXT BLOCK ABOVE EVERYTHING */
    #facilities .overlay-content {
        z-index: 5 !important;
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        opacity: 1 !important;
        display: block !important;
    }

        #facilities .overlay-content h3,
        #facilities .overlay-content p {
            display: block !important;
            color: #fff !important;
        }

    /* Centered wheel area */
    #facilities .facility-carousel {
        perspective: 1400px !important;
        height: 360px !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Image must fill card */
    #facilities .facility-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}

/* FULL FIX: ENABLE 3D WHEEL ON MOBILE */
@media (max-width: 992px) {

    #facilities .facility-carousel {
        perspective: 1400px !important;
        height: 420px !important;
        overflow: visible !important;
        position: relative !important;
    }

    #facilities .facility-card {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translateX(-50%) !important;
        width: 240px !important;
        height: 330px !important;
        transform-origin: center !important;
        flex: none !important;
        will-change: transform !important;
    }

        #facilities .facility-card img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

    #facilities .overlay-content {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        z-index: 5 !important;
        text-align: left !important;
    }

    #facilities .facility-card::before {
        z-index: 1 !important;
    }
}

@media (max-width: 992px) {

    #facilities .facility-card {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* TRUE FIX – vertically center */
        top: 0 !important;
        bottom: 0 !important;
        margin: auto 0 !important;
        width: 240px !important;
        height: 330px !important;
        z-index: 2 !important;
    }

    #facilities .facility-carousel {
        height: 400px !important; /* important for proper centering */
        position: relative !important;
    }
}
/* MOBILE: only one card visible, no 3D */
@media (max-width: 768px) {

    #facilities .facility-carousel {
        perspective: none !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Cards become normal blocks, but only .active is visible */
    #facilities .facility-card {
        position: relative !important;
        width: 88% !important;
        margin: 0 auto 20px !important;
        transform: none !important;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }

        #facilities .facility-card.active {
            opacity: 1;
            pointer-events: auto;
            z-index: 5;
        }

    /* Overlay text normal */
    #facilities .overlay-content {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 10;
    }
}
/* 📱 MOBILE: only one card visible, centered, no 3D */
@media (max-width: 768px) {

    #facilities {
        padding-bottom: 40px;
    }

        #facilities .facility-carousel {
            perspective: none !important;
            height: auto !important;
            overflow: visible !important;
            display: block !important;
            position: relative !important;
        }

        /* reset all crazy desktop positioning */
        #facilities .facility-card {
            position: relative !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            transform: none !important;
            margin: 0 auto 20px !important;
            width: 90% !important;
            max-width: 360px;
            border-radius: 14px;
            opacity: 0;
            display: none;
            z-index: 1 !important;
        }

            /* only one visible */
            #facilities .facility-card.active {
                opacity: 1 !important;
                display: block !important;
                z-index: 5 !important;
            }

            #facilities .facility-card img {
                width: 100% !important;
                height: auto !important;
                object-fit: cover !important;
                display: block;
            }

        #facilities .overlay-content {
            position: absolute !important;
            left: 14px;
            right: 14px;
            bottom: 14px;
            z-index: 10;
        }
}
/* MOBILE – show only one card, no transforms, no 3D, no animations */
@media (max-width: 768px) {

    #facilities .facility-carousel {
        height: auto !important;
        overflow: visible !important;
        perspective: none !important;
    }

    #facilities .facility-card {
        position: relative !important;
        width: 92% !important;
        margin: 0 auto 22px !important;
        transform: none !important;
        opacity: 0;
        display: none;
        z-index: 1 !important;
    }

        #facilities .facility-card.active {
            opacity: 1 !important;
            display: block !important;
            z-index: 5 !important;
        }

    #facilities .overlay-content {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        z-index: 20 !important;
    }
}



.facilities-section {
    background: radial-gradient(circle at top left, #f8f9fb 0%, #f2f4f6 100%);
    position: relative;
    overflow: hidden;
}

/* heading */
.section-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: #002147;
    letter-spacing: 0.5px;
    position: relative;
}

.section-subtitle {
    color: #555;
    font-size: 1.05rem;
    font-weight: 500;
}

.section-underline {
    width: 80px;
    height: 4px;
    background-color: #D4AF37;
    border-radius: 3px;
    margin-top: 12px;
}

/* Cards */
.facility-card {
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

    .facility-card:hover {
        transform: translateY(-10px) scale(1.03);
        box-shadow: 0 15px 28px rgba(0,0,0,0.18);
    }

/* image styling */
.img-wrapper {
    position: relative;
    overflow: hidden;
    height: 230px;
}

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

.facility-card:hover img {
    transform: scale(1.1);
}

/* text */
.content {
    padding: 1rem;
    text-align: left;
}

    .content h5 {
        font-weight: 700;
        color: #1D4E89;
        margin-bottom: 0.3rem;
    }

    .content p {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 0;
    }

/* button */
.btn-facilities {
    display: inline-block;
    background: linear-gradient(90deg, #002147, #1D4E89);
    color: #fff;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.4s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .btn-facilities:hover {
        background: #D4AF37;
        color: #002147;
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }

/* hover glow */
.facility-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

.facility-card:hover::after {
    border-color: #D4AF37;
    box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

/* Equal height cards fix */
.facility-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* ensure full equal height in Bootstrap grid */
}

.facilities-section .row > div {
    display: flex;
}

.img-wrapper {
    flex-shrink: 0;
    height: 230px;
}

.content {
    flex-grow: 1; /* fill remaining space so all cards align */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* responsive */
@media (max-width: 992px) {
    .img-wrapper {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .section-heading {
        font-size: 1.8rem;
    }

    .img-wrapper {
        height: 160px;
    }
}

@media (max-width: 992px) {
    .img-wrapper {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .img-wrapper {
        height: 160px;
    }
}


/* ====== FACILITIES: KEEP BOOTSTRAP ROW ====== */

/* Force equal height & width cards */
.facilities-section .facility-card {
    width: 100%;
    aspect-ratio: 1 / 1; /* same width and height */
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .facilities-section .facility-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.2);
    }

/* Image wrapper covers top area */
.facilities-section .img-wrapper {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

    .facilities-section .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.facilities-section .facility-card:hover img {
    transform: scale(1.08);
}

/* Text area at bottom */
.facilities-section .content {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.8) 100%);
    color: #fff;
    padding: 0.8rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}

    .facilities-section .content h5 {
        font-weight: 700;
        color: #D4AF37;
        margin-bottom: 0.2rem;
    }

    .facilities-section .content p {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.85);
        margin: 0;
    }

/* Responsive fixes */
@media (max-width: 992px) {
    .facilities-section .facility-card {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 768px) {
    .facilities-section .facility-card {
        aspect-ratio: 1 / 1;
    }
}


/* progress scroll bar */
/* Container */
.scroll-progress {
    position: fixed;
    right: 75px; /* ⬅ moved left from 25px to 95px */
    bottom: 20px;
    width: 70px;
    height: 70px;
    z-index: 9999;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Visible when scrolled */
.scroll-progress.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Inner black circle background */
.circle-bg {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
}

/* Up arrow inside */
.arrow {
    font-size: 24px;
    color: #fff;
    z-index: 2;
    pointer-events: none;
}

/* SVG Progress Ring */
.scroll-progress svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
    z-index: 0;
}

.track {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 6;
    fill: none;
}

.indicator {
    stroke-width: 6;
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
    stroke: url(#grad);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .scroll-progress {
        width: 55px;
        height: 55px;
        right: 80px; /* also shifted left on mobile */
        bottom: 15px;
    }

    .circle-bg {
        width: 47px;
        height: 47px;
    }

    .arrow {
        font-size: 20px;
    }

    .scroll-progress svg {
        width: 55px;
        height: 55px;
    }
}


/* aim*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400&display=swap');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: #090909;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
}

.spacer {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.textFlow {
    padding: clamp(60px, 10vw, 120px) 0;
    background: #111;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

.textFlowWrapper {
    text-align: center;
}

.textFlowLabel {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(9px, 1.1vw, 12px);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: clamp(28px, 4vw, 52px);
}

/* ── Desktop & Large screens ── */
.textFlowWG {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(26px, 3.8vw, 62px);
    line-height: 145%;
    font-weight: 300;
    font-style: italic;
    perspective: 1200px;
    text-align: center;
    color: #fff;
}

    .textFlowWG span {
        display: block;
        white-space: nowrap;
        transform-style: preserve-3d;
        will-change: transform, opacity;
        transform-origin: 50% 0%;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
    }

/* ── Large tablet (1024px and below) ── */
@media (max-width: 1024px) {
    .textFlowWG {
        font-size: clamp(28px, 4.5vw, 56px);
        line-height: 120%;
    }

        .textFlowWG span {
            white-space: nowrap;
        }
}

/* ── Tablet (768px and below) ── */
@media (max-width: 768px) {
    .textFlowWG {
        font-size: clamp(22px, 5.5vw, 40px);
        line-height: 155%;
    }
        /* Allow wrapping on tablet — lines will break naturally */
        .textFlowWG span {
            white-space: normal;
        }
}

/* ── Mobile (480px and below) ── */
@media (max-width: 480px) {
    .textFlowWG {
        font-size: clamp(20px, 6.5vw, 32px);
        line-height: 130%;
    }

    .textFlowLabel {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .textFlow {
        padding: 60px 0 80px;
    }
}

/* ── Small mobile (360px and below) ── */
@media (max-width: 360px) {
    .textFlowWG {
        font-size: clamp(18px, 6vw, 26px);
        line-height: 135%;
    }

    .container {
        padding: 0 16px;
    }
}