* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  color: #111;
  line-height: 1.6;
}
h1, h2, h3 {
  margin: 0 0 10px;
}
a {
  text-decoration: none;
}
.navbar {
  height: 70px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 999;
}
.nav-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #009688;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 20px;
}
.nav-cta {
  background-color: #25D366;
  color: white !important;
}
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 998;
  }
  .nav-links.show {
    display: flex;
  }
}
.hero h1 {
  font-size: 3rem;
}
h1 {
  font-size: 3rem; 
}
section.hero h1 {
  font-size: 2.5rem;
}

.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.hero-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}
.hero-content {
  color: white;
  max-width: 600px;
  text-align: left;
}
.cta-button {
  background-color: #FFA726;
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s ease;
}
.cta-button:hover {
  background-color: #FB8C00;
}
.intro-paragraph {
  max-width: 820px;
  margin: 3rem auto;
  padding: 2rem;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  text-align: center;
}
.inclusions-section {
  max-width: 900px;
  margin: 4rem auto;
  padding: 0 1rem;
  text-align: left;
}

.inclusions-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.inclusion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* always 2 */
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.inclusion-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
}
.inclusion-list img { flex: 0 0 auto; }



.inclusion-list li img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.pricing-section {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.subtitle {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #444;
}

.price-highlight {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 2rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.price-highlight h3 {
  font-size: 1.75rem;
  color: #111;
  margin: 0.5rem 0;
}

.price-highlight .note {
  font-size: 0.9rem;
  color: #777;
}

.installment-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin: 1.5rem 0;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #25D366;
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  margin: 1.5rem 0;
  transition: background 0.2s ease;
}

.btn-cta:hover {
  background-color: #1ebe57;
}

.deposit-line {
  font-size: 1rem;
  color: #444;
  margin: 1rem 0;
}

.trust-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.trust-icons div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #333;
}
.gallery-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 2rem auto;
  padding: 0 1rem;
}

.main-image {
  width: 100%;
  max-width: 900px;
  max-height: 70vh;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.resort-info {
  text-align: left;
  margin-bottom: 1rem;
  padding: 0 1rem; /* spacing on mobile */
}

@media (min-width: 768px) {
  .resort-info {
    padding-left: 2rem; /* more breathing room on tablet+ */
  }
}

@media (min-width: 1024px) {
  .resort-info {
    padding-left: 3rem; /* solid left spacing on desktop */
    max-width: 960px;
    margin: 0 auto 1rem auto; /* center horizontally */
  }
}


.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.85); /* visible over images */
  border: none;
  border-radius: 50%;
  color: #111;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}

.gallery-arrow:hover {
  background: #fff;
}


.gallery-arrow.left {
  left: 0;
}

.gallery-arrow.right {
  right: 0;
}

.thumbnail-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.thumbnail {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border 0.2s;
}

.thumbnail.active {
  border-color: #25D366;
}
.resort-highlights {
  background-color: #f9f9f9;
  padding: 2rem 1rem;
}

.resort-highlights .container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #111;
}

.highlights-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 side by side */
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch; /* 👈 makes all items in a row equal height */
}

.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f9f9f9; /* optional for clarity */
  padding: 12px;
  border-radius: 6px;
}



.highlight-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.room-section {
  padding: 2.5rem 1rem;
  background-color: #fdfdfd;
}

.room-section h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.room-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.room-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.room-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.room-name {
  font-size: 1.4rem;
  color: #111;
}

.room-features {
  display: flex;
  gap: 20px;             /* space between the two columns */
}

.room-features ul {
  flex: 1;               /* each UL takes 50% width */
  list-style: none;
  padding: 0;
  margin: 0;
}
.room-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.flight-card--compact {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.flight-title {
  margin-bottom: 10px;
}

.flight-segments {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  grid-template-columns: 1fr;  /* mobile: stacked */
  gap: 8px;
}

.segment {
  display: grid;
  grid-template-columns: auto 1fr auto; /* tag | route | time */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f2f2f2;
  border-radius: 8px;
  background: #fafafa;
}

.segment-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #eef5ff;
  color: #2357ff;
  white-space: nowrap;
}

.segment-route, .segment-time {
  font-size: 14px;
}
.flight-card--compact {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);

  /* Centering */
  max-width: 700px;       /* adjust width as you like */
  margin: 0 auto;         /* centers it */
}

.flight-badges {
  list-style: none;
  padding: 0;
  margin: 8px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.flight-badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  background: #f7f9fc;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #eef2f7;
}

.flight-note {
  font-size: 12.5px;
  color: #666;
  margin-top: 6px;
}

/* Desktop refinements */
@media (min-width: 640px) {
  .flight-segments {
    grid-template-columns: 1fr 1fr;  /* side by side */
  }
}


.room-features img {
  width: 20px;
  height: 20px;
}
.meals-section {
  background-color: #fff;
  padding: 2rem 1rem;
}

.meals-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.7rem;
  color: #111;
}

.meals-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.meals-image {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.meals-content {
  max-width: 600px;
  text-align: left;
}

.meals-content h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.meals-content p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #444;
}

.meal-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.meal-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #222;
}
.flights-section {
  background: #f8f9fa;
  padding: 2.5rem 1rem;
}

.flights-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.7rem;
  color: #111;
}

.flight-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.flight-image {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.airline-logo {
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

.flight-cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.flight-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.flight-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.flight-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.flight-card li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.flight-card li img {
  width: 20px;
  height: 20px;
}
.wellness-section {
  background-color: #fff;
  padding: 2.5rem 1rem;
  text-align: center;
}

.wellness-section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #111;
}

.subtext {
  color: #555;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.wellness-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .wellness-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wellness-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%; /* force equal height for all cards */
}

.wellness-card .included-icon {
  margin-top: auto;
}


.wellness-card img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
}

.wellness-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #222;
}

.wellness-card p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.75rem;
}


.included-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #25d366;
  text-align: center;
}

.included-icon img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #25d366;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: background 0.2s;
}

.btn-cta:hover {
  background-color: #1ebe5d;
}
/* === TOURS SECTION === */
.tours-section {
  padding: 3rem 1rem;
  background-color: #f9f9f9;
  text-align: center;
}
.tours-section h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #111;
}
.tours-section .subtext {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-inline: auto;
}
.tours-banner {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 2rem;
}
.tours-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .tours-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tour-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  background-color: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  height: 100%;
  transition: transform 0.3s ease;
}
.tour-card:hover {
  transform: translateY(-5px);
}
.tour-card img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
}
.tour-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: #222;
}
.tour-card p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.75rem;
}
.tour-card .included-icon {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #25d366;
  text-align: center;
}
.tour-card .included-icon img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* === CTA BUTTON === */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #0a934a;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  margin: 1rem auto;
}
.btn-cta:hover {
  background-color: #087c3d;
}
.btn-cta img {
  width: 20px;
  height: 20px;
}

