/* ========================================
   TABLE OF CONTENTS
   ========================================
   1. CSS Variables & Root Styles
   2. Global Styles & Resets
   3. Overflow Prevention
   4. Navigation Styles
   5. Hero Banner Section
   6. Who We Are Section
   7. Mission Vision Values Section
   8. Why Join Us Section
   9. Footer Section
   10. Responsive Media Queries
   ======================================== */


/* ========================================
   1. CSS VARIABLES & ROOT STYLES
   ======================================== */

:root {
    /* Color Palette */
    --dark-blue: #1a2942;
    --dark-blue-light: #2d3e5f;
    --navy: #0f1e3a;
    --light-blue: #e8f1ff;
    --lighter-blue: #f5f9ff;

    --golden: #fbbf24;
    --golden-bright: #fcd34d;
    --golden-dark: #f59e0b;
    --golden-light: #fef3c7;

    --white: #ffffff;
    --off-white: #f8fafc;
    --text-dark: #1e293b;
    --text-gray: #64748b;
    --text-light: #94a3b8;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2d3e5f 0%, #1a2942 100%);
    --gradient-golden: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-light: linear-gradient(135deg, #f5f9ff 0%, #e8f1ff 100%);
    --gradient-hero: linear-gradient(135deg, rgba(29, 78, 216, 0.8) 0%, rgba(30, 58, 138, 0.9) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-golden: 0 4px 20px rgba(251, 191, 36, 0.3);

    /* Spacing */
    --section-padding: 100px;
    --navbar-height: 80px;

    /* Transitions */
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}


/* ========================================
   2. GLOBAL STYLES & RESETS
   ======================================== */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--off-white);
    color: var(--text-dark);
    overflow-x: hidden;
    width: 100%;
    line-height: 1.6;
}

/* Section Padding */
.section-padding {
    padding: var(--section-padding) 0;
}

/* Common Text Utilities */
.text-white-80 {
    color: rgba(255, 255, 255, 0.9);
}

.gradient-text {
    background: var(--gradient-golden);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ========================================
   3. OVERFLOW PREVENTION SYSTEM
   ======================================== */

/* Prevent horizontal scroll on all elements */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

/* Constrain containers */
.container {
    /* max-width: 100%; */
    overflow: hidden;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
}

/* Ensure sections don't overflow */
section {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Constrain columns */
[class*="col-"] {
    overflow: hidden;
    max-width: 100%;
}

/* Fix AOS animations to prevent overflow */
[data-aos] {
    overflow: hidden;
}

[data-aos="fade-right"]:not(.aos-animate) {
    transform: translate3d(-30px, 0, 0);
    opacity: 0;
}

[data-aos="fade-left"]:not(.aos-animate) {
    transform: translate3d(30px, 0, 0);
    opacity: 0;
}

[data-aos="fade-right"].aos-animate,
[data-aos="fade-left"].aos-animate {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}


/* ========================================
   4. NAVIGATION STYLES
   ======================================== */

/* Main Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1030;
}

/* Navbar Scrolled State */
.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
}

/* Brand Logo */
.navbar-brand {
    display: flex;
    align-items: center;
}

.logo-img {
    width: auto;
    max-width: 200px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.3));
    transition: var(--transition-base);
}

/* Mobile Toggle Button */
.navbar-toggler {
    border: 2px solid var(--golden-dark);
    padding: 8px 10px;
    border-radius: 6px;
    transition: var(--transition-base);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(251, 191, 36, 0.25);
    outline: none;
}

.navbar-toggler:hover {
    background-color: var(--golden-light);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f59e0b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 24px;
    height: 24px;
}

/* Navigation Links */
.nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    margin: 0 10px;
    padding: 8px 15px !important;
    position: relative;
    transition: var(--transition-base);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--golden-dark);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--golden-dark) !important;
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 80%;
}

.nav-link:hover,
.nav-link.active {
    /* background: linear-gradient(135deg, #f5f9ff 0%, #e8f1ff 100%); */
    /* color: var(--dark-blue) !important; */
    /* transform: translateX(5px); */
}

