::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#365314;border-radius:10px}.slide{opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.2,1),transform 3s ease-out;transform:scale(1.1)}.slide.active{opacity:1;transform:scale(1)}.nav-link{position:relative;cursor:pointer;transition:color 0.3s ease;padding-bottom:8px}.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background-color:#fb923c;transition:width 0.3s cubic-bezier(.4,0,.2,1);border-radius:2px}.nav-link:hover::after{width:100%}.nav-link.active{color:#fb923c!important}.nav-link.active::after{width:100%!important}.info-card{transition:all 0.5s cubic-bezier(.23,1,.32,1)}.info-card:hover{transform:translateY(-12px);box-shadow:0 30px 60px -12px rgb(0 0 0 / .3)}.year-tabs button{background:rgb(255 255 255 / .05);color:#94a3b8;border:1px solid rgb(255 255 255 / .1);padding:10px 20px;border-radius:12px;transition:all 0.3s ease;cursor:pointer}.year-tabs button.active{background:#fb923c!important;color:#ffffff!important;border-color:#fb923c;box-shadow:0 4px 15px rgb(251 146 60 / .4);transform:translateY(-2px)}.year-tabs button:hover:not(.active){background:rgb(255 255 255 / .15);color:#fff}html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#fff0}::-webkit-scrollbar-thumb{background:#365314;border-radius:10px}section{position:relative;width:100%}nav{transition:all 0.4s ease-in-out;height:105px;width:85px}#nav-banner img{min-height:110px!important;min-width:500px;margin-top:-21px;object-fit:contain;object-fit:fill!important;margin-left:-25px}.page-home nav{padding-top:5px;padding-bottom:5px}#nav-logo img{width:95px;height:85px;border:3px solid #365314;box-shadow:0 10px 20px rgb(0 0 0 / .2);margin-left:-18px}#nav-logo h1{font-size:1.5rem;font-weight:900;line-height:1}.highlight-card{transition:all 0.4s cubic-bezier(.175,.885,.32,1.275);cursor:default}.highlight-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgb(0 0 0 / .2);border-left-color:#fb923c}.join-step-card{background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);padding:1.5rem 1rem;border-radius:1rem;display:flex;flex-direction:column;align-items:center;transition:background 0.3s}.join-step-card:hover{background:rgb(255 255 255 / .1)}.join-number{width:35px;height:35px;background:#fb923c;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:.75rem;font-size:.8rem}#joining-steps-wrapper{transition:max-height 0.6s cubic-bezier(.4,0,.2,1)}.perspective-1000{perspective:1000px}.transform-style-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden;-webkit-backface-visibility:hidden}.rotate-y-180{transform:rotateY(180deg)}.course-card.flipped .card-inner{transform:rotateY(180deg)}.course-card .card-front::before{content:'';position:absolute;inset:-2px;background:linear-gradient(45deg,#365314,#fb923c,#365314);z-index:-1;border-radius:24px;opacity:0;transition:opacity 0.5s}.course-card:hover .card-front::before{opacity:1}@keyframes floatDirector{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(1deg)}100%{transform:translateY(0) rotate(0deg)}}.director-img-wrapper{animation:floatDirector 6s ease-in-out infinite}.award-card{transition:transform 0.6s cubic-bezier(.2,1,.2,1),border-color 0.4s ease;will-change:transform}.award-card:hover{transform:scale(1.03) translateY(-10px);border-color:rgb(251 146 60 / .3);z-index:10}.award-card img{filter:grayscale(1) opacity(.6);transition:all 0.5s ease}.award-card:hover img{filter:grayscale(0) opacity(1);transform:scale(1.1)}.director-qual-text{text-shadow:0 10px 20px rgb(251 146 60 / .2);display:inline-block}@keyframes designationReveal{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.animate-designation{animation:designationReveal 1s ease-out 0.5s forwards;opacity:0}.overflow-hidden{overflow:hidden}.perspective-2000{perspective:2000px}[data-lang]{line-height:1.4}.card-front h3{word-break:keep-all;min-height:3.5rem;display:flex;align-items:center;justify-content:center}.course-card:hover .card-inner{box-shadow:0 40px 80px -15px rgb(251 146 60 / .3)}body{background-color:#0f172a;background-image:linear-gradient(rgb(255 255 255 / .03) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .03) 1px,transparent 1px),radial-gradient(circle at 50% 0%,rgb(54 83 20 / .15) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgb(251 146 60 / .05) 0%,transparent 50%);background-size:40px 40px,40px 40px,100% 100%,100% 100%;background-attachment:fixed;color:#f8fafc}.light body{background-color:#f8fafc;background-image:linear-gradient(rgb(15 23 42 / .03) 1px,transparent 1px),linear-gradient(90deg,rgb(15 23 42 / .03) 1px,transparent 1px),radial-gradient(circle at 50% 0%,rgb(54 83 20 / .05) 0%,transparent 50%);background-size:30px 30px,30px 30px,100% 100%;color:#0f172a}.glass-panel{background:rgb(255 255 255 / .03);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgb(255 255 255 / .1);border-radius:2rem}#achievementImage{transition:opacity 0.4s ease-out,transform 0.4s ease-out;border-radius:1.5rem;object-fit:cover;width:100%;display:block}.image-container-wrap{background:rgb(251 146 60 / .05);padding:10px;border-radius:2rem}.group{perspective:1000px}#achievementImage{filter:grayscale(20%) brightness(.9);transition:all 0.6s cubic-bezier(.34,1.56,.64,1)}.group:hover #achievementImage{filter:grayscale(0%) brightness(1.1);transform:scale(1.08) rotate(1deg)}.group::after{content:"";position:absolute;top:-50%;left:-60%;width:20%;height:200%;background:linear-gradient(to right,#fff0 0%,rgb(255 255 255 / .3) 50%,#fff0 100%);transform:rotate(30deg);transition:all 0.7s ease;z-index:10;pointer-events:none}.group:hover::after{left:120%}.filter-btn{padding:.5rem 1.25rem;border-radius:.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;transition:all 0.3s ease;background-color:#f1f5f9;color:#64748b}.filter-btn:hover{background-color:#e2e8f0}.filter-btn.active{background-color:#2563eb!important;color:white!important;box-shadow:0 4px 12px rgb(37 99 235 / .3)}.columns-1{column-fill:balance}#content{opacity:1;transition:opacity 0.4s ease,transform 0.4s ease}#content.fading{opacity:0;transform:translateY(10px)}.nav-link{position:relative;cursor:pointer;transition:color 0.3s ease;padding-bottom:8px;text-transform:uppercase;font-size:.75rem;font-weight:700;letter-spacing:.1em}.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background-color:#fb923c;transition:width 0.3s cubic-bezier(.4,0,.2,1);border-radius:2px}.nav-link:hover::after{width:100%}.nav-link.active{color:#fb923c!important}.nav-link.active::after{width:100%!important}.container-premium{width:100%;margin-right:auto;margin-left:auto;padding-right:1.5rem;padding-left:1.5rem}@media (min-width:640px){.container-premium{max-width:640px}}@media (min-width:768px){.container-premium{max-width:768px}}@media (min-width:1024px){.container-premium{max-width:1024px}}@media (min-width:1280px){.container-premium{max-width:1280px}}html{font-size:14px}@media (min-width:768px){html{font-size:16px}}

