/* Base state - make sure it is fixed to the top */

#sticky-header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9999;

    transition: all 0.4s ease;

    /* Smooth transition */

}



/* Glassmorphism state applied on scroll */

#sticky-header.nav-glass {

    background: rgba(255, 255, 255, 0.15);

    /* Translucent white */

    backdrop-filter: blur(12px);

    /* The blur effect */

    -webkit-backdrop-filter: blur(12px);

    /* For Safari */

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    padding: 10px 0;

    /* Optional: shrink the header slightly */

}



/* Optional: change text color if needed when background becomes glass */

#sticky-header.nav-glass .dexon_menu ul li a {

    color: #979797;

    /* Adjust color to fit your design */

}



/* 

.fab-container {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 60px;

    height: 60px;

    z-index: 999;

}





.fab-main {

    width: 60px;

    height: 60px;

    background: #007a55;

    color: #fff;

    border-radius: 50%;

    font-size: 12px;



    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;



    line-height: 1;

    font-weight: 300;

    font-family: Arial, Helvetica, sans-serif;



    cursor: pointer;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

    transition: transform 0.3s ease;

}



.fab-item {

    position: absolute;

    right: 0;

    width: 50px;

    height: 50px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

    opacity: 0;

    visibility: hidden;

    transform: translateY(0);

    transition: all 0.3s ease;

}



.fab-item img {

    width: 26px;

    height: 26px;

}



.fab-item.whatsapp {

    bottom: 70px;

}



.fab-item.message {

    bottom: 130px;

}



.fab-container:hover .fab-item {

    opacity: 1;

    visibility: visible;

}



.fab-container:hover .fab-item.whatsapp {

    transform: translateY(-10px);

}



.fab-container:hover .fab-item.message {

    transform: translateY(-10px);

}



.fab-container:hover .fab-main {

    background-color: #f5b301;

    transform: rotate(45deg);

} */

.mb-fab-container {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 9999;

}



.mb-fab-main {

    width: 100px;

    height:35px;

    background: #28a745;

    color: #fff;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    position: relative;

}



.mb-text,

.mb-icon {

    position: absolute;

    transition: 0.4s;

    pointer-events: none;

    text-align: center;

    font-size: 11px;

    font-weight: bold;

}



.mb-icon {

    opacity: 0;

    transform: scale(0) rotate(-90deg);

    font-size: 24px;



}

.mb-fab-main:hover{

    background-color: #f5b301;

}



.mb-fab-container:hover .mb-text {

    opacity: 0;

    transform: scale(0);

}



.mb-fab-container:hover .mb-icon {

    opacity: 1;

    transform: scale(1) rotate(0deg);

}



.mb-fab-item {

    position: absolute;

    bottom: 0;

    right: 40px;

    opacity: 0;

    transition: 0.3s;

    z-index: -1;

}



.mb-fab-container:hover .mb-fab-item.mb-whatsapp {

    bottom: 50px;

    opacity: 1;

}



.mb-fab-container:hover .mb-fab-item.mb-message {

    bottom: 105px;

    opacity: 1;

}



/* --- RESPONSIVE --- */

@media (max-width: 991px) {

    .mb-nav_scroll {

        flex-direction: column;

        align-items: flex-start;

    }



    .mb-mega-menu {

        position: static;

        width: 100%;

        box-shadow: none;

        padding: 10px;

    }



    .mb-mega-menu-content {

        flex-direction: column;

        gap: 20px;

    }

}



.whatsapp-float {

    position: fixed;

    width: 60px;

    height: 60px;

    bottom: 40px;

    right: 40px;

    background-color: #25d366;

    color: #FFF;

    border-radius: 50px;

    text-align: center;

    font-size: 30px;

    box-shadow: 2px 2px 3px #999;

    z-index: 1000;

    /* Ensures it stays on top of everything */

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    text-decoration: none;

}



.whatsapp-float:hover {

    background-color: #128c7e;

    /* Darker Green on Hover */

    color: white;

    transform: scale(1.1);

    /* Zoom Effect */

}





