/* Reset default margins and padding for full-width layout */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;   /* Prevents any horizontal scroll/white gap */
  font-family: "Quicksand", sans-serif;
}

/* Header Container */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 110px;
  background-color: #fff;
}

/* Logo */
.logo-img {
  height: 90px;
  width: auto;
  margin-top: 20px;
}

/* Nav Menu */
.nav-menu {
  margin-left: auto;
}

.nav-menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 45px;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav-menu ul li a {
  text-decoration: none;
  color: #333;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-size: 1.06em;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}

/* Underline effect - now thinner */
.nav-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;                    /* thinner underline */
  background-color: #143a74;
  transform: translateX(-50%);
  transition: width 0.5s ease;
}

/* Zoom and underline on hover */
.nav-menu ul li a:hover {
  color: #143a74;
  transform: scale(1.05);
}

.nav-menu ul li a:hover::after {
  width: 100%;
}

/* Hide mobile button on desktop */
.menu-item {
  display: none;
}

/* Circular Hamburger Button */
    .hamburger-btn {
      width: 50px;
      height: 50px;
      background-color: #1f2937;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      z-index: 50;
    }

    .hamburger-btn:hover {
      background-color: #374151;
    }

    /* Lines */
    .hamburger-icon {
      width: 24px;
      height: 24px;
      position: relative;
      transition: all 0.4s ease;
    }

    .line {
      position: absolute;
      width: 24px;
      height: 3px;
      background-color: white;
      border-radius: 3px;
      transition: all 0.4s ease;
    }

    /* Line 1 (top) */
    .line1 { top: 4px; }
    /* Line 2 (middle) */
    .line2 { top: 10.5px; }
    /* Line 3 (bottom) */
    .line3 { top: 17px; }

    /* When active → becomes X */
    .hamburger-btn.active .line1 {
      top: 10.5px;
      transform: rotate(45deg);
    }
    .hamburger-btn.active .line2 {
      opacity: 0;
    }
    .hamburger-btn.active .line3 {
      top: 10.5px;
      transform: rotate(-45deg);
    }

    /* Mobile Menu */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #111827;
      transform: translateX(-100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 40;
      padding-top: 90px;
    }

    .mobile-menu.open {
      transform: translateX(0);
    }

    .mobile-menu a {
      display: block;
      padding: 20px 30px;
      color: white;
      font-size: 1.3rem;
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid #374151;
      transition: background 0.2s;
    }

    .mobile-menu a:hover {
      background-color: #1f2937;
    }

    /* Overlay */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.65);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 30;
    }

    .overlay.show {
      opacity: 1;
      visibility: visible;
    }
/* ====================== HERO VIDEO SECTION ====================== */

.hero-video {
  position: relative;
  width: 100%;
  min-width: 100%;                  /* Extra safety for full width */
  height: calc(100vh - 110px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  left: 0;
  right: 0;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* This is key for no gaps */
  z-index: 1;
}

/* Dark overlay to make text readable */
.hero-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.12);   /* Adjust darkness if needed */
  z-index: 2;
}

/* Hero Text Container */
.hero-overlay {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3;
  width: 90%;
  max-width: 900px;
}

.hero-overlay h1 {
  font-family: "Playfair Display", serif;
  font-size: 3.2rem;
  line-height: 1.2;
  margin-bottom: 30px;
  font-weight: 700;
}

.hero-line1 {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1em;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: white;
  opacity: 0.98;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-line2 {
  display: block;
  font-family: "Corinthia", cursive;
  font-size: .7em;
  letter-spacing: 1.5px;
  color: white;
  margin-top: 10px;
  opacity: 0.98;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Primary Button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  color: white;
  padding: 16px 36px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 1.1rem;
  transition: all 0.35s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.btn-primary i {
  font-size: 1.1em;
  transition: all 0.35s ease;
  opacity: 0.9;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: white;
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover i {
  opacity: 1;
  transform: translateX(6px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: -1;
}

.btn-primary:active::before {
  width: 300px;
  height: 300px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 768px) {
  .hero-overlay h1 {
    font-size: 2.4rem;
  }
  
  .hero-line1 {
    font-size: 2.1rem;
  }
  
  .btn-primary {
    padding: 14px 32px;
    font-size: 1.05em;
  }
}

@media (max-width: 480px) {
  .hero-overlay h1 {
    font-size: 2rem;
  }
  
  .hero-line1 {
    font-size: 1.8rem;
  }
}

/* ====================== TEXT SECTIONS ====================== */
.after-video,
.intro-text,
.destinations-section {
  text-align: center;
  background: white;
}

.after-video {
  padding: 80px 0;
}

.after-video h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  color: #143a74;
  margin-bottom: 20px;
}

.after-video p {
  font-size: 1.2rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.features {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.feature {
  flex: 1;
  min-width: 250px;
  padding: 20px;
}

.feature h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #143a74;
  margin-bottom: 10px;
}

.feature p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* ====================== INTRO TEXT SECTION ====================== */

.intro-text {
  padding: 60px 20px 40px;
  margin-top: 0;
}

.intro-heading {
  margin-top: 0;
}

.safari-line {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin: 0 auto 20px;
  line-height: 1.3;
  max-width: 900px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.weve-line {
  font-family: "Corinthia", cursive;
  font-size: 2.8rem;
  font-weight: 700;
  color: black;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 1.2px;
}

/* Move "We’ve got Yours" slightly higher on mobile only */
@media (max-width: 768px) {
  .weve-line {
    margin-top: -8px;
  }
}

@media (max-width: 480px) {
  .weve-line {
    margin-top: -12px;
  }
}

.intro-body {
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  color: #444;
}

/* Mobile spacing after video */
@media (max-width: 768px) {
  .intro-text {
    padding: 70px 15px 50px;
  }
}

@media (max-width: 480px) {
  .intro-text {
    padding: 80px 15px 40px;
  }
}

.destinations-section {
  padding: 80px 20px;
  margin-top: -20px;
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.2;
}

.section-subtitle {
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.aesthetic-lines-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}

.line {
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  border-radius: 2px;
}

.line-long {
  width: 160px;
}

.line:not(.line-long) {
  width: 80px;
}

/* ====================== CARDS SECTION ====================== */
.destinations-cards {
  padding: 80px 20px;
  background: white;
  margin-top: -105px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.cards-grid {
  align-items: start;
}
/* ====================== FLIP CARDS ====================== */

.flip-card {
  align-self: start;
  perspective: 1200px;
  height: 460px;
  width: 100%;
  min-height: 460px;
  max-height: 460px;
  transform-origin: center center;
  transform-style: preserve-3d;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: center center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}

.flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.74)), var(--back-image, #000000);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: left;
  overflow: hidden;
  pointer-events: auto;
  z-index: 2;
}

.flip-card-back .card-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* increase 0.6 for more darkness */
}
/* Image & Overlay styles */
.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
  z-index: 0;
}

.card-overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: white;
  padding: 50px 20px 30px;
  text-align: center;
  transition: all 0.4s ease;
}

.card-overlay h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Back content */
.back-content {
  width: 100%;
  max-width: 320px;
  position: relative;
  z-index: 2;
  max-height: 100%;
  overflow: hidden;
}

.back-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 20px;
  color: white;
}

.back-list {
  list-style: none;
  margin: 0 0 25px 0;
  padding: 0 0 0 12px;
}

.back-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: white;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.3s ease;
}

.back-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.back-list li:hover {
  color: #72a2e9; /* Your desired hover text color */
  transform: translateY(-4px);
}

.btn-small {
  display: inline-block;
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-small:hover {
  background-color: #000000;
  transform: translateY(-3px);
}

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

  .flip-card {
    height: 400px;
  }
}

/* TESTIMONIALS SECTION */
.testimonials-section {
  padding: 40px 0;
  background: #f9f7f3;
  text-align: center;
}

.testimonials-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #1a3c34;
  margin-bottom: 16px;
}

.testimonials-slider-section .section-heading1 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin: 0 auto 20px;
  line-height: 1.3;
  max-width: 900px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.testimonials-slider-section .section-subtitle1 {
  font-family: "Corinthia", cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: black;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 1.2px;
}

.testimonials-section .section-subtitle {
  font-size: 18px;
  color: #5d5d5d;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.testimonial-card {
  background: white;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  border: 1px solid #eee;
}

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

.testimonial-quote p {
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 20px;
  position: relative;
}

.testimonial-quote p::before,
.testimonial-quote p::after {
  content: '"';
  font-size: 60px;
  color: black;
  font-family: 'Georgia', serif;
  position: absolute;
  opacity: 0.2;
}

.testimonial-quote p::before {
  top: -20px;
  left: -10px;
}

.testimonial-quote p::after {
  content: '"';
  bottom: -40px;
  right: -10px;
}

.testimonial-author {
  font-weight: 600;
  color: #1a3c34;
  margin-bottom: 8px;
}

.testimonial-author em {
  font-weight: 400;
  color: #888;
  font-size: 14px;
}

.testimonial-stars {
  color: #f4c542;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 12px;
}

