@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap');
/* responsive vars */
:root{
    --nav-h: 90px; /* default nav height */
    --section-mix: linear-gradient(90deg, rgba(255,249,220,0.65), rgba(210,230,255,0.65));
    --max-w: 1300px;
    --radius: 10px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(24,24,49);
    background-color: #fff;
    padding-top: var(--nav-h);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1{
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(35, 35, 85);
    letter-spacing: -0.02em;
}

span{
    font-size: .9rem;
    color: #757373;
}

h6{
    font-size: 1.1rem;
    color: rgb(24, 24, 49);
}

/* Navbar logo sizing */
nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-h);
    padding: 0 8vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 18px rgba(20,30,80,0.06);
    z-index: 999;
    /* glassmorphism with subtle yellow->blue tint */
    background: linear-gradient(90deg, rgba(255,249,220,0.14), rgba(230,240,255,0.14));
    -webkit-backdrop-filter: blur(6px) saturate(1.02);
    backdrop-filter: blur(6px) saturate(1.02);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

nav .logo{
    height: calc(var(--nav-h) - 20px);
    max-height: 100%;
    width: auto;
    display: block;
    cursor: pointer;
}

/* center container constraint for main content */
.container{ width: calc(100% - 4vw); max-width: var(--max-w); margin: 0 auto }

nav img{
    height: calc(var(--nav-h) - 20px);
    width: auto;
    cursor: pointer;
}

/* Brand (logo + school name) */
.brand{
    display: flex;
    align-items: center;
    gap: 5px;
}

.brand-name{
    color: rgb(14, 14, 120);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

/* Motto under the brand name */
.brand-motto{
    display: inline-block;
    background-color: yellow;
    color: black;
    font-weight: 600;
    font-style: italic;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 1px;
    text-transform: none;
    line-height: 1;
}

/* Nudge the brand name slightly up so motto sits underneath neatly */
.brand > div{ display:flex; flex-direction: column; justify-content: center; }
.brand-name{ transform: translateY(-2px); }

nav .navigation{
    display: flex;
}

#menu-btn{
    height: 30px;
    width: 30px;
    display: none;
}

#menu-close{
    display: none;
}

nav .navigation ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav .navigation ul li{
    list-style: none;
    margin-left: 30px;
}

nav .navigation ul li a{
    text-decoration: none;
    color: rgb(24, 24, 49);
    font-size: 16px;
    font-weight: 500;
    transition: 0.4s ease;
}

nav .navigation ul li a.active,
nav .navigation ul li a:hover{
    color: var(--ann-gold);
}

/* Nav hover underline microinteraction */
nav .navigation ul li a{
    position: relative;
}
nav .navigation ul li a::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px; width: 0;
    background: var(--ann-gold); transition: width 240ms cubic-bezier(.2,.9,.2,1);
}
nav .navigation ul li a:hover::after{ width: 60% }

/*home section styling*/
#home{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 40px;
    position: relative;
    overflow: hidden;
}

#home h2{
    color: #fff;
    font-size: 3.2rem;
    letter-spacing: 1px;
}

#home p{
    width: 50%;
    color: #fff;
    font-size: 1.4rem;
    line-height: 25px;
}

#home .btn{
    margin-top: 30px;
}

/* Background carousel slides (3 copies of the same image by default) */
#home .slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform-origin: center center;
    will-change: opacity, transform;
    animation: slideZoom 12s infinite ease-in-out;
}

#home .slide1{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/homebg.jpeg"); animation-delay: 0s; }
#home .slide2{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/homebg2.jpeg"); animation-delay: 4s; }
#home .slide3{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/coolkidsbg.jpeg"); animation-delay: 8s; }

/* gradient overlay above slides */
#home::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(9, 5, 54, 0.3), rgba(5,4,46,0.7));
    z-index: 1;
    pointer-events: none;
}

/* make content sit above slides+overlay */
#home > *{
    position: relative;
    z-index: 2;
}

@keyframes slideZoom{
    /* enter: zoom in while fading up, hold, then zoom out while fading */
    0%   { opacity: 0; transform: scale(1.12); }
    6%   { opacity: 1; transform: scale(1.03); }
    30%  { opacity: 1; transform: scale(1.0); }
    36%  { opacity: 0; transform: scale(0.98); }
    100% { opacity: 0; transform: scale(0.98); }
}