h1 {

    font-family: 'Instrument Sans', sans-serif;

    font-weight: 500;

    font-size: 60px;

    text-align: center;

}



.dexon-button {

    /* Layout: Aligns icon and text perfectly */

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    /* Adjust space between arrow and text */



    /* Size & Shape */

    padding: 12px 28px;

    /* Slightly tighter padding to match image */

    border-radius: 9999px;

    /* Pill shape */



    /* Colors & Depth */

    background-color: #ffffff;

    /* Clean white */

    /* Very subtle border and shadow to match the image */

    border: 1px solid #f0f0f0;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);



    /* Font Styling */

    font-family: sans-serif;

    font-size: 16px;

    color: #000000;

    text-decoration: none;

    /* Removes default link underline from the whole button */



    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



/* Target the text specifically for the underline style */

.dexon-button span {

    /* text-decoration: underline; */

    text-underline-offset: 4px;

    /* Pushes the underline down slightly */

    text-decoration-thickness: 1px;

}



/* Fix for the Icon */

.dexon-button i {

    font-size: 18px;

    /* Icon looks smaller/finer in your image */

    stroke-width: 1px;

    /* If using SVG, or simulates thinness */

    text-decoration: none;

    /* Ensures arrow is NOT underlined */

}



/* Hover Effect */

.dexon-button:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);

}





/* Animation for floating objects */

@keyframes float {

    0% {

        transform: translateY(0px) rotate(0deg);

    }



    50% {

        transform: translateY(-20px) rotate(5deg);

    }



    100% {

        transform: translateY(0px) rotate(0deg);

    }

}



.floating-icon {

    position: absolute;

    opacity: 0.1;

    /* Keep it subtle so it doesn't distract from text */

    z-index: 0;

    animation: float 6s ease-in-out infinite;

}



/* Specific positions */

.icon-plane {

    top: 15%;

    left: 5%;

    font-size: 50px;

}



.icon-cap {

    top: 20%;

    right: 10%;

    font-size: 60px;

    animation-delay: 1s;

}



.icon-globe {

    bottom: 10%;

    left: 15%;

    font-size: 40px;

    animation-delay: 2s;

}









.rating-badge {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 500;

    color: #555;

}



.rating-stars {

    display: flex;

    gap: 3px;

}



.rating-stars i {

    color: #f5b301;

    font-size: 16px;

}



.hero-section {

    display: flex;

    flex-direction: column;

    margin-top: 100px;

    margin-bottom: 100px;

}



.hero-media {

    /* margin-top: 150px; */

    /* margin-bottom: 50px; */

    display: flex;

    justify-content: center;

}



.hero-image {

    max-width: 800px;

    width: 100%;

    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

}





.hero-media {

    margin-top: 20px;

    display: flex;

    justify-content: center;

}



.hero-video {

    width: 100%;

    height: 100%;

    max-width: 850px;

    border-radius: 16px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);

    cursor: pointer;

    transition: 0.3s;

    /* margin-bottom: 500px; */

}



.hero-video:hover {

    transform: scale(1.02);

}









/* ---------- Feature Section ---------- */



.feature-section {

    padding: 80px 0;

}



.feature-row {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 40px;

}



.feature-col {

    flex: 1 1 calc(25% - 25px);

}



.feature-single-box {

    background: #fff;

    padding: 30px;

    border-radius: 12px;

    height: 100%;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    transition: 0.3s;

    text-align: left;

}



.feature-single-box:hover {

    transform: translateY(-6px);

}



.feature-icon img {

    width: 55px;

    margin-bottom: 15px;

}



.feature-content h2 {

    font-size: 20px;

    margin-bottom: 10px;

    font-weight: 600;

}



.feature-content p {

    font-size: 15px;

    line-height: 1.6;

    color: #666;

}





/* ---------- About Section ---------- */



.about-thumb img {

    width: 100%;

    border-radius: 10px;

}



.about-item-list ul {

    padding-left: 0;

}



.about-item-list ul li {

    list-style: none;

    margin-bottom: 12px;

    font-size: 16px;

}



