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

.header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:var(--z-header);

    transition:var(--transition-normal);

}

.header.scrolled{

    background:rgba(3,7,18,.72);

    backdrop-filter:blur(22px);

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

}

.navbar{

    height:var(--navbar-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:1.7rem;

    font-weight:800;

    font-family:var(--font-heading);

}

.logo span{

    color:var(--color-primary);

}

.nav-links{

    display:flex;

    align-items:center;

    gap:2.5rem;

}

.nav-links.is-open{

    display:flex;

}

.nav-link{

    position:relative;

    color:var(--text-secondary);

    font-weight:500;

}

.nav-link:hover{

    color:var(--text-primary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

.nav-link.active{

    color:white;

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:1rem;

}


.resume-btn{

    padding:.85rem 1.5rem;

}

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    width:28px;

    height:2px;

    background:white;

    transition:.35s;

}

.scroll-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:transparent;

}

.scroll-progress-bar{

    width:0;

    height:100%;

    background:var(--gradient-primary);

}