:root {
      --theme-color: rgb(23,40,112);
      --navy: #111b40;
            --gold: #ffc400;
            --white: #ffffff;
            --text-grey: #e0e0e0;
            --header-height: 130px; /* Compact height */
            --transition: all 0.3s ease;
        --v-navy: #111b40;
        --v-gold: #ffc400;
        --v-white: #ffffff;
        --v-overlay: linear-gradient(to top, rgba(17, 27, 64, 0.8) 0%, rgba(17, 27, 64, 0.2) 50%, transparent 100%);
            --life-navy: #111b40;
        --life-gold: #ffc400;
        --life-white: #ffffff;
        --life-radius: 16px;
        --avs-navy: #111b40;       /* Deep Navy */
        --avs-blue: rgb(23, 40, 112); /* Brand Blue */
        --avs-gold: #ffc400;
        --avs-white: #ffffff;
        --avs-bg: #f4f6f9;
        --avs-shadow: 0 10px 30px rgba(17, 27, 64, 0.08);
        /* The two specific Navys requested */
        --navy-deep: #111b40;      
        --navy-bright: rgb(23, 40, 112); 
        --white: #ffffff;
          --ctrl-navy: #111b40;
    --ctrl-gold: #ffc400;
    --ctrl-white: #ffffff;
    --ctrl-glass: rgba(255, 255, 255, 0.1);
    --ctrl-border: rgba(255, 255, 255, 0.2);
           --r-bg: #ffffff;
        --r-track-gap: 30px; /* Vertical gap between rows */
        --r-logo-gap: 80px;  /* Horizontal gap between logos */
           --bp-navy: #111b40;      /* Deep Navy */
        --bp-blue: rgb(23,40,112);      /* Bright Blue */
        --bp-white: #ffffff;
        --bp-gold: #ffc400;
        --bp-text-muted: rgba(255, 255, 255, 0.7);
        --bp-font: 'Segoe UI', sans-serif;
         --fix-bg: #111b40;       /* Deep Navy Background */
        --fix-card: #1a2652;     /* Slightly Lighter Navy for Cards */
        --fix-gold: #ffc400;     /* Gold Accents */
        --fix-white: #ffffff;
        --fix-text-mute: #b0b8d1; /* Light Blue-Grey for secondary text */
 
   --fix-card: #1a2652;     /* Slightly Lighter Navy for Cards */
        --fix-gold: #ffc400;     /* Gold Accents */
        --fix-white: #ffffff;
        --fix-text-mute: #b0b8d1; /* Light Blue-Grey for secondary text */
         --glass-navy: rgba(17, 27, 64, 0.85); /* Deep Navy with transparency */
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-highlight: rgba(255, 255, 255, 0.05);
        --accent-gold: #ffc400;
        --text-white: #ffffff;
        --font-primary: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
         --sg-navy: #111b40;
        --sg-gold: #ffc400;
        --sg-white: #ffffff;
        --sg-glass: rgba(255, 255, 255, 0.1);
        --sg-border: rgba(255, 255, 255, 0.2);
        --sg-blob-1: rgba(17, 27, 64, 0.03); /* Very faint Navy */
        --sg-blob-2: rgba(255, 196, 0, 0.05); /* Very faint Gold */
           --tab-navy: #111b40;
        --tab-gold: #ffc400;
        --tab-white: #ffffff;
        --tab-gray: #f4f6f9;
        --tab-line: #e2e8f0;
    }

    /* Main Wrapper */
    .vertical-hero-wrapper {
        position: relative;
        width: 100%;
        /* Height Logic: Needs to be tall enough to impress, but fit on screen */
        height: 80vh; 
        min-height: 500px;
        max-height: 800px;
        background-color: var(--v-navy);
        overflow: hidden;
    }

    .swiper-vertical-hero {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: flex-end; /* Aligns content to right */
        align-items: flex-end;     /* Aligns content to bottom */
        background-color: #000;
    }

    /* 1. THE IMAGE (Ken Burns Layer) */
    .v-slide-img {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover;
        z-index: 1;
        transform-origin: center center;
        will-change: transform;
        /* Default state */
        transform: scale(1);
        transition: transform 8s ease-out; 
    }

    /* Active State: The Zoom Kick-in */
    .swiper-slide-active .v-slide-img {
        transform: scale(1.15);
    }

    /* Dark Overlay for Text Readability */
    .v-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: var(--v-overlay);
        z-index: 2;
        pointer-events: none;
    }

    /* 2. THE CAPTION (Bottom Right & Small) */
    .v-caption-box {
        position: relative;
        z-index: 10;
        padding: 30px 40px;
        text-align: right;
        max-width: 500px;
        /* Parallax Text Effect Setup */
        opacity: 0;
        transform: translateY(20px);
        transition: all 1s ease;
        transition-delay: 0.3s; /* Wait for slide to settle */
    }

    /* Show text when slide is active */
    .swiper-slide-active .v-caption-box {
        opacity: 1;
        transform: translateY(0);
    }

    .v-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--v-navy);
        background: var(--v-gold);
        padding: 4px 8px;
        border-radius: 2px;
        margin-bottom: 8px;
    }

    .v-title {
        color: var(--v-white);
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.1rem; /* Small and Elegant as requested */
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        border-right: 3px solid var(--v-gold); /* Stylish accent line */
        padding-right: 15px;
    }

   

    /* --- MOBILE ADJUSTMENTS --- */
    @media (max-width: 768px) {
        .vertical-hero-wrapper {
            height: 250px; /* Smaller on mobile */
            min-height: auto;
            max-height:auto;
        }
        .v-caption-box {
            padding: 20px;
            max-width: 85%; /* Prevent text hitting edge */
        }
        .v-title {
            font-size: 0.95rem; 
        }
    }


/* Override theme color for dark mode */
@media (prefers-color-scheme: dark) {
    :root { --theme-color: rgb(23, 40, 112); }
}

* { box-sizing: border-box; }

body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;font-display: swap; }

/* --- LAYOUT CONTAINERS --- */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--navy);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    height: var(--header-height);
    width: 100%;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- LEFT SIDE: BRANDING --- */
.brand-area {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.brand-logo {
    height: 75px;
    width: auto;
    object-fit: contain;
        margin: 15px 0px 0px 0px
}

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

.brand-subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    padding:3px 0px;
    font-weight: 300;
    color: white;
    text-align: center;
}

/* --- RIGHT SIDE: NAVIGATION (DESKTOP) --- */
.desktop-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.utility-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
}

.utility-nav a {
    font-size: 12px;
    color: var(--text-grey);
    font-weight: 400;
    text-decoration: none;
    transition: var(--transition);
}

.utility-nav a:hover { color: var(--gold); }

.main-nav {
    display: flex;
    gap: 15px;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: var(--transition);
}

