/* ==========================================================================
   Shiv Shankar Holidays — Globaldigitaz.com -9555049329

     1. Global        variables, header, nav, footer, buttons, sliders
     2. Hire a Guide  guide listing and profile
     3. Services      service listing and detail blocks
     4. Packages      package listing, cards and details
     5. Contact       contact page hero, forms, offices and map
     6. About Us      about page hero, story, timeline and team
     7. Gallery       gallery filter pills, masonry grid and lightbox
     8. Video Gallery featured film, video cards and modal player
   ========================================================================== */

/* ==========================================================================
   GLOBAL — variables, header, footer, hero, sliders, buttons, banners
   Used by every page.
   ========================================================================== */

:root {
  --primary-orange: #f26522;
  --secondary-dark: #001233;
  --text-dark: #333333;
  --text-muted: #666666;
  --bg-light: #f8f9fa;
  --white: #ffffff;
  --border-color: #e5e5e5;
  --transition: all 0.3s ease;
}

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

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background-color: var(--white);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

.container {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}

.section-padding {
  padding: 60px 0;
}

.bg-light {
  background-color: var(--bg-light);
}

/* ==========================================================================
   Header & Top Bar
   ========================================================================== */
.top-bar {
  background-color: var(--secondary-dark);
  color: var(--white);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info span, .top-right span {
  margin-right: 20px;
}

/* Thin divider between the top-bar contact items */
.contact-info span {
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-info i, .top-right i {
  color: var(--white);
  margin-right: 5px;
}

.top-right {
  display: flex;
  align-items: center;
}

.social-icons a {
  color: var(--white);
  margin-left: 12px;
  font-size: 14px;
}

.social-icons a:hover {
  color: var(--primary-orange);
}

.main-header {
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  display: block;
  height: 65px;
  width: auto;
}

.logo.on-dark {
  background: var(--white);
  border-radius: 10px;
  padding: 9px 13px;
}

.logo.on-dark img {
  height: 44px;
}

.nav-links {
  display: flex;
  gap: 22px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-dark);
  padding: 5px 0;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-orange);
}

.nav-links a i {
  font-size: 10px;
  margin-left: 3px;
}

/* ==========================================================================
   Hero Section & Quick Bar
   ========================================================================== */
.hero-section {
  position: relative;
  height: 520px;
  overflow: hidden;
  color: var(--white);
}

/* Each slide stacks on top of the others and cross-fades */
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  transition: opacity 0.8s ease, transform 6s ease, visibility 0.8s;
}

.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45));
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
  z-index: 10;
}

.slider-arrow:hover {
  background: var(--primary-orange);
  color: var(--white);
}

.prev-arrow { left: 20px; }
.next-arrow { right: 20px; }

.slider-arrow.sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.hero-tagline {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
}

.hero-tagline span {
  color: var(--primary-orange);
}

.hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  margin: 10px 0;
}

.hero-content .highlight {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  color: #ffb703;
}

.hero-desc {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 30px;
}

.hero-quick-bar {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
}

.quick-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  min-width: 118px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--secondary-dark);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: var(--transition);
}

.quick-item i {
  font-size: 22px;
  color: var(--secondary-dark);
  transition: var(--transition);
}

.quick-item:hover {
  background: var(--primary-orange);
  color: var(--white);
}

.quick-item:hover i {
  color: var(--white);
}

/* ==========================================================================
   Search Form Section
   ========================================================================== */
.search-section {
  padding: 0 0 40px;
  background: #fdfdfd;
}

/* Pulled up so the card overlaps the bottom of the hero, as in the design */
.search-box {
  position: relative;
  z-index: 6;
  margin-top: -45px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.search-box h3 span {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: var(--primary-orange);
  font-size: 26px;
  font-weight: normal;
}

.search-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.search-form {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
  gap: 15px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--secondary-dark);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary-orange);
}

.btn-search {
  background: var(--primary-orange);
  color: var(--white);
  border: none;
  padding: 11px 15px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-search:hover {
  background: #d95316;
  transform: translateY(-2px);
}

/* ==========================================================================
   Section Titles & Grids
   ========================================================================== */
.section-title {
  text-align: center;
  margin-bottom: 35px;
}

.section-title h2 {
  font-size: 28px;
  color: var(--secondary-dark);
  font-weight: 700;
}

.section-title h2 span {
  color: var(--primary-orange);
}

.title-divider {
  width: 60px;
  height: 2px;
  background: var(--primary-orange);
  margin: 8px auto 0;
  position: relative;
}

.title-divider span {
  width: 8px;
  height: 8px;
  background: var(--primary-orange);
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.text-left { text-align: left; }

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Buttons */
.btn-outline {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-dark);
  font-weight: 500;
  margin-top: 10px;
  transition: var(--transition);
}

.btn-outline:hover {
  background: var(--primary-orange);
  color: var(--white);
  border-color: var(--primary-orange);
}

.btn-orange {
  background: var(--primary-orange);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  transition: var(--transition);
}

.btn-orange:hover {
  background: #d95316;
  box-shadow: 0 4px 10px rgba(242, 101, 34, 0.3);
}

.btn-view-all {
  border: 1px solid var(--border-color);
  padding: 6px 15px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--white);
  transition: var(--transition);
}

.btn-view-all:hover {
  background: var(--primary-orange);
  color: var(--white);
}

/* ==========================================================================
   Destination Cards
   ========================================================================== */
.destination-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: center;
  transition: var(--transition);
}

.destination-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.destination-card .card-img {
  height: 160px;
  overflow: hidden;
}

.destination-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.destination-card:hover .card-img img {
  transform: scale(1.08);
}

.destination-card .card-info {
  padding: 15px 10px;
}

.destination-card h4 {
  font-size: 15px;
  color: var(--secondary-dark);
}

.destination-card p {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   Package Cards
   ========================================================================== */
.package-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.package-img {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.package-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.package-card:hover .package-img img {
  transform: scale(1.08);
}

.package-img .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary-orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
}

.package-content {
  padding: 15px;
}

.package-content h3 {
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--secondary-dark);
}

.package-features {
  margin-bottom: 15px;
}

.package-features li {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.package-features li i {
  font-size: 8px;
  color: var(--primary-orange);
  margin-right: 5px;
}

.package-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.package-footer .price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-orange);
}

/* ==========================================================================
   Cab Services Promotional Banner
   ========================================================================== */
.cab-banner {
  background: linear-gradient(90deg, #021e42 0%, #084170 100%);
  color: var(--white);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}

.cab-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cab-text .sub-head {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: var(--primary-orange);
  font-size: 22px;
}

.cab-text h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 1px;
}

.cab-text .tagline {
  font-size: 14px;
  margin: 10px 0 20px;
  color: #ccc;
}

.cab-media {
  position: relative;
  display: flex;
  align-items: center;
}

.cab-car-img {
  max-width: 450px;
  width: 100%;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

.play-btn-wrapper {
  position: absolute;
  left: -20px;
}

.play-btn {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.2);
  border: 2px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
  transition: var(--transition);
}

.play-btn:hover {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
  transform: scale(1.1);
}

/* ==========================================================================
   Why Travel With Us & Photo Gallery
   ========================================================================== */
.feature-box {
  text-align: center;
  padding: 20px 10px;
}

.feature-icon {
  width: 60px;
  height: 60px;
  border: 1px solid var(--primary-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: var(--primary-orange);
  font-size: 22px;
  transition: var(--transition);
}

.feature-box:hover .feature-icon {
  background: var(--primary-orange);
  color: var(--white);
  transform: rotateY(180deg);
}

.feature-box h4 {
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--secondary-dark);
}

.feature-box p {
  font-size: 12px;
  color: var(--text-muted);
}

/* Gallery runs edge to edge, so the arrows sit inside the viewport */
.gallery-slider {
  padding: 0 15px;
}

.gallery-item {
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Testimonial Banner
   ========================================================================== */
.testimonial-banner {
  background: linear-gradient(rgba(0,18,51,0.85), rgba(0,18,51,0.85)),
              url('../images/destinations/varanasi/Banaras%20Dev%20Deepawali.jpg') center/cover no-repeat;
  color: var(--white);
  text-align: center;
  padding: 60px 0;
}

.quote-icon {
  background: var(--primary-orange);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 18px;
}

.testimonial-banner h2 span {
  color: var(--primary-orange);
}

.testimonial-stage {
  position: relative;
  min-height: 92px;
  margin-top: 5px;
}

.testimonial-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.testimonial-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.testimonial-text {
  font-size: 15px;
  font-weight: 300;
  margin: 15px 0 10px;
}

.client-name {
  font-weight: 600;
  font-size: 14px;
  color: #ccc;
}

/* ==========================================================================
   Blogs Section
   ========================================================================== */
.blog-card {
  position: relative;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
}

.blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.blog-card:hover img {
  transform: scale(1.08);
}

.blog-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(0,0,0,0.85));
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
}

.blog-tag {
  background: var(--primary-orange);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.blog-card h3 {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 5px;
}

.blog-meta {
  font-size: 11px;
  color: #bbb;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--secondary-dark);
  color: #a0aab8;
  padding-top: 50px;
  font-size: 13px;
  overflow: hidden;
}

/* Faint temple silhouette in the bottom-right corner */
.site-footer::after {
  content: '\f67b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 4%;
  bottom: 40px;
  font-size: 190px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr 1.6fr 1.2fr;
  gap: 25px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col h4 {
  color: var(--white);
  font-size: 15px;
  margin-bottom: 15px;
}

.about-col p {
  margin: 15px 0;
  font-size: 12px;
}

.footer-socials a {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: 3px;
  margin-right: 5px;
  font-size: 12px;
  transition: var(--transition);
}

.footer-socials a:hover {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
}

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

.footer-links a {
  display: inline-block;
  font-size: 12px;
}

.footer-links a:hover {
  color: var(--primary-orange);
  padding-left: 3px;
}

.footer-links i {
  color: var(--primary-orange);
  font-size: 10px;
  margin-right: 3px;
}

.footer-contact li {
  margin-bottom: 11px;
  display: flex;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
}

.footer-contact i {
  color: var(--primary-orange);
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-contact a:hover {
  color: var(--primary-orange);
}

/* Office name sits on its own line above the address */
.footer-contact strong {
  display: block;
  color: var(--white);
  font-weight: 600;
}

.footer-hours {
  font-size: 12px;
}

/* Newsletter sign-up, tucked under the opening hours column */
.footer-subscribe { margin-top: 24px; }
.footer-subscribe h4 { margin-bottom: 8px; }
.footer-subscribe > p { margin-bottom: 12px; font-size: 12px; line-height: 1.6; }
.subscribe-field { position: relative; display: flex; align-items: center; }
.subscribe-field i { position: absolute; left: 12px; color: var(--primary-orange); font-size: 12px; }
.subscribe-field input { width: 100%; padding: 11px 12px 11px 32px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.07); color: var(--white); font: inherit; font-size: 12px; outline: 0; transition: var(--transition); }
.subscribe-field input::placeholder { color: rgba(255,255,255,.5); }
.subscribe-field input:focus { border-color: var(--primary-orange); background: rgba(255,255,255,.12); }
.subscribe-form button { display: inline-flex; gap: 8px; justify-content: center; align-items: center; width: 100%; margin-top: 9px; padding: 11px 14px; border: 0; border-radius: 6px; background: var(--primary-orange); color: var(--white); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.subscribe-form button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.subscribe-note { margin-top: 8px; font-size: 11px; line-height: 1.5; }
.subscribe-note.error { color: #ffb4a2; }
.subscribe-note.success { color: #8fe3b0; }

.sub-footer {
  background: #000c24;
  padding: 15px 0;
  font-size: 12px;
}

.sub-footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  text-align: center;
}

.sub-footer-content .credit a {
  color: var(--primary-orange);
  font-weight: 500;
}

.sub-footer-content .credit a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Three lines never fit side by side on a phone, so they stack centred */
@media (max-width: 767px) {
  .sub-footer-content {
    justify-content: center;
  }
}

/* ==========================================================================
   Navigation Dropdowns & Mobile Menu
   ========================================================================== */
.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  /* Clears the nav item's hover underline (which sits ~5px under the link)
     so the panel stops crowding the label. */
  top: calc(100% + 10px);
  left: -15px;
  min-width: 200px;
  background: var(--white);
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 1200;
}

.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Accent line with a caret sitting on it, pointing back at the parent item.
   Desktop only -- below 992px .dropdown flattens into the drawer accordion. */
@media (min-width: 992px) {
  .dropdown {
    border-top: 3px solid var(--primary-orange);
  }

  .dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 26px;
    width: 0;
    height: 0;
    border-right: 9px solid transparent;
    border-bottom: 10px solid var(--primary-orange);
    border-left: 9px solid transparent;
  }

  /* Invisible bridge across the gap, so moving the pointer from the nav item
     down to the panel does not close it. Measured from the padding box, so it
     needs to exceed the gap by the 3px accent border to reach the item. */
  .dropdown::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 16px;
  }

  /* The panel's accent line is the indicator while it is open; without this the
     item's own hover underline sits just above it as a second parallel line.
     Specificity has to clear .home-page .nav-links a.active::after, which also
     drives this underline's width. */
  .nav-links > li.has-dropdown:hover > a::after,
  .nav-links > li.has-dropdown:hover > a.active::after {
    width: 0;
    opacity: 0;
  }
}

.dropdown li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--secondary-dark);
}

/* Chevron marker on each row */
.dropdown li a::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  color: var(--primary-orange);
}

.dropdown li a:hover,
.dropdown li a.active {
  background: var(--bg-light);
  color: var(--primary-orange);
  padding-left: 22px;
}

/* The chevron button only does anything on mobile */
.dropdown-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--secondary-dark);
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--secondary-dark);
  border-radius: 2px;
  transition: var(--transition);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 998;
}

.nav-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Inner Page Banner (title + breadcrumb)
   ========================================================================== */
.page-banner {
  position: relative;
  padding: 55px 0;
  color: var(--white);
  background: linear-gradient(rgba(0,18,51,0.82), rgba(0,18,51,0.88)),
              url('../images/banner/banner3.webp') center/cover no-repeat;
  text-align: center;
}

.page-banner h1 {
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-banner h1 span {
  color: var(--primary-orange);
}

.page-banner .lead {
  font-size: 14px;
  font-weight: 300;
  color: #cfd8e6;
  margin-top: 8px;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  margin-top: 14px;
  color: #cfd8e6;
}

.breadcrumb a:hover {
  color: var(--primary-orange);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: rgba(255,255,255,0.4);
}

.breadcrumb li:last-child {
  color: var(--primary-orange);
}

/* ==========================================================================
   Sliders (destinations, packages, gallery)
   ========================================================================== */
.slider {
  position: relative;
  --gap: 15px;
  --pv: 4;
}

.slider-viewport {
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.5s ease;
}

.slider-track > * {
  flex: 0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
  min-width: 0;
}

/* Nudge arrows up so the dots row does not pull them off-centre */
.slider .slider-arrow {
  top: calc(50% - 15px);
}

.slider .slider-arrow.outside {
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  background: var(--white);
}

.slider .prev-arrow.outside { left: -20px; }
.slider .next-arrow.outside { right: -20px; }

.slider-arrow.hidden {
  display: none;
}

/* Pagination dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.slider-dots.hidden {
  display: none;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cfd6de;
  cursor: pointer;
  transition: var(--transition);
}

.slider-dots .dot:hover {
  background: #9aa5b1;
}

.slider-dots .dot.active {
  width: 22px;
  border-radius: 5px;
  background: var(--primary-orange);
}

.slider-dots.light .dot {
  background: rgba(255,255,255,0.4);
}

.slider-dots.light .dot.active {
  background: var(--primary-orange);
}

/* Packages sit on the light background, so their gap is a touch wider */
.bg-light .slider {
  --gap: 20px;
}

/* ==========================================================================
   Enquiry Call-to-action Banner (services + hire a guide)
   ========================================================================== */
.cta-banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(90deg, #001233 0%, #032a5c 100%);
  color: var(--white);
  padding: 26px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.cta-text h2 {
  font-size: 25px;
  font-weight: 700;
}

.cta-text h2 span {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--primary-orange);
}

.cta-text p {
  font-size: 13px;
  color: #b9c4d4;
  margin-top: 7px;
  max-width: 380px;
}

.cta-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cta-media img {
  max-width: 250px;
  width: 100%;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.45));
}

.cta-banner .btn-orange {
  flex-shrink: 0;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cta-banner .btn-orange:hover {
  gap: 14px;
}

@media (max-width: 768px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 26px 20px;
  }
  .cta-text p {
    max-width: none;
  }
  .cta-media img {
    max-width: 200px;
  }
}

/* ==========================================================================
   Back to Top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--primary-orange);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition);
  z-index: 900;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #d95316;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 1200px) {
  .slider .prev-arrow.outside { left: 5px; }
  .slider .next-arrow.outside { right: 5px; }
}

@media (max-width: 1100px) {
  .nav-links {
    gap: 14px;
  }
  .nav-links a {
    font-size: 13px;
  }
  .hero-quick-bar {
    width: 92%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .quick-item {
    min-width: 100px;
    padding: 12px 14px;
  }
}

@media (max-width: 991px) {
  /* Nav becomes a slide-in drawer */
  .nav-toggle {
    display: flex;
  }

  #mainNav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85%;
    height: 100vh;
    background: var(--white);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    padding: 70px 0 30px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 999;
  }

  #mainNav.open {
    transform: translateX(0);
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-links {
    flex-direction: column;
    gap: 0;
  }

  .nav-links > li {
    border-bottom: 1px solid var(--border-color);
  }

  .nav-links > li > a {
    display: block;
    padding: 12px 20px;
  }

  .nav-links > li > a > i {
    display: none;
  }

  .dropdown-toggle {
    display: block;
    position: absolute;
    top: 4px;
    right: 8px;
  }

  .has-dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
  }

  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: var(--bg-light);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .has-dropdown.open .dropdown {
    max-height: 300px;
  }

  .dropdown li a {
    padding: 10px 34px;
  }

  .hero-section {
    height: 460px;
  }

  .hero-content h1 {
    font-size: 38px;
  }
}

@media (max-width: 1024px) {
  .grid-5, .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .search-form {
    grid-template-columns: 1fr 1fr;
  }
  .btn-search {
    grid-column: 1 / -1;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cab-car-img {
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .top-bar {
    font-size: 11px;
  }
  .top-bar-content {
    flex-direction: column;
    gap: 4px;
  }
  .contact-info span, .top-right span {
    margin-right: 10px;
  }
  .contact-info span {
    padding-right: 10px;
    border-right: none;
  }
  .grid-5, .grid-4, .grid-3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .hero-section {
    height: 420px;
  }
  .hero-content {
    padding-bottom: 0;
    text-align: center;
  }
  .hero-content h1 {
    font-size: 30px;
  }
  .hero-quick-bar {
    display: none;
  }
  .search-box {
    margin-top: 25px;
  }
  .search-form {
    grid-template-columns: 1fr;
  }
  .section-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cab-container {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }
  .cab-text h2 {
    font-size: 30px;
  }
  .play-btn-wrapper {
    position: static;
    margin-bottom: 10px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sub-footer-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .slider .prev-arrow.outside { left: -6px; }
  .slider .next-arrow.outside { right: -6px; }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .section-title h2 {
    font-size: 22px;
  }
  .hero-content h1 {
    font-size: 26px;
  }
}

/* ==========================================================================
   HIRE A GUIDE — listing and profile pages
   hire-a-guide.html, guide-details.html
   ========================================================================== */

/* ==========================================================================
   Filter bar
   ========================================================================== */
.guide-filters {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 20px;
  margin-top: -40px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1.3fr 1.3fr auto;
  gap: 14px;
  align-items: end;
}

.guide-filters .btn-reset {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.guide-filters .btn-reset:hover {
  background: var(--secondary-dark);
  color: var(--white);
  border-color: var(--secondary-dark);
}

.guide-results {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 34px 0 20px;
}

.guide-results p {
  font-size: 13px;
  color: var(--text-muted);
}

.guide-results strong {
  color: var(--secondary-dark);
}

/* ==========================================================================
   Guide cards
   ========================================================================== */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.guide-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.13);
  border-color: transparent;
}

.guide-photo {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--bg-light);
}

.guide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.guide-card:hover .guide-photo img {
  transform: scale(1.06);
}

.guide-verified {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #14a44d;
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guide-price {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--primary-orange);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.guide-price small {
  font-size: 10px;
  font-weight: 400;
  margin-left: 3px;
  opacity: 0.85;
}

.guide-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.guide-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f5a623;
  font-size: 12px;
  margin-bottom: 6px;
}

.guide-rating span {
  color: var(--text-muted);
  font-size: 11px;
}

.guide-body h3 {
  font-size: 17px;
  color: var(--secondary-dark);
}

.guide-loc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.guide-loc i {
  color: var(--primary-orange);
  margin-right: 4px;
}

.guide-tagline {
  font-size: 12px;
  color: var(--text-dark);
  font-style: italic;
  margin: 9px 0;
  line-height: 1.5;
}

.guide-meta {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-bottom: 10px;
}

.guide-meta li {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.guide-meta i {
  color: var(--primary-orange);
  width: 16px;
  margin-right: 4px;
}

.guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}

.tag {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
}

.tag.lg {
  font-size: 12px;
  padding: 6px 14px;
  background: #fff3ed;
  border-color: #ffd9c6;
  color: var(--primary-orange);
}

.guide-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
}

.guide-actions .btn-orange {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
}

.btn-icon {
  width: 38px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  font-size: 17px;
  transition: var(--transition);
}

.btn-icon:hover {
  background: #25d366;
  border-color: #25d366;
  color: var(--white);
}

/* Empty state */
.guide-empty {
  display: none;
  text-align: center;
  padding: 55px 20px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  color: var(--text-muted);
}

.guide-empty.show {
  display: block;
}

.guide-empty i {
  font-size: 34px;
  color: var(--border-color);
  margin-bottom: 12px;
}

.guide-empty h3 {
  color: var(--secondary-dark);
  font-size: 17px;
  margin-bottom: 4px;
}

.guide-empty p {
  font-size: 13px;
}

/* ==========================================================================
   How it works strip
   ========================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.step-box {
  text-align: center;
  padding: 26px 18px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  position: relative;
  transition: var(--transition);
}

.step-box:hover {
  border-color: var(--primary-orange);
  transform: translateY(-4px);
}

.step-num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  font-weight: 800;
  color: rgba(0, 18, 51, 0.07);
}

.step-box i {
  font-size: 26px;
  color: var(--primary-orange);
  margin-bottom: 12px;
  display: block;
}

.step-box h4 {
  font-size: 14px;
  color: var(--secondary-dark);
  margin-bottom: 6px;
}

.step-box p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ==========================================================================
   Details page
   ========================================================================== */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}

.detail-head {
  display: flex;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}

.detail-photo {
  position: relative;
  flex: 0 0 190px;
  height: 210px;
  border-radius: 10px;
  overflow: hidden;
}

.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.detail-intro h1 {
  font-size: 26px;
  color: var(--secondary-dark);
  margin: 2px 0;
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.detail-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--text-muted);
}

.detail-facts i {
  color: var(--primary-orange);
  font-size: 16px;
}

.detail-facts strong {
  display: block;
  color: var(--secondary-dark);
  font-size: 12px;
  font-weight: 600;
}

.detail-block {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}

.detail-block h2 {
  font-size: 18px;
  color: var(--secondary-dark);
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--primary-orange);
  line-height: 1.2;
}

.detail-block h2.mt {
  margin-top: 22px;
}

.detail-block p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--border-color);
}

.tour-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tour-row h4 {
  font-size: 14px;
  color: var(--secondary-dark);
  font-weight: 600;
}

.tour-row span {
  font-size: 11px;
  color: var(--text-muted);
}

.tour-row i {
  color: var(--primary-orange);
  margin-right: 4px;
}

.tour-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-orange);
  white-space: nowrap;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.detail-gallery-item {
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

.detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.detail-gallery-item:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Booking sidebar
   ========================================================================== */
.detail-side {
  position: sticky;
  top: 100px;
}

.booking-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.07);
}

.booking-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--secondary-dark);
}

.booking-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 5px;
}

.booking-note {
  font-size: 12px;
  color: var(--text-muted);
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.booking-note i {
  color: var(--primary-orange);
  margin-right: 5px;
}

.booking-form .form-group {
  margin-bottom: 12px;
}

.booking-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: var(--transition);
}

.booking-form textarea:focus {
  border-color: var(--primary-orange);
}

.btn-orange.full,
.btn-ghost.full {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.btn-orange.full {
  border: none;
  padding: 11px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.booking-ok {
  display: none;
  background: #eaf7ef;
  border: 1px solid #bfe6ce;
  color: #167a3c;
  font-size: 12px;
  line-height: 1.6;
  padding: 14px;
  border-radius: 8px;
}

.booking-ok.show {
  display: block;
}

/* Post-submit prompt to send the same details through WhatsApp, matching the
   cab popup's confirmation. Used by the guide and package forms. */
.ok-wa-note {
  margin-top: 10px;
  color: inherit;
  font-size: 12px;
  opacity: .85;
}

.booking-ok .btn-wa,
.pkg-ok .pkg-wa {
  margin-top: 8px;
}

.booking-split {
  text-align: center;
  border-top: 1px solid var(--border-color);
  margin: 18px 0 14px;
}

.booking-split span {
  position: relative;
  top: -10px;
  background: var(--white);
  padding: 0 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 8px;
  transition: var(--transition);
}

.btn-wa:hover {
  background: #1eb556;
}

.btn-ghost {
  border: 1px solid var(--border-color);
  color: var(--secondary-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: 5px;
  transition: var(--transition);
}

.btn-ghost:hover {
  background: var(--secondary-dark);
  color: var(--white);
  border-color: var(--secondary-dark);
}

.btn-ghost i {
  color: var(--primary-orange);
}

.btn-ghost:hover i {
  color: var(--white);
}

.related-guides {
  margin-top: 55px;
}

.detail-missing {
  text-align: center;
  padding: 70px 20px;
}

.detail-missing i {
  font-size: 46px;
  color: var(--border-color);
  margin-bottom: 15px;
}

.detail-missing h2 {
  color: var(--secondary-dark);
  margin-bottom: 6px;
}

.detail-missing p {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .guide-filters {
    grid-template-columns: repeat(3, 1fr);
  }
  .guide-filters .btn-reset {
    grid-column: 3;
  }
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-side {
    position: static;
  }
}

@media (max-width: 1024px) {
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .guide-filters {
    grid-template-columns: 1fr;
    margin-top: -25px;
  }
  .guide-filters .btn-reset {
    grid-column: 1;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .guide-results {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .detail-head {
    flex-direction: column;
  }
  .detail-photo {
    flex: 0 0 240px;
    height: 240px;
  }
  .detail-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .detail-facts {
    grid-template-columns: 1fr;
  }
  .tour-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================================================
   SERVICES — service listing and detail blocks
   services.html
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.services-hero {
  position: relative;
  background: url('../images/banner/banner3.webp') center right/cover no-repeat;
  min-height: 430px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* White wash that fades out towards the photo on the right */
.services-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              #ffffff 0%,
              rgba(255,255,255,0.97) 30%,
              rgba(255,255,255,0.80) 45%,
              rgba(255,255,255,0.25) 58%,
              rgba(255,255,255,0) 70%);
}

/* Soft white curve sweeping across the bottom */
.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 90px;
  display: block;
  z-index: 3;
}

.services-hero-inner {
  position: relative;
  z-index: 4;
  padding: 45px 0 70px;
}

.services-hero-text {
  max-width: 480px;
}

.script-label {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--primary-orange);
  line-height: 1.2;
}

.services-hero h1 {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  color: var(--secondary-dark);
  margin: 4px 0;
  text-transform: uppercase;
}

.services-hero .script-label.after {
  margin-bottom: 14px;
}

.services-hero p.lead {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 26px;
}

/* Four badges under the hero copy */
.hero-badges {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.hero-badge {
  width: 92px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary-dark);
  line-height: 1.35;
}

.hero-badge .badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 9px;
  color: var(--white);
  font-size: 15px;
  background: var(--secondary-dark);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.hero-badge:nth-child(even) .badge-icon {
  background: var(--primary-orange);
}

/* ==========================================================================
   Section heading with the om ornament
   ========================================================================== */
.section-title.fancy h2 {
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-title .script-label {
  font-size: 20px;
  margin-bottom: 2px;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.ornament .line {
  width: 55px;
  height: 1px;
  background: var(--primary-orange);
  position: relative;
}

.ornament .line::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--primary-orange);
  transform: rotate(45deg);
}

.ornament .line:first-child::after { left: 0; }
.ornament .line:last-child::after { right: 0; }

.ornament .om {
  width: 26px;
  height: 26px;
  border: 1px solid var(--primary-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-orange);
  font-size: 13px;
  line-height: 1;
}

/* ==========================================================================
   Service cards
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  position: relative;
  display: flex;
  min-height: 250px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-color, var(--secondary-dark));
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.service-media {
  flex: 0 0 55%;
  overflow: hidden;
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.service-card:hover .service-media img {
  transform: scale(1.07);
}

/* Coloured panel with a convex curve biting into the photo */
.service-panel {
  position: relative;
  flex: 0 0 52%;
  margin-left: -7%;
  padding: 26px 22px 26px 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background: linear-gradient(135deg,
              var(--card-color) 0%,
              var(--card-color-2, var(--card-color)) 100%);
  border-radius: 46% 14px 14px 46% / 50% 14px 14px 50%;
}

.service-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
}

.service-panel h3 {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 2px 0 8px;
}

.service-panel p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}

.btn-white {
  align-self: flex-start;
  background: var(--white);
  color: var(--secondary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--transition);
}

.btn-white:hover {
  background: var(--secondary-dark);
  color: var(--white);
  gap: 11px;
}

/* Floating badge straddling the photo / panel seam */
.service-icon {
  position: absolute;
  left: 45%;
  top: 58%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--card-color);
  box-shadow: 0 5px 16px rgba(0,0,0,0.22);
  z-index: 3;
  transition: var(--transition);
}

