:root {
    --grad-strong: linear-gradient(90deg, #00b4ff 0%, #00ffa3 15%, #ffd84d 40%, #ffc300 70%, #ffae00 100%);
}

.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;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /*font-family: "Outfit", sans-serif;*/
    background: #000;
   
    overflow-x: hidden;
    padding-top: 80px; /* Space for fixed header */
}

/* ===================== HEADER ===================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #000; /* Solid pure black */
    backdrop-filter: none; /* Remove the blur */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease;
}


.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8%;
}

.logo img {
    height: 46px;
    display: block;
}

.nav-toggle {
    display: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
}

/* Desktop menu */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 36px;
}

    .nav-menu > li {
        position: relative;
    }

        .nav-menu > li > a {
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.5px;
            padding: 10px 0 12px;
            display: inline-block;
            position: relative;
            transition: color 0.25s ease;
        }

            .nav-menu > li > a:hover,
            .nav-menu > li.active > a {
                background: var(--grad-strong);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
            }

            .nav-menu > li > a::before {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0;
                height: 2px;
                background: var(--grad-strong);
                transition: width 0.3s ease;
            }

        .nav-menu > li:hover > a::before,
        .nav-menu > li.active > a::before {
            width: 100%;
        }


        /* Caret */
        .nav-menu > li.has-sub > a {
            padding-right: 16px;
        }

            .nav-menu > li.has-sub > a::after {
                content: "";
                position: absolute;
                top: 50%;
                right: -2px;
                width: 7px;
                height: 7px;
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                transform: translateY(-50%) rotate(45deg);
                transition: transform 0.25s ease, border-color 0.25s ease;
            }

        .nav-menu > li.has-sub:hover > a::after {
            transform: translateY(-50%) rotate(225deg);
            border-color: #ddd;
        }

/* Submenu */
.mega {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 260px;
    background: #0b0b0b;
    padding: 16px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.nav-menu li:hover > .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--grad-strong);
    border-radius: 2px;
}

.mega a {
    display: block;
    width: 100%;
    padding: 10px 22px;
    font-size: 13px;
    color: #cfcfcf;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    line-height: 1.6;
}

    .mega a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.04);
    }

/* Mobile nav */
@media (max-width: 991px) {
    .nav-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 260px;
        height: 100vh;
        background: #111;
        flex-direction: column;
        gap: 14px;
        padding: 28px 20px;
        transition: right 0.3s ease;
    }

        .nav-menu.active {
            right: 0;
        }

    .mega {
        position: static;
        min-width: 0;
        border: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background: #0f0f0f;
    }

    .nav-menu li.open > .mega {
        display: block;
    }

    .nav-menu li.open.has-sub > a::after {
        transform: translateY(-50%) rotate(225deg);
    }
}

/* ============================= */
/*  MOBILE NAV MENU LEFT ALIGN   */
/* ============================= */
@media (max-width: 991px) {
    /* Menu container */
    .nav-menu {
        text-align: left !important;
        align-items: flex-start !important;
        padding-left: 28px !important;
    }

        /* Each top-level link */
        .nav-menu > li > a {
            text-align: left !important;
            justify-content: flex-start !important;
            width: 100% !important;
            padding: 10px 0 !important;
            font-weight: 600 !important;
            letter-spacing: 0.4px;
        }

        /* Dropdown (submenu) alignment */
        .nav-menu .mega {
            text-align: left !important;
            padding-left: 10px !important;
        }

            .nav-menu .mega a {
                text-align: left !important;
                justify-content: flex-start !important;
                padding: 8px 0 !important;
            }

        /* Remove any centering leftover */
        .nav-menu li,
        .nav-menu li a {
            display: block !important;
            text-align: left !important;
        }

        /* Caret arrow spacing fix */
        .nav-menu > li.has-sub > a::after {
            right: 12px !important;
        }
}

/* ============================= */
/*  MOBILE NAV CARET ALIGNMENT FIX */
/* ============================= */
@media (max-width: 991px) {
    .nav-menu > li.has-sub {
        position: relative;
    }

        .nav-menu > li.has-sub > a {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between; /* keeps text left, arrow right */
            padding-right: 30px !important; /* space for caret */
        }

            .nav-menu > li.has-sub > a::after {
                right: 12px !important; /* moves arrow fully to right edge */
                top: 50% !important;
                transform: translateY(-50%) rotate(45deg) !important;
                border-color: rgba(255,255,255,0.85) !important;
            }

    /* When submenu is open, rotate caret correctly */
    .nav-menu li.open.has-sub > a::after {
        transform: translateY(-50%) rotate(225deg) !important;
    }
}


.mega a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 13px;
    color: #cfcfcf;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    .mega a::after {
        content: " ⇾";
        font-weight: 600;
        font-size: 1.52rem;
        line-height: 1;
        opacity: 0;
        transform: translateY(2px) scale(0.9);
        background: var(--grad-strong);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3s ease;
    }

    .mega a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

        .mega a:hover::after {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

/* ensure hover icon also works in mobile tap */
@media (max-width: 991px) {
    .mega a:active::after {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
}

.logo-combo {
    display: flex;
    align-items: center;
    gap: 5px;
}



.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-transform: lowercase;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    color: #fff;
}

    .logo-text .top {
        font-weight: 900; /* heavy bold */
        font-size: 26px;
        letter-spacing: 0.5px;
        font-family: "Poppins", sans-serif;
        font-weight: 900;
    }

    .logo-text .bottom {
        font-size: 26px;
        font-weight: 900;
        background: linear-gradient(90deg, #00c3ff, #ffd600, #ffd84d, #ffb200);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: "Poppins", serif;
        font-style: italic;
    }

.wave-logo {
    height: 48px;
    vertical-align: middle;
    width: 90px;
    animation: waveMotion 3.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes waveMotion {
    0% {
        transform: translateY(0) skewX(0deg) scaleX(1);
    }

    25% {
        transform: translateY(2px) skewX(1deg) scaleX(1.02);
    }

    50% {
        transform: translateY(0) skewX(-1deg) scaleX(0.98);
    }

    75% {
        transform: translateY(-2px) skewX(1deg) scaleX(1.02);
    }

    100% {
        transform: translateY(0) skewX(0deg) scaleX(1);
    }
}




.nav-toggle i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    .nav-menu.active + .nav-toggle i,
    .nav-toggle i.fa-xmark {
        transform: rotate(180deg);
    }





/*hero */



body {
    font-family: "Outfit", sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
}

.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 8vw;
}

/* ================= BACKGROUND ================= */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* width: 110vw;
    height: 110vh;*/
    background: url('https://res.cloudinary.com/dc3ijuowd/image/upload/v1763546972/build_cbence.jpg') no-repeat top center/cover;
    /*background: url('../img/buildA.jpg') no-repeat center center/cover;*/
    transform-origin: center;
    z-index: 1;
    will-change: transform;
}

/* ✅ FULL OVERLAY */
.hero-section::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vh;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0.3) 80%);
    z-index: 4;
    pointer-events: none;
}

/* ================= CONTENT ================= */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 550px;
    text-align: left;
}

.hero-heading {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

    /* ✨ Gradient highlight text */
    .hero-heading .highlight {
        background: linear-gradient( 90deg, #06B6D4 0%, #00E0A0 25%, #FFD84D 50%, #D4AF37 75%, #06B6D4 100% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 300%;
        animation: gradientMove 8s ease-in-out infinite;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
    }

@keyframes gradientMove {
    0% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }

    100% {
        background-position: 0%;
    }
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: #e0e0e0;
    margin-bottom: 30px;
    max-width: 450px;
    line-height: 1.5;
}

/* ================= CTA BUTTONS ================= */
.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

    .cta-buttons a {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }

/* Primary Button - White */
.btn-primary {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

    .btn-primary:hover {
        box-shadow: 0 6px 14px rgba(255, 255, 255, 0.25);
        transform: translateY(-3px);
    }

/* Secondary Button - Glass outline */
.btn-outline {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

    .btn-outline:hover {
        background: rgba(0, 0, 0, 0.6);
        box-shadow: 0 6px 14px rgba(212, 175, 55, 0.35);
        transform: translateY(-3px);
    }

/* Gold arrow animation */
.cta-buttons a span.arrow {
    color: #D4AF37;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.cta-buttons a:hover span.arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .hero-section {
        justify-content: center;
        padding-left: 0;
        height: 85vh;
    }

    .hero-content {
        text-align: center;
        max-width: 90%;
    }

    .cta-buttons {
        justify-content: center;
    }
}





.hero-section::before {
    content: "";
    position: absolute; /* ✅ changed from fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0.3) 80%);
    z-index: 4;
    pointer-events: none;
}






/* header*/


:root {
    --topbar-h: 34px;
    --navbar-h: 40px;
}

/* Full width background */
.header-wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    background: #000;
}

/* One centered container shared by topbar and navbar */
.header-container {
    max-width: 1320px; /* 💡 same for both rows */
    margin: 0 auto;
    padding: 0 40px; /* 💡 equal spacing left & right */
    box-sizing: border-box;
}

/* Topbar */
.header-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: var(--topbar-h);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-menu {
    display: flex;
    list-style: none;
    gap: 28px;
    margin: 0;
    padding: 0;
}

    .topbar-menu li a {
        color: #fff;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        transition: color 0.25s ease;
    }

        .topbar-menu li a:hover {
            color: #D4AF37;
        }

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navbar-h);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 36px;
    margin: 0;
    padding: 0;
}

    .nav-menu > li > a {
        display: flex;
        align-items: center;
        height: var(--navbar-h);
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
    }

        .nav-menu > li > a:hover {
            background: linear-gradient(90deg, #00b4ff 0%, #00ffa3 15%, #ffd84d 40%, #ffc300 70%, #ffae00 100%);
        
/*                linear-gradient( 90deg, #00b4ff 0%, #00ffa3 6%, #ffd84d 15%, #ffb300 35%, #ffae00 100% );
*/           
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* Logo */
.logo-combo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wave-logo {
    height: 35px;
    display: block;
    margin-right: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

    .logo-text .top {
        font-size: 16px;
        font-weight: 900;
    }

    .logo-text .bottom {
        font-size: 16px;
        font-weight: 900;
        background: linear-gradient(90deg, #00c3ff, #ffd600, #ffd84d, #ffb200);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-style: italic;
    }

/* Mobile - hide topbar */
@media (max-width: 768px) {
    .header-topbar {
        display: none;
    }

    .header-container {
        padding: 0 20px;
    }
}


/* Target the inner navbar row */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background: #000;
    position: relative;
}

    /* Add a wrapper for menu so it aligns with topbar edge */
    .navbar .nav-menu {
        margin-left: auto; /* ✅ pushes menu fully to right */
    }

/* Optional: keep spacing consistent */
.header-container,
.header-topbar,
.navbar {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px; /* ✅ exact match for both rows */
    box-sizing: border-box;
}










/* hero */




.hero-section {
    position: relative;
    width: 100%;
    height: calc(100vh - (34px + 40px));
    display: flex;
    align-items: center;
    padding-left: 8vw;
    overflow: hidden;
}


================= BACKGROUND =================
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*width: 110vw;
    height: 110vh;*/
    /* background: url('../buildA.jpg') no-repeat center center/cover;*/

    background: url('https://res.cloudinary.com/dc3ijuowd/image/upload/v1763546972/build_cbence.jpg') no-repeat top center/cover;
    transform-origin: center;
    z-index: 1;
    will-change: transform;
}

✅ FULL OVERLAY
.hero-section::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vh;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0.3) 80%);
    z-index: 4;
    pointer-events: none;
}


.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 35%, rgba(0,0,0,0.3) 80%);
    z-index: 4;
    pointer-events: none;
}


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




================= CONTENT =================
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 550px;
    text-align: left;
}