.nav-item:hover .nav-link {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* --- MEGA MENU (DESKTOP) --- */
.mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* Default width, can be overridden inline */
    width: 600px; 
    background: #ffffff;
    border-top: 3px solid var(--gold);
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: grid;
    /* Default columns */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    cursor: default;
    z-index: 1100;
}

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

/* Mega Menu Columns */
.mm-column h4 {
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.mm-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mm-column ul li {
    margin-bottom: 8px;
    position: relative;
}

.mm-column ul li a {
    font-size: 13px;
    color: #555;
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.mm-column ul li a:hover {
    color: var(--navy);
    padding-left: 5px;
    color: var(--gold);
}

/* --- LEVEL 3 NESTING (THE FIX) --- */
/* Style for items that have submenus */
.has-nested-menu > a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--navy) !important;
}

.has-nested-menu > a::after {
    content: '+'; /* Simple indicator */
    font-size: 14px;
    font-weight: bold;
    color: var(--gold);
}

/* The Nested List */
.nested-menu {
    display: none; /* Hidden by default */
    padding-left: 15px;
    margin-top: 5px;
    border-left: 2px solid rgba(17, 27, 64, 0.1);
}

/* Show on Hover of parent LI */
.has-nested-menu:hover .nested-menu {
    display: block;
    animation: fadeIn 0.3s;
}

.nested-menu li a {
    font-size: 12px; /* Slightly smaller for L3 */
    color: #777;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- MOBILE TOGGLE --- */
.mobile-toggle {
    display: none;
    font-size: 24px;
    color: var(--gold);
    cursor: pointer;
    background: none;
    border: none;
}

/* --- MOBILE DRAWER --- */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: var(--navy);
    z-index: 1001;
    transition: right 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    padding: 20px;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}

.mobile-drawer.active { right: 0; }

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn { color: var(--white); font-size: 20px; cursor: pointer; }

/* Mobile Menu List */
.mobile-menu { display: flex; flex-direction: column; gap: 0; }
.m-link-group { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.m-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.m-link i {
    transition: transform 0.3s ease;
}

.m-link.utility { font-size: 13px; color: var(--gold); text-transform: none; }

/* Level 1 Dropdown */
.m-dropdown {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: max-height 0.4s ease;
}

.m-dropdown > a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: #ccc;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
}

.m-dropdown > a:hover { 
    color: var(--gold); 
    border-left-color: var(--gold); 
    padding-left: 25px;
}

.m-link-group.open > .m-dropdown { max-height: 2000px; }
.m-link-group.open > .m-link > i { transform: rotate(180deg); }

/* Level 2 Submenu Group */
.m-submenu-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.m-submenu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
}

.m-submenu-toggle:hover {
    color: var(--gold);
    border-left-color: var(--gold);
}

.m-submenu-toggle i {
    transition: transform 0.3s ease;
    font-size: 10px;
}

.m-submenu-group.open > .m-submenu-toggle > i {
    transform: rotate(180deg);
}

.m-submenu-group.open > .m-submenu-toggle {
    color: var(--gold);
}

/* Level 2 Submenu */
.m-submenu {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    transition: max-height 0.4s ease;
}

.m-submenu-group.open > .m-submenu {
    max-height: 1500px;
}

.m-submenu > a {
    display: block;
    padding: 10px 35px;
    font-size: 12px;
    color: #bbb;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
}

.m-submenu > a:hover {
    color: var(--gold);
    border-left-color: var(--gold);
    padding-left: 40px;
}

/* Level 3 Submenu Group */
.m-submenu-group.level-3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.m-submenu-group.level-3 .m-submenu-toggle {
    padding: 10px 35px;
    font-size: 12px;
    color: #bbb;
}

.m-submenu-group.level-3 .m-submenu-toggle i {
    font-size: 9px;
}

.m-submenu-group.level-3 .m-submenu {
    background: rgba(0, 0, 0, 0.3);
}

.m-submenu-group.level-3 .m-submenu > a {
    padding: 8px 50px;
    font-size: 11px;
    color: #aaa;
}

.m-submenu-group.level-3 .m-submenu > a:hover {
    padding-left: 55px;
    color: var(--gold);
}

/* Highlight for special items (e.g., Placement) */
.m-link.highlight,
.m-link-group .m-link.gold {
    color: var(--gold) !important;
}

/* OVERLAY */
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.overlay.active { opacity: 1; visibility: visible; }

/* Custom Scrollbar for Mobile Drawer */
.mobile-drawer::-webkit-scrollbar {
    width: 4px;
}

.mobile-drawer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.mobile-drawer::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
}

.mobile-drawer::-webkit-scrollbar-thumb:hover {
    background: #e6c200;
}

/* --- RESPONSIVE QUERIES --- */
@media (max-width: 992px) {
    .desktop-nav { display: none; }
    .mobile-toggle { display: block; }
    :root { --header-height: 120px; }
    .brand-logo { height: 60px; }
    .brand-title { font-size: 16px; }
    .brand-subtitle { font-size: 10px; }
}

@media (max-width: 400px) {
    .mobile-drawer {
        width: 100%;
        right: -100%;
    }
    
    .mobile-drawer.active {
        right: 0;
    }
}
    /* Container to hide overflow */
    .ticker-wrap {
        width: 100%;
        overflow: hidden;
        background: #fff; /* or match your body bg */
        position: relative;
    }

    /* The moving track */
    .ticker-move {
        display: flex;
        width: max-content;
        /* 45s speed - adjust as needed. Linear is required for smoothness */
        animation: ticker-scroll 45s linear infinite;
    }
    
    /* Pause on hover so users can read */
    .ticker-move:hover {
        animation-play-state: paused;
    }

    /* CARD STYLING (Desktop Default) */
    .t-card {
        /* Desktop Size */
        width: 550px;
        height: 350px;
        flex-shrink: 0; /* Prevents squishing */
        
        /* Spacing & Layout */
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        
        /* Sharp Edges, No Gaps */
        margin: 0;
        border-radius: 0;
        color: var(--white);
    }

    /* Color Alternation Classes */
    .bg-deep { background-color: var(--navy-deep); }
    .bg-bright { background-color: var(--navy); }

    /* The "Flag" Tag */
    .t-tag {
        position: absolute;
        top: 0;
        left: 30px;
        background: var(--white);
        color: #000;
        font-family: sans-serif;
        font-weight: 800;
        font-size: 0.75rem;
        padding: 10px 12px 12px 12px;
        text-transform: uppercase;
        /* The V-cut shape */
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    }

    /* Date Styles */
    .t-date {
        margin-bottom: 15px;
    }
    .t-day {
        display: block;
        font-family: 'Segoe UI', sans-serif;
        font-weight: 300;
        font-size: 3rem; /* Large on desktop */
        line-height: 1;
    }
    .t-month {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Title Styles (Hidden Overflow) */
    .t-title {
        font-size: 1rem; /* Readable on desktop */
        font-weight: 500;
        line-height: 1.15;
        
        /* Logic to cut off text after 3 lines */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    /* --- MOBILE RESPONSIVENESS (< 768px) --- */
    @media (max-width: 768px) {
        .t-card {
            /* Smaller Box */
            width: 400px;
            height: 350px;
            padding: 20px;
        }
        
        .t-tag {
            left: 20px;
            font-size: 0.6rem;
            padding: 8px 10px 10px 10px;
        }

        .t-day {
            font-size: 2.2rem; /* Smaller Date */
        }
        
        .t-month {
            font-size: 0.95rem;
        }

        .t-title {
            font-size: 1.05rem; /* Smaller Title */
            -webkit-line-clamp: 4; /* Allow 4 lines since font is smaller */
        }
    }

    /* Animation Keyframes */
    @keyframes ticker-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* Moves exactly half way (the length of one set) */
    }

/* 1. NAVIGATION BUTTONS (Next/Prev) */
.swiper-button-next,
.swiper-button-prev {
    width: 55px !important;
    height: 55px !important;
    background-color: var(--ctrl-glass);
    backdrop-filter: blur(8px);             /* Frosted Glass Effect */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ctrl-border);
    border-radius: 50%;
    color: var(--ctrl-white) !important;
    transition: all 0.3s ease;
    z-index: 50;
}