/* Fluid Typography for the Director Name */
[data-lang="director_name"] {
    font-size: clamp(3rem, 15vw, 8rem); /* Automatically shrinks on small screens */
    line-height: 0.9;
}
/* Universal Mobile Safety */
* {
    box-sizing: border-box; /* Ensures padding doesn't push width over 100% */
}

body {
    overflow-x: hidden; /* Prevents ugly horizontal scrolling on mobile */
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

/* Responsive Image System */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* The "Ganesh Section" Fix (Director Section) */
/* Ensure your flex containers turn into columns on mobile */
.flex-mobile-stack {
    display: flex;
    flex-direction: column; /* Stack vertically on phones */
}

@media (min-width: 768px) {
    .flex-mobile-stack {
        flex-direction: row; /* Side-by-side on Desktop */
    }
}
/* mobile menu  */
/* Force the Bottom Sheet Grid to stay separated */
#bottomSheet nav {
    display: grid !important;
    grid-template-cols: 1fr 1fr !important; /* Forces 2 columns */
    gap: 12px !important;
    align-content: start;
}

#bottomSheet nav a {
    min-height: 100px; /* Ensures boxes don't collapse and merge */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden; /* Prevents text from leaking out */
}

/* Fix for the Main Body content merging with Header */
main#content {
    padding-top: 70px; /* Adjust based on your header height */
    display: block;
    width: 100%;
}
/* --- UNIVERSAL FIXES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- MOBILE RESOLUTION FIXES (Max 768px) --- */
@media (max-width: 768px) {
    /* Fixes First Photo: Left/Right side not covering */
    #nav-banner {
        width: 100vw !important; /* Forces full width of viewport */
        max-width: none !important;
        margin-left: -1rem; /* Offsets common container padding */
    }

    #nav-banner img {
        width: 100% !important;
        height: auto !important;
        object-fit: fill !important; /* Stretches to cover the edges */
    }

    /* Fixes Hero/Slide images on Home Page */
    .hero-slider, .slide {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%); /* Centers and expands to full width */
    }

    .slide img {
        width: 100% !important;
        object-fit: fill !important; /* Ensures no empty side gaps */
    }
}

