/* ========================================
   HOMEPAGE STYLES - OXYGEN 25 YEARS
   Uses existing design system variables from style.css
======================================== */
/* ========================================
   CRITICAL FIX: PREVENT HORIZONTAL SCROLLBAR
   Add this at the TOP of your home.css file
======================================== */

/* 1. Force body/html to hide horizontal overflow */
html {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* 2. Ensure ALL sections don't overflow horizontally */
section {
    overflow-x: hidden !important;
    max-width: 100%;
}

/* 3. Fix the History section specifically */
.history {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100%;
}

/* 4. Container should never overflow */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    overflow-x: visible; /* Allow content to be visible but not scrollable */
}

/* 5. CRITICAL: Panel container must be contained */
.panel-container-history {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden !important; /* Changed from visible to hidden */
    overflow-y: hidden !important;
    position: relative;
}

/* 6. Individual panels should not overflow */
.panel-history {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100vh;
    flex-shrink: 0;
    overflow: hidden;
}

/* 7. Fix any absolute positioned elements that might overflow */
.history-hero-year-bg,
.timeline-year-bg {
    max-width: 100vw;
    overflow: hidden;
}

/* 8. Ensure grid items don't cause overflow */
.history-timeline-grid {
    max-width: 100%;
    overflow: hidden;
}

/* 9. Fix video slider and hero section */
.hero,
.video-slider,
.video-slide {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 10. About section should not overflow */
.about,
.about-content,
.about-map-static {
    max-width: 100%;
    overflow-x: hidden;
}

/* 11. All other sections */
.divisions,
.awards,
.news,
.blogs {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 12. Fix any text elements that might be too wide */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 13. Ensure box-sizing is consistent */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 14. MOBILE SPECIFIC: Absolutely no horizontal scroll */
@media screen and (max-width: 480px) {
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .panel-container-history {
        display: block !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    section {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        padding: 0 20px;
        width: 100%;
        max-width: 100%;
    }
}

/* 15. Desktop: Keep History scrollable but contained */
@media screen and (min-width: 481px) {
    /* History section gets its own scroll container */
    .history {
        position: relative;
        overflow: hidden; /* Hide the overflow from the page */
    }
    
    /* The scroll happens INSIDE the panel container, not the page */
    .panel-container-history {
        overflow-x: hidden; /* Initially hidden, GSAP will control scroll */
        overflow-y: hidden;
    }
}

/* ========================================
   RESET AND BASE
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}



    
/* ========================================
   HERO SECTION - 25 YEARS WITH THREE.JS
======================================== */




/*Hero Content*/



.hero {

            position: relative;

            min-height: 100vh;

            overflow: hidden;

            display: flex;

            align-items: center;

        }



        /* Video Slider Container */

        .video-slider {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }



        .video-slide {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            opacity: 0;

            pointer-events: none;

        }



        .video-slide.active {

            opacity: 1;

            pointer-events: auto;

        }



        .hero-video {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position: center;

        }



        /* Video Overlay */

        .video-overlay {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            /*background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);*/

            background: 

                linear-gradient(135deg, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 100%),

                linear-gradient(45deg, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%);

            z-index: 1;

        }



        /* Slide Content - Left Side */

        .slide-content {

            position: absolute;

            left: 5%;

            top: 50%;

            transform: translateY(-50%);

            z-index: 2;

            color: var(--color-text-white);

            max-width: 700px;

        }



        

            .slide-title {

            font-family: var(--font-family-primary);

            font-size: clamp(40px, 8vw, 76px);

            font-weight: var(--font-weight-regular);

            line-height: 1;

            margin-bottom: 5px;

            opacity: 0;

            color: white;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

        }

       

        .slide-description {

            font-family: var(--font-family-primary);

            font-weight: var(--font-weight-regular);

            color: white;

            font-size: clamp(16px, 2vw, 18px);

            line-height: 1.6;

            /*opacity: 0.9;*/

            max-width: 600px;

            opacity: 0;

            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);

        }



        /* Bottom Fixed Content */

        .hero-bottom-content {

            position: absolute;

            bottom: var(--spacing-xxl);

            left: 5%;

            right: 5%;

            z-index: 10;

            display: flex;

            justify-content: space-between;

            align-items: flex-end;

        }



        /* Social Icons - Bottom Left */

        .social-icons {

            display: flex;

            gap: var(--spacing-md);

            flex-wrap: wrap;

        }



        .social-icon {

            width: 32px;

            height: 32px;

            border-radius: 50%;

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

            backdrop-filter: blur(10px);

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--color-text-white);

            text-decoration: none;

            /*transition: all 0.3s ease;*/

            /*border: 1px solid rgba(255, 255, 255, 0.3);*/

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

            will-change: opacity, transform;

            

        }



        .social-icon svg {

            width: 20px;

            height: 20px;

        }



        .social-icon:hover {

            background: var(--color-text-white);

            color: var(--color-primary);

            transform: translateY(-3px);

            border-color: var(--color-text-white);

        }



        /* Hero Button - Bottom Right */

        .btn-hero {

            font-family: var(--font-family-primary);

            font-weight: 500;

            background: transparent;

            color: var(--color-text-white);

            border: 2px solid var(--color-text-white);

            padding: 14px 40px;

            border-radius: 50px;

            font-size: 14px;

            cursor: pointer;

            transition: all 0.3s ease;

            letter-spacing: 1px;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            white-space: nowrap;

        }



        .btn-hero:hover {

            background: var(--color-text-white);

            color: #000;

            transform: translateY(-2px);

        }



        .btn-hero svg {

            width: 18px;

            height: 18px;

            transition: transform 0.3s ease;

        }



        .btn-hero:hover svg {

            transform: translateX(5px);

        }



        /* Slider Dots - Bottom Center */

        .slider-dots {

            position: absolute;

            bottom: var(--spacing-xxl);

            left: 50%;

            transform: translateX(-50%);

            z-index: 10;

            display: flex;

            gap: var(--spacing-md);

        }



        .slider-dot {

            width: 12px;

            height: 12px;

            border-radius: 50%;

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

            cursor: pointer;

            transition: all 0.3s ease;

            border: 2px solid transparent;

        }



        .slider-dot.active {

            background: var(--color-text-white);

            border-color: var(--color-text-white);

            transform: scale(1.3);

        }



        /* Tablet Styles */

        @media (max-width: 1024px) {

            .slide-content {

                left: 4%;

                max-width: 650px;

            }



            .slide-title {

                font-size: clamp(50px, 10vw, 90px);

            }



            .slide-description {

                font-size: clamp(15px, 2.5vw, 18px);

                max-width: 500px;

            }



            .hero-bottom-content {

                left: 4%;

                right: 4%;

                bottom: var(--spacing-xl);

            }



            .social-icon {

                width: 44px;

                height: 44px;

            }



            .social-icon svg {

                width: 18px;

                height: 18px;

            }

        }



        /* Mobile Styles */

        @media (max-width: 768px) {

            .hero {

                min-height: 100vh;

            }



            .slide-content {

                left: 5%;

                right: 5%;

                max-width: 90%;

                top: 40%;

            }



            .slide-title {

                font-size: clamp(32px, 12vw, 60px);

                margin-bottom: var(--spacing-md);

            }



            .slide-description {

                font-size: clamp(14px, 3.5vw, 16px);

                max-width: 100%;

            }



            .hero-bottom-content {

                flex-direction: column;

                align-items: flex-start;

                gap: var(--spacing-lg);

                left: 5%;

                right: 5%;

                bottom: var(--spacing-lg);

            }



            .social-icons {

                gap: var(--spacing-sm);

                order: 2;

            }



            .social-icon {

                width: 42px;

                height: 42px;

            }



            .btn-hero {

                order: 1;

                padding: 12px 30px;

                font-size: 13px;

            }



            .slider-dots {

                bottom: 160px;

                gap: var(--spacing-sm);

            }



            .slider-dot {

                width: 10px;

                height: 10px;

            }

        }



        /* Small Mobile Styles */

        @media (max-width: 480px) {



            .hero {

                min-height: 100vh;

            }

            .slide-content {

                top: 50%;

            }



            .slide-title {

                font-size: clamp(28px, 14vw, 48px);

                line-height: 1.15;

            }



            .slide-description {

                font-size: 14px;

                line-height: 1.5;

            }



            .hero-bottom-content {

                bottom: var(--spacing-md);

            }



            .social-icons {

                width: 100%;

                justify-content: center;

            }



            .social-icon {

                width: 40px;

                height: 40px;

            }



            .social-icon svg {

                width: 18px;

                height: 18px;

            }



            .btn-hero {

                width: 100%;

                justify-content: center;

                padding: 12px 14px;

            }



            .slider-dots {

                bottom: 140px;

            }

        }



        /* Landscape Mobile */

        @media (max-width: 768px) and (orientation: landscape) {

            .slide-content {

                top: 30%;

            }



            .slide-title {

                font-size: clamp(24px, 8vw, 40px);

                margin-bottom: var(--spacing-sm);

            }



            .slide-description {

                font-size: 12px;

                line-height: 1.4;

            }



            .hero-bottom-content {

                flex-direction: row;

                bottom: var(--spacing-sm);

            }



            .slider-dots {

                bottom: var(--spacing-sm);

            }

        }


/* ========================================
   ABOUT SECTION - STATIC MAP VERSION
======================================== */
/* About Section Wave Background */
.about {
    position: relative;
    overflow: hidden;
}

.about-waves-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#aboutWavesCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

.about-content {
    position: relative;
    z-index: 1;
}/*
.about {
    padding: var(--spacing-xxl) 0;
    background: var(--color-bg-base);
    position: relative;
    min-height: 100vh; 
}*/
.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(circle at 50% 0%, rgba(220, 0, 50, 0.03) 0%, transparent 70%);
}

