/* CSS Document */

.site-header{
    position:sticky;
    top:0;
    z-index:40;
    background:#111111;
        
}
  

.nav-bar{
    height:var(--nav-height);
    font-size:16px;
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:100%;
    margin:0 auto;
    padding:0 1rem;

  }


  
.nav-main-list{
    list-style:none;
    display:flex;
    gap:1.5rem;
      white-space: nowrap;    /* Prevent text wrapping */  
  }


.nav-main a{
  text-decoration:none;
  color:var(--fg);
  font-weight:800;

  transition: color 0.5s, text-shadow 0.2s;
  margin-left:1em;
}



.nav-main a:hover{
  color:var(--accent);
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 15px rgba(255, 255, 255, 0.2);
  
}


  .nav-bar-free{
background-color:#FF0F13;
color:#FFF;
border-radius:3px;
padding:3px;
padding-right:6px;
padding-left:6px;
margin-right:5px;
}


.nav-toggle{
  display:none;
  background:#000;
  border:none;
  color:var(--fg);
  cursor:pointer;
  height:30px;
  width:30px;
}


/*MOBILE */
@media (max-width:768px){
  
  .nav-main{
  display:none;
  position: absolute;
  left:0;
  width:100%;
  top:var(--nav-height);
  margin:0;
  }
  .nav-toggle{
    display:block;
  }
  .nav-main-list{
    width:100%;
    flex-direction:column;
    background:#000;
    position:absolute;
    border-radius:8px;
    box-shadow:var(--shadow);
        gap:0;
  }
  
  .nav-main-list li{
  padding:1em;
  margin-top:0;
  margin-bottom:0;
  }
   .nav-main-list li:hover{
       background:#666;
   }


  
    /* Show when toggled */
  .nav-main.is-open {
    display: block;
  }


}

    


/* HAMBURGER ICON */
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #FFF;
  position: relative;
  transition: 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}