.hero-heading {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

✨ Gradient highlight text
.hero-heading .highlight {
    background: linear-gradient( 90deg, #06B6D4 0%, #00E0A0 25%, #FFD84D 50%, #D4AF37 75%, #06B6D4 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300%;
    animation: gradientMove 8s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

@keyframes gradientMove {
    0% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }

    100% {
        background-position: 0%;
    }
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: #e0e0e0;
    margin-bottom: 30px;
    max-width: 450px;
    line-height: 1.5;
}

================= CTA BUTTONS =================
.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cta-buttons a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

Primary Button - White
.btn-primary {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    box-shadow: 0 6px 14px rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}

Secondary Button - Glass outline
.btn-outline {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

.btn-outline:hover {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 14px rgba(212, 175, 55, 0.35);
    transform: translateY(-3px);
}

Gold arrow animation
.cta-buttons a span.arrow {
    color: #D4AF37;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.cta-buttons a:hover span.arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .hero-section {
        justify-content: center;
        padding-left: 0;
        height: 85vh;
    }

    .hero-content {
        text-align: center;
        max-width: 90%;
    }

    .cta-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: calc(100vh - 40px);
        ✅ only navbar height on mobile padding-left: 0;
        margin: 0;
        justify-content: center;
    }
}















/* Base desktop logo */
.logo-combo {
    display: flex;
    align-items: center;
    height: 60px; /* match your navbar height */
}

.logo-text img {
    height: 40px; /* standard size for desktop */
    width: auto;
    display: block;
    object-fit: contain;
    max-width: 100%;
}

/* Tablet */
@media (max-width: 1024px) {
    .logo-text img {
        height: 28px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .logo-combo {
        height: 70px; /* give more breathing space */
    }

    .logo-text img {
        height: 50px; /* slightly larger on mobile */
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .logo-text img {
        height: 46px;
    }
}
/* ✅ Make navbar behave like a clean flex container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* ✅ vertical center */
    height: 60px; /* fixed height on mobile */
    padding: 0 16px;
}

/* ✅ Logo sizing for mobile */
.logo-text img {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ✅ Toggler styling — vertically centered */
.nav-toggle {
    display: block;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

/* ✅ Adjustments for small mobile */
@media (max-width: 480px) {
    .navbar {
        height: 55px; /* slightly smaller */
        padding: 0 12px;
    }

    .logo-text img {
        height: 36px;
    }

    .nav-toggle {
        font-size: 26px;
    }
}

.nav-toggle i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ Hide toggler in desktop */
.nav-toggle {
    display: none; /* hidden by default */
}

/* ✅ Show toggler only on mobile */
@media (max-width: 991px) {
    .nav-toggle {
        display: block;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        line-height: 1;
    }
}

/* ==== HEADER HEIGHT FIX (place at the very end) ==== */

/* 1) Single source of truth for row heights */
:root {
    --topbar-h: 34px;
    --navbar-h: 64px; /* desktop navbar height */
}

@media (max-width: 991px) {
    :root {
        --topbar-h: 0px; /* topbar hidden on mobile */
        --navbar-h: 56px; /* mobile navbar height */
    }
}

/* 2) Body offset always matches the fixed header */
body {
    padding-top: calc(var(--topbar-h) + var(--navbar-h)) !important;
}

/* 3) Normalize navbar sizing and kill old vertical padding */
.navbar {
    height: var(--navbar-h) !important;
    padding: 0 16px !important; /* no vertical padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1; /* prevents line-height from adding height */
}

/* 4) Make children fit the row instead of stretching it */
.logo-combo,
.nav-toggle {
    height: var(--navbar-h);
    display: flex;
    align-items: center;
}

/* 5) Logo sizing: slightly smaller than the row for breathing space */
.logo img,
.logo-text img,
.wave-logo {
    height: calc(var(--navbar-h) - 16px) !important; /* ~8px top/bottom padding */
    width: auto;
    display: block;
}

/* 6) REMOVE the rule that inflates the row on mobile */
@media (max-width: 768px) {
    /* override previous .logo-combo { height: 70px; } */
    .logo-combo {
        height: var(--navbar-h) !important;
    }

    /* keep the logo visually larger but inside the row */
    .logo img,
    .logo-text img,
    .wave-logo {
        height: calc(var(--navbar-h) - 12px) !important;
    }
}

/* 7) Ensure the hamburger doesn’t add extra height */
.nav-toggle {
    font-size: 28px;
    line-height: 1;
}

    .nav-toggle i {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* 8) Mobile menu panel starts exactly under the navbar */
@media (max-width: 991px) {
    .nav-menu {
        top: var(--navbar-h) !important;
    }
}

.nav-toggle {
    display: none !important; /* fully hidden by default */
}

/* Show only on tablets & mobile */
@media (max-width: 991px) {
    .nav-toggle {
        display: block !important;
        font-size: 28px;
      
    }
}
/* ✅ Toggler styling */
.nav-toggle {
    display: none !important;
}

/* Show only on mobile/tablet */
@media (max-width: 991px) {
    .nav-toggle {
        display: flex !important; /* instead of block */
        align-items: center; /* vertically center */
        justify-content: center; /* horizontally center icon */
        height: var(--navbar-h); /* match navbar height */
        padding: 0 10px; /* left-right breathing space */
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        
    }

        .nav-toggle i {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: inherit;
        }
}

/* ============= MOBILE NAV — FINAL FIXES ============= */
@media (max-width: 991px) {
    /* Panel itself */
    .nav-menu {
        position: fixed;
        top: var(--navbar-h); /* sit right under the header */
        right: -100%;
        width: min(320px, 85vw);
        height: calc(100vh - var(--navbar-h)); /* 🟢 makes it scrollable */
        overflow-y: auto; /* 🟢 enable vertical scroll */
        -webkit-overflow-scrolling: touch;
        background: #111;
        padding: 16px 20px 40px; /* tighter padding inside */
        gap: 0; /* 🟢 removes huge gaps */
        z-index: 9999;
    }

        .nav-menu.active {
            right: 0;
        }

        /* Each top-level item */
        .nav-menu > li {
            width: 100%;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

            .nav-menu > li:last-child {
                border-bottom: 0;
            }

            .nav-menu > li > a {
                display: flex;
                align-items: center;
                justify-content: space-between; /* label left, caret right */
                width: 100%;
                padding: 14px 4px; /*  tighter row height */
                font-size: 15px;
            }

                /* Make sure non-parent items have NO caret */
                .nav-menu > li > a::after {
                    content: none;
                }

            /* Caret only for parents */
            .nav-menu > li.has-sub > a::after {
                content: "";
                width: 8px;
                height: 8px;
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                transform: rotate(45deg); /* closed state */
                margin-left: 12px;
                flex-shrink: 0;
            }

        .nav-menu li.open.has-sub > a::after {
            transform: rotate(225deg); /* open state */
        }

    /* Submenu box inside the panel */
    .mega {
        position: static !important;
        display: none; /* collapsed by default */
        background: #0f0f0f;
        border: none;
        padding: 10px 12px 12px;
        margin: 6px 0 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,.35);
    }

    .nav-menu li.open > .mega {
        display: block;
    }

    .mega a {
        padding: 10px 12px;
        font-size: 14px;
    }

        .mega a::after {
            content: none;
        }
    /* remove the hover arrow in mobile */
}

/* ============= TOGGLER VERTICAL CENTER ============= */
@media (max-width: 991px) {
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: var(--navbar-h); /* matches header row */
        padding: 0 10px;
        font-size: 28px;
        color: #fff;
        line-height: 1;
    }

        .nav-toggle i {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: inherit;
        }
}

/* Desktop: place submenu flush under its parent */
@media (min-width: 992px) {
    .nav-menu > li {
        position: relative;
    }
    /* already there, but safe */

    .mega {
        top: calc(100% + 2px); /* was 120% -> causes a big gap */
        margin-top: 0;
        transform: translateY(8px); /* small offset for animation when hidden */
    }

    .nav-menu li:hover > .mega {
        transform: translateY(0); /* animate in without extra spacing */
    }

    /* (optional) slightly increase clickable area without adding visual gap */
    .nav-menu > li > a {
        padding-bottom: 12px;
    }
}


/* ============= BODY OFFSET (prevents extra header gap) ============= */
/* Desktop: topbar + navbar height */
body {
    padding-top: calc(var(--topbar-h) + var(--navbar-h));
}
/* Mobile: only navbar height (removes initial extra space) */
@media (max-width: 768px) {
    body {
        padding-top: var(--navbar-h);
    }
}




/*end header and hero */

/* start main content */
/* ---------- Scope all variables to this section only ---------- */
#learningSection1.learning-section {
    --bg-dark: #0b0b0b;
    --text: #fff;
    --muted: #bbb;
    --line: rgba(255,255,255,.15);
    --tag-gray: #1e1e1e;
    --cyan: #06B6D4;
    --gold: #D4AF37;
    --sticky-top: 130px; /* computed via JS below */
    background: var(--bg-dark);
    color: var(--text);
}



#learningSection1 .ls-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 30px;
}

#learningSection1 .ls-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 350;
}

#learningSection1 .ls-header em {
    display: block;
    margin-top: 6px;
    font: italic 400 1.35rem/1.2 "Playfair Display",serif;
    color: rgba(255,255,255,.9);
}

/* Heading animation (safe defaults visible) */
#learningSection1 .ls-animated-heading {
    font-weight: 800;
    font-size: 2.4rem;
    color: #fff;
    transition: opacity .8s ease, transform .8s ease;
}

#learningSection1.revealed .ls-animated-heading {
    background: linear-gradient(90deg,#00D4FF,#FFD84D,#FFAE00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lsGlow 3s ease-in-out infinite;
}

@keyframes lsGlow {
    0%,100% {
        text-shadow: 0 0 10px rgba(212,175,55,.35),0 0 20px rgba(212,175,55,.25);
    }

    50% {
        text-shadow: 0 0 24px rgba(212,175,55,.65),0 0 36px rgba(212,175,55,.45);
    }
}

#learningSection1 .ls-animated-subline {
    display: block;
    margin-top: 6px;
    font: italic 400 1.35rem/1.2 "Playfair Display",serif;
    color: rgba(255,255,255,.85);
    text-align:center;
}

#learningSection1.revealed .ls-animated-subline {
    background: linear-gradient(90deg,#00D4FF,#FFD84D,#FFAE00,#00D4FF);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lsSweep 5s linear infinite;
    text-align: center;
}

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

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

/* ---------- Layout ---------- */
#learningSection1 .ls-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 120px 30px 80px;
    position: relative;
}

#learningSection1 .ls-left {
    position: relative;
    flex: 0 0 55%;
    padding-left: 110px;
}

    #learningSection1 .ls-left::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 70px;
        width: 2px;
        background: var(--line);
        z-index: 1;
    }

/* Timeline icons */
#learningSection1 .ls-icon {
    position: absolute;
    left: 70px;
    transform: translate(-50%,-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0b0b0b;
    border: 2px solid transparent;
    background-image: linear-gradient(#0b0b0b,#0b0b0b),linear-gradient(to right,#06B6D4 0%,#F9C80E 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 5;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
}

    #learningSection1 .ls-icon i {
        font-size: 1rem;
    }

/* Steps */
#learningSection1 .ls-step {
    position: relative;
    margin-bottom: 110px;
    z-index: 2;
}

#learningSection1 .ls-tag {
    display: inline-block;
    background: var(--tag-gray);
    color: #f2f2f2;
    font-size: .8rem;
    letter-spacing: .5px;
    padding: 7px 18px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

#learningSection1 .ls-h2 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 14px;
}

#learningSection1 .ls-gradient {
    background: linear-gradient(90deg,#06B6D4 0%,#5EEAD4 10%,#F9C80E 55%,#E89C00 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#learningSection1 .ls-p {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 560px;
}

/* Right sticky video */
#learningSection1 .ls-right {
    flex: 0 0 50%;
    max-width: 50%;
    position: sticky;
    top: var(--sticky-top);
    z-index: 3;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 35px rgba(0,0,0,.6);
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

#learningSection1 .ls-thumb, #learningSection1 #ls-videoFrame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: opacity .4s ease;
}

    #learningSection1 .ls-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 16px;
    }

    #learningSection1 #ls-videoFrame iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
        border-radius: 16px;
        display: block;
    }

    #learningSection1 .ls-thumb button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg,#06B6D4,#F9C80E);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

        #learningSection1 .ls-thumb button::after {
            content: "";
            border-left: 20px solid #fff;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 3px;
        }

/* Mobile thumbnail */
#learningSection1 .ls-mobile-thumb {
    display: none;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 25px rgba(0,0,0,.5);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

    #learningSection1 .ls-mobile-thumb img {
        width: 100%;
        display: block;
        border-radius: 12px;
    }

    #learningSection1 .ls-mobile-thumb button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 60px;
        height: 60px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg,#06B6D4,#F9C80E);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        #learningSection1 .ls-mobile-thumb button::after {
            content: "";
            border-left: 16px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            margin-left: 4px;
        }