.about-item-list i {

    color: #0d6efd;

    margin-right: 6px;

}





/* ---------- Counter Section ---------- */



.single-counter-box {

    text-align: center;

    padding: 30px 10px;

}



.counter-title {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

}



.counter-title h1 {

    font-size: 36px;

    font-weight: 700;

}



.counter-text p {

    margin-top: 8px;

    font-size: 15px;

    color: #666;

}





/* ---------- Tablet Responsive ---------- */



@media (max-width:991px) {



    .feature-col {

        flex: 1 1 calc(50% - 25px);

    }



    .dexon-section-title h1 {

        font-size: 32px;

        text-align: center;

    }



    .about-bg {

        text-align: center;

    }



    .about-thumb {

        margin-bottom: 30px;

    }



}





/* ---------- Mobile Responsive ---------- */



@media (max-width:576px) {



    .feature-col {

        flex: 1 1 100%;

    }



    .feature-single-box {

        text-align: center;

        padding: 25px;

    }



    .feature-content h2 {

        font-size: 18px;

    }



    .feature-content p {

        font-size: 14px;

    }



    .dexon-section-title h1 {

        font-size: 26px;

    }



    .counter-title h1 {

        font-size: 28px;

    }



}





/* ---------- Hide decorative shapes on mobile ---------- */



@media (max-width:768px) {



    .dream-shape,

    .dream-shape2,

    .dream-shape3,

    .dream-shape4 {

        display: none;

    }



}



/* ===== SECTION ===== */

.client-stories-wrapper {

    padding: 80px 0;

    background: #ececec6a;

    color: #000000;

    font-family: Arial, sans-serif;

}



.container {

    max-width: 1200px;

    margin: auto;

}



.section-heading-center {

    text-align: center;

    margin-bottom: 40px;

}



/* ===== GRID ===== */

.story-grid {

    display: flex;

    gap: 24px;

    /* justify-content: center; */

    flex-wrap: nowrap;

}



/* ===== STORY CARD ===== */

.story-card {

    width: 348px;

    height: 370px;

    border-radius: 24px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    background: #b4b4b4;

}



/* ===== VIDEO ===== */

.story-card video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ===== PLAY BUTTON ===== */

.play-indicator {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(6px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

    transition: 0.3s ease;

}



.story-card:hover .play-indicator {

    opacity: 0;

}



/* ===== BOTTOM OVERLAY ===== */

.story-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 20px;

    background: linear-gradient(to top,

            rgba(0, 0, 0, 0.85),

            rgba(0, 0, 0, 0));

    z-index: 1;

}



.story-overlay h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 600;

    color: #fff;

}



.story-overlay p {

    margin: 6px 0 0;

    font-size: 14px;

    opacity: 0.85;

    color: #fff;

}









/* Container to align buttons side-by-side */

.header-button-group {

    display: flex;

    align-items: top;



    gap: 12px;

    /* Space between buttons */

    float: right;

    margin-top: 15px;

}



/* Common Styles for both buttons */

.header-button-group a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    border-radius: 50px;

    /* Pill shape */

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.3s ease;

}



.header-button-group a img {

    margin-right: 10px;

    height: 20px;

    /* Ensures icons are uniform */

}







.btn-counselor {

    border-radius: 49px;

    border: 1.4px solid #E8E8E8;

    background: #F4F4F4;

    box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 -4px 10px 0 rgba(0, 0, 0, 0.05) inset, 4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 4px 10px 0 rgba(0, 0, 0, 0.05) inset;

}



.btn-counselor:hover {

    border-radius: 49px;

    border: 1.4px solid #464646;

    background: #0F0F0F;

    color: #FFF;

    box-shadow: -4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 -4px 20px 0 rgba(255, 255, 255, 0.30) inset, 4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 4px 20px 0 rgba(255, 255, 255, 0.30) inset;

}

.btn-counselor-hero {

    border-radius: 49px;

    border: 1.4px solid #E8E8E8;

    background: #F4F4F4;

    box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 -4px 10px 0 rgba(0, 0, 0, 0.05) inset, 4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 4px 10px 0 rgba(0, 0, 0, 0.05) inset;

}



