/*======================================================================
    SCHOOL CMS
    File        : navbar.css
    Purpose     : Top Bar & Navigation Styling
    Author      : ChatGPT & Dauda
    Version     : 1.0
======================================================================*/


/*=========================================================
    TOP CONTACT BAR
=========================================================*/

.top-bar{

    background:var(--dark);

    color:var(--white);

    font-size:14px;

    padding:10px 0;

}

.top-bar a{

    color:var(--white);

    text-decoration:none;

    transition:var(--transition);

}

.top-bar a:hover{

    color:var(--secondary);

}

.top-contact{

    display:flex;

    align-items:center;

    gap:20px;

}

.top-contact i{

    color:var(--secondary);

    margin-right:8px;

}

.top-social{

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

.top-social a{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    transition:var(--transition);

}

.top-social a:hover{

    background:var(--secondary);

    color:var(--dark);

}


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

.main-navbar{

    position:fixed;

    top:44px;

    left:0;

    width:100%;

    z-index:9999;

    transition:all .4s ease;

    background:transparent;

}

.main-navbar.scrolled{

    top:0;

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(10px);

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

}


/*=========================================================
    BRAND
=========================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.navbar-brand img{

    width:60px;

    height:60px;

    object-fit:contain;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text h4{

    margin:0;

    font-size:22px;

    font-weight:800;

    color:var(--white);

    transition:var(--transition);

}

.brand-text small{

    color:#e9ecef;

    transition:var(--transition);

}

.main-navbar.scrolled .brand-text h4{

    color:var(--dark);

}

.main-navbar.scrolled .brand-text small{

    color:var(--text);

}


/*=========================================================
    NAV LINKS
=========================================================*/

.navbar-nav{

    gap:8px;

}

.navbar-nav .nav-link{

    color:var(--white);

    font-weight:600;

    padding:12px 16px;

    position:relative;

    transition:var(--transition);

}

.main-navbar.scrolled .nav-link{

    color:var(--dark);

}


/*=========================================================
    ANIMATED UNDERLINE
=========================================================*/

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:5px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

    transform:translateX(-50%);

}

.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after{

    width:70%;

}

.navbar-nav .nav-link:hover{

    color:var(--secondary);

}


/*=========================================================
    APPLY / PAY FEES BUTTON
=========================================================*/

.nav-btn{

    background:var(--secondary);

    color:var(--dark);

    font-weight:700;

    padding:12px 24px;

    border-radius:50px;

    transition:var(--transition);

    margin-left:15px;

}

.nav-btn:hover{

    background:#ffca2c;

    color:var(--dark);

    transform:translateY(-3px);

}


/*=========================================================
    MOBILE TOGGLER
=========================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none !important;

}

.navbar-toggler i{

    font-size:34px;

    color:var(--white);

}

.main-navbar.scrolled .navbar-toggler i{

    color:var(--dark);

}


/*=========================================================
    MOBILE MENU
=========================================================*/

@media(max-width:991px){

.main-navbar{

    top:0;

    background:#ffffff;

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

}

.brand-text h4{

    color:var(--dark);

    font-size:18px;

}

.brand-text small{

    color:var(--text);

}

.navbar-nav{

    margin-top:20px;

    gap:0;

}

.navbar-nav .nav-link{

    color:var(--dark);

    padding:14px 0;

    border-bottom:1px solid rgba(0,0,0,.05);

}

.nav-btn{

    display:block;

    margin:20px 0 10px;

    text-align:center;

}

.top-bar{

    display:none;

}

}


/*=========================================================
    DROPDOWN MENU
=========================================================*/

.dropdown-menu{

    border:none;

    border-radius:18px;

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

    padding:10px;

}

.dropdown-item{

    border-radius:10px;

    padding:10px 15px;

    transition:var(--transition);

}

.dropdown-item:hover{

    background:var(--primary);

    color:#fff;

}


/*=========================================================
    STICKY NAVBAR ANIMATION
=========================================================*/

@keyframes slideDown{

    from{

        transform:translateY(-100%);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

.main-navbar.scrolled{

    animation:slideDown .4s ease;

}