.price-section {
  padding: 3rem 1rem;
  background-color: #fff;
  text-align: center;
}
.price-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #111;
}
.price-box {
  background-color: #f9f9f9;
  padding: 2rem;
  margin: 2rem auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  max-width: 700px;
}
.price-amount {
  font-size: 2rem;
  font-weight: bold;
  color: #0a934a;
  margin: 1rem 0;
}
.price-amount span {
  font-size: 1rem;
  color: #444;
}
.scarcity-credibility p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.5rem;
}
/* Force two vertical columns with 3 items each */
.included-list {
  display: grid !important;
  grid-auto-flow: column;              /* fill by column, not rows */
  grid-template-rows: repeat(3, auto); /* 3 rows = 3 items per column */
  grid-auto-columns: 1fr;              /* 2 equal columns */
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.included-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* avoid overflow */
}
.included-list img { flex: 0 0 auto; }


.tagline {
  font-weight: 500;
  color: #0a934a;
  margin-top: 1rem;
}
.payment-plans {
  margin-top: 2rem;
}
.payment-plans h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.payment-plans table {
  width: 100%;
  border-collapse: collapse;
}
.payment-plans th, .payment-plans td {
  border: 1px solid #eee;
  padding: 0.75rem;
  font-size: 0.95rem;
}
.payment-methods {
  margin: 2rem 0;
}
.payment-logos {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.payment-logos img {
  max-height: 40px;
  height: auto;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #0a934a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.btn-cta:hover {
  background-color: #087c3d;
}
.note {
  margin-top: 1rem;
  color: #666;
  font-size: 0.95rem;
}
.included-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.included-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  padding: 0.5rem 0;
  color: #222;
  border-bottom: 1px solid #eee;
}

.included-list li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.reviews-section {
  background-color: #fdfdfd;
  padding: 2.5rem 1rem;
  text-align: center;
}

.reviews-section h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #111;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.review-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.review-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #0a934a;
}

.rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.rating img {
  width: 16px;
  height: 16px;
}

.meta {
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.flag {
  width: 20px;
  height: auto;
}

.verified-tag {
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.review-text {
  font-size: 0.95rem;
  color: #222;
  font-style: italic;
  line-height: 1.5;
}

.related-hotels-thumbs {
  background-color: #ffffff;
  padding: 3rem 1rem;
  text-align: center;
}
.related-hotels-thumbs h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #111;
}
.related-hotels-thumbs .subtext {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2rem;
}
.hotel-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hotel-card {
  display: block;
  text-align: left;
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}
.hotel-card:hover {
  transform: translateY(-5px);
}
.hotel-card img {
  width: 100%;
  height: auto;
  display: block;
}
.hotel-info {
  padding: 1rem;
}
.hotel-info h3 {
  font-size: 1.2rem;
  color: #0a934a;
  margin-bottom: 0.5rem;
}
.hotel-info p {
  font-size: 0.95rem;
  color: #444;
}

.faq-section {
  background-color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

.faq-section h2 {
  font-size: 1.8rem;
  color: #111;
  margin-bottom: 2rem;
}

.faq-item {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: left;
}

.faq-question {
  width: 100%;
  background: #f5f5f5;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #0a934a;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #e8f5e9;
}

.faq-question h3 {
  margin: 0;
  font-size: 1rem;
  flex: 1;
}

.faq-question img {
  margin-left: 1rem;
  width: 20px;
  height: 20px;
}

.faq-answer {
  padding: 1rem;
  font-size: 0.95rem;
  color: #333;
  background-color: #fdfdfd;
  border-left: 3px solid #0a934a;
  border-radius: 0 0 8px 8px;
  display: none;
}

.faq-answer.active {
  display: block;
}

.final-cta-section {
  background-color: #f5fefc;
  padding: 3rem 1rem;
  text-align: center;
}

.final-cta-section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #0a934a;
}

.final-cta-section .lead {
  font-size: 1rem;
  color: #444;
  margin-bottom: 0.5rem;
}

.final-cta-section .scarcity {
  font-size: 1rem;
  color: #e53935;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.final-cta-section .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #0a934a;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  margin-bottom: 1.5rem;
}

.final-cta-section .btn-cta:hover {
  background-color: #087c3d;
}

.final-cta-section .btn-cta img {
  width: 20px;
  height: 20px;
}

.reassurance {
  font-size: 0.95rem;
  color: #333;
}

.reassurance p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.reassurance img {
  width: 20px;
  height: 20px;
}

.site-footer {
  background-color: #f2f2f2;
  padding: 3rem 1rem 1.5rem;
  font-size: 0.95rem;
  color: #333;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.site-footer h2,
.site-footer h3 {
  color: #0a934a;
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: #0a934a;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-contact p {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #666;
}
/* ================================
   HOTEL CARDS GRID SECTION
================================== */
.hotel-cards-section {
  padding: 60px 20px;
  background-color: #fdfdfd;
  text-align: center;
}

.hotel-cards-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

/* GRID LAYOUT */

.hotel-cards-grid {
  display: grid;
  grid-template-columns: 1fr; /* default for mobile */
  gap: 20px;
  align-items: stretch;

}

@media (min-width: 600px) {
  .hotel-cards-grid {
    grid-template-columns: repeat(2, 1fr); /* tablet */
    align-items: stretch;
  }
}

@media (min-width: 900px) {
  .hotel-cards-grid {
    grid-template-columns: repeat(3, 1fr); /* desktop */
    align-items: stretch;
  }
}


/* ================================
   SINGLE HOTEL CARD
================================== */
.hotel-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.hotel-card:hover {
  transform: translateY(-5px);
}

.hotel-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #ff5722;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: bold;
}

.hotel-info {
  flex-grow: 1;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.hotel-info h3 {
  margin: 10px 0 5px;
  font-size: 20px;
}

.hotel-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  min-height: 80px;
}

.stars {
  color: gold;
  font-size: 16px;
}

.icons {
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 10px;
  width: 100%; /* allow it to span the card */
  margin-top: 10px;
}

.icons img {
  width: 20px;
  height: 20px;
}


.price {
  font-weight: bold;
  margin: 10px 0;
  color: #e65100;
}

.price span {
  font-size: 18px;
  color: #ff3d00;
}

.btn-card {
  background-color: #009688;
  color: white;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 5px;
  margin-top: 10px;
}
.card-link {
  text-decoration: none;
  color: inherit;
  height: 100%;
  display: block;
}

/* ===== FAQ SECTION ===== */
.faq-section {
  background: #fff;
  padding: 2rem 0;
  margin-top: 2rem;
}

.faq h3 {
  color: #008080;
  margin-top: 1rem;
}

.faq p {
  margin-bottom: 1rem;
}
/* ================================
   PACKAGES PREVIEW SECTION
================================== */
.packages-preview {
  padding: 60px 20px;
  text-align: center;
  background-color: #fafafa;
}

.package-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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

.card h3 {
  margin: 15px 0 5px;
}

.card p {
  padding: 0 15px 15px;
}

/* ================================
   HOW IT WORKS SECTION
================================== */
.how-it-works {
  padding: 60px 20px;
  text-align: center;
  background-color: #fff;
}

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.step {
  flex: 1 1 250px;
  max-width: 300px;
  background-color: #f3f3f3;
  padding: 20px;
  border-radius: 8px;
}

/* ================================
   WHY BOOK WITH US SECTION
================================== */
.why-book-with-us {
  padding: 60px 20px;
  background-color: #eef7f7;
  text-align: center;
}

.why-book-with-us ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: auto;
}

.why-book-with-us li {
  margin: 15px 0;
  font-size: 18px;
}
/* ================================
   FINAL CTA SECTION
================================== */
.final-cta {
  padding: 60px 20px;
  background-color: #009688;
  text-align: center;
  color: white;
}