#home a{
    text-decoration: none;
    font-size: 1.1rem;
    padding: 13px 35px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
}

#home a.blue{
    background-color: blue;
    color: white;
    transition: 0.4s ease;
}

#home a.blue:hover{
    background-color: white;
    color: blue;
}

#home a.yellow{
    background-color: yellow;
    color: black;
    transition: 0.4s ease;
}

#home a.yellow:hover{
    background-color: white;
    color: blue;
}

/* features section styling */

#features{
    padding: 5vw 8vw 0 8vw;
    text-align: center;
    background: rgb(235, 249, 254);
}

#features h1{
    margin-bottom: 20px;
    color: rgb(14, 14, 120);
}

#features p{
    color: rgb(14, 14, 120);
}

#features .fea-base{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;
}

#features .fea-box{
    background: rgba(250,250,255,0.85);
    border: 1px solid rgba(14,14,120,0.04);
    box-shadow: 0 10px 30px rgba(11,35,64,0.04);
    text-align: start;
    border-radius: var(--radius);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, background 260ms ease;
    transform: translateZ(0);
    will-change: transform, box-shadow;
    cursor: pointer;
}

#features .fea-box:hover{
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(11,35,64,0.08);
}

#features .fea-box i{
    font-size: 2.5rem;
    color: rgb(44, 44, 80);
}

#features .fea-box h3{
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(46, 46, 59);
    padding: 13px 0 7px 0;
}

#features .fea-box p{
    font-size: 1rem;
    font-weight: 400;
    color: rgb(70, 70, 87);
}

 /* courses section styling */

 #co-curricular{
    padding: 8vw 8vw 8vw 8vw;
    text-align: center;
    background: rgb(235, 249, 254);
 }

 #co-curricular h1{
    color: rgb(14, 14, 120);}

#co-curricular p{
    color: rgb(14, 14, 120);
 }

 #co-curricular .course-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;
 }

 #co-curricular .courses{
    text-align: start;
    background-color: rgba(245,245,245,0.8);
    height: 100%;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
     transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
     transform: translateZ(0);
     cursor: pointer;
 }

#co-curricular .courses img{
    width: 100%;
    height: 60%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    display: block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

 #co-curricular .courses:hover{
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 15px 30px rgba(22,40,80,0.12);
}

#co-curricular .courses .details{
    padding: 16px 16px 12px 16px;
    background: rgba(245,245,245,0.8);
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid rgba(14,14,120,0.04);
    box-shadow: 0 8px 18px rgba(11,35,64,0.04);
}

 #co-curricular .courses .date{
    background-color: yellow;
    color: black;
    line-height: 70px;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    bottom: 100px;;
 }

 /* registration section styling */

    #registration{
        padding: 6vw 8vw 6vw 8vw;
        background-image: linear-gradient(rgba(99,112,168,0.5), rgba(81,91,233,0.5)), url("images/signup.jpeg");
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #registration .reminder{
        color: #fff;
    }

    #registration .reminder h1{
        color: #fff;
    }

    #registration .reminder .time{
        display: flex;
        margin-top: 40px;
    }

#registration .reminder .time .date{
        text-align: center;
        padding: 13px 33px;
        background: rgba(255,255,255,0.25);
        backdrop-filter: blur(5px);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        border-radius: 10px;
        margin: 0 5px 10px 5px;
        border: 1px solid rgba(255,255,255,0.18);
        font-size: 1.1rem;
        font-weight: 600;
    }

#registration .reminder .time .date .num{
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

#registration .reminder .time .date .label{
    font-size: 0.85rem;
    color: rgba(255,255,255,0.95);
    margin-top: 6px;
}

#registration .form{
        background: #fff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        padding: 40px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }

#registration .form input{
        padding: 15px 10px;
        margin: 15px 0;
        border: 1px solid rgba(84,40,241);
        outline: none;
    }

#registration .form input::placeholder{
    color: #413c3c;
    font-weight: 500;
    font-size: 0.9rem;
}

#registration .form .btn{
        margin-top: 20px;
    }

#registration a.yellow{
    color: black;
    transition: 0.4s ease;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 13px 35px;
    background-color: yellow;
    font-weight: 600;
    border-radius: 5px;
}

#registration a.yellow:hover{
    background-color: white;
    color: blue;
}

