/*====================================================
                ROOT VARIABLES
====================================================*/

:root{

    /*========== Primary Colors ==========*/

    --primary-color:#062741;
    --primary-hover:#3A9AE6;


    /*========== Neutral Colors ==========*/

    --dark:#292F33;
    --secondary:#66757F;
    --light:#CCD6DD;
    --background:#E1E8ED;
    --white:#FFFFFF;

    /*========== Text Colors ==========*/

    --text-dark:#292F33;
    --text-light:#66757F;
    --text-white:#FFFFFF;

    /*========== Status Colors ==========*/

    --success:#28a745;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#17a2b8;

    /*========== Shadows ==========*/

    --shadow-sm:0 2px 8px rgba(0,0,0,.08);

    --shadow-md:0 6px 18px rgba(0,0,0,.12);

    --shadow-lg:0 12px 35px rgba(0,0,0,.18);

    /*========== Border Radius ==========*/

    --radius-sm:6px;

    --radius-md:12px;

    --radius-lg:20px;

    --radius-xl:30px;

    /*========== Animation ==========*/

    --transition-fast:.25s;

    --transition:.35s;

    --transition-slow:.6s;

    /*========== Navbar ==========*/

    --navbar-height:90px;

    /*========== Container ==========*/

    --container-width:1200px;

}
body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--dark);
    animation:fadePage .8s ease;
}

@keyframes fadePage{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ================= NAVBAR ================= */



/*====================================================
                    NAVBAR
====================================================*/

/* Default Navbar */

.navbar{

    min-height:90px;

    background:linear-gradient(
        to bottom,
        #062741,
        #0A3A66
    ) !important;

    transition:all .4s ease;

    box-shadow:0 5px 20px rgba(0,0,0,.18);

    padding:12px 0;

    z-index:999;

}

/* Home Page Navbar */

.home-page .navbar{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    background:transparent !important;

    box-shadow:none;

}

/* Navbar after scrolling */

.navbar.scrolled{

    background:linear-gradient(
        to bottom,
        #062741,
        #0A3A66
    ) !important;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

}

/* Logo */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff !important;

    font-size:1.65rem;

    font-weight:700;

    transition:.35s;

    margin-left:-25px;   /* Move left */
}

.navbar-brand:hover{

    transform:scale(1.03);

}

.navbar-brand img{

    width:70px;

    height:70px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

}

/* Navigation Links */

.navbar-nav{

    align-items:center;

    gap:6px;

}

.nav-link{

    position:relative;

    color:#ffffff !important;

    font-size:16px;

    font-weight:500;

    padding:10px 12.1px !important;

    transition:all .3s ease;

}

.nav-link:hover{

    color:#9FD9FF !important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:2px;

    width:0;

    height:2px;

    background:#55ACEE;

    transform:translateX(-50%);

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:80%;

}

.nav-link.active{

    color:#55ACEE !important;

}

/* Dropdown */

.dropdown-menu{

    border:none;

    border-radius:12px;

    overflow:hidden;

    margin-top:12px;

    padding:8px 0;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    animation:dropdownFade .3s ease;

}

.dropdown-item{

    padding:12px 20px;

    font-weight:500;

    transition:.3s;

}

.dropdown-item:hover{

    background:#062741;

    color:#fff;

    padding-left:28px;

}

/* Desktop Hover */

@media(min-width:992px){

    .dropdown:hover>.dropdown-menu{

        display:block;

    }

}

/* Toggler */

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/*==============================
        Mobile Navbar
==============================*/

@media(max-width:991px){

    .navbar{

        min-height:80px;

        padding:10px 0;

    }

    .navbar-brand{

        font-size:1.3rem;

    }

    .navbar-brand img{

        width:50px;

        height:50px;

    }

    .navbar-collapse{

        background:#062741;

        margin-top:15px;

        padding:20px;

        border-radius:15px;

        box-shadow:0 10px 25px rgba(0,0,0,.25);

    }

    .navbar-nav{

        gap:0;

        text-align:center;

    }

    .nav-item{

        margin:6px 0;

    }

    .nav-link{

        margin:0;

        font-size:17px;

        padding:12px !important;

    }

    .dropdown-menu{

        background:#0A3A66;

        border:none;

        box-shadow:none;

        text-align:center;

    }

    .dropdown-item{

        color:#fff;

    }

    .dropdown-item:hover{

        background:#55ACEE;

        color:#062741;

        padding-left:20px;

    }

    .btn-warning{

        width:100%;

        margin-top:15px;

    }

}

/* Dropdown Animation */

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*====================================
            HERO SECTION
