html { scroll-behavior: smooth; }
body { font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; }

.hero-section {
  background-image: url('../images/bg.png');
  background-size: cover;
  background-position: center;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.22),
        rgba(0, 0, 0, 0.45)
    );
}
.nav-link { position: relative; padding: .75rem 0; transition: color .25s ease; }
.nav-link::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: .35rem;
  height: 2px;
  width: 0;
  background: #c7a258;
  transition: width .25s ease;
}
.nav-link:hover, .nav-link.active { color: #e3c786; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

#siteHeader.scrolled > div > div:first-child {
  background: rgba(2, 12, 20, .92);
  border-color: rgba(255,255,255,.08);
  margin-top: .5rem;
}

.mobile-menu { max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; }
.mobile-menu.open { max-height: 320px; opacity: 1; }
.mobile-nav-link { padding: .9rem .25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav-link:last-child { border-bottom: 0; }

.menu-icon { position: relative; transition: background .2s ease; }
.menu-icon::before, .menu-icon::after {
  content: '';
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
#menuButton.active .menu-icon { background: transparent; }
#menuButton.active .menu-icon::before { top: 0; transform: rotate(45deg); }
#menuButton.active .menu-icon::after { top: 0; transform: rotate(-45deg); }

.scroll-indicator {
  display: block;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  position: relative;
}
.scroll-indicator::after {
  content: '';
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  animation: wheel 1.7s infinite ease-in-out;
}
@keyframes wheel { 0% {opacity:0; transform:translate(-50%,0)} 30% {opacity:1} 100% {opacity:0; transform:translate(-50%,14px)} }

.about-copy p { position: relative; }

.gallery-card {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.1);
  background: #0f172a;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .5s ease;
}
.gallery-card:hover img { transform: scale(1.045); filter: brightness(1.08); }
.gallerySwiper .swiper-slide { width: min(82vw, 520px); }
.swiper-pagination-bullet { background: rgba(255,255,255,.45) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #c7a258 !important; width: 22px !important; border-radius: 999px !important; }
.swiper-control {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.4rem;
  transition: all .25s ease;
}
.swiper-control:hover { background: #c7a258; color: #071521; border-color: #c7a258; }

.form-field { display: block; }
.form-field > span { display: block; margin-bottom: .65rem; font-size: .9rem; font-weight: 600; color: #334155; }
.form-field input, .form-field textarea {
  width: 100%;
  border: 1px solid #dbe3ea;
  border-radius: .9rem;
  background: #f8fafc;
  padding: .95rem 1rem;
  color: #0f172a;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field input:focus, .form-field textarea:focus {
  border-color: #1a6b91;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26,107,145,.10);
}
.form-field textarea { resize: vertical; min-height: 150px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(2, 8, 16, .92);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 86vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .hero-section { background-position: 58% center; }
}