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


.navbar {

    width:100%;

    background:white;

    padding:20px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 2px 10px #ddd;

    position:relative;

    z-index:100;

}



.logo {

    font-size:26px;

    font-weight:bold;

}



.logo a {

    text-decoration:none;

    color:#222;

}



.nav-links {

    display:flex;

    gap:20px;

}



.nav-links a {

    text-decoration:none;

    color:#333;

    margin-left:20px;

}



.menu-toggle {

    display:none;

    cursor:pointer;

    background:#222;

    color:white;

    border:none;

    padding:10px 15px;

    border-radius:10px;

    font-size:22px;

}





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


@media(max-width:700px){


    .navbar {

        flex-direction:row;

        justify-content:space-between;

        padding:20px;

    }



    .menu-toggle {

        display:block;

    }



    .nav-links {


        display:none;

        position:absolute;

        top:70px;

        left:0;

        width:100%;

        background:white;

        padding:20px;


        flex-direction:column;

        gap:15px;


        box-shadow:0 5px 15px rgba(0,0,0,0.1);

    }



    .nav-links a {

        margin:0;

        padding:10px;

        display:block;

    }



    .nav-links.active {

        display:flex;

    }


}