/* --- DESKTOP MODE FIXES --- */
/* --- DESKTOP MODE (Default) --- */
#main-banner-img {
    max-height: 80px;      /* Keep your desktop height */
    width: auto;           /* Let it scale naturally */
    object-fit: contain;
    display: block;
}

/* --- MOBILE RESOLUTION FIX (Max 768px) --- */
@media (max-width: 768px) {
    #nav-banner {
        width: 100vw !important;  /* Force full viewport width */
        margin-left: -5rem;       /* Pulls image to the very left edge */
        margin-right: -1rem;      /* Pulls image to the very right edge */
    }

    #main-banner-img {
        width: 100% !important;   /* Stretches image to fill the 100vw */
        height: auto !important;  /* Maintains aspect ratio */
        max-height: none !important; 
        object-fit: fill !important; /* Ensures no white gaps on sides */
        border-radius: 0 !important; /* Removes rounded corners on mobile */
    }
    
    /* Ensure the parent container doesn't restrict the banner */
    .flex.items-center.cursor-pointer {
        width: 100%;
    }
}
/* --- MOBILE SLIDER FIX (Max 768px) --- */
/* --- MOBILE SLIDER HEIGHT & SPACE FIX --- */
@media (max-width: 768px) {
    /* 1. Force the slider container to be shorter on mobile */
    .hero-slider, 
    .slide-container,
    #content .slide {
        height: auto !important;      /* Allow height to follow the image */
        min-height: 250px !important;  /* Prevents it from being too flat */
        max-height: 400px !important;  /* Decreases vertical length */
        margin-bottom: 0 !important;   /* Removes any bottom spacing */
        overflow: hidden;
    }

    /* 2. Ensure the image fills the new smaller height */
    .slide img {
        height: 100% !important;
        width: 100% !important;
        object-fit: fill !important;   /* Matches your posters perfectly */
    }

    /* 3. Pull the following section up to touch the image */
    #content > div:nth-child(2) {
        margin-top: -5px !important; 
    }
}
  /* ]floating buttons in slide */
  @media (max-width: 768px) {
    .hero-buttons {
        bottom: 20px !important; /* Positions buttons closer to the bottom of the image */
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    .hero-buttons a, .hero-buttons button {
        padding: 8px 16px !important; /* Smaller buttons for mobile */
        font-size: 10px !important;
    }
}
@media (max-width: 768px) {
    main#content {
        padding-bottom: 0 !important;
    }
    
    section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
/* slide vertical height */
/* Ensure the Header is always on top */
nav, header {
    z-index: 1000 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* Fix for Slides going under the banner */
.hero-slider, .slide-container {
    z-index: 10; /* Lower than nav */
    position: relative;
    /* This pushes the slider down so it doesn't hide behind the banner */
    margin-top: 60px !important; 
}

@media (min-width: 769px) {
    .hero-slider, .slide-container {
        /* Desktop usually needs a larger push-down */
        margin-top: 80px !important; 
    }
}
.slide img {
    width: 100% !important;
    height: 100% !important;
    /* 'contain' ensures the WHOLE image is visible without being cut by the banner */
    object-fit: contain !important; 
    /* This ensures the image starts from the top of its container */
    object-position: top center !important; 
    background-color: #f8fafc; /* Optional: matches page background if image is small */
}

@media (max-width: 768px) {
    .slide img {
        /* On mobile, 'fill' might look better if you want edge-to-edge */
        object-fit: fill !important; 
    }
}
/* --- LAYER 1: THE HEADER --- */
nav, header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important; /* Extremely high to stay on top */
    background: white; /* Ensures no transparency overlap */
}

/* --- LAYER 2: THE CONTENT PUSH --- */
/* We apply padding to the main container instead of margin to the slides */
main#content {
    padding-top: 60px !important; /* Matches mobile banner height */
}

