/* GENERAL */
body {  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: url('assets/bgg.jpg') no-repeat center center fixed;
  background-size: cover;
  color:color: #fff; /* white text */
}
 }
h1,h2,h3,h4 {color: #d4af37; /* gold headings */ }
a { text-decoration:none; }

section {
  background: rgba(255,255,255,0.60); /* very light box with transparency */
  border-radius: 15px;
  padding: 40px;
  margin: 20px auto;
}


/* HEADER */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  gap: 690px; /* controls spacing between logo & nav */
  z-index: 1000;
  background: rgba(15,23,36,0.7);
  backdrop-filter: blur(8px);
}

.logo {
  font-size: 26px;
  color: #d4af37;

  font-weight: 700;
}

.logo span {
  color: #d4af37;
}

nav {
  display: flex;
  gap: 20px; /* spacing between nav links */
}

nav a {
  color: #fff;
  font-weight: 500;
}

nav a:hover {
  color: #d4af37;
}



/* HERO */
.hero { height:100vh; background:url('assets/hotel-hero.jpg') no-repeat center/cover; display:flex; justify-content:center; align-items:center; text-align:center; position:relative; }
.hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.hero-content { position:relative; color:#fff; z-index:1; }
.hero-content h1 { font-size:48px; color:#d4af37; }
.hero-content p { margin:20px 0; }
.cta { background:#d4af37; color:#111; padding:12px 28px; border-radius:25px; font-weight:bold; }

/* SECTIONS */
section { padding:80px 20px; max-width:1200px; margin:auto; }
h2 { text-align:center; margin-bottom:20px; }
.lead {
  text-align: center;
  max-width: 800px;
  margin: 10px auto;  /* center horizontally */
}

/* FACILITIES */
.amenities { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:30px; }
.amenity { background:#fff; padding:20px; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.1); text-align:center; }
.amenity i { font-size:32px; color:#d4af37; margin-bottom:10px; }

/* ROOMS */
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px; }
.room-card { background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,0.1); transition:.3s; cursor:pointer; }
.room-card img { width:100%; height:200px; object-fit:cover; }
.room-card h3 { margin:10px 0; }
.room-card p { padding:0 15px 15px; color:#555; }
.room-card:hover { transform:translateY(-5px); }
.room-card,
.menu-card,
.amenity {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
}


/* RESTAURANT */
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px; }
.room-card { background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,0.1); transition:.3s; cursor:pointer; }
.room-card img { width:100%; height:200px; object-fit:cover; }
.room-card h3 { margin:10px 0; }
.room-card p { padding:0 15px 15px; color:#555; }
.room-card:hover { transform:translateY(-5px); } 

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.menu-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: .3s;
}

.menu-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}



/* BOOKING FORM */
.booking-form { display:grid; gap:12px; max-width:400px; margin:auto; background:#fff; padding:25px; border-radius:15px; box-shadow:0 5px 25px rgba(0,0,0,0.15); }
.booking-form input, .booking-form select, .booking-form button { padding:10px; border-radius:8px; border:1px solid #ccc; }
.booking-form button { background:#1c1c2b; color:#fff; cursor:pointer; }
.booking-form button:hover { background:#d4af37; color:#111; }

/* CONTACT */
.contact-info { text-align:center; color:#444; }
.contact-info a { color:#d4af37; }

/* FOOTER */
footer { background:#1c1c2b; color:#fff; text-align:center; padding:20px; }

/* WHATSAPP FLOAT */
.whatsapp-float { position:fixed; bottom:20px; right:20px; background:#25d366; color:#fff; padding:15px; border-radius:50%; font-size:26px; }

/* IMAGE CLICK + ZOOM */
img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.05); /* small zoom on hover */
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.lightbox:target {
  display: flex;
}


/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}


<!-- Lightbox -->
<div id="lightbox" class="lightbox">
  <span class="close">&times;</span>
  <img id="lightbox-img" src="" alt="">
</div>

<!-- Lightbox Script -->
<script>
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  const closeBtn = document.querySelector('.lightbox .close');

  document.querySelectorAll('.menu-card img').forEach(img => {
    img.addEventListener('click', () => {
      lightbox.style.display = 'flex';
      lightboxImg.src = img.src;
    });
  });

  closeBtn.addEventListener('click', () => {
    lightbox.style.display = 'none';
  });

  lightbox.addEventListener('click', (e) => {
    if (e.target !== lightboxImg) {
      lightbox.style.display = 'none';
    }
  });


</script>

.video-row {
  display: flex;
  justify-content: center;  /* center videos in the box */
  gap: 20px;                /* spacing between videos */
  flex-wrap: wrap;          /* stack on small screens */
  margin-top: 30px;
}

.video-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.video-row {
  display: flex;
  justify-content: center;  /* keep centered */
  gap: 20px;                /* spacing */
  flex-wrap: nowrap;        /* ❌ prevent wrapping */
  margin-top: 30px;
  overflow-x: auto;         /* if screen is small → allow horizontal scroll */
}

.video-card video {
  width: 250px;
  height: 450px;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}