.final-cta a {
  margin: 10px;
}
.about-hero {
  background-image: url('images/about-hero.jpg'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  padding: 100px 20px;
  text-align: center;
  color: white;
}

.about-hero .hero-content {
  max-width: 800px;
  margin: auto;
  background-color: rgba(0,0,0,0.6);
  padding: 40px;
  border-radius: 10px;
}

.about-mission, .about-story {
  padding: 60px 20px;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.about-difference {
  background-color: #f9f9f9;
  padding: 60px 20px;
  text-align: center;
}

.difference-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.diff-box {
  background: white;
  padding: 20px;
  max-width: 250px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.about-cta {
  background-color: #009688;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.about-cta a {
  margin: 10px;
}
/* ================================
   CONTACT PAGE
================================== */
.contact-hero {
  background-color: #009688;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 60px 20px;
  max-width: 1000px;
  margin: auto;
  text-align: center;
}

.info-box h3 {
  margin-bottom: 10px;
  color: #333;
}

.info-box p a {
  color: #009688;
  font-weight: bold;
}

.contact-form {
  padding: 60px 20px;
  max-width: 600px;
  margin: auto;
  text-align: center;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.contact-form button {
  padding: 12px;
  background-color: #009688;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.contact-cta {
  text-align: center;
  padding: 60px 20px;
  background-color: #f3f3f3;
}

.contact-cta a {
  margin: 10px;
}

/* Why We Love This Hotel Section */
#why-we-love-it {
  margin: 40px 0;
  padding: 20px;
  background-color: #f6f8fa;
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
}

#why-we-love-it h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #1f2937;
}

#why-we-love-it p {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 10px;
}

#why-we-love-it ul {
  list-style-type: none;
  padding-left: 0;
}

#why-we-love-it li {
  margin-bottom: 8px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #4b5563;
}

/* Travel Tips Section */
#travel-tips {
  margin: 40px 0;
  padding: 20px;
  background-color: #f8fafc;
  border-left: 4px solid #0ea5e9;
  border-radius: 6px;
}

#travel-tips h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #0f172a;
}

#travel-tips p {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 10px;
}

#travel-tips ul {
  list-style: none;
  padding-left: 0;
}

#travel-tips li {
  margin-bottom: 10px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #475569;
}

/* Packing Checklist Section */
#packing-checklist {
  margin: 40px 0;
  padding: 20px;
  background-color: #fefce8;
  border-left: 4px solid #facc15;
  border-radius: 6px;
}

#packing-checklist h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #78350f;
}

#packing-checklist p {
  font-size: 1rem;
  color: #92400e;
  margin-bottom: 10px;
}

#packing-checklist ul {
  list-style: none;
  padding-left: 0;
}

#packing-checklist li {
  margin-bottom: 10px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #78350f;
}

/* Local Secrets Section */
#local-secrets {
  margin: 40px 0;
  padding: 20px;
  background-color: #f0fdf4;
  border-left: 4px solid #22c55e;
  border-radius: 6px;
}

#local-secrets h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #14532d;
}

#local-secrets p {
  font-size: 1rem;
  color: #166534;
  margin-bottom: 10px;
}

#local-secrets ul {
  list-style: none;
  padding-left: 0;
}

#local-secrets li {
  margin-bottom: 10px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #14532d;
}

/* Daily Itinerary Section */
#daily-itinerary {
  margin: 40px 0;
  padding: 20px;
  background-color: #f0f9ff;
  border-left: 4px solid #38bdf8;
  border-radius: 6px;
}

#daily-itinerary h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #0c4a6e;
}

#daily-itinerary p {
  font-size: 1rem;
  color: #075985;
  margin-bottom: 10px;
}

#daily-itinerary ul {
  list-style: none;
  padding-left: 0;
}

#daily-itinerary li {
  margin-bottom: 10px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #0c4a6e;
}

/* Who This Package is Perfect For Section */
#ideal-package {
  margin: 40px 0;
  padding: 20px;
  background-color: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 6px;
}

#ideal-package h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #991b1b;
}

#ideal-package p {
  font-size: 1rem;
  color: #7f1d1d;
  margin-bottom: 10px;
}

#ideal-package ul {
  list-style: none;
  padding-left: 0;
}

#ideal-package li {
  margin-bottom: 10px;
  padding-left: 1.2em;
  text-indent: -1.2em;
  font-size: 0.95rem;
  color: #7f1d1d;
}

/* Comparison Table Section */
#comparison-table {
  margin: 40px 0;
  padding: 20px;
  background-color: #f1f5f9;
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
}

#comparison-table h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #1e3a8a;
}

#comparison-table p {
  font-size: 1rem;
  color: #1e40af;
  margin-bottom: 10px;
}

#comparison-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95rem;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
}

#comparison-table th,
#comparison-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

#comparison-table thead {
  background-color: #3b82f6;
  color: #ffffff;
}

#comparison-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

#comparison-table p strong {
  display: inline-block;
  margin-top: 10px;
  color: #2563eb;
  font-size: 1rem;
}


.zanzibar-facts {
  background: linear-gradient(to bottom, #fdfdfd, #f7f7f7);
  padding: 60px 20px;
  font-size: 16px;
  line-height: 1.8;
  color: #2a2a2a;
  max-width: 1150px;
  margin: 0 auto;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.zanzibar-facts section {
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  margin-bottom: 50px;
  padding: 35px 40px;
  border-left: 6px solid #00a97f;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.zanzibar-facts section:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.zanzibar-facts h2 {
  font-size: 26px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #008060;
  position: relative;
  padding-left: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.zanzibar-facts h2::before {
  content: "🌴";
  position: absolute;
  left: -32px;
  color: #00a97f;
  font-size: 20px;
  top: 2px;
}

.zanzibar-facts p {
  margin-bottom: 16px;
  color: #444;
}

.zanzibar-facts p:last-child {
  margin-bottom: 0;
}

/* Style pseudo-lists inside <p> tags */
.zanzibar-facts p {
  white-space: pre-line;
}

.zanzibar-facts p::before {
  content: "";
  display: block;
  height: 1rem;
}

.zanzibar-facts section:nth-child(2n) {
  background-color: #fefefe;
  border-left: 6px solid #ff914d;
}

.zanzibar-facts section:nth-child(3n) {
  background-color: #f8fdfc;
  border-left: 6px solid #00b894;
}

.zanzibar-facts section:nth-child(4n) {
  background-color: #fcf8ff;
  border-left: 6px solid #a29bfe;
}

.zanzibar-facts section:nth-child(5n) {
  background-color: #fffaf2;
  border-left: 6px solid #ffb347;
}

.zanzibar-facts section:nth-child(6n) {
  background-color: #f9f9ff;
  border-left: 6px solid #74b9ff;
}

.zanzibar-facts ul {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 1.5rem;
  list-style: none;
}

.zanzibar-facts ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  font-size: 15.5px;
  color: #333;
}

.zanzibar-facts ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 1px;
  color: #00a97f;
  font-size: 16px;
}
.author-bio {
  margin-top: 60px;
  padding: 25px;
  background-color: #f4f4f4;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.bio-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bio-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.bio-info {
  flex: 1;
  min-width: 220px;
}

.bio-name {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  color: #222;
}

.bio-role {
  font-size: 0.95rem;
  color: #777;
  margin: 4px 0;
}

.bio-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 6px;
  color: #444;
}
.recent-posts {
  margin-top: 60px;
  padding: 30px 20px;
  background-color: #fafafa;
  border-radius: 16px;
}

