body {
  margin:0;
  font-family: 'Inter', sans-serif;
  background:#f9fafb;
  color:#0f172a;
  line-height:1.6;
}
h1,h2,h3 {font-family:'Playfair Display', serif;}
a {text-decoration:none;color:inherit;}
.container {max-width:1000px;margin:auto;padding:0 20px;}
header {background:#fff;border-bottom:1px solid #e5e7eb;}
.nav {display:flex;justify-content:space-between;align-items:center;padding:12px 0;}
.logo {font-size:1.2rem;font-weight:700;}
nav a {margin-left:20px;font-weight:600;color:#334155;}
nav a.cta {background:#d97706;color:#fff;padding:8px 14px;border-radius:8px;}
nav a.active {color:#d97706;}

/* Hero */
.hero {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:80vh;
  color:white;
  text-align:center;
  background-size:cover;
  background-position:center;
}
.hero::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.4);
}
.hero-text {position:relative; z-index:1; max-width:700px;}
.hero-text h2 {font-size:3rem; margin-bottom:10px;}
.hero-text p {font-size:1.2rem;}
.hero-text .btn {
  background:#d97706;
  color:white;
  padding:12px 24px;
  font-size:1.1rem;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
}

/* Highlights */
.highlights {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:30px 0;}
.highlights div {
  background:white;
  padding:20px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:transform 0.3s, box-shadow 0.3s;
}
.highlights div:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.15);}
.highlights h3 {margin-bottom:6px;}

/* Gallery */
.gallery {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:20px 0;}
.gallery img {width:100%;border-radius:12px;object-fit:cover;transition:transform 0.3s;}
.gallery img:hover {transform:scale(1.05);}

/* Other */
.testimonial {text-align:center;padding:40px 0;font-style:italic;}
footer {background:#fff;text-align:center;padding:20px;border-top:1px solid #e5e7eb;margin-top:30px;}
.amenities {columns:2;list-style:disc;margin-left:20px;}
.booking-form {display:grid;gap:12px;margin:20px 0;}
.booking-form input,.booking-form textarea {width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:6px;}
.booking-form button {width:max-content;}
@media(max-width:768px){
  .hero {height:60vh;flex-direction:column;}
  .highlights {grid-template-columns:1fr;}
}