.nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    z-index:1000;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);

}

.nav .container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo a{

    color:white;

    font-size:2rem;

    font-weight:700;

}

.navLinks{

    display:flex;

    gap:45px;

}

.navLinks a{

    color:white;

    font-weight:500;

    transition:.3s;

}

.navLinks a:hover{

    color:var(--primary);

}

.mobileOnly{

    display:none;

}

/* Dropdown */

.dropdown{

    position:relative;

}

.dropdownContent{

    position:absolute;

    top:100%;
    left:0;

    min-width:220px;

    background:rgba(34,34,34,.95);

    backdrop-filter:blur(10px);

    border-radius:8px;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.3s;

    overflow:hidden;

}

.dropdownContent a{

    display:block;

    padding:14px 20px;

    white-space:nowrap;

}

.dropdownContent a:hover{

    background:rgba(255,255,255,.08);

}

.dropdown:hover .dropdownContent{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ==========================
   Hamburger
========================== */

.hamburger{

    display:none;

    width:34px;
    height:30px;

    cursor:pointer;

    z-index:1002;

}

.hamburger span{

    display:block;

    width:100%;
    height: 3px;

    margin:3px 0;

    background:white;

    transition:.3s;

}

/* Overlay */

.navOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

.navOverlay.active{

    opacity:1;

    visibility:visible;

}