.recent-posts h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #222;
  text-align: center;
}

.recent-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.post-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.post-title {
  padding: 14px;
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}
.blog-post {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.7;
  color: #333;
}

.blog-post h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
  line-height: 1.3;
}

.blog-post h2 {
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 15px;
  color: #222;
}

.blog-post h3 {
  font-size: 1.2rem;
  margin-top: 30px;
  margin-bottom: 12px;
  color: #333;
}

.blog-post p {
  margin-bottom: 20px;
  font-size: 1rem;
}

.blog-post ul, .blog-post ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.blog-post li {
  margin-bottom: 8px;
}

.blog-post blockquote {
  background: #f1f1f1;
  border-left: 4px solid #0077cc;
  padding: 15px 20px;
  font-style: italic;
  margin: 30px 0;
  color: #444;
}

.blog-post img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin: 30px 0;
  display: block;
}

.blog-post a {
  color: #0077cc;
  text-decoration: none;
}

.blog-post a:hover {
  text-decoration: underline;
}

.blog-post .meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 25px;
}
.offers-section {
  text-align: center;
  padding: 40px 20px;
  background: #f9f9f9;
}

.offers-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.offers-header p {
  font-size: 16px;
  margin-bottom: 30px;
  color: #555;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 800px;
  margin: 0 auto 20px;
}

.offer-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);          /* 2 per row on phones */
}

@media (min-width: 768px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }  /* 3 per row */
}

@media (min-width: 1024px) {
  .offer-grid { grid-template-columns: repeat(4, 1fr); }  /* 4 per row */
}

/* keep your existing card styling */
.offer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.offer-item:hover { transform: translateY(-5px); }


.offer-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
}

.offer-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-icon {
  width: 20px;
  height: 20px;
}

.offer-text p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.offer-value {
  margin: 20px 0;
  font-weight: bold;
  font-size: 18px;
  color: #222;
}

.cta-button a {
  display: inline-block;
  padding: 12px 25px;
  background: #25d366;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}

.cta-button a:hover {
  background: #1ebc57;
}

@media (max-width: 768px) {
  .offers-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== WHY CHOOSE US (Standalone, Light Theme) ===== */

/* design tokens (tweak to match your site) */
:root{
  --why-bg: #ffffff;           /* section background */
  --why-text: #0f172a;         /* main text (slate-900) */
  --why-muted: #6b7280;        /* muted text (gray-500) */
  --why-accent: #22c55e;       /* green-500 */
  --why-card: #ffffff;         /* card bg */
  --why-border: #e5e7eb;       /* gray-200 */
  --why-radius: 16px;          /* card radius */
  --why-shadow: 0 8px 24px rgba(0,0,0,.08); /* soft elevation */
  --why-chip-bg: rgba(34,197,94,.10);
  --why-chip-border: rgba(34,197,94,.25);
  --why-maxw: 1100px;          /* container width */
}

/* section */
.why{
  background: var(--why-bg);
  color: var(--why-text);
  padding: clamp(40px, 6vw, 72px) 16px;
}
.why__container{
  max-width: var(--why-maxw);
  margin: 0 auto;
}

/* header */
.why__header{
  text-align: center;
  margin-bottom: clamp(22px, 4vw, 40px);
}
.why__header h2{
  margin: 0 0 6px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: .2px;
}
.why__header p{
  margin: 0;
  color: var(--why-muted);
  font-size: clamp(14px, 2.2vw, 18px);
}

/* grid */
.why__grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;   /* 2-up on mobile for compact look */
}
@media (min-width: 720px){
  .why__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .why__grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

/* card */
.why__card{
  background: var(--why-card);
  border: 1px solid var(--why-border);
  border-radius: var(--why-radius);
  box-shadow: var(--why-shadow);
  padding: 18px 16px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.why__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: #d1d5db; /* gray-300 */
}

/* icon chip */
.why__icon-wrap{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f3f4f6;             /* gray-100 */
  border: 1px solid var(--why-border);
  display: grid;
  place-items: center;
}
.why__icon{
  width: 60px;
  height: 60px;
  display: block;
}

/* text */
.why__title{
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
}
.why__text{
  margin: 4px 0 0;
  color: var(--why-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* reassurance chips */
.why__badges{
  margin: clamp(16px, 3vw, 24px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
}
.why__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--why-text);
  background: var(--why-chip-bg);
  border: 1px solid var(--why-chip-border);
  border-radius: 999px;
}
.why__badge-icon{
  width: 16px;
  height: 16px;
  display: block;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .why__card{ transition: none; }
}
/* How It Works Section */
.how-it-works {
  background: #f9f9f9;
  padding: 60px 20px;
  text-align: center;
}

.how-it-works h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #222;
}

.how-it-works .subtitle {
  font-size: 1rem;
  margin-bottom: 40px;
  color: #555;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.step {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  padding: 20px;
  width: 280px;
  transition: transform 0.3s ease;
}

.step:hover {
  transform: translateY(-8px);
}

.step .icon img {
  width: 60px;
  margin-bottom: 15px;
}

.step h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #333;
}

.step p {
  font-size: 1rem;
  color: #666;
}
.pricing {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}

.pricing h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #222;
}

.pricing .subtitle {
  color: #666;
  margin-bottom: 40px;
}

.pricing-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap; /* Force them to stay side by side */
}

.card {
  background: #f9f9f9;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 30px;
  flex: 1 1 50%; /* Always take up half the space */
  position: relative;
  transition: transform 0.3s ease;
  text-align: left;
  min-width: 0; /* Prevent overflow */
}

.card:hover {
  transform: translateY(-8px);
}

.card h3 {
  font-size: 1.4rem;
  margin-bottom: 5px;
  color: #333;
}

.card .price {
  font-size: 2rem;
  color: #28a745;
  margin: 10px 0;
  font-weight: bold;
}

.card .duration {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 15px;
}

.payment-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-info li {
  margin: 6px 0;
  color: #444;
  font-size: 0.95rem;
}

.payment-info li::before {
  content: "✔";
  color: #28a745;
  font-weight: bold;
  margin-right: 8px;
}

.popular {
  border: 2px solid #28a745;
}

.badge{
  position:absolute;
  top:10px;               /* inside, so it can’t be cut off */
  right:10px;
  z-index:5;
  background:#28a745;
  color:#fff;
  padding:6px 12px;
  font-size:.8rem;
  font-weight:700;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}


.included-section {
  margin-top: 50px;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.included-section h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}

.included {
  list-style: none;
  padding: 0;
}

.included li {
  margin: 8px 0;
  color: #444;
  font-size: 0.95rem;
}

.included li::before {
  content: "✔";
  color: #28a745;
  font-weight: bold;
  margin-right: 8px;
}

.btn {
  display: inline-block;
  margin-top: 25px;
  background: #25d366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
  text-align: center;
}

.btn:hover {
  background: #1ebc57;
}

