:root{
  --yellow:#fad039;
  --ink:#111;
  --muted:#555;
  --bg:#ffffff;
  --panel:#fafafa;
  --frame:#eaeaea;
  --shadow:0 10px 25px rgba(0,0,0,.12);
  --font:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);scroll-behavior:smooth}

/* --- Header --- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 6%;
  background:rgba(0,0,0,.30); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; font-size:1.4rem; text-decoration:none}
.logo-dot{width:10px; height:10px; border-radius:50%; background:var(--yellow)}
.nav{display:flex; gap:1.1rem}
.nav a{color:#fff; text-decoration:none; font-weight:500; opacity:.95; transition:.2s}
.nav a:hover{color:var(--yellow)}
.hamburger{display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:4px}
.hamburger span{width:22px; height:2px; background:#fff}

/* --- Hero --- */
.hero-section {
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.hero-bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero-overlay {position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .70));}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 1rem;
  transform: translateY(20px);
}
.hero-content h1 {font-size:clamp(2.1rem, 5vw, 3.6rem); margin-bottom:.6rem; font-weight:700;}
.accent {color:var(--yellow);}
.tagline {font-size:1.1rem; color:#eaeaea; margin-bottom:1.5rem;}
.btn{
  display:inline-block; padding:.9rem 1.5rem; border-radius:999px;
  background:var(--yellow); color:#000; font-weight:600; text-decoration:none; transition:.25s;
}
.btn:hover{background:#ffe784}

/* --- Trustpilot & socials --- */
.hero-social-proof{
  position:absolute; 
  bottom:1.6rem; 
  left:6%; 
  z-index:2; 
  text-align:left;
}

.trust-row{
  display:flex;
  flex-direction:column;   /* ← this puts text on top, stars below */
  align-items:flex-start;  /* left aligned, same as before */
  gap:.2rem;               /* smaller gap for cleaner look */
}

.stars{
  color:var(--yellow);
  font-size:1.3rem;
  letter-spacing:.08rem;
}

.years{
  color:#f3f3f3;
  font-size:.95rem;
}

.hero-socials{
  position:absolute; right:2rem; bottom:1.6rem; z-index:2; text-align:right;
}
.hero-socials p{margin:0 0 .35rem 0; font-size:.95rem; color:#fff;}
.hero-socials .icons{display:flex; gap:.9rem; justify-content:flex-end}
.hero-socials a{color:#fff; font-size:1.4rem; transition:.2s}
.hero-socials a:hover{color:var(--yellow)}

/* --- Offer section --- */
.frame{border:1px solid var(--frame); border-radius:16px; background:#fff;}
.offer{padding:5rem 6% 4rem; background:var(--panel); color:var(--ink);}
.offer-intro{max-width:900px; margin:0 auto 2rem; padding:1.2rem 1.4rem; box-shadow:var(--shadow);}
.offer-title{display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.2rem 0 2.4rem;}
.offer-title .line{width:64px; height:2px; background:var(--yellow);}
.offer-title h2{font-size:2rem; font-weight:600; color:#111;}
.offer-grid{display:flex; flex-direction:column; gap:2rem; max-width:1120px; margin:0 auto;}
.feature{display:grid; grid-template-columns:1.05fr 1fr; gap:1.6rem; align-items:center; padding:1.2rem; background:#fff; box-shadow:var(--shadow);}
.feature.reverse{grid-template-columns:1fr 1.05fr;}
.feature.reverse .feature-text{order:2;}
.feature.reverse .feature-img{order:1;}
.feature-text{padding:.6rem 1rem;}
.feature-text .icon{width:44px; height:44px; display:block; margin-bottom:.7rem;}
.feature-text h3{font-size:1.35rem; margin:.1rem 0 .5rem; color:#111;}
.feature-text p{color:var(--muted); line-height:1.75;}
.feature-img img{width:100%; height:100%; object-fit:cover; border-radius:12px;}

/* --- Why Choose Us --- */
.why-choose{padding:5rem 6%; background:#fff; color:var(--ink);}
.why-container{display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.5rem; align-items:center; max-width:1200px; margin:0 auto;}
.why-image{position:relative; overflow:hidden; border-radius:18px; box-shadow:var(--shadow);}
.why-image img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.play-icon{position:absolute; top:50%; left:50%; width:90px; height:90px; transform:translate(-50%, -50%);}
.play-icon img{width:100%; height:100%; object-fit:contain;}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.why-item{text-align:left; padding:1.4rem 1.6rem; border-radius:16px; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s;}
.why-item:hover{transform:translateY(-4px); box-shadow:0 8px 25px rgba(0,0,0,.15);}
.why-item img{width:48px; height:48px; margin-bottom:1rem;}
.why-item h4{font-size:1.15rem; font-weight:600; margin-bottom:.4rem; color:#111;}
.why-item p{color:var(--muted); line-height:1.7;}
@media(max-width:900px){
  .why-container{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .play-icon{width:70px; height:70px;}
}

/* --- Featured Tours --- */
.featured-tours {
  padding: 5rem 6%;
  background: #fff;
}

/* --- Section Title for Tours --- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}

.section-header .line {
  width: 64px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.5px;
}


.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- TOUR CARD --- */
.tour-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  height: 460px;
  color: #fff;
  background: #000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* --- BACKGROUND IMAGE --- */
.tour-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 5s ease;
  opacity: 0.9;
  z-index: 0;
}
.tour-card:hover img {
  transform: scale(1.25);
}

/* --- OVERLAY --- */
.tour-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}

/* --- CONTENT --- */
.tour-content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 3;
  text-align: left;
}

.tour-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .45rem;
}

.tour-content p {
  font-size: .94rem;
  line-height: 1.55;
  color: #f3f3f3;
  margin-bottom: 1.2rem;
}

/* --- ICON ROW (FIXED VISIBILITY) --- */
/* --- ICON ROW (FINAL FIX — SEPARATE + VISIBLE ICONS) --- */
:root { --tour-icon: 18px; }

.tour-info {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  align-items: center;
  margin: 0 0 1.3rem 0;
  padding: 0;
  font-size: .92rem;
  position: relative;
  z-index: 3;
}

.tour-info li {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.tour-info li img {
  display: inline-block;
  position: relative; /* fixes the stacking */
  width: var(--tour-icon);
  height: var(--tour-icon);
  min-width: var(--tour-icon);
  min-height: var(--tour-icon);
  margin-right: 4px;
  object-fit: contain;
  vertical-align: middle;
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255,255,255,0.6));
  mix-blend-mode: normal;
  background: transparent;
}


/* --- BUTTON --- */
.tour-btn {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  transition: background .25s;
  z-index: 5;
  position: relative;
}
.tour-btn:hover {
  background: #ffe67a;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .tour-card {
    height: 420px;
  }
  .tour-content {
    bottom: 1.4rem;
    left: 1.4rem;
    right: 1.4rem;
  }
}


/* --- Stories --- */
.stories{padding:4rem 6%; background:#fff; text-align:center;}
.stories h2{font-size:2rem; margin-bottom:1.2rem;}
.story-grid{max-width:900px; margin:0 auto; display:grid; gap:1rem;}
.story-grid blockquote{font-style:italic; color:#333; background:#f7f7f7; border-left:3px solid var(--yellow); padding:1rem 1.2rem; border-radius:8px;}

/* --- Contact --- */
.contact{padding:4rem 6%; background:var(--panel); text-align:center;}
.contact-inner{max-width:680px; margin:0 auto; padding:1.2rem 1.4rem; box-shadow:var(--shadow);}
.contact h2{font-size:1.8rem; margin-bottom:.4rem;}
.contact p{color:#444;}
.contact form{display:grid; gap:1rem; margin-top:1.2rem;}
.contact input,.contact textarea{background:#fff; border:1px solid var(--frame); color:#111; border-radius:10px; padding:.9rem 1rem; font:inherit;}
.contact input:focus,.contact textarea:focus{outline:none; border-color:#d7d7d7; box-shadow:0 0 0 3px rgba(250,208,57,.18);}
.form-note{margin-top:.2rem; color:#333; font-size:.92rem;}

/* --- Footer --- */
.footer{text-align:center; padding:1.4rem 6%; background:#0a0d10; color:#aeb0b4; font-size:.9rem; border-top:1px solid rgba(255,255,255,.08);}

/* --- Animations --- */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

@media(max-width:1024px){
  .feature, .feature.reverse{grid-template-columns:1fr;}
  .feature.reverse .feature-text{order:1;}
  .feature.reverse .feature-img{order:2;}
}
@media(max-width:768px){
  .nav{display:none; position:absolute; top:64px; right:6%; flex-direction:column; background:rgba(0,0,0,.86); padding:1rem 1.2rem; border-radius:12px;}
  .nav.show{display:flex;}
  .hamburger{display:flex;}
  .hero-social-proof{left:5%; bottom:1rem;}
  .hero-socials{right:5%; bottom:1rem;}
  .hero-content{transform:translateY(20px);}
}




/* FAQ */
.faq{padding:5rem 6%;background:#fafafa}
.section-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 0 1.75rem}
.section-header .line{width:64px;height:2px;background:var(--yellow)}
.section-header h2{font-size:2rem;font-weight:600;color:#111}

.faq-container{max-width:850px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{background:#f3f3f3;border-radius:20px;box-shadow:0 6px 16px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .25s,background .25s}
.faq-item.open{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.faq-question{width:100%;background:none;border:0;outline:0;cursor:pointer;
  padding:1.4rem 1.8rem;display:flex;align-items:center;justify-content:space-between;
  font-size:1.05rem;font-weight:600;color:#1e1e1e}
.faq-question img{width:12px;height:12px;transition:transform .3s ease}
.faq-item.open .faq-question img{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;padding:0 1.8rem;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-answer{max-height:600px;padding:1rem 1.8rem 1.5rem}
.faq-answer[hidden]{display:block} /* keep layout, we control via max-height */
.faq-answer p{color:#555;line-height:1.7;font-size:.96rem}

@media (max-width:768px){
  .faq-question{padding:1.2rem 1.4rem;font-size:1rem}
  .faq-item.open .faq-answer{padding:1rem 1.4rem 1.25rem}
}