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

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
    height:80px;
    background:black;
    color:white;

    position:relative;
    z-index:1001;
}

/* menu desktop */

.menu-items ul{
    display:flex;
    gap:30px;
    list-style:none;
}

.menu-items a{
    text-decoration:none;
    color:white;
}

/* ================= HAMBURGER ================= */

.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.hamburger span{
    width:25px;
    height:3px;
    background:white;
    transition:0.3s;
}

/* ================= MOBILE NAV ================= */

@media (max-width:768px){

    .hamburger{
        display:flex;
    }

    .menu-items{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:black;

        transform:translateY(-120%);
        transition:transform 0.35s ease;

        z-index:1000;
    }

    .menu-items ul{
        flex-direction:column;
        text-align:center;
        gap:25px;
        padding:30px 0;
    }

    .menu-items.active{
        transform:translateY(0);
    }

}

/* ================= HAMBURGER → X ================= */

.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

/* ================= LOCK SCROLL ================= */

body.menu-open{
    overflow:hidden;
}