.testimonial-badge {
  display: block;
  margin: 60px auto 40px;
  max-width: 400px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.testimonial-badge:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.testimonial-badge p {
  font-size: 16px;
  color: #1a3c34;
  margin-bottom: 8px;
}

.badge-stars {
  color: #f4c542;
  font-weight: bold;
  font-size: 18px;
}

.badge-stars span {
  color: #888;
  font-weight: normal;
  font-size: 15px;
  margin-left: 8px;
}

.badge-logo {
  height: 24px;
  margin-top: 10px;
}

.testimonials-cta {
  margin-top: 20px;
}

/* TESTIMONIALS SLIDER */
.testimonials-slider-section {
  padding: 40px 0;
  background: white;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.testimonials-slider-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #1a3c34;
  margin-bottom: 16px;
}

.testimonials-slider-section .section-subtitle {
  font-size: 18px;
  color: #5d5d5d;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.testimonial-slide {
  min-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.testimonial-card {
  background: white;
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(245, 245, 245, 0.1);
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #d3d3d3;
}

.testimonial-quote p {
  font-style: italic;
  font-size: 19px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 24px;
  position: relative;
}

.testimonial-quote p::before,
.testimonial-quote p::after {
  content: '"';
  font-size: 80px;
  color: rgb(154, 198, 216);
  font-family: 'Georgia', serif;
  position: absolute;
  opacity: 0.15;
  line-height: 1;
}

.testimonial-quote p::before {
  top: -30px;
  left: -20px;
}

.testimonial-quote p::after {
  content: '"';
  bottom: -50px;
  right: -20px;
}

.testimonial-author {
  font-weight: 600;
  color: #1a3c34;
  font-size: 17px;
  margin-bottom: 8px;
}

.testimonial-author em {
  font-weight: 400;
  color: #888;
  font-size: 15px;
}

.testimonial-stars {
  color: #f4c542;
  font-size: 20px;
  letter-spacing: 3px;
  margin-top: 16px;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8a8a8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
  background: rgb(108, 182, 211);
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .testimonial-card {
    padding: 30px 25px;
  }
}

/* Mobile adjustments for headings */
@media (max-width: 768px) {
  .testimonials-slider-section .section-heading1 {
    font-size: 1.3rem; /* Reduced from 2.2rem */
    max-width: 100%;   /* Ensures it fits smaller screens */
  }

  .testimonials-slider-section .section-subtitle1 {
    font-size: 1.3rem; /* Adjust this to fit your preference */
    margin-bottom: 30px; /* Optional: reduce bottom margin for tighter mobile look */
  }
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.slider-prev, .slider-next {
   background: transparent;
   color: #555;
   border: 1px solid #aaa;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: border-color 0.2s, transform 0.2s;
}

.slider-prev:hover, .slider-next:hover {
    border-color: #143a74;
    transform: scale(1.08);
}

.slider-prev:active, .slider-next:active {
    transform: scale(0.95);
}

.slider-track {
  display: flex;
  width: 100%;
}

.testimonial-slide {
  min-width: 100%;
}

.testimonial-badge {
  margin-top: -5px;     /* Adjust this number */
  margin-bottom: 40px;
}

.our-impact-section {
  padding: 10px 0;
  background: rgb(214, 210, 210);
  text-align: center;
}

.impact-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
}

.impact-subtitle {
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  color: #2b2b2b;
  max-width: 700px;
  margin: 0 auto 60px;
  line-height: 1.7;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.impact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.impact-item:hover {
  transform: translateY(-6px);
}

.impact-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.impact-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(36%) sepia(67%) saturate(440%) hue-rotate(122deg) brightness(93%) contrast(90%);
}

.impact-number {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: rgb(80, 80, 185);
  margin-bottom: 8px;
  line-height: 1;
}

.impact-text {
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  color: #222222;
  line-height: 1.5;
  max-width: 200px;
}

.impact-wrapper {
  position: relative;
  padding: 100px 0;
}

.impact-bird {
  position: absolute;
  top: 50px;
  left: 80px;
  width: 300px;
  height: auto;
  z-index: 1;
  opacity: .15;
}

.impact-lion {
  position: absolute;
  bottom: 10px;
  right: 0px;
  width: 400px;
  height: auto;
  z-index: 1;
  opacity: .2;
}

@media (max-width: 768px) {
  .impact-bird,
  .impact-lion {
    display: block;           /* Show on mobile */
    opacity: 0.12;            /* Slightly more transparent on small screens */
  }
  
  /* Make images smaller on mobile so they don't overwhelm */
  .impact-bird {
    width: 180px;
    top: 200px;
    left: 20px;
    width: 200px;
    height: auto;
  }
  
  .impact-lion {
    width: 220px;
    bottom: 20px;
    right: 0px;             /* Adjusted for mobile */
    width: 300px;
    height: auto;
  }
}

.impact-grid {
  position: relative;
  z-index: 2;
}

.impact-images {
  position: relative;
  z-index: 1;
  margin-top: -120px;
  padding-top: 80px;
}

/* ====================== WHY TRAVEL WITH US ====================== */
.why-us-section {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.why-us-section .section-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 16px;
  position: relative;
}

.why-us-section .section-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 20px auto;
  border-radius: 1px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto 50px;
}

.why-card {
  background: #fdfdfd;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
  transition: all 0.4s ease;
  border: 1px solid #f0f0f0;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: #143a74;
}

.why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #f8f8f8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #eee;
}

.why-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.why-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: #000000;
  margin-bottom: 12px;
  font-weight: 700;
}

.why-card p {
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  color: #2c2c2c;
  line-height: 1.7;
  margin: 0;
}

.why-card p strong {
  color: #143a74;
}

.why-cta {
  margin-top: 20px;
}

.why-cta .btn-primary {
  background: #143a74;
  color: white;
  border: none;
  padding: 16px 36px;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(46,139,87,0.3);
  transition: all 0.3s ease;
}

.why-cta .btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(46,139,87,0.4);
}

@media (max-width: 768px) {
  .why-us-section {
    padding: 80px 15px;
  }
  .why-us-section .section-heading {
    font-size: 2.4rem;
  }
  .why-us-grid {
    gap: 30px;
  }
  .why-card {
    padding: 28px 20px;
  }
}

/* ====================== LODGES — LEFT TEXT + RIGHT HORIZONTAL SCROLL ====================== */

.lodges-horizontal-section {
  padding: 100px 20px;
  background: #ffffff;
}

/* Move Lodges Section Up */
.lodges-horizontal-section {
  margin-top: -80px;     /* This pulls the whole section upward */
  padding-top: 60px;     /* Keeps good internal spacing */
}

.lodges-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.lodges-text {
  flex: 0 0 32%;
  min-width: 280px;
  position: sticky;
  top: 120px;
  align-self: flex-start;
}

.lodges-text .section-heading {
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.lodges-scroll-container {
  flex: 1;
  min-width: 0;                   /* allow the flex item to shrink below its content width */
  overflow-x: auto;
  overflow-y: hidden;             /* horizontal only — never scroll this box vertically */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #161616 #e5e5e5;
  padding-bottom: 20px;
  border-radius: 16px;
}

/* Custom scrollbar styling */
.lodges-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.lodges-scroll-container::-webkit-scrollbar-track {
  background: #e5e5e5;
  border-radius: 10px;
}

.lodges-scroll-container::-webkit-scrollbar-thumb {
  background: #143a74;
  border-radius: 10px;
}

.lodges-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #1e5a9e;
}

.lodges-track {
  display: flex;
  gap: 28px;
  padding: 10px 10px 30px 10px;   /* extra bottom padding for scrollbar */
  width: max-content;
}

.lodge-card {
  flex: 0 0 320px;                    /* Fixed card width */
  min-width: 320px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.lodge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  cursor: pointer;
}

.lodge-image {
  height: 240px;
  overflow: hidden;
}

.lodge-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.lodge-card:hover .lodge-image img {
  transform: scale(1.05);
}

.lodge-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 24px 24px 8px;
  font-weight: 600;
  color: #000;
}

.lodge-card p {
  font-size: 15px;
  color: #666;
  margin: 0 24px 20px;
  flex: 1;
}