/* CTA Button */
.btn-join {
    background: var(--gradient-golden);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    transition: var(--transition-base);
    box-shadow: var(--shadow-golden);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-decoration: none;
}

.btn-join:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 28px rgba(251, 191, 36, 0.4);
    color: var(--white);
}


/* ========================================
   5. HERO BANNER SECTION
   ======================================== */

.hero-banner {
    position: relative;
    height: 460px;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 50%, #1a2942 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: var(--navbar-height);
}

/* Banner Overlay Effect */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.15) 0%, transparent 50%);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Banner Content */
.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 100%;
}

/* Breadcrumb Navigation */
.breadcrumb-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.breadcrumb-custom a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-custom a:hover {
    color: var(--golden-bright);
}

.breadcrumb-custom .separator {
    color: var(--golden-bright);
}

.breadcrumb-custom .current {
    color: var(--golden-bright);
    font-weight: 600;
}

/* Banner Title */
.banner-title {
    font-size: 4rem;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Decorative Line */
.banner-line {
    width: 150px;
    height: 4px;
    background: var(--gradient-golden);
    margin: 30px auto;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--golden-bright);
    border-radius: 20px;
    position: relative;
    animation: mouseScroll 2s infinite;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--golden-bright);
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes mouseScroll {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(15px);
        opacity: 0;
    }
}


/* ========================================
   6. WHO WE ARE SECTION
   ======================================== */

.who-we-are {
    background: var(--white);
    position: relative;
}

.who-we-are::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Section Badge */
.section-badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--golden-light);
    color: var(--golden-dark);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid var(--golden-bright);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-badge.light {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border-color: var(--white);
}

/* Section Title */
.section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--dark-blue);
}

/* Title Underline */
.title-underline {
    width: 80px;
    height: 4px;
    background: var(--gradient-golden);
    border-radius: 2px;
    margin-bottom: 25px;
}

/* Lead Text */
.lead-text {
    font-size: 1.15rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.8;
}

/* Description Text */
.description-text {
    color: var(--text-gray);
    font-size: 1rem;
    margin-bottom: 30px;
}

/* Feature Points */
.feature-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.point-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: var(--lighter-blue);
    border-radius: 12px;
    border-left: 4px solid var(--golden);
    transition: var(--transition-base);
}

.point-item:hover {
    background: var(--light-blue);
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.point-item i {
    color: var(--golden-dark);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.point-item span {
    color: var(--text-dark);
    font-weight: 500;
}

/* Logo Showcase */
.logo-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    border-radius: 30px;
    overflow: hidden;
}

.logo-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.main-logo {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(251, 191, 36, 0.3));
    animation: floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo {

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

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

/* Floating Decorative Shapes */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: var(--gradient-golden);
    opacity: 0.15;
    border-radius: 50%;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 10%;
    animation: floatShape 6s ease-in-out infinite;
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: 10%;
    right: 10%;
    animation: floatShape 8s ease-in-out infinite reverse;
}

.shape-3 {
    width: 80px;
    height: 80px;
    top: 50%;
    right: 20%;
    animation: floatShape 7s ease-in-out infinite;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(15px, 15px) rotate(180deg);
    }
}


/* ========================================
   7. MISSION VISION VALUES SECTION
   ======================================== */

.mission-vision-values {
    background: var(--lighter-blue);
    position: relative;
    overflow: hidden;
}

.mission-vision-values::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    animation: rotateGlow 20s linear infinite;
    pointer-events: none;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Section Header */
.section-header {
    margin-bottom: 60px;
}

.section-subtitle {
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-top: 10px;
}

/* MVV Cards */
.mvv-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    /* overflow: hidden; */
    border: 2px solid var(--light-blue);
    transition: all 0.4s ease;
    height: 100%;
    box-shadow: var(--shadow-sm);
    /* Prevent overflow on hover */
    /* will-change: transform; */
}

.mvv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent);
    /* transition: left 0.6s ease; */
}