/* footer section styling */

footer{
    padding: 8vw;
    background-color: rgb(14, 14, 120);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

footer .footer-col{
    padding-bottom: 40px;
}

footer h3{
    color: rgb(241, 240, 245);
    font-weight: 600;
    padding-bottom: 20px;
}

footer li{
    list-style: none;
    color: #7b838a;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
    transition: 0.4s ease;
}

footer li a{
    text-decoration: none;
    color: #7b838a;
    transition: 0.4s ease;
}

footer li a:hover{
    color: yellow;
}

footer li:hover{
    color: yellow;
}

footer p{
    color: #7b838a;
}

footer .subscribe{
    margin-top: 20px;
}

/* Newsletter subscribe: use flexible layout so input and button never overlap */
footer .subscribe{
    margin-top: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    width: auto;
}

footer .subscribe input,
footer input{
    flex: 1 1 auto;
    min-width: 0; /* allow shrinking inside flex */
    padding: 12px 14px;
    background: #334F6C;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}

footer .subscribe a{
    text-decoration: none;
    font-size: 1.1rem;
    padding: 10px 14px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 480px){
    footer .subscribe{ width: 100%; }
    footer .subscribe input{ padding: 10px 12px; }
    footer .subscribe a{ padding: 10px 12px; }
}

footer .subscribe a.yellow{
    background-color: yellow;
    color: black;
    transition: 0.4s ease;
}

footer .subscribe a.yellow:hover{
    background-color: white;
    color: blue;
}

footer .copyright{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

footer .copyright p{
    color: #fff;
}

footer .copyright .pro-links {
    margin-top: 0px;
    font-size: 2rem;
}

footer .copyright .pro-links i{
    background-color: #5f7185;
    color: #fff;
    border-radius: 2px;
    transition: 0.4s ease;
}

footer .copyright .pro-links i:hover{
    background-color: yellow;
    color: black;
}

/* Permanent footer anniversary badge */
.footer-anniv{
    display: inline-block;
    background: linear-gradient(90deg, var(--ann-cream), rgba(255,250,220,0.9));
    color: var(--ann-navy);
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(11,35,64,0.08);
    border: 1px solid rgba(11,35,64,0.06);
}

@media (max-width: 480px){
    .footer-anniv{ margin-top: 12px; font-size: 0.9rem }
}

/* center-aligned footer-anniversary variant */
.footer-anniv-center{
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 12px 0;
}

/* about section styling */
#about-home{
    width: 100%;
    height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 40px;
    position: relative;
    overflow: hidden;
}

#about-home h2{
    color: #fff;
    font-size: 2.2rem;
    letter-spacing: 1px;
}

/* Background carousel slides (3 copies of the same image by default) */
#about-home .slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform-origin: center center;
    will-change: opacity, transform;
    animation: slideZoom 12s infinite ease-in-out;
}

#about-home .slide1{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/aboutbg.jpeg"); animation-delay: 0s; }
#about-home .slide2{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/about2bg.jpeg"); animation-delay: 4s; }
#about-home .slide3{ background-image: linear-gradient(rgba(9,5,54,0.35), rgba(5,4,46,0.6)), url("images/boarding.jpeg"); animation-delay: 8s; }

/* gradient overlay above slides */
#about-home::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(9, 5, 54, 0.3), rgba(5,4,46,0.7));
    z-index: 1;
    pointer-events: none;
}

/* make content sit above slides+overlay */
#about-home > *{
    position: relative;
    z-index: 2;
}

#about-container{
    display: flex;
    align-items: center;
    padding: 8vw 8vw 2vw 8vw;
    background: rgb(235, 249, 254);
}

#about-container .about-img{
    width: 60%;
    padding-right: 60px;
}

#about-container .about-img img{
    width: 100%;
}

#about-container .about-text{
    width: 40%;
}
#about-container .about-text h2{
    color: rgb(14, 14, 120);
    margin-bottom: 15px;}

#about-container .about-text p{
color: rgb(70, 70, 87);
font-weight: 300;
font-size: 0.8rem;
}

#about-container .about-text .about-fe{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 30px;
}

#about-container .about-text .about-fe img{
    width: 80px;
    background-size: cover;
    background-position: center;
    margin-right: 20px;
}

#about-container .about-text .about-fe .fe-text{
    width: 90%;
}