====================================*/

.hero{

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 700px;

    background:
        linear-gradient(
            to bottom,
            rgba(6,39,65,0.85) 0%,
            rgba(6,39,65,0.55) 45%,
            rgba(85,172,238,0.20) 100%
        ),
        url("../images/school.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}
/* Overlay */

.hero-overlay{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 20px;

}

.hero-content{

    max-width:900px;

    margin-top:120px;

    z-index:2;

}

/* Title */

.hero-title{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:20px;

    animation:fadeDown 1s ease;

}

/* Subtitle */

.hero-subtitle{

    color:#fff;

    font-size:1.4rem;

    font-weight:300;

    margin-bottom:30px;

    animation:fadeUp 1.3s ease;

}

/* Button */

.hero .btn{

    padding:15px 40px;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    transition:.4s;

}

.hero .btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.25);

}

/*====================================
        HERO ANIMATIONS
====================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:768px){

    .hero{

        height:70vh;

    }

    .hero-title{

        font-size:2.3rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

}
.btn{

    transition:.35s;

    border-radius:40px;

    font-weight:600;

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 20px rgba(0,0,0,.15);

}

.card{

    border:none;

    border-radius:15px;

    transition:.35s;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 35px rgba(0,0,0,.15);

}

img{

    transition:.5s;

}

.card:hover img{

    transform:scale(1.08);

}

section{

    animation:slideUp 1s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.quick-links .btn{

    background:white;

    color:var(--dark);

    border:2px solid var(--primary);

    transition:.35s;

}

.quick-links .btn:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-8px);

}

.gallery-item{

    overflow:hidden;

    border-radius:15px;

}

.gallery-item img{

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.news-card{

    transition:.35s;

}

.news-card:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-10px);

}

footer{

    background:var(--dark);

    color:white;

}

footer a{

    color:var(--light);

    transition:.3s;

}

footer a:hover{

    color:var(--primary);

}

.hero-title{

    animation:zoomIn 1s ease;

}

.hero-subtitle{

    animation:fadeUp 1.2s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.7);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==========================
        Dropdown Menu
==========================*/
/*==================================================
                NAVBAR DROPDOWN
==================================================*/

.dropdown-menu{

    min-width:240px;

    border:none;

    border-radius:18px;

    padding:10px 0;

    background:#ffffff;

    box-shadow:0 18px 40px rgba(0,0,0,.15);

    overflow:hidden;

    margin-top:12px;

    animation:dropdownFade .35s ease;

}

/* Dropdown Items */

.dropdown-item{

    position:relative;

    padding:14px 28px;

    font-size:16px;

    font-weight:500;

    color:#062741;

    transition:.35s;

}

/* Left Border Animation */

.dropdown-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#55ACEE;

    transform:scaleY(0);

    transition:.3s;

}

/* Hover */

.dropdown-item:hover{

    background:linear-gradient(
        90deg,
        rgba(85,172,238,.15),
        rgba(6,39,65,.05)
    );

    color:#062741;

    padding-left:36px;

}

.dropdown-item:hover::before{

    transform:scaleY(1);

}

/* Active */

.dropdown-item.active{

    background:#062741;

    color:#fff;

}

/* Dropdown Animation */

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Desktop Hover */

@media(min-width:992px){

    .dropdown:hover>.dropdown-menu{

        display:block;

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

}

/* Mobile */

@media (max-width:991px){

    .dropdown-menu{

        background:#062741;

        border:none;

        border-radius:12px;

        margin-top:8px;

        padding:8px 0;

    }

    .dropdown-item{

        color:#fff;

        padding:12px 20px;

        transition:.3s;

    }

    .dropdown-item:hover{

        background:#0B4C78;

        color:#fff;

        padding-left:28px;

    }

    .dropdown-item::before{

        background:#55ACEE;

    }

}

/* ================= MOBILE NAVBAR ================= */

.school-logo{
    width:60px;
    height:60px;
    object-fit:cover;
    transition:.3s;
}

@media (max-width:991px){

    .navbar{
        min-height:85px;
        padding:12px 0;
    }

    .navbar .container{
        display:flex;
        align-items:center;
    }

    .navbar-brand{
        display:flex;
        align-items:center;
        gap:12px;
        font-size:1.35rem;
        margin:0;
        padding:0;
    }

    .school-logo{
        width:46px;
        height:46px;
    }

    .navbar-toggler{
        padding:6px;
    }

    .navbar-collapse{
        margin-top:15px;
        padding:18px;
        border-radius:15px;
        background:#062741;
    }

}