header{
    background: var(--color-grey75);
}
.nav-container{
    display         : flex;
    align-items     : center;
    justify-content : space-between;
}
.nav-logo > a > svg{
    width   : 3rem;
    fill    : var(--color-brand-1);
    transition      : all 300ms ease-in;
}
.nav-logo > a > svg:hover{
    fill    : var(--color-white);
}

/*-----------------*/
/* NAVIGASI MOBILE */
/*-----------------*/

    .nav-mobile-toggle{
        border      : 0;
        cursor      : pointer;
        display     : block;
        position    : absolute;
        right       : 1rem;
        z-index     : 999999;
    }
    .nav-mobile-toggle[aria-expanded="true"]{
        position: fixed;
    }
    
@media(width < 500px){
    .nav-mobile-toggle div{
        transition: all 0.3s ease-out;
    }
}


.line{
    width               : 2rem;
    height              : 0.35rem;
    background-color    : var(--color-brand-1);
    margin              : 0.2rem;
}
.nav-primary{
    display         : flex;
    align-items     : center;
    gap             : clamp(var(--font-size-700), 5vw, var(--font-size-1000));
}
.nav-link > a{
    color: var(--color-brand-1);
}
.nav-link > a:hover{
    color: var(--color-brand-3);
}