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


header{
    width:100%;
    background:white;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 5px 20px rgba(0,7,68,.08);
}

nav{
    margin:auto;
    padding:18px 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO */

.logo-img{
    width:180px;
    height:auto;
}

.logo{
    display:flex;
    align-items:center;
}

/* LINKS */

nav ul{
    list-style:none;
    display:flex;
    align-items:center;
    gap:28px;
}

nav ul li a{
    text-decoration:none;
    color:var(--primary);
    font-size:15px;
    font-weight:600;
    position:relative;
    transition:.3s;
}

.nav-link.active{
    color:var(--accent);
}

/* HOVER LINE */

nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:var(--accent);
    border-radius:10px;
    transition:.3s;
}

.nav-link.active::after{
    width:100%;
}

nav ul li a:hover{
    color:var(--accent);
}

nav ul li a:hover::after{
    width:100%;
}

/* ACTIVE PAGE */

nav ul li a.active{
    color:var(--accent);
}

nav ul li a.active::after{
    width:100%;
}


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


.menu-toggle{

    display:none;

    font-size:28px;

    color:var(--primary);

    cursor:pointer;

}



/* TABLET + MOBILE */

@media(max-width:900px){


nav{

    padding:18px 5%;

}



.logo-img{

    width:150px;

}



.menu-toggle{

    display:block;

}



.nav-menu{


    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    gap:0;

    padding:20px 0;

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


    transform:translateY(-150%);

    opacity:0;

    pointer-events:none;

    transition:.4s;


}



.nav-menu li{


    width:100%;

    text-align:center;

    padding:15px 0;


}



.nav-menu li a{


    font-size:16px;


}



/* OPEN MENU */

.nav-menu.active{


    transform:translateY(0);

    opacity:1;

    pointer-events:auto;


}


}