#about-container .about-text .about-fe .fe-text h5{
    color: rgb(14, 14, 120);
    font-size: 16px;
}

/* Academic page styling */

#academics-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8vw;
    background: rgb(236, 245, 249);
}

#academics-container .academics{
    width: 60%;
}

#academics-container .academics img{
    width: 100%;
    border-radius: 19px;
}

#academics-container .academics .post{
    padding-bottom: 60px;
}

#academics-container .academics h3{
    color: #29303B;
    padding: 15px 0 10px 0;
}

#academics-container .academics p{
    color: #757373;
    padding-bottom: 20px;
}

#academics-container .academics a{
    text-decoration: none;
    font-size: 0.9rem;
    padding: 13px 35px;
    background-color: rgb(14, 14, 120);
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
}

#academics-container .cate{
    width: 30%;
}

#academics-container .cate h2{
    padding-bottom: 7px;
}

#academics-container .cate a{
    text-decoration: none;
    color: #757373;
    font-weight: 500;
    line-height: 45px;
}

/* contact page styling */

#contact{
    padding: 8vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgb(235, 249, 254);
}

#contact .getin{
    width: 350px;
}

#contact .getin h2{
    color: #2c234d;
    font-size: 30px;
    font-weight: 800;
    line-height: .8;
    margin-bottom: 16px;
}

#contact .getin p{
    color: #686875;
    line-height: 24px;
    margin-bottom: 33px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e4ed;
}

#contact .getin h3{
    color: #2c234d;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 15px;
}

#contact .getin .getin-details div{
    display: flex;  
}

#contact .getin .getin-details div .get{
    font-size: 16px;
    line-height: 22px;
    color: #2c234d;
    margin-right: 20px;

}

#contact .getin .getin-details div p{
    font-size: 14px;
    border-bottom: none;
    line-height: 22px;
    margin-bottom: 15px;
}

#contact .form{
    width: 60%;
    background: #f7f6fa;
    padding: 40px;
    border-radius: 10px;
}

#contact .form h4{
    font-size: 24px;
    color: #2c234d;
    line-height: 30px;
    margin-bottom: 8px;
}

#contact .form p{
    color: #686875;
    line-height: 24px;
    padding-bottom: 25px;
}

#contact .form .form-row{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#contact .form .form-row input{
    width: 48%;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    border: none;
    background: #fff;
    color: #7e7c87;
    padding: 20px 30px;
    margin-bottom: 20px;
}

#contact .form .form-col input,
#contact .form .form-col textarea{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    border: none;
    background: #fff;
    color: #7e7c87;
    padding: 20px 30px;
    margin-bottom: 20px;
}

#contact .form button{
    font-size: .9rem;
    padding: 13px 25px;
    background: rgb(14, 14, 120);
    border-radius: 5px;
    outline: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

#map{
    width: 100%;
    height: 70vh;
    margin-bottom: 8vw;
}

#map iframe{
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* Admissions section styling */
#admissions{
    padding: 6vw 8vw;
    background: #fff;
}

#admissions .admissions-container{ max-width: 1200px; margin: 0 auto; }
#admissions h1{ color: rgb(14,14,120); font-size: 2rem; margin-bottom: 0.5rem }
#admissions p{ color: #5f5f6a; margin-bottom: 1.25rem }

.admissions-box{ background: linear-gradient(180deg, rgba(250,250,255,0.98), rgba(245,246,255,0.98)); padding: 2rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(20,30,80,0.04); }

.admissions-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start }

.admissions-text h2, .admissions-details h2{ color: rgb(14,14,120); margin-bottom: 0.5rem }
.admissions-text p, .admissions-details p{ color: #6b6b77 }

.adm-table-wrap{ overflow:auto; border-radius: 10px; }
.adm-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 320px;
    background: #fff;
    border: 1px solid rgba(14,14,120,0.06);
    box-shadow: 0 10px 30px rgba(11,35,64,0.04);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease;
}
.adm-table th, .adm-table td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(14,14,120,0.06);
    text-align: left;
    color: #1b2030;
    background-clip: padding-box;
}
.adm-table thead th{ background: rgba(250,250,250,0.9); color: rgb(14,14,120); font-weight: 700 }
.adm-table tbody tr:nth-child(even){ background: rgba(250,250,250,0.6) }