/* ---------- Responsive ---------- */
@media(max-width:900px) {
    #learningSection1 .ls-body {
        flex-direction: column;
        padding: 110px 20px 60px;
    }

    #learningSection1 .ls-left {
        padding-left: 80px;
    }

        #learningSection1 .ls-left::before {
            left: 45px;
        }

    #learningSection1 .ls-icon {
        left: 45px;
        width: 44px;
        height: 44px;
    }

    #learningSection1 .ls-right {
        display: none;
    }

    #learningSection1 .ls-mobile-thumb {
        display: block;
    }

        #learningSection1 .ls-mobile-thumb iframe {
            width: 100% !important;
            height: 200px !important;
            border: none;
            border-radius: 12px;
        }

    #learningSection1 .ls-h2 {
        font-size: 1.6rem;
    }

    #learningSection1 .ls-header h2 {
        font-size: 1.5rem;
    }

    #learningSection1 .ls-header em {
        font-size: 1rem;
    }
}


/* Everything else sits below the header */
#learningSection1 .ls-body {
    position: relative;
    z-index: 0;
}

#learningSection1 .ls-step {
    position: relative;
    z-index: 0;
}

#learningSection1 .ls-right {
    position: sticky;
    z-index: 10;
}
/* stays under header */

/* Icons should not float over the header */
#learningSection1 .ls-icon {
    z-index: 1;
}
/* lower than header (120) */

/* (Optional) keep the vertical line behind everything */
#learningSection1 .ls-left::before {
    z-index: 0;
}
/* === Force plain white text for the section header (no gradient, no glow) === */
#learningSection1 .ls-animated-heading,
#learningSection1.revealed .ls-animated-heading {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
    animation: none !important; /* removes glow pulse */
}

/* Subtitle too (use a softer white if you like) */
#learningSection1 .ls-animated-subline,
#learningSection1.revealed .ls-animated-subline {
    color: rgba(255,255,255,.9) !important; /* plain white text */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: rgba(255,255,255,.9) !important;
    animation: none !important; /* removes gradient sweep */
}


/* Hide the sticky header when we pass section end */
#learningSection1 .ls-header.ls-header--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

/* Make sure the header strip has a solid background (black or white—your choice) */
#learningSection1 .ls-header {
    background: #0b0b0b; /* set to #fff if you want white */
    color: #fff; /* #0b0b0b if white background */
}

    #learningSection1 .ls-header h2,
    #learningSection1 .ls-header em {
        color: inherit !important;
    }

#learningSection1.learning-section {
    background: #000;
}

/* Mobile-friendly spacing for the sticky header */
@media (max-width: 768px) {
    #learningSection1 .ls-header {
        padding: 12px 0 10px;
    }

        #learningSection1 .ls-header .ls-inner {
            padding: 0 16px;
            max-width: 100%;
        }
}

/* If your whole section is dark on mobile too (optional) */
@media (max-width: 768px) {
    #learningSection1.learning-section {
        background: #000;
    }
}
#learningSection1 .ls-header h2 {
    text-align: center; /* ✅ Only h2 centered */
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    #learningSection1 .ls-header {
        text-align: center;
    }
}

/* FINAL STICKY HEADER FIX */
#learningSection1 .ls-header {
    position: sticky !important;
    top: calc(var(--header-h, 80px) + 0px) !important;
    z-index: 1002 !important;
    background: #0b0b0b !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Prevent ancestors from breaking sticky */
#learningSection1,
#learningSection1 > *,
#learningSection1 .ls-body {
    overflow: visible !important;
    transform: none !important;
}

    #learningSection1 .ls-right {
        position: sticky !important;
        top: calc(var(--header-h, 80px) + 12px) !important;
        z-index: 1001 !important;
    }

    #learningSection1 .ls-icon {
        z-index: 1 !important;
    }

    #learningSection1 .ls-left::before {
        z-index: 0 !important;
    }




    /* ✅ FINAL FIX: Ensure video clears the sticky header */
    #learningSection1 .ls-right {
        position: sticky !important;
        top: calc(var(--header-h, 98px) + 150px) !important; /* increased offset */
        z-index: 1000 !important;
    }

    /* ✅ Header stays above everything else but does not overlap */
    #learningSection1 .ls-header {
        position: sticky;
        top: var(--header-h, 98px);
        z-index: 1002;
        background: #0b0b0b;
        padding: 24px 0 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    }

    /* ✅ Make sure video stays visible (no clipping from parent) */
    #learningSection1,
    #learningSection1 > *,
    #learningSection1 .ls-body {
        overflow: visible !important;
        transform: none !important;
    }

        /* ✅ Add extra scroll space at the bottom so video fully shows */
        #learningSection1 .ls-body::after {
            content: "";
            display: block;
            height: 200px; /* gives buffer after last step */
        }

@media (max-width: 768px) {
    #learningSection1 .ls-header {
        position: static !important; /* ✅ removes sticky */
        top: auto;
        z-index: auto;
    }
}
/* ✅ Remove extra gap on mobile */
@media (max-width: 900px) {
    #learningSection1 .ls-body::after {
        height: 0 !important;
    }
}

@media (max-width: 900px) {
    #learningSection1 .ls-body {
        padding-bottom: 0px !important;
    }
}



/* Full-bleed white strip */
#alwTabsSection {
    background: #fff;
    padding: 56px 0;
    color: #0a0a0a;
}

    /* Center inner content */
    #alwTabsSection .tab-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px; /* left/right gutters */
        background: transparent; /* no inner panel */
    }

    /* ---------- Tabs ---------- */
    #alwTabsSection .tabs {
        display: flex;
        gap: 20px;
        align-items: flex-end;
        position: relative;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 6px;
        margin-bottom: 28px;
    }

        #alwTabsSection .tabs .tab-link {
            appearance: none;
            border: 0;
            background: transparent;
            cursor: pointer;
            font: 600 16px/1.2 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            color: #666;
            padding: 12px 18px;
            border-radius: 20px 20px 0 0;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: .25s;
        }

            #alwTabsSection .tabs .tab-link i {
                font-size: 16px;
                opacity: .75;
                transition: .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;
                }

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

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

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

/* ---------- Tabs 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,.07);
    transition: .25s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

    #alwTabsSection .card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        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: .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 ---------- */
#alwTabsSection .owl-carousel {
    position: relative;
}

    /* Visible nav, inside gutters */
    #alwTabsSection .owl-carousel .owl-nav {
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        display: flex !important;
        justify-content: space-between;
        pointer-events: none;
        padding: 0 8px;
        z-index: 5;
    }

        #alwTabsSection .owl-carousel .owl-nav button {
            pointer-events: auto;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #ddd !important;
            color: #111;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
            transition: .25s;
            font-size: 18px !important;
        }

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

/* Dots off by default; show if you want */
#alwTabsSection .owl-dots {
    margin-top: 14px;
}

/* Fallback layout if Owl JS hasn't loaded yet (no jumpy page) */
#alwTabsSection .owl-carousel:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 24px;
}

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

@media (max-width:768px) {
    #alwTabsSection {
        padding: 44px 0;
    }

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

        #alwTabsSection .tabs {
            gap: 12px;
        }

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

        #alwTabsSection .owl-carousel .owl-nav {
            top: 38%;
        }
}

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

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

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


/* If AOS JS didn’t run, don’t keep things hidden */
html:not(.aos-enabled) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}




/* ... your existing styles ... */
/* --- Tab & Carousel Fix --- */
#alwTabsSection .owl-carousel:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    #alwTabsSection .owl-carousel:not(.owl-loaded) {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

    /* 🔹 Arrow Buttons - perfectly centered icons */
    #alwTabsSection .owl-carousel .owl-nav button {
        pointer-events: auto;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ddd !important;
        color: #111;
        font-size: 25px !important;
        display: inline-flex; /* use flex centering */
        align-items: center;
        justify-content: center;
        line-height: 1; /* remove icon offset */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        padding: 0; /* reset default button padding */
        margin: 0;
    }

        /* 🔹 Optional optical tweak for left/right arrows */
        #alwTabsSection .owl-carousel .owl-nav button.owl-prev i {
            transform: translateX(-1px); /* push slightly right */
        }

        #alwTabsSection .owl-carousel .owl-nav button.owl-next i {
            transform: translateX(1px); /* push slightly left */
        }

        /* 🔹 Hover styling */
        #alwTabsSection .owl-carousel .owl-nav button:hover {
            background: #000;
            color: #fff;
            transform: scale(1);
        }

/* 🔹 Mobile Adjustment */
@media (max-width: 768px) {
    #alwTabsSection .owl-carousel .owl-nav button {
        width: 46px;
        height: 46px;
        font-size: 25px !important;
    }
}
/* Nav wrapper stays the same */
#alwTabsSection .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    pointer-events: none;
    padding: 0 8px;
    z-index: 10;
}

    /* Circle buttons */
    #alwTabsSection .owl-carousel .owl-nav button {
        position: relative; /* <- required */
        pointer-events: auto;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ddd !important;
        color: #111;
        box-shadow: 0 2px 10px rgba(0,0,0,.1);
        transition: .25s;
        padding: 0;
        margin: 0;
        line-height: 1;
        font-size: 0; /* kill font layout */
        display: block; /* no flex; we’ll center with absolute */
    }

        /* Absolutely center the icon */
        #alwTabsSection .owl-carousel .owl-nav button i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); /* perfect center */
            font-size: 25px;
            line-height: 1;
            display: block;
        }

    /* Optional tiny optical tweak if you still see bias */
    #alwTabsSection .owl-carousel .owl-nav .owl-prev i {
        transform: translate(calc(-50% + 0.5px), -50%);
    }

    #alwTabsSection .owl-carousel .owl-nav .owl-next i {
        transform: translate(calc(-50% - 0.5px), -50%);
    }

    #alwTabsSection .owl-carousel .owl-nav button:hover {
        background: #000;
        color: #fff;
        transform: scale(1.06);
    }

@media (max-width:768px) {
    #alwTabsSection .owl-carousel .owl-nav button {
        width: 46px;
        height: 46px;
    }

        #alwTabsSection .owl-carousel .owl-nav button i {
            font-size: 25px;
        }
}
/* ========== MOBILE TABS: hard align & center everything ========== */
@media (max-width: 768px) {
    /* Tabs bar */
    #alwTabsSection .tabs {
        display: flex;
        align-items: center; /* center all pills vertically */
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px;
        border-bottom: 1px solid #e6e6e6;
        background: #fff;
        scrollbar-width: none;
    }

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

        /* Each pill (force equal height & perfect centering) */
        #alwTabsSection .tabs .tab-link {
            -webkit-appearance: none;
            appearance: none;
            border: 0;
            flex: 0 0 auto; /* don't stretch */
            display: inline-flex; /* inline so it keeps in one row */
            align-items: center; /* vertical centering */
            justify-content: center;
            gap: 8px;
            height: 44px; /* << fixed, consistent height */
            padding: 0 16px; /* vertical padding = 0 (height handles it) */
            box-sizing: border-box;
            border-radius: 22px;
            background: #f7f7f7;
            color: #555;
            font: 500 15px/1 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            vertical-align: middle; /* avoid baseline wobble */
            transform: translateZ(0); /* fix subpixel jumps on some Androids */
            transition: background .25s, color .25s, box-shadow .25s;
        }

            /* Icon box: gives the glyph a square to center in */
            #alwTabsSection .tabs .tab-link i {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                line-height: 1; /* no extra line height */
                font-size: 16px;
                color: #666;
                flex: 0 0 18px; /* reserve space so text aligns */
            }

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

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

    /* Hide animated underline on mobile to avoid layout shifts */
    #alwTabsSection .tab-underline {
        display: none !important;
    }
}

