@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #1a3c2a; --primary-light: #2d5a3f; --accent: #c8a96e;
  --accent-light: #e0c98f; --bg-dark: #0a0f0d; --bg-card: rgba(26,60,42,0.25);
  --text: #f0efe9; --text-muted: #a8b5a0; --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.1); --gradient-nature: linear-gradient(135deg,#0a1f15,#1a3c2a,#0d2818);
  --gradient-gold: linear-gradient(135deg,#c8a96e,#e0c98f); --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --radius: 16px; --radius-sm: 8px; --transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:80px; }

body {
  font-family:'Inter',sans-serif; background:var(--bg-dark); color:var(--text);
  line-height:1.7; overflow-x:hidden;
}

h1,h2,h3,h4 { font-family:'Playfair Display',serif; line-height:1.2; }

a { color:inherit; text-decoration:none; }

img { max-width:100%; display:block; }

.container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* NAVBAR */
.navbar {
  position:fixed; top:0; left:0; width:100%; z-index:1000; padding:16px 0;
  transition:var(--transition); backdrop-filter:blur(0px);
}
.navbar.scrolled {
  background:rgba(10,15,13,0.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border); padding:10px 0;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { font-size:0.9rem; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; position:relative; padding:4px 0; transition:var(--transition); }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--accent); transition:var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover { color:var(--accent); }
.nav-cta {
  background:var(--gradient-gold); color:var(--bg-dark); padding:10px 24px;
  border-radius:50px; font-weight:600; font-size:0.85rem; letter-spacing:0.5px;
  transition:var(--transition); border:none; cursor:pointer;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(200,169,110,0.4); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { width:24px; height:2px; background:var(--text); transition:var(--transition); }

/* HERO */
.hero {
  position:relative; height:100vh; min-height:700px; display:flex; align-items:center;
  justify-content:center; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,15,13,0.3) 0%,rgba(10,15,13,0.5) 50%,rgba(10,15,13,0.95) 100%);
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:800px; padding:0 24px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:50px; padding:8px 20px;
  font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  margin-bottom:24px; backdrop-filter:blur(10px);
}
.hero h1 { font-size:clamp(2.5rem,6vw,5rem); margin-bottom:20px; }
.hero h1 .highlight { color:var(--accent); display:block; }
.hero p { font-size:1.1rem; color:var(--text-muted); max-width:600px; margin:0 auto 36px; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-primary {
  background:var(--gradient-gold); color:var(--bg-dark); padding:14px 36px;
  border-radius:50px; font-weight:600; font-size:0.95rem; border:none;
  cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(200,169,110,0.35); }
.btn-outline {
  background:transparent; color:var(--text); padding:14px 36px; border-radius:50px;
  font-weight:500; font-size:0.95rem; border:1px solid var(--glass-border);
  cursor:pointer; transition:var(--transition); backdrop-filter:blur(10px);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.hero-stats {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:48px;
}
.hero-stat { text-align:center; }
.hero-stat .num { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--accent); }
.hero-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

/* SECTIONS */
section { padding:100px 0; }
.section-header { text-align:center; margin-bottom:60px; }
.section-badge {
  display:inline-block; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.section-header h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.section-header p { color:var(--text-muted); max-width:600px; margin:0 auto; }

/* FEATURED TOURS GRID */
.tours-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:24px; }
.tour-card {
  background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius);
  overflow:hidden; transition:var(--transition); backdrop-filter:blur(10px); cursor:pointer;
}
.tour-card:hover { transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--accent); }
.tour-card-img { position:relative; height:220px; overflow:hidden; }
.tour-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.tour-card:hover .tour-card-img img { transform:scale(1.1); }
.tour-badge {
  position:absolute; top:16px; left:16px; background:var(--accent); color:var(--bg-dark);
  padding:4px 14px; border-radius:50px; font-size:0.75rem; font-weight:600;
}
.tour-card-body { padding:24px; }
.tour-card-body h3 { font-size:1.25rem; margin-bottom:8px; }
.tour-meta { display:flex; gap:16px; color:var(--text-muted); font-size:0.85rem; margin-bottom:16px; }
.tour-meta span { display:flex; align-items:center; gap:4px; }
.tour-price { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--glass-border); }
.tour-price .price { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--accent); }
.tour-price .price small { font-size:0.75rem; color:var(--text-muted); font-family:'Inter',sans-serif; }
.tour-price .book-btn {
  background:var(--glass); border:1px solid var(--accent); color:var(--accent);
  padding:8px 20px; border-radius:50px; font-size:0.8rem; cursor:pointer; transition:var(--transition);
}
.tour-price .book-btn:hover { background:var(--accent); color:var(--bg-dark); }

/* DESTINATIONS */
.dest-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,280px); gap:16px; }
.dest-card {
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
}
.dest-card:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.dest-card:nth-child(4) { grid-column:span 2; }
.dest-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.dest-card:hover img { transform:scale(1.1); }
.dest-card .dest-overlay {
  position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 60%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px; transition:var(--transition);
}
.dest-card:hover .dest-overlay { background:linear-gradient(0deg,rgba(26,60,42,0.8) 0%,transparent 60%); }
.dest-card h3 { font-size:1.3rem; margin-bottom:4px; }
.dest-card p { font-size:0.85rem; color:var(--text-muted); }