/* subtle row hover */
.adm-table tbody tr:hover{ background: rgba(245,245,245,0.8) }

/* keep rounded corners on outer cells */
.adm-table thead th:first-child{ border-top-left-radius: 12px }
.adm-table thead th:last-child{ border-top-right-radius: 12px }
.adm-table tbody tr:last-child td:first-child{ border-bottom-left-radius: 12px }
.adm-table tbody tr:last-child td:last-child{ border-bottom-right-radius: 12px }

/* Pop-out effect on hover / touch / focus */
.adm-table:hover,
.adm-table:focus-within,
.adm-table:active{
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 22px 44px rgba(11,35,64,0.08);
}

/* Support coarse pointers (touch) with :active; also apply when wrapper is activated */
.adm-table-wrap:active .adm-table{ transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 36px rgba(20,30,80,0.12); }

.admissions-followup{ margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(14,14,120,0.06) }
.admissions-followup h3{ color: rgb(14,14,120); margin-bottom: 0.5rem }

@media (max-width: 834px){
    #admissions{ padding: 4vw }
    .admissions-grid{ grid-template-columns: 1fr; }
    .admissions-box{ padding: 1rem }
}

@media (max-width: 480px){
    #admissions{ padding: 2.5rem 1.25rem }
    #admissions h1{ font-size: 1.6rem }
    .adm-table th, .adm-table td{ padding: 8px 8px }
}

/* Enhanced styling for the requirements lists */
.admissions-requirements{
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admissions-requirements h3{ color: rgb(14,14,120); margin-bottom: 0.25rem }
.admissions-requirements h4{
    display: inline-block;
    background: linear-gradient(90deg, rgba(255,249,220,0.6), rgba(210,230,255,0.6));
    color: rgb(14,14,120);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(20,30,80,0.04);
}

.admissions-requirements ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.admissions-requirements li{
    background: #fff;
    padding: 12px 14px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid rgba(14,14,120,0.04);
    box-shadow: 0 8px 20px rgba(11,35,64,0.03);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.admissions-requirements li::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFD400, #2B7BFF);
    flex: none;
    margin-top: 6px;
}

/* Make lists single-column on narrower screens */
@media (max-width: 834px){
    .admissions-requirements ul{ grid-template-columns: 1fr }
}

/* Details/summary accordion styles for requirements */
details.req{
    background: rgba(250,250,255,0.9);
    border-radius: 10px;
    padding: 0.5rem;
    border: 1px solid rgba(14,14,120,0.04);
    box-shadow: 0 8px 24px rgba(20,30,80,0.03);
}

details.req[open]{ background: linear-gradient(90deg, rgba(255,249,220,0.6), rgba(210,230,255,0.6)); }

details.req summary{
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    font-weight: 700;
    color: rgb(14,14,120);
}

details.req summary::-webkit-details-marker{ display: none }

details.req summary::after{
    content: '\25BC';
    transition: transform 0.25s ease;
    font-size: 0.85rem;
    color: rgba(14,14,120,0.9);
}

details.req[open] summary::after{ transform: rotate(180deg) }

.req-content{ max-height: 0; overflow: hidden; transition: max-height 0.32s ease, padding 0.32s ease; padding: 0 12px }
details.req[open] .req-content{ max-height: 60vh; padding-bottom: 12px; overflow: auto; -webkit-overflow-scrolling: touch }

/* Make accordion full-width inside admissions box on small screens */
@media (max-width: 834px){
    details.req{ width: 100%; }
}


/* PLE results table styling (responsive) */
.results-wrap{ width:100%; overflow:auto; margin-top:10px; }
.results-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
    font-size: 0.95rem;
}
.results-table th, .results-table td{
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.08);
    text-align: left;
}
.results-table thead th{
    background: rgba(14,14,120,0.06);
    color: rgb(14,14,120);
    font-weight: 700;
}
.results-table tbody tr:nth-child(even){ background: #fafafa }

@media (max-width: 834px){
    .results-table{ min-width: 320px; font-size: 0.92rem }
    .results-table th, .results-table td{ padding: 8px 10px }
}

@media (max-width: 480px){
    .results-table{ min-width: 280px; font-size: 0.88rem }
    .results-table thead th{ font-size: 0.9rem }
    .results-table td{ padding: 6px 8px }
}

@media (max-width: 769px){
    nav{
        padding: 15px 20px;
    }
    nav img{
        width: 130px;
    }
    #menu-btn{
    display: initial;
}

#menu-close{
    display: initial;
    font-size: 1.6rem;
    color: #fff;
    padding: 30px 0 20px 20px;
}
nav .navigation ul{
    position: absolute;
    top: 0;
    right: -220px;
    width: 220px;
    height: 100vh;
    background-color: rgba(17,20,104,0.45);
    backdrop-filter: blur(4.5px);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: 0.4s ease;
}
nav .navigation ul.active{
    right: 0;
}
nav .navigation ul li{
    padding: 20px 0 20px 40px;
    margin-left: 0;
}
nav .navigation ul li a{
    color: #fff;
}
#home{
    padding-top: 0px;
}
#home p{
    width: 90%;
}
}