/* ✅ Force side by side even on mobile */
@media (max-width: 768px) {
  .pricing-cards {
    flex-wrap: nowrap;
  }
  .card {
    flex: 1 1 50%;
  }
}
/* ===== FAQ Section ===== */
.faq {
  background:#fff;
  padding:60px 20px;
  --accent:#28a745;
  --text:#222;
  --muted:#666;
  --card:#f9f9f9;
  --shadow:0 4px 14px rgba(0,0,0,.08);
}

.faq .container{
  max-width:900px;
  margin:0 auto;
}

.faq h2{
  text-align:center;
  font-size:2rem;
  color:var(--text);
  margin-bottom:8px;
}

.faq .subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:28px;
}

/* Group headings */
.faq-group{
  font-size:1.05rem;
  color:#333;
  margin:26px 0 10px;
  padding-left:6px;
  border-left:4px solid var(--accent);
}

/* Accordion items */
.faq-list details{
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow);
  margin:10px 0;
  overflow:hidden;             /* so the focus ring stays tidy */
}

.faq-list summary{
  list-style:none;             /* remove default marker */
  cursor:pointer;
  padding:18px 56px 18px 18px;
  font-weight:600;
  color:#333;
  position:relative;
  outline:none;
}

.faq-list summary::-webkit-details-marker { display:none; }

.faq-list summary:focus{
  box-shadow:0 0 0 3px rgba(40,167,69,.25) inset;
}

/* Chevron */
.faq-list summary::after{
  content:"▾";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .25s ease;
  font-size:1.1rem;
  color:var(--accent);
}

.faq-list details[open] summary::after{
  transform:translateY(-50%) rotate(-180deg);
}

.faq-list .answer{
  padding:0 18px 18px 18px;
  color:#444;
  line-height:1.55;
  border-top:1px solid #eee;
  background:#fff;
}

/* CTA button */
.faq .btn.primary{
  display:inline-block;
  margin:28px auto 0;
  background:#25d366;
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 3px 10px rgba(37,211,102,.25);
  transition:transform .15s ease, background .2s ease;
}
.faq .btn.primary:hover{ background:#1ebc57; transform:translateY(-2px); }

/* Mobile spacing */
@media (max-width:768px){
  .faq .container{ padding:0 6px; }
  .faq-list summary{ padding:16px 50px 16px 16px; }
}
/* Final CTA (dark version) */
.final-cta {
  padding: 60px 20px;
  background-color: #009688;
  text-align: center;
  color: #fff;
}

.final-cta .container { display: flex; justify-content: center; }

.final-cta .cta-card { 
  max-width: 700px; 
  width: 100%;
  margin: 0 auto; 
}

.final-cta .cta-actions { margin: 20px 0; }

.final-cta .btn-cta { 
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; font-weight: 700;
  padding: 0.8rem 1.5rem; border-radius: 8px; text-decoration: none;
}

.final-cta .trust {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 15px;
}

.final-cta .trust li {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 6px 12px; border-radius: 999px; 
  white-space: nowrap;
}

.final-cta .microcopy { font-size: .9rem; color: #e6f5ee; margin-top: 1rem; }



/* ---------- Tunables ---------- */
:root {
  --pv-radius: 18px;
  --pv-shadow: 0 10px 30px rgba(0,0,0,0.12);
  --pv-caption-bg: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.55) 80%);
  --pv-badge-bg: #10b981;     /* adjust to your brand (emerald) */
  --pv-badge-fg: #ffffff;
  --pv-text-fg: #ffffff;
}

/* ---------- Section ---------- */
.pickup-visual {
  margin-block: clamp(28px, 6vw, 72px);
}

/* Make the section truly full-bleed when desired */
.pickup-visual[data-fullbleed="true"] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Media Wrapper ---------- */
.pickup-visual__media {
  position: relative;
  border-radius: var(--pv-radius);
  overflow: hidden;
  box-shadow: var(--pv-shadow);
  /* Aspect ratio wide for hero strip; adjusts on mobile below */
  aspect-ratio: 21 / 9;
}

/* Image should cover nicely */
.pickup-visual__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subtle bottom gradient for readability (even if caption is removed, harmless) */
.pickup-visual__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pv-caption-bg);
  pointer-events: none;
}

/* ---------- Caption (Optional) ---------- */
.pickup-visual__caption {
  position: absolute;
  inset-inline: clamp(16px, 4vw, 48px);
  inset-block-end: clamp(16px, 3vw, 40px);
  color: var(--pv-text-fg);
  z-index: 2;
  max-width: min(720px, 90%);
}