/* ===============================
   ALWARDAS TABS – LAYOUT ONLY
=============================== */
#alwTabsSection {
    padding: 80px 0;
    position: relative;
}

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

    /* Tabs wrapper - horizontal scroll enabled */
    #alwTabsSection .tabs {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;
        padding-bottom: 10px;
        scroll-behavior: smooth;
    }

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

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

    /* Tab buttons - spacing only */
    #alwTabsSection .tab-link {
        flex: 0 0 auto;
        font-weight: 600;
        font-size: 0.95rem;
        padding: 10px 18px;
        border-radius: 30px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    /* Underline animation bar */
    #alwTabsSection .tab-underline {
        position: absolute;
        bottom: 0;
        height: 3px;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Carousel cards layout */
    #alwTabsSection .card {
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.3s ease;
    }

        #alwTabsSection .card:hover {
            transform: translateY(-5px);
        }

        #alwTabsSection .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

    #alwTabsSection .card-body {
        padding: 1rem;
    }

        #alwTabsSection .card-body h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

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

        #alwTabsSection .tab-link {
            font-size: 0.85rem;
            padding: 8px 14px;
        }

        #alwTabsSection .tabs {
            gap: 0.5rem;
        }

        #alwTabsSection .owl-carousel .card img {
            height: 180px;
        }
}
/* ==========================================
   FORCE PERFECT CENTERING OF ARROW ICONS
   ========================================== */

#alwTabsSection .owl-carousel .owl-nav button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
}

    /* EXACT ICON CENTER */
    #alwTabsSection .owl-carousel .owl-nav button i {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 20px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* Remove any previous optical shift applied earlier */
#alwTabsSection .owl-carousel .owl-nav .owl-prev i,
#alwTabsSection .owl-carousel .owl-nav .owl-next i {
    transform: translate(-50%, -50%) !important;
}




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

/* =================== */
/* Footer Base Layout  */
/* =================== */
.site-footer {
    font-family: "Outfit", sans-serif;
    background: #000;
    color: #fff;
}

/* Main area */
.footer-main {
    padding: 70px 0 50px;
}

    .footer-main h5 {
        font-size: 1.15rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
        position: relative;
    }

        .footer-main h5::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 45px;
            height: 2px;
            background: var(--grad-strong);
            border-radius: 2px;
        }

    .footer-main p {
        color: #aaa;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 10px;
    }

   
    /* Footer links — Columns 2–5 */
    .footer-main a {
        display: block;
        color: #9c9c9c; /* soft gray by default */
        font-size: 0.95rem;
        margin-bottom: 10px;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer-main a:hover {
            color: #ffffff; /* pure white on hover */
            transform: none; /* remove slide effect */
            transform: translateX(6px);
        }


/* =================== */
/* Newsletter          */
/* =================== */
.newsletter-label {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 8px;
    display: block;
    white-space: nowrap;
}

.newsletter-group {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
}

    .newsletter-group input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: transparent;
        color: #fff;
        border-radius: 25px 0 0 25px;
        font-size: 0.95rem;
    }

        .newsletter-group input::placeholder {
            color: #777;
        }

    .newsletter-group button {
        flex: 0 0 auto;
        padding: 12px 24px;
        background: var(--grad-strong);
        color: #000;
        font-weight: 600;
        border: none;
        border-radius: 0 25px 25px 0;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.3s ease;
    }

        .newsletter-group button:hover {
            transform: translateY(-2px);
        }

/* =================== */
/* Bottom Strip        */
/* =================== */
.footer-bottom {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    font-size: 0.9rem;
    color: #aaa;
    text-align: center;
}

/* ✅ Links row layout */
.footer-links-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

    .footer-links-row a {
        color: #cfcfcf;
        text-decoration: none;
        transition: color 0.3s;
        white-space: nowrap;
        position: relative;
    }

        /* ✅ Add "|" automatically between links */
        .footer-links-row a:not(:last-child)::after {
            content: "|";
            color: #777;
            margin-left: 12px;
            pointer-events: none;
        }

        /* ✅ Hover effect */
        .footer-links-row a:hover {
            color: #fff;
        }

/* Copyright row */
.footer-copy {
    font-size: 0.85rem;
    color: #aaa;
}

/* Responsive */
@media (max-width: 576px) {
    .footer-links-row {
        gap: 8px;
        font-size: 0.85rem;
    }

        .footer-links-row a:not(:last-child)::after {
            margin-left: 8px;
        }
}


/* =================== */
/* Responsive          */
/* =================== */
@media (max-width: 991px) {
    .footer-main h5 {
        margin-top: 20px;
        text-align: center;
    }

        .footer-main h5::after {
            left: 50%;
            transform: translateX(-50%);
        }

    .footer-main {
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .newsletter .newsletter-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        width: 100%;
    }

        .newsletter .newsletter-group input {
            flex: 1;
            width: auto !important;
            border-radius: 25px 0 0 25px !important;
        }

        .newsletter .newsletter-group button {
            flex: 0 0 auto;
            border-radius: 0 25px 25px 0 !important;
            margin-top: 0 !important;
            white-space: nowrap;
        }
}



/* Social Icons */


.social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.social-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

    .social-circle i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
        font-weight: 900;
        font-size: 1.25rem;
        color: #fff;
        line-height: 0;
        height: 100%;
    }




/* =====================================
   FOOTER ALIGNMENT FIX (MOBILE)
===================================== */
@media (max-width: 991px) {
    /* ✅ Center only the FIRST column on small screens */
    .footer-main .col-lg-3.col-md-6:first-child {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 15px; /* some breathing space */
    }

        .footer-main .col-lg-3.col-md-6:first-child h5::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .footer-main .col-lg-3.col-md-6:first-child p {
            text-align: center;
            max-width: 320px;
            margin: 0 auto 10px;
        }

        .footer-main .col-lg-3.col-md-6:first-child .social-icons,
        .footer-main .col-lg-3.col-md-6:first-child .newsletter {
            justify-content: center;
        }

    /* ✅ Keep columns 2–5 left aligned with padding */
    .footer-main .col-lg-2,
    .footer-main .col-lg-3:not(:first-child),
    .footer-main .col-md-6:not(:first-child) {
        text-align: left !important;
        padding-left: 25px; /* adjust padding to make it neat */
        padding-right: 10px;
    }

        .footer-main .col-lg-2 h5,
        .footer-main .col-lg-3:not(:first-child) h5 {
            text-align: left;
        }

            .footer-main .col-lg-2 h5::after,
            .footer-main .col-lg-3:not(:first-child) h5::after {
                left: 0;
                transform: none;
            }
}




/* contact form */

:root {
    --gold: #D4AF37;
}

.contact-modern {
    background: #000;
    padding: 40px 20px;
}

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

/* ---------------- 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 h2 {
    font-weight: 800;
    color: #000;
    margin-bottom: 15px;
    font-size: 2rem;
}

.contact-form .highlight {
    color: var(--gold);
    font-style: italic;
}

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

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

/* CTA Button */
.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;
    }

/* Small Map */
.map-container {
    margin-top: 20px; /* spacing above the map */
    position: relative;
    overflow: hidden;
    border-radius: 16px; /* optional rounded corners */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

    .map-container iframe {
        width: 100%;
        height: 120px;
        border: 0;
        display: block;
    }

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35); /* 👈 black opacity */
    pointer-events: none; /* ✅ keeps map clickable */
    border-radius: 16px;
    transition: background 0.3s ease;
}

.map-container:hover .map-overlay {
    background: rgba(0, 0, 0, 0.15); /* 👌 softens on hover */
}


/* ---------------- 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: var(--gold);
        font-style: italic;
    }

    .contact-content p {
        color: #444;
        font-size: 1rem;
        margin-bottom: 25px;
        line-height: 1.6;
    }



/* ---------------- 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,
    .contact-form h2 {
        font-size: 1.6rem;
    }

    .contact-media-small iframe {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .info-box {
        text-align: left;
        justify-content: left;
        flex-direction: column;
        gap: 10px;
    }

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

    .contact-content h2 {
        text-align: center;
        font-size: 1.6rem;
    }

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

.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; /* 👈 aligns icon to top, so everything lines up left */
    padding: 16px;
    border-radius: 16px;
    background: #f9f9f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 100%;
    text-align: left; /* 👈 ensures text inside is aligned left */
}

    .contact-content .info-box i {
        flex-shrink: 0;
        font-size: 1.3rem;
        margin-top: 4px;
        margin-right: 12px;
        color: #D4AF37;
    }

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

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


/* ================= DESKTOP (ROTATED PILL STYLE) ================= */
@media (min-width: 992px) {
    .sticky-sidebar {
        position: fixed;
        top: 30%;
        right: 10px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        z-index: 9999;
    }

        .sticky-sidebar .sidebar-btn {
            background: #D4AF37; /* gold */
            color: black; /* navy */
            font-weight: 600;
            text-decoration: none;
            padding: 12px 20px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            width: 160px;
            height: 48px;
            justify-content: center;
        }

            /* Rotate contents vertically */
            .sticky-sidebar .sidebar-btn.rotated {
                transform: rotate(-90deg);
                transform-origin: center;
            }

            .sticky-sidebar .sidebar-btn:hover {
                background: #C0C0C0 ;/* orange */
                color: black;
            }

            .sticky-sidebar .sidebar-btn i {
                font-size: 16px;
            }
}


/*Side bar*/


/* === Animations === */
@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

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

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* === Desktop Sidebar === */



/* 🔹 Floating Dock-Style Bottom Bar (Mobile Only) */
.sticky-bottom-bar {
    position: fixed;
    bottom: -80px; /* hidden off-screen initially */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 33, 71, 0.9); /* Deep navy with transparency */
    backdrop-filter: blur(12px); /* Glassmorphism effect */
    border-radius: 40px;
    padding: 10px 18px;
    display: flex;
    gap: 14px;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    animation: slideUp 0.6s ease forwards;
    animation-delay: 0.3s; /* delay for smoother appearance */
}

    /* Buttons */
    .sticky-bottom-bar a {
        background: #D4AF37; /* Gold */
        color: black; /* Deep Navy */
        font-weight: 600;
        padding: 10px 18px;
        border-radius: 30px;
        font-size: 14px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

        /* Hover effect */
        .sticky-bottom-bar a:hover {
            background: #fff;
            color: black;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(212,175,55,0.6);
        }

        /* Icons */
        .sticky-bottom-bar a i {
            font-size: 15px;
        }

/* Hide on desktop */
@media (min-width: 992px) {
    .sticky-bottom-bar {
        display: none;
    }
}

/* ================= MOBILE BOTTOM BAR ================= */
@media (max-width: 991px) {
    .sticky-bottom-bar {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex;
        gap: 12px;
        padding: 8px 14px;
        background: #fff;
        border-radius: 50px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        z-index: 99999 !important;
    }

        .sticky-bottom-bar a {
            flex: 1; /* ✅ equal width */
            text-align: center;
            padding: 10px 12px;
            border-radius: 25px;
            background-color: #D4AF37; /* gold */
            color:black; /* navy text */
            font-weight: 600;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.3s ease;
        }

            .sticky-bottom-bar a:hover {
                background: #C0C0C0;
                color: black;
            }
}


/* Sticky sidebar + bottom bar above content but below header/back-to-top */
.sticky-sidebar,
.sticky-bottom-bar {
    z-index: 2147481000 !important;
}



/* Spinner safety: disable pointer events */
#spinner {
    pointer-events: none;
}

    #spinner.show {
        pointer-events: auto;
    }
/* === Desktop Sidebar (default visible) === */
.sticky-sidebar {
    display: flex;
}

/* === Bottom Sticky Bar (default hidden) === */
.bottom-bar {
    display: none;
}

/* === Mobile Handling === */
@media (max-width: 991.98px) {
    /* Hide right sidebar on mobile */
    .sticky-sidebar {
        display: none !important;
    }

    /* Show bottom bar on mobile */
    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        z-index: 2147481000;
    }

        .bottom-bar a {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            text-decoration: none;
            background: Black;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

            .bottom-bar a i {
                font-size: 16px;
            }

            .bottom-bar a:hover {
                background: #C0C0C0;
            }
}
/* Sticky Sidebar (Right side) */
.sticky-sidebar {
    position: fixed;
    top: 40%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2147481000;
}

    .sticky-sidebar a {
        display: flex;
        flex-direction: column; /* icon on top, text below */
        align-items: center;
        justify-content: center;
        width: 60px; /* equal width */
        height: 60px; /* equal height */
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        text-decoration: none;
        border-radius: 8px 0 0 8px;
        background: Black;
        transition: all 0.3s ease;
    }

        .sticky-sidebar a i {
            font-size: 20px;
            margin-bottom: 8px;
        }

        .sticky-sidebar a:hover {
            background: #C0C0C0;
            color:black
        }

/* progress bar*/

/* Background */
.progress-container {
    background: #000; /* black background */
    width: 100%;
    height: 10px;
    border-radius: 50px;
    overflow: hidden;
    margin: 20px 0;
}