.btn-small1 {
  margin: 0 24px 24px;
  align-self: flex-start;
  display: inline-block;
  color: black;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-small1:hover {
  background-color: #000000;
  color: white;
  transform: translateY(-1px);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1024px) {
  .lodges-horizontal {
    flex-direction: column;
    align-items: stretch;   /* otherwise the scroll container sizes to its track and never scrolls */
    gap: 50px;
  }

  .lodges-text {
    position: static;
    flex: none;
    text-align: center;
    width: 100%;
  }

  .lodges-scroll-container {
    width: 100%;
    max-width: 100%;
  }

  .lodge-card {
    flex: 0 0 300px;
    min-width: 300px;
  }
}

@media (max-width: 768px) {
  .lodges-scroll-container {
    padding-bottom: 15px;
  }
  
  .lodge-card {
    flex: 0 0 280px;
    min-width: 280px;
  }
  
  .lodge-image {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .lodge-card {
    flex: 0 0 260px;
    min-width: 260px;
  }
}

/* ====================== LIFE-CHANGING MOMENTS HERO ====================== */

.experiences-hero {
  padding: 120px 20px;
  background: linear-gradient(to bottom, #ffffff 0%, #f5f2ed 100%);
  position: relative;
  overflow: hidden;
}

.experiences-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

/* LEFT SIDE - IMAGES */
.moment-images {
  flex: 1;
  position: relative;
  height: 620px;
  min-width: 45%;
}

/* Image containers */
.moment-image-container {
  position: absolute;
  overflow: hidden;
}

.moment-image-1 {
  top: 0;
  left: 30%;
  width: 50%;
  height: 60%;
  z-index: 1;
}

.moment-image-2 {
  bottom: 33px;
  right: 0;
  width: 58%;
  height: 45%;
  z-index: 2;
}

.moment-image-3 {
  top: 40%;
  left: 10px;
  width: 50%;
  height: 45%;
  z-index: 3;
}

.moment-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

/* RIGHT SIDE - TEXT */
.moment-text-container {
  flex: 1;
  max-width: 520px;
  padding-left: 20px;
  padding-top: -100px
}

.moment-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  line-height: 1.15;
  color: #444;
  margin-bottom: 16px;
}

.moment-subtitle {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.35rem;
  color: #143a74;
  margin-bottom: 28px;
  font-weight: 500;
}

.moment-body {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #444;
  margin-bottom: 40px;
}

.btn-moment {
  display: inline-block;
  color: black;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-moment:hover {
  background-color: #000000;
  color: white;
  transform: translateY(-1px);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1024px) {
  .experiences-hero-inner {
    gap: 50px;
  }
  
  .moment-images {
    height: 520px;
  }
  
  .moment-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .experiences-hero {
    margin-top: -140px;     /* ← ONLY THIS WAS CHANGED - moved much higher */
    padding-top: 20px;
    padding-bottom: 80px;
  }

  .experiences-hero-inner {
    flex-direction: column;
    gap: 50px;
    text-align: center;
  }
  
  .moment-text-container {
    padding-left: 0;
    max-width: 100%;
  }
  
  .moment-images {
    width: 100%;
    height: 480px;
    margin: 0 auto;
  }
  
  /* Center the images on mobile */
  .moment-image-1 { width: 65%; left: 0; }
  .moment-image-2 { width: 55%; right: 0; bottom: 30px; }
  .moment-image-3 { width: 35%; left: 32%; top: 42%; }
}

/* SITE FOOTER */
.site-footer {
  background: #19314e;
  color: #e0e0e0;
  padding: 80px 0 30px;
  font-size: 15px;
  line-height: 1.7;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}

.footer-col h3.footer-heading {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: white;
  margin: 0 0 20px;
  position: relative;
}

.footer-col h3.footer-heading::after {
  content: '';
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  display: block;
  margin-top: 10px;
}

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

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #b8d8d0;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.footer-links a:hover {
  color: white;
}

.footer-brand .footer-logo {
  margin-bottom: 20px;
}



.footer-tagline {
  font-size: 15px;
  color: #b8d8d0;
  margin: 0 0 24px;
  line-height: 1.6;
}

.footer-tagline strong {
  color: white;
  font-style: italic;
}

.footer-awards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-awards img {
  height: 60px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.footer-newsletter .newsletter-text {
  font-size: 14px;
  color: #b8d8d0;
  margin-bottom: 16px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: none;
  border-radius: 30px;
  font-size: 14px;
  background: rgba(255,255,255,0.15);
  color: white;
  backdrop-filter: blur(5px);
}

.newsletter-form input::placeholder {
  color: #ccc;
}

.newsletter-form input:focus {
  outline: 2px solid #2e8b57;
}

.btn-newsletter {
  background: #2e8b57;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-newsletter:hover {
  background: #1a5f3a;
  transform: translateY(-2px);
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-social a {
  color: #b8d8d0;
  font-size: 18px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: white;
}

.whatsapp-cta {
  background: #25D366;
  color: white !important;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.whatsapp-cta:hover {
  background: #1ebe57;
  transform: translateY(-2px);
}

.footer-impact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 30px;
  font-size: 15px;
}

.impact-item {
  text-align: center;
  min-width: 140px;
}

.impact-item strong {
  display: block;
  font-size: 24px;
  color: #2e8b57;
  font-weight: 700;
  margin-bottom: 4px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: #999;
}

.footer-copyright {
  font-weight: 500;
  margin-left: 5%;
}

.footer-copyright strong {
  color: white;
}

.footer-certifications {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-right: 5%;
}

.footer-certifications img {
  height: 40px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-col.footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 60px 0 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form input,
  .btn-newsletter {
    width: 100%;
  }
  .footer-social {
    justify-content: center;
  }
}

/* ====================== YOUR REQUESTED FOOTER CHANGES ====================== */

/* 1. 5px margin on the sides of the entire footer content */
.site-footer .container {
  margin-left: 35px;
  margin-right: 15px;
}

/* 2. Reduce size of Top Nature logo + make it perfectly circular */
.footer-logo-circle {
  width: 85px;                  /* smaller size */
  height: 85px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  margin-bottom: 20px;
}

.footer-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  transform: scale(1.18);       /* bigger logo, circle size unchanged */
}

/* 3. Partners section - "Some of our top clients..." + horizontal circular logos */
.footer-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.partners-text {
  font-size: 15px;
  color: #b8d8d0;
  white-space: nowrap;
  font-weight: 500;
}

.partners-logos {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-wrapper {
  width: 68px;                  /* reasonable size */
  height: 68px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.logo-wrapper:hover {
  transform: scale(1.08);
}

.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.logo-nasa {
  width: 50px !important;
  height: 50px !important;
}

.logo-samsung {
  width: 50px !important;
  height: 50px !important;
}

.logo-microsoft {
  width: 70px !important;
  height: 70px !important;
}

.logo-airbnb {
  width: 55px !important;
  height: 55px !important;
}

/* ====================== MOVED AWARDS TEXT BESIDE LOGO ====================== */

.footer-brand-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.footer-awards {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-award-img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.award-text {
  font-size: 14px;
  line-height: 1.4;
  color: #b8d8d0;
}

/* Brand name styling */
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.brand-subtitle {
  font-size: 15px;
  color: #b8d8d0;
  font-weight: 500;
}

/* Center logo + awards text on mobile only */
@media (max-width: 600px) {
  .footer-brand {
    text-align: center;
  }

  .footer-brand-inner {
    justify-content: center;
  }

  .footer-awards {
    justify-content: center;
  }
}

.safari-finder-btn {
  position: fixed;
  right: -65px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1400;
  pointer-events: auto;
}

.safari-finder-btn .safari-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  background: #25477a;
  color: rgb(255, 255, 255);
  padding: 14px 20px;
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  text-decoration: none;
  font-weight: 400;
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.safari-finder-btn .safari-icon {
  font-size: 18px;
  line-height: 1;
}

.safari-finder-btn .safari-btn:hover {
  transform: rotate(-90deg) translateX(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .safari-finder-btn {
    right: 16px;
    top: auto;
    bottom: 18px;
    transform: none;
    display: flex;
    justify-content: center;
    width: auto;
  }
  .safari-finder-btn .safari-btn {
    transform: none;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 14px;
  }
}

/* Hide the floating "Find Your Safari" button on phones and tablets */
@media (max-width: 1024px) {
  .safari-finder-btn {
    display: none !important;
  }
}

/* Reduce newsletter input & button size on mobile */
@media (max-width: 600px) {
  .newsletter-form input {
    padding: 10px 14px;
    font-size: 14px;
    min-width: auto;
  }

  .btn-newsletter {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ====================== MOVE AWARDS TEXT BESIDE LOGO ====================== */

.footer-brand-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-awards {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.footer-award-img {
  height: 48px;
  width: auto;
}

.award-text {
  font-size: 14.5px;
  line-height: 1.35;
  color: #b8d8d0;
}

/* Brand name styling */
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  font-weight: 700;
  color: white;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 15.5px;
  color: #b8d8d0;
}

/* Reduce width of email input and subscribe button on mobile */
@media (max-width: 600px) {
  .newsletter-form {
    flex-direction: column;   /* keeps them stacked */
    gap: 10px;
  }

  .newsletter-form input {
    width: 85%;               /* narrower than full width */
    max-width: 280px;         /* limits how wide it gets */
    margin: 0 auto;           /* centers it */
    padding: 11px 16px;
    font-size: 14px;
  }

  .btn-newsletter {
    width: 35%;               /* same narrower width as input */
    max-width: 280px;
    margin: 0 auto;           /* centers the button */
    padding: 11px 20px;
    font-size: 14px;
  }
}

/* Fix logos inside circular wrappers */
.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
}

/* Optional: make NASA and JP Morgan slightly larger if needed */
/*.logo-wrapper--nasa .partner-logo {
  object-position: center;
}*/

/*.logo-wrapper--jpmorgan .partner-logo {
  object-position: center;
}*/

/* ====================== DESTINATIONS HERO ====================== */
.destinations-hero-image {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Centered Text ── */
.hero-overlay-text {
  position: relative;
  z-index: 10;
  text-align: center;
  transform: translateY(-250px);
}

.hero-overlay-text h1 {
  line-height: 1.1;
  margin-bottom: -25px;
}

.hero-overlay-text .line1 {
  display: inline;
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 500;
  color: #111;
}

.hero-overlay-text .line2 {
  display: inline;
  font-family: "Corinthia", cursive;
  font-size: 4rem;
  color: #143a74;
}

.hero-tagline {
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  color: #555;
  letter-spacing: 1px;
}

/* ── Image Container ── */
.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Base image style ── */
.custom-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
}

/* ── Individual image sizes and positions ── */
.img-1 {
  width: 200px;
  height: 330px;
  bottom: 14%;
  left: 5%;
}

.img-2 {
  width: 200px;
  height: 360px;
  bottom: 13%;
  left: 25%;
}

.img-3 {
  width: 200px;
  height: 260px;
  bottom: 17%;
  right: 5%;
}

.img-4 {
  width: 290px;
  height: 400px;
  bottom: 17%;
  right: 30%;
}

.img-5 {
  width: 100px;
  height: 180px;
  top: 1%;
  right: 15%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {

  /* 🔥 Hide original scattered images ONLY on mobile */
  .img-1, .img-2, .img-3, .img-4 {
    display: none;
  }

  /* Slideshow container – pulled out of the flex row so it can't be
     squeezed by the heading; always centred horizontally below the text */
  .mobile-slideshow {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    width: 90%;
    height: min(400px, 50vh); /* shrinks on short phones instead of overlapping the text */
    border-radius: 12px;
    overflow: hidden;
  }

  /* Slides – contain so the whole animal is always visible (no side cropping) */
  .mobile-slideshow .slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .mobile-slideshow .slide.active-slide {
    opacity: 1;
  }
}

/* ====================== DESTINATIONS CONTENT SECTION ====================== */

.destinations-content {
  position: relative;
  padding: 100px 50px; /* 🔥 50px side margin like you wanted */
  overflow: hidden;
  background-color: #e4e4e4;
}

/* Center heading */
.section-title {
  text-align: center;
  margin-bottom: 50px;
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #111;
}

/* Text block */
.content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto; /* 🔥 centers text */
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  color: #222222;
  letter-spacing: 1px;
}

/* Background images base */
.bg-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  z-index: 1;
  opacity: 0.9;
}

/* 🔥 TOP RIGHT IMAGE */
.bg-img-3 {
  width: 220px;
  height: 220px;
  top: 40px;
  right: 50px;
}

/* 🔥 BOTTOM LEFT IMAGE */
.bg-img-1 {
  width: 320px;
  height: 580px;
  bottom: 40px;
  left: 50px;
  opacity: 0.6;
}

/* Soft overlay for readability */
.bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

/* ====================== MOBILE ====================== */

@media (max-width: 768px) {

  .destinations-content {
    padding: 60px 20px;
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .content-wrapper {
    max-width: 100%;
  }

  /* Resize and reposition images */
  .bg-image {
    width: 180px;
    height: 180px;
  }

  /* top-right stays */
  .bg-img-3 {
    top: 20px;
    right: 10px;
    opacity: 0.5;
  }

  /* bottom-left stays */
  .bg-img-1 {
    bottom: 320px;
    left: 30px;
    width: 240px;
    height: 450px;
  }
}

/* ========================================
   DESTINATIONS GRID - 3 CARDS PER ROW
   Titles at bottom center (transparent)
======================================== */

.destinations-grid-section {
  padding-top: 80px;
  padding-bottom: 5px;
  background: #f8f9fa;
}

.cards-section-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  margin-bottom: 50px;
  font-size: 2.3rem;
  color: #1a1a1a;
  font-weight: 700;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card Styling */
.destination-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Image */
.destination-card img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 10;        /* You can change this later */
  object-fit: cover;
}

/* Title at bottom center - No background */
.card-title {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0px 18px;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: white;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* ========================
   INDIVIDUAL CARD HEIGHTS
   ======================== */
.card-height-1  { height: 360px; }
.card-height-2  { height: 500px; }
.card-height-3  { height: 360px; }
.card-height-4  { height: 500px; }
.card-height-5  { height: 360px; }
.card-height-6  { height: 500px; }
.card-height-7  { height: 360px; }
.card-height-8  { height: 500px; }
.card-height-9  { height: 360px; }
.card-height-10 { height: 500px; }
.card-height-11 { height: 360px; }
.card-height-12 { height: 500px; }

/* Move Card 4 and Card 6 up */
.card-height-4 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-6 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-10 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-12 {
  margin-top: -140px;   /* Adjust this value if needed */
}

/* Responsive */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 576px) {
  .destinations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cards-section-title {
    font-size: 1.9rem;
  }
  
  .card-title {
    font-size: 1.22rem;
    padding: 6px 16px;
    bottom: 16px;
  }
}

/* ========================================
   SINGLE CARD SECTION 
   Same width and style as the grid cards
======================================== */

.single-card-section {
  padding-top: 5px;
  background: #f8f9fa;
  padding-bottom: 80px;
}

.single-card {
  max-width: 500px;
  margin: 0 75px 0 auto;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #d4d4d4;
}

.single-card-content {
  padding: 20px 20px;
  text-align: left;
}

.single-card-content h3 {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: #1a1a1a;
  margin-bottom: 5px;
  font-weight: 700;
  line-height: 1.2;
}

.single-card-content p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 5px;
  font-family: "Quicksand", sans-serif;
}

.view-details-link {
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  padding: 12px 28px;
  color: #143a74;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: underline;
}

/* Make it responsive */
@media (max-width: 768px) {
  .single-card-content {
    padding: 35px 30px;
  }

  .single-card {
    max-width: 90%;
    margin: 0 auto;           /* Centered */
  }
}
  
  .single-card-content h3 {
    font-size: 1.85rem;
  }
  
  .single-card-content p {
    font-size: 1.05rem;
  }

/* ========================================
   MOBILE: 2 CARDS PER ROW
   Same width + Individual heights
======================================== */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 cards per row */
    gap: 8px;
  }
  
  /* Keep individual heights working on tablet & mobile */
  .destination-card {
    width: 100%;           /* Ensures same width */
  }
}

@media (max-width: 576px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);   /* Still 2 per row on small phones */
    gap: 6px;
  }
  
  .cards-section-title {
    font-size: 1.9rem;
  }
  
  .card-title {
    font-size: 1.15rem;
    bottom: 15px;
    padding: 0 12px;
  }
}

/* ========================================
   MOBILE RESPONSIVE - 2 CARDS PER ROW
   Titles fit inside + Individual heights + Positioning
======================================== */

@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  /* Make sure titles fit properly inside cards on mobile */
  .card-title {
    font-size: 1.1rem;           /* Smaller font so it fits better */
    bottom: 15px;                /* Slightly higher from bottom */
    padding: 0 12px;
    white-space: normal;         /* Allow text to wrap if needed */
    line-height: 1.3;
    max-width: 90%;              /* Prevent title from going outside */
  }

  /* Keep individual height control working */
  .destination-card {
    width: 100%;
    height: auto;                /* Important: allow custom heights */
  }

  /* Individual card heights still work on mobile */
  .card-height-1  { height: 320px; }
  .card-height-2  { height: 440px; }
  .card-height-3  { height: 440px; }
  .card-height-4  { height: 320px; }
  .card-height-5  { height: 320px; }
  .card-height-6  { height: 440px; }
  .card-height-7  { height: 440px; }
  .card-height-8  { height: 320px; }
  .card-height-9  { height: 320px; }
  .card-height-10 { height: 440px; }
  .card-height-11 { height: 440px; }
  .card-height-12 { height: 320px; }

  /* Allow moving cards up or down individually on mobile */
  .card-height-3 { margin-top: -120px; }   /* Example: move card 4 up */
  .card-height-4 { margin-top: 0px; }   /* Example: move card 6 up */
  .card-height-6 { margin-top: 0px; }
  .card-height-7 { margin-top: -120px; }
  .card-height-8 { margin-top: 0px; }
  .card-height-10 { margin-top: 0px; }
  .card-height-12 { margin-top: 0px; }
  .card-height-11 { margin-top: -120px; }

  /* You can adjust these values as needed */
}

.hero-line11,
.hero-line21 {
  display: block;
}

.hero-line21 {
  margin-top: 10px;   /* This puts the second line below the first */
}

.hero-line11 {
  font-family: "Playfair Display", serif;
  font-size: 1em;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: white;
  opacity: 0.98;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-line21 {
  display: block;
  font-family: "Corinthia", cursive;
  font-size: .7em;
  letter-spacing: 1.5px;
  color: white;
  margin-top: 10px;
  opacity: 0.98;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ========================================
   SMALL GROUP SAFARIS HEADER SECTION
======================================== */
.small-group-header3 {
  padding: 60px 0 40px;
  background: #eeeeee;
  text-align: center;
}

.container3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title3 h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.subtitle3 {
  font-size: 1.15rem;
  color: #1a1a1a;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ========================================
   TEXT LEFT + IMAGE + CAROUSEL RIGHT
======================================== */
.about-section2 {
  padding: 0px 0;
  background: #eeeeee;
  z-index: 2;
}

.about-image2 {
  position: relative;
  justify-self: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.container2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-grid2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  align-items: start;
}

/* Left Side - Text */
.about-text2 {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.about-text2 h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.highlight2,
.highlight22 {
  color: #143a74;
  font-weight: 700;
}

.package-details4 {
  margin: 30px 0;
}

.package-name4 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #143a74;
  margin-bottom: 20px;
}

.package-summary4 {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #1a1a1a;
  margin-bottom: 30px;
}

.detailed-info4 h4 {
  font-size: 1.25rem;
  margin: 25px 0 12px;
  color: #1a1a1a;
}

.highlights-bullets4,
.included-bullets4 {
  padding-left: 20px;
  margin-bottom: 20px;
}

.highlights-bullets4 li,
.included-bullets4 li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.accommodation-text4 {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a1a1a;
}

.package-price4 {
  margin: 20px 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.price4 {
  color: #1a1a1a;
}

.price-note4 {
  font-size: 1rem;
  color: #777;
  font-weight: normal;
}

.semi-private4 {
  margin-top: 10px;
}

.text-bg-imager {
  position: absolute;
  top: 160px;
  left: 0px;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.text-bg-imager img {
  width: 450px;
  height: 1000px;
}

.btn-primary2 {
  display: inline-block;
  margin-top: 5px;
  padding: 14px 32px;
  background: #000000;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-primary2:hover {
  background: #ffffff;
  color: black;
  border-color: black;
  transform: translateY(-2px);
}

/* Right Side - Image + Carousel */
.about-image2 {
  position: relative;
}

.about-image2 > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: block;
}

/* Carousel */
.image-side-carousel5 {
  margin-top: 14px;
  position: relative;
}

.carousel-track5 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.card5 {
  min-width: 280px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
}

.card5 img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  display: block;
}

.card-overlay5 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 15px 16px;
  background: none;
  color: white;
  text-align: center;
}

.card-overlay5 h3 {
  margin: 0 0 5px;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 3px 10px rgba(0,0,0,0.65);
}

.price5 {
  font-size: 0.95rem;
  opacity: 0.95;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 3px 10px rgba(0,0,0,0.65);
}

.card-hover-overlay23 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.97);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  overflow-y: auto;
}

.card5:hover .card-hover-overlay23 {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media (max-width: 992px) {
  .about-grid2 {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .text-bg-imager {
    display: none;
  }
}

@media (max-width: 576px) {
  .container2 {
    padding: 0 15px;
  }
  
  .about-text2 h2 {
    font-size: 2rem;
  }
}
.carousel-track5 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  overflow-x: scroll;
  overflow-y: hidden;    /* horizontal only — never scroll this box vertically */
  scroll-behavior: smooth;
  scrollbar-width: none; /* hide native scrollbar on Firefox */
  -ms-overflow-style: none; /* hide on IE */
}

.carousel-track5::-webkit-scrollbar {
  display: none; /* hide native scrollbar on Chrome/Safari */
}

.image-side-carousel5 {
  overflow: hidden;
  position: relative;
}

.carousel-scrollbar5 {
  width: 100%;
  height: 8px;
  background: #e5e5e5; /* match lodges track */
  border-radius: 10px;
  margin-top: 16px;
  position: relative;
  cursor: pointer;
}

.carousel-scrollbar-thumb5 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: #143a74; /* match lodges thumb */
  border-radius: 10px;
  cursor: grab;
}

.carousel-scrollbar-thumb5:hover {
  background: #1e5a9e; /* lodges thumb hover */
}

/* ====================== ABOUT SECTION ====================== */
.about-section {
  background: white;
  padding: 100px 40px;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Centered Title ── */
.about-text {
  text-align: center;
  margin-bottom: 0px;
  position: relative;
}

.about-text h2.title-underline {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}

.about-text h2.title-underline::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 12px auto 0;
}

/* ── Image + Paragraph side by side ── */
.about-bottom {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}

/* ── Irregular shaped image ── */
.about-image {
  flex: 1;
  min-width: 300px;
}

.about-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 30% 35% 35% 40% / 30% 45% 25% 30%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: block;
}

