* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Poppins',sans-serif;
  line-height:1.8;
  color:#fff;
  background:#111;
  scroll-behavior:smooth;
}

/* ===== Header ===== */
.header {
  position:fixed;
  top:0;
  width:100%;
  background:rgba(0,0,0,0.6);
  z-index:1000;
  padding:15px 0;
  backdrop-filter:blur(5px);
}
.header .container { display:flex; justify-content:space-between; align-items:center; width:90%; max-width:1200px; margin:auto; }
.header .logo { font-size:2rem; font-weight:700; color:#ffcc00; }
.header nav ul { list-style:none; display:flex; gap:20px; }
.header nav ul li a {
  color:#fff; text-decoration:none; font-weight:500;
  padding:8px 15px; border-radius:5px; transition:0.3s;
}
.header nav ul li a:hover { background-color: rgba(255,204,0,0.2); }

/* ===== Hero ===== */
.hero {
  background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url('img/hero-bg.jpg') center/cover no-repeat fixed;
  height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-text h2 { font-size:3rem; margin-bottom:20px; color:#ffcc00; text-shadow:2px 2px 10px rgba(0,0,0,0.6);}
.hero-text p { font-size:1.7rem; line-height:1.4; text-shadow:1px 1px 5px rgba(0,0,0,0.6); }

/* ===== Sections ===== */
section { padding:100px 0; position:relative; }
.spots { background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('img/spots-bg.jpg') center/cover no-repeat fixed; }
.info { background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('img/info-bg.jpg') center/cover no-repeat fixed; }
.contact { background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('img/contact-bg.jpg') center/cover no-repeat fixed; }

/* ===== Titles ===== */
.section-title { text-align:center; font-size:2.8rem; margin-bottom:50px; color:#ffcc00; text-shadow:1px 1px 5px rgba(0,0,0,0.7); }

/* ===== Cards ===== */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; }
.card { background:rgba(255,255,255,0.1); border-radius:12px; padding-bottom:20px; overflow:hidden; backdrop-filter:blur(5px); box-shadow:0 5px 15px rgba(0,0,0,0.5); transition:0.3s; }
.card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.6); }
.card img { width:100%; height:180px; object-fit:cover; }
.card h3 { margin:15px; font-size:1.5rem; color:#ffcc00; }
.card p, .spot-info li { margin:0 15px 12px 15px; font-size:1rem; line-height:1.5; }
.spot-info { list-style:none; padding:0 15px 15px 15px; }

/* ===== Table ===== */
.info-table { width:100%; border-collapse:collapse; margin-top:20px; }
.info-table th, .info-table td { padding:15px 20px; border:1px solid rgba(255,255,255,0.3); color:#fff; }
.info-table th { background-color: rgba(255,204,0,0.7); color:#111; text-align:left; }

/* ===== Contact Form ===== */
.contact-form { display:flex; flex-direction:column; gap:15px; max-width:600px; margin:auto; }
.contact-form input, .contact-form textarea { padding:15px; border-radius:8px; border:none; font-size:1rem; width:100%; }
.contact-form textarea { resize:none; min-height:150px; }
.contact-form button { padding:15px; background:#ffcc00; border:none; color:#111; font-size:1.1rem; font-weight:600; border-radius:8px; cursor:pointer; transition:0.3s; }
.contact-form button:hover { background:#e6b800; }

/* ===== Footer ===== */
.footer { background: rgba(0,0,0,0.8); color:#fff; text-align:center; padding:25px 0; }

/* ===== Fade-in animation ===== */
.fade-in { opacity:0; transform:translateY(20px); animation:fadeInAnimation 1s forwards; }
@keyframes fadeInAnimation { to { opacity:1; transform:translateY(0); } }

/* ===== Responsive ===== */
@media(max-width:768px){
  .header .container { flex-direction:column; gap:10px; }
  .hero-text h2 { font-size:2.2rem; }
  .hero-text p { font-size:1.3rem; }
  .section-title { font-size:2.2rem; margin-bottom:40px; }
  .card h3 { font-size:1.3rem; }
  .card p, .spot-info li { font-size:0.95rem; }
}