.service-card:hover .service-icon {
  transform: scale(1.08);
}

/* ==========================================================================
   Why travel with us banner
   ========================================================================== */
.why-banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: url('../images/destinations/haridwar/Har%20Ki%20Pauri-haridwar.jpg') center/cover no-repeat;
  padding: 34px 34px 30px;
}

.why-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 100%);
}

.why-banner-inner {
  position: relative;
  z-index: 2;
}

.why-banner h2 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--secondary-dark);
  text-transform: uppercase;
  margin-bottom: 26px;
}

.why-banner h2 span {
  color: var(--primary-orange);
}

.why-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

.why-item {
  padding: 20px 12px;
  text-align: center;
  border-right: 1px solid var(--border-color);
  transition: var(--transition);
}

.why-item:last-child {
  border-right: none;
}

.why-item:hover {
  background: #fff7f3;
}

.why-item i {
  font-size: 24px;
  color: var(--primary-orange);
  margin-bottom: 10px;
  display: block;
}

.why-item:nth-child(even) i {
  color: var(--secondary-dark);
}

.why-item h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-dark);
  margin-bottom: 5px;
  line-height: 1.3;
}

.why-item:first-child h4 {
  color: var(--primary-orange);
}

.why-item p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* The .cta-banner used at the foot of this page lives in style.css — it is
   shared with hire-a-guide.html. */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .services-hero::before {
    background: linear-gradient(100deg, #ffffff 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.55) 65%, rgba(255,255,255,0.1) 85%);
  }
  .services-hero h1 {
    font-size: 33px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .why-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .why-item:nth-child(3) {
    border-right: none;
  }
  .why-item:nth-child(-n+3) {
    border-bottom: 1px solid var(--border-color);
  }
}

@media (max-width: 768px) {
  .services-hero {
    min-height: auto;
    background-position: center;
  }
  .services-hero::before {
    background: rgba(255,255,255,0.92);
  }
  .services-hero-inner {
    padding: 35px 0 60px;
  }
  .services-hero h1 {
    font-size: 27px;
  }
  .hero-badges {
    gap: 14px;
    justify-content: space-between;
  }
  .hero-badge {
    width: 72px;
    font-size: 10px;
  }

  /* Stack the card: photo on top, panel below with a straight edge */
  .service-card {
    flex-direction: column;
    min-height: 0;
  }
  .service-media {
    flex: 0 0 190px;
    height: 190px;
  }
  .service-panel {
    flex: 1;
    margin-left: 0;
    border-radius: 0;
    padding: 40px 22px 24px;
  }
  .service-icon {
    left: 22px;
    bottom: auto;
    top: 155px;
    width: 54px;
    height: 54px;
    font-size: 21px;
  }

  .why-banner {
    padding: 26px 18px;
  }
  .why-banner h2 {
    font-size: 21px;
  }
  .why-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-item {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }
  .why-item:nth-child(even) {
    border-right: none;
  }

}

@media (max-width: 480px) {
  .why-strip {
    grid-template-columns: 1fr;
  }
  .why-item {
    border-right: none;
  }
}

/* ==========================================================================
   TOUR PACKAGES — listing and details pages
   packages.html, package-details.html
   ========================================================================== */

/* ==========================================================================
   Banner tint (details page)
   ========================================================================== */
.page-banner.pkg-tinted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--c, #f26522) 0%, transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

.page-banner.pkg-tinted .container {
  position: relative;
  z-index: 2;
}

.page-banner.pkg-tinted h1 span {
  color: var(--c2, var(--primary-orange));
}

/* ==========================================================================
   Category pills
   ========================================================================== */
.pkg-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 34px;
}

.pkg-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 40px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
}

.pkg-tab i {
  color: var(--c);
  font-size: 15px;
  transition: var(--transition);
}

.pkg-tab em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--bg-light);
  color: var(--text-muted);
  transition: var(--transition);
}

.pkg-tab:hover {
  border-color: var(--c);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.pkg-tab.active {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 10px 22px -8px var(--c);
}

.pkg-tab.active i,
.pkg-tab.active em {
  color: var(--white);
}

.pkg-tab.active em {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Filter bar
   ========================================================================== */
.pkg-filters {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  padding: 22px;
  margin-top: -46px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.8fr 1.2fr 1.2fr 1.2fr 1.2fr auto;
  gap: 14px;
  align-items: end;
  overflow: hidden;
}

/* Thin colour strip so the bar does not read as plain white */
.pkg-filters::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #f26522, #1d4ed8, #7c3aed, #059669, #db2777);
}

.pkg-filters .btn-reset {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: inherit;
  padding: 11px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.pkg-filters .btn-reset:hover {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
  color: var(--white);
}

.pkg-results {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 34px 0 22px;
}

.pkg-results p {
  font-size: 13px;
  color: var(--text-muted);
}

.pkg-results strong {
  color: var(--secondary-dark);
  font-size: 15px;
}

/* ==========================================================================
   Package card
   ========================================================================== */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.pkg-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* The accent bar that wipes in along the top edge on hover */
.pkg-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
  z-index: 3;
}

.pkg-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 22px 44px -18px var(--c);
}

.pkg-card:hover::before {
  transform: scaleX(1);
}

.pkg-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--bg-light);
}

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

.pkg-card:hover .pkg-media img {
  transform: scale(1.12);
}

/* Readability strip under the badges */
.pkg-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 18, 51, 0.55), transparent 55%);
  transition: opacity 0.35s ease;
}

.pkg-card:hover .pkg-media::after {
  opacity: 0;
}

.pkg-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 30px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

.pkg-ribbon {
  position: absolute;
  top: 16px;
  right: -34px;
  z-index: 2;
  width: 132px;
  transform: rotate(38deg);
  background: var(--secondary-dark);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 5px 0;
  text-transform: uppercase;
}

/* The round nights/days chip that overlaps the image edge.
   It lives in .pkg-body, which does not clip, so the overhang survives. */
.pkg-days {
  position: absolute;
  right: 16px;
  top: -31px;
  z-index: 3;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  border: 3px solid var(--white);
  box-shadow: 0 10px 20px -10px var(--c);
  transition: transform 0.35s ease;
}

.pkg-days strong { font-size: 14px; font-weight: 700; }
.pkg-days em { font-size: 12px; font-style: normal; font-weight: 500; }
.pkg-days:has(strong:only-child) strong { font-size: 11px; }

.pkg-card:hover .pkg-days {
  transform: scale(1.08) rotate(-6deg);
}

/* Highlights panel that slides up over the photo */
.pkg-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 22px 20px;
  background: linear-gradient(150deg, rgba(0, 18, 51, 0.92), var(--c));
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.pkg-card:hover .pkg-hover {
  transform: translateY(0);
  opacity: 1;
}

.pkg-hover h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.pkg-hover ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.pkg-hover li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
}

.pkg-hover li i {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.85;
}

.pkg-hover-btn {
  align-self: flex-start;
  background: var(--white);
  color: var(--secondary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 30px;
  transition: var(--transition);
}

.pkg-hover-btn:hover {
  background: var(--secondary-dark);
  color: var(--white);
}

.pkg-body {
  position: relative;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pkg-rate {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.pkg-rate i {
  color: #ffb400;
  font-size: 12px;
}

.pkg-body h3 {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 9px;
}

.pkg-body h3 a {
  color: var(--secondary-dark);
  transition: var(--transition);
}

.pkg-body h3 a:hover {
  color: var(--c);
}

.pkg-places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.pkg-places i {
  font-size: 4px;
  color: var(--c);
}

.pkg-amenities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border-color);
}

.pkg-amenities li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-light);
  border-radius: 5px;
  padding: 5px 9px;
  transition: var(--transition);
}

.pkg-amenities li i {
  font-size: 11px;
  color: var(--c);
}

.pkg-card:hover .pkg-amenities li {
  background: color-mix(in srgb, var(--c) 10%, #ffffff);
}

.pkg-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.pkg-price {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pkg-price strong {
  font-size: 21px;
  font-weight: 700;
  color: var(--c);
}

.pkg-price small {
  font-size: 11px;
  color: var(--text-muted);
}

.pkg-old {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pkg-from {
  font-size: 11px;
  color: var(--text-muted);
}

.pkg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 6px;
  white-space: nowrap;
  transition: var(--transition);
}

.pkg-btn i {
  transition: transform 0.3s ease;
}

.pkg-btn:hover {
  color: var(--white);
  box-shadow: 0 10px 20px -8px var(--c);
}

.pkg-btn:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.pkg-empty {
  display: none;
  text-align: center;
  padding: 70px 20px;
  background: var(--bg-light);
  border-radius: 14px;
}

.pkg-empty.show {
  display: block;
}

.pkg-empty i {
  font-size: 44px;
  color: var(--primary-orange);
  margin-bottom: 16px;
}

.pkg-empty h3 {
  font-size: 21px;
  color: var(--secondary-dark);
  margin-bottom: 8px;
}

.pkg-empty p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* .btn-orange is written for links, so give the button back what it loses */
.pkg-empty .btn-orange {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Why book with us strip
   ========================================================================== */
.pkg-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pkg-usp-box {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  overflow: hidden;
  transition: var(--transition);
}

.pkg-usp-box::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.pkg-usp-box:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 18px 34px -18px var(--c);
}

.pkg-usp-box:hover::before {
  transform: scaleX(1);
}

.pkg-usp-box i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 24px;
  color: var(--white);
  background: linear-gradient(140deg, var(--c), var(--c2));
  margin-bottom: 16px;
  transition: var(--transition);
}

.pkg-usp-box:hover i {
  transform: rotateY(180deg);
}

.pkg-usp-box h4 {
  font-size: 16px;
  color: var(--secondary-dark);
  margin-bottom: 7px;
}

.pkg-usp-box p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   Details — photo gallery
   ========================================================================== */
.pkg-detail {
  --c: var(--primary-orange);
  --c2: #ffa45c;
}

.pkg-gallery {
  margin-bottom: 40px;
}

.pkg-stage {
  position: relative;
  height: 460px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-light);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.6);
}

.pkg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.8s ease, transform 6s ease;
}

.pkg-slide.active {
  opacity: 1;
  transform: scale(1);
}

.pkg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pkg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--secondary-dark);
  font-size: 15px;
  cursor: pointer;
  z-index: 3;
  transition: var(--transition);
}

.pkg-nav.prev { left: 18px; }
.pkg-nav.next { right: 18px; }

.pkg-nav:hover {
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
}

.pkg-stage-count {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  background: rgba(0, 18, 51, 0.7);
  color: var(--white);
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 30px;
}

.pkg-ribbon.lg {
  top: 26px;
  right: -40px;
  width: 170px;
  font-size: 12px;
  padding: 8px 0;
  background: linear-gradient(135deg, var(--c), var(--c2));
}

.pkg-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.pkg-thumb {
  height: 92px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.65;
  transition: var(--transition);
}

.pkg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pkg-thumb:hover,
.pkg-thumb.active {
  opacity: 1;
  border-color: var(--c);
  transform: translateY(-3px);
}

/* ==========================================================================
   Details — layout
   ========================================================================== */
.pkg-detail-grid {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 40px;
  align-items: start;
}

.pkg-head {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.pkg-cat.solid {
  position: static;
  margin-bottom: 14px;
}

.pkg-head h1 {
  font-size: 34px;
  line-height: 1.25;
  color: var(--secondary-dark);
  margin-bottom: 12px;
}

.pkg-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.pkg-head-meta i {
  color: var(--c);
}

.pkg-head-meta .pkg-rate {
  margin: 0;
}

.pkg-head-meta .pkg-rate b {
  color: var(--secondary-dark);
}

.pkg-tagline {
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Quick facts row */
.pkg-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.pkg-facts li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 14px 12px;
  transition: var(--transition);
}

.pkg-facts li:hover {
  background: var(--white);
  box-shadow: 0 10px 22px -14px var(--c);
  transform: translateY(-4px);
}

.fact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 14px;
}

.fact-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.fact-txt small {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.fact-txt strong {
  font-size: 12.5px;
  color: var(--secondary-dark);
  font-weight: 600;
}

/* Panel tabs */
.pkg-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 26px;
}

.pkg-tabs-nav button {
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 13px 20px;
  cursor: pointer;
  transition: var(--transition);
}

.pkg-tabs-nav button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

.pkg-tabs-nav button:hover {
  color: var(--c);
}

.pkg-tabs-nav button.active {
  color: var(--c);
  font-weight: 600;
}

.pkg-tabs-nav button.active::after {
  transform: scaleX(1);
}

/* Panels */
.pkg-panel {
  display: none;
  animation: pkgFade 0.45s ease;
}

.pkg-panel.active {
  display: block;
}

@keyframes pkgFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pkg-panel h2 {
  font-size: 24px;
  color: var(--secondary-dark);
  margin-bottom: 14px;
}

.pkg-panel h3 {
  font-size: 18px;
  color: var(--secondary-dark);
  margin: 26px 0 14px;
}

.pkg-panel p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-muted);
}

.pkg-highlights {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pkg-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-light);
  border-left: 3px solid var(--c);
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 13.5px;
  color: var(--text-dark);
  transition: var(--transition);
}

.pkg-highlights li:hover {
  transform: translateX(6px);
  background: color-mix(in srgb, var(--c) 8%, #ffffff);
}

.pkg-highlights i {
  margin-top: 3px;
  color: var(--c);
}

.pkg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.pkg-chip {
  background: color-mix(in srgb, var(--c) 12%, #ffffff);
  color: var(--c);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 30px;
}

/* Itinerary accordion */
.pkg-days-list {
  list-style: none;
  position: relative;
  display: grid;
  gap: 14px;
}

.pkg-day {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.pkg-day.open {
  border-color: transparent;
  box-shadow: 0 14px 30px -18px var(--c);
}

.pkg-day-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  padding: 16px 18px;
  cursor: pointer;
}

.pkg-day-num {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 30px;
}

.pkg-day-title {
  flex-grow: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-dark);
}

.pkg-day-head i {
  color: var(--text-muted);
  font-size: 13px;
  transition: transform 0.35s ease;
}

.pkg-day.open .pkg-day-head i {
  transform: rotate(180deg);
  color: var(--c);
}

/* Grid rows animate to auto height, which keeps the slide smooth */
.pkg-day-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.pkg-day.open .pkg-day-body {
  grid-template-rows: 1fr;
}

.pkg-day-body p {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  padding: 0 18px;
}

.pkg-day.open .pkg-day-body p {
  padding-bottom: 18px;
}

/* Inclusions and exclusions */
.pkg-inex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.inex-col {
  border-radius: 12px;
  padding: 22px;
}

.inex-col.inc {
  background: #f1fbf5;
  border: 1px solid #cdedd9;
}

.inex-col.exc {
  background: #fef4f4;
  border: 1px solid #f6d7d7;
}

.inex-col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  margin: 0 0 14px;
}

.inex-col.inc h3 i { color: #14a44d; }
.inex-col.exc h3 i { color: #dc3545; }

.inex-col ul {
  list-style: none;
  display: grid;
  gap: 11px;
}

.inex-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.inex-col.inc li i { color: #14a44d; margin-top: 3px; }
.inex-col.exc li i { color: #dc3545; margin-top: 3px; }

/* FAQ accordion */
.pkg-faqs {
  list-style: none;
  display: grid;
  gap: 12px;
}

.pkg-faq {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.pkg-faq.open {
  border-color: transparent;
  box-shadow: 0 14px 30px -18px var(--c);
}

.pkg-faq-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-dark);
  text-align: left;
  padding: 17px 18px;
  cursor: pointer;
}

.pkg-faq-head i {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, #ffffff);
  color: var(--c);
  font-size: 11px;
  transition: transform 0.35s ease;
}

.pkg-faq.open .pkg-faq-head i {
  transform: rotate(135deg);
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
}

.pkg-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.pkg-faq.open .pkg-faq-body {
  grid-template-rows: 1fr;
}

.pkg-faq-body p {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  padding: 0 18px;
}

.pkg-faq.open .pkg-faq-body p {
  padding-bottom: 18px;
}

/* ==========================================================================
   Details — booking sidebar
   ========================================================================== */
.pkg-side {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 20px;
}

.pkg-book {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.5);
}

.pkg-book-top {
  position: relative;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--white);
  padding: 24px 22px;
  text-align: center;
}

.pkg-book-top .was {
  display: block;
  font-size: 13px;
  opacity: 0.8;
  text-decoration: line-through;
}

.pkg-book-top .now {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.pkg-book-top small {
  display: block;
  font-size: 12px;
  opacity: 0.9;
}

.pkg-book-top .save {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 30px;
}

.pkg-form {
  padding: 20px 22px 6px;
}

.pkg-form .form-group {
  margin-bottom: 13px;
}

.pkg-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  resize: vertical;
  transition: var(--transition);
}

.pkg-form input:focus,
.pkg-form select:focus,
.pkg-form textarea:focus {
  border-color: var(--c);
}

.pkg-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.pkg-submit:hover {
  box-shadow: 0 12px 24px -10px var(--c);
  transform: translateY(-2px);
}

.pkg-ok {
  display: none;
  margin: 20px 22px 0;
  background: #f1fbf5;
  border: 1px solid #cdedd9;
  border-radius: 8px;
  color: #14a44d;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px;
}

.pkg-ok.show {
  display: block;
}

.pkg-or {
  position: relative;
  text-align: center;
  margin: 18px 22px;
}

.pkg-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-color);
}

.pkg-or span {
  position: relative;
  background: var(--white);
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.pkg-wa,
.pkg-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 22px 14px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.pkg-wa {
  background: #25d366;
  color: var(--white);
}

.pkg-wa:hover {
  background: #1da851;
  color: var(--white);
}

.pkg-call {
  border: 1px solid var(--border-color);
  color: var(--secondary-dark);
  margin-bottom: 22px;
}

.pkg-call:hover {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
  color: var(--white);
}

.pkg-assure {
  list-style: none;
  background: var(--bg-light);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 14px;
}

.pkg-assure li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.pkg-assure i {
  margin-top: 2px;
  color: var(--c);
}

/* ==========================================================================
   Details — related packages, sticky bar, missing state
   ========================================================================== */
.pkg-related {
  margin-top: 70px;
}

/* The mobile-only price bar that follows the page */
.pkg-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
  padding: 12px 18px;
}

.pkg-bar div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.pkg-bar strong {
  font-size: 20px;
  color: var(--c);
}

.pkg-bar small {
  font-size: 11px;
  color: var(--text-muted);
}

.pkg-bar-btn {
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 6px;
}

.pkg-bar-btn:hover {
  color: var(--white);
}

.pkg-missing {
  text-align: center;
  padding: 80px 20px;
}

.pkg-missing i {
  font-size: 52px;
  color: var(--primary-orange);
  margin-bottom: 18px;
}

.pkg-missing h2 {
  font-size: 26px;
  color: var(--secondary-dark);
  margin-bottom: 8px;
}