/* ── Paragraph on the right ── */
.about-bottom {
  flex: 1.2;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: #444;
  text-align: left;
  padding-top: -20px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .about-bottom {
    flex-direction: column;
  }

  .about-image img {
    height: 350px;
    border-radius: 50% 50% 40% 60% / 45% 55% 45% 55%;
  }
}

/* ====================== OUR STORY SECTION ====================== */
.our-story-section {
  background: white;
  padding: 20px 40px;
}

.story-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Centered Title ── */
.story-title {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.story-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 12px auto 0;
}

/* ── Image + Text side by side ── */
.story-content {
  display: flex;
  align-items: stretch;
  gap: 60px;
}

/* ── Left column: image grid + bottom image, stacked ── */
.story-image-column {
  flex: 1.5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── 3 column image grid ── */
.story-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 4px solid rgb(43, 43, 43);
}

/* ── Bottom image — same width/frame as the grid; fixed height, bottom-aligned with the text column via space-between on .story-image-column ── */
.story-bottom-image {
  width: 100%;
  flex: 0 0 auto;
  height: 380px;
  margin-top: 40px;
  object-fit: cover;
  display: block;
  border: 4px solid rgb(43, 43, 43);
}

/* ── Base image style ── */
.story-image-grid img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ── Individual image heights — adjust these freely ── */
.story-image-grid img:nth-child(1) { height: 380px; margin-top: 0px; }
.story-image-grid img:nth-child(2) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(3) { height: 380px; margin-top: 0px; }
.story-image-grid img:nth-child(4) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(5) { height: 440px; margin-top: -60px; }
.story-image-grid img:nth-child(6) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(7) { height: 380px; margin-top: -60px; }
.story-image-grid img:nth-child(8) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(9) { height: 380px; margin-top: -60px; }