.mvv-card:hover::before {
    left: 100%;
}

.mvv-card:hover {
    /* Reduced transform to prevent overflow */
    /* transform: translateY(-10px) scale(1.02); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--golden);
}

/* Card Icon */
.card-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

.icon-bg {
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--golden-light);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}

.mvv-card:hover .icon-bg {
    background: var(--gradient-golden);
    transform: translate(-50%, -50%) scale(1.1);
}

.card-icon {
    font-size: 3rem;
    color: var(--golden-dark);
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.mvv-card:hover .card-icon {
    color: var(--white);
}

/* Card Content */
.card-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 15px;
}

.card-description {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.card-footer-line {
    width: 60px;
    height: 3px;
    background: var(--gradient-golden);
    margin: 0 auto;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.mvv-card:hover .card-footer-line {
    width: 100px;
}


/* ========================================
   8. WHY JOIN US SECTION
   ======================================== */

.why-join-us {
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.why-join-us::before {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
    pointer-events: none;
}

/* Benefits List */
.benefits-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition-base);
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
    border-color: var(--golden-bright);
}

.benefit-icon {
    width: 55px;
    height: 55px;
    background: var(--gradient-golden);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-golden);
}

.benefit-icon i {
    font-size: 1.4rem;
    color: var(--white);
}

.benefit-item span {
    color: var(--white);
    font-weight: 500;
    font-size: 1.05rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
    box-shadow: var(--shadow-md);
    /* Prevent overflow */
    overflow: hidden;
    will-change: transform;
}

.stat-card:hover {
    background: var(--white);
    /* Reduced scale to prevent overflow */
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow-lg);
    border-color: var(--golden);
}

.stat-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-golden);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
    box-shadow: var(--shadow-golden);
}

.stat-card:hover .stat-icon {
    /* Reduced rotation to prevent overflow */
    transform: rotate(180deg) scale(1.05);
}

.stat-icon i {
    font-size: 2rem;
    color: var(--white);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient-golden);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.stat-number::after {
    content: '+';
    font-size: 2.5rem;
    margin-left: 5px;
}

.stat-label {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ========================================
   9. FOOTER SECTION
   ======================================== */

.footer {
    background: var(--dark-blue);
    position: relative;
}

/* Main Footer */
.footer-main {
    padding: 80px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-about {
    margin-bottom: 20px;
}

.footer-logo {
    width: 250px;
    height: 50px;
    margin-bottom: 15px;
    object-fit: contain;
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--golden);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--golden-bright);
    transition: var(--transition-base);
    text-decoration: none;
}

.social-link:hover {
    background: var(--gradient-golden);
    color: var(--white);
    transform: translateY(-5px) rotate(360deg);
    box-shadow: var(--shadow-golden);
}

/* Footer Links */
.footer-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-golden);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-base);
    font-size: 0.95rem;
}

.footer-links a i {
    font-size: 0.7rem;
    color: var(--golden-bright);
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: var(--golden-bright);
    padding-left: 10px;
}

.footer-links a:hover i {
    transform: translateX(5px);
}

/* Location Map */
.location-map {
    width: 100%;
    height: 150px;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid rgba(251, 191, 36, 0.3);
}

/* Contact Info */
.contact-info {
    list-style: none;
    padding: 0;
}