/* Gradient Progress */
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #FFC107, #FF9800);
    border-radius: 50px;
    transition: width 0.6s ease;
}


/* end progress bar*/


/* White wrapper */
.sidebar-wrapper {
    background: #ffffff; /* White background */
    border-radius: 12px; /* Rounded box */
    padding: 6px;
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 10px; /* Space between buttons */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Buttons */
.btn-sidebar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 18px;
    border-radius: 8px; /* Rectangular rounded shape */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    /* Icon spacing */
    .btn-sidebar i {
        margin-right: 8px;
        font-size: 1.2rem;
    }

    /* Enquiry */
    .btn-sidebar.enquiry {
        background: #d4af37; /* Gold */
        color: #002147; /* Blue text */
    }

        .btn-sidebar.enquiry:hover {
            background: #e74c3c; /* Orange */
            color: #ffffff;
        }

    /* Contact */
    .btn-sidebar.contact {
        background: #002147; /* Blue */
        color: #ffffff; /* White text */
    }

        .btn-sidebar.contact:hover {
            background: #e74c3c; /* Orange */
            color: #ffffff;
        }

    /* Chat button - Navy (WhatsApp) */
    .btn-sidebar.chat {
        background: #002147; /* Blue */
        color: #ffffff; /* White text */
    }

        .btn-sidebar.chat:hover {
            background: #e74c3c; /* Orange */
            color: #ffffff;
        }



    /* Chat button - Navy (WhatsApp) */
    .btn-sidebar.chat1 {
        background: #D4AF37;
        color: #002147;
    }

        .btn-sidebar.chat1:hover {
            background: #E94E1B;
            color: #fff;
        }


/* Departments */

/* ===== Departments Section (Dark Theme + Sticky Sidebar) ===== */
/* ================= DEPARTMENTS SECTION ================= */
#departments {
    background: #000;
    color: #fff;
    scroll-margin-top: 120px;
}

    #departments h4 {
        color: #D4AF37;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
    }

        #departments h4::after {
            content: "";
            display: block;
            width: 50px;
            height: 3px;
            background: #D4AF37;
            margin: 8px auto 0;
            border-radius: 2px;
        }

    #departments h1 {
        color: #fff;
        font-weight: 700;
    }

    /* Sidebar */
    #departments .list-group-item {
        background: #111;
        color: #fff;
        border: none;
        padding: 14px 18px;
        transition: all 0.3s ease;
        font-weight: 500;
    }

        #departments .list-group-item:hover,
        #departments .list-group-item.active {
            background: #D4AF37;
            color: #000;
            font-weight: 600;
        }

    /* Content area */
    #departments .tab-pane {
        padding: 20px;
        margin-bottom: 60px;
    }

        #departments .tab-pane h4 {
            color: #D4AF37;
            font-weight: 600;
            margin-bottom: 12px;
        }

        #departments .tab-pane p {
            color: #ddd;
            font-size: 1rem;
            line-height: 1.6;
        }

    #departments img {
        border: 2px solid #D4AF37;
        border-radius: 12px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        #departments img:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
        }

/* Responsive */
@media (max-width: 991px) {
    #departments .list-group {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    #departments .list-group-item {
        flex: 0 0 auto;
        white-space: nowrap;
        border-radius: 0;
    }
}

@media (max-width: 767px) {
    #departments .tab-pane img {
        margin-top: 15px;
    }
}



/*testimonials */


.alw-testimonial-3box {
    background: var(--bg-dark);
    padding: 60px 20px;
}

    .alw-testimonial-3box .container {
        max-width: 1400px;
        width: 100%;
        margin: auto;
    }

.testimonial-card {
    padding: 40px 20px 30px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.35s ease;
    width: 100%;
}

.gold-bg {
    background: var(--gold);
    color: #000;
}

.dark-bg {
    background: var(--card-bg);
    color: var(--text-white);
}

.testimonial-card:hover {
    transform: translateY(-8px);
}

.photo-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
    border: 3px solid var(--gold);
}

    .photo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.feedback {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.role {
    font-size: 0.95rem;
    font-weight: 500;
}

.gold-text {
    color: var(--gold);
}

/* Carousel Controls */
.testimonial-carousel .owl-nav {
    position: absolute;
    top: 45%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .testimonial-carousel .owl-nav button {
        background: transparent;
        border: 2px solid var(--gold);
        color: var(--gold) !important;
        font-size: 1.4rem !important;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: all 0.35s ease;
    }

        .testimonial-carousel .owl-nav button:hover {
            background: var(--gold);
            color: #000 !important;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
            transform: scale(1.1);
        }

.testimonial-carousel .owl-dots .owl-dot span {
    background: #555;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.testimonial-carousel .owl-dots .owl-dot.active span {
    background: var(--gold);
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .photo-wrap {
        width: 100px;
        height: 100px;
    }
}
.testimonial-card {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
}

.owl-stage {
    display: flex !important;
}

.owl-item {
    min-width: 0 !important;
}
.testimonial-card {
    border: 1px solid red;
}
.alw-testimonial-3box {
    width: 100%;
}

    .alw-testimonial-3box .container {
        max-width: 100% !important;
    }
.testimonial-card {
    max-width: 380px; /* 🧭 Ideal for fitting 3 cards side by side */
    width: 100%;
    box-sizing: border-box;
}
.feedback {
    max-width: 300px; /* 🧭 This keeps text from stretching */
    margin: 0 auto 20px; /* center the paragraph */
    line-height: 1.5;
}
.alw-testimonial-3box .container {
    max-width: 1400px !important;
    width: 100%;
}
.alwTsl-card {
    min-height: 460px; /* 🧭 adjust to match your tallest card */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.alwTsl-card {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 45%;
    width: 108%; /* ⬅️ slightly wider than carousel */
    left: -4%; /* ⬅️ pushes arrows out of card area */
    display: flex;
    justify-content: space-between;
}
    .alwTsl-carousel .owl-nav button.owl-prev {
        transform: translateX(-40px);
    }

    .alwTsl-carousel .owl-nav button.owl-next {
        transform: translateX(40px);
    }
.alwTsl-dark {
    background: #1a1a1a; /* ✨ lighter black */
    color: var(--alw-white);
}
.alwTsl-carousel .owl-item.active.center .alwTsl-card {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
    z-index: 2;
}

/* ==================== TABS ==================== */
/* ==================== ROOT VARIABLES ==================== */
:root {
    --black: #000000;
    --white: #ffffff;
    --grad-strong: linear-gradient( 90deg, #00b4ff 0%, #00ffa3 15%, #ffd84d 40%, #ffc300 70%, #ffae00 100% );
    --gray-dark: #1a1a1a;
    --gray-mid: #2a2a2a;
    --gray-light: #bbbbbb;
}

/* ==================== SECTION WRAPPER ==================== */
#deptPrograms {
    background: var(--black);
    color: var(--white);
    padding: 80px 0;
    position: relative;
}

/* ==================== HEADINGS ==================== */
.mu-subheading {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--white);
    letter-spacing: 1px;
}

.mu-heading {
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--white);
}

    .mu-heading em {
        font-style: italic;
        background: var(--grad-strong);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* ==================== SCROLL BUTTONS (TOP RIGHT) ==================== */
.scroll-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scroll-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--black);
    border: 1px solid transparent;
    background-image: linear-gradient(#000, #000), var(--grad-strong);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .scroll-btn:hover {
        background: var(--white);
        color: #000;
        border: 1px solid var(--white);
    }

    .scroll-btn i {
        font-size: 16px;
    }

/* ==================== TABS ==================== */
#deptPrograms .nav-pills {
    justify-content: center;
    gap: 0.6rem;
}

    #deptPrograms .nav-pills .nav-link {
        border: 1px solid var(--gray-mid);
        background: transparent;
        color: var(--white);
        padding: 10px 20px;
        border-radius: 30px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        #deptPrograms .nav-pills .nav-link.active {
            background: var(--white);
            color: var(--black);
            font-weight: 700;
        }

        #deptPrograms .nav-pills .nav-link:hover {
            background: var(--gray-dark);
        }

/* ==================== CARD SCROLL STRIP ==================== */
.scroll-cards {
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
}

    .scroll-cards::-webkit-scrollbar {
        height: 6px;
    }

    .scroll-cards::-webkit-scrollbar-thumb {
        background: var(--gray-mid);
        border-radius: 10px;
    }

    .scroll-cards::-webkit-scrollbar-track {
        background: transparent;
    }

/* ==================== PROGRAM CARDS ==================== */
.program-card {
    min-width: 340px;
    background: #111;
    border: 1px solid var(--gray-mid);
    border-radius: 16px;
    padding: 18px;
    flex: 0 0 auto;
    transition: all 0.3s ease;
}

    .program-card:hover {
        transform: translateY(-5px);
        border-color: #555;
    }

    .program-card .img-wrap img {
        width: 100%;
        border-radius: 12px;
        margin-bottom: 16px;
    }

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 0.9rem;
    color: var(--gray-light);
    margin-bottom: 16px;
}

/* ==================== CARD META ==================== */
.card-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .card-meta li {
        font-size: 0.85rem;
        color: #ddd;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .card-meta i {
        color: #ffae00;
        font-size: 14px;
    }

/* ==================== CTA BUTTON ==================== */
.explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background: var(--black);
    color: var(--white);
    border: 1px solid transparent;
    background-image: linear-gradient(var(--black), var(--black)), var(--grad-strong);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .explore-btn:hover {
        color: var(--black);
        background: var(--white);
        border: 1px solid var(--white);
    }

    .explore-btn i {
        font-size: 14px;
    }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .mu-heading {
        font-size: 1.8rem;
    }

    #deptPrograms .nav-pills .nav-link {
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    .scroll-controls {
        justify-content: center;
        margin-top: 16px;
    }

    .program-card {
        min-width: 280px;
    }
}


/*   */

/* ==================== TABS ==================== */
#deptPrograms .nav-pills {
    justify-content: flex-start; /* 👈 align tabs left */
    gap: 0.5rem;
}

    #deptPrograms .nav-pills .nav-link {
        border: 1px solid var(--gray-mid);
        background: transparent;
        color: var(--white);
        padding: 6px 16px; /* 👈 thinner tabs */
        border-radius: 30px;
        font-weight: 500;
        font-size: 0.95rem; /* 👈 reduced font */
        transition: all 0.3s ease;
    }

        /* Hover only for inactive tabs */
        #deptPrograms .nav-pills .nav-link:not(.active):hover {
            background: var(--white);
            color: var(--black);
            border-color: var(--white);
        }

        #deptPrograms .nav-pills .nav-link.active {
            background: var(--white);
            color: var(--black);
            font-weight: 600;
        }

/* ==================== SCROLL BUTTONS ==================== */
.scroll-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scroll-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--black);
    border: 1px solid transparent;
    background-image: linear-gradient(#000, #000), var(--grad-strong);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .scroll-btn:hover {
        background: var(--white);
        color: #000;
        border: 1px solid var(--white);
    }

    .scroll-btn i {
        font-size: 16px;
    }

/* ==================== CARD IMAGE CONTROL ==================== */
.program-card .img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9; /* 👈 maintains fixed proportion */
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
}

    .program-card .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 👈 keeps good crop */
        display: block;
    }

/* ==================== PROGRAM CARD ==================== */
.program-card {
    min-width: 340px;
    background: #111;
    border: 1px solid var(--gray-mid);
    border-radius: 16px;
    padding: 18px;
    flex: 0 0 auto;
    transition: all 0.3s ease;
}

    .program-card:hover {
        transform: translateY(-5px);
        border-color: #555;
    }



    /* */

/* Active tab */
#deptPrograms .nav-pills .nav-link.active {
    background: var(--white);
    color: var(--black);
    font-weight: 600;
}

    /* Hover on active tab — keep same white background */
    #deptPrograms .nav-pills .nav-link.active:hover {
        background: var(--white);
        color: var(--black);
        border-color: var(--white);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    }

/* Hover on inactive tabs */
#deptPrograms .nav-pills .nav-link:not(.active):hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* Image Wrapper — fixed height */
.program-card .img-wrap {
    width: 100%;
    height: 200px; /* 👈 fixed height */
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
}

    .program-card .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 👈 maintains uniform crop */
        display: block;
    }
.program-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Show 2 and a half cards */
.scroll-cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-right: 50px; /* gives a clean edge spacing */
}

.program-card {
    min-width: 420px; /* 👈 controls card width */
    max-width: 420px;
}