/* ── Text on the right ── */
.story-text {
  flex: 1.2;
  min-width: 0;
}

.story-text p {
  font-family: "Quicksand", sans-serif;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #444;
  text-align: left;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .story-content {
    flex-direction: column;
  }

  .story-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-image-grid img {
    height: 120px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .story-content {
    flex-direction: column;
  }

  .story-image-column {
    width: 95vw; /* almost full screen width */
    flex: none;
    margin: 0 0 -10px -33px;
  }

  .story-image-grid img {
    height: 240px !important; /* increase image height on mobile */
    margin-top: 0 !important;
  }

  .story-bottom-image {
    flex: none;
    width: 100%;
    height: 240px;
    margin-top: 20px;
  }
}

/* ====================== TEAM SECTION ====================== */
.team-section {
  padding: 100px 0;
  background: #ffffff;
}

.team-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.team-title {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #0e0e0e;
  text-align: center;
  margin-bottom: 20px;
}

.team-intro {
  font-size: 1.1rem;
  font-family: "Quicksand", sans-serif;
  line-height: 1.8;
  color: #383838;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

.team-carousel-wrapper {
  position: relative;
  overflow: visible;          /* Must be visible so carousel-arrow scale hover isn't cut */
  padding: 0 10px;
}

/* Carousel Track */
.team-carousel {
  display: flex;
  gap: 30px;
  overflow: hidden;           /* Clips off-screen cards as the track translates */
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Team Cards */
.team-card {
  min-width: 340px;
  height: 480px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  cursor: pointer;
}

.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.25));
}

.team-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 30px 30px;
  color: white;
}

.team-card-content h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  margin-bottom: 12px;
}