.about-content {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Left Side: Text Content */
.about-text {
    z-index: 2;
}

.section-title {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: clamp(48px, 8vw, 86px);
    color: var(--color-primary);
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: var(--spacing-lg);
}

.about-description {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: clamp(16px, 2.5vw, 24px);
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   MOBILE TAP INSTRUCTION (Mobile Only)
======================================== */
.mobile-tap-instruction {
    display: none; /* Hidden on desktop */
    font-family: var(--font-family-primary);
    font-size: 14px;
    color: var(--color-text-caption);
    background: rgba(227, 0, 27, 0.05);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   DISTRICT SELECTOR DROPDOWN
======================================== 
.about-district-selector {
    display: none; 
    margin-bottom: var(--spacing-lg);
}

.selector-label {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 10px;
}

.selector-wrapper {
    position: relative;
    width: 100%;
}

.store-dropdown {
    width: 100%;
    padding: 14px 40px 14px 18px;
    font-family: var(--font-family-primary);
    font-size: 16px;
    color: var(--color-text-primary);
    background: white;
    border: 2px solid rgba(227, 0, 27, 0.3);
    border-radius: 12px;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.store-dropdown:hover {
    border-color: var(--color-primary);
}

.store-dropdown:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(227, 0, 27, 0.1);
}

.dropdown-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.store-dropdown:focus ~ .dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
}
*/
/* ========================================
   STORE SELECTOR - UPDATED STYLING
   ======================================== */
   /* Force store selector to stay inside text column */
.about-text .store-selector {
    margin-top: var(--spacing-lg);
}

.store-selector {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 400px; /* Adjust this value to your preferred width */
}

.select-wrapper {
    position: relative;
    flex: 1;
}

/* Dropdown styling - matches design */
.select-wrapper select {
    width: 100%;
    padding: 18px 45px 18px 20px;
    font-size: 1rem;
    font-family: var(--font-family-primary);
    font-weight: 400;
    color: #666; /* Gray text color */
    border: 1px solid #e0e0e0; /* Light gray border */
    border-radius: 8px;
    background: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Placeholder styling - "Select District" */
.select-wrapper select:invalid,
.select-wrapper select[value=""] {
    color: #999; /* Lighter gray for placeholder */
}

/* When an option is selected */
.select-wrapper select:valid {
    color: #333; /* Darker text when selected */
}

/* Focus state */
.select-wrapper select:focus {
    outline: none;
    border-color: #c0c0c0; /* Slightly darker gray on focus */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Hover state */
.select-wrapper select:hover {
    border-color: #b0b0b0;
}

/* Dropdown arrow */
.dropdown-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: center;
    transition: transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
    color: #999; /* Light gray arrow */
    width: 20px;
    height: 20px;
}

/* When dropdown is focused/open */
.select-wrapper select:focus ~ .dropdown-arrow,
.select-wrapper.open .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: #666;
}

/* Submit button styling - matches design */
.store-selector button,
.store-selector .submit-btn {
    padding: 16px 28px;
    background: var(--color-primary, #e31e24);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-weight-medium);                                  
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(227, 30, 36, 0.2);
}

.store-selector button:hover,
.store-selector .submit-btn:hover {
    background: #c11a1f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.3);
}

.store-selector button:active,
.store-selector .submit-btn:active {
    transform: translateY(0);
}

/* ========================================
   RESPONSIVE DESIGN - STORE SELECTOR
   ======================================== 

@media (max-width: 768px) {
    .store-selector {
        flex-direction: column;
        gap: 12px;
    }

    .select-wrapper select {
        padding: 16px 40px 16px 18px;
    }

    .store-selector button,
    .store-selector .submit-btn {
        width: 100%;
        padding: 16px 40px;
    }
}*/


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

@media (max-width: 768px) {
    .store-selector {
        flex-direction: column;
        gap: 15px; /* Increased gap for better touch targets */
        width: 100%;
        max-width: 100%; /* Allow it to fill the container */
        align-items: center; /* This centers the button relative to the dropdown */
    }

    .select-wrapper {
        width: 100%; /* Make wrapper full width */
        flex: none;
    }

    .select-wrapper select {
        width: 100%; /* Ensure select fills the wrapper */
        padding: 14px 18px;
        font-size: 16px; /* 16px prevents iOS zoom on focus */
        text-align: left;
    }

    .store-selector .submit-btn {
        width: auto;         /* Remove full width */
        min-width: 140px;    /* Gives it a solid base size */
        max-width: 80%;      /* Ensures it stays smaller than the dropdown */
        padding: 12px 30px;  /* Slightly tighter padding */
        font-size: 15px;
        margin: 0 auto;      /* Centers the button */
        border-radius: 25px;
    }

    /* Adjust arrow position for mobile */
    .dropdown-arrow {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .store-selector {
        align-items: center; /* Keeps button centered and narrow */
        gap: 12px;
    }

    .select-wrapper select {
        padding: 12px 36px 12px 16px; /* Slightly tighter padding for small screens */
        font-size: 16px; /* Keeps font readable to prevent auto-zoom */
    }

    .store-selector .submit-btn {
        width: auto;
        min-width: 120px; /* Slightly smaller minimum for tiny screens */
        max-width: 70%;    /* Ensures it is clearly smaller than the bar */
        padding: 10px 20px;
        font-size: 14px;
    }
}
/* ========================================
   ABOUT MAP SECTION - FIXED FOR ALL DEVICES
======================================== */
.about-map-static {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Wrapper to maintain aspect ratio */
.reach-map {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

.map-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%; /* Aspect ratio for Kerala map */
}

.kerala-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kerala-map-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Waves Background for About Section */
.about-waves-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.about-waves-background canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.3;
    pointer-events: auto;
}

.about .container {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* ========================================
   LOCATION PINS - RESPONSIVE POSITIONING
======================================== */

.pin-container {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
    transform: translate(-50%, -100%);
    pointer-events: auto;
}

.pin-container:hover {
    transform: translate(-50%, -100%) scale(1.2);
    z-index: 1000; /* Bring hovered pin above all others */
}

.pin-icon {
    width: 30px;
    height: 35px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    display: block;
}

/* ========================================
   DISTRICT PIN POSITIONS
======================================== */

/* District Pin Positions */
.pin-thiruvananthapuram { top: 87.86%; left: 68.39%; }
.pin-kollam { top: 80%; left: 64.71%; }
.pin-pathanamthitta { top: 73.29%; left: 68.28%; }
.pin-alappuzha { top: 71%; left: 54.06%; }
.pin-kottayam { top: 64.29%; left: 58.53%; }
.pin-idukki { top: 60.29%; left: 68.45%; }
.pin-ernakulam { top: 56.29%; left: 56.36%; }
.pin-thrissur { top: 48.14%; left: 53.35%; }
.pin-palakkad { top: 39%; left: 56%; }
.pin-malappuram { top: 34%; left: 48%; }

/* ========================================
   PIN TOOLTIP
======================================== */

.pin-container::after {
    content: attr(data-location);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(227, 0, 27, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 5px;
    z-index: 1; /* Tooltip stays relative to its pin */
}

.pin-container:hover::after {
    opacity: 1;
}

/* ========================================
   RESPONSIVE - TABLET
======================================== */
@media screen and (max-width: 1023px) {
    .about-content {
        gap: var(--spacing-xl);
    }

    /* Show dropdown on tablet */
    .about-district-selector {
        display: block;
    }

    .selector-wrapper {
        max-width: 400px;
    }

    .store-dropdown {
        padding: 14px 40px 14px 18px;
        font-size: 16px;
    }

    .about-map-static {
        padding: 15px;
    }
    
    .reach-map {
        max-width: 500px;
    }
    
    .pin-icon {
        width: 26px;
        height: 31px;
    }
    
    .pin-container::after {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* Mobile Large (768px) */
@media screen and (max-width: 768px) {
    .about-map-static {
        padding: 10px;
    }
    
    .reach-map {
        max-width: 400px;
    }
    
    .pin-icon {
        width: 24px;
        height: 28px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   Order: TEXT → DROPDOWN → MAP
======================================== */
@media screen and (max-width: 767px) {
    .about {
        padding: var(--spacing-xxl) 0;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        display: flex;
        flex-direction: column;
    }

    /* ORDER 1: Text content appears first */
    .about-text {
        order: 1;
        width: 100%;
    }

    /* Show mobile instruction */
    .mobile-tap-instruction {
        display: block;
    }

    /* ORDER 2: Dropdown appears second (inside about-text) */
    .about-district-selector {
        display: block !important;
        order: 2;
        margin-bottom: var(--spacing-lg);
    }

    .selector-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .selector-label {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .store-dropdown {
        width: 100%;
        padding: 14px 40px 14px 18px;
        font-size: 16px;
        border-radius: 12px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .dropdown-icon {
        right: 14px;
    }

    /* ORDER 3: Static Map appears last */
    .about-map-static {
        order: 3;
        width: 100%;
    }

    .kerala-map-image {
        border-radius: 16px;
    }

    .section-title {
        font-size: clamp(36px, 10vw, 60px);
        margin-bottom: var(--spacing-md);
    }

    .about-description {
        font-size: 16px;
        margin-bottom: var(--spacing-md);
    }
    
    /* Ensure pins don't interfere with dropdown on mobile */
    .pin-container {
        pointer-events: auto;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE
======================================== */
@media screen and (max-width: 480px) {
    .about-description {
        font-size: 15px;
    }

    .mobile-tap-instruction {
        font-size: 13px;
        padding: 10px 14px;
    }

    .selector-wrapper {
        width: 100%;
    }

    .selector-label {
        font-size: 12px;
    }

    .store-dropdown {
        padding: 12px 36px 12px 16px;
        font-size: 15px;
        border-radius: 10px;
    }

    .dropdown-icon {
        right: 12px;
        width: 20px;
        height: 20px;
    }

    .about-map-static {
        padding: 5px;
    }
    
    .reach-map {
        max-width: 350px;
    }
    
    .pin-icon {
        width: 22px;
        height: 26px;
    }
    
    .pin-container::after {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Mobile Small (below 390px) */
@media screen and (max-width: 390px) {
    .reach-map {
        max-width: 300px;
    }
    
    .pin-icon {
        width: 20px;
        height: 24px;
    }
}

/* ========================================
   LANDSCAPE MOBILE OPTIMIZATION
======================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .mobile-tap-instruction {
        padding: 8px 12px;
        font-size: 12px;
    }
}

.store-selector .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #999;
}

/* ========================================
   HISTORY SECTION - CONSOLIDATED & FINAL
   Remove BOTH old History sections and replace with this
======================================== */

/* ========================================
   BASE SETUP - DESKTOP HORIZONTAL SCROLL
======================================== */
.history {
    padding: 0;
    background: transparent;
    position: relative;
}

.history::before {
    display: none;
}

.history .container {
    display: none;
}

/* Panel Container for Horizontal Scroll */
.panel-container-history {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
}

.panel-history {
    width: 100%;
    height: 100vh;
    flex-shrink: 0;
}

/* ========================================
   HISTORY HERO PANEL (1999)
======================================== */
.history-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
}

.history-hero-year-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    font-weight: 900;
    background: linear-gradient(to right, rgba(217, 217, 217, 1) 0%, rgba(230, 226, 226, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

.history-hero-content {
    position: relative;
    font-family: var(--font-family-primary);
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
    z-index: 2;
}

.history-hero-title {
    position: absolute;
    top: 80px;
    left: 80px;
    font-size: 80px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.1;
    letter-spacing: -2px;
    z-index: 3;
}

.history-timeline-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 80px;
}

.history-grid-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-timeline-item-1 {
    grid-column: 6 / 7;
    grid-row: 1 / 2;
}

.history-content-block {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: center;
}

.history-timeline-item-2 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    position: relative;
    top: -30px;
    left: -20px;
}

.timeline-item-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

/* History Images */
.history-item-image-1 {
    width: 232px;
    height: 284px;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, 
                rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, 
                rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    display: block;
}

.history-item-image-2 {
    width: 210px;
    height: 224px;
    object-fit: cover;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: block;
}

.item-image-3 {
    width: 184px;
    height: 214px;
    object-fit: cover;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    display: block;
}

.item-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    text-align: left;
    /* CRITICAL: Prevent text blur during GPU transforms */
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: geometricPrecision !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    transform-style: flat !important;
}

/* ========================================
   TIMELINE SECTIONS (2005, 2010, etc.)
======================================== */
.timeline-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
}

.timeline-year-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    font-weight: 900;
    background: linear-gradient(to right, rgba(217, 217, 217, 1) 0%, rgba(230, 226, 226, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

.timeline-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 80px 120px;
    z-index: 2;
}

.timeline-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    align-items: start;
}

/* Timeline Line */
.timeline-line {
    position: absolute;
    left: 100px;
    right: 100px;
    top: calc(50% - 100px);
    transform: translateY(-50%);
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

.timeline-progress-line {
    box-shadow: 0 0 10px rgba(220, 0, 50, 0.5);
}

/* Timeline Content Elements */
.timeline-date {
    position: absolute;
    left: 80px;
    top: calc(50% + 20px);
    margin: 0;
    z-index: 3;
}

.timeline-date h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 36px;
    margin-bottom: 12px;
    margin-top: 0;
    letter-spacing: 0.1px;
    opacity: 1 !important;
    transform: none !important;
}

.timeline-date p {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-primary);
    max-width: 240px;
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
}

.timeline-center-image {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}

.center-image-container {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;
    pointer-events: auto;
    margin: 0;
}

.center-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.center-image-label {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 32px;
    border-radius: 50px;
    text-align: center;
    min-width: 280px;
    white-space: nowrap;
}

.center-image-label p {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.4;
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
}

.center-image-label span {
    font-size: 14px;
    color: var(--color-text-light);
    opacity: 1 !important;
    transform: none !important;
}

/* Timeline Cards */
.timeline-card-top {
    grid-column: 2 / 6;
    grid-row: 1 / 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.timeline-card-bottom {
    grid-column: 9 / 13;
    grid-row: 3 / 4;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: center;
}

.card-content {
    flex: 1;
    max-width: 180px;
}

.card-image-top,
.card-image-bottom {
    width: 120px;
    height: 160px;
    border-bottom-right-radius: 3vw;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.card-image-top img,
.card-image-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-primary);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.card-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 12px;
    opacity: 1 !important;
    transform: none !important;
}

.card-content p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   RESPONSIVE - TABLET (1024px and below)
======================================== */
@media screen and (max-width: 1024px) {
    .history-hero {
        min-height: 100vh;
        height: auto;
    }

    .history-hero-year-bg {
        font-size: 26vw;
    }

    .history-hero-content {
        padding: 30px;
    }

    .history-hero-title {
        font-size: 56px;
        left: 40px;
        top: 250px;
    }

    .history-timeline-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: 15px;
        padding: 280px 40px 120px;
    }

    .history-timeline-item-1 {
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }

    .history-item-image-1 {
        width: 180px;
        height: 220px;
    }

    .history-content-block {
        grid-column: 2 / 6;
        grid-row: 3 / 4;
        padding: 0 20px;
    }

    .item-description {
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .timeline-item-3 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .item-image-3 {
        width: 140px;
        height: 180px;
    }

    .history-timeline-item-2 {
        grid-column: 6 / 7;
        grid-row: 4 / 5;
        top: -20px;
        left: -15px;
    }

    .history-item-image-2 {
        width: 160px;
        height: 210px;
    }

    .timeline-section {
        min-height: 650px;
    }

    .timeline-year-bg {
        font-size: 26vw;
    }

    .timeline-content {
        padding: 60px 50px 100px;
    }

    .timeline-line,
    .timeline-progress-line {
        left: 70px !important;
        right: 70px !important;
    }

    .timeline-date {
        left: 50px;
    }

    .timeline-date h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .timeline-date p {
        font-size: 13px;
        line-height: 20px;
        max-width: 180px;
    }

    .center-image-container {
        width: 190px;
        height: 190px;
    }

    .center-image-label {
        bottom: -65px;
        min-width: 200px;
        padding: 10px 20px;
    }

    .center-image-label p {
        font-size: 13px;
    }

    .center-image-label span {
        font-size: 11px;
    }

    .card-content {
        max-width: 140px;
    }

    .card-image-top,
    .card-image-bottom {
        width: 95px;
        height: 125px;
        border-bottom-right-radius: 4vw;
    }

    .card-dot {
        width: 13px;
        height: 13px;
        margin-bottom: 6px;
    }

    .card-content h3 {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .card-content p {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (480px and below)
======================================== */
@media screen and (max-width: 480px) {
    /* CRITICAL: Disable horizontal scroll on mobile */
    .panel-container-history {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .panel-history {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
    }

    .panel-history + .panel-history {
        margin-top: 60px !important;
        padding-top: 20px !important;
    }

    /* History Hero */
    .history-hero {
        min-height: 100vh;
        height: 100vh;
        padding: 20px 15px 70px;
        display: flex;
        flex-direction: column;
    }

    .history-hero-year-bg {
        font-size: 32vw;
    }

    .history-hero-content {
        padding: 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .history-hero-title {
        position: relative;
        font-size: 34px;
        left: 0;
        top: 0;
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .history-timeline-grid {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
        align-items: center;
        flex: 1;
    }

    .history-timeline-item-1 {
        order: 1;
        width: 100%;
        max-width: 250px;
    }

    .history-item-image-1 {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }

    .history-content-block {
        order: 2;
        width: 100%;
        padding: 0 5px;
    }

    .item-description {
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
    }

    .timeline-item-3 {
        order: 3;
        width: 100%;
        max-width: 140px;
        align-self: flex-start;
        margin-left: 10px;
    }

    .item-image-3 {
        width: 100%;
        height: auto;
        aspect-ratio: 3/4;
    }

    .history-timeline-item-2 {
        order: 4;
        width: 100%;
        max-width: 180px;
        align-self: flex-end;
        position: relative;
        top: 0;
        left: 0;
        margin-top: -90px;
        margin-right: 10px;
    }

    .history-item-image-2 {
        width: 100%;
        height: auto;
        aspect-ratio: 4/5;
    }

    /* Timeline Sections */
    .timeline-section {
        min-height: 100vh;
        height: auto;
        padding-bottom: 100px;
    }

    .timeline-year-bg {
        font-size: 32vw;
        top: 60%;
    }

    .timeline-content {
        padding: 30px 20px 80px;
    }

    .timeline-layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .timeline-line, 
    .timeline-progress-line {
        left: 20px !important;
        right: 20px !important;
        top: 48% !important;
        transform: translateY(-50%) !important;
        height: 2px !important;
    }

    .timeline-progress-line {
        height: 3px !important;
        z-index: 2 !important;
    }

    .timeline-section .timeline-date {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 0 10px 0;
        text-align: left;
        width: 100%;
        order: 1;
    }

    .timeline-date h2 {
        font-size: 30px;
        margin-bottom: 8px;
    }

    .timeline-date p {
        font-size: 14px;
        line-height: 22px;
        max-width: 100%;
    }

    .timeline-card-top {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        width: 100%;
        order: 2;
        text-align: left;
    }

    .timeline-card-top .card-dot {
        width: 14px;
        height: 14px;
        margin: 5px 0 0 0;
        align-self: flex-start;
    }

    .timeline-card-top .card-image-top {
        width: 80px;
        height: 100px;
        border-bottom-right-radius: 15px;
        order: 1;
    }

    .timeline-card-top .card-content {
        max-width: none;
        flex: 1;
        order: 2;
    }

    .timeline-card-top .card-content h3 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .timeline-card-top .card-content p {
        font-size: 12px;
    }

    .timeline-section .timeline-center-image {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 20px 0;
        order: 3;
    }

    .center-image-container {
        width: 260px;
        height: 260px;
    }

    .center-image-label {
        bottom: -55px;
        padding: 8px 20px;
        min-width: 220px;
    }

    .center-image-label p {
        font-size: 13px;
    }

    .center-image-label span {
        font-size: 11px;
    }

    .timeline-card-bottom {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        width: 100%;
        order: 4;
        text-align: left;
        margin-top: 25px;
    }

    .timeline-card-bottom .card-dot {
        width: 14px;
        height: 14px;
        margin: 5px 0 0 0;
        align-self: flex-start;
        order: 3;
    }

    .timeline-card-bottom .card-image-bottom {
        width: 80px;
        height: 100px;
        border-bottom-right-radius: 15px;
        order: 1;
    }

    .timeline-card-bottom .card-content {
        max-width: none;
        flex: 1;
        order: 2;
    }

    .timeline-card-bottom .card-content h3 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .timeline-card-bottom .card-content p {
        font-size: 12px;
    }

    /* Force visibility on mobile */
    .timeline-date h2,
    .timeline-date p,
    .center-image-label p,
    .center-image-label span,
    .timeline-card-top h3,
    .timeline-card-top p,
    .timeline-card-bottom h3,
    .timeline-card-bottom p {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================
   DIVISIONS SECTION
======================================== */
.divisions {
    padding: var(--spacing-xxl) 0;
    background: var(--color-primary);
    position: relative;
}

.section-title-white {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: clamp(48px, 8vw, 86px);
    color: var(--color-text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: var(--spacing-xxl);
    text-align: right;
}

.divisions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.division-card {
    background: transparent;
    border-radius: 25px;
    overflow: hidden;
    /*transition: transform 0.3s ease;*/
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    position: relative;
}

.division-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Division Media Container */
.division-media {
    position: relative;
    width: 100%;
    height: 364px;
    overflow: hidden;
    border-radius: 25px;
}

/* Division Image - Default State */
.division-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
    will-change: opacity;
    opacity: 1;
    z-index: 1;
}

/* Division Video - Hidden by Default */
.division-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity;
    z-index: 1;
}

/* Show video and hide image on hover */
.division-card:hover .division-video {
    opacity: 1;
    z-index: 2;
}

.division-card:hover .division-image {
    opacity: 0;
}

/* SIMPLE GRADIENT MASK OVERLAY - For Image State (Default) */
.division-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    
    /* 👇 Simple gradient mask - visible by default for image */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    
    /* Position content nicely inside the gradient */
    padding: 60px var(--spacing-lg) var(--spacing-md);
    
    display: flex;
    align-items: flex-end;
    transition: background-color 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity, background-color;
    z-index: 3;
    pointer-events: none;
    transform: translateY(0);
}

/* When video plays on hover - restore original full dark overlay */
.division-card:hover .division-overlay {
    background: rgba(0, 0, 0, 0.5); /* Original full dark overlay for video */
    padding: var(--spacing-lg); /* Original padding */
    top: 0; /* Make it full height */
    height: 100%; /* Cover entire card */
}

/* Re-enable pointer events for interactive content */
.division-content {
    width: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 4;
}

.division-title {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-text-white);
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.division-subtitle {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    color: var(--color-text-white);
    margin-bottom: var(--spacing-sm);
    opacity: 0.9;
}

/* Division Button */
.btn-division {
    font-family: var(--font-family-primary);
    font-weight: 500;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 13px;
    cursor: pointer;
    /*transition: all 0.3s ease;*/
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-division:hover {
    background: #b8002a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    text-decoration: none !important;
}










/* Divisions Section - Large Desktop (for very wide screens) */
@media screen and (min-width: 1440px) {
    .divisions-grid {
        gap: var(--spacing-lg); /* Increase gap on larger screens */
    }

    .division-media {
        height: 420px; /* Slightly taller on large screens */
    }
}

/* Divisions Section - Tablet */
@media screen and (max-width: 1023px) {
    .divisions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .division-media {
        height: 400px;
    }

    .division-title {
        font-size: 24px;
    }

    .division-subtitle {
        font-size: 14px;
    }

    .btn-division {
        padding: 12px 28px;
        font-size: 14px;
    }
}

/* Divisions Section - Mobile */
@media screen and (max-width: 767px) {
    .divisions {
        padding: var(--spacing-xl) 0;
    }

    .section-title-white {
        font-size: clamp(36px, 10vw, 60px);
        margin-bottom: var(--spacing-lg);
        text-align: center; /* Center on mobile */
    }

    .divisions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .division-media {
        height: 350px;
    }

    .division-overlay {
        padding: var(--spacing-lg);
    }

    .division-title {
        font-size: 22px;
    }

    .division-subtitle {
        font-size: 13px;
    }

    .btn-division {
        padding: 10px 24px;
        font-size: 13px;
    }
}

/* Divisions Section - Small Mobile */
@media screen and (max-width: 480px) {
    .division-media {
        height: 480px;
        border-radius: 16px;
    }

    .division-title {
        font-size: 20px;
    }

    .btn-division {
        padding: 10px 20px;
        font-size: 12px;
    }
}

/* ========================================
   AWARDS SECTION
======================================== */
.awards {
    padding: var(--spacing-xxl) 0;
    background: var(--color-bg-base);
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* === BACKGROUND "BEST" EFFECT === */
.best-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    z-index: 0;
}

.best-wrap h1 {
    font-family: var(--font-family-primary);
    font-weight: 800;
    font-size: 30vw;
    color: #EFEFEF;
    line-height: 1;
    position: relative;
    top: 55%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
}

.best-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38%;
    background: #EFEFEF;
    z-index: 0;
}

/* === CONTENT ABOVE BACKGROUND === */
.awards .container {
    position: relative;
    z-index: 2;
}

.awards .section-title {
    text-align: left;
    margin-bottom: var(--spacing-xxl);
    line-height: 1;
    position: relative;
    z-index: 2;
}

/* === AWARDS GRID - ALL DEVICES (AUTO-SCROLL ENABLED) === */
.awards-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Enable scroll for GSAP animation */
    overflow-y: hidden;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
    position: relative;
    z-index: 2;
    scroll-behavior: auto; /* Let GSAP control scrolling */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.awards-grid:active {
    cursor: grabbing;
}

/* Hide scrollbar Chrome/Safari/Opera */
.awards-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Award Card - Desktop */
.award-card {
    flex: 0 0 calc(25% - var(--spacing-xl) * 0.75);
    min-width: calc(25% - var(--spacing-xl) * 0.75);
    background: transparent;
    padding: var(--spacing-lg);
    text-align: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
    position: relative;
}

.award-card:hover {
    transform: translateY(-10px);
}

/* Award Image/Icon */
.award-icon {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.award-icon img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
}

.award-card:hover .award-icon img {
    transform: scale(1.1) translateY(-5px);
}

/* Award Title */
.award-title {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

/* Award Description */
.award-desc {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 15px;
    color: var(--color-text-caption);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

/* Award Year */
.award-year {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text-primary);
    margin: 0;
}

/* View More Button */
.btn-primary {
    font-family: var(--font-family-primary);
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(227, 0, 27, 0.3);
    position: relative;
    z-index: 2;
}

.btn-primary svg {
    width: 16px;
    height: 16px;
}

.btn-primary:hover {
    background: #b8002a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(227, 0, 27, 0.4);
}

.btn-primary:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary:active {
    transform: scale(0.98);
}

/* ========================================
   RESPONSIVE - LARGE DESKTOP
======================================== */
@media screen and (min-width: 1200px) {
    .best-wrap h1 {
        font-size: 28vw;
    }

    .awards-grid {
        gap: var(--spacing-xxl);
    }
    
    .award-card {
        flex: 0 0 calc(25% - var(--spacing-xxl) * 0.75);
        min-width: calc(25% - var(--spacing-xxl) * 0.75);
    }
}

/* ========================================
   RESPONSIVE - TABLET
======================================== */
@media screen and (max-width: 1023px) {
    .best-wrap h1 {   
        font-size: 30vw;    
        line-height: 1; 
        top: 53%;   
    }

    .best-wrap::after {
        height: 40%;
    }

    .awards-grid {
        gap: var(--spacing-lg);
        padding-bottom: 20px;
        margin-bottom: var(--spacing-xl);
        padding-left: calc((100vw - 300px) / 2);
        padding-right: calc((100vw - 300px) / 2);
    }

    .award-card {
        flex: 0 0 300px;
        min-width: 300px;
    }

    .award-icon {
        height: 180px;
    }

    .award-icon img {
        width: 160px;
        height: 160px;
    }

    .award-title {              
        font-size: 18px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
======================================== */
@media screen and (max-width: 810px) {
    .awards {
        padding: var(--spacing-xl) 0;
    }
    
    .best-wrap h1 {   
        font-size: 25vw;    
        line-height: 1; 
        top: 50.5%;   
    }

    .best-wrap::after {
        height: 38%;
    }

    .awards .section-title {
        text-align: left;
        font-size: clamp(36px, 10vw, 60px);
        margin-bottom: var(--spacing-lg);
    }

    .awards-grid {
        gap: var(--spacing-md);
        padding-bottom: 20px;
        margin-bottom: var(--spacing-lg);
        padding-left: calc((100vw - 280px) / 2);
        padding-right: calc((100vw - 280px) / 2);
    }

    .award-card {
        flex: 0 0 280px;
        min-width: 280px;
        padding: var(--spacing-md);
    }

    .award-icon {
        height: 150px;
        margin-bottom: var(--spacing-md);
    }

    .award-icon img {
        width: 130px;
        height: 130px;
    }

    .award-title {
        font-size: 16px;
    }

    .award-desc {
        font-size: 13px;
    }

    .award-year {
        font-size: 16px;
    }

    .btn-primary {
        padding: 12px 32px;
        font-size: 13px;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE
======================================== */
@media screen and (max-width: 480px) {
    .best-wrap h1 {   
        font-size: 30vw;    
        line-height: 1; 
        top: 58%;   
    }

    .best-wrap::after {
        height: 39%;
    }

    .awards-grid {
        gap: var(--spacing-md);
        padding-bottom: 20px;
        padding-left: calc((100vw - 260px) / 2);
        padding-right: calc((100vw - 260px) / 2);
    }

    .award-card {
        flex: 0 0 260px;
        min-width: 260px;
        padding: var(--spacing-lg);
    }

    .award-icon {
        height: 180px;
    }

    .award-icon img {
        width: 160px;
        height: 160px;
    }

    .award-title {
        font-size: 18px;
    }

    .award-desc {
        font-size: 14px;
    }

    .btn-primary {
        padding: 10px 28px;
        width: auto;
        max-width: 250px;
    }
}

/* ========================================
   NEWS & EVENTS SECTION
======================================== */
.news {
    padding: var(--spacing-xxl) 0;
    background: var(--color-primary);
    position: relative;
}

.news .container {
    position: relative;
}

.news .section-title-white {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
}

.news-card {
    background: transparent;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 450px;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* News Image */
.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
}

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

/* News Content Overlay */
.news-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    z-index: 2;
    text-align: left;
    transition: top 0.4s ease, transform 0.4s ease, bottom 0.4s ease;
    will-change: top, transform, bottom;
}

/* Gradient Background - Separate pseudo-element */
.news-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    z-index: -1;
    opacity: 1;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

/* Hide gradient on hover */
.news-card:hover .news-content::before {
    opacity: 0;
}
/* Arrow Icon - Bottom Right (Normal State) */
.news-card::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
    z-index: 3;
}

/* Hover State - Full Overlay */
.news-card:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

/* Arrow Icon - White Background and Border on Hover */
.news-card:hover::after {
    background-color: rgba(255, 255, 255, 0.2); /* Only change background-color, not background */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Keep the arrow SVG */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    border: 2px solid white;
    width: 40px;
    height: 40px;
}

/* Hover State - Content Visible */
.news-card:hover .news-content {
    /*background: transparent;*/
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    text-align: left;
}

/* Remove default link styles */
.news-card a {
    text-decoration: none;
    color: inherit;
}

/* Text link area - clickable */
.news-link {
    display: block;
    cursor: pointer;
}

/* Arrow link - positioned over the ::after pseudo-element */
.news-arrow-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    z-index: 4; /* Above the ::after pseudo-element */
    cursor: pointer;
}

.news-card:hover .news-arrow-link {
    width: 40px;
    height: 40px;
}

/* Remove cursor pointer from the card itself */
.news-card {
    cursor: default; /* Change from pointer to default */
}

/* Arrow Icon - White and Smaller on Hover 
.news-card:hover::after {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    width: 40px;
    height: 40px;
    background-size: 20px 20px;
}*/

/* News Date */
.news-date {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    color: var(--color-text-white);
    display: block;
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
}

.news-card:hover .news-date {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* News Title */
.news-title {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-text-white);
    line-height: 1.4;
    margin: 0;
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.news-card:hover .news-title {
    font-size: 28px;
    transition-delay: 0.15s;
}

/* View All Button - Bottom Left 
.btn-secondary {
    font-family: var(--font-family-primary);
    font-weight: 500;
    background: transparent;
    color: var(--color-text-white);
    border: 2px solid var(--color-text-white);
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.btn-secondary svg {
    width: 16px;
    height: 16px;
}

.btn-secondary:hover {
    background: var(--color-text-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn-secondary:focus {
    outline: 2px solid var(--color-text-white);
    outline-offset: 2px;
}

.btn-secondary:active {
    transform: scale(0.98);
}
*/
/* News Section - Tablet */
@media screen and (max-width: 1023px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .news-card {
        height: 400px;
    }

    .news-title {
        font-size: 18px;
    }

    .news-card:hover .news-title {
        font-size: 22px;
    }
}

/* News Section - Mobile */
@media screen and (max-width: 767px) {
    .news {
        padding: var(--spacing-xl) 0;
    }

    .news .section-title-white {
        text-align: center;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .news-card {
        height: 350px;
    }

    .news-title {
        font-size: 16px;
    }

    .news-card:hover .news-title {
        font-size: 20px;
    }

    .news-card::after {
        width: 40px;
        height: 40px;
        background-size: 20px 20px;
    }

    .news-card:hover::after {
        width: 36px;
        height: 36px;
        background-size: 18px 18px;
    }

    .btn-secondary {
        padding: 12px 32px;
        font-size: 13px;
        width: auto;
    }
}

/* News Section - Small Mobile */
@media screen and (max-width: 480px) {
    .news-card {
        height: 320px;
        border-radius: 16px;
    }

    .news-date {
        font-size: 12px;
    }

    .news-title {
        font-size: 15px;
    }

    .news-card:hover .news-title {
        font-size: 18px;
    }

    .btn-secondary {
        padding: 10px 24px;
        font-size: 13px;
    }

    .news-card::after {
        bottom: 16px;
        right: 16px;
    }
}
/* ========================================
   BLOGS SECTION
======================================== */
.blogs {
    padding: var(--spacing-xxl) 0;
    background: #ffffff !important;
    position: relative;
}

.blogs * {
    background-color: transparent;
}

.blogs .container {
    background: #ffffff !important;
}

.blogs .section-title {
    text-align: left;
    margin-bottom: var(--spacing-xl);
    background: transparent !important;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin: var(--spacing-xxl) 0;
    background: transparent !important;
}

.blog-card {
    background: transparent !important;
    transition: transform 0.3s ease;
}

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

/* Image wrapper with overlay */
.blog-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 450px;
    background: #ffffff;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

.blog-card:hover .blog-image-wrapper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.blog-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    background: #f5f5f5;
}

/* Dark overlay on hover */
.blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.blog-card:hover .blog-overlay {
    opacity: 1;
    pointer-events: auto;
}

.blog-card:hover .blog-image-wrapper img {
    transform: scale(1.05);
}

/* Read More Button */
.btn-read-more {
    font-family: var(--font-family-primary);
    font-weight: 500;
    background: transparent;
    color: var(--color-text-white);
    border: 2px solid var(--color-text-white);
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px);
}

.blog-card:hover .btn-read-more {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.btn-read-more:hover {
    background: var(--color-text-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn-read-more svg {
    width: 16px;
    height: 16px;
}

/* Blog content - text below image */
.blog-content {
    padding: var(--spacing-lg) 0;
    background: transparent !important;
}

.blog-content p {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-caption);
    background: transparent !important;
}

/* Navigation Circles */
.blog-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    background: transparent !important;
}

.nav-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: #ffffff !important;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.nav-circle svg {
    width: 24px;
    height: 24px;
}

.nav-circle:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-white);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(227, 0, 27, 0.2);
}

.nav-circle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.nav-circle:disabled:hover {
    background: #ffffff !important;
    color: var(--color-primary);
    box-shadow: none;
}

/* Blogs Section - Tablet */
@media screen and (max-width: 1023px) {
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .blog-image-wrapper {
        height: 400px;
    }
}

/* Blogs Section - Mobile */
@media screen and (max-width: 767px) {
    .blogs {
        padding: var(--spacing-xl) 0;
    }

    .blogs .section-title {
        text-align: center;
    }

    .blogs-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }

    .blog-image-wrapper {
        height: 350px;
    }

    .blog-content p {
        font-size: 14px;
    }

    .blog-nav {
        justify-content: center;
    }

    .nav-circle {
        width: 48px;
        height: 48px;
    }
}

/* Blogs Section - Small Mobile */
@media screen and (max-width: 480px) {
    .blog-image-wrapper {
        height: 320px;
        border-radius: 16px;
    }

    .blog-content p {
        font-size: 13px;
    }

    .btn-read-more {
        padding: 12px 28px;
        font-size: 13px;
    }

    .nav-circle {
        width: 44px;
        height: 44px;
    }
}

/* ========================================
   FOOTER
======================================== */
.footer {
    background: #ffffff;
    color: var(--color-text-white);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.footer p {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    opacity: 0.8;
}

/* Footer - Mobile */
@media screen and (max-width: 767px) {
    .footer {
        padding: var(--spacing-lg) 0;
    }

    .footer p {
        font-size: 12px;
    }
}

/* ========================================
   UTILITY CLASSES
======================================== */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* ========================================
   ACCESSIBILITY
======================================== 
button:focus,
.nav-arrow:focus,
.nav-circle:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.timeline-item:focus-within,
.division-card:focus-within,
.award-card:focus-within,
.news-card:focus-within,
.blog-card:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 12px;
}
*/
/* Reduced motion for accessibility 
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}
*/
/* High contrast mode support 
@media (prefers-contrast: high) {
    .division-card,
    .news-card,
    .blog-card,
    .award-card {
        border: 2px solid var(--color-text-primary);
    }
}
*/
/* ========================================
   PRINT STYLES
======================================== 
    .nav-arrow,
    .nav-circle,
    .btn-primary,
    .btn-secondary,
    .social-icons {
        display: none;
    }
    
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }
    
    .section-title,
    .section-title-white {
        color: #ffffff;
    }
}*/


/* Waves Background for About Section */
/* Waves Background for About Section */
.about {
    position: relative;
    overflow: hidden;
}

.about-waves-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    
    pointer-events: none; /* Allow clicks to pass through */
}

.about-waves-background canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* pure white */
    opacity: 0.3;
    pointer-events: auto; /* But enable mouse events on canvas */
}

/* Ensure content is above waves */
.about .container {
    position: relative;
    z-index: 1;
    pointer-events: auto; /* Ensure content is clickable */
}





/* Fix for SplitText line animation clipping */
.section-title,
.section-title-white,
h1, h2, h3, h4 {
    overflow: visible !important; /* Allow descenders to show */
    padding-bottom: 0.15em; /* Space for descenders */
    margin-bottom: -0.15em; /* Compensate for added padding */
}

/* Ensure split lines don't get clipped */
.split-line {
    overflow: visible !important;
    display: block;
    line-height: inherit !important;
    padding-bottom: 0.1em; /* Extra space for descenders */
}

/* Ensure parent containers don't clip */
.history,
.blogs,
.awards,
section {
    overflow: visible !important;
}

/* Specific fix for your section titles */
.history .section-title,
.blogs .section-title,
.awards .section-title {
    overflow: visible !important;
    line-height: 1.1 !important; /* Slightly increased from 0.95 */
    padding-bottom: 0.2em;
}

/* ========================================
   120VH MINIMUM HEIGHT FOR KEY SECTIONS
======================================== */

.divisions,
.awards {
    min-height: 120vh;
    display: flex;
    align-items: center;
    padding: var(--spacing-xxl) 0;
}

.divisions .container,
.awards .container {
    width: 100%;
}

/* Add extra vertical spacing to fill the space nicely */
.divisions .section-title-white {
    margin-bottom: calc(var(--spacing-xxl) * 1.5);
}

.awards .section-title {
    margin-bottom: calc(var(--spacing-xxl) * 1.5);
}

/* Responsive: Adjust for smaller screens */
@media screen and (max-width: 1023px) {
    .divisions,
    .awards {
        min-height: 100vh;
    }
}

@media screen and (max-width: 767px) {
    .divisions,
    .awards {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }
    
    .divisions .section-title-white,
    .awards .section-title {
        margin-bottom: var(--spacing-lg);
    }
}

/* ========================================
   HORIZONTAL SCROLLBAR FIX
   Add this to your home.css file
======================================== */

/* 1. Prevent body/html from creating horizontal scroll */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. Ensure all major sections don't overflow */
section {
    overflow-x: hidden;
    max-width: 100%;
}

/* 3. Fix container widths */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    overflow-x: visible; /* Allow content to be visible */
}

/* 4. EXCEPTION: Allow horizontal scroll ONLY for History section
.history {
    overflow-x: visible !important; */ /* Allow horizontal scroll for this section */
   /* overflow-y: hidden;
}*/
/*
.panel-container-history {
    overflow-x: visible !important;
    overflow-y: hidden;
}*/

history {
overflow-x:hidden
}
/* 5. Fix potential overflow culprits */

/* Hero section */
.hero {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.hero-bottom-content {
    max-width: 100%;
}

/* About section */
.about {
    width: 100%;
    overflow-x: hidden;
}

.about-content {
    max-width: 100%;
}

/* Divisions section */
.divisions {
    width: 100%;
    overflow-x: hidden;
}

.divisions-grid {
    max-width: 100%;
}

/* Awards section */
.awards {
    width: 100%;
    overflow-x: hidden;
}

.best-wrap {
    width: 100%;
    overflow: hidden;
}

.best-wrap h1 {
    white-space: nowrap;
}

/* News section */
.news {
    width: 100%;
    overflow-x: hidden;
}

/* Blogs section */
.blogs {
    width: 100%;
    overflow-x: hidden;
}

/* 6. Fix grids that might overflow */
.awards-grid,
.news-grid,
.blogs-grid {
    max-width: 100%;
}

/* 7. Ensure video slider doesn't overflow */
.video-slider {
    width: 100%;
    max-width: 100vw;
}

.video-slide {
    width: 100%;
    max-width: 100vw;
}

/* 8. Fix absolute positioned elements */
.slide-content {
    max-width: 90%;
}

/* 9. Ensure 3D map container doesn't overflow */
.about-map-3d,
#kerala-3d-container {
    max-width: 100%;
    overflow: hidden;
}

/* 10. MOBILE SPECIFIC: Disable horizontal scroll completely except History */
@media screen and (max-width: 480px) {
    /* For mobile, History should be vertical scroll (no horizontal) */
    .panel-container-history {
        overflow-x: hidden !important;
    }
    
    /* Ensure all sections fit within viewport */
    section:not(.history) {
        width: 100vw;
        overflow-x: hidden;
    }
    
    /* Fix container padding on mobile */
    .container {
        padding: 0 20px;
        width: 100%;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* 11. DESKTOP: Preserve horizontal scroll for History only */
@media screen and (min-width: 481px) {
    /* All sections except History should have no horizontal scroll */
    body > section:not(.history) {
        overflow-x: hidden;
    }
    
    /* History section needs horizontal scroll 
    .history {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }*/
    
    /* Hide scrollbar for History but keep functionality 
    .history::-webkit-scrollbar {
        display: none;
    }*/
    /*
    .history {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* 12. Fix any potential transform issues */
.history-hero-year-bg,
.timeline-year-bg,
.best-wrap h1 {
    transform-origin: center center;
    will-change: auto; /* Reset will-change if it causes issues */
}



/* 14. Fix for elements with fixed positioning */
[style*="position: fixed"],
[style*="position: absolute"] {
    max-width: 100vw;
}

/* 15. Prevent text from causing overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 16. Reset box-sizing for all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}
}

/* ========================================
   WAVES BACKGROUND - MOBILE RESPONSIVE POSITIONING
======================================== */

/* Tablet - Slight adjustment */
@media screen and (max-width: 1023px) {
    .about-waves-background {
        top: 20%;
    }
}

/* Mobile - Push waves down significantly */
@media screen and (max-width: 767px) {
    .about-waves-background {
        top: 35%; /* Push down to match your blue circle area */
        height: 70%; /* Limit height so it doesn't overflow */
    }
    
    .about-waves-background canvas {
        opacity: 0.25; /* More subtle on mobile */
    }
}

/* Small Mobile - Extra push down */
@media screen and (max-width: 480px) {
    .about-waves-background {
        top: 40%; /* Push down even more */
        height: 65%;
    }
    
    .about-waves-background canvas {
        opacity: 0.22; /* Very subtle */
    }
}

/* Landscape Mobile - Keep it higher */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .about-waves-background {
        top: 25%;
        height: 75%;
    }
}

/*LAST ADDED PORTIONS****/
/* ========================================
   SECTION 2 - GLOBAL AI INNOVATION
======================================== */

.ai-innovation {
    position: relative;
    background: var(--color-bg-base);
    overflow: hidden;
    padding-bottom: var(--spacing-xxl);
}

/* ========================================
   CARDS WRAPPER - ARC FORMATION
======================================== */
.ai-cards-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0;
    pointer-events: none;
}

.ai-card {
    position: absolute;
    width: 190px;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transform-origin: center bottom;
    will-change: transform;
    bottom: 60px;
    /* Start stacked - all centered, flat */
    left: 50%;
    transform: translateX(-50%);
    /*rotate: 0deg;*/
    pointer-events: auto;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.ai-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.ai-card:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10 !important;
}

/* Stacked initial z-index */
.ai-card--1 { z-index: 1; }
.ai-card--2 { z-index: 2; }
.ai-card--3 { z-index: 5; } /* center card on top */
.ai-card--4 { z-index: 2; }
.ai-card--5 { z-index: 1; }

/* ========================================
   SECTION CONTENT
======================================== */
.ai-innovation-content {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    padding-top: var(--spacing-xl);
}

/* ========================================
   TITLE
======================================== */
.ai-innovation-title {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.ai-title-highlight-orange {
    font-family: var(--font-bold-crimson);
    /*font-style: italic;*/
    background: var(--color-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.ai-title-highlight-purple {
   font-family: var(--font-bold-crimson);
    /*font-style: italic;*/
    background: var(--color-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ========================================
   DESCRIPTION
======================================== */
.ai-innovation-description {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--color-text-primary);
    line-height: 1.7;
    max-width: 1110px;
    margin: 0 auto var(--spacing-xl);
}

.ai-desc-highlight {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ========================================
   STATS ROW
======================================== */
.ai-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xxl);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.ai-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
}

.ai-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-top: 2px;
}

.ai-stat-icon svg {
    width: 24px;
    height: 24px;
}

.ai-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-stat-value {
    display: block;
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.ai-stat-label {
    display: block;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* ========================================
   CTA BUTTON
======================================== */
.ai-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

/* ========================================
   RESPONSIVE - TABLET (1024px)
======================================== */
@media screen and (max-width: 1024px) {
    .ai-cards-wrapper {
        height: 420px;
    }

    .ai-card {
        width: 155px;
        height: 195px;
        border-radius: 16px;
        bottom: 50px;
    }

    .ai-innovation-content {
        padding-top: var(--spacing-lg);
    }

    .ai-stats {
        gap: var(--spacing-xl);
    }
}

/* ========================================
   RESPONSIVE - MOBILE (768px)
======================================== */
@media screen and (max-width: 768px) {
    .ai-innovation {
        padding-bottom: var(--spacing-xl);
    }

    .ai-cards-wrapper {
        height: 380px;
    }

    .ai-card {
        width: 120px;
        height: 155px;
        border-radius: 14px;
        bottom: 40px;
    }

    .ai-innovation-content {
        padding-top: var(--spacing-md);
    }

    .ai-innovation-title {
        letter-spacing: -1px;
    }

    .ai-stats {
        gap: var(--spacing-lg);
        flex-direction: column;
        align-items: center;
    }

    .ai-stat-item {
        justify-content: flex-start;
        width: 100%;
        max-width: 260px;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE (480px)
======================================== */
@media screen and (max-width: 480px) {
    .ai-cards-wrapper {
        height: 300px;
        z-index: 2;
    }

    .ai-card {
        width: 95px;
        height: 120px;
        border-radius: 12px;
        bottom: 50px;
    }

    .ai-innovation-content {
        padding-top: var(--spacing-sm);
    }

    .ai-innovation-description {
        font-size: 14px;
    }

    .ai-stats {
        gap: var(--spacing-md);
    }

    .ai-stat-value {
        font-size: 15px;
    }

    .ai-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }
}


/* ========================================
   TRUSTED BRIDGE SECTION
   Append to bottom of home.css
   All :root variables already in style.css
   All box-sizing / overflow resets already above
======================================== */

/* ── Section wrapper ──
   Normal 100vh block in page flow.
   GSAP pins it while the sequence plays,
   then releases — no extra space added.       */
.trusted-bridge {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #0a0a0a;
}

.trusted-bridge {
    margin: 0;
    padding: 0;
}
/* ── Canvas: fills the section, image sequence drawn here ── */
#tb-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* ── Vignette: uniform scrim + edge darkening for text readability ── */
.tb-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        /* 1. Uniform base scrim — ensures white text is always legible */
        linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)),
        /* 2. Cinematic edge vignette — darker corners/edges, brighter centre */
        radial-gradient(ellipse 85% 70% at 50% 50%, transparent 15%, rgba(0, 0, 0, 0.45) 100%),
        /* 3. Top & bottom bars — ground the frame */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5) 100%);
}

/* ── Full-screen text layer ── */
.tb-text-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ── Individual text panel ──
   All panels sit on top of each other; GSAP
   controls opacity + translateY per panel.    */
.tb-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-xl);
    opacity: 0;
    transform: translateY(24px);
    text-align: center;
    will-change: opacity, transform;
}

/* ── Eyebrow label ── */
.tb-eyebrow {
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 20px;
}

/* ── Panel 0: large italic serif headline ── */
.tb-headline-01 {
    font-family: var(--font-inter);
    font-size: clamp(42px, 7vw, 96px);
    font-weight: 600;
    line-height: 1.02;
    color: var(--color-text-white);
    max-width: 1000px;
    letter-spacing: -1px;
}

.tb-headline-01 em {
    font-style: normal;
    color: var(--color-primary);
}

/* ── Panel 1: body copy ── */
.tb-headline-02 {
    font-family: var(--font-family-primary);
    font-size: clamp(17px, 2.2vw, 26px);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 780px;
    letter-spacing: 0.01em;
}

.tb-headline-02 strong {
    color: var(--color-text-white);
    font-weight: var(--font-weight-medium);
}

/* ── Panel 2: closing statement ── */
.tb-headline-03 {
    font-family: var(--font-bold-crimson);
    font-size: clamp(52px, 9vw, 120px);
    font-weight: var(--font-weight-regular);
    font-style: italic;
    line-height: 1;
    color: var(--color-text-white);
    letter-spacing: -2px;
    max-width: 900px;
}

.tb-headline-03 .tb-red {
    color: var(--color-primary);
    display: block;
}

/* ── Pill tags ── */
.tb-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.tb-pill {
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
}

/* ── CTA strip ── */
.tb-cta-strip {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
}

.tb-cta-strip.visible {
    pointer-events: auto;
}

/* ── Scroll nudge indicator ── */
.tb-scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.tb-scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

.tb-scroll-text {
    font-family: var(--font-family-primary);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.tb-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
    animation: tbScrollPulse 1.8s ease-in-out infinite;
}

@keyframes tbScrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

/* ========================================
   TB SVG OVERLAY
   ========================================
   Full-screen overlay inside the pinned section.
   Contains the SVG with all intro text.
   Starts opaque white, fades out during zoom.
   ======================================== */

.tb-svg-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    pointer-events: none;
    will-change: opacity;
}

.tb-svg {
    width: 90%;
    max-width: 1200px;
    height: auto;
    overflow: visible;
}

/* ========================================
   TB OUTRO SECTION
======================================== */

.tb-outro {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 0;
}

/* ── Devices ── */
.tb-device {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* d1 — Sony Headphones: furthest away, smallest, top-left */
.tb-device--d1 {
    top: 8%;
    left: 8%;
    width: clamp(80px, 9vw, 140px);
    transform: rotate(-18deg);
    filter: drop-shadow(6px 10px 8px rgba(0,0,0,0.08));
    z-index: 1;
    opacity: 0.85;
    will-change: transform, opacity;
}

/* d2 — Smart Watch: similar depth to headphones but smaller, top-right */
.tb-device--d2 {
    top: 12%;
    right: 5%;
    width: clamp(130px, 15vw, 220px);
    transform: rotate(-10deg);
    filter: drop-shadow(14px 20px 16px rgba(0,0,0,0.13));
    z-index: 3;
    will-change: transform, opacity;
}

/* d3 — ThinkPad Laptop: somewhat near, larger, bottom-right */
.tb-device--d3 {
    bottom: 5%;
    right: 3%;
    width: clamp(200px, 26vw, 420px);
    transform: rotate(7deg);
    filter: drop-shadow(16px 24px 20px rgba(0,0,0,0.14));
    z-index: 4;
    will-change: transform, opacity;
}

/* d4 — iPhone: nearest, largest, bottom-left, casts strongest shadow */
.tb-device--d4 {
    bottom: 8%;
    left: 6%;
    width: clamp(180px, 20vw, 280px);
    transform: rotate(5deg);
    filter: drop-shadow(24px 36px 30px rgba(0,0,0,0.22));
    z-index: 5;
    will-change: transform, opacity;
}

/* ── Centre text ── */
.tb-outro-inner {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

/* Sub text — word-reveal spans start muted */
.tb-outro-sub {
    font-family: var(--font-family-primary);
    font-size: clamp(20px, 2.8vw, 36px);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    color: transparent; /* driven by .tb-wo spans */
}

.tb-wo {
    display: inline-block;
    color: rgba(102, 105, 133, 0.9);
    will-change: color;
    transition: none;
}

.tb-wo--accent {
    color: rgba(142, 35, 135, 0.1);
}


.tb-outro-title {
    font-family: var(--font-family-primary);
    font-size: 65px;
    font-weight: var(--font-weight-bold);
    line-height: 77px;
    letter-spacing: -3.705px;
    margin: 0 0 20px;
}
.tb-hwo {
    display: inline-block;
    background: var(--color-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    will-change: opacity;
    transition: none;
    padding-right: 0.08em; /* prevent last glyph clip from negative letter-spacing */
}

/* Main headline — gradient color from style.css, reveals on scroll like sub-text */
.tb-outro-headline {
    font-family: var(--font-family-primary);
    font-size: clamp(30px, 4.2vw, 60px);
    line-height: 1.15;
    font-weight: var(--font-weight-bold);
    letter-spacing: -1.5px;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* ========================================
   TRUSTED BRIDGE – RESPONSIVE
======================================== */

@media screen and (max-width: 1024px) {
    .tb-outro-title {
        font-size: 48px;
        line-height: 56px;
        letter-spacing: -2.736px;
    }

    .tb-outro-headline {
        font-size: clamp(28px, 4vw, 52px);
        letter-spacing: -1px;
    }

    .tb-headline-01 {
        font-size: clamp(38px, 6vw, 72px);
        letter-spacing: -0.5px;
    }

    .tb-headline-03 {
        font-size: clamp(44px, 8vw, 96px);
        letter-spacing: -1px;
    }

    .tb-panel {
        padding: 0 var(--spacing-lg);
    }
}

@media screen and (max-width: 768px) {
    /* Devices: restore visibility, position for mobile */
    .tb-device {
        display: block;
    }

    .tb-device--d1 {
        top: 18%;
        left: 2%;
        width: 80px;
    }

    .tb-device--d2 {
        top: 10%;
        right: 10%;
        width: 150px;
    }

    .tb-device--d3 {
        bottom: 8%;
        right: 10%;
        width: 180px;
    }

    .tb-device--d4 {
        bottom: 24%;
        left: 5%;
        width: 100px;
    }

    .tb-outro {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .tb-outro-title {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -1.824px;
    }

    .tb-outro-headline {
        font-size: clamp(24px, 6vw, 42px);
        letter-spacing: -0.5px;
    }

    .tb-panel {
        padding: 0 var(--spacing-md);
    }

    .tb-headline-01 {
        font-size: clamp(34px, 10vw, 60px);
        line-height: 1.1;
    }

    .tb-headline-02 {
        font-size: clamp(15px, 3.5vw, 20px);
        line-height: 1.65;
    }

    .tb-headline-03 {
        font-size: clamp(42px, 11vw, 80px);
        letter-spacing: -1px;
    }

    .tb-pills {
        gap: 8px;
        margin-bottom: var(--spacing-md);
    }

    .tb-pill {
        font-size: 10px;
        padding: 5px 14px;
        letter-spacing: 1px;
    }

    .tb-scroll-indicator {
        bottom: 24px;
    }

    .tb-scroll-line {
        height: 36px;
    }

    /* SVG overlay: use more width on smaller screens */
    .tb-svg {
        width: 96%;
    }
}

@media screen and (max-width: 480px) {

    /* Devices: scale down for very small phones */
    .tb-device--d1 {
        top: 18%;
        left: 2%;
        width: 64px;
    }

    .tb-device--d2 {
        top: 10%;
        right: 10%;
        width: 120px;
    }

    .tb-device--d3 {
        bottom: 8%;
        right: 10%;
        width: 144px;
    }

    .tb-device--d4 {
        bottom: 24%;
        left: 5%;
        width: 80px;
    }

    .tb-outro {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .tb-outro-headline {
        font-size: clamp(22px, 8vw, 36px);
        letter-spacing: -0.5px;
    }

    .tb-headline-01 {
        font-size: clamp(30px, 12vw, 52px);
        line-height: 1.12;
        letter-spacing: 0;
    }

    .tb-headline-02 {
        font-size: 15px;
    }

    .tb-headline-03 {
        font-size: clamp(38px, 13vw, 68px);
        letter-spacing: -0.5px;
    }

}

@media screen and (max-width: 768px) and (orientation: landscape) {
    .tb-headline-01 {
        font-size: clamp(28px, 7vw, 52px);
        line-height: 1.1;
    }

    .tb-headline-03 {
        font-size: clamp(36px, 9vw, 70px);
    }

    .tb-scroll-indicator {
        display: none;
    }
}


/* ============================================================
   Scale Innovation Section
   Desktop/Tablet: height: 100vh, 2×2 grid centered in viewport.
   Cards scale via min() so 2 rows always fit within the viewport.
   Mobile: natural scroll, single column full-width cards.
   ============================================================ */

.scale-innovation {
    background: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.si-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

.si-title {
    font-family: var(--font-family-primary);
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.08;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    text-align: center;
}

.si-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0 0 clamp(16px, 2.5vh, 28px);
}

/* Grid: column width scales with viewport height so 2 rows always fit.
   Formula: min(440px, half-available-width)
   440px × 292/519 = 248px per card → 2×248 + gap ≈ 516px grid height
   which comfortably fits inside 100vh alongside the heading block.   */
.si-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, min(440px, calc(50vw - 60px))));
    gap: clamp(12px, 1.5vh, 16px);
    margin: 0 auto;
    justify-content: center;
}

.si-card {
    background: var(--color-primary);
    border-radius: 18px;
    padding: clamp(16px, 2.2vh, 22px) clamp(16px, 1.8vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 519 / 292;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
    /* 3D base */
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    will-change: transform;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
}

/* Shine overlay — moves with the mouse */
.si-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0) 65%
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.si-card:hover::before {
    opacity: 1;
}

.si-card:hover {
    box-shadow: 0 20px 56px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.16);
}

/* Raise content above shine */
.si-card > * {
    position: relative;
    z-index: 2;
}

.si-card-stat {
    font-family: var(--font-family-primary);
    font-size: clamp(28px, 3.5vw, 60px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: #fff;
    text-align: right;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.si-card-stat sup {
    font-size: 0.42em;
    vertical-align: super;
    font-weight: 700;
}

.si-card-icon {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    align-items: flex-start;
}

.si-card-icon img {
    width: clamp(28px, 3.5vw, 44px);
    height: clamp(28px, 3.5vw, 44px);
    object-fit: contain;
}

.si-card-desc {
    font-family: var(--font-family-primary);
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* ---- Tablet: 769px–1024px ---------------------------------------- */
@media (min-width: 765px) and (max-width: 1024px) {
    .si-title {
        font-size: clamp(32px, 3.8vw, 52px);
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .scale-innovation {
        height: auto;
        padding: 60px 0;
        align-items: flex-start;
    }

    .si-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .si-card {
        aspect-ratio: 519 / 292;
        border-radius: 16px;
    }

    .si-card-stat {
        font-size: clamp(28px, 4vw, 52px);
    }

    .si-card-icon img {
        width: clamp(28px, 4vw, 40px);
        height: clamp(28px, 4vw, 40px);
    }

    .si-card-desc {
        font-size: clamp(12px, 1.4vw, 15px);
    }
}

/* ---- Mobile: ≤768px — natural scroll, single column -------------- */
@media (max-width: 768px) {
    .scale-innovation {
        height: auto;
        min-height: unset;
        padding: 48px 0 56px;
        align-items: flex-start;
        overflow: visible;
    }

    .si-title {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -1.824px;
        margin-bottom: 16px;
    }

    .si-divider {
        margin-bottom: 20px;
    }

    .si-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .si-card {
        aspect-ratio: 519 / 292;
        border-radius: 16px;
        padding: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px);
    }

    .si-card-stat {
        font-size: clamp(32px, 10vw, 56px);
    }

    .si-card-icon img {
        width: clamp(28px, 8vw, 40px);
        height: clamp(28px, 8vw, 40px);
    }

    .si-card-desc {
        font-size: clamp(12px, 3.5vw, 15px);
    }
}

/* ---- Small mobile: ≤380px ---------------------------------------- */
@media (max-width: 380px) {
    .si-title {
        font-size: 26px;
        line-height: 32px;
    }

    .si-card {
        border-radius: 14px;
    }

    .si-card-stat {
        font-size: clamp(28px, 9vw, 44px);
    }
}

/* ================================================================
   AI DEMO SECTION – "Experience Before You Buy"
   Normal viewport section (height: 100vh, no sticky/outer wrapper).
   Scroll is captured by JS wheel handler when section is in view.
   ================================================================ */

.ai-demo {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vh, 60px) 0;
  isolation: isolate;
}

/* ── Inner wrap ────────────────────────────────────────────────── */
.ai-demo__wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Section Heading ───────────────────────────────────────────── */
.ai-demo__heading {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700;
  color: #e3001b;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(20px, 3vh, 44px);
}

/* ── Desktop 3-column grid ─────────────────────────────────────── *
 * More space for center content col; narrower thumb col.
 * ─────────────────────────────────────────────────────────────── */
.ai-demo__grid {
  display: grid;
  grid-template-columns: 42fr 36fr 18fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}

/* ── LEFT: Main video player ───────────────────────────────────── */
.ai-demo__player-col {
  min-width: 0;
}

.ai-demo__player {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 220px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.13);
}

.ai-demo__main-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.ai-demo__main-vid.is-active {
  opacity: 1;
}

/* ── CENTER: Text content ──────────────────────────────────────── */
.ai-demo__content-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Label slot: all labels stack in the same cell */
.ai-demo__label-slot {
  display: grid;
}

.ai-demo__label {
  grid-area: 1 / 1;
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  text-align: left;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ai-demo__label.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ai-demo__text-slot {
  display: grid;
}

.ai-demo__text-item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ai-demo__text-item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ai-demo__desc {
  font-size: 15px;
  line-height: 1.75;
  color: #555;
  margin: 0;
}

/* ── RIGHT: Thumbnail strip ────────────────────────────────────── */
.ai-demo__thumb-col {
  min-width: 0;
}

.ai-demo__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each wrap: vertical progress bar on LEFT, video thumb on right */
.ai-demo__thumb-wrap {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
}

/* Vertical bar */
.ai-demo__thumb-bar {
  width: 3px;
  flex-shrink: 0;
  border-radius: 3px;
  background: #e5e5e5;
  position: relative;
}

/* Fills top → bottom when active */
.ai-demo__thumb-pip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #e3001b;
  border-radius: 3px;
  will-change: height;
}

.ai-demo__thumb {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  cursor: pointer;
}

.ai-demo__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dim overlay on inactive thumbnails */
.ai-demo__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  transition: opacity 0.35s ease;
}

.ai-demo__thumb.is-active::after {
  opacity: 0;
}

.ai-demo__thumb:hover::after {
  opacity: 0.15;
}

/* ================================================================
   TABLET  (769px – 1024px) — iPad mini and similar
   Same stacked column layout as mobile, larger sizing.
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  .ai-demo {
    height: auto;
    padding: 36px 0 44px;
    justify-content: flex-start;
    overflow: visible;
  }

  .ai-demo__wrap {
    padding: 0 36px;
  }

  .ai-demo__heading {
    margin-bottom: 28px;
  }

  .ai-demo__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .ai-demo__player-col {
    display: block;
    width: 100%;
  }

  .ai-demo__player {
    aspect-ratio: 4 / 3;
    max-height: none;
    width: 100%;
    border-radius: 20px;
  }

  .ai-demo__content-col {
    text-align: center;
    align-items: center;
    gap: 10px;
  }

  .ai-demo__label-slot {
    width: 100%;
  }

  .ai-demo__label {
    font-size: 32px;
    line-height: 40px;
    text-align: center;
  }

  .ai-demo__desc {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
  }

  .ai-demo__thumbs {
    flex-direction: row;
    gap: 14px;
  }

  .ai-demo__thumb-wrap {
    flex: 1;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  /* Horizontal bar under each thumb */
  .ai-demo__thumb-bar {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    position: relative;
    background: #e5e5e5;
  }

  .ai-demo__thumb-pip {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #e3001b;
    border-radius: 3px;
    will-change: width;
  }

  .ai-demo__thumb {
    aspect-ratio: 1 / 1;
    flex: none;
    width: 100%;
  }
}

/* ================================================================
   MOBILE  (≤ 768px)
   Section clips to 100svh (overflow: hidden).
   Player uses aspect-ratio: 4/3 → concrete self-derived height →
   position:absolute videos always have a real containing block.
   ================================================================ */
@media (max-width: 768px) {

  .ai-demo {
    height: 100svh;
    padding: 28px 0 24px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .ai-demo__wrap {
    padding: 0 20px;
  }

  /* Heading: h1 mobile size with space before video */
  .ai-demo__heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1.824px;
    margin-bottom: 20px;
  }

  .ai-demo__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Player col: normal block, width fills wrap */
  .ai-demo__player-col {
    display: block;
    flex: none;
    min-height: 0;
    width: 100%;
  }

  /* aspect-ratio gives a concrete height → position:absolute videos work */
  .ai-demo__player {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 16px;
  }

  /* Center-aligned content */
  .ai-demo__content-col {
    text-align: center;
    align-items: center;
    gap: 6px;
  }

  .ai-demo__label-slot {
    width: 100%;
  }

  .ai-demo__label {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }

  .ai-demo__desc {
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
  }

  .ai-demo__thumbs {
    flex-direction: row;
    gap: 10px;
  }

  /* Each wrap: thumb on top, bar below */
  .ai-demo__thumb-wrap {
    flex: 1;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }

  .ai-demo__thumb-bar {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    position: relative;
    background: #e5e5e5;
  }

  .ai-demo__thumb-pip {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #e3001b;
    border-radius: 3px;
    will-change: width;
  }

  .ai-demo__thumb {
    aspect-ratio: 1 / 1;
    flex: none;
    width: 100%;
  }
}

/* ── Very small phones (≤ 380px) ──────────────────────────────── */
@media (max-width: 380px) {
  .ai-demo {
    padding: 20px 0 18px;
  }

  .ai-demo__heading {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .ai-demo__grid {
    gap: 12px;
  }

  .ai-demo__label {
    font-size: 19px;
    line-height: 26px;
  }

  .ai-demo__desc {
    font-size: 12px;
  }
}