.btn-counselor-hero-new {

    border-radius: 49px;

    border: 1.4px solid #464646;

    background: #0F0F0F;

    color: #FFF;

    box-shadow: -4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 -4px 20px 0 rgba(255, 255, 255, 0.30) inset, 4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 4px 20px 0 rgba(255, 255, 255, 0.30) inset;

}
.btn-counselor-hero-new:hover {

    border-radius: 49px;

    border: 1.4px solid #E8E8E8;

    background: #F4F4F4;

    box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 -4px 10px 0 rgba(0, 0, 0, 0.05) inset, 4px 0 10px 0 rgba(0, 0, 0, 0.05) inset, 0 4px 10px 0 rgba(0, 0, 0, 0.05) inset;

}



.btn-counselor-hero:hover {

    border-radius: 49px;

    border: 1.4px solid #464646;

    background: #0F0F0F;

    color: #FFF;

    box-shadow: -4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 -4px 20px 0 rgba(255, 255, 255, 0.30) inset, 4px 0 20px 0 rgba(255, 255, 255, 0.30) inset, 0 4px 20px 0 rgba(255, 255, 255, 0.30) inset;

}





.btn-eligibility {

    border-radius: 25px;

    border: 1px solid #007D57;

    color: white;

    background: #059669;

    box-shadow: 0 -4px 20px 0 rgba(1, 118, 81, 0.30) inset, 0 4px 20px 0 rgba(1, 118, 81, 0.30) inset, -4px 0 20px 0 rgba(1, 118, 81, 0.30) inset, 4px 0 20px 0 rgba(1, 118, 81, 0.30) inset;

}



.btn-eligibility:hover {

    border-radius: 49px;

    border: 1.4px solid #7DC5AF;

    background: #F4F4F4;

    color: #059669;

    box-shadow: -4px 0 10px 0 rgba(196, 225, 216, 0.50) inset, 0 -4px 10px 0 rgba(196, 225, 216, 0.50) inset, 4px 0 10px 0 rgba(196, 225, 216, 0.50) inset, 0 4px 10px 0 rgba(196, 225, 216, 0.50) inset;

}

.btn-eligibility-hero {

    border-radius: 25px;

    border: 1px solid #007D57;

    color: white;

    background: #059669;

    box-shadow: 0 -4px 20px 0 rgba(1, 118, 81, 0.30) inset, 0 4px 20px 0 rgba(1, 118, 81, 0.30) inset, -4px 0 20px 0 rgba(1, 118, 81, 0.30) inset, 4px 0 20px 0 rgba(1, 118, 81, 0.30) inset;

}



.btn-eligibility-hero:hover {

    border-radius: 49px;

    border: 1.4px solid #7DC5AF;

    background: #F4F4F4;

    color: #059669;

    box-shadow: -4px 0 10px 0 rgba(196, 225, 216, 0.50) inset, 0 -4px 10px 0 rgba(196, 225, 216, 0.50) inset, 4px 0 10px 0 rgba(196, 225, 216, 0.50) inset, 0 4px 10px 0 rgba(196, 225, 216, 0.50) inset;

}



/* Mobile Responsive adjustment */

@media (max-width: 991px) {

    .header-button-group {

        float: none;

        justify-content: center;

        margin-bottom: 20px;

    }

}



/* Base Pill Styling */

.btn-custom-pill {

    border-radius: 50px;

    padding: 12px 30px;

    font-weight: bolder;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    /* Space between icon and text */

    transition: all 0.3s ease-in-out;

    border: none;

}



/* Icon specific sizing */

.btn-custom-pill i {

    font-size: 1.4rem;

    line-height: 1;

}



/* --- Green Button Colors --- */