.team-card-content .role {
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Arrows - More reliable selectors */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(26, 58, 52, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
}

.carousel-arrow:hover {
  background: #1a3c34;
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-left  { left: 8px; }
.carousel-arrow-right { right: 8px; }

/* Responsive */
@media (max-width: 992px) {
  .team-card { min-width: 310px; height: 450px; }
}

@media (max-width: 768px) {
  .team-carousel-wrapper { padding: 0 8px; }
  .team-card { min-width: 280px; height: 420px; }
}

/* ========================================
   CONTACT HERO SECTION
======================================== */

.contact-hero-q {
  position: relative;
  height: 680px;                    /* Overall section height */
  overflow: hidden;
  background: #ffffff;
}

.hero-container-q {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

/* ==================== LEFT IMAGE ==================== */
.hero-image-q {
  width: 520px;                     /* ← Change this to control width */
  height: 560px;                    /* ← Change this to control height */
  object-fit: cover;
  position: absolute;
  left: 40px;                       /* ← Move left/right */
  top: 60px;                        /* ← Move up/down */
  z-index: 1;
}

/* ==================== RIGHT IMAGE ==================== */
.hero-image-second {
  width: 680px;                     /* ← Change this to control width */
  height: 280px;                    /* ← Change this to control height */
  object-fit: cover;
  position: absolute;
  right: 40px;                      /* ← Move left/right */
  top: 250px;                        /* ← Move up/down */
  z-index: 2;
  opacity: 0.4;
}

/* ==================== TEXT OVER RIGHT IMAGE ==================== */
/* Overlay Content - Text on right image */
.overlay-content {
  position: absolute;
  top: 30px;           /* Controls how high the title and cards appear */
  left: 40%;           /* Controls how much to the left it moves */
  width: 54%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 50px;
  color: white;
  z-index: 3;
}

/* Dark overlay - you can adjust opacity */
.overlay-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Content above overlay */
.overlay-content > * {
  position: relative;
  z-index: 3;
}

/* Title above the cards */
.contact-title {
  font-family: "Playfair Display", serif;
  font-size: 3.4rem;
  margin-bottom: 55px;
  text-align: center;
  color: rgb(19, 19, 19);
}

.cards-wrapper {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 820px;
}

.info-card {
  background: rgba(182, 182, 182, 0.171);
  color: #1a1a1a;
  padding: 32px 28px;
  border-radius: 12px;
  flex: 1;
}

.info-card h3 {
  font-size: 1.28rem;
  margin-bottom: 20px;
  color: #111111;
}

.info-card p {
  font-size: 1.03rem;
  line-height: 1.78;
  color: #000000;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1100px) {
  .hero-image-q     { width: 460px; height: 500px; left: 30px; }
  .hero-image-second { width: 580px; height: 540px; right: 30px; }
}

@media (max-width: 992px) {
  .overlay-content {
    left: 48%;
    width: 52%;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .contact-hero-q {
    height: auto;
    min-height: 700px;
  }
  
  .hero-image-q,
  .hero-image-second {
    position: relative;
    width: 100%;
    height: 380px;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
  }
  
  .overlay-content {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    padding: 50px 20px;
    min-height: 400px;
  }
  
  .cards-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  
  .contact-title {
    font-size: 2.6rem;
  }
}

/* ========================================
   OFFICE CONTACT SECTION
   Contact Info Left | Form Right
======================================== */

.office-contact-section {
  padding: 30px 0;
  background: #ffffff;
  max-width: 1100px;
  margin: 0 auto;
}

.office-contact-section .office-card,
.office-contact-section .contact-form {
  box-sizing: border-box;
}

/* Main Grid Layout */
.office-contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* Left: Contact, Right: Form */
  gap: 80px;
  align-items: start;
}

/* Left Side - Office Contact Info */
.office-card {
  background: rgba(182, 182, 182, 0.171);
  padding: 50px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.office-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.85rem;
  color: #1a1a1a;
  margin-bottom: 25px;
}

.office-card p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: #1b1b1b;
}

/* Right Side - Contact Form */
.contact-form {
  background: rgba(182, 182, 182, 0.171);
  padding: 50px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #141414;
  font-size: 1.02rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1a3c34;
  box-shadow: 0 0 0 3px rgba(26, 60, 52, 0.1);
}

.contact-form button {
  width: 200px;
  padding: 12px;
  background: #000000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.1s ease;
}

.contact-form button:hover {
  background: #ffffff;
  color: black;
  border: 2px solid rgb(43, 43, 43);
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.contact-form .form-status {
  display: none;
  margin-top: 16px;
  font-weight: 600;
  color: #1a3c34;
}

.contact-form .form-status.show {
  display: block;
}

.contact-form .form-status.error {
  color: #b42318;
}

/* Responsive */
@media (max-width: 992px) {
  .office-contact-section {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .office-card,
  .contact-form {
    padding: 40px 30px;
  }
}

@media (max-width: 576px) {
  .office-contact-section {
    padding: 60px 15px;
  }
}

/* Desktop menu */
.desktop-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .desktop-menu {
    display: none !important;
  }
}

/* Circular Hamburger - Perfectly Centered Lines */
.hamburger-btn {
  width: 50px;
  height: 50px;
  background-color: #1f2937;
  border: none;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
}

.hamburger-btn:hover {
  background-color: #949494;
}

.hamburger-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.line0 {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.4s ease;
  left: -3px;
}

/* Centered lines */
.line1 { top: 5.5px; }
.line2 { top: 11.5px; }
.line3 { top: 17.5px; }

/* Transform to X when clicked */
.hamburger-btn.active .line1 {
  top: 11.5px;
  transform: rotate(45deg);
}
.hamburger-btn.active .line2 {
  opacity: 0;
}
.hamburger-btn.active .line3 {
  top: 11.5px;
  transform: rotate(-45deg);
}

/* Mobile Menu - No scrolling + clean */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  padding-top: 90px;
  overflow: hidden;           /* Prevents scrolling */
  display: flex;
  flex-direction: column;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu a {
  display: block;
  padding: 22px 30px;
  font-family: "Playfair Display", serif;
  color: rgb(32, 32, 32);
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
}

.mobile-menu a:hover {
  background-color: #1f2937;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 30;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
}

/* Mobile Menu Header - Logo at Top Right */
.mobile-menu-header {
  position: absolute;
  top: -5px;
  left: 10px;
  z-index: 10;
}

.mobile-menu-logo {
  height: 85px;        /* Adjust size as needed */
  width: auto;
  max-width: 160px;
}

/* Make sure the menu content doesn't overlap with logo */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  padding-top: 150px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Change X color to Red */
.hamburger-btn.active .line0 {
  background-color: #ff0000;   /* Red color */
}

.serengeti-hero {
  position: relative;
  width: 100%;
  height: 531px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.serengeti-hero-images {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;   /* Helps with vertical alignment */
}

.serengeti-hero-images img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

/* Individual image styles */
.simg-1 {
  width: 40%;           /* slightly wider for the first image */
  margin-left: -50px;
  transform: translateX(0px);
}

.simg-2 {
  width: 30%;           /* ← Reduced from 30% to 22% */
  transform: translateX(0px);
}

.simg-3 {
  width: 20%;
  transform: translateX(0px);
}

.simg-4 {
  width: 15%;
  transform: translateX(0px);
}

/* Overlay */
.serengeti-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 10, 0.048);
  z-index: 1;
}

/* Content */
.serengeti-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1.5rem;
  text-align: center;           /* Ensures centering */
  margin-top: -40px;
}

.serengeti-hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0 0 8px 0;
}

.serengeti-hero-text {
  font-family: "Corinthia", cursive;
  font-weight: 300;
  font-size: 2.5rem;
  color: #ffffff;
  max-width: 560px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin: 0 auto;
}



/* Serengeti Section Styles */
.serengeti-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.containerr {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gridd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
}

.section-titlesere {
  font-family: "Playfair Display", serif;
  font-size: 10px;
  font-weight: 300;
  color: #000000;
  margin-bottom: 40px;
  text-align: center;
  line-height: 1.1;
}

/* Left Side */
.left-sidee {
  display: flex;
  flex-direction: column;
}

.contentsere p {
  font-size: 18px;
  font-family: "Quicksand", sans-serif;
  line-height: 1.75;
  color: #444444;
  margin-bottom: 24px;
}

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

/* Right Side */
.right-sidee {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
}

.images-gridd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.image-cardd {
  width: 100%;
  aspect-ratio: 1 / 1;        /* Perfect square for circle */
  border-radius: 50%;         /* Circular frame */
  overflow: hidden;           /* Crops the image into circle */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;  /* Nice frame border */
  transition: transform 0.3s ease;
}

.image-cardd img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Important for zoom/crop */
  object-position: center center;   /* Default center - change this to move the image */
  transition: object-position 0.4s ease, transform 0.4s ease;
  transform: scale(1.25);
}

/* First image (plains) - more zoom, centered */
.images-gridd .image-cardd:first-child img {
  transform: scale(1.1);
  object-position: 50% 45%;
}

/* Second image (migration) - less zoom, shifted */
.images-gridd .image-cardd:last-child img {
  transform: scale(2);
  object-position: 80% 50%;   /* Shifted a bit to the right */
}

/* First circular image - LARGER size */
.image-cardd-first {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  max-width: 380px;           /* ← Increase this number to make it bigger */
  margin: 0 auto;             /* Centers the larger circle */
}

.image-cardd-first img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);      
  object-position: 50% 40%;   /* Change the second number to move UP/DOWN, first number to move LEFT/RIGHT */
}

/* Second circular image - Normal size */
.image-cardd-second {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
}

.image-card-second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);      
  object-position: 65% 50%;   /* Change these numbers to move the image */
}

/* Responsive Design */
@media (min-width: 992px) {
  .gridd {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  
  .section-titlesere {
    text-align: left;
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .serengeti-section {
    padding: 70px 0;
  }
  
  .section-titlesere {
    font-size: 36px;
  }
  
  .images-gridd {
    gap: 20px;
  }
  .right-sidee {
    margin-top: 40px;         /* Less shift on mobile */
  }
}

.images-gridd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: end; /* anchors both circles to the bottom so the smaller one sits lower */
}

/* First circular image - LARGER */
.image-cardd-first {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  max-width: 120px;       /* ← bigger than before */
  margin: 0 0 0 auto;     /* ← pushes it RIGHT instead of centering */
}

.image-cardd-first img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  object-position: 50% 40%;
}

/* Second circular image - SMALLER, overlapping */
.image-cardd-second {
  width: 200px;             /* ← reduced size */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  margin-left: -60px;     /* ← pulls it left to overlap the first image */
  z-index: 2;
  position: relative;
}

.image-cardd-second img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: scale(1);      /* ← more zoom to fill the smaller circle */
  object-position: 10% 40%;
}

.images-gridd {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* ← gives the left more room */
  gap: 25px;
  align-items: end;
}

.image-cardd-first {
  width: 420px;        /* ← use width instead of max-width */
  max-width: 620px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  margin: 0 0 0 auto;
}

/* Venture Content - Below the images */
.venture-content {
  margin-top: 50px;           /* Space between images and this text */
}

.venture-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 18px;
}

.venture-text {
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgb(32, 32, 32);
}

/* Viewport */
.safari-reel-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Strip */
.safari-reel-track {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 50px;
  transition: transform 0.72s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Inactive slide */
.reel-frame {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 480px;
  cursor: pointer;
}

.reel-frame.active {
  width: 800px;    
  height: 480px;
}

.reel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Nav */
.reel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
  padding: 6px 0;       /* gives scale(1.08) hover room so next section doesn't paint over the bottom */
}

