body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: #0b0b0b;
  color: #fff;
}




/* 1
/* HEADER NAVBAR — Centered Luxury Layout */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px; /* increased height for better balance */
  background: rgba(11, 11, 11, 0.97); /* deep matte black tone */
  display: flex;
  justify-content: center; /* centers logo horizontally */
  align-items: center; /* centers logo vertically */
  padding: 16px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  transition: background 0.4s ease, height 0.3s ease;
}

/* LOGO STYLE — glowing gold balance */
.nav-logo {
  width: 150px; /* slightly larger logo for better presence */
  cursor: pointer;
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 6px rgba(205, 168, 115, 0.35));
}

/* HOVER EFFECT — glowing prosperity aura */
.nav-logo:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(205, 168, 115, 0.9))
          drop-shadow(0 0 25px rgba(205, 168, 115, 0.5));
}

/* CLICK FEEDBACK — active pulse */
.nav-logo:active {
  transform: scale(0.96);
  filter: drop-shadow(0 0 10px rgba(205, 168, 115, 0.6));
}

/* MOBILE RESPONSIVE SIZES */
@media (max-width: 1024px) {
  .nav-logo {
    width: 130px;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: 80px;
    padding: 12px 0;
  }
  .nav-logo {
    width: 110px;
  }
}

@media (max-width: 480px) {
  .navbar {
    height: 70px;
    padding: 10px 0;
  }
  .nav-logo {
    width: 95px;
  }
}


/* 1






/* HERO */
.hero {
  height: 100vh;
  background: url('shop.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 3rem; color: #cda873; font-family: "Montserrat", sans-serif; }
.tagline { font-size: 1.3rem; color: #fff; }
.cities { color: #cda873; margin-bottom: 25px; }
.btn {
  padding: 12px 26px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: 0.3s;
}
.btn.gold { background: #cda873; color: #0b0b0b; }
.btn.outline { border: 2px solid #cda873; color: #cda873; }
.btn.gold:hover { background: #d8b887; }
.btn.outline:hover { background: #cda873; color: #0b0b0b; }

/* SERVICES */
.services {
  background: #f0f0f0;
  color: #000;
  text-align: center;
  padding: 80px 20px;
}
.services h2 { color: #0b0b0b; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
  margin-top: 40px;
}
.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: 0.3s;
}
.card:hover { transform: translateY(-6px); }
.card h3 { color: #cda873; }

/* WHY */
.why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #2a2a2a;
  padding: 80px 20px;
}
.why-left { flex: 1; }
.why-left img { width: 100%; border-radius: 6px; }
.why-right { flex: 1; padding: 20px 40px; }
.why-right h2 { color: #cda873; }
.why-right ul { list-style: none; padding: 0; }
.why-right li::before { content: "✔ "; color: #cda873; }

/* BOOKING */
.booking {
  background: #f0f0f0;
  color: #000;
  text-align: center;
  padding: 80px 20px;
}
.booking form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booking input, .booking select, .booking textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* LOCATION */
.location {
  background: #0d1b2a;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}
.map-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.map {
  width: 400px;
  height: 300px;
  border: none;
  border-radius: 6px;
}
.contact { margin-top: 20px; color: #cda873; }

/* REVIEWS */
.reviews {
  background: #2a2a2a;
  text-align: center;
  padding: 80px 20px;
}
.reviews h2 { color: #cda873; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
  margin-top: 30px;
}
.review-grid blockquote {
  background: #1a1a1a;
  padding: 20px;
  border-left: 4px solid #0f3d2e;
  color: #f0f0f0;
  border-radius: 6px;
}

/* ABOUT */
.about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: linear-gradient(90deg,#000,#2a2a2a);
  padding: 80px 20px;
}
.about img {
  width: 300px;
  border-radius: 6px;
  margin-right: 40px;
}
.about-text h2 { color: #cda873; }

/* FOOTER */
footer {
  text-align: center;
  background: #000;
  color: #aaa;
  padding: 20px;
  font-size: 0.9rem;
}
.hidden-code {
  opacity: 0.15;
  font-size: 0.8rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .navbar { flex-direction: column; }
  .why, .about, .map-section { flex-direction: column; }
  .hero h1 { font-size: 2rem; }
  .hero-buttons { flex-direction: column; gap: 10px; }
}