@media (max-width: 991px) {
    .program-card {
        min-width: 320px; /* responsive for tablets */
        max-width: 320px;
    }
}

#deptPrograms .nav-pills {
    justify-content: flex-start;
    margin-left: 0; /* 👈 force to stick left */
}


/* Show 2 and a half cards */
.scroll-cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-right: 50px; /* gives a clean edge spacing */
}

.program-card {
    min-width: 420px; /* 👈 controls card width */
    max-width: 420px;
}

@media (max-width: 991px) {
    .program-card {
        min-width: 320px; /* responsive for tablets */
        max-width: 320px;
    }
}

/* Show 2 and a half cards */
.scroll-cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-right: 50px; /* gives a clean edge spacing */
}

.program-card {
    min-width: 420px; /* 👈 controls card width */
    max-width: 420px;
}

@media (max-width: 991px) {
    .program-card {
        min-width: 320px; /* responsive for tablets */
        max-width: 320px;
    }
}
/* ==================== IMAGE ZOOM ON HOVER ==================== */
.program-card .img-wrap {
    width: 100%;
    height: 200px; /* fixed uniform height */
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
    position: relative;
}

    .program-card .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

.program-card:hover .img-wrap img {
    transform: scale(1.08); /* subtle zoom-in */
}

/* ====== Default (Desktop) ====== */
.scroll-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end; /* right aligned on desktop */
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.scroll-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--black);
    border: 1px solid transparent;
    background-image: linear-gradient(#000, #000), var(--grad-strong);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .scroll-btn:hover {
        background: var(--white);
        color: #000;
        border: 1px solid var(--white);
    }

    .scroll-btn i {
        font-size: 16px;
    }

/* ====== Mobile View: Center Arrows Below Heading ====== */
@media (max-width: 768px) {
    .scroll-controls {
        justify-content: center; /* center horizontally */
        margin-top: 16px; /* add spacing below heading */
        position: static; /* remove any fixed/absolute positioning */
        transform: none;
    }

    .scroll-btn {
        width: 52px; /* slightly bigger for touch */
        height: 52px;
    }

        .scroll-btn i {
            font-size: 18px;
        }
}

/* =================== DESKTOP =================== */
.heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.scroll-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end; /* desktop: right */
    margin-top: 0;
}

/* =================== MOBILE =================== */
@media (max-width: 768px) {
    .heading-row {
        flex-direction: column; /* stack heading and buttons */
        align-items: center;
    }

    .scroll-controls {
        justify-content: center; /* center the buttons */
        margin-top: 16px; /* spacing below heading */
        width: 100%; /* make container span full width */
    }

    .scroll-btn {
        width: 52px;
        height: 52px;
    }

        .scroll-btn i {
            font-size: 18px;
        }
}



/*17 campuses */

/* ==================== CAMPUS SECTION - MATCH DEPARTMENT DESIGN ==================== */
#campusPrograms {
    background: var(--black);
    color: var(--white);
    padding: 80px 0;
    position: relative;
}

    /* Heading Row */
    #campusPrograms .campus-heading-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    #campusPrograms .mu-subheading {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--white);
        letter-spacing: 1px;
    }

    #campusPrograms .mu-heading {
        font-weight: 800;
        font-size: 2.2rem;
        color: var(--white);
    }

        #campusPrograms .mu-heading em {
            font-style: italic;
            background: var(--grad-strong);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    /* Scroll Buttons - aligned right like department section */
    #campusPrograms .campus-scroll-controls {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
    }

    #campusPrograms .campus-scroll-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--black);
        border: 1px solid transparent;
        background-image: linear-gradient(#000, #000), var(--grad-strong);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

        #campusPrograms .campus-scroll-btn:hover {
            background: var(--white);
            color: #000;
            border: 1px solid var(--white);
        }

    /* Tabs — same as department */
    #campusPrograms .nav-pills {
        justify-content: flex-start;
        gap: 0.6rem;
    }

        #campusPrograms .nav-pills .nav-link {
            border: 1px solid var(--gray-mid);
            background: transparent;
            color: var(--white);
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

            #campusPrograms .nav-pills .nav-link.active {
                background: var(--white);
                color: var(--black);
                font-weight: 700;
            }

            #campusPrograms .nav-pills .nav-link:not(.active):hover {
                background: var(--gray-dark);
            }

    /* Scroll Cards & Cards */
    #campusPrograms .campus-scroll-cards {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 10px;
    }

    #campusPrograms .campus-card {
        min-width: 420px;
        max-width: 420px;
        background: #111;
        border: 1px solid var(--gray-mid);
        border-radius: 16px;
        padding: 18px;
        flex: 0 0 auto;
        transition: all 0.3s ease;
    }

        #campusPrograms .campus-card:hover {
            transform: translateY(-5px);
            border-color: #555;
        }

        #campusPrograms .campus-card .img-wrap {
            width: 100%;
            height: 200px;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 16px;
        }

            #campusPrograms .campus-card .img-wrap img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s ease;
            }

        #campusPrograms .campus-card:hover .img-wrap img {
            transform: scale(1.08);
        }

    #campusPrograms .card-meta {
        list-style: none;
        padding: 0;
        margin: 0 0 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

        #campusPrograms .card-meta li {
            font-size: 0.85rem;
            color: #ddd;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #campusPrograms .card-meta i {
            color: #ffae00;
            font-size: 14px;
        }

    /* Explore Button same as dept */
    #campusPrograms .explore-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 30px;
        background: var(--black);
        color: var(--white);
        border: 1px solid transparent;
        background-image: linear-gradient(var(--black), var(--black)), var(--grad-strong);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        #campusPrograms .explore-btn:hover {
            color: var(--black);
            background: var(--white);
            border: 1px solid var(--white);
        }

/* Responsive */
@media (max-width: 768px) {
    #campusPrograms .mu-heading {
        font-size: 1.8rem;
    }

    #campusPrograms .campus-card {
        min-width: 320px;
        max-width: 320px;
    }

    #campusPrograms .campus-heading-row {
        flex-direction: column;
        align-items: center;
    }

    #campusPrograms .campus-scroll-controls {
        justify-content: center;
        margin-top: 16px;
    }

    #campusPrograms .nav-pills .nav-link {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
}
/* ================== FINAL IMAGE HEIGHT FIX (OVERRIDE) ================== */
#campusPrograms .campus-card .img-wrap {
    width: 100% !important;
    height: 200px !important; /* 🔥 Force same fixed height as department */
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    display: block !important;
    position: relative;
}

    #campusPrograms .campus-card .img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 🔥 Force proper crop */
        display: block !important;
        max-width: none !important; /* ✅ Prevent bootstrap img-fluid interference */
    }
/* ================== UNIFORM CAMPUS CARD LAYOUT ================== */
#campusPrograms .campus-card {
    min-width: 420px;
    max-width: 420px;
    height: 500px; /* 👈 Fixed total card height */
    background: #111;
    border: 1px solid var(--gray-mid);
    border-radius: 16px;
    padding: 18px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ensures content alignment */
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    #campusPrograms .campus-card {
        min-width: 320px;
        max-width: 320px;
        height: 480px;
    }
}

/* ================== IMAGE SECTION ================== */
#campusPrograms .campus-card .img-wrap {
    width: 100%;
    height: 200px; /* 👈 same image height */
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
    position: relative;
}

    #campusPrograms .campus-card .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

#campusPrograms .campus-card:hover .img-wrap img {
    transform: scale(1.08);
}

/* ================== TEXT CONTENT ================== */
#campusPrograms .campus-card .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    min-height: 48px; /* 👈 ensures title block is same height across cards */
    display: flex;
    align-items: center;
}

#campusPrograms .campus-card .card-desc {
    font-size: 0.9rem;
    color: var(--gray-light);
    margin-bottom: 12px;
    min-height: 45px; /* 👈 keeps description consistent */
}

/* ================== META LIST ================== */
#campusPrograms .campus-card .card-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
}

    #campusPrograms .campus-card .card-meta li {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ddd;
    }

    #campusPrograms .campus-card .card-meta i {
        color: #ffae00;
        font-size: 14px;
    }

/* ================== FULL WIDTH BUTTON ================== */
#campusPrograms .campus-card .explore-btn.full-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* 👈 full width */
    padding: 12px;
    border-radius: 30px;
    background: var(--black);
    color: var(--white);
    border: 1px solid transparent;
    background-image: linear-gradient(var(--black), var(--black)), var(--grad-strong);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto; /* 👈 keeps button aligned bottom */
}

    #campusPrograms .campus-card .explore-btn.full-btn:hover {
        color: var(--black);
        background: var(--white);
        border: 1px solid var(--white);
    }

/* ====================== FADE OUT EDGES ====================== */
#campusPrograms .campus-scroll-wrapper {
    position: relative;
}

/* Left fade */
#campusPrograms .fade-left,
#campusPrograms .fade-right {
    position: absolute;
    top: 0;
    width: 60px; /* 👈 width of fade zone */
    height: 100%;
    pointer-events: none; /* 👈 allows scroll interaction below */
    z-index: 3;
}

#campusPrograms .fade-left {
    left: 0;
    background: linear-gradient(to right, var(--black) 30%, transparent 100%);
}

#campusPrograms .fade-right {
    right: 0;
    background: linear-gradient(to left, var(--black) 30%, transparent 100%);
}
/* ==================== FIX CAMPUS SCROLLBAR BACKGROUND ==================== */
#campusPrograms .campus-scroll-cards::-webkit-scrollbar {
    height: 6px; /* same slim style */
    background: transparent;
}

#campusPrograms .campus-scroll-cards::-webkit-scrollbar-thumb {
    background: var(--gray-mid); /* dark gray thumb */
    border-radius: 10px;
}

#campusPrograms .campus-scroll-cards::-webkit-scrollbar-track {
    background: var(--black); /* 👈 forces black track like department */
}
#campusPrograms .campus-scroll-cards::-webkit-scrollbar-thumb:hover {
    background: #555; /* lighter on hover */
}

/* ==============================
   ✅ Heading + Tabs + Arrows Layout
============================== */
.campus-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 👈 baseline alignment */
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Heading Block */
.campus-heading-text h4 {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.campus-heading-text h2 {
    margin: 0;
    line-height: 1;
    font-size: 2rem;
    font-weight: 700;
}

/* Tabs + Arrows Wrapper */
.campus-tabs-arrows {
    display: flex;
    align-items: center; /* 👈 aligns arrows & tabs vertically */
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .campus-tabs-arrows .nav {
        display: flex;
        gap: 0.5rem;
    }

.campus-scroll-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Style for arrows (optional refinement) */
.campus-scroll-btn {
    background: transparent;
    color: #fff;
    border: 2px solid #ffae00;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .campus-scroll-btn:hover {
        background: #ffae00;
        color: #000;
    }

/* ✅ Responsive Mobile Stack */
@media (max-width: 768px) {
    .campus-heading-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .campus-tabs-arrows {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 0.75rem;
    }

    .campus-scroll-controls {
        margin-top: 0.5rem;
    }
}
/* Heading block */
.campus-heading-text h4 {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.campus-heading-text h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Tabs + Arrows Row */
.campus-tabs-arrows {
    display: flex;
    justify-content: space-between; /* left and right alignment */
    align-items: center;
    flex-wrap: wrap; /* allows arrows to drop below tabs on mobile */
    gap: 1rem;
    margin-bottom: 1rem;
}

    /* Tabs */
    .campus-tabs-arrows .nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

/* Arrows */
.campus-scroll-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.campus-scroll-btn {
    background: transparent;
    color: #fff;
    border: 2px solid #ffae00;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .campus-scroll-btn:hover {
        background: #ffae00;
        color: #000;
    }

/* ✅ Mobile Responsive: Arrows below Tabs */
@media (max-width: 768px) {
    .campus-tabs-arrows {
        flex-direction: column;
        align-items: flex-start;
    }

    .campus-scroll-controls {
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .campus-tabs-row {
        flex-direction: column;
        align-items: flex-start; /* Tabs left */
    }

    .campus-scroll-controls {
        margin-top: 0.75rem;
        align-self: center; /* ⬅️ Centers arrows horizontally */
        justify-content: center;
        width: 100%; /* makes centering effective */
    }
}

/* ======================
   MOBILE HORIZONTAL SCROLL FOR CAMPUS TABS
====================== */
@media (max-width: 768px) {
    #campusPrograms .campus-tabs-arrows {
        flex-direction: column;
        align-items: flex-start;
    }

        /* Tabs Row - Enable Horizontal Scroll */
        #campusPrograms .campus-tabs-arrows .nav {
            display: flex;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            overflow-y: hidden;
            gap: 0.5rem;
            width: 100%;
            scrollbar-width: none; /* Firefox hide scrollbar */
        }

            /* Hide scrollbar in WebKit */
            #campusPrograms .campus-tabs-arrows .nav::-webkit-scrollbar {
                display: none;
            }

    /* Tabs - smaller padding for compact look */
    #campusPrograms .nav-pills .nav-link {
        flex: 0 0 auto; /* prevent stretching */
        font-size: 0.85rem;
        padding: 8px 16px;
        white-space: nowrap;
    }

    /* Arrows centered below tabs */
    #campusPrograms .campus-scroll-controls {
        justify-content: center;
        margin-top: 10px;
        width: 100%;
    }
}