.btn-green-gradient {

    width: 198px;

    height: 50px;



    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;



    padding: 8px 16px;

    border-radius: 25px;



    background: #059669;



    color: #fff;



    font-weight: 900;

    font-size: 14px;

    text-align: center;

    border: 1px solid #047857;



    box-shadow:

        inset 4px 0 20px rgba(1, 118, 81, 0.3),

        inset -4px 0 20px rgba(1, 118, 81, 0.3),

        inset 0 4px 20px rgba(1, 118, 81, 0.3),

        inset 0 -4px 20px rgba(1, 118, 81, 0.3);



    transition: all 0.3s ease;

    cursor: pointer;

}





/* 🔥 HOVER EFFECT */

.btn-green-gradient:hover {

    transform: translateY(-3px) scale(1.03);



    background: linear-gradient(180deg, #06b77d 0%, #047857 100%);



    box-shadow:

        0 8px 25px rgba(5, 150, 105, 0.4),

        inset 0 4px 15px rgba(255, 255, 255, 0.2);



    border-color: #065f46;

}





/* ✨ CLICK EFFECT */

.btn-green-gradient:active {

    transform: scale(0.96);

    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.25);

}



.btn-green-gradient:hover {

    background: linear-gradient(180deg, #eafaf5 0%, #d4ede5 100%);

    color: #00ff66;

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);

}



/* --- Dark/Light Button Colors --- */

.btn-dark-gradient {

    background: linear-gradient(180deg, #F4F4F4 0%, #E8E8E8 100%);

    color: #0F0F0F;

    font-weight: 500;

    font-size: 14px;

    line-height: 1.65;

    letter-spacing: 0;

    text-align: center;



    border: 1px solid #000;

    box-shadow:

        inset -4px 0 10px rgba(0, 0, 0, 0.05),

        inset 0 -4px 10px rgba(0, 0, 0, 0.05),

        inset 4px 0 10px rgba(0, 0, 0, 0.05),

        inset 0 4px 10px rgba(0, 0, 0, 0.05);

}



.btn-dark-gradient:hover {

    width: 193px;

    height: 50px;



    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;



    padding: 13px 16px;

    border-radius: 49px;



    background: linear-gradient(180deg, #F4F4F4 0%, #E8E8E8 100%);

    color: #0F0F0F;



    font-weight: 500;

    font-size: 14px;

    line-height: 1.65;

    text-align: center;



    border: 1.4px solid #464646;



    box-shadow:

        inset 0 4px 20px rgba(255, 255, 255, 0.3),

        inset 0 -4px 20px rgba(255, 255, 255, 0.3),

        inset 4px 0 20px rgba(255, 255, 255, 0.3),

        inset -4px 0 20px rgba(255, 255, 255, 0.3);



    transition: all 0.3s ease;

    cursor: pointer;

}





/* 🔥 HOVER EFFECT */

.btn-dark-gradient:hover {

    transform: translateY(-3px) scale(1.02);



    background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);



    box-shadow:

        0 8px 25px rgba(0, 0, 0, 0.15),

        inset 0 4px 15px rgba(255, 255, 255, 0.5);



    border-color: #000;

}





/* ✨ CLICK EFFECT */

.btn-dark-gradient:active {

    transform: scale(0.97);

    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.2);

}



/* Container for both sliders */

.slider-wrapper {

    /* background: radial-gradi 	ent(circle, #062a06 0%, #000000 100%); */

    padding: 60px 0;

    overflow: hidden;

}



.logo-track {

    display: flex;

    width: max-content;

    padding: 20px 0;

}



/* Direction 1: Right to Left */

.move-left {

    animation: scroll-left 50s linear infinite;

}



/* Direction 2: Left to Right */

.move-right {

    animation: scroll-left 50s linear infinite reverse;

    /* Just add reverse! */

}



@keyframes scroll-left {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.logo-track img {

    height: 40px;

    margin: 0 50px;

    opacity: 0.6;

    /* filter: brightness(0) invert(1);  */

}



.slider-wrapper {

    margin-top: 100px;

}









/* Testimonial CSS  */



.mb-testimonial-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 80px 20px;

    overflow: hidden;

    background-color: var(--mb-bg-light);

}



/* --- Floating Grid Background --- */

.mb-grid-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    /* Mobile: 3 cols */

    gap: 20px;

    padding: 20px;

    pointer-events: none;

    z-index: 1;

}



