/* ==========================
   HEADER
========================== */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(15,15,15,0.7);
  backdrop-filter:blur(8px);
  z-index:1000;
  padding:18px 60px;
  transition:.4s ease;
}

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:70px;
}

/* LOGO */
.logo img{
  width:95px;
  transition:.4s ease;
}

/* ==========================
   NAV LINKS
========================== */

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}

.nav-links a,
.mobile-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--light);
  font-size:15px;
  letter-spacing:2px;
  text-decoration:none;
  position:relative;
  transition:.3s ease;
}

.nav-links a:hover,
.nav-links a.active,
.mobile-toggle:hover{
  color:var(--gold);
}

/* Underline */

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after{
  width:100%;
}

/* ==========================
   DROPDOWN
========================== */

.nav-item{
  position:relative;
}

.dropdown{
  position:absolute;
  top:40px;
  left:0;
  background:#111;
  min-width:200px;
  border-radius:8px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.3s ease;
}

.dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  font-size:14px;
  color:#fff;
}

.dropdown a:hover{
  background:var(--gold);
  color:#000;
}

/* Desktop Hover */

@media(min-width:901px){
  .nav-item:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

/* ==========================
   HAMBURGER
========================== */

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

.hamburger span{
  width:28px;
  height:3px;
  background:var(--muted);
  border-radius:2px;
  transition:.3s ease;
}

/* Hamburger Animation */

.hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}

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

@media(max-width:900px){

  .hamburger{
    display:flex;
  }

  .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:270px;
    height:100vh;
    background:#111;
    flex-direction:column;
    padding:100px 25px;
    gap:28px;
    transition:.4s ease;
  }

  .nav-links.active{
    right:0;
  }

  .nav-links a,
  .mobile-toggle{
    justify-content:center;
    font-size:18px;
  }

  /* Mobile Dropdown */

  .dropdown{
    position:relative;
    top:0;
    opacity:1;
    visibility:hidden;
    max-height:0;
    transform:none;
    overflow:hidden;
    background:#1a1a1a;
    transition:max-height .4s ease;
  }

  .dropdown.active{
    visibility:visible;
    max-height:300px;
  }

  /* Chevron rotate */

 /* ===============================
   CHEVRON ICON
================================ */

.mobile-toggle{
  justify-content:space-between;
}

.chevron{
  font-size:14px;
  transition:transform .3s ease;
  margin-left:6px;
}

/* Rotate when active */

.mobile-toggle.active .chevron{
  transform:rotate(180deg);
}

  /* Header spacing */

  .header{
    padding:14px 24px;
  }

  .logo img{
    width:80px;
  }

}
@media(max-width:900px){

  .nav-item{
    width:100%;
  }

  .mobile-toggle{
    width:100%;
    justify-content:space-between;
  }

  .dropdown{
    width:100%;
  }

}
.dropdown{
  transition:max-height .4s ease, opacity .3s ease;
}
@media(max-width:900px){

  .dropdown{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
  }

  .dropdown.active{
    max-height:300px;
  }

}
/* CONTACT ICONS */
.footer-contact p {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 12px;
  color: #bfbfbf;
}

.footer-contact i {
  color: var(--gold);
  font-size: 15px;
  min-width: 18px;
}

/* Hover subtle glow */
.footer-contact p:hover i {
  text-shadow: 0 0 6px rgba(201,164,106,0.6);
}

/* Mobile center alignment */
@media(max-width: 900px) {
  .footer-contact p {
    justify-content: center;
  }
}