/* ABOUT/WHY US */
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.why-card {
  background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:32px; text-align:center; transition:var(--transition); backdrop-filter:blur(10px);
}
.why-card:hover { transform:translateY(-6px); border-color:var(--accent); }
.why-icon { font-size:2.5rem; margin-bottom:16px; }
.why-card h3 { font-size:1.1rem; margin-bottom:8px; }
.why-card p { font-size:0.9rem; color:var(--text-muted); }

/* TESTIMONIALS */
.testimonials-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px; scrollbar-width:none; }
.testimonials-track::-webkit-scrollbar { display:none; }
.testimonial-card {
  min-width:380px; background:var(--bg-card); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:32px; scroll-snap-align:start; backdrop-filter:blur(10px);
}
.testimonial-stars { color:var(--accent); font-size:0.9rem; margin-bottom:12px; }
.testimonial-card blockquote { font-style:italic; color:var(--text-muted); margin-bottom:20px; font-size:0.95rem; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent); }
.testimonial-name { font-weight:600; font-size:0.9rem; }
.testimonial-trip { font-size:0.8rem; color:var(--text-muted); }

/* CTA SECTION */
.cta-section {
  position:relative; padding:100px 0; text-align:center; overflow:hidden;
}
.cta-section .cta-bg { position:absolute; inset:0; }
.cta-section .cta-bg img { width:100%; height:100%; object-fit:cover; }
.cta-section .cta-overlay { position:absolute; inset:0; background:rgba(10,15,13,0.85); }
.cta-content { position:relative; z-index:2; }
.cta-content h2 { font-size:clamp(2rem,4vw,3.5rem); margin-bottom:16px; }
.cta-content p { color:var(--text-muted); max-width:500px; margin:0 auto 32px; }