/* tablet / ipad specific adjustments */
@media (max-width: 1024px){
    :root{ --nav-h: 80px; }
    #home h2{ font-size: 2.6rem; }
    #home p{ font-size: 1.2rem; width: 75%; }
    #registration{ padding: 4vw 6vw; }
    .brand-name{ font-size: 1.4rem; }
    .brand-motto{ font-size: 0.7rem; padding: 3px 7px; }
}

@media (max-width: 834px){ /* iPad portrait width */
    :root{ --nav-h: 72px; }
    nav{ padding: 0 5vw; }
    nav .navigation ul{ right: -240px; width: 240px; }
    #home{ height: auto; padding-top: calc(var(--nav-h) + 1.5rem); }
    #home h2{ font-size: 2.2rem; }
    #home p{ width: 90%; font-size: 1.05rem }
    #features .fea-base{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
    .brand-name{ font-size: 1.25rem; }
    .brand-motto{ font-size: 0.68rem; padding: 3px 6px }
}

@media (max-width: 768px){
    :root{ --nav-h: 68px; }
    body{ padding-top: var(--nav-h); }
    nav{ padding: 0 4vw; }
    nav .logo{ height: calc(var(--nav-h) - 18px); }
    nav img{ height: calc(var(--nav-h) - 18px); }
    #menu-btn{ display: block; }
    nav .navigation ul{ right: -260px; width: 260px; }
    #home{ height: auto; padding-top: calc(var(--nav-h) + 2rem); }
    #home h2{ font-size: 1.9rem }
    #home p{ width: 92%; font-size: 1rem }
    #registration{ flex-direction: column; padding: 3rem 2rem }
    footer{ padding: 3rem 2rem }
    .brand-name{ font-size: 1.1rem; }
    .brand-motto{ font-size: 0.65rem; padding: 2px 6px }
}

@media (max-width: 480px){
    :root{ --nav-h: 60px; }
    nav{ padding: 0 3vw }
    nav .logo{ height: 40px }
    #home h2{ font-size: 1.6rem }
    #home p{ font-size: 0.95rem }
    #features .fea-base{ grid-template-columns: 1fr }
    #co-curricular .course-box{ grid-template-columns: 1fr }
    .brand-name{ font-size: 1rem; }
    .brand-motto{ font-size: 0.6rem; padding: 2px 6px }
}

/* Admissions: extra responsive polish for phones, tablets, iPads and foldables */
@media (max-width: 1024px){
    #admissions{ padding: 4vw }
    .admissions-box{ padding: 1rem }
    .adm-table-wrap{ -webkit-overflow-scrolling: touch }
}

@media (max-width: 834px){
    .admissions-grid{ grid-template-columns: 1fr }
    .admissions-text, .admissions-details{ width: 100% }
    .admissions-followup{ margin-top: 1rem }
    details.req{ width: 100% }
    /* reduce accordion max height slightly on smaller screens */
    .req-content{ max-height: 50vh }
}

@media (max-width: 480px){
    #admissions{ padding: 2rem 1rem }
    .admissions-box{ padding: 0.75rem }
    #admissions h1{ font-size: 1.45rem }
    .adm-table th, .adm-table td{ padding: 8px 8px; font-size: 0.92rem }
    .req-content{ max-height: 45vh }
    /* make footer anniversary badge fit below content on small screens */
    .footer-anniv{ display: block; margin: 0.5rem 0 }
}

