@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');

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

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0.8rem 7%;

    background:
    rgba(0,0,0,0.95);

    border-bottom:
    1px solid #333;

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:9999;

    backdrop-filter:blur(10px);
}

/* ===================================== */
/* LOGO */
/* ===================================== */

.navbar .logo img{
    height:70px;
    width:auto;
}

/* ===================================== */
/* MENU WRAPPER */
/* ===================================== */

.nav-menu-wrapper{
    display:flex;

    align-items:center;

    gap:2rem;
}

/* ===================================== */
/* DESKTOP MENU */
/* ===================================== */

.desktop-only{
    display:flex;

    align-items:center;

    gap:2rem;

    list-style:none;
}

.desktop-only li{
    list-style:none;
}

.desktop-only a{
    color:#fff;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    position:relative;

    transition:0.3s;
}

.desktop-only a:hover{
    color:var(--primary);
}

/* LINE */

.desktop-only a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--primary);

    transition:0.3s;
}

.desktop-only a:hover::after{
    width:100%;
}

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

.menu-icon{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    width:30px;
    height:22px;

    cursor:pointer;
}

.menu-icon .bar{

    width:100%;
    height:3px;

    background:#fff;

    border-radius:999px;

    transition:0.3s;
}

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

.mobile-only{
    display:none;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:768px){

    .navbar{
        padding:0.7rem 5%;
    }

    .navbar .logo img{
        height:52px;
    }

    .desktop-only{
        display:none !important;
    }

    .mobile-only{
        display:block;
    }
}