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

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:75px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 7%;

    background:black;

    border-bottom:2px solid #d80df3;

    z-index:9999;
}

.logo{

    text-decoration:none;
    color:white;

    font-size:28px;
    font-weight:bold;

}

.nav-links{

    display:flex;
    list-style:none;

    gap:40px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    color:white;

    font-size:16px;

    transition:.3s;

}

.nav-links a:hover{

    color:#d80df3;

}


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

.menu-toggle{

    display:none;

    flex-direction:column;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;
    height:3px;

    background:white;

    margin:4px 0;

    transition:.3s;

}


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

@media (max-width:768px){

    .menu-toggle{

        display:flex;

    }

    .nav-links{

        position:absolute;

        top:75px;

        left:-100%;

        width:260px;

        height:100vh;

        background:black;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        padding-top:50px;

        gap:35px;

        transition:.35s;

        border-right:2px solid #d80df3;

    }

    .nav-links.active{

        left:0;

    }

    .nav-links a{

        font-size:18px;

    }

}