@media (max-width: 360px){
    .adm-table th, .adm-table td{ padding: 6px 6px; font-size: 0.86rem }
    .brand-name{ font-size: 0.95rem }
}

/* Mobile / small-tablet nav + countdown fixes */
@media (max-width: 900px){
    /* show menu button */
    #menu-btn{ display: block; height: 28px; width: auto; }

    /* hide inline links off-screen until toggled */
    nav .navigation ul{
        position: fixed;
        top: 0;
        right: -100%;
        width: 260px;
        height: 100vh;
        background-color: rgba(17,20,104,0.92);
        backdrop-filter: blur(4px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 60px;
        transition: right 0.32s ease;
        z-index: 2000;
    }
    nav .navigation ul.active{ right: 0; }
    nav .navigation ul li{ margin-left: 0; padding: 18px 24px; }
    nav .navigation ul li a{ color: #fff; font-size: 18px }
    #menu-close{ display: block; position: absolute; top: 14px; right: 18px; color: #fff; font-size: 1.6rem }

    /* Ensure nav doesn't overlap content (adjust body padding) */
    body{ padding-top: var(--nav-h); }

    /* Countdown stacking */
    #registration .reminder .time{ flex-wrap: wrap; justify-content: center }
    #registration .reminder .time .date{ padding: 10px 12px; margin: 6px; }
    #registration .reminder .time .date .num{ font-size: 1.6rem }
    #registration .reminder .time .date .label{ font-size: 0.75rem }
}

/* Specific iPad mini / narrow-tablet tweaks */
@media (max-width: 820px){
    :root{ --nav-h: 70px }
    #home h2{ font-size: 2.0rem }
    #home p{ width: 88%; font-size: 1.05rem }
    #features .fea-base{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
    #registration .reminder .time .date{ padding: 12px 18px }
}

/* About page responsiveness */
@media (max-width: 1024px){
    #about-container{
        padding: 6vw 6vw 2vw 6vw;
    }
    #about-container .about-img{ width: 50%; padding-right: 40px; }
    #about-container .about-text{ width: 50%; }
    #about-container .about-text p{ font-size: 1rem; }
}

@media (max-width: 834px){
    #about-home{ height: 35vh; }
    #about-container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 4vw;
    }
    #about-container .about-img{
        width: 100%;
        padding-right: 0;
        margin-bottom: 1rem;
    }
    #about-container .about-img img{ width: 100%; height: auto; }
    #about-container .about-text{ width: 100%; }
    #about-container .about-text p{ font-size: 1rem; line-height: 1.5; }
    #about-container .about-text .about-fe{ flex-direction: column; align-items: flex-start; }
    #about-container .about-text .about-fe img{ width: 60px; margin-right: 0; margin-bottom: 8px }
    #about-container .about-text .about-fe .fe-text{ width: 100%; }
}

@media (max-width: 768px){
    #about-home{ height: 30vh; }
    #about-container{ padding: 3.5rem 2.5rem; }
    #about-container .about-text h1{ font-size: 1.4rem }
    #about-container .about-text p{ font-size: 0.98rem }
}

@media (max-width: 480px){
    #about-home{ height: 28vh; }
    #about-container{ padding: 2.5rem 1.5rem; }
    #about-container .about-img{ margin-bottom: .75rem }
    #about-container .about-text h1{ font-size: 1.2rem }
    #about-container .about-text p{ font-size: 0.95rem }
    #about-container .about-text .about-fe img{ width: 50px }
}

/* Academics page - mobile & tablet only (does not affect desktop/laptop) */
@media (max-width: 1024px){
    #academics-container{
        padding: 6vw;
    }
    #academics-container .academics{
        width: 65%;
    }
    #academics-container .cate{ width: 32%; }
    #academics-container .academics img{ height: 200px; object-fit: cover; }
}

@media (max-width: 834px){
    /* iPad portrait and similar: stack sidebar under content */
    #academics-container{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 4vw;
    }
    #academics-container .academics{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        grid-gap: 1rem;
    }
    #academics-container .academics .post{
        padding-bottom: 16px;
    }
    #academics-container .academics img{ height: 160px; }
    #academics-container .cate{ width: 100%; margin-top: 1rem; }
}