@media (min-width: 769px) {
    main#content {
        padding-top: 80px !important; /* Matches desktop banner height */
    }
}

/* --- LAYER 3: SLIDER HEIGHT CONSTRAINTS --- */
.hero-slider, .slide-container {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    margin-top: 0 !important; /* Resetting previous margin attempts */
}

@media (max-width: 768px) {
    /* Decreases vertical length on mobile to prevent "Big Image" error */
    .hero-slider, .slide-container, .slide {
        height: 35vh !important; /* Only takes 35% of the screen */
        min-height: 220px !important;
    }
    
    .slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important; /* Keeps the text on your posters visible */
    }
}
/* --- DARK MODE MOBILE MENU VISIBILITY --- */
/* We target the 'html.dark' to ensure the background actually flips */
html.dark #bottomSheet {
    background-color: #0f172a !important; /* Deep Slate Navy */
}

/* Force the text and icons to be white in Dark Mode */
html.dark #bottomSheet h2,
html.dark #bottomSheet i,
html.dark #bottomSheet span,
html.dark #bottomSheet p {
    color: #ffffff !important;
}

/* Ensure the 'Close' button and 'Menu Handle' are visible */
html.dark #bottomSheet .bg-slate-200,
html.dark #bottomSheet .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
/* --- DARK MODE MENU HIGHLIGHT FIX --- */

/* 1. Force the main container background */
html.dark #bottomSheet {
    background-color: #0f172a !important; /* Deep Navy */
}

/* 2. Force the boxes (Home, About, etc.) to highlight in a different color */
html.dark #bottomSheet nav a {
    background-color: #1e293b !important; /* Lighter Slate for the boxes */
    border: 1px solid #334155 !important;  /* Subtle border highlight */
}

/* 3. Force the labels and icons to be pure white */
html.dark #bottomSheet span, 
html.dark #bottomSheet h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.dark #bottomSheet i {
    color: #38bdf8 !important; /* Sky Blue icons to make them pop */
}

/* 4. Active state highlight */
html.dark #bottomSheet nav a:active {
    background-color: #334155 !important;
    scale: 0.95;
}
/* Ensure uniformity in dark mode */
html.dark #bottomSheet nav a {
    height: 90px !important; /* Forces the small block look */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tactical font size for small blocks */
html.dark #bottomSheet span {
    font-size: 9px !important;
    margin-top: 4px;
}