.pkg-missing p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .pkg-filters {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .pkg-filters .btn-reset {
    grid-column: 3;
  }

  .pkg-detail-grid {
    grid-template-columns: 1fr 320px;
    gap: 30px;
  }

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

@media (max-width: 991px) {
  .pkg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkg-usp {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkg-detail-grid {
    grid-template-columns: 1fr;
  }

  .pkg-side {
    position: static;
  }

  .pkg-stage {
    height: 380px;
  }

  .pkg-head h1 {
    font-size: 28px;
  }

  /* There is no hover on touch, so the panel stays out of the way entirely */
  .pkg-hover {
    display: none;
  }

  .pkg-bar {
    display: flex;
  }

  .pkg-related {
    margin-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .pkg-filters {
    grid-template-columns: 1fr 1fr;
    margin-top: -30px;
    padding: 18px;
  }

  .pkg-filters .btn-reset {
    grid-column: span 2;
  }

  .pkg-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .pkg-tab {
    flex-shrink: 0;
  }

  .pkg-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkg-highlights,
  .pkg-inex {
    grid-template-columns: 1fr;
  }

  .pkg-stage {
    height: 300px;
  }

  .pkg-thumbs {
    gap: 10px;
  }

  .pkg-thumb {
    height: 66px;
  }

  .pkg-tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .pkg-tabs-nav button {
    flex-shrink: 0;
    padding: 12px 15px;
    font-size: 13px;
  }

  .pkg-head h1 {
    font-size: 24px;
  }

  .pkg-panel h2 {
    font-size: 21px;
  }
}

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

  .pkg-usp {
    grid-template-columns: 1fr;
  }

  .pkg-filters {
    grid-template-columns: 1fr;
  }

  .pkg-filters .btn-reset {
    grid-column: 1;
  }

  .pkg-results {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pkg-day-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pkg-stage {
    height: 240px;
  }
}

/* ======================================================================
   HOMEPAGE REFRESH — a brighter, more celebratory travel experience.
   Scoped to index.html so the remaining pages retain their own styling.
   ====================================================================== */
.home-page {
  background:
    radial-gradient(circle at 95% 8%, rgba(255, 186, 73, 0.16), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 28%, #f8fcfc 100%);
}

.home-page .top-bar {
  background: linear-gradient(100deg, #082f49, #005f73 52%, #0a9396);
  border: 0;
}

.home-page .main-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 48, 73, 0.09);
}

.home-page .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f05a28, #fbbf24);
  transition: width 0.3s ease;
}

.home-page .nav-links a:hover::after,
.home-page .nav-links a.active::after { width: 100%; }

.home-page .hero-section {
  height: 590px;
  border-radius: 0;
}

.home-page .hero-slide::before {
  background: linear-gradient(90deg, rgba(0, 37, 59, 0.88) 0%, rgba(0, 66, 84, 0.58) 42%, rgba(0, 0, 0, 0.18) 100%);
}

.home-page .hero-content { padding-bottom: 126px; }

.home-page .hero-tagline {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 30px;
  background: rgba(0, 18, 51, 0.2);
  backdrop-filter: blur(5px);
}

.home-page .hero-tagline span { color: #ffd166; }

.home-page .hero-content h1 {
  max-width: 680px;
  font-size: clamp(42px, 5vw, 68px);
  text-shadow: 0 5px 20px rgba(0, 20, 35, 0.35);
}

.home-page .hero-content .highlight { color: #ffd166; }

.home-page .hero-desc {
  max-width: 410px;
  padding-left: 14px;
  border-left: 3px solid #fbbf24;
  font-size: 17px;
}

.home-page .hero-quick-bar {
  bottom: 39px;
  gap: 10px;
  width: min(92%, 900px);
  justify-content: center;
}

.home-page .quick-item {
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 16px 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(0, 38, 57, 0.18);
}

.home-page .quick-item:nth-child(3n+1) i { color: #e76f51; }
.home-page .quick-item:nth-child(3n+2) i { color: #0a9396; }
.home-page .quick-item:nth-child(3n) i { color: #9b5de5; }

.home-page .quick-item:hover {
  transform: translateY(-7px);
  background: linear-gradient(140deg, #f05a28, #fbbf24);
  border-color: transparent;
}

.home-page .search-section { background: transparent; }

.home-page .search-box {
  margin-top: -34px;
  padding: 27px 30px;
  border: 1px solid rgba(255, 190, 92, 0.42);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 45, 70, 0.12);
}

.home-page .search-box h3 span {
  color: #e85d2a;
  font-size: 30px;
}

.home-page .form-group input,
.home-page .form-group select {
  min-height: 44px;
  border-color: #dce8e8;
  border-radius: 10px;
  background: #fbfefd;
}

.home-page .form-group input:focus,
.home-page .form-group select:focus {
  border-color: #0a9396;
  box-shadow: 0 0 0 3px rgba(10, 147, 150, 0.12);
}

.home-page .btn-search,
.home-page .btn-orange {
  background: linear-gradient(135deg, #e85d2a, #f7a928);
  border-radius: 10px;
  box-shadow: 0 8px 17px rgba(232, 93, 42, 0.25);
}

.home-page .btn-search:hover,
.home-page .btn-orange:hover {
  background: linear-gradient(135deg, #d94f22, #ef9a1e);
  transform: translateY(-3px);
}

.home-page .section-padding { padding: 78px 0; }
.home-page .bg-light { background: linear-gradient(135deg, #fff6e6 0%, #f4fbfb 100%); }

.home-page .section-title h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.8px;
}

.home-page .section-title h2 span { color: #e85d2a; }
.home-page .title-divider { width: 82px; background: linear-gradient(90deg, #e85d2a, #fbbf24); }
.home-page .title-divider span { background: #0a9396; }

/* Popular destinations — polished as a colourful, image-led travel showcase. */
.home-page .destinations-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 54%, rgba(251, 191, 36, 0.16), transparent 17rem),
    radial-gradient(circle at 96% 12%, rgba(10, 147, 150, 0.13), transparent 20rem);
}

.home-page .destinations-showcase::before,
.home-page .destinations-showcase::after {
  content: '';
  position: absolute;
  width: 230px;
  height: 230px;
  border: 32px solid rgba(232, 93, 42, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.home-page .destinations-showcase::before { top: -135px; left: -78px; }
.home-page .destinations-showcase::after { right: -90px; bottom: -155px; border-color: rgba(10, 147, 150, 0.08); }

.home-page .destinations-showcase .container { position: relative; z-index: 1; }

.home-page .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 6px 13px;
  border-radius: 30px;
  background: #fff3df;
  color: #d85526;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.home-page .section-kicker i { color: #0a9396; }

.home-page .section-intro {
  max-width: 530px;
  margin: 8px auto 0;
  color: #668085;
  font-size: 14px;
}

.home-page .destinations-showcase .slider { padding: 8px 6px 16px; }

.home-page .destinations-showcase .destination-card {
  position: relative;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(1, 69, 83, 0.13);
  isolation: isolate;
}

.home-page .destinations-showcase .destination-card::before {
  content: counter(destination);
  counter-increment: destination;
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 50%;
  background: rgba(0, 55, 71, 0.72);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.home-page .destinations-showcase .slider-track { counter-reset: destination; }

.home-page .destinations-showcase .destination-card .card-img {
  position: relative;
  height: 205px;
  border-radius: 20px 20px 0 0;
}

.home-page .destinations-showcase .destination-card .card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 38, 51, 0.5) 100%);
  transition: opacity 0.35s ease;
}

.home-page .destinations-showcase .destination-card .card-info {
  position: relative;
  min-height: 145px;
  padding: 17px 17px 18px;
  text-align: left;
  background: #fff;
}

.home-page .destinations-showcase .destination-card .card-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 17px;
  width: 43px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e85d2a, #f7ae2a);
}

.home-page .destinations-showcase .destination-card:nth-child(3n+2) .card-info::before { background: linear-gradient(90deg, #007f85, #42bda9); }
.home-page .destinations-showcase .destination-card:nth-child(3n) .card-info::before { background: linear-gradient(90deg, #845ec2, #c36bdb); }

.home-page .destinations-showcase .destination-card h4 {
  margin-top: 4px;
  color: #003b4e;
  font-size: 18px;
}

.home-page .destinations-showcase .destination-card p {
  min-height: 22px;
  color: #668085;
  font-size: 12px;
}

.home-page .destinations-showcase .btn-outline {
  margin-top: 8px;
  padding: 6px 13px;
  border: 0;
  background: #edf8f7;
  font-size: 11px;
  font-weight: 700;
}

.home-page .destinations-showcase .btn-outline::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.25s ease;
}

.home-page .destinations-showcase .btn-outline:hover { color: #fff; }
.home-page .destinations-showcase .btn-outline:hover::after { transform: translateX(3px); }

.home-page .destinations-showcase .destination-card:hover .card-img::after { opacity: 0.72; }

.home-page .destinations-showcase .slider-arrow.outside {
  width: 44px;
  height: 44px;
  border: 1px solid #dbeeed;
  background: #fff;
  color: #007782;
  box-shadow: 0 7px 16px rgba(0, 74, 84, 0.13);
}

.home-page .destinations-showcase .slider-arrow.outside:hover { color: #fff; }

@media (max-width: 767px) {
  .home-page .section-intro { padding: 0 12px; }
  .home-page .destinations-showcase .destination-card .card-img { height: 225px; }
}

/* Tour packages — premium editorial cards with a clear booking path. */
.home-page .packages-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(247, 169, 40, 0.2), transparent 19rem),
    linear-gradient(135deg, #fffaf0 0%, #f4fbfb 52%, #eef8f7 100%);
}

.home-page .packages-showcase::before {
  content: 'YATRA';
  position: absolute;
  right: -20px;
  bottom: 2px;
  color: rgba(0, 95, 115, 0.035);
  font-size: clamp(80px, 17vw, 250px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 0.75;
  pointer-events: none;
}

.home-page .packages-showcase .container { position: relative; z-index: 1; }

.home-page .packages-showcase .section-header-flex {
  align-items: flex-end;
  margin-bottom: 34px;
}

.home-page .packages-showcase .section-title { margin-bottom: 0; }
.home-page .packages-showcase .section-intro { margin: 9px 0 0; max-width: 600px; }

.home-page .packages-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  background: #003b4e;
  color: #fff;
  box-shadow: 0 9px 18px rgba(0, 59, 78, 0.18);
}

.home-page .packages-all-link:hover {
  background: #0a9396;
  box-shadow: 0 12px 22px rgba(10, 147, 150, 0.25);
}

.home-page .packages-showcase .slider { padding: 5px 6px 20px; }

.home-page .packages-showcase .package-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 91, 106, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(0, 57, 70, 0.1);
}

.home-page .packages-showcase .package-img {
  position: relative;
  height: 205px;
  border-radius: 21px 21px 0 0;
  overflow: hidden;
}

.home-page .packages-showcase .package-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 34, 49, 0.02), rgba(0, 42, 58, 0.58));
  pointer-events: none;
}

.home-page .packages-showcase .package-img img { transition: transform 0.7s cubic-bezier(.2,.75,.25,1); }
.home-page .packages-showcase .package-card:hover .package-img img { transform: scale(1.1); }

.home-page .packages-showcase .badge {
  z-index: 2;
  top: 15px;
  left: 15px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 30px;
  background: rgba(0, 54, 70, 0.78);
  box-shadow: 0 5px 13px rgba(0,0,0,0.16);
  font-size: 11px;
  letter-spacing: 0.4px;
}

.home-page .packages-showcase .package-card:nth-child(4n+2) .badge { background: rgba(178, 77, 35, 0.88); }
.home-page .packages-showcase .package-card:nth-child(4n+3) .badge { background: rgba(110, 69, 157, 0.85); }
.home-page .packages-showcase .package-card:nth-child(4n) .badge { background: rgba(0, 121, 112, 0.85); }

.home-page .packages-showcase .package-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px 19px 18px;
}

.home-page .packages-showcase .package-content h3 {
  min-height: 54px;
  margin-bottom: 12px;
  color: #003b4e;
  font-size: 19px;
  line-height: 1.35;
}

.home-page .packages-showcase .package-features {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.home-page .packages-showcase .package-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55747a;
  font-size: 12px;
}

.home-page .packages-showcase .package-features i { color: #f3a326; font-size: 8px; }

.home-page .packages-showcase .package-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #cfe2df;
}

.home-page .packages-showcase .price {
  color: #d55227;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.home-page .packages-showcase .price::before {
  content: 'Starting from';
  display: block;
  margin-bottom: 1px;
  color: #769095;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.home-page .packages-showcase .btn-orange {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 12px;
}

.home-page .packages-showcase .slider-arrow.outside {
  width: 46px;
  height: 46px;
  border: 0;
  background: #fff;
  color: #d55227;
  box-shadow: 0 9px 20px rgba(0, 63, 79, 0.14);
}

.home-page .packages-showcase .slider-arrow.outside:hover { color: #fff; }

@media (max-width: 767px) {
  .home-page .packages-showcase .section-header-flex { align-items: flex-start; }
  .home-page .packages-all-link { margin-top: 18px; }
  .home-page .packages-showcase .package-img { height: 230px; }
}

/* Home gallery — a tactile filmstrip of real journey moments. */
.home-page .home-gallery-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 13%, rgba(232, 93, 42, 0.17), transparent 18rem),
    radial-gradient(circle at 88% 86%, rgba(132, 94, 194, 0.14), transparent 20rem),
    #fbfcfa;
}

.home-page .home-gallery-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(0, 95, 115, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  pointer-events: none;
}

.home-page .home-gallery-showcase .container,
.home-page .home-gallery-showcase .gallery-slider { position: relative; z-index: 1; }

.home-page .home-gallery-showcase .section-title { margin-bottom: 30px; }

.home-page .home-gallery-showcase .gallery-slider {
  width: min(100% - 28px, 1440px);
  margin: 0 auto;
  padding: 8px 4px 22px;
}

.home-page .home-gallery-showcase .gallery-item {
  position: relative;
  height: 265px;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 20px;
  background: #e7efee;
  box-shadow: 0 14px 28px rgba(0, 54, 70, 0.16);
  transform: rotate(-1.4deg);
  transition: transform 0.42s cubic-bezier(.2,.8,.2,1), box-shadow 0.42s ease;
}

.home-page .home-gallery-showcase .gallery-item:nth-child(even) { transform: rotate(1.4deg); }

.home-page .home-gallery-showcase .gallery-item::before {
  content: 'SHIV SHANKAR HOLIDAYS';
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 9px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(0, 48, 63, 0.72);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.55px;
}

.home-page .home-gallery-showcase .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 38, 51, 0.42));
  pointer-events: none;
}

.home-page .home-gallery-showcase .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.home-page .home-gallery-showcase .gallery-item:hover {
  z-index: 3;
  transform: translateY(-10px) rotate(0deg) scale(1.025);
  box-shadow: 0 24px 35px rgba(0, 54, 70, 0.24);
}

.home-page .home-gallery-showcase .gallery-item:hover img { transform: scale(1.1); }

.home-page .home-gallery-showcase .slider-arrow.sm {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  background: #e85d2a;
  color: #fff;
  box-shadow: 0 8px 16px rgba(155, 63, 29, 0.25);
}

.home-page .home-gallery-showcase .slider-arrow.sm:hover { background: #007f85; }

.home-page .home-gallery-showcase .slider-dots { margin-top: 26px; }

.home-page .home-gallery-showcase .slider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b7d2d0;
}

.home-page .home-gallery-showcase .slider-dots .dot.active { width: 27px; border-radius: 9px; background: #e85d2a; }

@media (max-width: 767px) {
  .home-page .home-gallery-showcase .gallery-slider { width: min(100% - 20px, 580px); }
  .home-page .home-gallery-showcase .gallery-item { height: 285px; transform: none; }
  .home-page .home-gallery-showcase .gallery-item:nth-child(even) { transform: none; }
}

/* Latest blogs — designed as a colourful, magazine-like travel journal. */
.home-page .home-blog-showcase {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fffdf7 100%);
}

.home-page .home-blog-showcase::after {
  content: '';
  position: absolute;
  right: -100px;
  top: 18px;
  width: 300px;
  height: 300px;
  border: 45px solid rgba(247, 169, 40, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.home-page .home-blog-showcase .container { position: relative; z-index: 1; }

.home-page .home-blog-showcase .section-header-flex {
  align-items: flex-end;
  margin-bottom: 33px;
}

.home-page .home-blog-showcase .section-title { margin-bottom: 0; }
.home-page .home-blog-showcase .section-intro { margin: 9px 0 0; max-width: 590px; }

.home-page .blogs-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #0a9396;
  background: #fff;
  color: #007782;
}

.home-page .blogs-all-link:hover { background: #0a9396; color: #fff; }

.home-page .home-blog-showcase .grid-3 { gap: 26px; }

.home-page .home-blog-showcase .blog-card {
  position: relative;
  display: block;
  min-height: 385px;
  overflow: hidden;
  border-radius: 22px;
  background: #003b4e;
  box-shadow: 0 14px 32px rgba(0, 53, 68, 0.14);
}

.home-page .home-blog-showcase .blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 41, 57, 0.02) 10%, rgba(0, 40, 55, 0.2) 45%, rgba(0, 35, 49, 0.95) 100%);
  transition: background 0.4s ease;
}

.home-page .home-blog-showcase .blog-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.75,.25,1);
}

.home-page .home-blog-showcase .blog-overlay {
  z-index: 2;
  padding: 27px 25px 24px;
  transform: translateY(10px);
  transition: transform 0.38s ease;
}

.home-page .home-blog-showcase .blog-tag {
  display: inline-block;
  margin-bottom: 11px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 30px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(4px);
  color: #fff7d8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.home-page .home-blog-showcase .blog-card h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.32;
}

.home-page .home-blog-showcase .blog-meta {
  color: #d5e7e5;
  font-size: 11px;
}

.home-page .home-blog-showcase .blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: #ffd166;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-page .home-blog-showcase .blog-read-more i { transition: transform 0.3s ease; }

.home-page .home-blog-showcase .blog-card:hover { transform: translateY(-9px); box-shadow: 0 23px 38px rgba(0, 53, 68, 0.23); }
.home-page .home-blog-showcase .blog-card:hover > img { transform: scale(1.1); }
.home-page .home-blog-showcase .blog-card:hover::after { background: linear-gradient(180deg, rgba(0, 41, 57, 0.08), rgba(0, 35, 49, 0.97)); }
.home-page .home-blog-showcase .blog-card:hover .blog-overlay { transform: translateY(0); }
.home-page .home-blog-showcase .blog-card:hover .blog-read-more { opacity: 1; transform: translateY(0); }
.home-page .home-blog-showcase .blog-card:hover .blog-read-more i { transform: translateX(4px); }

@media (max-width: 767px) {
  .home-page .home-blog-showcase .section-header-flex { align-items: flex-start; }
  .home-page .blogs-all-link { margin-top: 18px; }
  .home-page .home-blog-showcase .blog-card { min-height: 355px; }
  .home-page .home-blog-showcase .blog-read-more { opacity: 1; transform: none; }
}

/* Remaining homepage panels — unified with the saffron, teal and gold system. */
.home-page .cab-banner {
  margin: 18px auto;
  border-radius: 28px;
  width: min(94%, 1380px);
  padding: 50px 0;
  box-shadow: 0 20px 42px rgba(0, 82, 91, 0.22);
}

.home-page .cab-banner::after {
  content: '';
  position: absolute;
  top: -90px;
  right: 22%;
  width: 230px;
  height: 230px;
  border: 28px solid rgba(255, 209, 102, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.home-page .cab-text,
.home-page .cab-media { position: relative; z-index: 1; }

.home-page .cab-text .sub-head {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  color: #ffe1a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.home-page .cab-text h2 { letter-spacing: 1px; }
.home-page .cab-text .tagline { color: #d5f0ec; }
.home-page .cab-car-img { filter: drop-shadow(0 16px 16px rgba(0, 27, 39, 0.34)); }
.home-page .play-btn { background: #f7ae2a; box-shadow: 0 0 0 10px rgba(255,255,255,0.13); }

.home-page .trust-showcase {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f8fdfc 100%);
}

.home-page .trust-showcase::before {
  content: '';
  position: absolute;
  top: 45px;
  left: -75px;
  width: 190px;
  height: 190px;
  border: 32px solid rgba(10, 147, 150, 0.06);
  border-radius: 50%;
}

.home-page .trust-showcase .container { position: relative; z-index: 1; }

.home-page .trust-showcase .feature-box {
  min-height: 212px;
  padding: 26px 16px 20px;
  background: #fff;
}

.home-page .trust-showcase .feature-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  font-size: 24px;
  box-shadow: 0 8px 16px rgba(0, 87, 95, 0.08);
}

.home-page .trust-showcase .feature-box:nth-child(3n+2) .feature-icon { background: linear-gradient(135deg, #e5f8f5, #d9f2f0); color: #007f85; }
.home-page .trust-showcase .feature-box:nth-child(3n) .feature-icon { background: linear-gradient(135deg, #f3eaff, #fce8fb); color: #845ec2; }
.home-page .trust-showcase .feature-box:hover .feature-icon { background: linear-gradient(135deg, #e85d2a, #f7ae2a); color: #fff; transform: translateY(-4px) rotateY(180deg); }
.home-page .trust-showcase .feature-box h4 { color: #003b4e; font-size: 16px; }
.home-page .trust-showcase .feature-box p { color: #648086; line-height: 1.65; }

.home-page .testimonial-banner {
  position: relative;
  overflow: hidden;
  padding: 74px 0;
  background: linear-gradient(115deg, rgba(0, 47, 73, 0.93), rgba(0, 125, 132, 0.82)), url('../images/destinations/varanasi/assi-ghat.webp') center/cover;
}

.home-page .testimonial-banner::before {
  content: '“';
  position: absolute;
  left: 7%;
  top: -60px;
  color: rgba(255,255,255,0.1);
  font-family: Georgia, serif;
  font-size: 270px;
  line-height: 1;
}

.home-page .testimonial-banner .container { position: relative; z-index: 1; }
.home-page .testimonial-banner .quote-icon { border-radius: 50%; background: linear-gradient(135deg, #e85d2a, #f7ae2a); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
.home-page .testimonial-banner h2 { font-size: clamp(28px, 3vw, 37px); }
.home-page .testimonial-banner h2 span { color: #ffd166; }
.home-page .testimonial-text { font-size: 17px; line-height: 1.8; }
.home-page .client-name { color: #ffe0a0; font-weight: 600; }
.home-page .testimonial-banner .slider-dots .dot.active { background: #ffd166; }

.home-page .site-footer { background: linear-gradient(120deg, #002b3b, #003b4e 54%, #005f73); }
.home-page .site-footer .footer-col h4::after { background: #f7ae2a; }
.home-page .site-footer a:hover { color: #ffd166; }

.home-page .back-to-top {
  background: linear-gradient(135deg, #e85d2a, #f7ae2a);
  box-shadow: 0 8px 18px rgba(201, 76, 30, 0.32);
}

.home-page .back-to-top:hover { background: linear-gradient(135deg, #007f85, #0a9396); }

@media (max-width: 767px) {
  .home-page .cab-banner { width: 100%; margin: 0; border-radius: 0; padding: 44px 0; }
  .home-page .trust-showcase .feature-box { min-height: 0; }
  .home-page .testimonial-banner { padding: 62px 0; }
}

/* ========================================================================== */
/* JOURNAL — dynamic blog listing and article detail pages */
/* ========================================================================== */
.blog-page { background: #fffdfa; }
.journal-hero { position: relative; overflow: hidden; padding: 94px 0 105px; color: #fff; background: linear-gradient(115deg, #003b4e, #007f85 60%, #0a9396); }
.journal-hero::before { content: ''; position: absolute; width: 440px; height: 440px; right: 7%; top: -250px; border: 56px solid rgba(255,209,102,.16); border-radius: 50%; }
.journal-hero::after { content: 'JOURNAL'; position: absolute; bottom: -62px; right: 5%; color: rgba(255,255,255,.055); font-size: clamp(80px,16vw,220px); font-weight: 800; letter-spacing: .05em; }
.journal-hero .container { position: relative; z-index: 1; max-width: 960px; text-align: center; }
.journal-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.34); border-radius: 30px; color: #ffe2a4; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.journal-hero h1 { margin: 16px 0 8px; font-size: clamp(42px,6vw,70px); line-height: 1.04; letter-spacing: -2px; }
.journal-hero h1 span { color: #ffd166; font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.journal-hero > .container > p:not(.journal-eyebrow) { max-width: 590px; margin: 0 auto 26px; color: #d8f0ed; }
.journal-search { display: flex; align-items: center; max-width: 610px; margin: auto; padding: 5px 7px 5px 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 13px; background: #fff; box-shadow: 0 14px 30px rgba(0,32,43,.18); color: #e85d2a; }
.journal-search input { width: 100%; padding: 10px 12px; border: 0; outline: 0; color: #003b4e; font: inherit; font-size: 14px; }
.journal-feature { padding: 0 0 60px; margin-top: -34px; position: relative; z-index: 2; }
.journal-feature-card { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; border: 5px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 20px 46px rgba(0,63,79,.17); }
.journal-feature-card > img { width: 100%; height: 360px; object-fit: cover; }
.journal-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 45px; background: linear-gradient(135deg,#fffdf9,#f3faf8); }
.feature-label { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 11px; border-radius: 30px; background: color-mix(in srgb, var(--blog-accent) 12%, white); color: var(--blog-accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.feature-meta { margin-top: 17px; color: #6f898e; font-size: 12px; }.feature-meta i { display: inline-block; width: 4px; height: 4px; margin: 0 7px 2px; border-radius: 50%; background: #f3a326; }
.journal-feature-copy h2 { margin: 8px 0 11px; color: #003b4e; font-size: clamp(27px,3vw,38px); line-height: 1.2; }.journal-feature-copy > p { color: #5f7b80; font-size: 14px; }
.feature-read { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-top: 22px; padding: 10px 15px; border-radius: 8px; background: var(--blog-accent); color: #fff; font-size: 12px; font-weight: 700; }.feature-read i { transition: transform .25s; }.feature-read:hover i { transform: translateX(4px); }
.journal-listing { background: linear-gradient(135deg,#fff8ed,#f6fcfb 60%,#fff); }.journal-list-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 25px; }.journal-list-head h2 { color: #003b4e; font-size: clamp(28px,3.2vw,38px); }.journal-list-head h2 span, .article-related h2 span { color: #e85d2a; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }.blog-filters button { padding: 8px 12px; border: 1px solid #d7e8e5; border-radius: 30px; background: #fff; color: #547277; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }.blog-filters button.active,.blog-filters button:hover { border-color: #007f85; background: #007f85; color: #fff; }
.blog-results { display: flex; justify-content: space-between; margin-bottom: 20px; color: #6b8589; font-size: 12px; }.blog-results strong { color: #d55227; }.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }.journal-card { overflow: hidden; border: 1px solid rgba(0,95,115,.1); border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(0,55,69,.07); transition: transform .35s,box-shadow .35s; }.journal-card:hover { transform: translateY(-8px); box-shadow: 0 22px 35px rgba(0,55,69,.16); }.journal-card-image { position: relative; display: block; height: 205px; overflow: hidden; }.journal-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(0,44,59,.38)); }.journal-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }.journal-card:hover .journal-card-image img { transform: scale(1.1); }.journal-card-image span { position: absolute; z-index: 2; top: 13px; left: 13px; padding: 5px 9px; border-radius: 20px; background: var(--blog-accent); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }.journal-card-body { padding: 19px; }.journal-card-meta { display: flex; justify-content: space-between; color: #789196; font-size: 10px; }.journal-card h3 { margin: 7px 0; color: #003b4e; font-size: 18px; line-height: 1.35; }.journal-card h3 a:hover { color: var(--blog-accent); }.journal-card-body > p { min-height: 60px; color: #668086; font-size: 12px; line-height: 1.7; }.journal-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; color: var(--blog-accent); font-size: 12px; font-weight: 700; }.journal-card-link i { transition: transform .25s; }.journal-card-link:hover i { transform: translateX(4px); }
.blog-empty { display: none; padding: 65px 20px; text-align: center; background: #fff; border-radius: 18px; }.blog-empty.show { display: block; }.blog-empty > i { color: #e85d2a; font-size: 42px; }.blog-empty h3 { margin: 10px 0 4px; color: #003b4e; }.blog-empty p { margin-bottom: 18px; color: #6c868b; font-size: 13px; }
.article-page { padding: 58px 0 78px; background: linear-gradient(135deg,#fffdfa,#f4faf9); }.article { max-width: 1000px; margin: auto; }.article-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 28px; color: #799297; font-size: 12px; }.article-breadcrumb a { color: #007f85; }.article-breadcrumb i { color: #c6d5d2; font-size: 9px; }.article-header { max-width: 830px; margin: 0 auto 28px; text-align: center; }.article-category { display: inline-flex; gap: 7px; padding: 6px 12px; border-radius: 30px; background: color-mix(in srgb,var(--blog-accent) 12%,white); color: var(--blog-accent); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }.article-header h1 { margin: 15px 0 12px; color: #003b4e; font-size: clamp(34px,5vw,58px); line-height: 1.12; letter-spacing: -1.7px; }.article-header > p { color: #607d82; font-size: 16px; }.article-author { display: inline-flex; gap: 10px; align-items: center; margin-top: 20px; color: #315c64; text-align: left; font-size: 12px; font-weight: 600; }.article-author small { color: #81999d; font-weight: 400; }.author-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#e85d2a,#f7ae2a); color: #fff; font-size: 10px; font-weight: 800; }.article-hero { overflow: hidden; margin: 0; border: 5px solid #fff; border-radius: 24px; box-shadow: 0 18px 35px rgba(0,55,70,.15); }.article-hero img { display: block; width: 100%; height: min(54vw,510px); object-fit: cover; }.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 35px; max-width: 820px; margin: 43px auto 0; }.article-body { color: #4d6f75; font-size: 15px; line-height: 1.9; }.article-intro { margin-bottom: 24px; color: #254e57; font-family: Georgia,serif; font-size: 21px; line-height: 1.65; }.article-body section { margin-top: 34px; }.article-body h2 { margin-bottom: 9px; color: #003b4e; font-size: 25px; line-height: 1.35; }.article-takeaways { margin: 25px 0 6px; padding: 22px; border-left: 4px solid var(--blog-accent); border-radius: 0 13px 13px 0; background: #fff; box-shadow: 0 8px 20px rgba(0,56,70,.06); }.article-takeaways h3 { margin-bottom: 10px; color: #003b4e; font-size: 15px; }.article-takeaways h3 i,.article-takeaways li i { color: var(--blog-accent); }.article-takeaways li { display: flex; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.55; }.article-takeaways li i { margin-top: 4px; font-size: 11px; }.article-side > div { position: sticky; top: 100px; display: grid; gap: 9px; text-align: center; }.article-side p { color: #779196; font-size: 9px; font-weight: 700; letter-spacing: .8px; writing-mode: vertical-rl; margin: auto; }.article-side a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d4e3e0; border-radius: 50%; color: #007f85; }.article-side a:hover { background: var(--blog-accent); border-color: var(--blog-accent); color: #fff; }.article-cta { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 38px; padding: 22px; border-radius: 14px; background: linear-gradient(120deg,#003b4e,#007f85); color: #fff; }.article-cta span { color: #ffd166; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }.article-cta h3 { font-size: 17px; }.article-cta a { flex: none; padding: 9px 12px; border-radius: 8px; background: #f7ae2a; color: #003b4e; font-size: 11px; font-weight: 700; }.article-related { max-width: 1000px; margin-top: 65px; }.article-related h2 { margin: 6px 0 19px; color: #003b4e; font-size: 28px; }.article-related > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }.article-missing { padding: 110px 20px; text-align: center; }.article-missing i { color: #e85d2a; font-size: 46px; }.article-missing h1 { color: #003b4e; }.article-missing p { margin-bottom: 17px; color: #668086; }
@media (max-width: 800px) { .journal-feature-card { grid-template-columns: 1fr; }.journal-feature-card > img { height: 270px; }.journal-feature-copy { padding: 29px; }.journal-list-head { align-items: flex-start; flex-direction: column; }.blog-filters { justify-content: flex-start; }.blog-grid { grid-template-columns: repeat(2,1fr); }.article-layout { grid-template-columns: 1fr; }.article-side { display: none; }.article-related > div { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .journal-hero { padding: 72px 0 90px; }.journal-hero h1 { letter-spacing: -1px; }.journal-feature { padding-bottom: 45px; }.journal-feature-card > img { height: 215px; }.journal-feature-copy { padding: 24px 20px; }.blog-grid { grid-template-columns: 1fr; }.blog-results span { display: none; }.article-page { padding-top: 38px; }.article-header > p { font-size: 14px; }.article-hero { border-radius: 16px; }.article-layout { margin-top: 29px; }.article-intro { font-size: 18px; }.article-body h2 { font-size: 22px; }.article-cta { align-items: flex-start; flex-direction: column; }.article-related { margin-top: 45px; } }

/* Full article sidebar: categories, recent reading, tags and sharing. */
.article-layout { grid-template-columns: minmax(0, 1fr) 285px; max-width: 1010px; align-items: start; }
.article-sidebar { position: sticky; top: 94px; display: grid; gap: 18px; }
.side-search { position: relative; display: flex; align-items: center; border: 1px solid #d7e7e4; border-radius: 10px; background: #fff; box-shadow: 0 8px 17px rgba(0,59,78,.06); }
.side-search input { width: 100%; padding: 11px 37px 11px 12px; border: 0; outline: 0; background: transparent; color: #003b4e; font: inherit; font-size: 12px; }.side-search i { position: absolute; right: 13px; color: var(--blog-accent); font-size: 13px; }
.side-panel { padding: 19px; border: 1px solid #dce9e7; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(0,56,70,.05); }.side-panel h3 { margin-bottom: 13px; color: #003b4e; font-size: 16px; }
.side-categories { display: grid; gap: 5px; }.side-categories a { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px solid #edf3f1; color: #55757b; font-size: 12px; }.side-categories a:last-child { border-bottom: 0; }.side-categories a i { color: var(--blog-accent); font-size: 11px; }.side-categories a:hover span { color: var(--blog-accent); }.side-categories em { min-width: 20px; padding: 1px 6px; border-radius: 20px; background: #edf7f5; color: #007f85; font-size: 10px; font-style: normal; text-align: center; }
.side-recent { display: grid; gap: 12px; }.side-recent a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; color: #254f58; font-size: 11px; font-weight: 700; line-height: 1.4; }.side-recent a:hover { color: var(--blog-accent); }.side-recent img { width: 64px; height: 49px; border-radius: 7px; object-fit: cover; }.side-recent small { display: block; margin-top: 3px; color: #7c969a; font-size: 9px; font-weight: 400; }
.side-tags { display: flex; flex-wrap: wrap; gap: 7px; }.side-tags a { padding: 5px 8px; border: 1px solid #dceae7; border-radius: 6px; background: #f9fcfb; color: #56757a; font-size: 10px; }.side-tags a:hover,.side-tags a.active { border-color: var(--blog-accent); background: var(--blog-accent); color: #fff; }
.side-share { padding: 18px; border-radius: 13px; background: linear-gradient(135deg,#003b4e,#007f85); text-align: center; }.side-share p { margin-bottom: 10px; color: #ffe2a4; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }.side-share div { display: flex; justify-content: center; gap: 7px; }.side-share a { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; font-size: 11px; }.side-share a:hover { background: #f7ae2a; border-color: #f7ae2a; color: #003b4e; }
@media (max-width: 800px) { .article-sidebar { display: none; } }

/* Tags: a browse bar above the grid plus per-card chips, both filtering the
   same listing so a tag can be followed from anywhere on the page. */
.blog-tagbar { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding: 13px 16px; border: 1px solid #e0eeeb; border-radius: 14px; background: rgba(255,255,255,.8); }
.blog-tagbar-label { flex: none; color: #003b4e; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }.blog-tagbar-label i { margin-right: 6px; color: #e85d2a; }
.blog-tagbar-list { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-tagbar-list button { display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border: 1px solid #dceae7; border-radius: 30px; background: #fff; color: #56757a; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .25s,background .25s,color .25s; }
.blog-tagbar-list button:hover { border-color: #e85d2a; color: #d55227; }
.blog-tagbar-list button.active { border-color: #e85d2a; background: #e85d2a; color: #fff; }
.blog-tagbar-list em { padding: 0 5px; border-radius: 20px; background: #f1f7f6; color: #007f85; font-size: 9px; font-style: normal; font-weight: 700; }.blog-tagbar-list button.active em { background: rgba(255,255,255,.28); color: #fff; }
/* Cards stretch to equal height so the tag rows and read links line up. */
.journal-card { display: flex; flex-direction: column; }
.journal-card-body { display: flex; flex: 1; flex-direction: column; }
.journal-card-body > p { flex: none; }
.journal-card-link { margin-top: auto; padding-top: 13px; }
.journal-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.journal-card-tags a { padding: 4px 8px; border: 1px solid #e2eeec; border-radius: 20px; background: #f8fbfa; color: #6a878c; font-size: 10px; font-weight: 600; }
.journal-card-tags a:hover,.journal-card-tags a.active { border-color: var(--blog-accent); background: var(--blog-accent); color: #fff; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.feature-tags a { padding: 5px 10px; border: 1px solid color-mix(in srgb,var(--blog-accent) 28%,white); border-radius: 20px; color: var(--blog-accent); font-size: 10px; font-weight: 600; }
.feature-tags a:hover { background: var(--blog-accent); color: #fff; }
@media (max-width: 700px) { .blog-tagbar { align-items: flex-start; flex-direction: column; gap: 10px; } }

/* End of story: tags, sharing, then previous/next and related reading. */
.article-foot { margin-top: 38px; padding-top: 26px; border-top: 1px solid #e4edec; }
.article-foot-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.article-foot-share { margin-top: 22px; padding-top: 24px; border-top: 1px solid #e4edec; }
.foot-label { flex: none; color: #12305c; font-size: 15px; font-weight: 700; }.foot-label i { margin-right: 7px; color: #f3a326; }
.foot-items { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.article-foot-tags a { padding: 7px 15px; border-radius: 30px; background: #eef1f8; color: #12305c; font-size: 13px; font-weight: 500; line-height: 1.3; transition: background .25s,color .25s; }
.article-foot-tags a:hover { background: var(--blog-accent); color: #fff; }
.share-btn { display: inline-flex; gap: 9px; align-items: center; padding: 11px 19px; border: 0; border-radius: 8px; color: #fff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: filter .25s,transform .25s; }
.share-btn i { font-size: 15px; }
.share-btn:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff; }
.share-whatsapp { background: #25c65c; }
.share-linkedin { background: #1a4fa0; }
.share-twitter { background: #29a9eb; }
.share-copy { border: 1px solid #dfe4ec; background: #fff; color: #33445f; }.share-copy:hover { background: #f4f6fa; color: #33445f; }
.share-copy.copied { border-color: #25c65c; background: #25c65c; color: #fff; }.share-copy.copied:hover { background: #25c65c; color: #fff; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 22px; }
.article-nav-item { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: center; padding: 11px; border: 1px solid #dce9e7; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(0,56,70,.05); transition: transform .3s,box-shadow .3s,border-color .3s; }
.article-nav-item:hover { transform: translateY(-3px); border-color: var(--blog-accent); box-shadow: 0 16px 26px rgba(0,55,69,.12); }
.article-nav-item img { width: 66px; height: 56px; border-radius: 10px; object-fit: cover; }
.article-nav-item small { display: block; margin-bottom: 4px; color: var(--blog-accent); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.article-nav-item strong { display: block; color: #003b4e; font-size: 13px; font-weight: 700; line-height: 1.4; }
.article-nav-item.next { grid-template-columns: 1fr 66px; text-align: right; }.article-nav-item.next img { order: 2; }
.article-nav-empty { display: none; }
@media (max-width: 800px) { .article-related > div { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .article-foot-row { align-items: flex-start; flex-direction: column; gap: 12px; }.share-btn { padding: 10px 15px; font-size: 13px; }.article-nav { grid-template-columns: 1fr; }.article-nav-item.next { grid-template-columns: 66px 1fr; text-align: left; }.article-nav-item.next img { order: 0; }.article-related > div { grid-template-columns: 1fr; } }

.home-page .destination-card,
.home-page .package-card,
.home-page .feature-box {
  border: 1px solid rgba(0, 95, 115, 0.1);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 50, 72, 0.07);
}

.home-page .destination-card:hover,
.home-page .package-card:hover,
.home-page .feature-box:hover {
  transform: translateY(-9px);
  box-shadow: 0 20px 32px rgba(0, 70, 90, 0.16);
}

.home-page .destination-card .card-img,
.home-page .package-img { border-radius: 17px 17px 0 0; }

.home-page .btn-outline,
.home-page .btn-view-all {
  border-color: #b9d9d7;
  border-radius: 30px;
  color: #006d77;
}

.home-page .btn-outline:hover,
.home-page .btn-view-all:hover {
  background: #0a9396;
  border-color: #0a9396;
}

.home-page .cab-banner {
  margin: 18px auto;
  background: linear-gradient(115deg, #005f73 0%, #0a9396 55%, #43aa8b 100%);
}

.home-page .feature-icon {
  background: linear-gradient(135deg, #fff1db, #dff6f4);
  color: #e85d2a;
  border: 1px solid #fde1ba;
}

.home-page .feature-box:nth-child(even) .feature-icon { color: #0a9396; }

.home-page .gallery-item {
  border-radius: 16px;
  border: 4px solid #fff;
  box-shadow: 0 8px 22px rgba(0, 44, 65, 0.14);
}

.home-page .testimonial-banner {
  background: linear-gradient(115deg, rgba(0, 47, 73, 0.92), rgba(10, 147, 150, 0.82)), url('../images/destinations/varanasi/assi-ghat.webp') center / cover;
}

.home-page .blog-card {
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 40, 58, 0.11);
}

@media (max-width: 767px) {
  .home-page .hero-section { height: 650px; border-radius: 0; }
  .home-page .hero-content { padding-bottom: 210px; }
  .home-page .hero-quick-bar { bottom: 26px; display: grid; grid-template-columns: repeat(3, 1fr); }
  .home-page .quick-item { padding: 11px 5px; font-size: 11px; }
  .home-page .quick-item i { font-size: 18px; }
  .home-page .search-box { padding: 22px 16px; }
  .home-page .section-padding { padding: 58px 0; }
}

/* ==========================================================================
   CONTACT — hero, message form, contact details, offices and map
   contact.html
   ========================================================================== */

/* Handwritten accent used in the hero and the sign-off block */
.script-text {
  font-family: 'Kaushan Script', Georgia, cursive;
  font-weight: 400;
  color: var(--primary-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.contact-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  background: url('../images/banner/banner3.webp') center/cover no-repeat;
}

/* Light wash so the dark heading stays readable over the photo */
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.85) 38%, rgba(255,255,255,0) 68%);
}

.contact-hero .container {
  position: relative;
  z-index: 2;
}

.contact-hero-inner {
  max-width: 560px;
  padding: 56px 0;
}

.contact-hero h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--secondary-dark);
}

.contact-hero .script-text {
  font-size: 34px;
  line-height: 1.4;
  margin: 4px 0 18px;
}

.contact-hero p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dark);
}

/* Scoped to the hero so it outranks the `.contact-hero p` paragraph rule */
.contact-hero .crumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
  background: var(--secondary-dark);
  color: var(--white);
  font-size: 13px;
  line-height: 1.4;
  padding: 11px 22px;
  border-radius: 6px;
}

.crumb-pill a {
  color: var(--white);
  transition: var(--transition);
}

.crumb-pill a:hover {
  color: var(--primary-orange);
}

.crumb-pill i {
  font-size: 9px;
  opacity: 0.65;
}

/* ==========================================================================
   Message form and contact details
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 30px;
  align-items: start;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.06);
  padding: 34px;
}

.contact-card h2 {
  font-size: 26px;
  color: var(--secondary-dark);
}

.contact-card h2 span {
  color: var(--primary-orange);
}

.heading-rule {
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary-orange);
  margin: 13px 0 28px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-dark);
  outline: none;
  resize: vertical;
  transition: var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aab1bb;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(242,101,34,0.12);
}

/* Security code: answer field on the left, the code and its refresh on the
   right. Styles were inline on the markup before the two were put side by side. */
.contact-form .captcha-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-form .captcha-row > input {
  flex: 1 1 190px;
  min-width: 0;
}

.contact-form .captcha-visual {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
}

.contact-form #cfCaptchaImg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fdf3ea;
  cursor: pointer;
}

/* The 180x60 viewBox letterboxes into whatever height the input sets. */
.contact-form #cfCaptchaImg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-form #cfCaptchaRefresh {
  display: grid;
  place-items: center;
  width: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--white);
  color: #50575e;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.contact-form #cfCaptchaRefresh:hover {
  border-color: var(--primary-orange);
  color: var(--primary-orange);
}

.form-send {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}

.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-orange);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 26px;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.btn-send:hover {
  background: #d95316;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(242,101,34,0.7);
}

.form-deco {
  width: 100%;
  max-width: 260px;
  height: 52px;
  overflow: visible;
}

.contact-ok {
  display: none;
  background: #f1fbf5;
  border: 1px solid #cdedd9;
  border-radius: 10px;
  color: #14a44d;
  font-size: 14px;
  line-height: 1.7;
  padding: 18px;
}

.contact-ok.show {
  display: block;
}

.info-list {
  list-style: none;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.info-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--secondary-dark);
  color: var(--white);
  font-size: 16px;
  transition: var(--transition);
}

.info-list li:hover .info-ico {
  background: var(--primary-orange);
  transform: translateY(-3px);
}

.info-txt strong {
  display: block;
  font-size: 15px;
  color: var(--secondary-dark);
  margin-bottom: 4px;
}

.info-txt a,
.info-txt span {
  display: block;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  word-break: break-word;
}

.info-txt a:hover {
  color: var(--primary-orange);
}

/* The illustrated sign-off under the contact details */
.plan-deco {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px dashed var(--border-color);
  padding-top: 26px;
  margin-top: 4px;
}

.plan-deco .temple {
  font-size: 54px;
  color: var(--primary-orange);
  opacity: 0.85;
}

.plan-deco .script-text {
  font-size: 22px;
  line-height: 1.55;
}

.plan-deco .plane {
  margin-left: auto;
  align-self: flex-start;
  font-size: 20px;
  color: var(--secondary-dark);
  transform: rotate(45deg);
}

/* ==========================================================================
   Offices
   ========================================================================== */
.office-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.office-card {
  display: flex;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.office-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 18px 34px -18px rgba(242,101,34,0.65);
}

.office-img {
  width: 96px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-light);
}

.office-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.office-card:hover .office-img img {
  transform: scale(1.12);
}

.office-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 16px;
  flex-grow: 1;
}

.office-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--secondary-dark);
}

.office-body h3 i {
  color: var(--primary-orange);
  font-size: 14px;
}

.office-body address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}

.office-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-dark);
  transition: var(--transition);
}

.office-phone i {
  color: var(--primary-orange);
  font-size: 12px;
}

.office-phone:hover {
  color: var(--primary-orange);
}

/* ==========================================================================
   Map
   ========================================================================== */
.contact-map {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,0.06);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.map-pill {
  position: absolute;
  top: 26px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary-dark);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: var(--transition);
}

.map-pill:hover {
  background: var(--primary-orange);
  color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .contact-hero h1 {
    font-size: 42px;
  }

  .contact-hero::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.45) 100%);
  }
}

@media (max-width: 767px) {
  .logo img {
    height: 44px;
  }

  .contact-hero {
    min-height: 260px;
  }

  .contact-hero h1 {
    font-size: 34px;
  }

  .contact-hero .script-text {
    font-size: 26px;
  }

  .contact-card {
    padding: 24px 20px;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-deco {
    display: none;
  }

  .btn-send {
    width: 100%;
    justify-content: center;
  }

  .map-pill {
    top: 16px;
    left: 16px;
    padding: 11px 18px;
    font-size: 13px;
  }
}

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

  .plan-deco .script-text {
    font-size: 19px;
  }

  .plan-deco .temple {
    font-size: 44px;
  }
}

/* ==========================================================================
   ABOUT US — hero collage, story, pillars, timeline, team
   about-us.html
   ========================================================================== */

/* One-shot reveal driven by js/about.js. Anything marked [data-reveal] starts
   lifted and transparent; .in-view settles it. No JS means no class and no
   animation, so the content is simply there. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ab-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 90px;
  background: linear-gradient(160deg, #fff7f2 0%, #ffffff 45%, #f3f7ff 100%);
}

/* Soft colour washes behind the content */
.ab-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

.ab-hero-blob.one {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -110px;
  background: rgba(242, 101, 34, 0.35);
}

.ab-hero-blob.two {
  width: 440px;
  height: 440px;
  right: -140px;
  bottom: -180px;
  background: rgba(29, 78, 216, 0.22);
}

.ab-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.ab-hero-text .script-text {
  font-size: 26px;
  margin-bottom: 4px;
}

.ab-hero-text h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--secondary-dark);
  margin-bottom: 18px;
}

.ab-hero-text h1 span {
  color: var(--primary-orange);
}

.ab-lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 540px;
}

.ab-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 30px;
}

.ab-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--text-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.ab-pills i {
  color: var(--primary-orange);
  font-size: 13px;
}

.ab-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.ab-hero-cta .btn-orange {
  padding: 14px 26px;
  font-size: 14px;
  border-radius: 8px;
}

.ab-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--secondary-dark);
}

.ab-call-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(242, 101, 34, 0.12);
  color: var(--primary-orange);
  font-size: 15px;
  transition: var(--transition);
}

.ab-call:hover .ab-call-ico {
  background: var(--primary-orange);
  color: var(--white);
  transform: rotate(-12deg);
}

.ab-call small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.ab-call strong {
  font-size: 15px;
  color: var(--secondary-dark);
}

/* Overlapping photo collage */
.ab-collage {
  position: relative;
  height: 470px;
}

.ab-shot {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 20px 44px -20px rgba(0, 18, 51, 0.45);
}

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

.ab-shot:hover img {
  transform: scale(1.08);
}

.ab-shot.one {
  width: 62%;
  height: 300px;
  top: 0;
  left: 0;
  transform: rotate(-3deg);
  animation: abFloat 7s ease-in-out infinite;
}

.ab-shot.two {
  width: 52%;
  height: 240px;
  right: 0;
  top: 90px;
  transform: rotate(4deg);
  animation: abFloat 8s ease-in-out infinite 0.8s;
  z-index: 2;
}

.ab-shot.three {
  width: 46%;
  height: 190px;
  left: 12%;
  bottom: 0;
  transform: rotate(2deg);
  animation: abFloat 9s ease-in-out infinite 0.4s;
  z-index: 3;
}

@keyframes abFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-shot { animation: none; }
}

.ab-badge {
  position: absolute;
  right: 4%;
  bottom: 26px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-orange), #ffa45c);
  color: var(--white);
  text-align: center;
  border: 6px solid var(--white);
  box-shadow: 0 16px 30px -14px rgba(242, 101, 34, 0.9);
}

.ab-badge strong {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.ab-badge small {
  font-size: 10.5px;
  line-height: 1.35;
  opacity: 0.95;
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.ab-stats {
  position: relative;
  padding: 46px 0;
  background: linear-gradient(120deg, var(--secondary-dark) 0%, #062a63 55%, #0b3f8f 100%);
  overflow: hidden;
}

.ab-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 120%, rgba(242, 101, 34, 0.5), transparent 45%);
}

.ab-stats-grid {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ab-stats-grid li {
  text-align: center;
  color: var(--white);
  padding: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.ab-stats-grid li:last-child {
  border-right: none;
}

.ab-stats-grid i {
  font-size: 24px;
  color: var(--primary-orange);
  margin-bottom: 10px;
}

.ab-stats-grid strong {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
}

.ab-stats-grid span {
  font-size: 13px;
  color: #cfd8e6;
}

/* ==========================================================================
   Story
   ========================================================================== */
.ab-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.ab-story-media {
  position: relative;
  padding: 0 0 60px 0;
}

/* Outline square that sits behind the main photo */
.ab-frame {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 190px;
  height: 190px;
  border: 5px solid rgba(242, 101, 34, 0.35);
  border-radius: 16px;
}

.ab-story-img {
  position: relative;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(0, 18, 51, 0.55);
}

.ab-story-img.small {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 200px;
  height: 200px;
  border: 6px solid var(--white);
}

.ab-story-tag {
  position: absolute;
  left: -14px;
  bottom: 78px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-dark);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.ab-story-tag i {
  color: var(--primary-orange);
  font-size: 17px;
}

.ab-story-text .script-text {
  font-size: 24px;
}

.ab-story-text h2 {
  font-size: 34px;
  line-height: 1.25;
  color: var(--secondary-dark);
  margin: 4px 0 18px;
}

.ab-story-text h2 span {
  color: var(--primary-orange);
}

.ab-story-text p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.ab-ticks {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 22px 0 28px;
}

.ab-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--text-dark);
}

.ab-ticks i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(242, 101, 34, 0.14);
  color: var(--primary-orange);
  font-size: 10px;
}

.ab-sign {
  border-top: 1px dashed var(--border-color);
  padding-top: 18px;
}

.ab-sign .script-text {
  font-size: 30px;
  line-height: 1.2;
}

.ab-sign span {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   Mission / Vision / Values
   ========================================================================== */
.ab-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.ab-pillar {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 34px 28px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ab-pillar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.ab-pillar:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 24px 44px -22px var(--c);
}

.ab-pillar:hover::before {
  transform: scaleX(1);
}

.ab-pillar-num {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 62px;
  font-weight: 800;
  line-height: 1;
  color: var(--c);
  opacity: 0.08;
}

.ab-pillar i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 24px;
  margin-bottom: 18px;
  transition: var(--transition);
}

.ab-pillar:hover i {
  transform: rotate(-8deg) scale(1.06);
}

.ab-pillar h3 {
  font-size: 20px;
  color: var(--secondary-dark);
  margin-bottom: 10px;
}

.ab-pillar p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.ab-timeline {
  position: relative;
  list-style: none;
  max-width: 940px;
  margin: 0 auto;
}

/* The spine */
.ab-timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--border-color) 8%, var(--border-color) 92%, transparent);
}

.ab-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
}

.ab-year {
  grid-column: 2;
  justify-self: center;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border-color);
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-dark);
  transition: var(--transition);
}

.ab-milestone {
  grid-column: 1;
  grid-row: 1;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: right;
  transition: var(--transition);
}

/* Alternate sides down the spine */
.ab-timeline li:nth-child(even) .ab-milestone {
  grid-column: 3;
  text-align: left;
}

.ab-milestone h3 {
  font-size: 18px;
  color: var(--secondary-dark);
  margin-bottom: 7px;
}

.ab-milestone p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

.ab-timeline li:hover .ab-milestone {
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 20px 36px -20px rgba(242, 101, 34, 0.8);
}

.ab-timeline li:hover .ab-year {
  background: linear-gradient(140deg, var(--primary-orange), #ffa45c);
  border-color: transparent;
  color: var(--white);
  transform: scale(1.08);
}

/* ==========================================================================
   What sets us apart
   ========================================================================== */
.ab-apart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ab-apart-box {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 30px 26px;
  overflow: hidden;
  transition: var(--transition);
}

/* Orange disc that grows out from behind the icon */
.ab-apart-box::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(242, 101, 34, 0.08);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.ab-apart-box:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 20px 38px -20px rgba(0, 18, 51, 0.4);
}

.ab-apart-box:hover::after {
  transform: scale(1);
  opacity: 1;
}

.ab-apart-box i {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(242, 101, 34, 0.12);
  color: var(--primary-orange);
  font-size: 21px;
  margin-bottom: 16px;
  transition: var(--transition);
}

.ab-apart-box:hover i {
  background: var(--primary-orange);
  color: var(--white);
}

.ab-apart-box h4 {
  position: relative;
  z-index: 2;
  font-size: 16px;
  color: var(--secondary-dark);
  margin-bottom: 8px;
}

.ab-apart-box p {
  position: relative;
  z-index: 2;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* ==========================================================================
   Team
   ========================================================================== */
.ab-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.ab-member {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--transition);
}

.ab-member:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 24px 44px -22px rgba(0, 18, 51, 0.5);
}

.ab-member-photo {
  position: relative;
  height: 270px;
  overflow: hidden;
  background: var(--bg-light);
}

.ab-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}

.ab-member:hover .ab-member-photo img {
  transform: scale(1.08);
}

/* Social bar slides up from the bottom of the photo */
.ab-member-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(to top, rgba(0, 18, 51, 0.9), transparent);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ab-member:hover .ab-member-social {
  transform: translateY(0);
}

.ab-member-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 14px;
  transition: var(--transition);
}

.ab-member-social a:hover {
  background: var(--primary-orange);
  color: var(--white);
}

.ab-member-body {
  text-align: center;
  padding: 18px 14px 22px;
}

.ab-member-body h3 {
  font-size: 17px;
  color: var(--secondary-dark);
  margin-bottom: 4px;
}

.ab-member-body span {
  font-size: 12.5px;
  color: var(--primary-orange);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .ab-hero-text h1 {
    font-size: 42px;
  }

  .ab-collage {
    height: 420px;
  }

  .ab-team {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .ab-hero-grid,
  .ab-story {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .ab-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .ab-stats-grid li:nth-child(2n) {
    border-right: none;
  }

  .ab-pillars,
  .ab-apart {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Timeline drops to a single left-hand spine */
  .ab-timeline::before {
    left: 42px;
  }

  .ab-timeline li {
    grid-template-columns: 84px 1fr;
    gap: 20px;
  }

  .ab-year {
    grid-column: 1;
    justify-self: start;
  }

  .ab-milestone,
  .ab-timeline li:nth-child(even) .ab-milestone {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .ab-hero {
    padding: 55px 0 70px;
  }

  .ab-hero-text h1 {
    font-size: 34px;
  }

  .ab-hero-text .script-text {
    font-size: 22px;
  }

  .ab-collage {
    height: 340px;
  }

  .ab-badge {
    width: 96px;
    height: 96px;
    bottom: 8px;
  }

  .ab-badge strong {
    font-size: 24px;
  }

  .ab-story-text h2 {
    font-size: 27px;
  }

  .ab-story-img {
    height: 320px;
  }

  .ab-story-img.small {
    width: 140px;
    height: 140px;
    right: -8px;
  }

  .ab-story-tag {
    left: 8px;
    bottom: 56px;
    font-size: 12px;
    padding: 11px 14px;
  }

  .ab-stats-grid strong {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .ab-pillars,
  .ab-apart,
  .ab-team {
    grid-template-columns: 1fr;
  }

  .ab-stats-grid {
    grid-template-columns: 1fr;
  }

  .ab-stats-grid li {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 20px;
  }

  .ab-stats-grid li:last-child {
    border-bottom: none;
  }

  .ab-hero-cta {
    gap: 16px;
  }

  .ab-timeline li {
    grid-template-columns: 64px 1fr;
    gap: 14px;
  }

  .ab-timeline::before {
    left: 32px;
  }

  .ab-year {
    width: 64px;
    height: 64px;
    font-size: 13px;
  }
}

/* ==========================================================================
   GALLERY — filter pills, masonry grid and lightbox
   gallery.html
   ========================================================================== */

.gal-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.gal-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 40px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
}

.gal-tab i {
  color: var(--c);
  font-size: 15px;
}

.gal-tab em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--bg-light);
  color: var(--text-muted);
  transition: var(--transition);
}

.gal-tab:hover {
  border-color: var(--c);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.gal-tab.active {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 10px 22px -8px var(--c);
}

.gal-tab.active i,
.gal-tab.active em {
  color: var(--white);
}

.gal-tab.active em {
  background: rgba(255, 255, 255, 0.25);
}

.gal-count {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 26px;
}

/* ==========================================================================
   Masonry grid
   Fixed row height with .wide / .tall cells spanning two tracks.
   ========================================================================== */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
}

.gal-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-light);
  animation: galIn 0.5s ease backwards;
}

.gal-item.wide { grid-column: span 2; }
.gal-item.tall { grid-row: span 2; }

/* A short stagger so a filter change reads as a redraw, not a flash */
.gal-item:nth-child(1)  { animation-delay: 0.02s; }
.gal-item:nth-child(2)  { animation-delay: 0.06s; }
.gal-item:nth-child(3)  { animation-delay: 0.10s; }
.gal-item:nth-child(4)  { animation-delay: 0.14s; }
.gal-item:nth-child(5)  { animation-delay: 0.18s; }
.gal-item:nth-child(6)  { animation-delay: 0.22s; }
.gal-item:nth-child(7)  { animation-delay: 0.26s; }
.gal-item:nth-child(8)  { animation-delay: 0.30s; }

@keyframes galIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gal-item { animation: none; }
}

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

.gal-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 18, 51, 0.9) 0%, rgba(0, 18, 51, 0.35) 45%, transparent 75%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gal-item:hover img {
  transform: scale(1.09);
}

.gal-item:hover::after {
  opacity: 1;
}

.gal-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px;
  color: var(--white);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.gal-item:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

.gal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 30px;
  margin-bottom: 9px;
}

.gal-item figcaption h3 {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.gal-item figcaption p {
  font-size: 12px;
  opacity: 0.85;
}

.gal-item figcaption p i {
  margin-right: 5px;
}

.gal-zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--secondary-dark);
  font-size: 13px;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, background 0.3s ease;
}

.gal-item:hover .gal-zoom {
  transform: scale(1);
  opacity: 1;
}

.gal-item .gal-zoom:hover,
.gal-item:hover .gal-zoom:hover {
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
}

/* ==========================================================================
   Load more and empty state
   ========================================================================== */
.gal-more-wrap {
  text-align: center;
  margin-top: 36px;
}

.gal-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 40px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-dark);
  padding: 13px 28px;
  cursor: pointer;
  transition: var(--transition);
}

.gal-more i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.gal-more:hover {
  background: var(--primary-orange);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 12px 24px -10px rgba(242, 101, 34, 0.8);
}

.gal-more:hover i {
  transform: translateY(3px);
}

.gal-more.hidden {
  display: none;
}

.gal-empty {
  display: none;
  text-align: center;
  padding: 70px 20px;
  background: var(--bg-light);
  border-radius: 14px;
}

.gal-empty.show {
  display: block;
}

.gal-empty i {
  font-size: 44px;
  color: var(--primary-orange);
  margin-bottom: 16px;
}

.gal-empty h3 {
  font-size: 21px;
  color: var(--secondary-dark);
  margin-bottom: 8px;
}

.gal-empty p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
body.gal-locked {
  overflow: hidden;
}

.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 70px 80px 120px;
  background: rgba(0, 8, 24, 0.94);
  backdrop-filter: blur(4px);
}

.gal-lightbox.open {
  display: flex;
  animation: galFade 0.3s ease;
}

@keyframes galFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gal-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gal-lb-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gal-lb-img.ready {
  opacity: 1;
  transform: none;
}

.gal-lb-close,
.gal-lb-nav {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.gal-lb-close {
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  font-size: 19px;
}

.gal-lb-nav {
  top: 50%;
  margin-top: -26px;
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.gal-lb-nav.prev { left: 22px; }
.gal-lb-nav.next { right: 22px; }

.gal-lb-close:hover,
.gal-lb-nav:hover {
  background: linear-gradient(135deg, var(--c, #f26522), var(--c2, #ffa45c));
  transform: scale(1.06);
}

.gal-lb-nav:hover {
  transform: scale(1.06);
}

.gal-lb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
  color: var(--white);
  background: linear-gradient(to top, rgba(0, 8, 24, 0.95), transparent);
}

.gal-lb-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--c, #f26522), var(--c2, #ffa45c));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 9px;
}

.gal-lb-title {
  font-size: 19px;
  margin-bottom: 3px;
}

.gal-lb-place {
  font-size: 13px;
  color: #cfd8e6;
}

.gal-lb-count {
  flex-shrink: 0;
  font-size: 13px;
  color: #cfd8e6;
  padding-bottom: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .gal-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }
}

@media (max-width: 991px) {
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gal-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .gal-tab {
    flex-shrink: 0;
  }

  /* Touch has no hover, so the caption stays visible */
  .gal-item figcaption {
    transform: none;
    opacity: 1;
  }

  .gal-item::after {
    opacity: 1;
  }

  .gal-zoom {
    display: none;
  }

  .gal-lightbox {
    padding: 60px 16px 110px;
  }

  .gal-lb-nav {
    width: 44px;
    height: 44px;
  }

  .gal-lb-nav.prev { left: 10px; }
  .gal-lb-nav.next { right: 10px; }
}

@media (max-width: 575px) {
  .gal-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .gal-item.wide { grid-column: span 1; }
  .gal-item.tall { grid-row: span 1; }

  .gal-lb-bar {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gal-lb-title {
    font-size: 16px;
  }
}

/* ==========================================================================
   VIDEO GALLERY — featured film, card grid and modal player
   video-gallery.html
   ========================================================================== */

.vid-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.vid-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 40px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
}

.vid-tab i {
  color: var(--c);
  font-size: 15px;
}

.vid-tab em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--bg-light);
  color: var(--text-muted);
  transition: var(--transition);
}

.vid-tab:hover {
  border-color: var(--c);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.vid-tab.active {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 10px 22px -8px var(--c);
}

.vid-tab.active i,
.vid-tab.active em {
  color: var(--white);
}

.vid-tab.active em {
  background: rgba(255, 255, 255, 0.25);
}

.vid-count {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 26px;
}

/* ==========================================================================
   Shared play button — the ring pulses while the poster is idle
   ========================================================================== */
.vid-play,
.vid-hero-play {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c), var(--c2));
  color: var(--white);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.vid-play::after,
.vid-hero-play::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.5;
  animation: vidPulse 2.4s ease-out infinite;
}

@keyframes vidPulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-play::after,
  .vid-hero-play::after { animation: none; }
}

/* ==========================================================================
   Featured film
   ========================================================================== */
.vid-hero {
  position: relative;
  height: 480px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-light);
  box-shadow: 0 24px 50px -26px rgba(0, 18, 51, 0.6);
}

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

.vid-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 18, 51, 0.94) 5%, rgba(0, 18, 51, 0.45) 45%, rgba(0, 18, 51, 0.15) 100%);
}

.vid-hero:hover img {
  transform: scale(1.05);
}

.vid-hero-play {
  top: 42%;
  left: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  font-size: 28px;
  box-shadow: 0 18px 34px -12px var(--c);
}

.vid-hero:hover .vid-hero-play {
  transform: scale(1.1);
}

.vid-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 34px 38px;
  color: var(--white);
  max-width: 720px;
}

.vid-hero-text h2 {
  font-size: 30px;
  line-height: 1.3;
  margin: 10px 0 8px;
}

.vid-hero-text p {
  font-size: 14px;
  line-height: 1.8;
  color: #dbe3ef;
}

.vid-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: #cfd8e6;
}

/* ==========================================================================
   Card grid
   ========================================================================== */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.vid-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.vid-card:hover {
  transform: translateY(-9px);
  border-color: transparent;
  box-shadow: 0 22px 42px -20px var(--c);
}

.vid-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg-light);
}

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

.vid-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 18, 51, 0.6), transparent 55%);
  transition: opacity 0.35s ease;
}

.vid-card:hover .vid-thumb img {
  transform: scale(1.1);
}

.vid-play {
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  font-size: 17px;
  box-shadow: 0 12px 24px -10px var(--c);
}

.vid-card:hover .vid-play {
  transform: scale(1.12);
}

.vid-time {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  background: rgba(0, 8, 24, 0.8);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
}

.vid-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 30px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* On the featured panel the tag sits in the text block, not over the image */
.vid-hero-text .vid-tag {
  position: static;
  box-shadow: none;
}

.vid-body {
  padding: 20px;
}

.vid-body h3 {
  font-size: 17px;
  line-height: 1.4;
  color: var(--secondary-dark);
  margin-bottom: 8px;
  transition: var(--transition);
}

.vid-card:hover .vid-body h3 {
  color: var(--c);
}

.vid-body p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ==========================================================================
   Load more and empty state
   ========================================================================== */
.vid-more-wrap {
  text-align: center;
  margin-top: 36px;
}

.vid-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 40px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-dark);
  padding: 13px 28px;
  cursor: pointer;
  transition: var(--transition);
}

.vid-more i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.vid-more:hover {
  background: var(--primary-orange);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 12px 24px -10px rgba(242, 101, 34, 0.8);
}

.vid-more:hover i {
  transform: translateY(3px);
}

.vid-more.hidden {
  display: none;
}

.vid-empty {
  display: none;
  text-align: center;
  padding: 70px 20px;
  background: var(--white);
  border-radius: 14px;
}

.vid-empty.show {
  display: block;
}

.vid-empty i {
  font-size: 44px;
  color: var(--primary-orange);
  margin-bottom: 16px;
}

.vid-empty h3 {
  font-size: 21px;
  color: var(--secondary-dark);
  margin-bottom: 8px;
}

.vid-empty p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   Modal player
   ========================================================================== */
.vid-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: rgba(0, 8, 24, 0.94);
  backdrop-filter: blur(4px);
}

.vid-modal.open {
  display: flex;
  animation: galFade 0.3s ease;
}

.vid-modal-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #06152e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  animation: vidRise 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vidRise {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.vid-modal-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000814;
}

.vid-modal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Shown in place of the player until a YouTube id is filled in */
.vid-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  color: var(--white);
}

.vid-soon i {
  font-size: 44px;
  color: var(--primary-orange);
  margin-bottom: 16px;
}

.vid-soon h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.vid-soon p {
  font-size: 14px;
  line-height: 1.8;
  color: #cfd8e6;
  max-width: 460px;
  margin-bottom: 20px;
}

.vid-modal-bar {
  padding: 20px 24px;
  color: var(--white);
}

.vid-modal-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--c, #f26522), var(--c2, #ffa45c));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 9px;
}

.vid-modal-title {
  font-size: 18px;
  line-height: 1.4;
}

.vid-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 8, 24, 0.65);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
}

.vid-modal-close:hover {
  background: linear-gradient(135deg, var(--c, #f26522), var(--c2, #ffa45c));
  transform: rotate(90deg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .vid-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vid-hero {
    height: 420px;
  }
}

@media (max-width: 991px) {
  .vid-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .vid-tab {
    flex-shrink: 0;
  }

  .vid-hero {
    height: 360px;
  }

  .vid-hero-text {
    padding: 26px 24px;
  }

  .vid-hero-text h2 {
    font-size: 23px;
  }

  .vid-hero-play {
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    font-size: 23px;
  }
}

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

  .vid-hero {
    height: 320px;
  }

  .vid-hero-text h2 {
    font-size: 19px;
  }

  .vid-hero-text p {
    display: none;
  }

  .vid-modal {
    padding: 14px;
  }

  .vid-modal-title {
    font-size: 15px;
  }
}

/* ========================================================================== */
/* SITE-WIDE FLUID LAYOUT — wide desktop canvas, comfortable responsive gutters */
/* ========================================================================== */
:root { --site-gutter: clamp(18px, 4vw, 72px); }

html { overflow-x: hidden; }
body { min-width: 320px; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }

/* A wider canvas lets the destination imagery and editorial layouts breathe. */
.container {
  width: calc(100% - (var(--site-gutter) * 2));
  max-width: 1560px;
}

.section-padding { padding: clamp(56px, 6vw, 96px) 0; }
.page-banner { padding: clamp(68px, 9vw, 132px) 0; }
.page-banner .container { max-width: 1560px; }

/* Shared cards remain balanced on the expanded desktop width. */
.grid-3 { gap: clamp(18px, 2vw, 30px); }
.grid-4 { gap: clamp(16px, 1.7vw, 26px); }
.grid-5 { gap: clamp(12px, 1.4vw, 22px); }

/* Avoid hidden horizontal overflow in slider, gallery and filter areas. */
.slider, .gallery-slider, .pkg-tabs, .gal-tabs, .vid-tabs, .blog-filters { max-width: 100%; }
.pkg-tabs, .gal-tabs, .vid-tabs, .blog-filters { scrollbar-width: thin; }

/* Preserve easy tap targets and prevent side-by-side controls from crowding. */
button, input, select, textarea { font: inherit; }
button, .btn-orange, .btn-outline, .btn-view-all, .btn-search { touch-action: manipulation; }

@media (max-width: 1199px) {
  :root { --site-gutter: clamp(18px, 3.5vw, 44px); }
  .container { max-width: 1320px; }
}

@media (max-width: 991px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-header-flex { gap: 18px; }
}

@media (max-width: 767px) {
  :root { --site-gutter: 18px; }
  .container { width: calc(100% - 36px); }
  .section-padding { padding: 54px 0; }
  .page-banner { padding: 66px 0; }
  .page-banner h1 { font-size: clamp(34px, 10vw, 48px); }
  .page-banner .lead { font-size: 14px; }
  .section-header-flex { align-items: flex-start; flex-direction: column; }
  .section-header-flex .btn-view-all { margin-top: -6px; }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-bar-content { align-items: flex-start; gap: 8px; flex-direction: column; }
  .contact-info span, .top-right span { margin-right: 0; }
  .contact-info span { display: block; padding-right: 0; border-right: 0; }
}

@media (max-width: 520px) {
  :root { --site-gutter: 14px; }
  .container { width: calc(100% - 28px); }
  .section-padding { padding: 46px 0; }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .section-title { margin-bottom: 27px; }
  .section-title h2 { font-size: clamp(25px, 7vw, 32px); }
  .slider-arrow.outside { width: 36px; height: 36px; }
  .back-to-top { right: 14px; bottom: 14px; }
}

/* Blog detail — an expansive editorial canvas instead of a narrow column. */
.blog-detail-page .article-page {
  padding: clamp(48px, 5vw, 84px) 0 clamp(72px, 7vw, 118px);
  background:
    radial-gradient(circle at 94% 12%, rgba(247, 174, 42, 0.14), transparent 22rem),
    radial-gradient(circle at 4% 57%, rgba(10, 147, 150, 0.11), transparent 26rem),
    linear-gradient(135deg, #fffdf9, #f5fbfa);
}

.blog-detail-page .article { max-width: 1500px; }

.blog-detail-page .article-breadcrumb {
  width: min(100%, 1420px);
  margin: 0 auto 30px;
  padding: 0 18px;
}






.blog-detail-page .article-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(34px, 5vw, 82px);
  max-width: 1360px;
  margin: clamp(45px, 6vw, 80px) auto 0;
  padding: 0 18px;
}

.blog-detail-page .article-body {
  max-width: 880px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(0, 95, 115, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(0, 58, 70, 0.08);
  font-size: 16px;
}

.blog-detail-page .article-intro { font-size: clamp(20px, 2.2vw, 25px); }
.blog-detail-page .article-body h2 { margin-top: 4px; font-size: clamp(24px, 2.4vw, 31px); }
.blog-detail-page .article-body section { margin-top: 42px; }

.blog-detail-page .article-sidebar { top: 105px; gap: 20px; }
.blog-detail-page .side-panel { padding: 22px; border-radius: 16px; }
.blog-detail-page .side-panel h3 { font-size: 17px; }
.blog-detail-page .side-recent a { grid-template-columns: 76px 1fr; font-size: 12px; }
.blog-detail-page .side-recent img { width: 76px; height: 57px; }

.blog-detail-page .article-related {
  max-width: 1360px;
  margin: clamp(62px, 8vw, 108px) auto 0;
  padding: 0 18px;
}

.blog-detail-page .article-related > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .blog-detail-page .article-related > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-detail-page .article-related > div { grid-template-columns: 1fr; } }

@media (max-width: 991px) {
  .blog-detail-page .article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .blog-detail-page .article-body { padding: 28px; }
}

@media (max-width: 800px) {
  .blog-detail-page .article-layout { display: block; margin-top: 38px; padding: 0; }
  .blog-detail-page .article-body { max-width: none; padding: 24px 20px; border-radius: 16px; }
  .blog-detail-page .article-sidebar { display: none; }
  .blog-detail-page .article-related { padding: 0; }
}

@media (max-width: 520px) {
  .blog-detail-page .article-body { font-size: 14px; }
}

/* Shared shell — every page uses the same polished header and footer as home. */
.top-bar {
  background: linear-gradient(100deg, #082f49, #005f73 52%, #0a9396);
  border-bottom: 0;
}

/* The top bar keeps one line at every width: the secondary email is dropped
   first, then the social icons, so email and phone never stack into a column. */
.top-bar-content { flex-wrap: wrap; gap: 5px 16px; }
.contact-info { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.contact-info span { white-space: nowrap; }

@media (max-width: 991px) {
  .top-bar { font-size: 12px; }
  .top-bar-content { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 12px; }
  /* min-width:0 lets the email ellipsis instead of forcing the page wider */
  .contact-info { flex: 1 1 auto; min-width: 0; }
  .contact-info span { display: block; min-width: 0; margin-right: 0; padding-right: 0; border-right: 0; overflow: hidden; text-overflow: ellipsis; }
  .contact-info .tb-email-alt { display: none; }
  .top-right { flex: 0 0 auto; }
  .top-right span { margin-right: 14px; }
  .top-bar .social-icons a { margin-left: 9px; font-size: 13px; }
}

@media (max-width: 600px) {
  .top-bar { padding: 7px 0; font-size: 11px; }
  .top-bar-content { gap: 8px; }
  .top-bar .social-icons { display: none; }
  .top-right span { margin-right: 0; }
  .contact-info i, .top-right i { margin-right: 4px; }
}

.main-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 48, 73, 0.09);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f05a28, #fbbf24);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: #e85d2a; }

.site-footer { background: linear-gradient(120deg, #002b3b, #003b4e 54%, #005f73); }
.site-footer .footer-col h4::after { background: #f7ae2a; }
.site-footer a:hover { color: #ffd166; }
.site-footer .footer-socials a:hover { background: #f7ae2a; color: #003b4e; }

.back-to-top {
  background: linear-gradient(135deg, #e85d2a, #f7ae2a);
  box-shadow: 0 8px 18px rgba(201, 76, 30, 0.32);
}

.back-to-top:hover { background: linear-gradient(135deg, #007f85, #0a9396); }

/* ========================================================================== */
/* DESTINATIONS — dynamic discovery and immersive destination detail pages */
/* ========================================================================== */
.destination-page { background: #fffdf9; }.dest-hero { position: relative; overflow: hidden; padding: clamp(86px,11vw,150px) 0; color:#fff; background: linear-gradient(118deg,#003b4e,#007f85 58%,#0a9396); }.dest-hero::before { content:''; position:absolute; width:510px; height:510px; right:8%; top:-290px; border:62px solid rgba(255,209,102,.14); border-radius:50%; }.dest-hero::after { content:'EXPLORE'; position:absolute; right:4%; bottom:-60px; color:rgba(255,255,255,.055); font-size:clamp(84px,15vw,230px); font-weight:800; letter-spacing:.06em; }.dest-hero .container { position:relative; z-index:1; max-width:1120px; text-align:center; }.dest-eyebrow { display:inline-flex; gap:8px; align-items:center; padding:7px 13px; border:1px solid rgba(255,255,255,.34); border-radius:30px; color:#ffe0a3; font-size:11px; font-weight:700; letter-spacing:.65px; text-transform:uppercase; }.dest-hero h1 { margin:16px 0 10px; font-size:clamp(46px,6.4vw,78px); line-height:1.04; letter-spacing:-2px; }.dest-hero h1 span { color:#ffd166; font-family:Georgia,serif; font-style:italic; font-weight:400; }.dest-hero .container>p:not(.dest-eyebrow) { max-width:650px; margin:auto; color:#d5efeb; font-size:16px; }.dest-hero-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 30px; margin-top:28px; color:#d7efec; font-size:12px; }.dest-hero-stats b { color:#ffd166; font-size:18px; margin-right:5px; }
.dest-discover { background:linear-gradient(135deg,#fff8ec,#f4fbfa 58%,#fff); }.dest-head { display:flex; gap:35px; align-items:end; justify-content:space-between; margin-bottom:24px; }.dest-head h2,.dest-overview h2,.dest-journey h2,.dest-related h2 { color:#003b4e; font-size:clamp(30px,3.6vw,44px); line-height:1.15; }.dest-head h2 span,.dest-overview h2 span,.dest-journey h2 span,.dest-related h2 span { color:#e85d2a; }.dest-head>div>p:last-child { max-width:650px; margin-top:8px; color:#668086; font-size:14px; }.dest-search { display:flex; align-items:center; width:min(100%,360px); padding:4px 8px 4px 14px; border:1px solid #d7e7e4; border-radius:12px; background:#fff; box-shadow:0 9px 18px rgba(0,65,77,.07); color:#e85d2a; }.dest-search input { width:100%; padding:9px; border:0; outline:0; background:transparent; color:#003b4e; font:inherit; font-size:12px; }.dest-filters { display:flex; flex-wrap:wrap; gap:9px; margin:25px 0 15px; }.dest-filters button { padding:9px 14px; border:1px solid #cee3df; border-radius:30px; background:#fff; color:#55777c; font:inherit; font-size:12px; font-weight:600; cursor:pointer; text-transform:capitalize; }.dest-filters button.active,.dest-filters button:hover { border-color:#007f85; background:#007f85; color:#fff; }.dest-count { margin-bottom:18px; color:#d55227; font-size:12px; font-weight:700; }.dest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }.dest-card { overflow:hidden; border:1px solid rgba(0,95,115,.1); border-radius:20px; background:#fff; box-shadow:0 12px 27px rgba(0,58,70,.09); transition:transform .35s,box-shadow .35s; }.dest-card:hover { transform:translateY(-9px); box-shadow:0 24px 38px rgba(0,58,70,.18); }.dest-card-image { position:relative; display:block; height:255px; overflow:hidden; }.dest-card-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(0,42,55,.52)); }.dest-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .8s; }.dest-card:hover .dest-card-image img { transform:scale(1.1); }.dest-card-type,.dest-card-rating { position:absolute; z-index:2; top:14px; padding:5px 9px; border-radius:20px; color:#fff; font-size:9px; font-weight:700; letter-spacing:.45px; text-transform:uppercase; }.dest-card-type { left:14px; background:var(--dest); }.dest-card-rating { right:14px; background:rgba(0,43,57,.75); }.dest-card-rating i { color:#ffd166; }.dest-card-body { padding:19px; }.dest-card-region { color:var(--dest); font-size:11px; font-weight:700; }.dest-card-region i { margin-right:4px; }.dest-card h3 { margin:5px 0 7px; color:#003b4e; font-size:22px; }.dest-card-body>p:not(.dest-card-region) { min-height:44px; color:#668086; font-size:12px; line-height:1.7; }.dest-card-body>div { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px dashed #d5e5e2; color:#718d91; font-size:11px; }.dest-card-body>div a { color:var(--dest); font-weight:700; }.dest-card-body>div a i { margin-left:4px; transition:transform .2s; }.dest-card:hover .dest-card-body>div a i { transform:translateX(4px); }.dest-empty { display:none; padding:70px 20px; text-align:center; border-radius:18px; background:#fff; }.dest-empty.show { display:block; }.dest-empty>i { color:#e85d2a; font-size:44px; }.dest-empty h3 { margin:9px 0 4px; color:#003b4e; }.dest-empty p { margin-bottom:18px; color:#668086; font-size:13px; }
.dest-detail-hero { position:relative; min-height:560px; display:flex; align-items:end; background-position:center; background-size:cover; color:#fff; }.dest-detail-copy { max-width:800px; padding:105px 0 76px; }.detail-crumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:26px; color:#d7efec; font-size:11px; }.detail-crumb a { color:#ffe0a3; }.detail-crumb i { font-size:8px; }.dest-detail-copy h1 { margin:14px 0 9px; font-size:clamp(48px,7vw,88px); line-height:1; letter-spacing:-2.5px; }.dest-detail-copy>p:not(.dest-eyebrow) { max-width:620px; color:#e1f1ef; font-size:17px; }.detail-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }.detail-pills span { padding:7px 11px; border:1px solid rgba(255,255,255,.28); border-radius:30px; background:rgba(0,29,40,.22); color:#fff; font-size:11px; }.detail-pills i { color:#ffd166; }.dest-detail-main { background:linear-gradient(135deg,#fffdf8,#f4fbfa); }.dest-overview { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:70px; align-items:center; max-width:1300px; margin:auto; }.dest-overview>div>p:last-child { max-width:750px; margin-top:13px; color:#55757b; font-size:16px; line-height:1.9; }.dest-overview aside { display:grid; gap:5px; padding:26px; border-radius:17px; background:#fff; box-shadow:0 12px 26px rgba(0,57,70,.1); }.dest-overview aside span { color:#80979a; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }.dest-overview aside strong { margin-bottom:12px; color:#003b4e; font-size:14px; }.dest-overview aside a { margin-top:3px; padding:10px 12px; border-radius:8px; background:linear-gradient(135deg,var(--dest),var(--dest2)); color:#fff; font-size:12px; font-weight:700; }.dest-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1300px; margin:60px auto; }.dest-highlights article { padding:25px; border:1px solid rgba(0,95,115,.1); border-radius:16px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); }.dest-highlights i { display:grid; width:46px; height:46px; place-items:center; border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--dest) 14%,white),color-mix(in srgb,var(--dest2) 18%,white)); color:var(--dest); font-size:20px; }.dest-highlights h3 { margin:14px 0 5px; color:#003b4e; font-size:17px; }.dest-highlights p { color:#668086; font-size:12px; line-height:1.7; }.dest-journey { display:grid; grid-template-columns:.85fr 1.15fr; gap:55px; align-items:center; max-width:1300px; margin:0 auto; padding:55px; border-radius:25px; background:linear-gradient(115deg,#003b4e,#007f85); color:#fff; }.dest-journey h2 { color:#fff; }.dest-journey h2 span { color:#ffd166; }.dest-journey>div>p:not(.section-kicker) { margin:12px 0 18px; color:#d7efec; font-size:14px; line-height:1.8; }.dest-journey ul { display:grid; gap:8px; margin-bottom:20px; color:#f4fffd; font-size:13px; }.dest-journey li i { margin-right:8px; color:#ffd166; }.dest-journey .btn-orange { background:#f7ae2a; color:#003b4e; }.dest-gallery { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:145px 145px; grid-auto-rows:145px; gap:10px; }.dest-gallery img { width:100%; height:100%; border-radius:12px; object-fit:cover; }.dest-gallery img:first-child { grid-row:span 2; }.dest-related { max-width:1300px; margin:80px auto 0; }.dest-related>div { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:22px; }.dest-missing { padding:140px 20px; text-align:center; }.dest-missing i { color:#e85d2a; font-size:48px; }.dest-missing h1 { color:#003b4e; }.dest-missing p { margin:8px 0 18px; color:#668086; }
@media(max-width:900px){.dest-grid{grid-template-columns:repeat(2,1fr)}.dest-overview{gap:30px}.dest-highlights{gap:14px}.dest-journey{grid-template-columns:1fr;gap:30px;padding:34px}.dest-related>div{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.dest-hero{padding:76px 0 92px}.dest-hero h1{letter-spacing:-1px}.dest-head{align-items:stretch;flex-direction:column}.dest-search{width:100%}.dest-grid,.dest-highlights,.dest-related>div{grid-template-columns:1fr}.dest-card-image{height:235px}.dest-detail-hero{min-height:470px}.dest-detail-copy{padding:75px 0 50px}.dest-overview{grid-template-columns:1fr}.dest-overview aside{padding:20px}.dest-highlights{margin:40px auto}.dest-journey{margin-right:-2px;margin-left:-2px;padding:27px 20px;border-radius:17px}.dest-gallery{grid-template-rows:125px 125px;grid-auto-rows:125px}.dest-related{margin-top:55px}}

/* -------------------------------------------------------------------------- */
/* Destination detail — hero actions, quick facts, itinerary, essentials,      */
/* nearby places, FAQs, map and the enquiry band                              */
/* -------------------------------------------------------------------------- */
.dest-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.dest-hero-actions .btn-orange { background:linear-gradient(135deg,var(--dest),var(--dest2)); }
.dest-hero-wa { display:inline-flex; gap:8px; align-items:center; padding:12px 20px; border:1px solid rgba(255,255,255,.4); border-radius:30px; background:rgba(0,29,40,.24); color:#fff; font-size:13px; font-weight:600; transition:background .25s,border-color .25s; }
.dest-hero-wa:hover { border-color:#25d366; background:#25d366; color:#fff; }
.dest-hero-wa i { color:#25d366; font-size:16px; }
.dest-hero-wa:hover i { color:#fff; }

.dest-facts { position:relative; z-index:2; margin-top:-52px; }
.dest-facts>.container>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border-radius:18px; background:#e4efed; box-shadow:0 16px 34px rgba(0,58,70,.13); }
.dest-facts article { display:flex; gap:13px; align-items:center; padding:22px 20px; background:#fff; }
.dest-facts i { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--dest,#007f85) 14%,white),color-mix(in srgb,var(--dest2,#43aa8b) 20%,white)); color:var(--dest,#007f85); font-size:17px; }
.dest-facts span { display:block; color:#87a0a3; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.dest-facts strong { display:block; margin-top:3px; color:#003b4e; font-size:13.5px; }

.dest-block { max-width:1300px; margin:80px auto 0; }
.dest-block-head { max-width:740px; margin:0 auto 34px; text-align:center; }
.dest-block-head .section-kicker { justify-content:center; }
.dest-block-head h2 { color:#003b4e; font-size:clamp(28px,3.4vw,42px); line-height:1.15; }
.dest-block-head h2 span { color:var(--dest,#e85d2a); }
.dest-block-head p { margin-top:10px; color:#668086; font-size:14px; line-height:1.8; }
.dest-block-more { margin-top:26px; text-align:center; }
.dest-block-more a { display:inline-flex; gap:8px; align-items:center; color:var(--dest,#e85d2a); font-size:13px; font-weight:700; }
.dest-block-more a:hover i { transform:translateX(4px); }
.dest-block-more i { transition:transform .2s; }

/* Day by day itinerary */
.dest-days { display:grid; gap:14px; max-width:900px; margin:auto; }
.dest-days li { position:relative; display:flex; gap:20px; padding:22px 24px; border:1px solid rgba(0,95,115,.11); border-radius:16px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); }
.dest-days li::after { content:''; position:absolute; top:24px; left:0; width:3px; height:34px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--dest,#007f85),var(--dest2,#43aa8b)); }
.dest-day-no { display:grid; min-width:74px; height:34px; flex:0 0 74px; place-items:center; border-radius:30px; background:linear-gradient(135deg,var(--dest,#007f85),var(--dest2,#43aa8b)); color:#fff; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.dest-days h3 { color:#003b4e; font-size:17px; }
.dest-days p { margin-top:6px; color:#668086; font-size:13px; line-height:1.8; }

/* Travel essentials */
.dest-essentials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.dest-essentials article { padding:26px; border:1px solid rgba(0,95,115,.11); border-radius:16px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); }
.dest-essentials i { display:grid; width:44px; height:44px; place-items:center; border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--dest,#007f85) 14%,white),color-mix(in srgb,var(--dest2,#43aa8b) 20%,white)); color:var(--dest,#007f85); font-size:18px; }
.dest-essentials h3 { margin:14px 0 6px; color:#003b4e; font-size:17px; }
.dest-essentials p { color:#668086; font-size:13px; line-height:1.8; }

/* Nearby places */
.dest-nearby { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.dest-nearby article { padding:22px; border:1px solid rgba(0,95,115,.11); border-left:3px solid var(--dest,#007f85); border-radius:6px 16px 16px 6px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); transition:transform .3s,box-shadow .3s; }
.dest-nearby article:hover { transform:translateY(-6px); box-shadow:0 20px 32px rgba(0,58,70,.14); }
.dest-nearby h3 { color:#003b4e; font-size:16px; }
.dest-nearby span { display:block; margin:6px 0 9px; color:var(--dest,#007f85); font-size:11px; font-weight:700; }
.dest-nearby span i { margin-right:5px; }
.dest-nearby p { color:#668086; font-size:12.5px; line-height:1.75; }

/* FAQs */
.dest-faqs { display:grid; gap:12px; max-width:900px; margin:auto; }
.dest-faq { overflow:hidden; border:1px solid rgba(0,95,115,.12); border-radius:14px; background:#fff; box-shadow:0 8px 18px rgba(0,58,70,.05); }
.dest-faq-head { display:flex; gap:16px; align-items:center; justify-content:space-between; width:100%; padding:19px 22px; border:0; background:transparent; color:#003b4e; font:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; }
.dest-faq-head i { display:grid; width:26px; height:26px; flex:0 0 26px; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--dest,#007f85) 12%,white); color:var(--dest,#007f85); font-size:11px; transition:transform .3s; }
.dest-faq.open .dest-faq-head { color:var(--dest,#007f85); }
.dest-faq.open .dest-faq-head i { background:var(--dest,#007f85); color:#fff; transform:rotate(45deg); }
.dest-faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.dest-faq.open .dest-faq-body { grid-template-rows:1fr; }
.dest-faq-body>div { overflow:hidden; }
.dest-faq-body p { padding:0 22px 20px; color:#668086; font-size:13px; line-height:1.85; }

/* Map */
.dest-map { overflow:hidden; border:1px solid rgba(0,95,115,.12); border-radius:20px; box-shadow:0 14px 30px rgba(0,58,70,.1); line-height:0; }
.dest-map iframe { width:100%; height:420px; border:0; }

/* Enquiry band */
.dest-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; max-width:1300px; margin:80px auto 0; padding:46px 50px; border-radius:25px; background:linear-gradient(115deg,#003b4e,#007f85); color:#fff; }
.dest-cta .section-kicker { color:#ffd166; }
.dest-cta h2 { margin:12px 0 10px; color:#fff; font-size:clamp(26px,3vw,36px); line-height:1.2; }
.dest-cta>div>p:not(.section-kicker) { max-width:620px; color:#d7efec; font-size:14px; line-height:1.8; }
.dest-cta-actions { display:flex; flex-wrap:wrap; gap:12px; }
.dest-cta-actions .btn-orange { background:#f7ae2a; color:#003b4e; }
.dest-cta-call,.dest-cta-wa { display:inline-flex; gap:8px; align-items:center; padding:12px 20px; border:1px solid rgba(255,255,255,.36); border-radius:30px; color:#fff; font-size:13px; font-weight:600; transition:background .25s,border-color .25s; }
.dest-cta-call i { color:#ffd166; }
.dest-cta-wa i { color:#25d366; font-size:16px; }
.dest-cta-call:hover { border-color:#ffd166; background:rgba(255,209,102,.16); }
.dest-cta-wa:hover { border-color:#25d366; background:#25d366; }
.dest-cta-wa:hover i { color:#fff; }

/* The kicker pill is defined for the home page only, so the destination
   pages carry their own copy — light on cream, gold on the dark panels */
.destination-page .section-kicker { display:inline-flex; gap:8px; align-items:center; margin-bottom:7px; padding:6px 13px; border-radius:30px; background:#fff3df; color:#d85526; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.destination-page .section-kicker i { color:#0a9396; }
.destination-page .dest-journey .section-kicker,.destination-page .dest-cta .section-kicker { background:rgba(255,255,255,.14); color:#ffd166; }
.destination-page .dest-journey .section-kicker i,.destination-page .dest-cta .section-kicker i { color:#ffd166; }

@media(max-width:1100px){
  .dest-facts>.container>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest-nearby{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .dest-block{margin-top:56px}
  .dest-cta{grid-template-columns:1fr;gap:26px;padding:34px}
  .dest-essentials{grid-template-columns:1fr}
  .dest-map iframe{height:340px}
}
@media(max-width:620px){
  .dest-facts{margin-top:-34px}
  .dest-facts>.container>div{grid-template-columns:1fr}
  .dest-facts article{padding:16px 18px}
  .dest-nearby{grid-template-columns:1fr}
  .dest-days li{gap:14px;padding:18px}
  .dest-days li::after{display:none}
  .dest-day-no{min-width:62px;flex:0 0 62px;font-size:10px}
  .dest-hero-actions .btn-orange,.dest-hero-wa{flex:1 1 auto;justify-content:center}
  .dest-cta{margin-right:-2px;margin-left:-2px;padding:28px 20px;border-radius:17px}
  .dest-cta-actions{width:100%}
  .dest-cta-actions>*{flex:1 1 100%;justify-content:center;text-align:center}
  .dest-map iframe{height:280px}
}

/* ========================================================================== */
/* FAQ PAGE — search, category pills and the accordion                        */
/* ========================================================================== */
.faq-page .section-kicker,.testimonials-page .section-kicker { display:inline-flex; gap:8px; align-items:center; margin-bottom:7px; padding:6px 13px; border-radius:30px; background:#fff3df; color:#d85526; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.faq-page .section-kicker i,.testimonials-page .section-kicker i { color:#0a9396; }

.faq-search { display:flex; align-items:center; width:min(100%,560px); margin:0 auto 26px; padding:5px 10px 5px 18px; border:1px solid #d7e7e4; border-radius:14px; background:#fff; box-shadow:0 10px 22px rgba(0,65,77,.08); color:#e85d2a; }
.faq-search input { width:100%; padding:12px 10px; border:0; outline:0; background:transparent; color:#003b4e; font:inherit; font-size:13px; }
.faq-tabs,.tm-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:18px; }
.faq-tab,.tm-tab { display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border:1px solid #cee3df; border-radius:30px; background:#fff; color:#55777c; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background .25s,border-color .25s,color .25s; }
.faq-tab i,.tm-tab i { color:#0a9396; font-size:12px; transition:color .25s; }
.faq-tab em,.tm-tab em { padding:1px 7px; border-radius:20px; background:#f1f7f6; color:#7d9498; font-size:10px; font-style:normal; font-weight:700; transition:background .25s,color .25s; }
.faq-tab:hover,.tm-tab:hover { border-color:#007f85; color:#003b4e; }
.faq-tab.active,.tm-tab.active { border-color:#007f85; background:#007f85; color:#fff; }
.faq-tab.active i,.tm-tab.active i,.faq-tab.active em,.tm-tab.active em { color:#fff; }
.faq-tab.active em,.tm-tab.active em { background:rgba(255,255,255,.2); }
.faq-count,.tm-count { margin-bottom:20px; color:#d55227; font-size:12px; font-weight:700; text-align:center; }

.faq-list { display:grid; gap:12px; max-width:900px; margin:auto; }
.faq-item { overflow:hidden; border:1px solid rgba(0,95,115,.12); border-radius:14px; background:#fff; box-shadow:0 8px 18px rgba(0,58,70,.05); transition:box-shadow .3s; }
.faq-item.open { box-shadow:0 14px 28px rgba(0,58,70,.12); }
.faq-head { display:flex; gap:16px; align-items:center; justify-content:space-between; width:100%; padding:19px 22px; border:0; background:transparent; color:#003b4e; font:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; }
.faq-head i { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:50%; background:#f1f7f6; color:#007f85; font-size:11px; transition:transform .3s,background .3s,color .3s; }
.faq-item.open .faq-head { color:#e85d2a; }
.faq-item.open .faq-head i { background:#e85d2a; color:#fff; transform:rotate(45deg); }
.faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.faq-item.open .faq-body { grid-template-rows:1fr; }
.faq-body>div { overflow:hidden; }
.faq-body p { padding:0 22px 20px; color:#668086; font-size:13px; line-height:1.85; }

.faq-empty,.tm-empty { display:none; max-width:900px; margin:auto; padding:70px 20px; border-radius:18px; background:#fff; text-align:center; }
.faq-empty.show,.tm-empty.show { display:block; }
.faq-empty>i,.tm-empty>i { color:#e85d2a; font-size:44px; }
.faq-empty h3,.tm-empty h3 { margin:10px 0 4px; color:#003b4e; }
.faq-empty p,.tm-empty p { margin-bottom:18px; color:#668086; font-size:13px; }

.faq-help,.tm-share { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; padding:44px 48px; border-radius:25px; background:linear-gradient(115deg,#003b4e,#007f85); color:#fff; }
.faq-help .section-kicker,.tm-share .section-kicker { background:rgba(255,255,255,.14); color:#ffd166; }
.faq-help .section-kicker i,.tm-share .section-kicker i { color:#ffd166; }
.faq-help h2,.tm-share h2 { margin:12px 0 10px; color:#fff; font-size:clamp(25px,3vw,35px); line-height:1.2; }
.faq-help h2 span,.tm-share h2 span { color:#ffd166; font-family:Georgia,serif; font-style:italic; font-weight:400; }
.faq-help>div>p:not(.section-kicker),.tm-share>div>p:not(.section-kicker) { max-width:620px; color:#d7efec; font-size:14px; line-height:1.8; }
.faq-help-actions,.tm-share-actions { display:flex; flex-wrap:wrap; gap:12px; }
.faq-help-actions .btn-orange,.tm-share-actions .btn-orange { background:#f7ae2a; color:#003b4e; }
.faq-help-call,.faq-help-wa,.tm-share-wa { display:inline-flex; gap:8px; align-items:center; padding:12px 20px; border:1px solid rgba(255,255,255,.36); border-radius:30px; color:#fff; font-size:13px; font-weight:600; transition:background .25s,border-color .25s; }
.faq-help-call i { color:#ffd166; }
.faq-help-wa i,.tm-share-wa i { color:#25d366; font-size:16px; }
.faq-help-call:hover { border-color:#ffd166; background:rgba(255,209,102,.16); }
.faq-help-wa:hover,.tm-share-wa:hover { border-color:#25d366; background:#25d366; }
.faq-help-wa:hover i,.tm-share-wa:hover i { color:#fff; }

/* ========================================================================== */
/* TESTIMONIALS PAGE — rating summary and review cards                        */
/* ========================================================================== */
.tm-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; margin-bottom:50px; border-radius:18px; background:#e4efed; box-shadow:0 14px 30px rgba(0,58,70,.1); }
.tm-stats article { padding:26px 20px; background:#fff; text-align:center; }
.tm-stats i { color:#f7ae2a; font-size:22px; }
.tm-stats strong { display:block; margin:8px 0 3px; color:#003b4e; font-size:26px; line-height:1; }
.tm-stats span { color:#87a0a3; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

.tm-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.tm-card { position:relative; display:flex; flex-direction:column; padding:30px 26px 24px; border:1px solid rgba(0,95,115,.1); border-radius:20px; background:#fff; box-shadow:0 12px 27px rgba(0,58,70,.08); transition:transform .35s,box-shadow .35s; }
.tm-card:hover { transform:translateY(-8px); box-shadow:0 24px 38px rgba(0,58,70,.16); }
.tm-quote { position:absolute; top:-16px; left:26px; display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:linear-gradient(135deg,#e85d2a,#f7ae2a); color:#fff; font-size:16px; box-shadow:0 8px 16px rgba(232,93,42,.3); }
.tm-stars { margin:6px 0 12px; color:#f7ae2a; font-size:13px; letter-spacing:2px; }
.tm-text { flex:1; color:#5b7780; font-size:13.5px; line-height:1.9; }
.tm-person { display:flex; gap:12px; align-items:center; margin-top:20px; padding-top:18px; border-top:1px dashed #d5e5e2; }
.tm-avatar { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#003b4e,#007f85); color:#fff; font-size:14px; font-weight:700; letter-spacing:.5px; }
.tm-person strong { display:block; color:#003b4e; font-size:14px; }
.tm-person span { color:#87a0a3; font-size:11px; }
.tm-person span i { margin-right:4px; color:#e85d2a; }
.tm-trip { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:space-between; margin-top:14px; color:#7d9498; font-size:11px; }
.tm-trip i { margin-right:5px; color:#007f85; }

@media(max-width:991px){
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .faq-help,.tm-share{grid-template-columns:1fr;gap:26px;padding:34px}
}
@media(max-width:620px){
  .tm-grid{grid-template-columns:1fr}
  .tm-stats{grid-template-columns:1fr;margin-bottom:36px}
  .faq-head{padding:16px 18px;font-size:13.5px}
  .faq-body p{padding:0 18px 18px}
  .faq-tabs,.tm-tabs{gap:8px}
  .faq-tab,.tm-tab{padding:9px 13px;font-size:11px}
  .faq-help,.tm-share{padding:28px 20px;border-radius:17px}
  .faq-help-actions,.tm-share-actions{width:100%}
  .faq-help-actions>*,.tm-share-actions>*{flex:1 1 100%;justify-content:center;text-align:center}
}

/* ========================================================================== */
/* CAB SERVICES PAGE — hero, fleet, routes, booking form and FAQs             */
/* ========================================================================== */
.cab-page .section-kicker { display:inline-flex; gap:8px; align-items:center; margin-bottom:7px; padding:6px 13px; border-radius:30px; background:#fff3df; color:#d85526; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.cab-page .section-kicker i { color:#0a9396; }

/* Hero */
.cab-hero { position:relative; overflow:hidden; padding:clamp(60px,7vw,96px) 0; background:linear-gradient(118deg,#003b4e,#00707d 58%,#0a9396); color:#fff; }
.cab-hero::before { content:''; position:absolute; top:-280px; right:6%; width:500px; height:500px; border:60px solid rgba(255,209,102,.12); border-radius:50%; }
.cab-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:50px; align-items:center; }
.cab-page .cab-hero .section-kicker { background:rgba(255,255,255,.14); color:#ffd166; }
.cab-page .cab-hero .section-kicker i { color:#ffd166; }
.cab-hero h1 { margin:14px 0 12px; font-size:clamp(32px,4.4vw,54px); line-height:1.12; letter-spacing:-1px; }
.cab-hero h1 span { color:#ffd166; font-family:Georgia,serif; font-style:italic; font-weight:400; }
.cab-hero .lead { max-width:600px; color:#d7efec; font-size:15px; line-height:1.85; }
.cab-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 24px; }
.cab-hero-actions .btn-orange { background:#f7ae2a; color:#003b4e; }
.cab-hero-call { display:inline-flex; gap:8px; align-items:center; padding:12px 20px; border:1px solid rgba(255,255,255,.36); border-radius:30px; color:#fff; font-size:13px; font-weight:600; transition:background .25s,border-color .25s; }
.cab-hero-call i { color:#ffd166; }
.cab-hero-call:hover { border-color:#ffd166; background:rgba(255,209,102,.16); }
.cab-hero-points { display:flex; flex-wrap:wrap; gap:10px 26px; color:#d7efec; font-size:12.5px; }
.cab-hero-points i { margin-right:7px; color:#ffd166; }
.cab-hero-media img { width:100%; border-radius:20px; filter:drop-shadow(0 24px 34px rgba(0,25,33,.4)); }

/* Service types */
.cab-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.cab-services article { padding:28px 26px; border:1px solid rgba(0,95,115,.11); border-radius:18px; background:#fff; box-shadow:0 10px 22px rgba(0,58,70,.07); transition:transform .3s,box-shadow .3s; }
.cab-services article:hover { transform:translateY(-7px); box-shadow:0 22px 34px rgba(0,58,70,.15); }
.cab-services i { display:grid; width:48px; height:48px; place-items:center; border-radius:14px; background:linear-gradient(135deg,#e6f4f3,#fff3df); color:#007f85; font-size:19px; }
.cab-services h3 { margin:15px 0 7px; color:#003b4e; font-size:18px; }
.cab-services p { color:#668086; font-size:13px; line-height:1.8; }

/* Fleet */
.cab-fleet-section { background:linear-gradient(135deg,#fff8ec,#f4fbfa 58%,#fff); }
.cab-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:16px; }
.cab-tab { display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border:1px solid #cee3df; border-radius:30px; background:#fff; color:#55777c; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background .25s,border-color .25s,color .25s; }
.cab-tab i { color:#0a9396; transition:color .25s; }
.cab-tab em { padding:1px 7px; border-radius:20px; background:#f1f7f6; color:#7d9498; font-size:10px; font-style:normal; font-weight:700; transition:background .25s,color .25s; }
.cab-tab:hover { border-color:#007f85; color:#003b4e; }
.cab-tab.active { border-color:#007f85; background:#007f85; color:#fff; }
.cab-tab.active i,.cab-tab.active em { color:#fff; }
.cab-tab.active em { background:rgba(255,255,255,.2); }
.cab-count { margin-bottom:22px; color:#d55227; font-size:12px; font-weight:700; text-align:center; }

.cab-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.cab-card { display:flex; overflow:hidden; flex-direction:column; border:1px solid rgba(0,95,115,.1); border-radius:20px; background:#fff; box-shadow:0 12px 27px rgba(0,58,70,.09); transition:transform .35s,box-shadow .35s; }
.cab-card:hover { transform:translateY(-8px); box-shadow:0 24px 38px rgba(0,58,70,.17); }
.cab-card-media { position:relative; overflow:hidden; height:190px; background:linear-gradient(135deg,#eef7f6,#fff6e8); }
.cab-card-media img { width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .6s; }
.cab-card:hover .cab-card-media img { transform:scale(1.07); }
.cab-ribbon { position:absolute; top:14px; left:0; padding:5px 12px; border-radius:0 20px 20px 0; background:linear-gradient(135deg,#e85d2a,#f7ae2a); color:#fff; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.cab-type { position:absolute; right:14px; bottom:12px; padding:4px 11px; border-radius:20px; background:rgba(0,43,57,.8); color:#fff; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.cab-card-body { display:flex; flex:1; flex-direction:column; padding:22px; }
.cab-card-body h3 { color:#003b4e; font-size:20px; }
.cab-specs { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0; }
.cab-specs li { padding:5px 10px; border-radius:8px; background:#f2f8f7; color:#55777c; font-size:11px; font-weight:600; }
.cab-specs i { margin-right:5px; color:#007f85; }
.cab-features { display:grid; gap:6px; margin-bottom:12px; color:#668086; font-size:12.5px; line-height:1.6; }
.cab-features i { margin-right:7px; color:#43aa8b; font-size:11px; }
.cab-best { flex:1; margin-bottom:16px; color:#7d9498; font-size:12px; line-height:1.7; }
.cab-best i { margin-right:6px; color:#f7ae2a; }
.cab-card-foot { display:flex; align-items:center; justify-content:space-between; padding-top:15px; border-top:1px dashed #d5e5e2; }
.cab-rate small { display:block; color:#87a0a3; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.cab-rate strong { color:#e85d2a; font-size:24px; line-height:1.1; }
.cab-book { display:inline-flex; gap:7px; align-items:center; padding:11px 18px; border-radius:30px; background:linear-gradient(135deg,#007f85,#0a9396); color:#fff; font-size:12px; font-weight:700; transition:transform .25s,box-shadow .25s; }
.cab-book:hover { transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,127,133,.32); }

.cab-empty { display:none; padding:70px 20px; border-radius:18px; background:#fff; text-align:center; }
.cab-empty.show { display:block; }
.cab-empty>i { color:#e85d2a; font-size:44px; }
.cab-empty h3 { margin:10px 0 4px; color:#003b4e; }
.cab-empty p { color:#668086; font-size:13px; }

/* Routes */
.cab-routes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cab-routes article { display:flex; gap:16px; align-items:center; padding:20px 22px; border:1px solid rgba(0,95,115,.11); border-radius:16px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); transition:border-color .3s,box-shadow .3s; }
.cab-routes article:hover { border-color:#007f85; box-shadow:0 18px 30px rgba(0,58,70,.13); }
.cab-routes>article>i { display:grid; width:46px; height:46px; flex:0 0 46px; place-items:center; border-radius:13px; background:linear-gradient(135deg,#e6f4f3,#fff3df); color:#007f85; font-size:18px; }
.cab-routes article>div { flex:1; }
.cab-routes h3 { color:#003b4e; font-size:15.5px; }
.cab-routes p { margin:3px 0 6px; color:#7d9498; font-size:12px; }
.cab-routes span { display:flex; flex-wrap:wrap; gap:14px; color:#55777c; font-size:11px; font-weight:600; }
.cab-routes span i { margin-right:5px; color:#e85d2a; }
.cab-routes article>a { display:inline-flex; gap:6px; align-items:center; flex:0 0 auto; color:#e85d2a; font-size:12px; font-weight:700; }
.cab-routes article>a i { transition:transform .2s; }
.cab-routes article:hover>a i { transform:translateX(4px); }

/* How it works */
.cab-steps-section { background:linear-gradient(135deg,#f4fbfa,#fff8ec); }
.cab-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.cab-steps li { position:relative; padding:28px 24px; border:1px solid rgba(0,95,115,.11); border-radius:18px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); }
.cab-steps li>span { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#003b4e,#007f85); color:#fff; font-size:17px; font-weight:700; }
.cab-steps h3 { margin:15px 0 7px; color:#003b4e; font-size:16px; }
.cab-steps p { color:#668086; font-size:12.5px; line-height:1.75; }

/* Inclusions */
.cab-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.cab-terms-col { padding:32px; border:1px solid rgba(0,95,115,.11); border-radius:20px; background:#fff; box-shadow:0 10px 24px rgba(0,58,70,.07); }
.cab-terms-col h3 { display:flex; gap:10px; align-items:center; margin-bottom:18px; color:#003b4e; font-size:19px; }
.cab-terms-col.included h3 i { color:#43aa8b; }
.cab-terms-col.excluded h3 i { color:#e85d2a; }
.cab-terms-col ul { display:grid; gap:11px; }
.cab-terms-col li { display:flex; gap:11px; color:#668086; font-size:13px; line-height:1.7; }
.cab-terms-col.included i { color:#43aa8b; }
.cab-terms-col.excluded i { color:#e85d2a; }

/* Booking */
.cab-booking-section { background:linear-gradient(135deg,#fff8ec,#f4fbfa); }
.cab-booking { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:44px; align-items:start; padding:44px; border-radius:25px; background:#fff; box-shadow:0 18px 40px rgba(0,58,70,.12); }
.cab-booking-intro h2 { margin:12px 0 10px; color:#003b4e; font-size:clamp(24px,2.8vw,32px); line-height:1.2; }
.cab-booking-intro>p:not(.section-kicker) { color:#668086; font-size:14px; line-height:1.85; }
.cab-booking-contact { display:grid; gap:13px; margin-top:24px; }
.cab-booking-contact li { display:flex; gap:12px; align-items:center; color:#55757b; font-size:13px; }
.cab-booking-contact i { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border-radius:10px; background:#f2f8f7; color:#007f85; }
.cab-booking-contact a { color:#003b4e; font-weight:600; }
.cab-booking-contact a:hover { color:#e85d2a; }

.cab-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cab-field { display:grid; gap:6px; }
.cab-field.wide { grid-column:1 / -1; }
.cab-field label { color:#55777c; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.cab-field input,.cab-field select { width:100%; padding:12px 14px; border:1px solid #d7e7e4; border-radius:10px; background:#fbfdfd; color:#003b4e; font:inherit; font-size:13px; transition:border-color .25s,box-shadow .25s; }
.cab-field input:focus,.cab-field select:focus { border-color:#007f85; outline:0; box-shadow:0 0 0 3px rgba(0,127,133,.12); }
.cab-submit { grid-column:1 / -1; justify-content:center; }
.cab-ok { display:none; padding:40px 30px; border:1px dashed #b9dcd7; border-radius:18px; background:#f4fbfa; text-align:center; }
.cab-ok.show { display:block; }
.cab-ok>i { color:#43aa8b; font-size:44px; }
.cab-ok h3 { margin:12px 0 6px; color:#003b4e; font-size:20px; }
.cab-ok p { margin-bottom:20px; color:#668086; font-size:13px; line-height:1.8; }

/* FAQs */
.cab-faqs { display:grid; gap:12px; max-width:900px; margin:auto; }
.cab-faq { overflow:hidden; border:1px solid rgba(0,95,115,.12); border-radius:14px; background:#fff; box-shadow:0 8px 18px rgba(0,58,70,.05); }
.cab-faq-head { display:flex; gap:16px; align-items:center; justify-content:space-between; width:100%; padding:19px 22px; border:0; background:transparent; color:#003b4e; font:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; }
.cab-faq-head i { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:50%; background:#f1f7f6; color:#007f85; font-size:11px; transition:transform .3s,background .3s,color .3s; }
.cab-faq.open .cab-faq-head { color:#e85d2a; }
.cab-faq.open .cab-faq-head i { background:#e85d2a; color:#fff; transform:rotate(45deg); }
.cab-faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.cab-faq.open .cab-faq-body { grid-template-rows:1fr; }
.cab-faq-body>div { overflow:hidden; }
.cab-faq-body p { padding:0 22px 20px; color:#668086; font-size:13px; line-height:1.85; }
.cab-faq-more { margin-top:26px; text-align:center; }
.cab-faq-more a { display:inline-flex; gap:8px; align-items:center; color:#e85d2a; font-size:13px; font-weight:700; }
.cab-faq-more a i { transition:transform .2s; }
.cab-faq-more a:hover i { transform:translateX(4px); }

@media(max-width:991px){
  .cab-hero-inner{grid-template-columns:1fr;gap:34px}
  .cab-hero-media{order:-1;max-width:460px}
  .cab-services,.cab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cab-booking{grid-template-columns:1fr;gap:30px;padding:34px}
}
@media(max-width:620px){
  .cab-hero{padding:48px 0 56px}
  .cab-hero-actions{width:100%}
  .cab-hero-actions>*{flex:1 1 100%;justify-content:center;text-align:center}
  .cab-services,.cab-grid,.cab-routes,.cab-steps,.cab-terms{grid-template-columns:1fr}
  .cab-form{grid-template-columns:1fr}
  .cab-booking{padding:24px 20px;border-radius:17px}
  .cab-terms-col{padding:24px}
  .cab-routes article{flex-wrap:wrap;gap:12px}
  .cab-routes article>a{width:100%;justify-content:flex-end}
  .cab-tabs{gap:8px}
  .cab-tab{padding:9px 13px;font-size:11px}
  .cab-faq-head{padding:16px 18px;font-size:13.5px}
  .cab-faq-body p{padding:0 18px 18px}
}

/* ========================================================================== */
/* FLOATING WHATSAPP & CALL BUTTONS — injected on every page                  */
/* ========================================================================== */
.float-dock { position:fixed; bottom:22px; left:22px; z-index:901; display:grid; gap:12px; }
.float-btn { position:relative; display:grid; width:52px; height:52px; place-items:center; border-radius:50%; color:#fff; font-size:22px; box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .25s,box-shadow .25s,width .3s; }
.float-btn.wa { background:linear-gradient(135deg,#25d366,#128c7e); }
.float-btn.call { background:linear-gradient(135deg,#e85d2a,#f7ae2a); font-size:19px; }
.float-btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 14px 26px rgba(0,0,0,.32); color:#fff; }
.float-btn span { position:absolute; left:64px; padding:8px 14px; border-radius:8px; background:#003b4e; color:#fff; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; visibility:hidden; transform:translateX(-8px); transition:opacity .25s,transform .25s,visibility .25s; pointer-events:none; }
.float-btn span::before { content:''; position:absolute; top:50%; left:-5px; width:10px; height:10px; background:#003b4e; transform:translateY(-50%) rotate(45deg); }
.float-btn:hover span { opacity:1; visibility:visible; transform:translateX(0); }
/* The WhatsApp button gently pulses so it reads as a live channel */
.float-btn.wa::after { content:''; position:absolute; inset:0; border-radius:50%; background:#25d366; opacity:.55; animation:floatPulse 2.4s ease-out infinite; z-index:-1; }
@keyframes floatPulse { 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.55);opacity:0} 100%{transform:scale(1.55);opacity:0} }
@media (prefers-reduced-motion:reduce){ .float-btn.wa::after{animation:none} }
@media(max-width:620px){
  .float-dock{bottom:16px;left:16px;gap:10px}
  .float-btn{width:46px;height:46px;font-size:19px}
  .float-btn.call{font-size:17px}
  .float-btn span{display:none}
}

/* ========================================================================== */
/* PAY ONLINE PAGE                                                            */
/* ========================================================================== */
.pay-page .section-kicker { display:inline-flex; gap:8px; align-items:center; margin-bottom:7px; padding:6px 13px; border-radius:30px; background:#fff3df; color:#d85526; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.pay-page .section-kicker i { color:#0a9396; }

/* Setup warning — only while PAY still holds placeholders */
.pay-setup { display:none; gap:16px; align-items:flex-start; margin-bottom:36px; padding:22px 26px; border:1px solid #f5c26b; border-left:5px solid #e8a13a; border-radius:14px; background:#fff8e9; }
.pay-setup.show { display:flex; }
.pay-setup>i { color:#e8a13a; font-size:24px; }
.pay-setup strong { display:block; margin-bottom:5px; color:#8a5a10; font-size:15px; }
.pay-setup p { color:#946621; font-size:13px; line-height:1.75; }
.pay-setup code { padding:1px 6px; border-radius:4px; background:#f6e3bd; color:#7a4d0b; font-size:12px; }


/* Payment detail cards */
.pay-qr { display:grid; place-items:center; margin-bottom:18px; padding:16px; border:1px dashed #c9e0dc; border-radius:16px; background:#fbfdfd; }
.pay-qr img { width:100%; max-width:230px; border-radius:10px; }
.pay-qr-empty { display:grid; gap:6px; justify-items:center; padding:34px 12px; text-align:center; }
.pay-qr-empty i { color:#b6cfcb; font-size:52px; }
.pay-qr-empty span { color:#55777c; font-size:13px; font-weight:600; }
.pay-qr-empty small { color:#8aa3a6; font-size:11px; line-height:1.6; }
.pay-qr-empty code { padding:1px 5px; border-radius:4px; background:#eef5f4; font-size:10.5px; }
.pay-upi { display:flex; gap:10px; align-items:center; justify-content:space-between; margin:7px 0 14px; padding:11px 14px; border:1px solid #d7e7e4; border-radius:10px; background:#f7fbfa; }
.pay-upi code { overflow:hidden; color:#003b4e; font-size:13.5px; font-weight:700; text-overflow:ellipsis; }
.pay-copy { display:inline-flex; gap:7px; align-items:center; padding:8px 13px; border:1px solid #cee3df; border-radius:8px; background:#fff; color:#007f85; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.pay-copy:hover { border-color:#007f85; background:#007f85; color:#fff; }
.pay-copy.wide { justify-content:center; width:100%; margin-top:14px; padding:11px; }
.pay-upi-btn { display:flex; gap:9px; align-items:center; justify-content:center; padding:13px; border-radius:10px; background:linear-gradient(135deg,#007f85,#0a9396); color:#fff; font-size:13px; font-weight:700; transition:transform .25s,box-shadow .25s; }
.pay-upi-btn:hover { transform:translateY(-2px); box-shadow:0 12px 20px rgba(0,127,133,.3); color:#fff; }
.pay-hint { margin-top:13px; color:#8aa3a6; font-size:11.5px; line-height:1.7; }

.pay-bank { display:grid; gap:11px; }
.pay-bank li { display:grid; gap:2px; padding-bottom:11px; border-bottom:1px dashed #e0ecea; }
.pay-bank li:last-child { border-bottom:0; padding-bottom:0; }
.pay-bank span { color:#87a0a3; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.pay-bank strong { color:#003b4e; font-size:14px; word-break:break-word; }
.pay-cash { display:grid; gap:13px; }
.pay-cash li { display:flex; gap:12px; align-items:flex-start; color:#5b7780; font-size:13px; line-height:1.7; }
.pay-cash i { display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center; border-radius:9px; background:#f2f8f7; color:#007f85; font-size:12px; }

/* Confirmation form */
.pay-confirm { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:46px; align-items:start; padding:46px; border-radius:25px; background:linear-gradient(135deg,#f4fbfa,#fff8ec); box-shadow:0 16px 38px rgba(0,58,70,.1); }
.pay-steps { display:grid; gap:16px; margin-top:26px; }
.pay-steps li { display:flex; gap:14px; align-items:flex-start; }
.pay-steps li>span { display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#003b4e,#007f85); color:#fff; font-size:13px; font-weight:700; }
.pay-steps strong { display:block; color:#003b4e; font-size:14px; }
.pay-steps p { color:#7d9498; font-size:12px; line-height:1.7; }

.pay-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:34px; border-radius:20px; background:#fff; box-shadow:0 12px 26px rgba(0,58,70,.08); }
.pay-field { display:grid; gap:6px; }
.pay-field.wide { grid-column:1 / -1; }
.pay-field label { color:#55777c; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.pay-field label b { color:#e85d2a; }
.pay-field input:not([type=file]),.pay-field select { width:100%; padding:12px 14px; border:1px solid #d7e7e4; border-radius:10px; background:#fbfdfd; color:#003b4e; font:inherit; font-size:13px; transition:border-color .25s,box-shadow .25s; }
.pay-field input:focus,.pay-field select:focus { border-color:#007f85; outline:0; box-shadow:0 0 0 3px rgba(0,127,133,.12); }
.pay-upload { display:grid !important; justify-items:center; gap:4px; padding:26px 18px; border:2px dashed #c9e0dc; border-radius:14px; background:#f9fdfc; cursor:pointer; text-align:center; text-transform:none !important; letter-spacing:0 !important; transition:border-color .25s,background .25s; }
.pay-upload:hover { border-color:#007f85; background:#f2faf9; }
.pay-upload i { color:#007f85; font-size:26px; }
.pay-upload strong { color:#003b4e; font-size:13.5px; font-weight:600; }
.pay-upload span { color:#8aa3a6; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
.pay-shot-preview { display:none; gap:14px; align-items:center; margin-top:12px; padding:12px; border:1px solid #e0ecea; border-radius:12px; background:#fbfdfd; }
.pay-shot-preview.show { display:flex; }
.pay-shot-preview img { width:64px; height:64px; flex:0 0 64px; border-radius:8px; object-fit:cover; }
.pay-shot-preview strong { display:block; color:#003b4e; font-size:12.5px; word-break:break-all; }
.pay-shot-preview span { color:#8aa3a6; font-size:11px; }
.pay-shot-error { color:#c0392b; font-size:12px; }
.pay-shot-error i { margin-right:6px; }
.pay-note { display:flex; gap:8px; margin-top:10px; color:#8aa3a6; font-size:11.5px; line-height:1.65; }
.pay-note i { margin-top:2px; color:#007f85; }
.pay-error { display:none; grid-column:1 / -1; padding:12px 15px; border:1px solid #f3c4bd; border-radius:10px; background:#fdf1ef; color:#c0392b; font-size:12.5px; }
.pay-error.show { display:block; }
.pay-error i { margin-right:7px; }
.pay-submit { grid-column:1 / -1; justify-content:center; }

.pay-ok { display:none; padding:40px 32px; border:1px dashed #a9d8c9; border-radius:20px; background:#fff; text-align:center; }
.pay-ok.show { display:block; }
.pay-ok>i { color:#43aa8b; font-size:48px; }
.pay-ok h3 { margin:14px 0 8px; color:#003b4e; font-size:21px; }
.pay-ok>p { max-width:520px; margin:0 auto 22px; color:#668086; font-size:13.5px; line-height:1.85; }
.pay-ok-summary { display:grid; gap:9px; max-width:440px; margin:0 auto 24px; padding:20px; border-radius:14px; background:#f6fbfa; text-align:left; }
.pay-ok-summary li { display:flex; gap:14px; align-items:center; justify-content:space-between; }
.pay-ok-summary span { color:#87a0a3; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.pay-ok-summary strong { color:#003b4e; font-size:13.5px; text-align:right; word-break:break-word; }
.pay-ok-wa { background:linear-gradient(135deg,#25d366,#128c7e) !important; }
.pay-ok-call { display:block; margin-top:14px; color:#55777c; font-size:12.5px; font-weight:600; }
.pay-ok-call:hover { color:#e85d2a; }

/* Safety */
.pay-safety { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.pay-safety article { display:flex; gap:16px; padding:26px; border:1px solid rgba(0,95,115,.11); border-left:3px solid #007f85; border-radius:6px 16px 16px 6px; background:#fff; box-shadow:0 9px 20px rgba(0,58,70,.06); }
.pay-safety>article>i { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:12px; background:linear-gradient(135deg,#e6f4f3,#fff3df); color:#007f85; font-size:17px; }
.pay-safety h3 { margin-bottom:6px; color:#003b4e; font-size:16px; }
.pay-safety p { color:#668086; font-size:12.5px; line-height:1.8; }

@media(max-width:991px){
  .pay-confirm{grid-template-columns:1fr;gap:32px;padding:34px}
}
@media(max-width:620px){
  .pay-safety{grid-template-columns:1fr}
  .pay-form{grid-template-columns:1fr;padding:24px 20px}
  .pay-confirm{padding:24px 18px;border-radius:17px}
  .pay-setup{flex-direction:column;gap:10px;padding:18px 20px}
  .pay-ok{padding:30px 20px}
  .pay-ok-summary li{flex-direction:column;align-items:flex-start;gap:2px}
  .pay-ok-summary strong{text-align:left}
}

/* ========================================================================== */
/* FLOAT DOCK — moved to the right, stacked above the back-to-top button      */
/* ========================================================================== */
/* Back-to-top sits at the very bottom; the dock stacks on top of it
   (42px button + 12px gap + 22px offset = 76px). */
.back-to-top { bottom:22px; right:27px; }
.float-dock { right:22px; left:auto; bottom:76px; }
/* Tooltips flip to the left of the buttons */
.float-btn span { right:64px; left:auto; transform:translateX(8px); }
.float-btn span::before { right:-5px; left:auto; }
.float-btn:hover span { transform:translateX(0); }
@media(max-width:620px){
  .back-to-top { bottom:16px; right:18px; }
  .float-dock { right:16px; left:auto; bottom:70px; }
}

/* ========================================================================== */
/* PAY ONLINE — tabbed methods on the left, form docked on the right          */
/* ========================================================================== */
.pay-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:34px; align-items:start; }
.pay-left-head { margin-bottom:22px; }
.pay-left-head h2 { margin:10px 0 8px; color:#003b4e; font-size:clamp(24px,2.8vw,34px); line-height:1.2; }
.pay-left-head h2 span { color:#e85d2a; }
.pay-left-head p { color:#668086; font-size:13.5px; line-height:1.8; }

.pay-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:-1px; }
.pay-tab { display:inline-flex; gap:8px; align-items:center; padding:13px 20px; border:1px solid #d9e8e5; border-bottom-color:transparent; border-radius:12px 12px 0 0; background:#f3f9f8; color:#55777c; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.pay-tab i { color:#0a9396; transition:color .25s; }
.pay-tab:hover { background:#eaf5f3; color:#003b4e; }
.pay-tab.active { position:relative; z-index:2; border-color:#d9e8e5; border-bottom-color:#fff; background:#fff; color:#003b4e; }
.pay-tab.active i { color:#e85d2a; }

.pay-panels { position:relative; }
.pay-panel { display:none; padding:28px 30px; border:1px solid #d9e8e5; border-radius:0 16px 16px 16px; background:#fff; box-shadow:0 12px 28px rgba(0,58,70,.08); }
.pay-panel.active { display:block; animation:payFade .3s ease; }
@keyframes payFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .pay-panel.active{animation:none} }
.pay-panel-note { display:flex; gap:10px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px dashed #e0ecea; color:#668086; font-size:13px; line-height:1.75; }
.pay-panel-note i { margin-top:2px; color:#007f85; font-size:15px; }

.pay-upi-wrap { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; align-items:start; }
.pay-qr { display:grid; place-items:center; padding:14px; border:1px dashed #c9e0dc; border-radius:16px; background:#fbfdfd; }
.pay-qr img { width:100%; border-radius:10px; }
.pay-qr-empty { display:grid; gap:6px; justify-items:center; padding:26px 10px; text-align:center; }
.pay-qr-empty i { color:#b6cfcb; font-size:46px; }
.pay-qr-empty span { color:#55777c; font-size:12.5px; font-weight:600; }
.pay-qr-empty small { color:#8aa3a6; font-size:10.5px; line-height:1.6; }
.pay-qr-empty code { padding:1px 5px; border-radius:4px; background:#eef5f4; font-size:10px; }
.pay-label { color:#87a0a3; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.pay-upi { display:flex; gap:10px; align-items:center; justify-content:space-between; margin:7px 0 14px; padding:11px 14px; border:1px solid #d7e7e4; border-radius:10px; background:#f7fbfa; }
.pay-upi code { overflow:hidden; color:#003b4e; font-size:13.5px; font-weight:700; text-overflow:ellipsis; }
.pay-copy { display:inline-flex; gap:7px; align-items:center; padding:8px 13px; border:1px solid #cee3df; border-radius:8px; background:#fff; color:#007f85; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.pay-copy:hover { border-color:#007f85; background:#007f85; color:#fff; }
.pay-copy.wide { justify-content:center; width:100%; margin-top:16px; padding:11px; }
.pay-upi-btn { display:flex; gap:9px; align-items:center; justify-content:center; padding:13px; border-radius:10px; background:linear-gradient(135deg,#007f85,#0a9396); color:#fff; font-size:13px; font-weight:700; transition:transform .25s,box-shadow .25s; }
.pay-upi-btn:hover { transform:translateY(-2px); box-shadow:0 12px 20px rgba(0,127,133,.3); color:#fff; }
.pay-hint { margin-top:13px; color:#8aa3a6; font-size:11.5px; line-height:1.7; }

.pay-bank { display:grid; gap:12px; }
.pay-bank li { display:flex; gap:16px; align-items:baseline; justify-content:space-between; padding-bottom:12px; border-bottom:1px dashed #e0ecea; }
.pay-bank li:last-child { padding-bottom:0; border-bottom:0; }
.pay-bank span { flex:0 0 auto; color:#87a0a3; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.pay-bank strong { color:#003b4e; font-size:14px; text-align:right; word-break:break-word; }
.pay-cash { display:grid; gap:14px; }
.pay-cash li { display:flex; gap:13px; align-items:flex-start; }
.pay-cash i { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:10px; background:#f2f8f7; color:#007f85; font-size:13px; }
.pay-cash strong { display:block; color:#003b4e; font-size:13.5px; }
.pay-cash span { color:#7d9498; font-size:12.5px; line-height:1.7; }

.pay-steps { display:grid; gap:14px; margin-top:26px; }
.pay-steps li { display:flex; gap:14px; align-items:flex-start; }
.pay-steps li>span { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#003b4e,#007f85); color:#fff; font-size:12.5px; font-weight:700; }
.pay-steps strong { display:block; color:#003b4e; font-size:13.5px; }
.pay-steps p { color:#7d9498; font-size:12px; line-height:1.7; }

/* Right column — the form sticks while the tabs are read */
.pay-right { position:sticky; top:24px; }
.pay-form-card { padding:30px 28px; border:1px solid #e2eeec; border-radius:20px; background:#fff; box-shadow:0 16px 36px rgba(0,58,70,.12); }
.pay-form-head { margin-bottom:20px; padding-bottom:18px; border-bottom:1px dashed #e0ecea; }
.pay-form-head h2 { margin:10px 0 7px; color:#003b4e; font-size:22px; }
.pay-form-head p { color:#7d9498; font-size:12.5px; line-height:1.75; }
.pay-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }

/* ========================================================================== */
/* HOME — cab services banner, rebuilt as a balanced two column block         */
/* ========================================================================== */
.home-page .cab-container { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); align-items:center; }
.home-page .cab-text { max-width:600px; }
.home-page .cab-text h2 { margin:12px 0 10px; font-size:clamp(32px,3.8vw,46px); font-weight:800; line-height:1.1; letter-spacing:-.5px; text-transform:none; }
.home-page .cab-text h2 span { color:#ffd166; font-family:Georgia,serif; font-style:italic; font-weight:400; }
.home-page .cab-text .tagline { max-width:520px; margin:0 0 20px; color:#d5f0ec; font-size:14px; line-height:1.85; }
.cab-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 20px; margin-bottom:26px; }
.cab-points li { display:flex; gap:10px; align-items:center; color:#eafaf8; font-size:12.5px; line-height:1.5; }
.cab-points i { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border-radius:8px; background:rgba(255,255,255,.14); color:#ffd166; font-size:12px; }
.cab-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.home-page .cab-actions .btn-orange { background:#f7ae2a; color:#003b4e; }
.cab-call { display:inline-flex; gap:9px; align-items:center; padding:12px 20px; border:1px solid rgba(255,255,255,.4); border-radius:30px; color:#fff; font-size:13px; font-weight:700; transition:background .25s,border-color .25s; }
.cab-call i { color:#ffd166; }
.cab-call:hover { border-color:#ffd166; background:rgba(255,209,102,.18); color:#fff; }

.home-page .cab-media { position:relative; display:block; width:100%; max-width:500px; margin-left:auto; padding-bottom:8px; }
.home-page .cab-car-img { display:block; width:100%; max-width:100%; filter:drop-shadow(0 22px 24px rgba(0,27,39,.42)); }
.cab-fare { position:absolute; top:26px; left:8px; z-index:2; display:grid; padding:13px 18px; border-radius:14px; background:#fff; color:#003b4e; text-align:center; box-shadow:0 14px 26px rgba(0,25,33,.28); }
.cab-fare strong { color:#e85d2a; font-size:24px; line-height:1; }
.cab-fare small { margin-top:3px; color:#7d9498; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.home-page .play-btn-wrapper { position:absolute; bottom:52px; left:0; display:inline-flex; gap:11px; align-items:center; padding:7px 16px 7px 7px; border-radius:40px; background:rgba(0,32,42,.55); backdrop-filter:blur(4px); color:#fff; transition:background .25s; }
.home-page .play-btn-wrapper:hover { background:rgba(0,32,42,.78); color:#fff; }
.home-page .play-btn { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border:0; border-radius:50%; background:#f7ae2a; color:#003b4e; font-size:13px; box-shadow:0 0 0 6px rgba(255,255,255,.13); }
.play-label { font-size:12px; font-weight:600; white-space:nowrap; }
.cab-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; margin-top:14px; }
.cab-chips li { padding:5px 13px; border:1px solid rgba(255,255,255,.28); border-radius:20px; color:#eafaf8; font-size:11px; font-weight:600; }

@media(max-width:1100px){
  .pay-layout{grid-template-columns:1fr}
  .pay-right{position:static}
}
@media(max-width:991px){
  .home-page .cab-container{grid-template-columns:1fr;gap:34px;text-align:left}
  .home-page .cab-text{max-width:none}
  .home-page .cab-media{margin:0 auto;max-width:460px}
  .cab-chips{justify-content:flex-start}
  .pay-upi-wrap{grid-template-columns:1fr}
  .pay-qr{max-width:260px}
}
@media(max-width:620px){
  .home-page .cab-container{gap:26px}
  .cab-points{grid-template-columns:1fr;gap:9px}
  .cab-actions{width:100%}
  .cab-actions>*{flex:1 1 100%;justify-content:center;text-align:center}
  .cab-fare{top:0;padding:10px 14px}
  .cab-fare strong{font-size:20px}
  .home-page .play-btn-wrapper{padding:6px 13px 6px 6px}
  .home-page .play-btn{width:30px;height:30px;flex:0 0 30px;font-size:11px}
  .pay-tabs{gap:6px}
  .pay-tab{flex:1 1 auto;justify-content:center;padding:11px 12px;font-size:11.5px}
  .pay-panel{padding:22px 18px;border-radius:14px}
  .pay-form{grid-template-columns:1fr}
  .pay-form-card{padding:24px 20px}
  .pay-bank li{flex-direction:column;gap:3px;align-items:flex-start}
  .pay-bank strong{text-align:left}
}

/* Ten top-level nav items — tighten the row on narrower desktops so the
   links never wrap onto a second line before the mobile drawer kicks in */
@media(min-width:992px) and (max-width:1199px){
  .nav-links { gap:14px; }
  .nav-links a { font-size:13px; }
}

/* ========================================================================== */
/* CAB SERVICES — Book Now popup                                              */
/* ========================================================================== */
body.modal-open { overflow:hidden; }

.cab-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; }
.cab-modal[hidden] { display:none; }
.cab-modal-backdrop { position:absolute; inset:0; background:rgba(0,26,34,.62); backdrop-filter:blur(3px); animation:cabFade .25s ease; }
.cab-modal-box { position:relative; z-index:1; width:min(100%,720px); max-height:92vh; overflow-y:auto; padding:34px 36px; border-radius:22px; background:#fff; box-shadow:0 30px 70px rgba(0,25,33,.4); animation:cabPop .3s cubic-bezier(.2,.8,.3,1); }
@keyframes cabFade { from{opacity:0} to{opacity:1} }
@keyframes cabPop { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .cab-modal-backdrop,.cab-modal-box{animation:none} }

.cab-modal-close { position:absolute; top:16px; right:16px; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:#f2f8f7; color:#55777c; font-size:15px; cursor:pointer; transition:background .25s,color .25s; }
.cab-modal-close:hover { background:#e85d2a; color:#fff; }

.cab-modal-head { margin-bottom:22px; padding-right:44px; }
.cab-modal-head h2 { margin:10px 0 7px; color:#003b4e; font-size:26px; line-height:1.2; }
.cab-modal-head>p:not(.section-kicker) { color:#7d9498; font-size:13px; line-height:1.75; }
.cab-modal-vehicle { display:inline-flex; gap:8px; align-items:center; margin-top:12px; padding:7px 14px; border-radius:30px; background:linear-gradient(135deg,#e6f4f3,#fff3df); color:#00646a; font-size:12px; font-weight:700; }
.cab-modal-vehicle::before { content:'\f1b9'; font-family:'Font Awesome 6 Free'; font-weight:900; color:#e85d2a; }
.cab-modal-vehicle[hidden] { display:none; }

.cab-modal-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.cab-modal-form .cab-field label b { color:#e85d2a; }
.cab-modal-error { display:none; grid-column:1 / -1; padding:12px 15px; border:1px solid #f3c4bd; border-radius:10px; background:#fdf1ef; color:#c0392b; font-size:12.5px; }
.cab-modal-error.show { display:block; }
.cab-modal-error i { margin-right:7px; }

.cab-modal-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; grid-column:1 / -1; margin-top:6px; }
.cab-modal-actions .btn-orange { flex:1 1 240px; justify-content:center; }
.cab-modal-or { color:#a5b9bb; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.cab-modal-wa { display:inline-flex; flex:1 1 200px; gap:9px; align-items:center; justify-content:center; padding:13px 20px; border-radius:30px; background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; font-size:13px; font-weight:700; transition:transform .25s,box-shadow .25s; }
.cab-modal-wa:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(37,211,102,.36); color:#fff; }
.cab-modal-note { grid-column:1 / -1; display:flex; gap:8px; margin-top:4px; color:#8aa3a6; font-size:11.5px; line-height:1.7; }
.cab-modal-note i { margin-top:2px; color:#007f85; }
.cab-modal-note a { color:#e85d2a; font-weight:700; }

.cab-modal-ok { display:none; padding:14px 4px 4px; text-align:center; }
.cab-modal-ok.show { display:block; }
.cab-modal-ok>i { color:#43aa8b; font-size:46px; }
.cab-modal-ok h3 { margin:12px 0 7px; color:#003b4e; font-size:22px; }
.cab-modal-ok>p { max-width:460px; margin:0 auto 20px; color:#668086; font-size:13px; line-height:1.8; }
.cab-modal-summary { display:grid; gap:9px; max-width:440px; margin:0 auto 22px; padding:18px 20px; border-radius:14px; background:#f6fbfa; text-align:left; }
.cab-modal-summary li { display:flex; gap:14px; align-items:baseline; justify-content:space-between; }
.cab-modal-summary span { flex:0 0 auto; color:#87a0a3; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.cab-modal-summary strong { color:#003b4e; font-size:13px; text-align:right; word-break:break-word; }
.cab-modal-okwa { background:linear-gradient(135deg,#25d366,#128c7e) !important; }
.cab-modal-again { display:block; margin:14px auto 0; border:0; background:none; color:#55777c; font:inherit; font-size:12.5px; font-weight:600; text-decoration:underline; cursor:pointer; }
.cab-modal-again:hover { color:#e85d2a; }

/* The fleet and route triggers are buttons now, so they need the link look */
.cab-book { border:0; font:inherit; cursor:pointer; }
.cab-routes article>button { display:inline-flex; gap:6px; align-items:center; flex:0 0 auto; border:0; background:none; color:#e85d2a; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.cab-routes article>button i { transition:transform .2s; }
.cab-routes article:hover>button i { transform:translateX(4px); }

@media(max-width:620px){
  .cab-modal { padding:12px; }
  .cab-modal-box { padding:26px 20px; border-radius:18px; max-height:94vh; }
  .cab-modal-head h2 { font-size:22px; }
  .cab-modal-form { grid-template-columns:1fr; }
  .cab-modal-actions { gap:10px; }
  .cab-modal-actions .btn-orange,.cab-modal-wa { flex:1 1 100%; }
  .cab-modal-or { width:100%; text-align:center; }
  .cab-modal-summary li { flex-direction:column; gap:2px; align-items:flex-start; }
  .cab-modal-summary strong { text-align:left; }
  .cab-routes article>button { width:100%; justify-content:flex-end; }
}

/* ========================================================================== */
/* BLOG DETAIL — hero rebuilt as one overlay unit                             */
/* The old layout stacked a 1500px wide photo under a 1080px centred header,  */
/* so the two never lined up. Title, meta and photo are now a single block.   */
/* ========================================================================== */
.blog-detail-page .article-hero {
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  width:100%; min-height:clamp(420px,52vw,620px); margin:0 0 8px;
  padding:0; border:0; border-radius:26px;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  box-shadow:0 26px 52px rgba(0,45,58,.24); color:#fff;
}
.article-hero-inner { width:100%; max-width:900px; padding:clamp(30px,4vw,54px); }
.blog-detail-page .article-hero .article-breadcrumb {
  width:auto; margin:0 0 18px; padding:0; color:#cfe6e4; font-size:12px;
}
.blog-detail-page .article-hero .article-breadcrumb a { color:#ffd166; }
.blog-detail-page .article-hero .article-breadcrumb i { color:rgba(255,255,255,.45); }
.blog-detail-page .article-hero .article-category {
  display:inline-flex; gap:7px; align-items:center; padding:6px 13px; border-radius:30px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.16);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.blog-detail-page .article-hero h1 {
  max-width:840px; margin:16px 0 12px; color:#fff;
  font-size:clamp(30px,4.4vw,58px); line-height:1.1; letter-spacing:-1.2px;
  text-shadow:0 2px 18px rgba(0,20,28,.45);
}
.blog-detail-page .article-hero > div > p {
  max-width:660px; margin:0; color:#e2f0ee; font-size:15.5px; line-height:1.8;
}
.blog-detail-page .article-hero .article-author {
  display:inline-flex; gap:11px; align-items:center; margin-top:22px;
  padding:8px 16px 8px 8px; border-radius:40px;
  background:rgba(0,26,34,.42); backdrop-filter:blur(5px);
  color:#fff; font-size:12px; text-align:left;
}
.blog-detail-page .article-hero .article-author strong { display:block; font-size:12.5px; font-weight:700; }
.blog-detail-page .article-hero .article-author small { color:#bcd6d4; font-size:11px; font-weight:400; }
.blog-detail-page .article-hero .author-mark { width:34px; height:34px; flex:0 0 34px; }

@media(max-width:620px){
  .blog-detail-page .article-hero { min-height:400px; border-radius:18px; }
  .blog-detail-page .article-hero h1 { font-size:clamp(26px,8vw,36px); letter-spacing:-.6px; }
  .blog-detail-page .article-hero > div > p { font-size:13.5px; }
  .article-hero-inner { padding:24px 20px; }
}

/* ========================================================================== */
/* CAB SERVICES — hero fleet slider                                           */
/* ========================================================================== */
.cab-slider { position:relative; overflow:hidden; border-radius:22px; background:rgba(255,255,255,.06); }
.cab-slide { position:absolute; inset:0; display:grid; place-items:center; padding:18px; opacity:0; transform:scale(1.04); transition:opacity .6s ease,transform .6s ease; pointer-events:none; }
.cab-slide.active { position:relative; opacity:1; transform:none; pointer-events:auto; }
.cab-slide img { width:100%; max-height:330px; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(0,25,33,.45)); }
.cab-slide-tag { position:absolute; bottom:14px; left:16px; display:grid; padding:9px 16px; border-radius:12px; background:rgba(0,32,42,.62); backdrop-filter:blur(5px); color:#fff; font-size:13px; font-weight:700; }
.cab-slide-tag small { margin-top:2px; color:#ffd166; font-size:10.5px; font-weight:600; letter-spacing:.3px; }

.cab-slider-nav { position:absolute; top:50%; z-index:3; display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(0,32,42,.45); color:#fff; font-size:13px; cursor:pointer; transform:translateY(-50%); transition:background .25s,border-color .25s; }
.cab-slider-nav:hover { border-color:#f7ae2a; background:#f7ae2a; color:#003b4e; }
.cab-slider-nav.prev { left:12px; }
.cab-slider-nav.next { right:12px; }

.cab-slider-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.cab-slider-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.32); cursor:pointer; transition:width .3s,background .3s; }
.cab-slider-dots button.active { width:26px; border-radius:6px; background:#ffd166; }

@media (prefers-reduced-motion:reduce){
  .cab-slide { transition:none; transform:none; }
}
@media(max-width:620px){
  .cab-slide img { max-height:210px; }
  .cab-slide-tag { bottom:10px; left:10px; padding:7px 12px; font-size:12px; }
  .cab-slider-nav { width:32px; height:32px; font-size:11px; }
  .cab-slider-nav.prev { left:8px; }
  .cab-slider-nav.next { right:8px; }
}

/* ========================================================================== */
/* CAB CARD — WhatsApp enquire icon beside Book now                           */
/* ========================================================================== */
.cab-card-btns { display:flex; gap:8px; align-items:center; }
.cab-wa-icon { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; font-size:17px; transition:transform .25s,box-shadow .25s; }
.cab-wa-icon:hover { transform:translateY(-2px) scale(1.06); box-shadow:0 10px 18px rgba(37,211,102,.4); color:#fff; }

/* ========================================================================== */
/* BOOK NOW POPUP — compact enough to sit on screen without scrolling         */
/* ========================================================================== */
.cab-modal-box {
  width:min(100%,600px);
  max-height:min(94vh,720px);
  padding:24px 26px;
  border-radius:18px;
  /* Content is sized to fit; scrolling stays possible on very short screens
     but the bar itself is never drawn */
  scrollbar-width:none; -ms-overflow-style:none;
}
.cab-modal-box::-webkit-scrollbar { display:none; width:0; height:0; }

.cab-modal-close { top:12px; right:12px; width:30px; height:30px; font-size:13px; }
.cab-modal-head { margin-bottom:16px; padding-right:36px; }
.cab-modal-head h2 { display:flex; gap:9px; align-items:center; margin:0 0 5px; font-size:20px; }
.cab-modal-head h2 i { color:#e85d2a; font-size:17px; }
.cab-modal-head>p:not(.section-kicker) { font-size:12px; line-height:1.6; }
.cab-modal-vehicle { margin-top:9px; padding:5px 12px; font-size:11px; }

.cab-modal-form { gap:10px 12px; }
.cab-modal-form .cab-field label { font-size:10px; letter-spacing:.4px; }
.cab-modal-form .cab-field input,.cab-modal-form .cab-field select { padding:9px 12px; border-radius:8px; font-size:12.5px; }
.cab-modal-error { padding:9px 12px; font-size:11.5px; }

.cab-modal-actions { gap:10px; margin-top:4px; }
.cab-modal-actions .btn-orange { flex:1 1 190px; padding:11px 16px; font-size:12.5px; }
.cab-modal-wa { flex:1 1 160px; padding:11px 16px; font-size:12.5px; }
.cab-modal-or { font-size:10px; }
.cab-modal-note { margin-top:2px; font-size:11px; }

.cab-modal-ok { padding:6px 2px 2px; }
.cab-modal-ok>i { font-size:38px; }
.cab-modal-ok h3 { margin:9px 0 5px; font-size:19px; }
.cab-modal-ok>p { margin-bottom:14px; font-size:12.5px; }
.cab-modal-summary { gap:7px; margin-bottom:16px; padding:14px 16px; }
.cab-modal-summary strong { font-size:12.5px; }
.cab-modal-again { margin-top:11px; font-size:12px; }

@media(max-width:620px){
  .cab-modal-box { padding:20px 16px; border-radius:16px; }
  .cab-modal-head h2 { font-size:18px; }
  .cab-card-btns { width:100%; justify-content:flex-end; }
}
/* Short viewports — trim further so the form still fits */
@media(max-height:700px){
  .cab-modal-head { margin-bottom:12px; }
  .cab-modal-head>p:not(.section-kicker) { display:none; }
  .cab-modal-form { gap:8px 12px; }
  .cab-modal-form .cab-field input,.cab-modal-form .cab-field select { padding:7px 11px; }
  .cab-modal-note { display:none; }
}

/* ========================================================================== */
/* CAR IMAGES — every file in images/cars is an opaque webp with a baked-in   */
/* white background (no alpha channel), so any tinted panel behind one shows  */
/* up as a hard white rectangle. The panels are white to match, and the cars  */
/* are scaled up to fill the space instead of floating in it.                 */
/* ========================================================================== */

/* --- Fleet cards --- */
.cab-card-media {
  height:210px;
  border-bottom:1px solid #eef4f3;
  background:#fff;              /* was a tinted gradient — showed the image edge */
}
.cab-card-media img {
  padding:0;
  object-fit:contain;
  object-position:center;
  transform:scale(1.06);        /* fills the panel without cropping the car */
}
.cab-card:hover .cab-card-media img { transform:scale(1.13); }
/* Badges need their own contrast now that the panel is white */
.cab-type { background:rgba(0,43,57,.82); }
.cab-ribbon { box-shadow:0 4px 12px rgba(232,93,42,.32); }

/* --- Hero slider --- */
/* On the dark teal hero the same white rectangles looked like stray boxes, so
   the slider is now a deliberate white card that the photos sit inside. */
.cab-slider {
  background:#fff;
  box-shadow:0 22px 44px rgba(0,25,33,.32);
}
.cab-slide { padding:10px; }
.cab-slide img {
  max-height:300px;
  object-fit:contain;
  filter:none;                  /* a drop-shadow only outlined the white box */
  transform:scale(1.04);
}
.cab-slider-nav {
  border-color:rgba(0,59,78,.14);
  background:rgba(255,255,255,.9);
  color:#003b4e;
  box-shadow:0 4px 12px rgba(0,25,33,.16);
}
.cab-slider-nav:hover { border-color:#f7ae2a; background:#f7ae2a; color:#003b4e; }
.cab-slide-tag { background:rgba(0,32,42,.78); }

@media(max-width:620px){
  .cab-card-media { height:180px; }
  .cab-slide img { max-height:200px; }
}

/* ==========================================================================
   HOME — mobile-first pass
   Phones get a single readable column, layers that no longer overlap each
   other, and controls big enough to hit with a thumb.
   ========================================================================== */
@media (max-width: 767px) {
  /* The booking card used to ride up (-34px) over the hero quick links and
     cut the second row of tiles in half. */
  .home-page .search-box { margin-top: 16px; }
  .home-page .hero-quick-bar { bottom: 18px; gap: 8px; width: calc(100% - 28px); }
  .home-page .quick-item { padding: 12px 6px; border-radius: 12px; }

  /* Slider arrows land on the card photo rather than across its title. */
  .home-page .slider .slider-arrow.outside { top: 112px; }
  .home-page .slider .prev-arrow.outside { left: 4px; }
  .home-page .slider .next-arrow.outside { right: 4px; }

  /* Thumb-sized controls: 44px on anything meant to be tapped. */
  .home-page .btn-orange,
  .home-page .btn-outline,
  .home-page .btn-view-all,
  .home-page .cab-call,
  .home-page .search-btn { min-height: 44px; align-items: center; justify-content: center; }
  .home-page .search-box input,
  .home-page .search-box select { min-height: 46px; }
  .slider-dots .dot { width: 11px; height: 11px; margin: 0 3px; }
  .slider-dots { padding: 6px 0; }
  .footer-links a { padding: 5px 0; }
  .footer-contact li { margin-bottom: 13px; }
  .footer-socials a { width: 38px; height: 38px; }
}

@media (max-width: 620px) {
  /* Cab media: the play button joins the flow so it stops sitting on top of
     the vehicle chips. */
  .home-page .cab-media { display: grid; justify-items: start; gap: 12px; }
  .home-page .play-btn-wrapper { position: static; bottom: auto; }
  .home-page .cab-chips { margin-top: 0; justify-self: stretch; justify-content: flex-start; }
  .home-page .cab-car-img { max-width: 100%; justify-self: stretch; }
}

/* ==========================================================================
   JOURNAL — mobile refinements for the listing and the article page
   ========================================================================== */
@media (max-width: 700px) {
  /* Category filters and the tag bar turn into one-row swipe strips: fifteen
     tags stacked eight rows deep pushed the stories off the first screen. */
  .blog-filters,
  .blog-tagbar-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .blog-filters::-webkit-scrollbar,
  .blog-tagbar-list::-webkit-scrollbar { display: none; }
  .blog-filters button,
  .blog-tagbar-list button { flex: 0 0 auto; min-height: 36px; }
  .blog-tagbar { display: block; padding: 13px 14px; }
  .blog-tagbar-label { display: block; margin-bottom: 10px; }
  .journal-card-tags a { padding: 6px 11px; }
  .article-foot-tags a,
  .side-tags a { display: inline-flex; align-items: center; min-height: 34px; }
}

/* The article sidebar used to be hidden outright on phones, which took the
   journal search, categories and recent stories with it. Move it below the
   article instead. */
@media (max-width: 800px) {
  .blog-detail-page .article-sidebar,
  .article-sidebar {
    position: static;
    display: grid;
    gap: 16px;
    margin-top: 28px;
  }
  /* Sharing already sits at the end of the article on this width. */
  .article-sidebar .side-share { display: none; }
}

@media (min-width: 561px) and (max-width: 800px) {
  .article-sidebar { grid-template-columns: 1fr 1fr; align-items: start; }
  .article-sidebar .side-search { grid-column: 1 / -1; }
}

/* A soft fade at the end of the swipe strips hints there is more to scroll. */
@media (max-width: 700px) {
  .blog-tagbar-list,
  .blog-filters {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
  }
}

/* ==========================================================================
   HIRE A GUIDE — mobile refinements
   ========================================================================== */
@media (max-width: 768px) {
  /* Six stacked full-width fields filled the whole first screen before a
     single guide appeared; the four dropdowns pair up instead. */
  .guide-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 16px; }
  .guide-filters .form-group:first-child { grid-column: 1 / -1; }
  .guide-filters .btn-reset { grid-column: 1 / -1; min-height: 42px; }
  .guide-filters input,
  .guide-filters select { min-height: 44px; }
}

@media (max-width: 380px) {
  .guide-filters { grid-template-columns: 1fr; }
}

/* Small tablets kept a single full-width card, which stretched the portrait
   into a thin band across the top of the head. Two columns keep the photo
   close to its intended shape. */
@media (min-width: 600px) and (max-width: 768px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* `center top` crops portraits at the forehead as soon as the card is wider
   than it is tall; a band a quarter down keeps the face in frame. */
.guide-photo img { object-position: center 25%; }

/* ==========================================================================
   DESTINATIONS — corner ribbon fit
   The ribbon band overhangs the card by ~28px and is clipped there, so a
   label centred on the whole band loses its tail ("PILGRIM CHOIC"). Padding
   re-centres the text over the part that is actually visible.
   ========================================================================== */
.pkg-ribbon:not(.lg) {
  top: 24px;
  right: -30px;
  width: 152px;
  padding-right: 8px;
  font-size: 9.5px;
  letter-spacing: .2px;
}

/* ==========================================================================
   PACKAGES — mobile refinements
   ========================================================================== */
@media (max-width: 767px) {
  /* Same fix as the home sliders, but these arrows sit on every page that
     uses an "outside" arrow over a card: centred on the slider they land
     across the card title instead of the photo. */
  .slider .slider-arrow.outside { top: 112px; }
  .slider .prev-arrow.outside { left: 4px; }
  .slider .next-arrow.outside { right: 4px; }
}

@media (max-width: 768px) {
  /* Six stacked full-width fields pushed every package below the fold. */
  .pkg-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 16px; }
  .pkg-filters .form-group:first-child { grid-column: 1 / -1; }
  .pkg-filters .btn-reset { grid-column: 1 / -1; min-height: 42px; }
  .pkg-filters input,
  .pkg-filters select { min-height: 44px; }

  /* The category strip already scrolls sideways; fade its edge so that reads
     as scrollable rather than cut off. */
  .pkg-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
  }
}

@media (max-width: 380px) {
  .pkg-filters { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICES / FAQ / TESTIMONIALS — mobile-first pass
   ========================================================================== */
@media (max-width: 620px) {
  /* Services hero: four 72px columns of 10px text were barely legible.
     Two rows of icon-beside-label read at a normal size instead. */
  .hero-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .hero-badge { display: flex; gap: 10px; align-items: center; width: auto; font-size: 12px; line-height: 1.3; text-align: left; }
  .hero-badge .badge-icon { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; }

  /* Testimonials: one stat per row cost ~660px of scrolling before the first
     review. A 2x2 block says the same in half the height. */
  .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 32px; }
  .tm-stats article { padding: 20px 12px; }
  .tm-stats strong { font-size: 23px; }
  .tm-stats span { font-size: 10px; }

  /* Category chips become one-row swipe strips, matching the journal. */
  .faq-tabs,
  .tm-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
  }
  .faq-tabs::-webkit-scrollbar,
  .tm-tabs::-webkit-scrollbar { display: none; }
  .faq-tab,
  .tm-tab { flex: 0 0 auto; min-height: 36px; }

  /* Accordion rows and search stay thumb-sized. */
  .faq-head { min-height: 48px; }
  .faq-search input { min-height: 46px; }
}

/* Between the 2x2 phone layout and the desktop row there is plenty of width,
   so the badges do not need the 72px/10px squeeze the old rule applied. */
@media (min-width: 621px) and (max-width: 768px) {
  .hero-badges { gap: 22px; justify-content: flex-start; }
  .hero-badge { width: 92px; font-size: 11px; }
}

/* ==========================================================================
   ABOUT / GALLERIES — mobile-first pass
   ========================================================================== */
@media (max-width: 575px) {
  /* Four counters stacked one per row ran to ~430px before the story began;
     a 2x2 block keeps the same numbers on one screen. */
  .ab-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .ab-stats-grid li { padding: 6px 4px; padding-bottom: 6px; border-right: 0; border-bottom: 0; }
  .ab-stats-grid li:last-child { border-bottom: 0; }
  .ab-stats-grid strong { font-size: 25px; }
  .ab-stats-grid span { font-size: 11px; }

  /* Portrait cards read fine at half width and halve the scrolling. */
  .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ab-member-photo { height: 190px; }
  .ab-member-body { padding: 12px 10px; }
  .ab-member-body h3 { font-size: 14px; }
  .ab-member-body span { font-size: 11px; }
}

@media (max-width: 620px) {
  /* Both gallery filter strips already scroll sideways; fade the edge so it
     reads as scrollable rather than cut off, and keep the chips tappable. */
  .gal-tabs,
  .vid-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, .15));
    scrollbar-width: none;
  }
  .gal-tabs::-webkit-scrollbar,
  .vid-tabs::-webkit-scrollbar { display: none; }
  .gal-tab,
  .vid-tab { min-height: 38px; }
}

/* ==========================================================================
   CAB SERVICES — fleet card footer on phones
   `.cab-card-btns { width:100% }` was applied while the footer row was still
   a non-wrapping flex line shared with the rate, so the WhatsApp button was
   pushed past the card edge and clipped. Let the row wrap instead.
   ========================================================================== */
@media (max-width: 620px) {
  .cab-card-foot { flex-wrap: wrap; gap: 12px; }
  .cab-card-btns { width: 100%; justify-content: space-between; }
  .cab-book { flex: 1; justify-content: center; min-height: 44px; }
}

/* ==========================================================================
   WHATSAPP ENQUIRE BUTTONS
   The round green button that sits beside "View details" / "Explore" /
   "Discover" on package, destination and cab cards.
   ========================================================================== */
.wa-icon-btn {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  transition: transform .25s, box-shadow .25s;
}
.wa-icon-btn:hover { transform: translateY(-2px) scale(1.06); background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 10px 18px rgba(37,211,102,.4); }

/* Home package cards and home destination cards */
.package-actions,
.card-actions { display: flex; gap: 9px; align-items: center; }
.package-footer { flex-wrap: wrap; gap: 10px; }
.card-actions .wa-icon-btn { width: 34px; height: 34px; flex: 0 0 34px; font-size: 15px; }

/* Packages listing / destination detail cards */
.pkg-actions { display: flex; gap: 9px; align-items: center; }
.pkg-actions .wa-icon-btn { width: 38px; height: 38px; flex: 0 0 38px; font-size: 16px; }

/* Destinations listing cards keep their meta row, so the pair sits right */
.dest-card-actions { display: inline-flex; gap: 9px; align-items: center; }
.dest-card-actions .wa-icon-btn { width: 32px; height: 32px; flex: 0 0 32px; font-size: 14px; }

/* Home cab band */
.cab-wa { display: inline-flex; gap: 9px; align-items: center; padding: 12px 20px; border-radius: 30px; background: #25c65c; color: #fff; font-size: 13px; font-weight: 700; transition: filter .25s, transform .25s; }
.cab-wa:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }

@media (max-width: 620px) {
  .package-actions .btn-orange,
  .card-actions .btn-outline { flex: 1; justify-content: center; text-align: center; }
  .pkg-actions .pkg-btn { flex: 1; justify-content: center; }
}

/* Rich text written in the admin's Design/HTML editor renders inside these two
   wrappers, so give the block tags it can produce sensible article styling. */
.article-intro > :first-child, .article-text > :first-child { margin-top: 0; }
.article-intro > :last-child, .article-text > :last-child { margin-bottom: 0; }
.article-text p { margin-bottom: 15px; }
.article-text h3 { margin: 24px 0 8px; color: #003b4e; font-size: 19px; line-height: 1.4; }
.article-text ul, .article-text ol { margin: 0 0 15px; padding-left: 22px; }
.article-text li { margin-bottom: 6px; }
.article-text ul li { list-style: disc; }
.article-text ol li { list-style: decimal; }
.article-text a { color: var(--blog-accent, #e85d2a); text-decoration: underline; }
.article-text blockquote {
  margin: 0 0 15px; padding: 12px 18px; border-left: 4px solid var(--blog-accent, #e85d2a);
  border-radius: 0 10px 10px 0; background: #fff; color: #3d6068; font-style: italic;
}
.article-text img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.article-text strong { color: #003b4e; }

/* The article is now one rich-text body rather than an intro plus sections,
   so give its opening paragraph the lead-in styling the intro used to carry. */
.article-body-content > p:first-child {
  margin-bottom: 24px; color: #254e57;
  font-family: Georgia, serif; font-size: 21px; line-height: 1.65;
}
.article-body-content h2 {
  margin: 34px 0 9px; color: #003b4e; font-size: 25px; line-height: 1.35;
}
@media (max-width: 560px) {
  .article-body-content > p:first-child { font-size: 18px; }
  .article-body-content h2 { font-size: 22px; }
}

/* ---- Standalone content pages (Terms, Privacy, Refund, ...) ---- */
.content-page-body {
  max-width: 860px; margin: 0 auto; padding: 38px 40px;
  border-radius: 18px; background: #fff;
  box-shadow: 0 12px 30px rgba(0, 55, 70, .07);
  color: #4d6f75; font-size: 15px; line-height: 1.9;
}
.content-page-body > :first-child { margin-top: 0; }
.content-page-body > :last-child { margin-bottom: 0; }
.content-page-body h2 {
  position: relative; margin: 32px 0 12px; padding-left: 16px;
  color: #003b4e; font-size: 23px; line-height: 1.35;
}
.content-page-body h2::before {
  content: ''; position: absolute; top: .28em; bottom: .28em; left: 0;
  width: 4px; border-radius: 3px; background: linear-gradient(180deg, #e85d2a, #f7ae2a);
}
.content-page-body h3 { margin: 24px 0 8px; color: #003b4e; font-size: 18px; }
.content-page-body p { margin-bottom: 15px; }
.content-page-body ul, .content-page-body ol { margin: 0 0 16px; padding-left: 22px; }
.content-page-body li { margin-bottom: 8px; }
.content-page-body ul li { list-style: none; position: relative; padding-left: 6px; }
.content-page-body ul li::before {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: -18px; top: .15em; color: #e85d2a; font-size: 11px;
}
.content-page-body ol li { list-style: decimal; }
.content-page-body a { color: #e85d2a; text-decoration: underline; }
.content-page-body strong { color: #003b4e; }
.content-page-body blockquote {
  margin: 0 0 16px; padding: 14px 20px; border-left: 4px solid #e85d2a;
  border-radius: 0 12px 12px 0; background: #fff8f4; font-style: italic;
}

@media (max-width: 700px) {
  .content-page-body { padding: 26px 20px; border-radius: 14px; }
  .content-page-body h2 { font-size: 20px; }
}

/* Legal links row in the sub-footer (Terms, Privacy, Refund, ...) */
.sub-footer .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.sub-footer .legal-links a { position: relative; color: inherit; opacity: .85; font-size: 12px; }
.sub-footer .legal-links a:hover { opacity: 1; color: #f7ae2a; }
.sub-footer .legal-links a + a::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 1px; height: 11px;
  transform: translateY(-50%); background: currentColor; opacity: .35;
}