/* =========================
   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 */


@media(max-width:1000px){


nav{


    flex-direction:column;

    gap:20px;


}




nav ul{


    flex-wrap:wrap;

    justify-content:center;

    gap:18px;


}



}





@media(max-width:600px){


.logo-img{


    width:150px;


}



nav ul li a{


    font-size:14px;


}


}