/* Icon Sizing */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.2rem !important;
    font-weight: 900;
    
}

/* Hover Effect: Fills with Gold */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--ctrl-gold);
    border-color: var(--ctrl-gold);
    color: var(--ctrl-navy) !important;     /* Text turns Navy for contrast */
    box-shadow: 0 0 20px rgba(255, 196, 0, 0.4); /* Golden Glow */
    transform: scale(1.1);
}

/* Mobile: Make them smaller or hide them */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 0.9rem !important;
    }
}

/* 2. PAGINATION DOTS (The "Expanding Pill" Style) */
.swiper-pagination-bullet {
    width: 10px !important;       /* Default state: small dot */
    height: 10px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    border-radius: 20px !important; /* Rounded pill shape */
    margin: 0 6px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Smooth elasticity */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* Active State: Expands to a wide bar */
.swiper-pagination-bullet-active {
    width: 40px !important;       /* Expands width */
    background: var(--ctrl-gold) !important;
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.6) !important;
}

/* Hover State for inactive dots */
.swiper-pagination-bullet:hover {
    background: var(--ctrl-white) !important;
}
 

    .legacy-impact-section {
        padding: 80px 0;
        background: var(--avs-white);
        position: relative;
    }

    /* --- PART 1: AVS IDENTITY --- */
    .identity-container {
        text-align: center;
        margin-bottom: 60px;
    }

    .avs-acronym-wrap {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4rem; /* Wide spacing for grandeur */
        margin-bottom: 30px;
    }

    .avs-block {
        text-align: center;
        transition: transform 0.3s ease;
    }
    .avs-block:hover { transform: translateY(-10px); }

    .avs-char {
        font-family: 'Times New Roman', serif; /* Serif for prestige */
        font-size: 5rem;
        font-weight: 700;
        color: var(--avs-navy);
        line-height: 1;
        display: block;
        position: relative;
    }

    /* The Gold Underline */
    .avs-char::after {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: var(--avs-gold);
        margin: 10px auto 0;
        border-radius: 4px;
    }

    .avs-word {
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #555;
        margin-top: 15px;
        display: block;
    }

    /* The Mission Badge */
    .avs-mission-badge {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        background: var(--avs-navy);
        color: var(--avs-gold);
        padding: 15px 30px;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: 600;
        box-shadow: 0 8px 20px rgba(17, 27, 64, 0.2);
        transition: all 0.3s ease;
    }
    .avs-mission-badge:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 30px rgba(17, 27, 64, 0.3);
        background: #000;
    }

    /* --- PART 2: METRICS GRID --- */
    .metrics-wrapper {
        max-width: 1000px;
        margin: 0 auto;
    }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 55px;
    }

    .metric-card {
        background: var(--avs-white);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 16px;
        padding: 30px;
        text-align: center;
        box-shadow: var(--avs-shadow);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 150px;
    }

    .metric-card:hover {
        transform: translateY(-5px);
        border-color: var(--avs-gold);
    }

    /* Accent Cards (Navy Background) */
    .metric-card.accent {
        background: var(--avs-navy);
        color: var(--avs-white);
        border: none;
    }

    /* Typography */
    .metric-num {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 10px;
        color: var(--avs-navy);
    }
    
    /* White text for accent cards */
    .metric-card.accent .metric-num {
        color: var(--avs-gold);
    }

    .metric-desc {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #666;
    }
    .metric-card.accent .metric-desc {
        color: rgba(255,255,255,0.8);
    }

    /* Responsive */
    @media (max-width: 992px) {
        .metrics-grid { grid-template-columns: repeat(2, 1fr); gap:15px; }
        .avs-char { font-size: 4rem; }
    }
    @media (max-width: 576px) {
        .metrics-grid { grid-template-columns: repeat(2, 1fr);gap:15px; }
        .avs-acronym-wrap { gap: 2rem; }
        .avs-char { font-size: 3rem; }
        .avs-mission-badge { font-size: 1rem; padding: 12px 20px; }
    }
 

    /* 1. The Parallax Container */
    .parallax-section {
        /* High Quality Background Image */
        background-image: url('https://avsenggcollege.ac.in/img/WhatsApp Image 2025-11-20 at 8.24.08 PM.jpeg');
        background-attachment: fixed; /* Creates the Parallax Effect */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        padding: 80px 0;
        font-family: var(--font-primary);
        overflow: hidden;
    }

    /* Dark Overlay so text is readable */
    .parallax-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradient from Deep Navy to Black */
        background: linear-gradient(135deg, rgba(17, 27, 64, 0.95) 0%, rgba(0, 0, 0, 0.25) 100%);
        z-index: 1;
    }

    /* Content Wrapper */
    .glass-container {
        position: relative;
        z-index: 2;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Header Styling */
    .section-header {
        text-align: center;
        margin-bottom: 60px;
    }
    .section-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-white);
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .section-divider {
        width: 80px;
        height: 4px;
        background: var(--accent-gold);
        margin: 0 auto;
        border-radius: 2px;
    }

    /* The Grid System */
    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 Columns */
        gap: 25px;
        margin-bottom: 60px;
    }

    /* 2. The Glass Cards */
    .glass-card {
        background: rgba(255, 255, 255, 0.03); /* Very subtle fill */
        backdrop-filter: blur(10px); /* The Blur Effect */
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border);
        border-radius: 20px; /* Rounded Corners */
        padding: 30px 20px;
        text-align: center;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    }

    /* Hover Effects */
    .glass-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--accent-gold);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    /* Icon Styling */
    .icon-box {
        width: 60px;
        height: 60px;
        margin: 0 auto 20px;
        background: linear-gradient(135deg, var(--accent-gold), #ff9100);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #111;
        box-shadow: 0 5px 15px rgba(255, 196, 0, 0.3);
    }

    .glass-card h4 {
        color: var(--text-white);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .glass-card p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
    }

    /* 3. Bottom Buttons */
    .action-row {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .btn-glass {
        padding: 15px 40px;
        border-radius: 50px; /* Pill shape */
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
    }

    .btn-primary-glow {
        background: var(--accent-gold);
        color: #111b40;
        box-shadow: 0 0 20px rgba(255, 196, 0, 0.4);
    }
    .btn-primary-glow:hover {
        background: #fff;
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    }

    .btn-outline-glow {
        background: transparent;
        border: 2px solid rgba(255,255,255,0.3);
        color: #fff;
    }
    .btn-outline-glow:hover {
        border-color: #fff;
        background: rgba(255,255,255,0.1);
        transform: scale(1.05);
    }

    /* Responsive */
    @media (max-width: 992px) {
        .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 576px) {
        .features-grid {grid-template-columns: repeat(2, 1fr);  }
        .action-row { flex-direction: column; align-items: center; width: 100%; }
        .btn-glass { width: 100%; justify-content: center; }
    }
     

    /* 1. The Section Wrapper */
    .glass-wrapper {
        background-color: var(--fix-bg) !important;
        padding: 70px 0;
        position: relative;
        overflow: hidden;
    }

    .glass-title {
        color: var(--fix-white) !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 50px !important;
    }

    /* 2. Swiper Smoothness Settings */
    .swiper-container-glass {
        width: 100%;
        padding: 20px;
    }
    .swiper-container-glass .swiper-wrapper {
        transition-timing-function: linear !important; /* Critical for smooth loop */
    }
    .swiper-slide {
        height: auto;
        display: flex;

        background-color: transparent !important; /* Override default bg */
    }

    /* 3. THE CARD FIX */
    .glass-card1 {
        /* Force a Dark Background so white text shows up */
        background-color: var(--fix-card) !important; 
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 35px;
        text-align: left;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: border-color 0.3s ease;
        margin: 0px 20px;
    }

    /* Hover Effect */
    .glass-card1:hover {
        border-color: var(--fix-gold);
    }

    /* Header Layout */
    .g-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
    }

    /* Avatar */
    .g-avatar-wrap {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
    .g-avatar-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid var(--fix-gold);
    }

    /* Text Colors - Forced White */
    .g-name {
        color: var(--fix-white) !important;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
    }
    .g-role {
        color: var(--fix-text-mute) !important;
        font-size: 0.85rem;
        margin-top: 4px;
    }
    .g-rating {
        color: var(--fix-gold);
        font-size: 0.9rem;
        margin-left: auto; /* Pushes stars to the right */
    }

    /* Quote Area */
    .t-content {
        position: relative;
    }
    .g-quote-icon {
        color: var(--fix-gold);
        font-size: 1.5rem;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    .g-quote {
        color: var(--fix-white) !important; /* Force White Text */
        font-size: 1rem;
        line-height: 1.6;
        font-style: italic;
        opacity: 0.9;
    }
 

    /* Main Container: Flex Row */
    .blueprint-wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        font-family: var(--bp-font);
        margin: 0;
        padding: 0;
        overflow: hidden; /* Clean edges */
    }

    /* --- LEFT COLUMN: Under Graduate (Tall) --- */
    .bp-col-left {
        flex: 1 1 50%;
        background-color: var(--bp-navy);
        color: var(--bp-white);
        padding: 60px;
        position: relative;
        border-right: 1px solid rgba(255,255,255,0.05);
    }

    /* --- RIGHT COLUMN: Stacked PG and PhD --- */
    .bp-col-right {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
    }

    /* Right Top: PG Section */
    .bp-block-pg {
        flex: 1; /* Takes available space */
        background-color: var(--bp-blue);
        color: var(--bp-white);
        padding: 50px 60px;
    }

    /* Right Bottom: PhD Section */
    .bp-block-phd {
        background-color: #f4f4f4; /* Light Gray contrast */
        color: var(--bp-navy);     /* Dark Text */
        padding: 40px 60px;
        position: relative;
        /* Gold Accent Top Border */
        border-top: 6px solid var(--bp-gold); 
    }

    /* TYPOGRAPHY & LISTS */
    

    .split-glass-section {
        position: relative;
        padding: 32px 0;
        overflow: hidden;
        background: #fff; /* Clean base */
    }

    /* --- 1. AMBIENT BLOBS (Background) --- */
    .blob-bg {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        z-index: 0;
        animation: floatBlob 10s infinite alternate;
    }

    .blob-1 {
        top: -10%;
        left: -10%;
        width: 600px;
        height: 600px;
        background: var(--sg-blob-1);
    }

    .blob-2 {
        bottom: -10%;
        right: -5%;
        width: 500px;
        height: 500px;
        background: var(--sg-blob-2);
        animation-delay: 2s;
    }

    @keyframes floatBlob {
        0% { transform: translate(0, 0); }
        100% { transform: translate(30px, 50px); }
    }

    /* --- 2. LAYOUT GRID --- */
    .glass-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 2; /* Above blobs */
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .nested-menu {
        border-left:none !important;
    }
    /* --- 3. LEFT: GLASS VIDEO FRAME --- */
    .glass-video-frame {
        background: rgba(255, 255, 255, 0.4); /* Semi-transparent white */
        backdrop-filter: blur(20px);           /* The Frosted Effect */
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--sg-border);
        border-radius: 40px 120px 40px 40px; /* Unique shape */
        padding: 10px;
        box-shadow: 0 20px 50px rgba(17, 27, 64, 0.15);
        position: relative;
        transition: transform 0.5s ease;
    }
 .glass-video-frame::after {
        content: '';
        position: absolute;
        top: 0; left: -150%;
        width: 100%;
        height: 115%;
        background: linear-gradient(
            120deg, 
            transparent 30%, 
            rgba(255, 255, 255, 0.6) 50%, 
            transparent 70%
        );
        transform: skewX(-20deg);
        animation: glassShimmer 3s infinite ease-in-out;
        pointer-events: none;
        z-index: 10;
    }

    @keyframes glassShimmer {
        0% { left: -150%; }
        20% { left: 200%; } /* Fast slide across */
        100% { left: 230%; } /* Wait */
    }

    .glass-video-frame:hover {
        transform: translateY(-10px);
    }

    /* Organic Video Mask */
    .video-mask {
        width: 100%;
        height: 380px;
        overflow: hidden;
        border-radius: 30px 110px 30px 30px;
        position: relative;
        background: #000;
        z-index: 1; /* Below shimmer */
    }

    .video-mask iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- 4. THE FLOATING BADGE --- */
    .badge-floater {
        position: absolute;
        bottom: -30px; /* Hangs off the bottom */
        right: 40px;   /* Near the curve */
        z-index: 5;
    }

    /* Reusing your specific badge style with enhancements */
    .avs-mission-badge {
        background: var(--sg-navy);
        color: var(--sg-gold);
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 15px 25px;
        border-radius: 50px; /* Circular pill */
        font-weight: 700;
        font-size: 1rem;
        box-shadow: 0 10px 25px rgba(17, 27, 64, 0.3);
        border: 2px solid #fff; /* White ring to separate from glass */
        white-space: nowrap;
    }

    .avs-mission-badge i {
        font-size: 1.4rem;
    }

    /* --- 5. RIGHT: CONTENT --- */
    .content-wrap {
        padding-left: 20px;
    }

    .section-label {
        color: var(--sg-gold);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 15px;
    }

    .visual-heading {
        font-size: 3rem;
        font-weight: 800;
        line-height: 1.1;
        color: var(--sg-navy);
        margin-bottom: 25px;
        font-family: 'Segoe UI', sans-serif;
    }

    .visual-heading span {
        color: transparent;
        -webkit-text-stroke: 1px var(--sg-navy); /* Outline text effect */
    }

    .content-text {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #555;
        margin-bottom: 30px;
    }

    /* Optional 'Learn More' Line */
    .learn-more-line {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--sg-navy);
        font-weight: 700;
        text-decoration: none;
        border-bottom: 2px solid var(--sg-gold);
        padding-bottom: 2px;
        transition: gap 0.3s;
    }
    .learn-more-line:hover { gap: 15px; }

    /* RESPONSIVE */
    @media (max-width: 992px) {
        .video-mask {
            height:280px;
        }
        .glass-grid { grid-template-columns: 1fr; gap: 80px; }
        .visual-heading { font-size: 2.5rem; }
        .badge-floater { right: 50%; transform: translateX(50%); bottom: -25px; } /* Center badge on mobile */
    }
    /* Main Section Headers */
    .bp-main-title {
        font-size: 2rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    /* Sub Headers (Degrees like B.Tech, M.E) */
    .bp-sub-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-top: 25px;
        margin-bottom: 15px;
        color: var(--bp-gold); /* Gold pop */
        display: inline-block;
        border-bottom: 2px solid rgba(255, 196, 0, 0.3);
        padding-bottom: 2px;
    }

    /* The List Styles */
    .bp-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .bp-item {
        font-size: 1.05rem;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.2s ease, padding-left 0.2s ease;
        cursor: default;
    }

    /* Specific styling for the light PhD section borders */
    .bp-block-phd .bp-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Hover Effect */
    .bp-item:hover {
        transform: translateX(10px);
        padding-left: 5px;
        border-bottom-color: var(--bp-gold);
    }
    .bp-block-phd .bp-item:hover {
        border-bottom-color: var(--bp-navy);
    }

    /* RESPONSIVE */
    @media (max-width: 992px) {
        .bp-col-left, .bp-col-right {
            flex: 1 1 100%; /* Stack full width */
        }
        .bp-col-left { padding: 40px; }
        .bp-block-pg { padding: 40px; }
        .bp-block-phd { padding: 40px; }
    }
  

    .recruiters-section {
        padding: 60px 0;
        background: var(--r-bg);
        overflow: hidden;
        position: relative;
    }

    /* Title Styling */
    .r-title {
        color: rgb(23, 40, 112);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 50px;
        position: relative;
        display: inline-block;
    }
    .r-title::after {
        content: '';
        display: block;
        width: 50%;
        height: 3px;
        background: #ffc400;
        margin: 8px auto 0;
    }

    /* --- THE SLIDER WRAPPERS --- */
    .dual-scroll-container {
        display: flex;
        flex-direction: column;
        gap: var(--r-track-gap);
        position: relative;
        
        /* Gradient Masks for Fade Effect on Left/Right edges */
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .slider-row {
        display: flex;
        width: 100%;
        overflow: hidden;
    }

    .track {
        display: flex;
        align-items: center;
        gap: var(--r-logo-gap);
        width: max-content;
        padding: 10px 0;
    }

    /* ANIMATIONS */
    /* Row 1 moves Left */
    .move-left {
        animation: scroll-left 45s linear infinite;
    }
    
    /* Row 2 moves Right */
    .move-right {
        animation: scroll-right 45s linear infinite;
    }

    /* Pause both on hover */
    .dual-scroll-container:hover .track {
        animation-play-state: paused;
    }

    @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes scroll-right {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }

    /* --- LOGO STYLING --- */
    .r-logo-item {
        height: 70px; /* Slightly smaller for double row */
        width: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; /* Prevent squishing */
    }

    .r-logo-item img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        mix-blend-mode: multiply; /* Blends white backgrounds */
    }

    /* Hover Colors */
    .r-logo-item:hover img {
        filter: saturate(1.5) brightness(1.2);
        transform: scale(1.1);
        mix-blend-mode: normal;
    }
      :root {
        --hero-navy: #111b40;
        --hero-gold: #ffc400;
        --hero-white: #ffffff;
        --hero-font: 'Segoe UI', sans-serif;
    }

    .newsletter-hero-section {
        position: relative;
        width: 100%;
        min-height: 600px; /* Tall, immersive height */
        /* Parallax Background */
        background-image: url('../img/infra.jpeg');
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    /* Dark Gradient Overlay */
    .hero-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(135deg, rgba(17, 27, 64, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%);
        z-index: 1;
    }

    /* Swiper Container */
    .swiper-newsletter-hero {
        width: 100%;
        height: 100%;
        z-index: 2;
        padding: 60px 0;
    }

    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- THE CONTENT LAYOUT --- */
    .hero-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    max-width: 100%;
    width: 100%;
    align-items: center;
    }

    /* LEFT: The Massive Calendar Date */
    .hero-date-box {
        text-align: right;
        position: relative;
        padding-right: 40px;
        border-right: 4px solid var(--hero-gold);
    }

    .hero-month {
        display: block;
        font-size: 10rem; /* Massive Hero Text */
        line-height: 0.8;
        font-weight: 800;
        text-transform: uppercase;
        /* The "Outline" Stroke Effect */
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3); 
        color: transparent;
        transition: all 0.5s ease;
    }
    
    .hero-year {
        display: block;
        font-size: 3rem;
        font-weight: 700;
        color: var(--hero-gold);
        margin-top: 10px;
        letter-spacing: 5px;
    }

    /* Active Slide Animation */
    .swiper-slide-active .hero-month {
        -webkit-text-stroke: 0px; 
        color: var(--hero-white); /* Fills in white when active */
        text-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
    }

    /* RIGHT: The Text Content */
    .hero-text-box {
        color: var(--hero-white);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;}

    .hero-label {
        display: inline-block;
        background: rgba(255, 196, 0, 0.2);
        color: var(--hero-gold);
        border: 1px solid var(--hero-gold);
        padding: 8px 16px;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
        border-radius: 50px;
    }

    .hero-title {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .hero-desc {
        font-size: 1.1rem;
        opacity: 0.8;
        line-height: 1.7;
        max-width: 600px;
        margin-bottom: 40px;
    }

    /* Button */
    .btn-hero {
        padding: 15px 40px;
        background: var(--hero-white);
        color: var(--hero-navy);
        text-decoration: none;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 4px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .btn-hero:hover {
        background: var(--hero-gold);
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    /* Custom Navigation Arrows */
    .hero-nav-btn {
        color: var(--hero-white) !important;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        width: 60px !important;
        height: 60px !important;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.2);
        transition: all 0.3s;
    }
    .hero-nav-btn:hover {
        background: var(--hero-gold);
        border-color: var(--hero-gold);
        color: var(--hero-navy) !important;
    }
    .hero-nav-btn::after { font-size: 1.5rem !important; font-weight: bold; }

    /* Responsive */
    @media (max-width: 992px) {
        .hero-content-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
        .hero-date-box { padding-right: 0; border-right: none; border-bottom: 4px solid var(--hero-gold); padding-bottom: 20px; }
        .hero-month { font-size: 6rem; }
        .hero-year { font-size: 2rem; }
        .hero-title { font-size: 2rem; }
        .hero-desc { margin: 0 auto 30px auto; }
         .hero-nav-btn {
            width: 30px !important;
        height: 30px !important;
         }
          .hero-nav-btn::after { font-size: 1rem !important; font-weight: bold; }
    }
      /* Theme Variables */
    :root {
        --g-navy: #111b40;
        --g-gold: #ffc400;
        --g-glass: rgba(17, 27, 64, 0.7);
    }

    .gallery-section-wrapper {
        padding: 60px 20px;
        /* Optional: distinct background to separate from footer */
        background: #ffffff; 
    }

    /* Stylish Headings */
    .gal-title {
        color: var(--g-navy);
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    /* Decorative Gold Line next to title */
    .gal-title::before {
        content: '';
        display: block;
        width: 6px;
        height: 35px;
        background: var(--g-gold);
        border-radius: 4px;
    }

    /* The Image Container */
    .gallery-card {
        position: relative;
        border-radius: 16px;
        overflow: hidden; /* Clips image */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        background: #000; 
        /* Force a standard professional aspect ratio (4:3) */
        aspect-ratio: 4/3;
    }

    .swiper-gallery {
        width: 100%;
        height: 100%;
    }

    /* Image Styling */
    .gal-img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .gallery-card:hover .gal-img {
        transform: scale(1.08); /* Smooth premium zoom */
    }

    /* Gradient Overlay for text */
    .gal-caption-overlay {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        display: grid;
        place-items: center;
        background: linear-gradient(to top, rgba(17, 27, 64, 0.95) 0%, transparent 100%);
        padding: 60px 25px 25px 25px;
        z-index: 2;
        pointer-events: none; /* Lets clicks pass through if needed */
    }

    .gal-caption-text {
        color: #fff;
        background-color: var(--g-navy);
        border-radius: 20px;
        padding: 8px 16px;
        width: fit-content;
        font-size: 1.3rem;
        font-weight: 700;
        margin: 0;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        transform: translateY(5px);
        transition: transform 0.3s;
    }

    .gallery-card:hover .gal-caption-text {
        transform: translateY(0);
    }

    /* --- PREMIUM NAVIGATION BUTTONS --- */
    .gal-nav-btn {
        /* Positioning */
        position: absolute;
        top: 50% !important;
        margin-top: 0 !important; /* Overrides Swiper default */
        transform: translateY(-50%);
        z-index: 10;
        
        /* Size */
        width: 48px !important;
        height: 48px !important;
        
        /* Style: Dark Glass + Gold */
        background: var(--g-glass);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 196, 0, 0.3); /* Subtle Gold Border */
        border-radius: 50%;
        
        /* Content Alignment */
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Animation */
        transition: all 0.3s ease;
        opacity: 0; /* Hidden by default for cleaner look */
        color: var(--g-gold) !important;
    }

    /* Button Arrow Icon Size */
    .gal-nav-btn::after {
        font-size: 1.2rem !important;
        font-weight: 900;
    }

    /* Show buttons only on hover for cleaner UI */
    .gallery-card:hover .gal-nav-btn {
        opacity: 1;
    }

    /* Spacing from edges */
    .swiper-button-prev { left: 20px !important; }
    .swiper-button-next { right: 20px !important; }

    /* Hover States */
    .gal-nav-btn:hover {
        background: var(--g-gold);
        color: var(--g-navy) !important; /* Invert colors */
        border-color: var(--g-gold);
        box-shadow: 0 0 15px rgba(255, 196, 0, 0.5); /* Glow */
    }
  :root {
        --f-navy: #0f172a;      /* Very Dark Navy */
        --f-blue: #1e293b;      /* Slightly Lighter Navy for Copyright */
        --f-gold: #ffc400;
        --f-white: #ffffff;
        --f-text: #94a3b8;      /* Muted slate text */
        --f-border: rgba(255, 255, 255, 0.1);
    }

    .footer-section {
        background-color: var(--fix-bg);
        color: var(--f-text);
        padding-top: 80px;
        font-family: 'Segoe UI', sans-serif;
        position: relative;
        border-top: 6px solid var(--fix-bg);
        padding-bottom: 45px;
    }

    /* Columns Styling */
    .footer-col-title {
        color: var(--f-white);
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 25px;
        position: relative;
        display: inline-block;
    }
    
    /* Gold Underline for Titles */
    .footer-col-title::after {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background: var(--f-gold);
        margin-top: 10px;
        border-radius: 2px;
    }

    /* Links */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-link {
        color: var(--f-text);
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
    }

    .footer-link::before {
        content: '\203A'; /* Chevron */
        margin-right: 8px;
        color: var(--f-gold);
        font-weight: bold;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
    }

    .news-recruitment-section {
        padding: 15px 0;
        background-color: var(--tab-white);
        position: relative;
    }

    /* --- 1. THE SLEEK TOGGLE SWITCH --- */
    .tab-switcher-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }

    .tab-switcher {
        background: var(--tab-gray);
        padding: 5px;
        border-radius: 50px;
        display: flex;
        position: relative;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    }

    .tab-btn {
        border: none;
        background: transparent;
        padding: 12px 40px;
        font-size: 0.9rem;
        font-weight: 700;
        color: #666;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .tab-btn.active {
        color: var(--tab-navy);
    }

    /* The Sliding Gold Background */
    .tab-glider {
        position: absolute;
        top: 5px;
        left: 5px;
        height: calc(100% - 10px);
        width: 50%; /* Assumes 2 tabs equal width */
        background: var(--tab-white);
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 1;
        border-top: 3px solid var(--tab-gold);
    }

    /* --- 2. CONTENT AREA (Fading) --- */
    .tab-content-area {
        position: relative;
        min-height: 400px; /* Reserve space */
    }

    .tab-pane {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.5s ease;
        z-index: 1;
    }

    .tab-pane.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        position: relative;
        z-index: 2;
    }

    /* --- 3. TIMELINE CARD DESIGN --- */
    .timeline-card {
        background: var(--tab-navy);
        border: 1px solid var(--tab-line);
        color:white;
        border-radius: 12px;
        padding: 30px 25px;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .timeline-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(17, 27, 64, 0.1);
        border-color: var(--tab-gold);
    }

    /* The Timeline Graphic */
    .tl-graphic {
        position: relative;
        height: 2px;
        background: var(--tab-line);
        margin: 30px 0 20px 0;
        width: 100%;
    }

    .tl-dot {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: var(--tab-navy);
        border: 2px solid var(--tab-gold);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.2); /* Glow */
        transition: left 0.3s ease;
    }
    
    .timeline-card:hover .tl-dot {
        box-shadow: 0 0 0 6px rgba(255, 196, 0, 0.4); /* Intensify glow */
        background: var(--tab-gold);
    }

    /* Date Badge (Floating above dot) */
    .tl-date {
        position: absolute;
        top: -25px; /* Above line */
        left: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
    }

    /* Content */
    .tl-category {
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 5px;
        display: block;
    }

    .tl-title {
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.4;
        color: white;
        margin-bottom: 15px;
        display: -webkit-box;
        overflow: hidden;
        min-height: 6.2rem; /* Keeps cards even */
    }

    .tl-link {
        font-size: 0.9rem;
        font-weight: 600;
        color: white;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: gap 0.2s;
    }
    
    .tl-link:hover {
        gap: 10px;
        color: var(--tab-gold);
    }

    /* Swiper Styles */
    .swiper-tabbed {
        padding: 20px 10px 40px 10px !important; /* Space for shadows */
    }
    .footer-link:hover {
        color: var(--f-gold);
        padding-left: 5px;
    }

    .footer-link:hover::before {
        opacity: 1;
        transform: translateX(0);
    }

    /* Contact Area */
    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    .contact-icon {
        color: var(--f-gold);
        font-size: 1.1rem;
        margin-top: 4px;
    }
    .contact-text {
        color: var(--f-text);
        line-height: 1.5;
        margin: 0;
    }

    /* Newsletter Input */
    .newsletter-box {
        position: relative;
        margin-top: 20px;
    }
    .footer-input {
        background: rgba(255,255,255,0.05);
        border: 1px solid var(--f-border);
        color: var(--f-white);
        padding: 12px 15px;
        width: 100%;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .footer-input:focus {
        outline: none;
        border-color: var(--f-gold);
    }
    .btn-footer-sub {
        background: var(--f-gold);
        color: var(--f-navy);
        width: 100%;
        font-weight: 700;
        padding: 10px;
        border: none;
        border-radius: 4px;
        transition: all 0.3s;
    }
    .btn-footer-sub:hover {
        background: #fff;
    }

    /* Social Icons */
    .social-row {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    .social-btn {
        width: 40px;
        height: 40px;
        border: 1px solid var(--f-border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--f-white);
        text-decoration: none;
        transition: all 0.3s;
    }
    .social-btn:hover {
        background: var(--f-gold);
        color: var(--f-navy);
        border-color: var(--f-gold);
    }

    /* Copyright Bar */
    .copyright-bar {
        background-color: var(--f-navy);
        padding: 25px 0;
        margin-top: 60px;
        border-top: 1px solid var(--f-border);
    }
    .copy-text {
        font-size: 0.9rem;
        margin: 0;
    }
    .trust-text {
        color: rgba(255,255,255,0.5);
        font-size: 0.8rem;
        margin-top: 5px;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .footer-section { text-align: left; padding-bottom: 30px; }
        .footer-col-title { margin-top: 30px; }
    }
           :root {
        --st-navy: #111b40;
        --st-gold: #ffc400;
        --st-white: #ffffff;
    }

    .progress-wrap {
        position: fixed;
        right: 30px;
        bottom: 50px;
        height: 50px;
        width: 50px;
        cursor: pointer;
        display: block;
        border-radius: 50px;
        box-shadow: inset 0 0 0 2px rgba(17, 27, 64, 0.1); /* Inner track */
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 200ms linear;
        background: var(--st-navy); /* White bg behind icon */
    }

    /* Active State (Visible) */
    .progress-wrap.active-progress {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* The SVG Ring */
    .progress-wrap svg path {
        fill: none;
    }
    
    .progress-wrap svg.progress-circle path {
        stroke: var(--st-navy); /* The Grey/Navy Track */
        stroke-width: 4;
        box-sizing: border-box;
        transition: all 200ms linear;
    }

    /* The Arrow Icon */
    .progress-wrap::after {
        content: '\f062'; /* FontAwesome Arrow Up */
        font-family: "Font Awesome 5 Free"; 
        font-weight: 900;
        position: absolute;
        left: 0; top: 0;
        height: 50px; width: 50px;
        line-height: 50px;
        text-align: center;
        color: var(--st-white);
        font-size: 18px;
        transition: all 200ms linear;
    }

    /* Hover Effects */
    .progress-wrap:hover::after {
        color: var(--st-gold);
        transform: translateY(-3px);
    }
    
    .progress-wrap:hover {
        box-shadow: 0 5px 15px rgba(17, 27, 64, 0.3);
        transform: scale(1.1);
    }

    /* If you are using Bootstrap Icons (bi) instead of FontAwesome, 
       remove the ::after block above and uncomment the HTML icon inside */
    :root {
        --fab-navy: #111b40;
        --fab-gold: #ffc400;
        --fab-green: #25d366;
        --fab-white: #ffffff;
    }

    /* Container */
    .floating-action-stack {
        position: fixed;
        right: 10px; /* Closer to edge */
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px; /* Tighter gap */
        z-index: 9999;
        align-items: flex-end; /* Aligns buttons to the right */
    }

    /* Button Base Style */
    .fab-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 8px; /* Tighter radius, less round */
        padding: 8px 12px; /* Much smaller padding */
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: transform 0.2s ease;
        width: fit-content; /* Hugs text */
        position: relative;
        overflow: hidden;
    }

    .fab-btn:hover {
        transform: translateX(-3px); /* Subtle slide left */
    }

    /* Icon & Text Styling */
    .fab-icon {
        font-size: 1.2rem; /* Smaller Icon */
        margin-right: 8px;
    }
    

    .life-section {
        padding: 20px 0;
        background: #fff;
    }

    .life-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .life-title {
        color: var(--life-navy);
        font-weight: 800;
        font-size: 2.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .life-subtitle {
        color: #666;
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
    }

    /* --- THE MOSAIC BENTO GRID --- */
    .social-grid {
        display: grid;
        /* Desktop: Strict 4-column layout for perfect Bento structure */
        grid-template-columns: repeat(4, 1fr);
        /* Base row height */
        grid-auto-rows: 240px; 
        /* Dense flow fills empty pockets automatically */
        grid-auto-flow: dense; 
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Grid Item Styling */
    .grid-item {
        position: relative;
        border-radius: var(--life-radius);
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        height: 100%; /* Ensure it fills the grid cell */
        width: 100%;
    }

    .grid-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(17, 27, 64, 0.2);
        z-index: 2; /* Bring to front on hover */
    }

    /* --- BENTO SIZING CLASSES --- */
    
    /* Tall: 1 Column Wide, 2 Rows High */
    .item-tall { 
        grid-column: span 1; 
        grid-row: span 2; 
    }
    
    /* Wide: 2 Columns Wide, 1 Row High */
    .item-wide { 
        grid-column: span 2; 
        grid-row: span 1; 
    }
    
    /* Big: 2 Columns Wide, 2 Rows High (The Hero Block) */
    .item-big { 
        grid-column: span 2; 
        grid-row: span 2; 
    }

    /* Image Styling */
    .grid-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .grid-item:hover .grid-img {
        transform: scale(1.1);
    }

    /* Hover Overlay */
    .grid-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to top, rgba(17, 27, 64, 0.9) 0%, rgba(17, 27, 64, 0.3) 50%, transparent 100%);
        opacity: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 25px;
        transition: opacity 0.3s ease;
    }

    .grid-item:hover .grid-overlay {
        opacity: 1;
    }

    .grid-caption {
        color: var(--life-white);
        font-weight: 700;
        font-size: 1.1rem;
        transform: translateY(10px);
        transition: transform 0.3s ease;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .grid-icon {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        color: var(--life-gold);
        font-size: 2.5rem;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .grid-item:hover .grid-caption { transform: translateY(0); }
    .grid-item:hover .grid-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }

    /* --- LIGHTBOX MODAL --- */
    .avs-lightbox {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(17, 27, 64, 0.95);
        z-index: 10000;
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .avs-lightbox.active {
        display: flex;
        opacity: 1;
    }

    .lightbox-content {
        position: relative;
        max-width: 900px;
        width: 100%;
        text-align: center;
    }

    .lightbox-img {
        max-height: 80vh;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
        border: 2px solid var(--life-gold);
    }

    .lightbox-caption {
        color: var(--life-white);
        font-size: 1.5rem;
        margin-top: 20px;
        font-weight: 600;
    }

    .lightbox-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: var(--life-white);
        font-size: 2rem;
        cursor: pointer;
        transition: color 0.3s;
    }
    .lightbox-close:hover { color: var(--life-gold); }

    /* --- RESPONSIVE BREAKPOINTS --- */
    
    /* Tablet: Switch to 2 Columns */
    @media (max-width: 992px) {
        .social-grid { 
            grid-template-columns: repeat(2, 1fr); 
            grid-auto-rows: 220px;
        }
    }

    /* Mobile: Switch to 1 Column Stack (Flexbox is safer than grid here) */
    @media (max-width: 576px) {
        .social-grid { 
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        /* Reset spans for mobile stack */
        .item-tall, .item-wide, .item-big { 
            height: 250px; 
            width: 100%;
        }
        
        /* Make the big item slightly taller on mobile for impact */
        .item-big {
            height: 300px;
        }
        
        .life-title { font-size: 2rem; }
    }

    .fab-text {
        font-family: 'Segoe UI', sans-serif;
        font-weight: 700;
        font-size: 12px; /* Small crisp text */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* --- WHATSAPP (Green) --- */
    .fab-whatsapp {
        background: var(--fab-green);
        color: var(--fab-white);
        border: 1px solid var(--fab-white);
    }
    
    /* Pulse Animation */
    .fab-whatsapp .fab-icon {
        animation: wiggle 3s infinite;
    }

    /* --- ADMISSION (Navy/Gold) --- */
    .fab-admission {
        background: var(--fab-navy);
        color: var(--fab-gold);
        border: 1px solid var(--fab-gold);
    }
    
    .fab-admission:hover {
        background: var(--fab-gold);
        color: var(--fab-navy);
    }

    /* Wiggle Animation */
    @keyframes wiggle {
        0%, 90%, 100% { transform: rotate(0deg); }
        92% { transform: rotate(-10deg); }
        94% { transform: rotate(10deg); }
        96% { transform: rotate(-10deg); }
        98% { transform: rotate(10deg); }
    }

    /* --- MOBILE OPTIMIZATION --- */
    @media (max-width: 768px) {
        .floating-action-stack {
            right: 5px; /* Very close to edge on mobile */
            gap: 8px;
        }
        .fab-btn {
            padding: 6px 10px; /* Even smaller on mobile */
        }
        .fab-text {
            font-size: 10px; /* Tiny but readable text */
        }
        .fab-icon {
            font-size: 1rem;
            margin-right: 5px;
        }
    }
     :root {
        --tic-navy: #111b40;
        --tic-gold: #ffc400;
        --tic-white: #ffffff;
    }

    /* The Fixed Bar Container */
    .sticky-ticker-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--tic-navy);
        color: var(--tic-white);
        z-index: 9990; /* High, but below the Back-to-top button (10000) */
        height: 45px;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-top: 3px solid var(--tic-gold);
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        
        /* Hidden by default (pushed down) */
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        visibility: hidden;
    }

    /* Active Class (Triggered by JS) */
    .sticky-ticker-bar.is-visible {
        transform: translateY(0);
        visibility: visible;
    }

    /* The Moving Track */
    .ticker-content-track {
        display: flex;
        white-space: nowrap;
        /* Adjust speed: 30s */
        animation: ticker-slide 35s linear infinite;
        width: max-content;
    }

    /* Pause on Hover */
    .sticky-ticker-bar:hover .ticker-content-track {
        animation-play-state: paused;
    }

    /* Individual Items */
    .ticker-item {
        font-family: 'Segoe UI', sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        padding: 0 2rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.5px;
    }

    /* Separator */
    .ticker-sep {
        color: var(--tic-gold);
        font-weight: 300;
        opacity: 0.5;
    }

    /* Highlights */
    .highlight-gold {
        color: var(--tic-gold);
        font-weight: 700;
    }

    .highlight-badge {
        background: var(--tic-gold);
        color: var(--tic-navy);
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
    }

    /* Animation */
    @keyframes ticker-slide {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* Moves half-way (length of one set) */
    }

    /* Mobile Adjustments */
    @media (max-width: 768px) {
        .sticky-ticker-bar { height: 40px; }
        .ticker-item { font-size: 0.85rem; }
    }