/* Navbar base */
        #nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          height: 60px;
          background: rgba(0,0,0,0);
          transition: top 0.3s, background 0.3s, box-shadow 0.3s;
          position: fixed;
          width: 100%;
          top: 0px;
          left:0px;
          z-index: 1000;
        }

#nav ul li a {
  position: relative;
  padding: 0.4em 0;

  letter-spacing: 0.03em;
}

#nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;

  width: 0;
  height: 2px;

  background: linear-gradient(
    to right,
    #ffb400,
    #ffd36a
  );

  transition: all 0.3s ease;

  transform: translateX(-50%);
}

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


#nav ul li a:hover {
  color: #ffb400; /* golden accent */
}

/* Hidden when scrolling down */
#nav.hidden {
  top: -70px;
}

/* Background when scrolling up */
#nav.scrolled {
  background: rgba(20,20,20,0.95); /* dark industrial background */
  box-shadow: 0 4px 12px rgba(255,180,0,0.15); /* subtle golden glow */
}


 /* Navbar base */


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

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

        /* Logo */
        #nav .logo {
          color: #ffb400;
          font-weight: 700;
          font-size: 1.2rem;
          max-width: 180px;
        }
        #nav .logo img{
          width: 200px;
        }

        /* Nav links */
        #nav ul {
          list-style: none;
          display: flex;
          gap: 30px;
          margin: 0;
          padding: 0;
          transition: right 0.3s ease, opacity 0.3s ease;
        }

        #nav ul li a {
          text-decoration: none;
          color: #ccc;
          font-weight: 600;
          transition: color 0.3s;
        }

        #nav ul li a:hover {
          color: #ffb400;
        }

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

        .hamburger span {
          width: 25px;
          height: 3px;
          background: #ccc;
          border-radius: 2px;
          transition: all 0.3s ease;
        }

        .hamburger.open span:nth-child(1) {
          transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.open span:nth-child(2) {
          opacity: 0;
        }

        .hamburger.open span:nth-child(3) {
          transform: rotate(-45deg) translate(5px, -5px);
        }

        /* Mobile menu */
        @media (max-width: 990px) {
          #nav ul {
            position: fixed;
            top: 60px;
            left: 0px;
            
            flex-direction: column;
            background: rgba(20,20,20,0.95);
            width: 200px;
            padding: 20px;
            gap: 15px;
            height: calc(100vh - 60px);
            opacity: 0;
          }

          #nav ul.active {
            right: 0;
            opacity: 1;
            left:auto;
          }

          .hamburger {
            display: flex;
          }
        }