/* FOOTER */
.footer { background:rgba(10,15,13,0.95); border-top:1px solid var(--glass-border); padding:80px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand h3 { font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:12px; }
.footer-brand h3 span { color:var(--accent); }
.footer-brand p { color:var(--text-muted); font-size:0.9rem; margin-bottom:20px; }
.footer h4 { font-size:0.85rem; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:20px; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:10px; }
.footer ul a { color:var(--text-muted); font-size:0.9rem; transition:var(--transition); }
.footer ul a:hover { color:var(--accent); }
.footer-contact li { display:flex; align-items:flex-start; gap:8px; color:var(--text-muted); font-size:0.9rem; }
.footer-bottom { border-top:1px solid var(--glass-border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:0.8rem; }
.social-links { display:flex; gap:16px; }
.social-links a { color:var(--text-muted); transition:var(--transition); font-size:1.2rem; }
.social-links a:hover { color:var(--accent); }

/* WHATSAPP FLOAT */
.whatsapp-float {
  position:fixed; bottom:24px; right:24px; z-index:999; width:60px; height:60px;
  background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:var(--transition); cursor:pointer;
}
.whatsapp-float:hover { transform:scale(1.1); }
.whatsapp-float img { width:32px; filter:brightness(0) invert(1); }

/* MODAL */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:2000; display:none;
  align-items:center; justify-content:center; backdrop-filter:blur(5px);
}
.modal-overlay.active { display:flex; }
.modal {
  background:var(--bg-dark); border:1px solid var(--glass-border); border-radius:var(--radius);
  max-width:900px; width:90%; max-height:90vh; overflow-y:auto; position:relative;
}
.modal-close {
  position:absolute; top:16px; right:16px; background:var(--glass); border:none;
  color:var(--text); width:36px; height:36px; border-radius:50%; cursor:pointer;
  font-size:1.2rem; z-index:3; transition:var(--transition);
}
.modal-close:hover { background:var(--accent); color:var(--bg-dark); }
.modal-hero { position:relative; height:300px; }
.modal-hero img { width:100%; height:100%; object-fit:cover; }
.modal-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,var(--bg-dark) 0%,transparent 50%); }
.modal-hero-info { position:absolute; bottom:24px; left:24px; z-index:2; }
.modal-hero-info h2 { font-size:1.8rem; margin-bottom:4px; }
.modal-hero-info .dur { color:var(--accent); font-size:0.9rem; }
.modal-body { padding:32px; }
.modal-pricing {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px;
}
.price-card {
  background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:20px; text-align:center;
}
.price-card h4 { font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:8px; }
.price-card .amt { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--accent); }
.price-card .amt small { font-size:0.7rem; color:var(--text-muted); font-family:'Inter',sans-serif; }
.modal-section { margin-bottom:28px; }
.modal-section h3 { font-size:1.1rem; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.itinerary-day {
  background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:16px; margin-bottom:8px;
}
.itinerary-day strong { color:var(--accent); }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.service-item { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-muted); padding:6px 0; }
.service-item.included::before { content:'✓'; color:#4ade80; font-weight:700; }
.service-item.excluded::before { content:'✗'; color:#f87171; font-weight:700; }

/* TOURS PAGE FILTER */
.filter-bar {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:40px;
}
.filter-btn {
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text-muted);
  padding:8px 24px; border-radius:50px; font-size:0.85rem; cursor:pointer; transition:var(--transition);
}
.filter-btn.active, .filter-btn:hover { background:var(--accent); color:var(--bg-dark); border-color:var(--accent); }

/* SCROLL ANIMATIONS */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* UTILITY: responsive grids used in inline HTML */
.about-grid, .contact-grid, .office-mini-grid {
  display:grid; gap:48px;
}
.about-grid { grid-template-columns:1fr 1fr; align-items:center; }
.contact-grid { grid-template-columns:1fr 1fr; }
.office-mini-grid { grid-template-columns:1fr 1fr; gap:16px; }
.about-stats { display:flex; gap:32px; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .dest-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .dest-card:nth-child(1) { grid-column:span 2; }
  .dest-card:nth-child(4) { grid-column:span 1; }
}

@media(max-width:768px) {
  /* Navbar */
  .nav-cta { display:none; }
  .nav-links {
    display:none; position:fixed; top:0; left:0; width:100%; height:100vh;
    background:rgba(10,15,13,0.98); flex-direction:column; align-items:center;
    justify-content:center; gap:24px; z-index:1001;
  }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; z-index:1002; }
  .nav-logo { font-size:1.2rem; }

  /* Hero */
  .hero { min-height:600px; }
  .hero-content { padding:0 16px; }
  .hero p { font-size:0.95rem; margin-bottom:28px; }
  .hero-btns { flex-direction:column; align-items:center; gap:12px; }
  .btn-primary, .btn-outline { width:100%; max-width:280px; text-align:center; justify-content:center; padding:12px 24px; font-size:0.9rem; }
  .hero-stats { gap:20px; bottom:20px; flex-wrap:wrap; justify-content:center; }
  .hero-stat .num { font-size:1.5rem; }
  .hero-stat .label { font-size:0.65rem; }

  /* Sections */
  section { padding:60px 0; }
  .section-header { margin-bottom:36px; }
  .section-header p { font-size:0.9rem; padding:0 8px; }
  .container { padding:0 16px; }

  /* Tours */
  .tours-grid { grid-template-columns:1fr; gap:16px; }
  .tour-card-img { height:180px; }
  .tour-card-body { padding:16px; }
  .tour-card-body h3 { font-size:1.1rem; }
  .tour-meta { gap:10px; font-size:0.8rem; flex-wrap:wrap; }
  .tour-price .price { font-size:1.2rem; }
  .tour-price .book-btn { padding:6px 14px; font-size:0.75rem; }
  .filter-bar { gap:8px; padding:0 8px; }
  .filter-btn { padding:6px 16px; font-size:0.8rem; }

  /* Destinations */
  .dest-grid { grid-template-columns:1fr; grid-template-rows:auto; gap:12px; }
  .dest-card { height:200px; }
  .dest-card:nth-child(1) { grid-column:span 1; grid-row:span 1; }
  .dest-card:nth-child(4) { grid-column:span 1; }
  .dest-card h3 { font-size:1.1rem; }
  .dest-card .dest-overlay { padding:16px; }

  /* Why Us */
  .why-grid { grid-template-columns:1fr; gap:16px; }
  .why-card { padding:24px; }

  /* About Grid */
  .about-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .about-grid > div:last-child { height:250px !important; }
  .about-stats { flex-wrap:wrap; gap:20px; }

  /* Testimonials */
  .testimonials-track { gap:12px; }
  .testimonial-card { min-width:280px; padding:20px; }
  .testimonial-card blockquote { font-size:0.85rem; }

  /* CTA */
  .cta-section { padding:60px 0; }
  .cta-content { padding:0 16px; }
  .cta-content p { font-size:0.9rem; }

  /* Contact Grid */
  .contact-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .office-mini-grid { grid-template-columns:1fr !important; }

  /* Modal */
  .modal { width:95%; max-height:95vh; border-radius:var(--radius-sm); }
  .modal-hero { height:200px; }
  .modal-hero-info h2 { font-size:1.3rem; }
  .modal-body { padding:20px; }
  .modal-pricing { grid-template-columns:1fr 1fr; gap:8px; }
  .price-card .amt { font-size:1.3rem; }
  .itinerary-day { padding:12px; font-size:0.85rem; }
  .services-grid { grid-template-columns:1fr; }
  .service-item { font-size:0.8rem; }

  /* Footer */
  .footer { padding:48px 0 24px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }

  /* WhatsApp */
  .whatsapp-float { width:50px; height:50px; bottom:16px; right:16px; }
  .whatsapp-float img { width:26px; }
}

@media(max-width:400px) {
  .hero h1 { font-size:2rem; }
  .hero-badge { font-size:0.7rem; padding:6px 14px; }
  .hero-stats { gap:14px; }
  .hero-stat .num { font-size:1.3rem; }
  .tour-price { flex-direction:column; gap:10px; align-items:flex-start; }
  .modal-pricing { grid-template-columns:1fr; }
  .testimonial-card { min-width:250px; }
}