.pickup-visual__badge {
  display: inline-block;
  background: var(--pv-badge-bg);
  color: var(--pv-badge-fg);
  font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .3px;
  padding: 8px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.pickup-visual__caption h2 {
  margin: 0 0 6px 0;
  font: 700 clamp(20px, 4vw, 36px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.pickup-visual__caption p {
  margin: 0;
  font: 400 clamp(14px, 2.2vw, 18px)/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: .95;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .pickup-visual__media {
    aspect-ratio: 16 / 10; /* a bit taller on mobile for subject framing */
    border-radius: 0;       /* optional: edge-to-edge on small screens */
  }
}
/* TRUST BAR */




/* Make chips pop with strong colors */







/* Sticky WhatsApp Button (mobile) */
.whatsapp-sticky{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  background: #25D366; color: #fff;
  font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 14px; border-radius: 12px;
  text-align: center; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9999;

  /* start hidden, we’ll toggle with a class */
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.whatsapp-sticky img{ vertical-align: middle; margin-right: 8px; }

/* Only relevant on mobile */
@media (min-width: 769px){
  .whatsapp-sticky{ display: none; }
}

/* Visible state toggled by JS */
.whatsapp-sticky.is-visible{
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.urgency-box {
  display: inline-flex;
  align-items: center;   /* vertical centering */
  justify-content: center;
  gap: 6px;

  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;

  background: #fef9c3;   /* soft yellow */
  color: #92400e;        /* dark amber text */
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);

  white-space: nowrap;   /* prevents icon from breaking to a new line */
}

.urgency-icon {
  flex-shrink: 0;        /* icon never shrinks */
  font-size: 16px;
  line-height: 1;
}
/* Urgency line */
.urgency-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#eef2ff; color:#273176; /* soft indigo */
  font:600 13px/1.2 ui-sans-serif,system-ui;
  border:1px solid #d6dcff; box-shadow:0 1px 2px rgba(0,0,0,.06);
  margin:6px 0 10px;
}
.card-cta {
  display: block;
  margin: 14px auto 0;
  padding: 12px 16px;
  text-align: center;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.2s ease;
  max-width: 200px;
}

.card-cta:hover {
  background: #1ebe5d;
}
/* Popular card subtle highlight */
.card.popular{
  background: #f3fff7;            /* very light green */
  border: 2px solid #22c55e;       /* a touch thicker than the default */
}
.card.popular .badge{
  background:#22c55e;
}

/* Urgency pill (consistent style) */
.urgency-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; margin:6px 0 10px;
  border-radius:999px;
  background:#eef2ff;              /* soft indigo background */
  color:#273176;                    /* readable indigo text */
  font-weight:600; font-size:13px;
  border:1px solid #d6dcff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* Pricing card CTA */
.card-cta{
  display:block; margin:14px auto 0; max-width:220px;
  text-align:center; padding:12px 16px;
  background:#25D366; color:#fff; font-weight:800; font-size:15px;
  border-radius:10px; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .15s ease, background .15s ease;
}
.card-cta:hover{ background:#1ebe5d; transform:translateY(-1px); }

/* Slight visual priority on the popular CTA (optional) */
.card-cta--primary{
  box-shadow:0 8px 20px rgba(34,197,94,.35);
}
.duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0;
  color: #374151; /* neutral gray */
}

.duration-icon {
  font-size: 16px;
  line-height: 1;
}

.duration-label {
  color: #6b7280; /* lighter gray for label */
  font-weight: 500;
}

.duration-value {
  color: #111827; /* darker for emphasis */
  font-weight: 600;
  
}

/* 1. Prevent horizontal scroll on body */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}


/* ===== HERO FIXES (override head <style>) ===== */
.hero{
  position: relative;
  height: 90svh !important;     /* mobile-safe viewport */
  min-height: 600px !important; /* prevents squashed hero */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* background image */
.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* dark overlay + inner centering */
.hero-overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem; /* tighter on mobile */
}

/* text container */
.hero-content{
  color: #fff;
  max-width: 640px;
  width: min(100%, 640px);
  text-align: center;           /* center on mobile for balance */
}

@media (min-width: 768px){
  .hero-content{ text-align: left; }
}

/* tidy up heading sizes and conflicts */
.hero h1{
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.15;
  margin-bottom: .4rem;
}
.hero h2{
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 600;
  opacity: .95;
  margin-bottom: .5rem;
}
.hero p{
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  opacity: .95;
  margin-bottom: 1rem;
}

/* === [PATCH 2025-08-28] Force pricing stacked layout ===================== */
/* Override pricing layout to stack vertically on all screens. */

.pricing-cards {
  display: flex;
  flex-wrap: wrap !important;
  gap: 20px;
  justify-content: center;
}

.pricing .card,
.card {
  flex: 1 1 100% !important;
  max-width: 760px;
  margin-inline: auto;
}

.card .price {
  white-space: normal !important;
  overflow: visible !important;
}

.badge {
  top: 10px;
  right: 10px;
}

@media (max-width: 768px) {
  .pricing-cards {
    flex-wrap: wrap !important;
  }
  .pricing .card,
  .card {
    flex: 1 1 100% !important;
  }
}

.pricing h2 { margin-bottom: 8px; }
.pricing .subtitle { margin-bottom: 24px; }
.card .price { margin: 12px 0; }
/* === END PATCH ============================================================ */



/* === Reviews: side-by-side image + text === */
.review-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.review-content {
  flex: 1 1 auto;
}

.review-image img {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}

/* Tighten spacing inside review cards when side-by-side */
.review-card h3 { margin-top: 0; }

@media (max-width: 640px) {
  .review-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .review-image img {
    margin-top: 0.5rem;
  }
}


/* === Reviews: stacked text above image === */
.review-card {
  display: block;
}

.review-content {
  margin-bottom: 0.75rem;
}

.review-image img {
  width: 100%;
  max-width: 280px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}



/* === Reviews: text above image, image full width === */
.review-card {
  display: block;
}

.review-content {
  margin-bottom: 1rem;
}

.review-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  display: block;
}



/* === Reviews: align name, stars, date, flag, verified left === */
.review-card {
  text-align: left;
}

.review-card h3,
.review-card .rating,
.review-card .meta,
.review-card .verified-tag {
  text-align: left;
  justify-content: flex-start;
}
.mini-trust {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .9rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  padding: .4rem .8rem;
  border-radius: .6rem;
  color: #0e0d0d;
  max-width: 420px;
}

.stars {
  color: #FFD700;
  font-size: .9rem;
  letter-spacing: 2px;
}

.text {
  font-style: italic;
  opacity: .95;
}

@media (max-width: 640px) {
  .mini-trust { font-size: .8rem; }
}
.tour-snapshot-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.2rem;
  max-width: 1000px;
  margin: 2rem auto;
  padding: .5rem 1rem;
  font-size: 1rem;
  color: #222;
}

.snapshot-item {
  background: #f8f8f8;
  padding: .4rem .8rem;
  border-radius: .5rem;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.story-tour {
  display: grid;
  gap: 3rem;
  margin: 3rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}

.story-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.story-step img {
  width: 100%;
  height: 300px; /* or any fixed height you want */
  object-fit: cover; /* crops instead of squishing */
  border-radius: 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.story-text h3 {
  font-size: 1.4rem;
  margin-bottom: .6rem;
}

.story-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 768px) {
  .story-step {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* Single-column, ultra-compact vertical stack */
.itinerary-stack{
  --bg:#f6f7f8;      /* light greish */
  --ink:#2e3033;
  --muted:#60666d;
  --line:#e6e9ee;
  --pill:#eaf0ff;
  --pill-border:#d8e2ff;
  --accent:#1f46ba;
  --radius:12px;

  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  max-width:740px;
  margin:16px auto;
  padding:16px 12px;
  border-radius:var(--radius);
}

.itinerary-stack h2{
  text-align:center;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  margin:0 0 12px;
  color:#3c4043;
  font-weight:700;
  letter-spacing:.2px;
}

/* Vertical list */
.it-list{
  list-style:none;
  margin:0;
  padding:0 0 0 14px;     /* room for the slim timeline line */
  position:relative;
}

/* Timeline spine */
.it-list::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:2px;
  background:var(--line);
  border-radius:2px;
}

.it-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;        /* tight spacing */
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  margin:6px 0;            /* compact separation */
  position:relative;
  min-height:38px;
}

/* Node dot on the spine */
.it-row::before{
  content:"";
  position:absolute;
  left:-18px;              /* centers over spine */
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  background:#fff;
  border:2px solid #9aa3ad;
  border-radius:50%;
}

/* Time pill (small but bold) */
.it-time{
  flex:0 0 auto;
  min-width:64px;
  text-align:center;
  font-weight:800;
  font-size:clamp(.78rem,2.4vw,.92rem);
  color:var(--accent);
  background:var(--pill);
  border:1px solid var(--pill-border);
  border-radius:999px;
  padding:4px 8px;
}

/* Text stays on one line when possible; wraps if needed */
.it-text{
  flex:1 1 auto;
  font-size:clamp(.86rem,2.6vw,1rem);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink);
}

/* Hover (desktop) */
@media (hover:hover){
  .it-row:hover{
    border-color:#d8dde6;
    transform:translateY(-1px);
    transition:all .12s ease;
  }
}

/* Optional: extra-dense mode – add class 'dense' on .itinerary-stack if you want it even tighter */
.itinerary-stack.dense .it-row{ padding:6px 8px; margin:4px 0; min-height:34px; }
.itinerary-stack.dense .it-time{ min-width:58px; padding:3px 7px; }
.pricing-compact{
  --bg:#f6f7f8;
  --card:#fff;
  --ink:#2e3033;
  --muted:#6b7280;
  --line:#e7eaee;
  --accent:#1f46ba;
  --accent-2:#3f6eea;
  --green:#22c55e;
  --radius:14px;

  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  max-width:1000px;
  margin:16px auto;
  padding:16px 12px;
  border-radius:var(--radius);
}

