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

#nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:60px;
  padding:0 20px;
  padding-right: 50px;

  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  background:transparent;
  transition:
    top .3s,
    background .3s,
    box-shadow .3s;
}

/* states */

#nav.scrolled {
  background:rgba(20,20,20,.95);
  box-shadow:0 4px 12px rgba(255,180,0,.15);
}

#nav.hidden {
  top:-70px;
}

/* logo */

#nav .logo img {
  width:200px;
}

/* links */

#nav ul {
  list-style:none;
  display:flex;
  gap:30px;
}

#nav ul li a {
  color:#ccc;
  font-weight:600;
  position:relative;
}

#nav ul li a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:2px;
  background:linear-gradient(to right,#ffb400,#ffd36a);
  transform:translateX(-50%);
  transition:.3s;
}

#nav ul li a:hover::after,
#nav ul li a.active::after {
  width:100%;
}

/* hamburger */

.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span {
  width:25px;
  height:3px;
  background:#ccc;
  transition:.3s;
}

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

@media (max-width:990px) {

  .hamburger {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    width:100vw;
    height:64px;

    justify-content:center;
    align-items:center;

    background:rgba(20,20,20,.97);
    border-top:1px solid rgba(255,180,0,.15);
    z-index:2500;
  }

  body {
    padding-bottom:64px;
  }

  #nav ul {
    position:fixed;
    left:0;
    right:0;
    bottom:64px;

    height:min(70dvh,420px);

    flex-direction:column;
    justify-content:center;

    background:rgba(15,15,15,.97);
    padding:30px;

    transform:translateY(100%);
    transition:.4s;
  }

  #nav ul.active {
    transform:translateY(0);
  }

}