/*  gallery */
/* =======================
   FACILITIES SECTION
   ======================= */
#facilitiesCarousel {
    background: #000;
    padding-block: clamp(48px, 6vw, 96px);
    overflow: hidden;
}

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

        #facilitiesCarousel .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);
        }

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

        #facilitiesCarousel .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;
        }

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

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

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

    #facilitiesCarousel .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);
    }

        #facilitiesCarousel .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);
        }

            #facilitiesCarousel .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;
            }

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

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

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

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

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

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

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

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

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

/* 2) Use ::before for the dark overlay instead of ::after */
#facilitiesCarousel .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;
}

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

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

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

/* Apply consistent dark overlay for both desktop & mobile */
#facilitiesCarousel .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;
}

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

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

/* Make sure overlay text stays above the gradient */
#facilitiesCarousel .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) {
    #facilitiesCarousel .facility-card::before {
        opacity: 1; /* Always show slight gradient */
    }

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

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

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

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

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

    #facilitiesCarousel .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;
    }
}


#facilitiesCarousel .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);
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Text overlay */
    #facilitiesCarousel .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 */
    #facilitiesCarousel .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 */
        #facilitiesCarousel .facility-card,
        #facilitiesCarousel .facility-card.active {
            transform-style: preserve-3d !important;
        }

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

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

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

    /* Center the card perfectly */
    #facilitiesCarousel .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 */
        #facilitiesCarousel .facility-card,
        #facilitiesCarousel .facility-card.active {
            transform-style: preserve-3d !important;
        }

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

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

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

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

    /* Image must fill card */
    #facilitiesCarousel .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) {

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

    #facilitiesCarousel .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;
    }

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

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

    #facilitiesCarousel .facility-card::before {
        z-index: 1 !important;
    }
}
@media (max-width: 992px) {

    #facilitiesCarousel .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;
    }

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

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

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

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

    /* Overlay text normal */
    #facilitiesCarousel .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) {

    #facilitiesCarousel {
        padding-bottom: 40px;
    }

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

        /* reset all crazy desktop positioning */
        #facilitiesCarousel .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 */
            #facilitiesCarousel .facility-card.active {
                opacity: 1 !important;
                display: block !important;
                z-index: 5 !important;
            }

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

        #facilitiesCarousel .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) {

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

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

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

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




    /* 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;
    }
}


/* team */



:root {
    --alw-gold: #D4AF37;
    --alw-dark: #000;
    --alw-card-dark: #111;
    --alw-light: #ccc;
    --alw-white: #fff;
}

/* ---------- Section ---------- */
#alwTsl-section {
    background: var(--alw-dark);
    padding: 60px 20px;
    font-family: "Outfit", sans-serif;
}

.alwTsl-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.alwTsl-heading h4 {
    color: var(--alw-white);
    font-weight: 400;
    margin-bottom: 5px;
}

.alwTsl-highlight {
    color: var(--alw-white);
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.alwTsl-gradient {
    background: linear-gradient(90deg, #4CAF50, #FFC107, #FF9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Cards ---------- */
.alwTsl-card {
    max-width: 370px;
    padding: 40px 20px 30px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.35s ease;
}

    .alwTsl-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
    }

.alwTsl-gold {
    background: var(--alw-gold);
    color: #000;
}

.alwTsl-dark {
    background: var(--alw-card-dark);
    color: var(--alw-white);
}

/* ---------- Photo ---------- */
.alwTsl-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
    border: 3px solid var(--alw-gold);
}

    .alwTsl-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ---------- Text ---------- */
.alwTsl-feedback {
    max-width: 300px;
    margin: 0 auto 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.alwTsl-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.alwTsl-role {
    font-size: 0.95rem;
    font-weight: 500;
}

.alwTsl-gold-text {
    color: var(--alw-gold);
}

/* ---------- Carousel Controls ---------- */
.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 45%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .alwTsl-carousel .owl-nav button {
        background: transparent;
        border: 2px solid var(--alw-gold);
        color: var(--alw-gold) !important;
        font-size: 1.4rem !important;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: all 0.35s ease;
    }

        .alwTsl-carousel .owl-nav button:hover {
            background: var(--alw-gold);
            color: #000 !important;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
            transform: scale(1.1);
        }

.alwTsl-carousel .owl-dots .owl-dot span {
    background: #555;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.alwTsl-carousel .owl-dots .owl-dot.active span {
    background: var(--alw-gold);
    width: 14px;
    height: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .alwTsl-photo {
        width: 100px;
        height: 100px;
    }

    .alwTsl-card {
        max-width: 90%;
    }
}

/* Same height for all cards */
.alwTsl-card {
    min-height: 470px; /* adjust if you want a bit taller/shorter */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Lighter center card (your “dark” card) */
.alwTsl-dark {
    background: #1a1a1a; /* light black so it separates from page bg */
    color: #fff;
}

/* Equal side gutters + visible arrows inside the carousel */
.alwTsl-container {
    max-width: 1320px;
    padding-inline: 8px;
}

.alwTsl-carousel .owl-stage-outer {
    overflow: visible;
}
/* so arrows/glow aren't clipped */

/* Place arrows just inside the gutters, not on top of cards */
.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none; /* buttons get events, wrapper doesn't */
}

    .alwTsl-carousel .owl-nav .owl-prev,
    .alwTsl-carousel .owl-nav .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: auto;
        z-index: 3;
    }

    .alwTsl-carousel .owl-nav .owl-prev {
        left: 8px;
    }
    /* ✅ now visible */
    .alwTsl-carousel .owl-nav .owl-next {
        right: 8px;
    }

/* Keep cards compact so 3 fit cleanly */
.alwTsl-card {
    max-width: 360px;
}

.alwTsl-feedback {
    max-width: 300px;
    margin: 0 auto 18px;
}

/* Optional: slightly smaller on mobile */
@media (max-width:768px) {
    .alwTsl-card {
        min-height: 420px;
        max-width: 92%;
    }
}

.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

    .alwTsl-carousel .owl-nav button {
        pointer-events: auto;
        z-index: 5;
    }

    .alwTsl-carousel .owl-nav .owl-prev {
        transform: translateX(-20px);
    }

    .alwTsl-carousel .owl-nav .owl-next {
        transform: translateX(20px);
    }

@media (max-width: 768px) {
    .alwTsl-carousel .owl-nav .owl-prev {
        transform: translateX(-10px);
    }

    .alwTsl-carousel .owl-nav .owl-next {
        transform: translateX(10px);
    }
}

.alwTsl-container {
    max-width: 1320px;
    padding-inline: 8px;
    margin: 0 auto;
}

.owl-stage-outer {
    overflow: visible; /* ✅ lets arrows and shadows breathe */
}

.alwTsl-carousel .owl-item.active.center .alwTsl-card {
    transform: scale(1.04);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

/* Give equal left/right padding to the carousel block itself */
#alwTsl-section .alwTsl-container {
    padding-inline: 24px;
}

/* Hide any overflow so the next card cannot peek on the right */
.alwTsl-carousel .owl-stage-outer {
    overflow: hidden;
}

/* Keep card spacing compact and heights consistent */
.alwTsl-card {
    max-width: 360px;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Arrows stay just inside the gutters */
.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

    .alwTsl-carousel .owl-nav .owl-prev,
    .alwTsl-carousel .owl-nav .owl-next {
        pointer-events: auto;
    }

    .alwTsl-carousel .owl-nav .owl-prev {
        margin-left: 4px;
    }

    .alwTsl-carousel .owl-nav .owl-next {
        margin-right: 4px;
    }

/* Slightly lighter “dark” card so it’s not same as page bg */
.alwTsl-dark {
    background: #1a1a1a;
    color: #fff;
}

@media (max-width:768px) {
    #alwTsl-section .alwTsl-container {
        padding-inline: 16px;
    }

    .alwTsl-card {
        min-height: 420px;
    }
}
.alwTsl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

    .alwTsl-carousel .owl-nav button {
        pointer-events: auto;
        z-index: 5;
    }

    .alwTsl-carousel .owl-nav .owl-prev {
        margin-left: -24px;
    }

    .alwTsl-carousel .owl-nav .owl-next {
        margin-right: -24px;
    }

@media (max-width: 768px) {
    .alwTsl-carousel .owl-nav .owl-prev {
        margin-left: -12px;
    }

    .alwTsl-carousel .owl-nav .owl-next {
        margin-right: -12px;
    }
}

/* insti */



#cardsReel {
    position: relative;
    background: #000;
    padding-top: 140px;
    z-index: 1;
}

.cards-header {
    position: sticky;
    top: 0px;
    text-align: center;
    padding-bottom: 20px;
    background: #000;
}

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

.cards-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    
}

.cards-card {
    width: 160px;
    height: 200px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(60px);
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    color: #fff;
}

 /*   .cards-card:nth-child(1) {
        background: linear-gradient(180deg,#ff6a88,#ff4b5c);
    }

    .cards-card:nth-child(2) {
        background: linear-gradient(180deg,#ffa94d,#ff7f2a);
    }

    .cards-card:nth-child(3) {
        background: linear-gradient(180deg,#ffe066,#ffd43b);
    }

    .cards-card:nth-child(4) {
        background: linear-gradient(180deg,#66e3a4,#34d399);
    }

    .cards-card:nth-child(5) {
        background: linear-gradient(180deg,#7dd3fc,#38bdf8);
    }

    .cards-card:nth-child(6) {
        background: linear-gradient(180deg,#60a5fa,#3b82f6);
    }

    .cards-card:nth-child(7) {
        background: linear-gradient(180deg,#a78bfa,#7c3aed);
    }

    .cards-card:nth-child(8) {
        background: linear-gradient(180deg,#f472b6,#ec4899);
    }

    .cards-card:nth-child(9) {
        background: linear-gradient(180deg,#f59e0b,#d97706);
    }

    .cards-card:nth-child(10) {
        background: linear-gradient(180deg,#14b8a6,#0ea5e9);
    }*/
/* was: position: sticky; top: 0;  <-- remove this */
#cardsReel .cards-header {
    position: relative; /* not sticky */
    top: auto;
    text-align: center;
    padding-bottom: 20px;
    background: #000;
    z-index: 2;
}
#cardsReel .cards-header {
    position: relative;
    background: #000;
    z-index: 999;
}

    #cardsReel .cards-header.is-fixed {
        position: fixed;
        top: 0; /* or your nav height: e.g. top: 80px; */
        left: 0;
        right: 0;
    }
.cards-card i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 12px;
}
.cards-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 10px;
}

    .cards-card i {
        font-size: 2rem; /* bigger, modern */
        margin-bottom: 12px; /* spacing between icon and text */
    }
.cards-card {
    font-weight: 600;
    font-size: 1rem; /* or 1.1rem if you want more presence */
    color: #fff;
}
.cards-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .cards-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    }

        .cards-card:hover i {
            transform: scale(1.2);
            transition: transform 0.4s ease;
        }
@media (max-width: 1024px) {
    .cards-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cards-card {
        width: 45%;
        margin-bottom: 16px;
    }
}