@media (min-width: 768px) {

    .mb-grid-container {

        grid-template-columns: repeat(6, 1fr);

        /* Desktop: 6 cols */

        gap: 30px;

    }

}



/* --- Column Animation Logic --- */

.mb-col {

    display: flex;

    flex-direction: column;

    gap: 20px;

    animation: mb-floating var(--mb-float-speed) ease-in-out infinite alternate;

}



.mb-col:nth-child(even) {

    animation-duration: 5s;

    animation-delay: 1s;

    margin-top: 60px;

}



.mb-col:nth-child(3n) {

    animation-duration: 6s;

    margin-top: -30px;

}



@keyframes mb-floating {

    0% {

        transform: translateY(0);

    }



    100% {

        transform: translateY(-30px);

    }

}



/* --- Card Styles --- */

.mb-card {

    width: 100%;

    aspect-ratio: 1/1;

    background: #f0f0f0;

    border-radius: var(--mb-pill-radius);

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

    opacity: 0.9;

    transition: transform 0.3s ease, opacity 0.3s ease;

    pointer-events: auto;

}



.mb-card-empty {

    background: linear-gradient(135deg, #f9f9f9 0%, #eeeeee 100%);

    opacity: 0.4;

}



.mb-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(10%) contrast(1.1);

    display: block;

}



.mb-card:hover {

    transform: scale(1.05) rotate(2deg);

    z-index: 10;

    opacity: 1;

}



/* --- Content Overlay --- */

.mb-content-box {

    position: relative;

    z-index: 5;

    text-align: center;

    max-width: 700px;

    /* background: linear-gradient(white); */

    padding: 50px 30px;

    border-radius: 40px;

    backdrop-filter: blur(9px);

    -webkit-backdrop-filter: blur(12px);

}



.mb-badge {

    display: inline-block;

    padding: 6px 16px;

    background: #f2f2f2;

    border-radius: 20px;

    font-size: 14px;

    font-weight: 600;

    color: var(--mb-text-gray);

    margin-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.mb-headline {

    font-size: clamp(2rem, 5vw, 3.5rem);

    color: var(--mb-primary-black);

    line-height: 1.1;

    margin-bottom: 20px;

    font-weight: 800;

    letter-spacing: -1px;

}



.mb-description {

    font-size: 1.1rem;

    color: var(--mb-text-gray);

    margin-bottom: 40px;

    line-height: 1.6;

}



.mb-btn-primary {

    display: inline-block;

    background: var(--mb-primary-black);

    color: white;

    padding: 16px 36px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.mb-btn-primary:hover {

    background: #333;

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



/* --- Responsive Logic --- */

@media (max-width: 768px) {



    /* Keep only side columns visible to ensure text is clear on small screens */

    .mb-col:nth-child(3),

    .mb-col:nth-child(4) {

        display: none;

    }



    .mb-content-box {

        background: rgba(255, 255, 255, 0.95);

        margin: 0 10px;

        padding: 40px 20px;

    }

}









/* body {

            margin: 0;

            background-color: var(--mb-bg-light);

            color: var(--mb-text-dark);

            font-family: 'Plus Jakarta Sans', sans-serif;

            overflow-x: hidden;

        } */



.mb-page-wrapper {

    padding: 80px 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 100px

}



/* --- Consultancy Header --- */

.mb-consultancy-header {

    text-align: center;

    max-width: 900px;

    padding: 0 20px;

    margin-bottom: 60px;

}



.mb-consultancy-header .mb-badge {

    /* background: #e0f2fe; */

    color: var(--mb-primary-blue);

    padding: 8px 20px;

    border-radius: 100px;

    font-size: 0.9rem;

    font-weight: 700;

    display: inline-block;

    margin-bottom: 20px;

}



.mb-consultancy-header h1 {

    font-size: clamp(2.2rem, 5vw, 3.8rem);

    line-height: 1.2;

    font-weight: 800;

    color: var(--mb-text-dark);

    margin-bottom: 20px;

}



.mb-consultancy-header p {

    font-size: 1.15rem;

    color: var(--mb-text-muted);

    max-width: 650px;

    margin: 0 auto;

}



/* --- The Moving Photo Wall --- */

.mb-slider-container {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

    position: relative;

}



/* Fade edges effect */

.mb-slider-container::before,

.mb-slider-container::after {

    content: "";

    position: absolute;

    top: 0;

    width: 15%;

    height: 100%;

    z-index: 2;

    pointer-events: none;

}



.mb-slider-container::before {

    left: 0;

    /* background: linear-gradient(to right, var(--mb-bg-light), transparent); */

}



.mb-slider-container::after {

    right: 0;

    /* background: linear-gradient(to left, var(--mb-bg-light), transparent); */

}



.mb-track-row {

    display: flex;

    width: max-content;

    gap: 25px;

    animation: mb-slide-horizontal var(--mb-speed) linear infinite;

}



.mb-row-reverse {

    animation-direction: reverse;

}



.mb-student-card {

    width: 280px;

    background: var(--mb-white);

    border-radius: 20px;

    padding: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);

    transition: all 0.4s ease;

}



.mb-image-box {

    width: 100%;

    height: 320px;

    border-radius: 14px;

    overflow: hidden;

    margin-bottom: 12px;

}



.mb-image-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.mb-info {

    padding: 5px;

    display: none;

}



.mb-info .mb-tag {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--mb-accent-green);

    font-weight: 700;

}



.mb-info h4 {

    margin: 5px 0 2px;

    font-size: 1rem;

}



.mb-info p {

    margin: 0;

    font-size: 0.85rem;

    color: var(--mb-text-muted);

}



.mb-student-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

}