.contact-info li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.contact-info i {
    color: var(--golden-bright);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Footer Bottom */
.footer-bottom {
    padding: 25px 0;
}

.copyright-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.copyright-text strong {
    color: var(--golden-bright);
}

.designer-link {
    color: var(--golden-bright);
    text-decoration: none;
    transition: var(--transition-base);
}

.designer-link:hover {
    color: var(--golden);
    text-decoration: underline;
}

/* Back to Top Button */
.back-to-top {
    width: 50px;
    height: 50px;
    background: var(--gradient-golden);
    color: var(--white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-base);
    box-shadow: var(--shadow-golden);
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 32px rgba(251, 191, 36, 0.5);
    color: var(--white);
}


/* ========================================
   10. RESPONSIVE MEDIA QUERIES
   ======================================== */

/* Large Tablets & Small Laptops (992px and below) */
@media (max-width: 992px) {
    :root {
        --section-padding: 70px;
    }

    /* Hero Banner */
    .banner-title {
        font-size: 3rem;
    }

    /* Section Titles */
    .section-title {
        font-size: 2.3rem;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Logo */
    .logo-img {
        max-width: 180px;
        height: 50px;
    }

    /* Mobile Menu */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        padding: 20px;
        margin-top: 15px;
        border-radius: 15px;
        box-shadow: var(--shadow-md);
    }

    .nav-link {
        margin: 5px 0;
        padding: 10px 15px !important;
    }

    .btn-join {
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }

    /* Disable hover transforms on cards */
    .mvv-card:hover {
        transform: translateY(-5px);
    }

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

/* Tablets (768px and below) */
@media (max-width: 768px) {
    :root {
        --section-padding: 50px;
    }

    /* Hero Banner */
    .hero-banner {
        height: 400px;
        margin-top: 70px;
    }

    .banner-title {
        font-size: 2.2rem;
        letter-spacing: 2px;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.8rem;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Benefits */
    .benefits-list {
        gap: 10px;
    }

    .benefit-item {
        padding: 15px;
    }

    .benefit-icon {
        width: 50px;
        height: 50px;
    }

    .benefit-icon i {
        font-size: 1.2rem;
    }

    /* Stat Numbers */
    .stat-number {
        font-size: 2.5rem;
    }

    /* Logo Showcase */
    .logo-showcase {
        padding: 30px;
    }

    .main-logo {
        max-width: 250px;
    }

    /* Logo */
    .logo-img {
        max-width: 160px;
        height: 40px;
    }

    /* Footer */
    .footer-main {
        padding: 50px 0 30px;
    }

    .text-center.text-md-start,
    .text-center.text-md-end {
        text-align: center !important;
    }

    .back-to-top {
        margin-top: 15px;
    }

    /* Points */
    .point-item {
        padding: 15px;
    }

    .point-item i {
        font-size: 1.2rem;
    }

    /* Cards */
    .mvv-card {
        margin-bottom: 20px;
    }

    /* Disable all hover transforms */
    .mvv-card:hover,
    .stat-card:hover,
    .point-item:hover,
    .benefit-item:hover {
        transform: none !important;
    }
}

/* Mobile Devices (576px and below) */
@media (max-width: 576px) {

    /* Banner */
    .banner-title {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

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

    /* Cards */
    .mvv-card {
        padding: 30px 20px;
    }

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

    /* Stats */
    .stat-number {
        font-size: 2rem;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
    }

    .stat-icon i {
        font-size: 1.5rem;
    }

    /* Logo */
    .logo-img {
        max-width: 140px;
        height: 35px;
    }

    /* Hero */
    .hero-banner {
        height: 350px;
    }

    .breadcrumb-custom {
        font-size: 0.85rem;
    }

    .banner-line {
        width: 100px;
        margin: 20px auto;
    }

    /* Typography */
    .lead-text {
        font-size: 1rem;
    }

    .description-text {
        font-size: 0.9rem;
    }

    .benefit-item span {
        font-size: 0.95rem;
    }

    /* Footer */
    .footer-logo {
        width: 200px;
        height: 40px;
    }

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

    /* Navbar */
    .navbar {
        padding: 0.75rem 0;
    }

    .navbar-toggler {
        padding: 6px 8px;
    }

    .navbar-toggler-icon {
        width: 20px;
        height: 20px;
    }
}

/* Extra Small Devices (375px and below) */
@media (max-width: 375px) {
    .banner-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .logo-img {
        max-width: 120px;
        height: 30px;
    }

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

    .stat-number::after {
        font-size: 1.5rem;
    }

    /* Reduce padding on very small screens */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {

    .navbar,
    .scroll-indicator,
    .back-to-top,
    .floating-shapes {
        display: none !important;
    }

    section {
        page-break-inside: avoid;
    }
}