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

.navbar{

    position:sticky;

    top:0;

    z-index:999;

    width:100%;

    background:#ffffff;

    border-bottom:1px solid var(--border);

}

/* ==========================================================
   CONTAINER
========================================================== */

.nav-container{

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:2.5rem;

    height:90px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo img{

    height:70px;

    display:block;

}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.nav-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2rem;

}

.nav-links>a,

.dropdown-toggle{

    display:flex;

    align-items:center;

    gap:.45rem;

    color:var(--heading);

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

    background:none;

    border:none;

    cursor:pointer;

    padding:.5rem 0;

}

.nav-links>a:hover,

.dropdown-toggle:hover,

.nav-links>a.active{

    color:var(--primary);

}

/* ==========================================================
   DESKTOP DROPDOWNS
========================================================== */

.nav-dropdown{

    position:relative;

}

.dropdown-toggle i{

    font-size:.75rem;

}

.dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:230px;

    margin-top:.75rem;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:10px;

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

    overflow:hidden;

    z-index:1000;

}

.nav-dropdown.show .dropdown-menu{

    display:block;

}

.dropdown-menu a{

    display:block;

    padding:.9rem 1rem;

    color:var(--text);

    text-decoration:none;

    font-weight:500;

}

.dropdown-menu a:hover{

    background:#f8f8f8;

    color:var(--primary);

}

/* ==========================================================
   ACTION
========================================================== */

.nav-actions{

    display:flex;

    align-items:center;

}

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

.mobile-menu-btn{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:1.3rem;

}

/* ==========================================================
   MOBILE OVERLAY
========================================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   MOBILE DRAWER
========================================================== */

.mobile-drawer{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    max-width:100%;

    height:100vh;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    padding:1.75rem;

    transition:.35s;

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

    z-index:999;

}

.mobile-drawer.active{

    right:0;

}

/* ==========================================================
   MOBILE HEADER
========================================================== */

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:2rem;

}

.mobile-header img{

    height:60px;

}

.mobile-close-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

.mobile-nav{

    flex:1;

    display:flex;

    flex-direction:column;

}

.mobile-nav>a,

.mobile-dropdown-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:1rem 0;

    background:none;

    border:none;

    text-decoration:none;

    color:var(--heading);

    font-weight:600;

    cursor:pointer;

}

.mobile-dropdown-menu{

    display:none;

    margin-left:1rem;

    padding-left:1rem;

    border-left:2px solid #eeeeee;

}

.mobile-dropdown.open .mobile-dropdown-menu{

    display:block;

}

.mobile-dropdown-menu a{

    display:block;

    padding:.75rem 0;

    color:var(--text);

    text-decoration:none;

}

.mobile-dropdown-menu a:hover{

    color:var(--primary);

}

/* ==========================================================
   MOBILE ACTION
========================================================== */

.mobile-action{

    padding-top:1.5rem;

    border-top:1px solid var(--border);

}

.mobile-action .btn{

    width:100%;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .nav-container{

        grid-template-columns:auto auto;

    }

    .nav-links,

    .nav-actions{

        display:none;

    }

    .mobile-menu-btn{

        display:flex;

        justify-content:center;

        align-items:center;

        justify-self:end;

    }

}

@media (max-width:576px){

    .nav-container{

        height:80px;

    }

    .logo img{

        height:58px;

    }

    .mobile-drawer{

        width:100%;

    }

}