/* HEADER */

.navbar{
background:black;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
height:var(--header-height);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
box-sizing:border-box;
z-index:1000;
}

nav{
margin-left:auto;
display:flex;
align-items:center;
}

/* LOGO */

.logo-left{
display:flex;
align-items:center;
gap:24px;
}

.homeimg{
height:50px;
width:auto;
margin-right: 14px;
}

.home{
color:white;
text-decoration:none;
font-weight:500;
}

.home:hover{
text-decoration:underline;
}

/* NAV */

/* HAMBURGER */

.menu-open{
background:none;
border:none;
cursor:pointer;
display:block;
}

.xclose{
background:none;
border:none;
cursor:pointer;
}

/* MOBILE MENU */

.nav-links{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:black;

display:none;
flex-direction:column;
justify-content:center;
align-items:center;
gap:30px;

list-style:none;
margin:0;
padding:0;

z-index:9999;
}

/* OPEN MENU */

.nav-links.open{
display:flex;
}

/* MENU LINKS */

.nav-links a{
color:#d1d5db;
text-decoration:none;
font-size:15px;
font-weight:500;
font-family:Inter, sans-serif;
}

/* LOGIN BUTTON */

.nav-login-btn{
background:white;
color:#111 !important;
padding:10px 28px;
border-radius:999px;
font-weight:600;
font-size:14px;
font-family:Inter, sans-serif;

display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
}

#loginLink{
display:flex;
align-items:center;
}

.nav-login-btn:hover{
background:var(--gold);
color:black;
}

/* CLOSE BUTTON POSITION */

.menu-close{
position:absolute;
top:30px;
right:30px;
}

/* DESKTOP */
.hide-desktop{
  display:block;
}

@media (min-width:1024px){
  .hide-desktop{
    display:none;
  }
}

@media (min-width:1024px){

.menu-open{
display:none;
}

.nav-links{
position:static;
width:auto;
height:auto;

display:flex;
flex-direction:row;
align-items:center;
gap:30px;

background:none;

opacity:1;
pointer-events:auto;
transform:none;
}

.menu-close{
display:none;
}

.nav-links li{
margin:0;
}

.nav-links a{
font-size:0.95rem;
color:white;
}

.nav-links a:hover{
color:#FFD700;
}

}