@media (max-width: 480px){
    /* Phones and small foldable outer screens */
    #academics-container{ padding: 2.5rem 1.25rem; }
    #academics-container .academics{ grid-template-columns: 1fr; }
    #academics-container .academics .post img{ height: 140px; }
    #academics-container .academics h3{ font-size: 1rem; }
    #academics-container .academics p{ font-size: 0.95rem; }
    #academics-container .cate{ padding: 0.75rem; }
    #academics-container .cate a{ line-height: 1.6; }
}

/* Section-only soft yellow/blue blurred overlays (keeps body/buttons white) */
#about-container::before,
#features::before,
#co-curricular::before,
#academics-container::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--section-mix);
    filter: blur(14px) saturate(1.03);
    opacity: 0.45;
}

/* Ensure section content remains above the overlay */
#about-container > *,
#features > *,
#co-curricular > *,
#academics-container > *{
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px){
    #about-container::before,
    #features::before,
    #co-curricular::before,
    #academics-container::before{
        filter: blur(12px) saturate(1.02);
        opacity: 0.38;
    }
}

@media (max-width: 834px){
    #about-container::before,
    #features::before,
    #co-curricular::before,
    #academics-container::before{
        filter: blur(10px);
        opacity: 0.32;
    }
}

@media (max-width: 480px){
    /* remove overlays on very small screens for clarity */
    #about-container::before,
    #features::before,
    #co-curricular::before,
    #academics-container::before{ display: none }
}

/* Contact page responsive tweaks */
@media (max-width: 1024px){
    #contact{ padding: 6vw; }
    #contact .getin{ width: 300px; }
    #contact .form{ width: calc(100% - 340px); }
}

@media (max-width: 834px){
    #contact{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 4vw;
    }
    #contact .getin,
    #contact .form{ width: 100%; }
    #contact .getin{ margin-bottom: 1.5rem; }
    #contact .form{ padding: 24px; }
    #contact .form .form-row{ display: flex; flex-direction: column; }
    #contact .form .form-row input{ width: 100%; padding: 14px 16px; }
    #contact .form .form-col input,
    #contact .form .form-col textarea{ padding: 14px 16px; }
    #contact .form button{ width: 100%; padding: 12px; }
    #contact .getin p{ padding-bottom: 18px }
    #map{ height: 50vh; margin-bottom: 3.5rem; }
}

@media (max-width: 480px){
    #contact{ padding: 2.5rem 1.25rem }
    #contact .getin h2{ font-size: 1.4rem }
    #contact .getin p{ font-size: 0.95rem }
    #contact .form{ padding: 18px }
    #contact .form h4{ font-size: 1.1rem }
    #contact .form .form-row input{ padding: 12px 12px }
    #contact .form .form-col input,
    #contact .form .form-col textarea{ padding: 12px 12px }
    #map{ height: 40vh }
}

/* Anniversary theme variables and small banner/badge styles */
:root{
    --ann-gold: #D4AF37;
    --ann-navy: #0B2340;
    --ann-cream: #FFF8E1;
}

/* top banner (inserted before nav in HTML) */
#anniv-banner{ position: fixed; left: 0; right: 0; top: 0; height: 44px; background: linear-gradient(90deg, rgba(212,175,55,0.95), rgba(255,245,200,0.95)); display:flex; align-items:center; justify-content:center; z-index:1100; box-shadow: 0 6px 18px rgba(11,35,64,0.12); }
#anniv-banner .anniv-inner{ width: calc(100% - 4vw); max-width:1200px; display:flex; justify-content:center; align-items:center; gap:12px }
#anniv-banner .anniv-text{ color: var(--ann-navy); font-weight:700 }
#anniv-banner #anniv-dismiss{ background: transparent; border: none; color: var(--ann-navy); font-size: 1.05rem; padding: 6px 8px; cursor:pointer; border-radius:6px }

/* when banner is present, nudge nav down */
#anniv-banner + nav{ top: 44px }


/* update yellow class to match anniversary gold when applied */
.yellow{ background-color: var(--ann-gold); color: var(--ann-navy) }
.yellow:hover{ background-color: rgba(255,255,255,0.95); color: var(--ann-navy) }

/* small responsiveness: shrink banner on very small screens */
@media (max-width: 480px){
    #anniv-banner{ height: 36px }
    #anniv-banner + nav{ top: 36px }
    .brand::after{ font-size: 0.6rem; padding: 5px 7px; right: -2px; top: -4px }
}