.reel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(180, 148, 80, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #143a74;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  outline: none;
}

.reel-arrow:hover {
  background: rgba(180, 148, 80, 0.12);
  border-color: #143a74;
  transform: scale(1.08);
}

.reel-arrow:active { transform: scale(0.96); }

.reel-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reel-tally {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #131313;
  min-width: 60px;
  text-align: center;
}

/* Gallery Label / Title */
.gallery-label {
  text-align: center;
  margin: 0 auto 50px auto;     /* Centers it and adds space below */
  padding: 0 20px;
}

.gallery-label span {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  position: relative;
  display: inline-block;
}

/* Optional: Nice underline or accent */
.gallery-label span::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
}

.safari-reel-wrap {
  overflow: hidden;           /* Clips the sliding reel track */
}

.gallery-section {
  overflow: visible;          /* Must be visible so reel-arrow scale hover isn't cut */
}

.reel-arrow {
  flex-shrink: 0;             /* Prevents size issues */
}

.serengeti-allure-section {
  padding: 80px 20px 60px;
  background-color: #ffffff;
}

.allure-main-title {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 32px;
}

.highlights-grid {
  max-width: 1400px;
  margin: 0 auto 0 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 40px 30px;
}

.highlight-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(185, 185, 185, 0.15);
}

.highlight-card img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  margin-left: 20px;
  margin-top: 20px;
}

.card-content {
  padding: 32px 100px 36px 150px;
  text-align: left;
}

.card-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #143a74;
  margin-bottom: 8px;
  font-weight: 400;
}

.card-desc {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 24px;
}

.card-location {
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #777;
  margin-bottom: 28px;
}

.card-cta {
  width: 100%;
  padding: 13px 24px;
  background: #afafaf;
  color: rgb(32, 32, 32);
  border: none;
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-cta:hover {
  background: #d4d4d4;
}

.allure-main-title span::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
}

.regions-section {
  padding: 40px 20px 30px;
  position: relative;
  overflow: hidden;           /* Prevents images from spilling outside */
}

.regions-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  min-height: 450px;          /* Adjust this height as needed */
}

/* Background Images Container */
.regions-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
}

/* Free positioning for each image */
.region-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

/* === Individual Image Positioning === */
.region-1 {
  background-image: url('images/reg1.webp');
  width: 300px;
  height: 200px;
  bottom: 5%;
  left: 2%;
  opacity: 0.7;
}

.region-2 {
  background-image: url('images/reg2.webp');
  width: 565px;
  height: 330px;
  bottom: 0%;
  left: 28%;
  opacity: 0.7;
}

.region-3 {
  background-image: url('images/reg3.webp');
  width: 485px;
  height: 370px;
  bottom: 0%;
  left: 66%;
  opacity: 0.7;
}

/* Content on top */
.regions-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* Keep your existing title and text styles */
.regions-title {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  top: -10px;
}

.regions-title::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.regions-text {
  font-family: "Quicksand", sans-serif;
  font-size: 1.08rem;
  line-height: 1.78;
  color: #1b1b1b;
  padding: 15px 50px;
  border-radius: 12px;
}

.regions-text strong {
  font-weight: 700;           /* Makes it bolder */
  color: #1a1a1a;             /* Slightly darker for emphasis */
  /* Optional: you can also add underline or different color */
}

/* ═══════════════════════════════════════
   LODGES SECTION
═══════════════════════════════════════ */
.lodgeso-section {
  background: #f2f0ed;
  padding: 0 0 48px 0;
  overflow: hidden;
}

/* Viewport — clips cards */
.lodgeso-track-wrap {
  width: 100%;
  overflow: hidden;
}

/* Sliding track */
.lodgeso-track {
  display: flex;
  gap: 0;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}

/* ── Card ── */
.lodgeo-card {
  flex-shrink: 0;
  width: 25%;          /* 4 cards visible at once */
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* Top white label box */
.lodgeo-card-top {
  background: #ffffff;
  padding: 28px 24px 24px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #e8e4e0;
}

.lodgeo-region {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888880;
  margin-bottom: 16px;
  display: block;
}

.lodgeo-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: #2a2a2a;
  line-height: 1.3;
  margin: 0;
}

/* Image below the label */
.lodgeo-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.lodgeo-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.lodgeo-card:hover .lodgeo-card-image img {
  transform: scale(1.04);
}

/* ── Navigation ── */
.lodgeso-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.lodgeso-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #aaa;
  border-radius: 50%;
  background: transparent;
  color: #555;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  outline: none;
}

.lodgeso-arrow:hover {
  border-color: #333;
  transform: scale(1.08);
}

.lodgeso-arrow:active { transform: scale(0.95); }

.lodgeso-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lodgeso-tally {
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #555;
  min-width: 50px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL SCROLL-REVEAL  —  matches explore page style
   .reveal        = fade + slide up
   .reveal--left  = fade + slide in from left
   .reveal--right = fade + slide in from right
   .visible       = added by JS when element enters viewport
═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.82s ease, transform 0.82s ease;
}
.reveal--right {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.82s ease, transform 0.82s ease;
}
.reveal--left.visible,
.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--delay-1 { transition-delay: 0.13s; }
.reveal--delay-2 { transition-delay: 0.26s; }
.reveal--delay-3 { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS
   Covers all pages sharing styles.css
   992px = tablet  |  768px = mobile  |  480px = small phone
════════════════════════════════════════════════════════════════════ */

/* ─── 992px: Tablets ─────────────────────────────────────────────── */
@media (max-width: 992px) {

  /* Reel gallery frames */
  .reel-frame { width: 88vw; height: 54vw; max-height: 460px; }

  /* Lodgeso – 2 cards visible */
  .lodgeo-card { flex: 0 0 46%; }

  /* Experiences hero: stack vertically */
  .experiences-hero-inner { flex-direction: column; gap: 0; }
  .moment-images { height: 400px; min-width: unset; width: 100%; }
  .moment-text-container { min-width: unset; width: 100%; padding: 48px 32px; }

  /* Tour packages: about-text2 width hack fix */
  .about-text2 { width: 100% !important; }
  .about-image2 > img { width: 100% !important; max-width: 100% !important; }

  /* Directional reveals → vertical when stacked */
  .reveal--left,
  .reveal--right {
    transform: translateY(40px);
    transition: opacity 0.75s ease, transform 0.75s ease;
  }
  .reveal--left.visible,
  .reveal--right.visible { opacity: 1; transform: translateY(0); }

  /* Tour packages directional reveals → vertical when stacked */
  .about-grid2 > .about-text2,
  .about-grid2 > .about-image2,
  .about-grid2-rev > .about-image2,
  .about-grid2-rev > .about-text2 {
    transform: translateY(40px) !important;
    transition: opacity 0.75s ease, transform 0.75s ease !important;
  }
  .about-grid2 > .about-text2.visible,
  .about-grid2 > .about-image2.visible,
  .about-grid2-rev > .about-image2.visible,
  .about-grid2-rev > .about-text2.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ─── 768px: Mobile phones ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent any section from creating horizontal scroll */
  section, .container, .container2, .container3 {
    /* clip (not hidden) so the vertical axis stays `visible` —
       `overflow-x: hidden` forces overflow-y to compute to `auto`,
       which makes each section its own vertical scroll container */
    overflow-x: clip;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Containers ── */
  .container  { padding: 0 16px; }
  .container2 { padding: 0 16px; }
  .container3 { padding: 0 16px; }

  /* ── Section headings / typography ── */
  .section-title    { font-size: 1.8rem; }
  .section-heading  { font-size: 1.7rem; }
  .section-heading1 { font-size: 1.5rem; }
  .section-subtitle,
  .section-subtitle1 { font-size: 0.95rem; }
  .moment-title     { font-size: 2rem; }
  .impact-number    { font-size: 2.4rem; }
  .allure-main-title { font-size: 1.75rem; }
  .regions-title    { font-size: 1.7rem; }
  .regions-text     { font-size: 0.95rem; }
  .gallery-label span { font-size: 1.65rem; }
  .gallery-label    { margin-bottom: 28px; }

  /* ── Destination cards: 2 columns ── */
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* ── Why us: 2 columns ── */
  .why-us-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Impact numbers ── */
  .impact-number { font-size: 2.4rem; }

  /* ── Gallery / Reel carousel ── */
  .reel-frame { width: 80vw; height: 52vw; max-height: 320px; }
  .safari-reel-track { margin-left: 0 !important; gap: 10px; padding: 0 5vw; }

  /* ── Serengeti destination hero ── */
  .serengeti-hero { height: auto; min-height: 440px; }
  .serengeti-hero-images { opacity: 0.85; }
  .serengeti-hero-content { width: 100%; padding: 40px 20px; }
  .serengeti-hero-text { font-size: 1.5rem; max-width: 100%; }
  /* Three-image layout on mobile: hide simg-4, flex fills the gap proportionally */
  .simg-4 { display: none; }
  .simg-1 { flex: 40; width: auto; margin-left: 0; }
  .simg-2 { flex: 30; width: auto; }
  .simg-3 { flex: 20; width: auto; }
  .serengeti-section { padding: 48px 0; overflow-x: clip; }
  .containerr { max-width: 100%; box-sizing: border-box; padding: 0 22px; overflow-x: clip; }
  .gridd { max-width: 100%; box-sizing: border-box; }
  .left-sidee, .right-sidee { max-width: 100%; overflow: hidden; }
  .section-titlesere { font-size: 2.2rem !important; text-align: center; }
  .contentsere { padding: 0; }
  .contentsere p { font-size: 1rem; line-height: 1.75; }

  /* ── Circular image grid (destination pages) ── */
  .images-gridd { grid-template-columns: 1fr; justify-items: center; gap: 24px; padding: 0 12px; }
  .image-cardd-first  { width: min(300px, 78vw); margin: 0 auto; }
  .image-cardd-second { 
  width: min(240px, 70vw) !important; 
  height: min(240px, 70vw) !important; 
  margin: 0 auto !important; 
}
  .image-cardd-second img { width: 100% !important; height: 100% !important; }

  /* ── Highlights grid (Serengeti Allure section) ── */
  .serengeti-allure-section { padding: 56px 16px 36px; }
  .highlights-grid {
    grid-template-columns: 1fr;
    margin: 0 auto;
    gap: 20px;
  }
  .highlight-card { flex-direction: column; }
  .highlight-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    margin: 0;
    border-radius: 12px 12px 0 0;
  }
  .card-content { padding: 20px 18px; }

  /* ── Regions section (destination background images) ── */
  .regions-section { padding: 50px 16px; overflow: hidden; }
  .regions-container { min-height: auto; padding: 40px 0; }
  .regions-background { display: none; }
  .regions-content  { position: relative; max-width: 100%; }

  /* ── Tour packages ── */
  .about-text2 {
    width: 100% !important;
    padding: 24px 16px !important;
  }
  .about-image2 > img {
    width: 100% !important;
    max-width: 100% !important;
  }
  .text-bg-imager { display: none; }
  .about-section2 { padding: 32px 0; }
  .package-details4 { font-size: 0.95rem; }
  .package-name4 { font-size: 1rem; }
  .package-price4 { display: block; }

  /* ── Tour package page headers ── */
  .tp-pkg-header { padding: 36px 16px 22px; }
  .tp-pkg-header h2 { font-size: 1.7rem; }
  .tp-pkg-header p  { font-size: 0.92rem; }
  .small-group-header3 { padding: 36px 16px 22px; }
  .section-title3 h2 { font-size: 1.7rem; }

  /* ── Day cards carousel ── */
  .card5 { min-width: 240px; }
  .card5 img { height: 150px; }

  /* ── Lodgeso horizontal scroll (destination pages) ── */
  .lodgeo-card  { flex: 0 0 100%; }
  .lodgeo-name  { font-size: 1.2rem; }
  .lodgeso-section { padding: 0 0 36px; }
  
  /* ── Experiences hero ── */
  .experiences-hero-inner { flex-direction: column; gap: 0; }
  .moment-images { height: 340px; min-width: unset; width: 100%; }
  .moment-text-container { width: 100%; padding: 36px 20px; }
  .moment-body { font-size: 0.95rem; }

  /* ── Footer — see dedicated mobile block below ── */

  /* ── Remove stagger delays on mobile (all load together when scrolled) ── */
  .reveal--delay-1,
  .reveal--delay-2,
  .reveal--delay-3 { transition-delay: 0s; }
}

/* ─── 480px: Small phones ────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Typography ── */
  .section-title     { font-size: 1.5rem; }
  .section-heading   { font-size: 1.45rem; }
  .section-heading1  { font-size: 1.3rem; }
  .moment-title      { font-size: 1.65rem; }
  .allure-main-title { font-size: 1.4rem; }
  .regions-title     { font-size: 1.35rem; }
  .gallery-label span { font-size: 1.3rem; }
  .tp-pkg-header h2  { font-size: 1.4rem; }
  .section-title3 h2 { font-size: 1.4rem; }
  .impact-number     { font-size: 2rem; }
  .serengeti-hero-text { font-size: 1.25rem; }

  /* ── Gallery reel ── */
  .reel-frame { width: 85vw; height: 56vw; }

  /* ── Grids → 1 column ── */
  .cards-grid  { grid-template-columns: 1fr; }
  .why-us-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; gap: 14px; }

  /* ── Highlight card image ── */
  .highlight-card img { height: 180px; }
  .card-content { padding: 18px 14px; }

  /* ── Lodgeso ── */
  .lodgeo-card { flex: 0 0 100%; }

  /* ── Moment images ── */
  .moment-images { height: 260px; }

  /* ── Tour packages ── */
  .tp-pkg-header { padding: 28px 14px 18px; }
  .about-section2 { padding: 20px 0; }
  .tp-pkg-header h2 { font-size: 1.35rem; }
}