@media (max-width: 600px) {
    .cards-card {
        width: 100%;
    }
}
.first-card-fixed {
    opacity: 1 !important;
    transform: none !important;
}
@media (max-width:767px) {
    .cards-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cards-card {
        width: 45%;
        height: 140px;
        font-size: 0.9rem;
    }
}
@media (max-width: 767px) {
    #cardsReel {
        padding-top: 120px; /* ✅ Smaller gap on mobile */
    }
}
/* ===================== CARDS REEL STABILITY FIX ===================== */
#cardsReel {
    position: relative;
    width: 100%;
    overflow: hidden;
    
    padding: 120px 0;
   
    box-sizing: border-box;
    isolation: isolate; /* prevents z-index flicker */
    transform: translateZ(0); /* force hardware acceleration */
}

    #cardsReel .cards-header {
        position: relative;
        z-index: 2;
        text-align: center;
        margin-bottom: 40px;
    }

    #cardsReel .cards-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        position: relative;
        z-index: 1;
        padding: 0 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* each card stable sizing */
    #cardsReel .cards-card {
        flex: 0 1 200px;
        min-height: 120px;
       
        border-radius: 14px;
        padding: 25px 10px;
        font-weight: 600;
        text-align: center;
        transition: transform .3s ease, background .3s ease;
    }

        #cardsReel .cards-card:hover {
            
            transform: translateY(-5px);
        }

        #cardsReel .cards-card i {
            display: block;
            font-size: 28px;
           
            margin-bottom: 10px;
        }

    /* Prevent unexpected jumps */
    #cardsReel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
       
    }

/* Mobile responsive */
@media (max-width: 768px) {
    #cardsReel {
        padding: 130px 0;
    }

        #cardsReel .cards-card {
            flex: 0 1 45%;
        }
}

@supports (-webkit-touch-callout: none) {
    /* iOS Safari fix */
    #cardsReel {
        min-height: 100vh; /* prevents jumps when browser UI hides */
        height: -webkit-fill-available;
    }
}

@media (max-width: 768px) {
    #cardsReel {
        position: relative;
        overflow: hidden;
        transform: translateZ(0);
        will-change: transform;
    }
}

@media (max-width: 767px) {
    #cardsReel {
        position: relative;
        overflow: hidden;
       
        padding: 110px 0 60px;
        transform: translateZ(0);
    }

        #cardsReel .cards-row {
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        #cardsReel .cards-card {
            flex: 0 1 45%;
            min-height: 140px;
            opacity: 0;
            will-change: transform, opacity;
        }
}

/*.cards-card {
    width: 160px;
    height: 200px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px 10px;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #00b4ff 0%, #ffae00 100%);*/ /* ✨ refined gradient */
    /*box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}*/


.cards-card {
   
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
   
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: #2a2a2a; /* ✨ refined gradient #1a1a1a;*/
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}



/* accre */



.accreditations-dark {
    background: #000;
    position: relative;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
}

.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-title {
    background: linear-gradient(90deg, #FFD84D 0%, #FFAE00 40%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.acc-sub {
    color: #bbb;
}

.accredit-card-dark {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 28px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    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);
        transition: all 0.4s ease;
    }

    .accredit-card-dark:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.4);
    }

        .accredit-card-dark:hover::before {
            background: linear-gradient(180deg, #FFD84D, #FFAE00);
        }

.icon-circle-dark {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.05);
    transition: all 0.4s ease;
    flex-shrink: 0;
}

    .icon-circle-dark img {
        max-width: 55px;
        max-height: 55px;
        transition: all 0.4s ease;
    }

.accredit-card-dark:hover .icon-circle-dark {
    box-shadow: 0 0 25px 4px rgba(212, 175, 55, 0.5);
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
}

    .accredit-card-dark:hover .icon-circle-dark img {
        transform: scale(1.08);
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
    }

.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;
}

@media (max-width: 768px) {
    .accredit-card-dark {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
    }

        .accredit-card-dark::before {
            content: none;
        }

    .icon-circle-dark {
        margin-bottom: 10px;
        width: 90px;
        height: 90px;
    }

    .accredit-card-dark h5 {
        font-size: 1.05rem;
    }

    .accredit-card-dark p {
        font-size: 0.9rem;
        max-width: 90%;
        margin: 0 auto;
    }
}

/* career */

/* ==================== Scoped Career Guidance Styles ==================== */
#career-guidance {
    --black: #000;
    --warm-gray: #1a1a1a;
    --gray: #b3b3b3;
    --gold: #ffae00;
    --blue: #00b4ff;
    background: var(--black);
    color: var(--gray);
    padding: 6rem 0;
}

    #career-guidance h4 {
        text-transform: uppercase;
        font-weight: 600;
        color: var(--gold);
        letter-spacing: 1px;
        font-size: .95rem;
    }

    #career-guidance h1 {
        font-size: 2.6rem;
        font-weight: 800;
        margin-bottom: 1rem;
        background: linear-gradient(90deg, var(--blue), var(--gold));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #career-guidance p {
        color: var(--gray);
        line-height: 1.8;
    }

    /* Scoped nav pills */
    #career-guidance .cg-nav-pills .nav-link {
        background: transparent;
        color: var(--gray);
        border-radius: 0;
        text-align: left;
        padding: 1rem 1.2rem;
        border-left: 3px solid transparent;
        transition: .25s;
    }

        #career-guidance .cg-nav-pills .nav-link:hover {
            background: var(--warm-gray);
            color: #fff;
        }

        #career-guidance .cg-nav-pills .nav-link.active {
            /*background: var(--gold);*/
            color: white;
            border-left: 3px solid var(--blue);
        }

    /* Scoped tab content */
    #career-guidance .cg-tab-content {
        background: var(--warm-gray);
        border: 1px solid #2a2a2a;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,.5);
    }

    #career-guidance .cg-tab-pane h3 {
        color: var(--blue);
        font-weight: 700;
        margin-bottom: .8rem;
    }

    #career-guidance .cg-tab-pane ul {
        margin-top: 1rem;
        padding-left: 1.5rem;
    }

    #career-guidance .cg-tab-pane li {
        margin-bottom: .5rem;
    }

    #career-guidance img,
    #career-guidance video {
        width: 100%;
        border-radius: 10px;
        margin-top: 1rem;
        object-fit: cover;
        max-height: 320px;
    }

@media (max-width: 992px) {
    #career-guidance .cg-nav-pills {
        margin-bottom: 2rem;
    }
}


/* team*/

:root {
    --alw-gold: linear-gradient(90deg, #ffae00, #ffd84d);
    --alw-dark: #000000;
    --alw-light: #ffffff;
}

#alwTeamSection {
    position: relative;
}

/* ===== Top Banner ===== */
.alwTeamBanner {
    background: var(--alw-dark);
    text-align: center;
    padding: 80px 20px 120px;
    color: #fff;
    position: relative;
}

    .alwTeamBanner::after {
        content: "";
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 100%;
        height: 60px;
        background: #fff;
        clip-path: polygon(0 0, 25% 0, 25% 50%, 35% 50%, 35% 0, 65% 0, 65% 50%, 75% 50%, 75% 0, 100% 0, 100% 100%, 0 100%);
    }

.alwTeamHeading {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.alwTeamSub {
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.85;
}

/* ===== Cards Container ===== */
.alwTeamContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-top: -60px; /* pulls cards upward */
}

.alwTeamGrid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.alwMemberCard {
    background: #fff;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    padding: 30px 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

    .alwMemberCard.active {
        opacity: 1;
        transform: translateY(0);
    }

    .alwMemberCard:hover {
        transform: translateY(-10px) scale(1.03);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    }

.alwMemberPhoto {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 6px;
    filter: grayscale(100%);
    margin-bottom: 16px;
}

.alwMemberName {
    font-weight: 800;
    font-size: 18px;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    color: #000;
}

    .alwMemberName::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        width: 60px;
        height: 3px;
        background: var(--alw-gold);
        border-radius: 2px;
        transition: transform 0.8s ease;
    }

.alwMemberCard.active .alwMemberName::after {
    transform: translateX(-50%) scaleX(1);
}

.alwMemberRole {
    font-weight: 600;
    font-size: 14px;
    margin-top: 8px;
    color: #000;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .alwMemberCard {
        width: 100%;
    }

    .alwMemberPhoto {
        width: 200px;
        height: 200px;
    }
}

.alwMemberCard {
    opacity: 1;
    transform: translateY(0);
}
/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {
    .alwMemberCard {
        width: 100%;
        max-width: 360px; /* ✅ keeps it clean */
        margin: 0 auto;
        padding: 25px 20px;
    }

    .alwMemberPhoto {
        width: 180px; /* ✅ reduced size */
        height: 180px;
        margin: 0 auto 16px auto;
        display: block;
    }

    .alwMemberName {
        display: block;
        text-align: center;
        font-size: 17px;
    }

    .alwMemberRole {
        text-align: center;
        font-size: 14px;
    }

    .alwTeamGrid {
        gap: 30px; /* ✅ more breathing room */
        justify-content: center;
    }
}
/* ========= Gold line below each name ========= */
.alwMemberName {
    font-weight: 800;
    font-size: 18px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
}

    .alwMemberName::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #ffae00, #ffd84d);
        border-radius: 2px;
        transition: transform 0.8s ease, box-shadow 0.4s ease;
    }

/* ✨ Expand line when card becomes active */
.alwMemberCard.active .alwMemberName::after {
    transform: translateX(-50%) scaleX(1);
}

/* 🪄 Glow effect on hover */
.alwMemberCard:hover .alwMemberName::after {
    box-shadow: 0 0 10px #ffae00, 0 0 20px #ffd84d;
}

/* 📱 Mobile tweak for smaller screens */
@media (max-width: 768px) {
    .alwMemberName {
        font-size: 16px;
    }

        .alwMemberName::after {
            width: 50px;
        }
}
/* ========= GOLD LINE BELOW NAME ========= */
.alwMemberName {
    font-weight: 800;
    font-size: 18px;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    color: #000;
    text-align: center;
}

    .alwMemberName::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #ffae00 0%, #ffd84d 100%);
        border-radius: 2px;
        transition: transform 0.8s ease, box-shadow 0.4s ease;
        z-index: 2; /* make sure line is above card */
    }

/* ✨ Expand line when card becomes active */
.alwMemberCard.active .alwMemberName::after {
    transform: translateX(-50%) scaleX(1);
}

/* 🪄 Glow effect on hover */
.alwMemberCard:hover .alwMemberName::after {
    box-shadow: 0 0 10px #ffae00, 0 0 20px #ffd84d;
}

/* 📱 Mobile tweak */
@media (max-width: 768px) {
    .alwMemberName {
        font-size: 16px;
    }

        .alwMemberName::after {
            width: 50px;
        }
}

.alwMemberName::after {
    transform: translateX(-50%) scaleX(1) !important;
}



.alwTeamGrid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

/* 💻 Desktop & Laptop — force 4 cards in one row */
.alwMemberCard {
    flex: 1 1 22%; /* ✅ fits 4 even with gaps */
    max-width: 260px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    padding: 25px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* 📱 Tablets — 2 in a row */
@media (max-width: 991px) {
    .alwMemberCard {
        flex: 1 1 45%;
        max-width: 350px;
    }
}



.alwTeamGrid {
    display: flex;
    justify-content: center;
    align-items: stretch; /* ✅ ensures equal height */
    flex-wrap: wrap;
    gap: 30px;
}

/* 💻 Desktop & Laptop: 4 equal cards */
.alwMemberCard {
    flex: 1 1 22%;
    max-width: 260px;
    background: #fff;
    border-radius: 14px;
    text-align: center;
    padding: 25px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    display: flex;
    flex-direction: column; /* ✅ allows equal height layout */
    justify-content: space-between;
    height: 100%; /* ✅ match height across all cards */
}

.alwMemberPhoto {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover; /* ✅ fills full width neatly */
    object-position: center top; /* ✅ shows face properly */
    filter: grayscale(100%);
    margin-bottom: 16px;
    background: none; /* 🚫 removes black fill */
}

/* 📱 Mobile fine-tuning */
@media (max-width: 768px) {
    .alwMemberPhoto {
        width: 100%;
        height: auto; /* ✅ no fixed height */
        object-fit: contain; /* ✅ keeps full image visible */
        object-position: center; /* ✅ centers it */
        background: none; /* 🚫 no inner black border */
    }
}




/* 📱 Tablet: 2 in a row */
@media (max-width: 991px) {
    .alwMemberCard {
        flex: 1 1 45%;
        max-width: 360px;
    }
}

/* 📱 Mobile: 1 in a row */
@media (max-width: 768px) {
    .alwMemberCard {
        flex: 1 1 100%;
        max-width: 380px;
        margin: 0 auto;
    }

    .alwTeamGrid {
        gap: 25px;
    }
}