@keyframes mb-slide-horizontal {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(calc(-50% - 12.5px));

    }

}



/* --- CTA Footer --- */

.mb-footer-cta {

    margin-top: 80px;

    text-align: center;

}



.mb-btn-apply {

    background: #007D57;

    color: white;

    padding: 18px 45px;

    border-radius: 15px;

    text-decoration: none;

    font-weight: 700;

    display: inline-block;

    transition: 0.3s;

    box-shadow: 0 10px 20px rgba(2, 132, 199, 0.2);

}



.mb-btn-apply:hover {

    transform: translateY(-3px);

    background: #f5b301;

    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.3);

}



@media (max-width: 768px) {

    .mb-student-card {

        width: 220px;

    }



    .mb-image-box {

        height: 260px;

    }

}





.fab-container {

    position: fixed;

    bottom: 30px;

    right: 30px;

    display: flex;

    flex-direction: column-reverse;

    align-items: center;

}



.fab-label {

    position: absolute;

    bottom: 70px;

    /* Adjust based on your button height */

    background: #333;

    color: #fff;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    pointer-events: none;

    /* Prevents the label from blocking clicks */

    opacity: 0.9;

}



/* Optional: Hide label until hover */

.fab-container:hover .fab-label {

    opacity: 1;

    transform: translateY(-5px);

    transition: all 0.3s ease;

}



/* 1. Initial state of the label */

.fab-label {

    transition: opacity 0.3s ease, transform 0.3s ease;

    opacity: 1;

    pointer-events: none;

    /* Crucial so it doesn't block the '+' click */

}



/* 2. Hide the label when the main button is hovered */

.fab-main:hover~.fab-label {

    opacity: 0;

    transform: translateY(10px);

    /* Optional: slides it down slightly as it fades */

}



/* 3. Also hide it if the container is active (if you have a toggle class) */

.fab-container:hover .fab-label {

    /* If you want it gone as soon as the menu opens, keep this */

    opacity: 0;





}



  .mb-uni-list { list-style: none; padding-left: 0; }

    .mb-uni-list li::before { content: "🏛️ "; margin-right: 8px; }

    .mb-faq-item strong { display: block; margin-top: 15px; color: #059669; }

    .mb-faq-item p { margin-bottom: 5px; font-size: 0.95rem; }

    .mb-icon { font-size: 30px; margin-bottom: 10px; }

    .mb-cta a { text-decoration: none !important; display: inline-block; }