/* ─── FOOTER MOBILE REDESIGN ───────────────────────────────────────
   Brand    → full-width row 1 (centred)
   Explore + Connect → side-by-side row 2
   Newsletter → full-width row 3 (centred)
   Partners + Copyright → below grid
────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .site-footer { padding: 44px 0 16px; }

  /* Remove the left margin that looks off in a single column */
  .site-footer .container { margin-left: 0; margin-right: 0; padding: 0 18px; }

  /* 2-column grid — brand & newsletter will span both cols */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 24px;
  }

  /* ── Brand block: full width, centred ── */
  .footer-col.footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    padding: 0 12px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0;
  }
  .footer-brand-inner { justify-content: center; margin-bottom: 12px; }
  .footer-tagline { font-size: 0.9rem; margin-bottom: 16px; }
  .footer-awards { justify-content: center; margin-bottom: 0; }

  /* ── Explore + Connect: side by side ── */
  .footer-grid > .footer-col:nth-child(2) {
    padding: 24px 12px 24px 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-grid > .footer-col:nth-child(3) {
    padding: 24px 4px 24px 16px;
  }
  .footer-col h3.footer-heading { font-size: 0.9rem; margin-bottom: 12px; }
  .footer-links li { margin-bottom: 7px; }
  .footer-links a { font-size: 0.82rem; }

  /* ── Newsletter block: full width, centred ── */
  .footer-col.footer-newsletter {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 24px 12px 8px;
    text-align: center;
  }
  .newsletter-text { font-size: 0.88rem; margin-bottom: 12px; }
  .newsletter-form {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .newsletter-form input {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .btn-newsletter {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .footer-social {
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
  }
  .whatsapp-cta { margin-top: 4px; }

  /* ── Partners ── */
  .footer-partners {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 22px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .partners-text { white-space: normal; font-size: 0.82rem; }
  .partners-logos { justify-content: center; flex-wrap: wrap; gap: 10px; }
  .logo-wrapper { width: 56px; height: 56px; }

  /* ── Copyright bar ── */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding-top: 16px;
  }
  .footer-copyright {
    margin-left: 0;
    font-size: 0.75rem;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
═══════════════════════════════════════════════════════════ */
#scrollTopBtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 58, 116, 0.85);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  background: #143a74;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  #scrollTopBtn {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  /* Sit above the mobile "Plan Your Safari" sticky CTA bar (circuit pages)
     so the two floating elements never overlap/block each other. */
  .cp-sticky-cta ~ #scrollTopBtn {
    bottom: 84px;
  }
}

.cl-editorial {
  position: relative;
  overflow: hidden;
}

.cl-editorial__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cl-editorial__content {
  position: relative;
  z-index: 1;
}

/* 1. Ensure the track container enables horizontal scrolling and doesn't wrap */
.team-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth swiping on iOS */
  gap: 20px;                         /* Space between cards */
  padding: 10px 5px 20px 5px;        /* Keeps card shadows visible */
  width: 100%;
}

/* Optional: Clean, modern scrollbar styling */
.team-carousel::-webkit-scrollbar {
  height: 6px;
}

.team-carousel::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* 2. Fix the individual cards so they never shrink */
.team-card {
  flex: 0 0 320px !important;  /* CRITICAL: Prevents cards from shrinking */
  max-width: 320px;            /* Fixed width for desktop */
  box-sizing: border-box;
}

/* Mobile responsive sizing */
@media (max-width: 768px) {
  .team-card {
    flex: 0 0 85% !important;  /* Takes 85% of mobile screen width */
    max-width: 85%;
  }
}

@media (max-width: 768px) {
  .team-card h3 {
    font-size: 1.1rem !important; /* E.g., 16px or 17px equivalent */
  }
}

/* Small phones (e.g. Galaxy A55, ~384px): the longest card texts
   (first and last cards) overflow the fixed card height and get
   clipped at the top, so shrink the text and padding to fit. */
@media (max-width: 576px) {
  .team-section .team-card-content {
    padding: 22px 18px 20px;
  }

  .team-section .team-card-content h3 {
    font-size: 1rem !important;
    margin-bottom: 8px;
  }

  .team-section .team-card-content .role {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* ============================================================
   LARGE-SCREEN SCALING
   Design baseline is a 15.6" laptop (1366px viewport) — unchanged
   below this width. Beyond it, the whole page scales up smoothly
   so layouts built for 1366px fill bigger screens proportionally
   instead of staying pinned at the same size with empty space
   around them. Capped at 1.6x (~2186px) so very wide/4K monitors
   don't scale indefinitely.
============================================================ */
@media (min-width: 1367px) {
  html {
    zoom: clamp(1, calc(100vw / 1366px), 1.6);
  }
}