.pricing-compact h2{
  text-align:center;
  font-size:clamp(1.1rem,2.6vw,1.5rem);
  margin:0 0 6px;
  color:#3c4043;
  font-weight:800;
}
.pricing-sub{
  text-align:center;
  margin:0 0 14px;
  color:var(--muted);
  font-size:.95rem;
}

.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px; /* tight for single-scroll */
}

.price-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.price-card.best{ outline:2px solid #dfe7ff; }

.card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  justify-content:space-between;
}
.card-head h3{
  margin:0;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:.2px;
}
.card-head .sub{
  margin:2px 0 0;
  color:var(--muted);
  font-size:.9rem;
}
.badge{
  margin-right:auto;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.4px;
  color:#0b3;
  background:#eafaf0;
  border:1px solid #d9f3e1;
  border-radius:999px;
  padding:4px 8px;
  line-height:1;
}

.price-row{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:8px 0 8px;
}
.price-row {
  display: flex;
  align-items: baseline; /* keeps $ and numbers aligned nicely */
  gap: 2px; /* little space between them */
}

.currency,
.amount {
  font-size: clamp(1.8rem, 6vw, 3rem); /* same size for both */
  font-weight: 900;
  letter-spacing: .2px;
}

.unit{
  color:var(--muted);
  font-size:.9rem;
}

.inc{
  list-style:none;
  margin:8px 0 10px;
  padding:0;
  display:grid;
  gap:6px;
}
.inc li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
}
.inc li::before{
  content:\"\"; width:8px; height:8px; border-radius:50%;
  background:#dbe4ff; border:1px solid #cdd8ff;
}

.cta-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  font-weight:800;
  font-size:.95rem;
  text-decoration:none;
  text-align:center;
  color:var(--ink);
}
.btn-primary{
  background:linear-gradient(180deg,#ebf1ff,#e3ecff);
  border-color:#cfdcff;
  color:#1f46ba;
}
.btn-outline{
  background:#fff;
  border-color:#dfe3ea;
}
.btn:hover{ transform:translateY(-1px); transition:transform .12s ease; }

.tiny{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
}

.fineprint{
  margin:8px 4px 0;
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
}

/* Desktop: keep it tight but side-by-side for faster comparison */
@media (min-width: 760px){
  .pricing-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .price-card{ padding:14px; }
}
.reviews-compact{
  --bg:#f6f7f8;
  --card:#fff;
  --ink:#2e3033;
  --muted:#6b7280;
  --line:#e7eaee;
  --accent:#1f46ba;
  --radius:14px;

  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  max-width:1100px;
  margin:16px auto;
  padding:16px 12px;
  border-radius:var(--radius);
}

.reviews-compact h2{
  text-align:center;
  font-size:clamp(1.1rem,2.6vw,1.5rem);
  margin:0 0 14px;
  color:#3c4043;
  font-weight:800;
}

/* GRID: 1 col mobile, 2 cols desktop */
.reviews-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 840px){
  .reviews-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
}

/* CARD */
.review-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* HEADER (no photo) */
.rev-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rev-title{
  display:flex;
  align-items:center;             /* keeps stars aligned with name baseline */
  gap:10px;
  flex-wrap:wrap;
}
.rev-name{
  font-weight:800;
  letter-spacing:.2px;
  margin-right:2px;
}
.rev-stars{
  display:inline-flex;
  align-items:center;             /* ensures vertical centering */
  gap:3px;
  transform: translateY(1px);     /* tiny optical alignment tweak */
}
.star{ width:16px; height:16px; fill:#f5b301; flex:0 0 auto; }

.rev-meta{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:.92rem;
}
.rev-flag{
  width:16px; height:12px; object-fit:cover;
  border-radius:2px; border:1px solid #dfe3ea;
}
.dot{ opacity:.6; }

/* IMAGE */
.rev-image{
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  height:220px;              /* <-- fixed medium height */
}

.rev-image img{
  width:100%;
  height:100%;               /* fill the container */
  object-fit:cover;          /* crop instead of squish */
  display:block;
}

/* TEXT */
.rev-text{
  margin:0;
  font-size:.98rem;
  line-height:1.45;
  color:var(--ink);
}

/* Tight mode option if you need it */
.review-card.tight .rev-text{ font-size:.94rem; line-height:1.38; }
.faq{
  --bg:#f6f7f8;
  --card:#fff;
  --ink:#2e3033;
  --muted:#6b7280;
  --line:#e0e3e8;
  --accent:#1f46ba;

  background:var(--bg);
  max-width:800px;
  margin:20px auto;
  padding:20px 14px;
  border-radius:14px;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.faq h2{
  text-align:center;
  font-size:1.5rem;
  margin-bottom:16px;
  font-weight:800;
  color:#3c4043;
}

.faq-list details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:10px;
  transition:all .15s ease;
}

.faq-list details[open]{
  border-color:#cdd4e0;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}

.faq-list summary{
  font-weight:700;
  cursor:pointer;
  color:var(--ink);
  list-style:none;
}

.faq-list summary::marker,
.faq-list summary::-webkit-details-marker{ display:none; }

.faq-list summary::after{
  content:"+";
  float:right;
  font-weight:700;
  transition:transform .2s;
}

.faq-list details[open] summary::after{
  content:"–";
  transform:rotate(180deg);
}

.faq-list p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.4;
}
.urgency{
  --bg:#f6f7f8;
  --card:#fff;
  --ink:#2e3033;
  --muted:#6b7280;
  --line:#e6eaf0;
  --accent:#1f46ba;
  --green:#22c55e;
  --orange:#f59e0b;
  --red:#ef4444;
  --radius:14px;

  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  max-width:800px;
  margin:18px auto 0;
  padding:18px 14px;
  border-radius:var(--radius);
}

.urgency h2{
  text-align:center;
  font-size:1.45rem;
  margin:0 0 6px;
  font-weight:900;
  color:#3c4043;
}
.urg-sub{
  text-align:center;
  margin:0 0 14px;
  color:var(--muted);
}

/* Stat chips */
.urg-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:12px;
}
.chip{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.chip .chip-label{ color:var(--muted); font-size:.9rem; }
.chip .chip-value{ font-size:1rem; letter-spacing:.2px; }
.chip.warn{ border-color:#fdecc8; background:#fff9ed; }
.chip.warn .chip-value{ color:var(--orange); }
.chip.danger{ border-color:#ffd9d9; background:#fff5f5; }
.chip.danger .chip-value{ color:var(--red); }

/* Capacity bar */
.capacity{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.cap-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cap-title{ font-weight:800; }
.cap-meta{ color:var(--muted); font-size:.92rem; }

.cap-bar{
  height:10px; border-radius:999px;
  background:#eef2f7; overflow:hidden; position:relative;
  border:1px solid #e3e7ef;
}
.cap-fill{
  height:100%;
  background:linear-gradient(90deg, #cfe0ff, #9fb9ff);
  width:0%;
  transition:width .3s ease;
}
.cap-note{ margin:8px 0 0; color:var(--muted); font-size:.9rem; }

/* CTA */
.urg-cta{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:12px;
}
.btn{
  display:inline-block; text-decoration:none; text-align:center;
  padding:10px 16px; border-radius:10px; font-weight:800; font-size:.98rem;
  border:1px solid var(--line); color:var(--ink); background:#fff;
}
.btn-primary{
  background:linear-gradient(180deg,#ebf1ff,#e2ebff);
  border-color:#cfd8ff; color:var(--accent);
}
.btn-outline{ background:#fff; border-color:#dfe4ec; }
.btn:hover{ transform:translateY(-1px); transition:transform .12s ease; }
.urg-guarantee{ margin:2px 0 0; color:var(--muted); font-size:.9rem; text-align:center; }

/* Keep it single scroll on all screens */
@media (min-width: 700px){
  .urg-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.final-cta{
  --bg:#1f46ba;  /* deep blue to pop */
  --ink:#fff;
  --muted:#cdd7f9;
  --radius:16px;

  background:var(--bg);
  color:var(--ink);
  text-align:center;
  padding:40px 18px;
  margin:24px auto 0;
  border-radius:var(--radius);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.final-cta h2{
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:900;
  margin:0 0 10px;
}

.cta-sub{
  margin:0 0 20px;
  font-size:1.05rem;
  color:var(--muted);
}

.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  padding:12px 18px;
  border-radius:12px;
  font-size:1rem;
  min-width:200px;
  transition:all .15s ease;
}

.btn-primary{
  background:#fff;
  color:#1f46ba;
  border:1px solid #fff;
}
.btn-primary:hover{ transform:translateY(-2px); }

.btn-outline{
  background:transparent;
  border:1px solid #fff;
  color:#fff;
}
.btn-outline:hover{ background:rgba(255,255,255,.1); }

.cta-guarantee{
  margin:0;
  font-size:.95rem;
  color:var(--muted);
}

/* Side-by-side buttons on larger screens */
@media (min-width: 700px){
  .cta-actions{ flex-direction:row; justify-content:center; }
}
.price-banner {
  background: #f8fafc;
  padding: 1.5rem 0;
  text-align: center;
  border-radius: 0.75rem;
  margin: 1.5rem auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.price-banner .price-box h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #222;
}

.price-banner .price-box .highlight {
  color: #0ea5e9; /* nice blue accent */
}

.price-banner .price-box p {
  font-size: 1rem;
  color: #444;
  margin: 0;
}
.quick-snapshot {
  background: #f9fafb;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
}

.quick-snapshot .container {
  max-width: 900px;
  margin: 0 auto;
}

.snapshot-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.snapshot-list li {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.snapshot-list .icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.snapshot-list li.highlight {
  border: 2px solid #007f5f;
  background: #f0fdfa;
}

.btn-cta {
  display: inline-block;
  background: #007f5f;
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.2s ease;
  font-size: 0.95rem;
}

.btn-cta:hover {
  background: #00654c;
}

.cta-center {
  text-align: center;
}
/* Highlight the BEST (Full-Day $45) card */
.price-card.best {
  position: relative;
  border: 2px solid #0b8f6a;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 45%);
  box-shadow: 0 14px 30px rgba(11,143,106,0.18), 0 6px 12px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.price-card.best .card-head {
  position: relative; /* ensure badge anchors correctly */
}

.price-card.best .card-head h3 {
  color: #0b8f6a;
}

.price-card.best .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #0b8f6a;
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(11,143,106,0.35);
}

/* Make the price row bolder on the best card */
.price-card.best .price-row .amount {
  color: #0b8f6a;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.price-card.best .price-row .currency,
.price-card.best .price-row .unit {
  color: #0b8f6a;
  opacity: .9;
}

/* Checklist ticks emphasis */
.price-card.best .inc li {
  position: relative;
  padding-left: 1.3rem;
}
.price-card.best .inc li::before {
  content: "✓";
  color: #0b8f6a;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

/* CTA button stronger on best card */
.price-card.best .btn-cta {
  background: #0b8f6a !important;
  border-color: #0b8f6a !important;
  box-shadow: 0 8px 18px rgba(11,143,106,0.35);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.price-card.best .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11,143,106,0.45);
  filter: brightness(1.02);
}

/* Subtle floating highlight on hover for entire card */
.price-card.best:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,143,106,0.22), 0 8px 18px rgba(0,0,0,0.08);
}

/* Optional: animated glow ring behind the badge */
.price-card.best .badge::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(11,143,106,0.25);
  animation: pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(11,143,106,0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(11,143,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(11,143,106,0); }
}

/* Mobile: keep the emphasis but don’t overpower */
@media (max-width: 640px) {
  .price-card.best {
    transform: none;
  }
  .price-card.best:hover {
    transform: none;
  }
}

/* =========================================
   Zanzibar Travel Planning – Pillar Page CSS
   File: zanzibar-planning.css
   Scope: Only classes used in the provided HTML
   ========================================= */

/* ---------- Design Tokens ---------- */
:root{
  --brand:#0f766e;        /* teal */
  --brand-2:#14b8a6;      /* light teal */
  --dark:#0b1324;
  --muted:#64748b;
  --bg:#f8fafc;
  --white:#ffffff;
  --accent:#f59e0b;       /* amber */
  --shadow: 0 8px 24px rgba(2,8,23,.06);
}

/* ---------- Base ---------- */
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.65;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout Wrappers ---------- */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Hero ---------- */
.hero {
  /* If you have a global hero bg, you can override: */
  background: linear-gradient(0deg, rgba(15,118,110,.85), rgba(15,118,110,.85)), 
              url('/images/znz-hero.jpg') center/cover no-repeat;
  color: #fff;
}
.hero-inner { padding: 64px 0; }
.eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #bbf7d0;
  margin: 0 0 6px;
}
.hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  margin: 8px 0 10px;
}
.lead {
  font-size: clamp(18px, 2.2vw, 20px);
  color: #e6fffb;
  max-width: 900px;
  margin: 0 0 14px;
}
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 6px 16px rgba(15,118,110,.18);
}
.btn-primary:hover { box-shadow: 0 10px 22px rgba(15,118,110,.24); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- Trustbar ---------- */
.trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.trustbar div{
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

/* ---------- TOC ---------- */
.toc {
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 18px;
  margin-top: -24px;
}
.toc h2 { font-size: 18px; margin: 0 0 10px; }
.toc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.toc-grid a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--dark);
  text-decoration: none;
}
.toc-grid a:hover { background: #e2e8f0; }

/* ---------- Sections / Headings ---------- */
section { margin: 40px 0; }
h2 { font-size: 28px; margin: 0 0 10px; line-height: 1.25; }
h3 { font-size: 20px; margin: 24px 0 6px; line-height: 1.35; }
.muted { color: var(--muted); }

/* ---------- Cards & Grids ---------- */
.card {
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }

.pill {
  display: inline-block;
  background: #ecfeff;
  color: #0e7490;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Notes / Highlights ---------- */
.note {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.highlight {
  background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,0));
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  border-radius: 8px;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(2,8,23,.05);
}
thead th {
  background: #f1f5f9;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
}
tbody td {
  background: #fff;
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  vertical-align: top;
}

/* ---------- CTA Block ---------- */
.cta-block {
  background: linear-gradient(90deg, #064e3b, #0f766e);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-block .btn { box-shadow: 0 6px 24px rgba(0,0,0,.2); }

/* ---------- Utility ---------- */
.kbd {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 16px; }
}
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .trustbar { grid-template-columns: repeat(2,1fr); }
  .toc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
  .hero-inner { padding: 48px 0; }
  .cta-row { gap: 10px; }
}