@charset "UTF-8";
/*
@font-face {
  font-family: 'btcfontregular';
  src: url('../fonts/btcfontregular.woff2') format('woff2'),
  url('../fonts/btcfontregular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}*/
:root { --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body {
  font-family: "Poppins", sans-serif;
  color: #000000;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: #03a4a3;
}

a:hover {
  color: #00d5d4;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

/* Homepage intro quote is now the "B+" Desho pull-quote — see .text-section-block--intro_text below. */

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 28px;
  line-height: 36px;
}

p {
  font-size: 20px;
  line-height: 32px;
  margin: 0.85em 0;
}

.page-heading {
  text-align: center;
  color: #232936;
  font-size: 2em;
}
.page-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #03a4a3;
  margin: 14px auto 0;
}

.heading-small {
  font-size: 16px;
  font-weight: 500 !important;
}

.primaryTextColor {
  color: #03a4a3;
}

.btn-primary {
  color: #ffffff !important;
  background-color: #03a4a3;
  border-color: #03a4a3;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #00d5d4;
  border-color: #42e8e6;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.btn-custom {
  min-width: 140px;
  text-align: center !important;
  padding: 12px 30px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
}

.book-now-header-btn a {
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #03a4a3;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #00d5d4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  background: #03a4a3;
  font-size: 18px;
  height: 54px;
  padding: 0;
  color: #fff;
}

#topbar .contact-info a {
  line-height: 0;
  color: #ffffff;
  transition: 0.3s;
}

#topbar .contact-info a:hover {
  color: #f3f3f3;
}

#topbar .contact-info i {
  color: #ffffff;
  line-height: 0;
  margin-right: 5px;
  margin-left: 12px;
  font-size: 24px;
}

#topbar .contact-info .phone-icon {
  margin-left: 15px;
}

#topbar .social-links a {
  color: #ffffff;
  padding: 4px 12px;
  display: inline-block;
  line-height: 1px;
  transition: 0.3s;
}

#topbar .social-links a:hover {
  color: #fefefe;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  width: 100%;
  position: absolute;
}

#header.header-scrolled {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

#header .logo {
  font-size: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#header .logo a {
  color: #03a4a3;
}

#header .logo img {
  max-height: 40px;
}

.scrolled-offset {
  margin-top: 0px;
}

/*--------------------------------------------------------------
# Sticky white header on scroll
# Ported from the live site (the custom_css theme_mod was empty
# locally, so these rules were missing and the .fixed-header class
# toggled with no visible effect). .fixed-header is added by
# assets/js/main.js at scrollY > 300 and is now the SINGLE mechanism
# that styles the stuck bar - the older .fixed-top listener was
# neutralised in main.js because #header's own position:absolute
# out-specifies .fixed-top, leaving it visually inert.
--------------------------------------------------------------*/
#header.fixed-header {
  position: fixed;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.09);
  top: 0 !important; /* beat main.css .fixed-top / admin-bar top offset */
}
/* Dark menu links so they stay legible on the white stuck bar */
.fixed-header #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
  color: #000 !important;
}
/* Swap the light (over-hero) logo for the dark logo when stuck */
.fixed-header .fixed-header-logo {
  display: block !important;
}
.fixed-header .header-logo {
  display: none;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 16px;
  color: #222222;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar li a {
  font-size: 14px;
  padding: 10px 0 10px 15px !important;
}

.navbar a:hover, .navbar .active, .navbar li:hover > a {
  color: #03a4a3;
}

.navbar .getstarted {
  color: #03a4a3;
  padding: 8px 25px;
  margin-left: 30px;
  border-radius: 4px;
  border: 2px solid #03a4a3;
  transition: 0.3s;
  font-size: 14px;
}

.navbar .getstarted:hover {
  background: #03a4a3;
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #03a4a3;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

#menu-top-menu {
  list-style: none;
}

#menu-top-menu a {
  color: #fff;
}

.top-menu {
  align-self: center !important;
}

.top-menu {
  align-self: center !important;
  margin-top: 16px;
}

.top-menu li a {
  color: #ffffff;
}

.top-menu li {
  list-style: none;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
  color: #222222;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(9, 9, 9, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #222222;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #03a4a3;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #03a4a3;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background-color: rgba(9, 9, 9, 0.8);
  overflow: hidden;
  position: relative;
}

#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#hero .carousel-item::before {
  content: "";
  z-index: 1;
  /* bottom-weighted so the bottom-left caption stays legible over any photo (client: "contents on the bottom left") */
  /* dark band extended upward to keep the lifted caption/description legible */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.22) 35%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.82) 100%);
}

#hero .carousel-container {
  display: flex;
  justify-content: flex-start; /* content to the left */
  align-items: flex-end;       /* content to the bottom */
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;                     /* full-bleed; the inner Bootstrap .container sets the left gutter */
  right: 0;
  z-index: 2;
  padding-bottom: 200px;       /* 260 -> 200 (client 18 Aug 2026: caption+CTA a bit LOWER; was nudged UP 23 Jul, this splits the difference) */
}

/* Full-bleed hero so the caption can sit near the viewport's left edge.
   Replaces a fixed translateX(-120px) on .hero-caption (23 Jul): that offset was
   larger than the centred container's own left gutter at every viewport below
   ~1536px, so on ordinary laptops the caption and CTA were pushed off-screen
   (measured -48px at 1440, -38px at 1280). The gutter now scales with the
   viewport instead — 10vw reproduces the approved desktop position (192px at
   1920px) and the clamp floor keeps the text on-screen at any width.
   Fixed 29 Jul 2026. */
#hero .container {
  text-align: left;
  max-width: none;
  width: 100%;
  padding-left: clamp(1.25rem, 10vw, 200px);
  padding-right: 1.25rem;
}

/* keep the caption off the far edge so text never spans the whole hero */
#hero .hero-caption {
  max-width: 600px;
}

#hero h2 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);
}

#hero p {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin: 0 0 28px 0;          /* left-aligned: no auto side margins */
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* description fills the caption column (overrides the global .slider-description 50% width) */
#hero .hero-caption .slider-description {
  width: 100%;
}

#hero .carousel-inner .carousel-item {
  transition-property: opacity;
  background-position: center top;
}

#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
  opacity: 0;
}

#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: 0.5s;
}

#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
  background: none;
  font-size: 30px;
  line-height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.5);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .carousel-control-next-icon:hover, #hero .carousel-control-prev-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

#hero .carousel-indicators li {
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: 0.6;
  transition: 0.3s;
}

#hero .carousel-indicators li.active {
  opacity: 1;
  background: #03a4a3;
}

#hero .btn-get-started, .btn.btn-success {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  color: #fff;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  background: #03a4a3;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); /* lift the pill off the photo */
}

#hero .btn-get-started:hover, .btn.btn-success:hover {
  background: #00d5d4;
}

@media (max-width: 992px) {
  section#book-ride {
    text-align: center;
  }
  .book-img {
    text-align: center;
  }
  #hero {
    height: 70vh;
  }
  #hero .carousel-container {
    top: 66px;
    padding-bottom: 90px; /* proportionally smaller lift on the shorter mobile hero */
  }
  #hero .container {
    /* phones/tablets: match the gutter the rest of the page's sections use */
    padding-left: 1.25rem;
  }
  #hero .hero-caption {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  #hero h2 {
    font-size: 28px;
    line-height: 38px;
  }
}
@media (min-width: 1024px) {
  #hero .carousel-control-prev, #hero .carousel-control-next {
    width: 5%;
  }
}
@media (max-height: 500px) {
  #hero {
    height: 120vh;
  }
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 35px 0;
}

.section-bg {
  /*  background-color: #f8fcf9;*/
  background-color: #ffffff;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #03a4a3;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0;
  font-size: 14px;
  color: #919191;
}

/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.featured-services {
  padding: 80px 0;
}

.featured-services .icon-box {
  padding: 20px;
  text-align: center;
  box-shadow: 2px 5px 11px 3px #efefef;
}

.featured-services .icon-box-bg {
  background-image: linear-gradient(0deg, #222222 0%, #2f2f2f 50%, #222222 100%);
}

.featured-services .icon {
  margin-bottom: 15px;
}

.featured-services .icon img {
  max-width: 100%;
  object-fit: contain;
}

.featured-services .icon i {
  color: #03a4a3;
  font-size: 42px;
}

.featured-services .title {
  font-weight: 400 !important;
  margin-bottom: 5px;
  font-size: 18px;
}

.featured-services .title a {
  color: #222222;
  transition: 0.3s;
}

.featured-services .icon-box:hover .title a {
  color: #03a4a3;
}

.featured-services .description {
  line-height: 24px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 700;
  font-size: 28px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #03a4a3;
}

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

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us {
  padding: 0;
}

.why-us .row {
  overflow: hidden;
}

.why-us .content-item {
  padding: 40px;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: -1px;
}

.why-us .content-item span {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #6ec083;
}

.why-us .content-item h4 {
  font-size: 26px;
  font-weight: 300;
  padding: 0;
  margin: 20px 0;
}

.why-us .content-item p {
  color: #aaaaaa;
  font-size: 15px;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .why-us .content-item {
    padding: 40px 0;
  }
}
/*--------------------------------------------------------------
# Our Clients
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  opacity: 1;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #03a4a3;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #03a4a3;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  text-align: center;
  padding: 70px 20px 80px 20px;
  transition: all ease-in-out 0.3s;
  background: #fff;
  box-shadow: 0 5px 90px 0 rgba(110, 123, 131, 0.1);
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .icon-box .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .icon-box .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .icon-box .icon svg path {
  transition: 0.5s;
  fill: #f5f5f5;
}

.services .icon-box h4 {
  font-weight: 600;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .icon-box h4 a {
  color: #222222;
  transition: ease-in-out 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  border-color: #fff;
  box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.08);
}

.services .iconbox-blue i {
  color: #47aeff;
}

.services .iconbox-blue:hover .icon i {
  color: #fff;
}

.services .iconbox-blue:hover .icon path {
  fill: #47aeff;
}

.services .iconbox-orange i {
  color: #ffa76e;
}

.services .iconbox-orange:hover .icon i {
  color: #fff;
}

.services .iconbox-orange:hover .icon path {
  fill: #ffa76e;
}

.services .iconbox-pink i {
  color: #e80368;
}

.services .iconbox-pink:hover .icon i {
  color: #fff;
}

.services .iconbox-pink:hover .icon path {
  fill: #e80368;
}

.services .iconbox-yellow i {
  color: #ffbb2c;
}

.services .iconbox-yellow:hover .icon i {
  color: #fff;
}

.services .iconbox-yellow:hover .icon path {
  fill: #ffbb2c;
}

.services .iconbox-red i {
  color: #ff5828;
}

.services .iconbox-red:hover .icon i {
  color: #fff;
}

.services .iconbox-red:hover .icon path {
  fill: #ff5828;
}

.services .iconbox-teal i {
  color: #11dbcf;
}

.services .iconbox-teal:hover .icon i {
  color: #fff;
}

.services .iconbox-teal:hover .icon path {
  fill: #11dbcf;
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: #03a4a3;
  padding: 80px 0;
}

.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.cta p {
  color: #fff;
}

.cta .cta-btn {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 30px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 4px;
}

.cta .cta-btn:hover {
  background: #fff;
  color: #03a4a3;
}

@media (max-width: 1024px) {
  .cta {
    background-attachment: scroll;
  }
}
@media (min-width: 769px) {
  .cta .cta-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: #fff;
  background: #03a4a3;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(34, 34, 34, 0.6);
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(34, 34, 34, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap img {
  transition: all ease-in-out 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-style: italic;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  margin: 0 5px 0 0;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #6ec083;
}

.portfolio .portfolio-wrap:hover::before {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.2);
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #03a4a3;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #03a4a3;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0 0 30px rgba(34, 34, 34, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 0 12px 0 rgba(34, 34, 34, 0.07);
  padding: 30px 20px;
  background: #fff;
}

.team .member img {
  max-width: 60%;
  border-radius: 50%;
  margin: 0 0 30px 0;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #aaaaaa;
}

.team .member .social {
  margin-top: 15px;
}

.team .member .social a {
  color: #919191;
  transition: 0.3s;
}

.team .member .social a:hover {
  color: #03a4a3;
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  border-top: 3px solid #03a4a3;
  border-bottom: 3px solid #03a4a3;
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .info i {
  font-size: 20px;
  color: #03a4a3;
  float: left;
  width: 44px;
  height: 44px;
  background: #eaf6ed;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #222222;
}

.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #000000;
}

.contact .info .social-links {
  padding-left: 60px;
}

.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  margin-right: 10px;
}

.contact .info .social-links a:hover {
  background: #03a4a3;
  color: #fff;
}

.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background: #03a4a3;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  border-top: 3px solid #03a4a3;
  border-bottom: 3px solid #03a4a3;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input, .contact .php-email-form textarea {
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}

.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: #03a4a3;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type=submit] {
  background: #03a4a3;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #6ec083;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #fbfbfb;
  min-height: 40px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 66px;
  }
}
.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #3c3c3c;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #606060;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

#footer h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

#footer p {
  font-size: 15px;
  font-style: italic;
  padding: 0;
  margin: 0 0 40px 0;
}

#footer .social-links {
  margin: 0 0 40px 0;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #03a4a3;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #449d5b;
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  margin: 0 0 5px 0;
  font-weight: 500 !important;
}

#footer .credits {
  font-size: 13px;
}

.navbar-brand {
  padding-left: 0 !important;
}

.w-6 {
  width: 3.6em;
}

.h-6 {
  height: 3.6em;
}

.blog-entry .blog-img {
  display: block;
  height: 150px;
  width: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.blog-entry .text {
  position: relative;
  z-index: 0;
  width: 100%;
}

.blog .blog-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.blog-entry .text h3 {
  font-weight: 400;
  font-size: 1.4em;
}

.blog-entry .text .meta-wrap {
  width: 100%;
  display: block;
}

.blog-entry .text .meta-wrap .meta span {
  font-size: 14px;
  margin: 0 10px 0 0;
  color: #bfbfbf;
}

.blog-entry h3 a {
  color: #444444;
}

.blog-entry h3 a:hover {
  color: #03a4a3;
}

footer {
  padding: 4em 0 2em;
}

.footer-01 {
  background: #606060;
  color: #ECECEC;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.footer-01 a {
  color: #dadada;
}

.footer-01 p {
  color: rgba(255, 255, 255, 0.6);
}

.footer-01 .copyright {
  color: rgba(255, 255, 255, 0.3);
  color: #999999;
}

.footer-01 .footer-heading {
  font-size: 17px;
  margin-bottom: 30px;
  color: #ECECEC;
  font-weight: 500 !important;
  position: relative;
}

/*.footer-01 .footer-heading:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 40px;
  height: 2px;
  background: $primaryColor; }*/
.footer-01 ul.list-unstyled li a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-01 .block-21 .text .heading a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-01 .block-21 .meta > div a {
  color: #03a4a3;
}

.footer-01 .block-23 ul li {
  color: rgba(255, 255, 255, 0.6);
}

.footer-01 .block-23 ul li a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-01 .block-23 ul li .icon {
  color: rgba(255, 255, 255, 0.4);
}

.footer-01 .ftco-footer-social li a {
  color: #fff;
}

.block-21 .text .heading {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.block-23 ul li .icon, .block-23 ul li .text {
  display: table-cell;
  vertical-align: top;
}

.footer-01 .block-23 ul li .icon {
  color: rgba(255, 255, 255, 0.4);
}

.block-23 ul li .icon {
  width: 40px;
  font-size: 18px;
  padding-top: 2px;
}

.block-23 ul li .icon, .block-23 ul li .text {
  display: table-cell;
  vertical-align: top;
}

.footer-01 .block-23 ul li {
  color: rgba(255, 255, 255, 0.6);
}

.block-23 ul li, .block-23 ul li > a {
  display: table;
  line-height: 1.5;
  margin-bottom: 15px;
}

.footer-01 .block-21 .meta > div a {
  color: #03a4a3;
}

.block-21 .text .meta > div a {
  color: gray;
}

.block-21 .text .meta > div {
  display: inline-block;
  font-size: 12px;
  margin-right: 5px;
}

footer .meta {
  font-size: 0.8em;
}

.ftco-footer-social li {
  list-style: none;
  margin: 0 10px 0 0;
  display: inline-block;
}

.ftco-footer-social li a {
  height: 40px;
  width: 40px;
  display: block;
  border-radius: 50%;
  position: relative;
}

.ftco-footer-social li a span {
  position: absolute;
  font-size: 36px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.ftco-footer-social li a:hover {
  color: #fff;
}

.block-21 .img {
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 100% !important;
  background-position: center;
  background-size: cover;
}

.block-21 .text {
  width: calc(100% - 100px);
}

ul.footer-menu.list-unstyled .menu-item a {
  padding-left: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.photo-gallery .lSSlideWrapper.usingCss {
  background: #333333;
}
.photo-gallery ul.lSPager.lSGallery {
  background: #f9f9f9;
  width: 100% !important;
}

.dropdown-item.active, .dropdown-item:active {
  background: transparent !important;
}

.required-field label:after {
  content: "*";
  color: #db4a37;
  margin-left: 3px;
}

.contact-details {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #0b1825;
  color: #fff;
  position: relative;
}
.contact-details a {
  color: #fff;
}
.contact-details .contact-details-dark-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.contact-details .contact-details-info {
  z-index: 2;
  position: absolute;
  text-align: center;
  top: 15%;
  width: 80%;
}
.contact-details .contact-details-info-box {
  padding: 17%;
  text-align: left;
}

.contact-details-form {
  background: #f9f9f9;
  margin-bottom: 3em;
}

/* Homepage enquiry section — reuses the contact page's two-column layout
   (.contact-details info box + styled .contact-form) so it matches /contact/
   instead of reading as a bare form (client, 19 Jul 2026). Almost everything is
   inherited from the shared .contact-details / .booking-form rules above; this
   block only tops-and-tails the section's spacing and mirrors the contact page's
   shadowless, full-width form — the .inner-page.contact-page .form-wrap override
   does not reach the homepage, so we restate it here at .home-enquiry scope. */
.home-enquiry {
  padding-top: 1em;
}
.home-enquiry .form-wrap.booking-form {
  box-shadow: none;
  padding: 0;
  width: 100%;
}

.navbar-brand img {
  height: 70px;
  max-width: 260px;
  object-fit: contain;
}

.wp-pagenavi span.pages {
  background: #2db469;
  color: #fff;
}

#header .nav {
  width: 100%;
  justify-content: space-between;
}
#header .navbar-light .navbar-toggler {
  border-color: transparent;
}
#header .navbar-toggler:focus {
  box-shadow: none;
}
#header .navbar .active > a {
  color: #03a4a3 !important;
}

.slider-searchbox {
  z-index: 1;
  position: absolute;
  bottom: 20%;
  left: 12%;
  background: rgba(255, 255, 255, 0.89);
  padding: 20px 30px;
  color: #333 !important;
  width: 25%;
}
.slider-searchbox .slider-searchbox-introtext p {
  color: #333 !important;
  margin: 0 !important;
  text-align: center;
  font-size: 1.1em;
}
.slider-searchbox .form-control:focus {
  background-color: #fff;
  border-color: #ced4da !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #212529;
  outline: 0;
}
.slider-searchbox #search-destination::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: italic;
}
.slider-searchbox #search-destination::-moz-placeholder { /* Firefox 19+ */
  font-style: italic;
}
.slider-searchbox #search-destination:-ms-input-placeholder { /* IE 10+ */
  font-style: italic;
}
.slider-searchbox #search-destination:-moz-placeholder { /* Firefox 18- */
  font-style: italic;
}
.slider-searchbox .input-group {
  display: none;
}
.slider-searchbox .check-rates-btn {
  margin: 10px 0px;
}

.service-title {
  font-size: 1.5em;
  font-weight: 500 !important;
  text-transform: uppercase;
}

.service-title:after {
  content: "";
  background: #e97828;
  height: 1px;
  display: block;
  width: 30%;
  text-align: center;
  position: relative;
  left: 35%;
  margin-top: 10px;
}

.service-block {
  margin-bottom: 6em !important;
  box-shadow: 1px 1px 3px 1px #efefef;
  padding: 3em;
}

#book-ride {
  background: #F4F4F4;
}
#book-ride h4 {
  font-size: 1.3em;
  font-weight: 500 !important;
  margin-bottom: 20px;
}
#book-ride .book-img {
  margin: 21px;
}

.footer-heading-main {
  font-size: 1.4em;
  font-weight: 600 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #898585;
}

div.alphabet {
  clear: both;
  position: relative;
  margin: 0.5em 0;
  background: #dc7d3d;
  color: #ffffff;
  padding: 0.2em 0.3em;
}

@media screen and (max-width: 640px) {
  div.alphabet {
    text-align: center;
  }
}
div.alphabet ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

div.alphabet li {
  display: inline-block;
}

div.alphabet a {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: content-box;
  padding: 0.2em 0.1em;
  min-width: 1.3em;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
}

div.alphabet a:hover {
  color: #FFF !important;
  border: 1px solid #111;
  background-color: #585858;
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
}

div.alphabet a:active {
  outline: none;
  background-color: #2b2b2b;
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  box-shadow: inset 0 0 3px #111;
}

div.alphabet a.empty {
  color: #888 !important;
}

div.alphabet a.active,
div.alphabet a.active.empty {
  color: #333 !important;
  border: 1px solid #979797;
  background-color: #FFF;
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}

div.alphabet .alphabet-info-display {
  margin-right: 0.5em;
}

div.alphabet div.alphabet-info {
  position: absolute;
  border: 1px solid #111;
  background-color: #585858;
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
  border-radius: 2px;
  color: #FFF;
  margin-top: 0.2em;
  padding: 0.2em 0.4em;
  text-align: center;
  opacity: 0;
  z-index: 9999;
}

tr.alphabet-group, tr.alphabet-group:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

div.alphabet a {
  color: #fff !important;
}

div.alphabet a.empty span {
  color: #cbcbcb !important;
  opacity: 0.8;
}

table#table-rates thead td {
  font-weight: 600;
}

table.dataTable td, table.dataTable th {
  padding: 3px;
}

tr.alphabet-group, tr.alphabet-group:hover {
  background-color: rgb(220, 125, 61) !important;
  color: #fff;
}

div.alphabet .alphabet-info-display {
  vertical-align: middle;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: left !important;
}

div#table-rates_wrapper thead td {
  font-weight: 500;
}

.reservation-form label.form-label.d-block {
  font-weight: 500;
  margin-top: 10px;
}
.reservation-form .wpcf7-list-item {
  margin: 0px 20px 0px 0px !important;
}
.reservation-form .form-check {
  padding: 0 !important;
}
.reservation-form .card-header {
  font-weight: 500;
  color: #dc7d3d;
}

.slider-searchbox-introtext {
  font-size: 17px;
}

.navbar li a {
  color: #ffffff !important;
}

.mega-sub-menu li a {
  color: #000000 !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
  padding: 15px;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  padding: 0 !important;
}

p.copyright a:first-child:after {
  content: "|";
  margin-left: 5px;
  margin-right: 5px;
}

.textarea3row {
  height: 80px;
}

.book-menu.menu-item {
  display: none;
}

.text-section-block .header2 {
  font-size: 24px;
  text-align: center;
}

/* ===== Homepage intro quote — "B+" FINAL (Option 2 pull-quote on Desho paper + teal touch).
   Client-approved 5 Jul 2026. Scoped to intro_text only; giant mark = Playfair (front-page enqueue). ===== */
.text-section-block--intro_text {
  background-color: #f4eede;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.06'/%3E%3C/svg%3E"), radial-gradient(130% 130% at 50% 0%, #f8f2e4 0%, #efe6d1 100%);
  background-blend-mode: multiply, multiply, normal;
  border-top: 1px solid #e4dcc6;
  border-bottom: 1px solid #e4dcc6;
  padding: 40px 0;
}
.text-section-block--intro_text .container {
  max-width: 1000px;
}
.text-section-block--intro_text .col-lg-12 {
  display: grid;
  grid-template-columns: 92px 1fr 92px;  /* mark | text | mark — closing mark now sits BESIDE the text, not on a new row */
  gap: 24px;
  align-items: start;
}
.text-section-block--intro_text .col-lg-12::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 60px;
  line-height: 1;
  color: #232936;
  grid-column: 1;              /* left column, top of the text */
  margin-top: 6px;
}
.text-section-block--intro_text .col-lg-12::after {
  content: "\f10e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 60px;
  line-height: 1;
  color: #232936;
  grid-column: 3;              /* right column — same row as the text (no extra row -> no empty band below) */
  align-self: end;            /* drop to the bottom of the text, mirroring the top-aligned opening mark */
  justify-self: end;
}
.text-section-block--intro_text .header2--intro_text {
  grid-column: 2;             /* middle column, between the two marks (desktop + mobile share the 3-col grid) */
  margin: 0;
  text-align: left;
  font-size: 26px;
  line-height: 1.5;
  font-weight: 400 !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-variant-caps: small-caps;
  color: #232936;
}
@media (max-width: 640px) {
  .text-section-block--intro_text {
    padding: 36px 0;
  }
  .text-section-block--intro_text .col-lg-12 {
    grid-template-columns: 40px 1fr 40px; /* keep marks BESIDE the text; smaller so they fit narrow screens (no empty stacked rows) */
    gap: 10px;
  }
  .text-section-block--intro_text .col-lg-12::before {
    font-size: 44px;
    margin-top: 2px;
  }
  .text-section-block--intro_text .col-lg-12::after {
    font-size: 44px;
  }
  .text-section-block--intro_text .header2--intro_text {
    font-size: 21px;
  }
}

.features-section {
  padding: 62px 0 58px;
  background: linear-gradient(100deg, #04a3a2 0%, #036e6d 55%, #033f3f 100%);
}
.features-section .features-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.features-section .features-stat {
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.features-section .features-stat:first-child {
  border-left: none;
}
.features-section .features-stat__num {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.5px;
}
.features-section .features-stat__num sup {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.features-section .features-stat__num .fa-star {
  font-size: 24px;
  vertical-align: 6px;
  color: #ffe066;
}
.features-section .features-stat__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 14px;
}
.features-section .features-stat__sub {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 8px;
}
@media (max-width: 860px) {
  .features-section .features-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .features-section .features-stat:nth-child(3) {
    border-left: none;
  }
}
@media (max-width: 480px) {
  .features-section .features-stats {
    grid-template-columns: 1fr;
  }
  .features-section .features-stat {
    border-left: none;
  }
}

.separator-logo {
  text-align: center;
  margin-top: -20px;
}
.separator-logo img {
  background: #fff;
  padding-top: 8px;
  border-radius: 100%;
  overflow: hidden;
}
.separator-logo.features-section-separator {
  margin-top: -20px;
}

.featured-trip-block {
  position: relative;
  cursor: pointer;
  margin: 8px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 30, 50, 0.08);
  transition: transform .4s ease, box-shadow .4s ease;
}
.featured-trip-block .featured-trip-image {
  aspect-ratio: 5 / 4;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.featured-trip-block .featured-trip-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.22;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-trip-block .featured-trip-title a {
  color: #03a4a3;
  transition: color .3s ease;
}
.featured-trip-block .featured-trip-text {
  position: relative;
  z-index: 1;
  padding: 18px 62px 20px 18px;
  text-align: left !important;
  background: #fff;
  width: 100%;
  color: #15403f;
}
.featured-trip-block .featured-trip-duration i {
  margin-right: 2px;
}
.featured-trip-block .featured-trip-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef6f6;
  color: #03a4a3;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all .35s ease;
}
/* Arrow glyph is drawn from a self-contained inline-SVG mask (not the external Font
   Awesome <i>), so the chip is never empty if the FA kit fails to render the icon.
   The mask is filled with currentColor, so it inherits the chip's teal (rest) /
   white (hover) state automatically. */
.featured-trip-block .featured-trip-arrow i {
  display: none;
}
.featured-trip-block .featured-trip-arrow::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.8 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.8 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.featured-trip-block:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 38px rgba(20, 30, 50, 0.18);
}
.featured-trip-block:hover .featured-trip-image {
  transform: scale(1.08);
}
.featured-trip-block:hover .featured-trip-title a {
  color: #027a79;
}
.featured-trip-block:hover .featured-trip-arrow {
  opacity: 1;
  transform: translateX(0);
  background: #03a4a3;
  color: #fff;
}

@media (max-width: 767.98px) {
  .featured-trip-block .featured-trip-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

.featured-trip-difficulty {
  margin-left: 10px;
}

.featured-trip-text-container {
  font-weight: 500;
  font-size: 17px;
  color: #e0a800;
  margin: 0 !important;
}
.featured-trip-text-container .priceduration-separator:before {
  height: 32px;
  background: #e0a800;
  position: absolute;
  width: 1px;
  content: "";
}
.featured-trip-text-container .priceduration-separator {
  margin: 0px 15px;
  position: relative;
}

.featured-trip-route {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  color: #6b7280;
}
.featured-trip-route i {
  color: #03a4a3;
  font-size: 15px;
  flex: 0 0 auto;
}
.featured-trip-route span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-trip-block.fixed-departure-tours:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  padding: 5px 20px;
  background-color: #00d5d4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 13px;
  content: "FIXED DEPARTURE";
  font-weight: 500;
}

.team-section .team-container {
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
}
.team-section .team-wrapper {
  position: absolute;
  bottom: 20px;
  width: 100%;
}
.team-section .btn-outline-light:hover {
  transition: 0.2s all ease;
  text-decoration: none;
  color: #fff;
  background: #00d5d4;
}
.team-section .btn-outline-light {
  background: #03a4a3;
  border: 2px solid #fff;
  padding: 14px;
  color: #fff;
  margin: 20px;
  display: inline-block;
  min-width: 150px;
  text-transform: uppercase;
  border-radius: 0 !important;
}

.booking-form input[type=text], .booking-form input[type=email], .booking-form textarea {
  border: 1px solid #dbdbdb;
  background: #fbfbfb;
  border-radius: 5px;
  color: #000000 !important;
  padding: 8px 5px;
  width: 95%;
}
.booking-form textarea {
  height: 150px;
}
.booking-form .form-field {
  margin: 10px 0px;
}

.TA_selfserveprop > #CDSWIDSSP {
  width: 100% !important;
}

footer {
  background: #f2f2ef;
  color: #989898;
  border: none !important;
}
footer .affiliations img {
  max-height: 60px;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  margin-right: 20px;
  margin-bottom: 20px;
}
footer .footer-menu {
  text-align: center;
  border-bottom: 1px solid #dadada;
  border-top: 1px solid #dadada;
  padding: 10px 0px 0px;
}
footer .footer-menu ul li {
  display: inline;
}
footer .footer-menu ul li a {
  text-transform: uppercase;
  padding: 10px;
  font-size: 17px;
}
footer .footer-menu ul li a:hover {
  text-decoration: none;
  color: #00d5d4;
  transition: 0.3s all;
}
footer .footer-bottom {
  padding: 1em 3em 3em 3em;
}
footer .copyright {
  float: left;
}
footer .right-reserved {
  float: right;
  display: inline;
  color: #000;
}
footer .right-reserved a {
  margin-left: 2em;
  color: #989898 !important;
}

.social-media-links ul li a i {
  background: #0cc;
  color: #fff;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 100%;
}

.social-media-links ul li {
  display: inline;
  margin: 10px;
}

.social-media-links {
  margin: 20px 0 0px;
  text-align: center;
}

.cd-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: inline-block;
  height: 40px;
  width: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background: url(../images/cd-top-arrow.svg) no-repeat center 50%;
  background-color: #db4a37;
  opacity: 0.6;
}

.text-replace {
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
}

.cd-top:hover {
  opacity: 1;
}

.js .cd-top {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.3s;
}
.js .cd-top--is-visible {
  visibility: visible;
  opacity: 1;
}
.js .cd-top--fade-out {
  opacity: 0.5;
}
.js .cd-top:hover {
  background-color: var(--cd-color-3);
  opacity: 1;
}

.cd-top--is-visible {
  visibility: visible;
  opacity: 1;
}

.cd-top--fade-out {
  opacity: 0.5;
}

.tour_days .tour_day_item {
  position: relative;
  padding-bottom: 50px;
  color: #000;
}
.tour_days .tour_day_item .tdi_desc {
  text-align: center;
  width: 80%;
  margin: 0px auto;
  line-height: 34px;
  font-size: 20px !important;
}
.tour_days .logomark {
  display: block;
  width: 71px;
  height: 76px;
  background-image: url(../images/btclogomark.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: -40px;
  margin-left: -35.5px;
  background-color: #fff;
  border-radius: 100%;
  margin-top: 10px;
  background-position: center center;
  text-align: center;
}
.tour_days .tour_day_item_banner {
  width: 100%;
  height: 70vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f8f8f8;
}
.tour_days h1 {
  text-align: center;
  padding-top: 50px;
}

.main-container .page-heading {
  margin-bottom: 1em;
}

.top-menu-cover {
  position: relative;
  height: 90vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.top-menu-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.15) 100%);
}
.top-menu-cover img {
  width: 100%;
  max-width: 100%;
}
.top-menu-cover .post-title {
  position: absolute;
  top: 44%;
  width: 100%;
  text-align: center;
  font-size: 3em;
  color: #fff;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.55);
}

.tour-mesc-1 {
  text-align: center;
  color: #000;
  font-size: 20px;
}

.tour-mesc-1 > div {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 30px;
}

.season_price {
  width: 300px;
  margin: 0 auto;
  margin-top: 15px;
  background-color: #33cccc;
}

.season_price table th,
.season_price table td {
  text-align: center;
  background-color: #33cccc;
  color: #fff;
  font-size: 20px;
}

.tour-content-wrapper {
  position: relative;
  width: 1080px;
  margin: 0 auto;
  padding-top: 50px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.tour-content-wrapper h3 {
  color: #eb8900;
  margin-bottom: 15px;
}

.tour-content {
  text-align: justify;
  display: block;
}

.tour-content p {
  margin-top: 0px;
}

.tour-pricing ul li {
  list-style-type: disc;
}

.quick-description-wrap > h1 {
  color: #0cc;
  margin-bottom: 30px;
  margin-top: 20px;
}

.quick-description img {
  width: 48px;
}

.quick-description-wrap {
  margin: 0;
}

.quick-description-wrap {
  text-align: center;
  width: 100%;
}

.tour-pricing.price-inclusion li {
  font-size: 17px;
}

.inclusion-title {
  background: #0cc;
  padding: 40px;
}

.inclusion-title h1 {
  color: #fff;
}

.tour-pricing.price-inclusion h3 {
  font-size: 1.3em;
  color: #0cc;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 30px;
}

.price-inclusion ul li:before, .price-exclusion ul li:before {
  background: #0cc;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 100%;
  font-size: 20px;
  color: #fff !important;
  padding: 5px;
  margin-right: 14px;
}

.tour-pricing.price-inclusion li {
  font-size: 17px;
}

.tour-pricing.price-inclusion ul {
  padding: 0;
}

.tour-pricing {
  display: inline-block;
  float: left;
  width: 45%;
  margin-right: 5%;
}

.inclusion-title {
  text-align: center;
  margin-bottom: 3em;
}

.inclusion-wrap {
  padding-bottom: 2em;
}

.tour-pricing ul li {
  list-style-type: none;
  font-size: 16px;
}

.price-inclusion ul li:before {
  content: "\f00c";
  color: #698eb3;
  padding: 8px;
}

.price-exclusion ul li:before {
  content: "\f00d";
  color: #ff6550;
  padding: 8px 12px;
}

.price-inclusion ul li:before, .price-exclusion ul li:before {
  font-family: fontawesome;
  font-size: 14px;
  margin-right: 5px;
}

.tour-pricing ul {
  margin: 0px;
  font-size: 16px;
  padding: 0px;
}

.tour-pricing h3 {
  text-transform: uppercase;
  font-size: 18px;
}

.tour-pricing.price-inclusion h3, .tour-pricing.price-exclusion h3 {
  font-size: 1.3em;
  color: #0cc;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 30px;
}

.quick-description {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}

.quick-description-wrap p {
  line-height: 16px;
}

.inclusion-title {
  background: #0cc;
  padding: 40px;
}

.inclusion-title {
  text-align: center;
  margin-bottom: 3em;
}

.quick-description-wrap > h1 {
  color: #03a4a3;
  margin-bottom: 30px;
  margin-top: 20px;
  text-transform: uppercase;
}

.tour_day_item h2,
.tour_day_item h3 {
  text-align: center;
  color: #03a4a3;
  padding-top: 60px;
}

.tour_day_item .tdi_desc {
  text-align: center;
  width: 80%;
  margin: 0px auto;
  font-weight: 400 !important; /* was 100 — Poppins Thin read as washed-out (client, 15 Jul 2026) */
  line-height: 34px;
  font-size: 20px !important;
}

.l_container {
  position: relative;
  margin-bottom: 50px;
  text-align: center;
}

.inclusion-wrap {
  margin: 0 auto;
  width: 90%;
}

/* Enquire heading — plain section title (unified with .tour-sec-title, teal band retired 15 Jul 2026),
   width-aligned with the .form-wrap booking form below it. */
.book-package-title {
  width: 1080px;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 0 2em;
}

.tour-page .form-wrap {
  width: 1080px;
  margin: 0 auto;
  max-width: 100%;
  padding: 2em;
}

.inner-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inner-page ol li,
.inner-page ul li {
  font-size: 20px;
  line-height: 32px;
}

.quick-description span {
  font-weight: 400;
}

.mega-fb-menu, .mega-fb-menu a, .mega-insta-menu, .mega-insta-menu a {
  padding: 0 !important;
  margin: 0 !important;
}

.form-wrap.booking-form {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.09);
  padding: 20px 2px 20px 20px;
  width: 90%;
}

.inner-page.contact-page .form-wrap.booking-form {
  box-shadow: none;
  padding: 0;
  width: 100%;
}

.tour-content {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.tour-content h3 {
  color: #00d5d4;
  margin-bottom: 30px;
  margin-top: 30px;
  text-transform: uppercase;
}

/* Route line: upright, not italic — client asked for the slant to go, 10 Aug 2026. */
.tour-route {
  margin: 15px 0px;
  color: #03a4a3;      /* T6: teal route line */
  font-weight: 600;    /* semibold for emphasis */
}
.tour-route i {
  margin-right: 8px;   /* gap after the fa-location-dot pin before the route text */
}

.home .form-field.tour-package-name, .contact-page .form-field.tour-package-name, .home-enquiry .form-field.tour-package-name {
  display: none;
}

.at4-follow-outer.addthis-smartlayers {
  display: none;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu {
  float: right;
}

.mega-fb-menu a:before, .mega-insta-menu a:before {
  font-size: 24px !important;
}

.mega-whapp-menu a:before {
  font-size: 34px !important;
  color: #4cc75a !important;
  background: #fff !important;
  border-radius: 100%;
  width: 34px !important;
  line-height: 34px !important;
  height: 34px !important;
  text-align: center;
}

.text-center.view-more-btn {
  position: relative;
  width: 100%;
  top: -40px;
}

span.wpcf7-not-valid-tip {
  display: block;
  color: #db4a37;
}

/**** Media Queries -- RESPONSIVE **/
@media (min-width: 1400px) {
  .navbar-brand img {
    height: 100px;
  }
  .navbar li a {
    font-size: 16px;
  }
}
@media (max-width: 1200px) {
  a.btn.btn-primary.btn-sm.btn-custom {
    padding: 6px 15px !important;
    min-width: auto !important;
  }
  /*.navbar-brand img {
    height: 40px;
  }

  .navbar li a {
    font-size: 12px;
  }*/
  .quick-description p {
    line-height: 20px;
    margin-bottom: 3px;
    font-size: 18px;
  }
  .quick-description {
    width: 40%;
    margin-bottom: 19px;
  }
}
@media (max-width: 1200px) and (min-width: 992px) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: 14px;
  }
}
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item {
  padding: 5px;
}

@media (min-width: 991px) {
  .slider-description {
    width: 50%;
    font-size: 20px;
  }
  #mega-menu-wrap-main-menu #mega-menu-main-menu {
    position: relative;
    top: -15px;
  }
}
@media (max-width: 991px) {
  #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background: #03a4a3;
  }
  #mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu {
    background: #ffffff;
  }
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
    color: #000000 !important;
  }
  .mega-fb-menu, .mega-insta-menu {
    display: inline-block !important;
    padding-bottom: 16px !important;
  }
  #navbar {
    position: relative;
  }
  #header .nav {
    position: relative;
  }
  #navbar {
    position: absolute;
    right: 20px;
    top: 20px;
    width: calc(100% - 100px);
  }
  #mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu {
    width: 100%;
  }
  .book-now-header-btn {
    display: none;
  }
  .navbar-brand img {
    height: 60px;
  }
  .book-menu.menu-item {
    display: block;
  }
  .booking-form input[type=text], .booking-form input[type=email], .booking-form textarea {
    width: 95%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .slider-searchbox {
    width: 60% !important;
    left: 5% !important;
  }
}
@media (max-width: 991px) {
  .contact-details .contact-details-info {
    z-index: 9;
    position: relative;
    text-align: center;
    top: 5%;
    width: 100%;
    color: #fff;
  }
  .navbar-collapse.collapse.show {
    background: #fff;
    padding: 15px;
  }
  .navbar-collapse.collapse.show #menu-main-menu, .navbar-collapse.collapse.show #menu-main-menu-dutch {
    display: block !important;
  }
  /*.navbar-brand img {
    height: 40px;
  }*/
}
@media (max-width: 768px) {
  .slider-searchbox {
    width: 90% !important;
    left: 5% !important;
  }
  .quick-description p {
    line-height: 20px;
    margin-bottom: 3px;
    font-size: 18px;
  }
  .quick-description {
    width: 40%;
    margin-bottom: 19px;
  }
  .quick-description span {
    font-weight: 400;
  }
  .inclusion-wrap {
    width: 100%;
  }
  .tour-pricing {
    width: 100%;
    padding-left: 5%;
    margin-bottom: 20px;
  }
  .tour-page .form-wrap {
    width: 100%;
    padding: 10px;
  }
}
@media (max-width: 600px) {
  #topbar {
    font-size: 11px;
  }
  .tour-page .form-wrap {
    width: 100%;
    padding: 10px;
  }
  footer .footer-bottom {
    padding: 0;
    font-size: 12px;
    background: #f2f2ef;
    min-height: 30px;
    text-align: center;
  }
  footer .footer-bottom div {
    float: none;
  }
  .social-media-links ul li {
    margin: 2px;
  }
  ul#menu-footer-menu {
    padding: 0;
    margin: 0;
  }
  footer .affiliations img {
    max-height: 40px;
  }
}
/*--------------------------------------------------------------
# Travel Resources page — sticky "On this page" sidebar (TOC)
--------------------------------------------------------------*/
.travel-resources-page .resource-layout {
  margin-top: 1.5rem;
}
.travel-resources-page .tour_days [id^=res-] {
  scroll-margin-top: 130px;
}
.travel-resources-page .resource-toc {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1.25rem 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
}
.travel-resources-page .resource-toc__heading {
  font-size: 14px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #03a4a3;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eee;
}
.travel-resources-page .resource-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.travel-resources-page .resource-toc li {
  margin: 0;
}
.travel-resources-page .resource-toc a {
  display: block;
  padding: 0.5rem 0.65rem;
  font-size: 15px;
  line-height: 1.35;
  color: #444;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.travel-resources-page .resource-toc a:hover {
  color: #03a4a3;
  background: #f4fbfb;
}
.travel-resources-page .resource-toc a.is-active {
  color: #03a4a3;
  font-weight: 700;
  background: #f0fafa;
  border-left-color: #03a4a3;
}
@media (max-width: 991.98px) {
  .travel-resources-page .resource-toc {
    position: static;
    max-height: none;
    margin-bottom: 2rem;
  }
}

/*--------------------------------------------------------------
# Festival Calendar — expandable accordion rows (ACF `festivals` repeater)
# Gold #f8c100 date badge (single accent) · teal #03a4a3 primary + CTA buttons · Poppins (body).
--------------------------------------------------------------*/
.festival-calendar {
  margin-top: 1.5rem;
}
.festival-calendar .mgroup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 14px;
}
.festival-calendar .mgroup:first-of-type {
  margin-top: 0;
}
.festival-calendar .mgroup .chip {
  flex: none;
  background: #03a4a3;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 7px 18px;
}
.festival-calendar .mgroup .rule {
  flex: 1;
  height: 1px;
  background: #e9edf1;
}
.festival-calendar .frow {
  border: 1px solid #e9edf1;
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
  transition: box-shadow 0.25s, border-color 0.25s;
  overflow: hidden;
}
.festival-calendar .frow:hover {
  box-shadow: 0 8px 22px rgba(20, 30, 50, 0.09);
}
.festival-calendar .frow.open {
  border-color: #d5dbe1;
  box-shadow: 0 10px 26px rgba(20, 30, 50, 0.11);
}
.festival-calendar .frow-head {
  display: grid;
  grid-template-columns: 66px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.festival-calendar .datebadge {
  width: 66px;
  border-radius: 11px;
  background-color: #f8c100;
  color: #4a3405;
  text-align: center;
  padding: 9px 4px 10px;
  box-shadow: 0 3px 8px rgba(248, 193, 0, 0.35);
}
.festival-calendar .datebadge .mm {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.festival-calendar .datebadge .dd {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 1px;
}
.festival-calendar .frow-main {
  min-width: 0;
}
.festival-calendar .frow-main .fname {
  font-size: 20px;
  font-weight: 600;
  color: #232936;
  line-height: 1.25;
}
.festival-calendar .frow-main .floc {
  font-size: 13px;
  color: #5b6472;
  margin-top: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.festival-calendar .frow-main .floc i {
  color: #03a4a3;
  margin-right: 7px;
}
.festival-calendar .frow-main .floc .dot {
  color: #c7ced6;
  margin: 0 7px;
}
.festival-calendar .frow-main .floc .fdur {
  color: #79828f;
}
.festival-calendar .addbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  background-color: #03a4a3;
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 9px rgba(3, 164, 163, 0.3);
}
.festival-calendar .addbtn i {
  font-size: 14px;
}
.festival-calendar .addbtn:hover {
  background-color: #028c8b;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(3, 164, 163, 0.38);
}
.festival-calendar .addbtn.added {
  background-color: #016d6c;
  color: #fff;
  box-shadow: 0 3px 9px rgba(1, 109, 108, 0.3);
}
.festival-calendar .addbtn .addbtn__ic-done {
  display: none;
}
.festival-calendar .addbtn.added .addbtn__ic-add {
  display: none;
}
.festival-calendar .addbtn.added .addbtn__ic-done {
  display: inline-block;
}
.festival-calendar .chev {
  /* Plus toggle — bare glyph, no grey circle; enlarged + teal ink (client request) */
  flex: none;
  width: 34px;
  height: 34px;
  color: #027a79;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.3s, color 0.2s;
}
.festival-calendar .frow:hover .chev {
  color: #03a4a3;
}
.festival-calendar .frow.open .chev {
  transform: rotate(45deg); /* + becomes × */
  color: #03a4a3;
}
.festival-calendar .fbody {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.38s ease, opacity 0.3s ease;
}
.festival-calendar .frow.open .fbody {
  opacity: 1;
}
.festival-calendar .fbody-inner {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 26px;
  padding: 6px 18px 22px 18px;
  align-items: stretch;
}
.festival-calendar .fphoto {
  position: relative;
  min-height: 158px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, #03a4a3 0%, #045b5b 60%, #034b4b 100%);
  box-shadow: 0 6px 16px rgba(4, 60, 60, 0.22);
}
.festival-calendar .fphoto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.16), transparent 46%), radial-gradient(circle at 12% 88%, rgba(248, 193, 0, 0.24), transparent 44%);
}
.festival-calendar .fphoto .pic {
  position: relative;
  font-size: 52px;
  opacity: 0.9;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}
.festival-calendar .fphoto .plabel {
  position: relative;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 0 16px;
  text-align: center;
}
.festival-calendar .fphoto--real {
  background: none;
  box-shadow: 0 6px 16px rgba(4, 60, 60, 0.18);
}
.festival-calendar .fphoto--real::before {
  display: none;
}
.festival-calendar .fphoto--real img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.festival-calendar .fwrite {
  display: flex;
  flex-direction: column;
}
.festival-calendar .fwrite h4 {
  font-size: 17px;
  font-weight: 700;
  color: #232936;
  margin-bottom: 9px;
}
.festival-calendar .fwrite p {
  font-size: 20px;
  line-height: 32px;
  color: #000000;
}
.festival-calendar .fwrite .wmeta {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.festival-calendar .fwrite .wmeta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: #4a5561;
  background: #f3f6f8;
  border-radius: 8px;
  padding: 7px 13px;
}
.festival-calendar .fwrite .wmeta i {
  color: #03a4a3;
}
.festival-calendar__footnote {
  margin-top: 22px;
  font-size: 12.5px;
  color: #79828f;
  display: flex;
  align-items: center;
  gap: 9px;
}
.festival-calendar__footnote i {
  color: #e0a800;
}
@media (max-width: 680px) {
  .festival-calendar .frow-head {
    grid-template-columns: 56px 1fr auto;
    gap: 13px;
    row-gap: 12px;
  }
  .festival-calendar .datebadge {
    width: 56px;
  }
  .festival-calendar .addbtn {
    grid-column: 2/4;
    justify-content: center;
    width: 100%;
  }
  .festival-calendar .chev {
    grid-row: 1;
    grid-column: 3;
  }
  .festival-calendar .fbody-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .festival-calendar .fphoto {
    min-height: 130px;
  }
}

/*--------------------------------------------------------------
# Tour detail — facts strip under the hero photo + inclusion feature chips
# Gold #f8c100 facts icons + Book Now · teal #03a4a3 inclusion chips · Poppins.
# (Replaces the old PNG-icon .quick-description-wrap markup in single-tour.php.)
--------------------------------------------------------------*/
/* facts strip — lifts onto the bottom edge of the hero */
.tour-facts-wrap {
  background: #f6f8f9;
  border-top: 1px solid #e6eaee;
  border-bottom: 1px solid #e6eaee;
  margin: 0 0 8px;
}
.tour-facts {
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px 24px;
}
.tour-facts__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.tour-facts__cols--single {
  grid-template-columns: 1fr;
}
.tour-facts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 22px;
  align-content: start;
}
.tour-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tour-fact__ic {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(248, 193, 0, 0.13);
  color: #e0a800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-fact__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.tour-fact__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #79828f;
  margin-bottom: 2px;
  line-height: 1.2;
}
.tour-fact__value {
  font-size: 15.5px;
  font-weight: 700;
  color: #232936;
  line-height: 1.35;
}
/* .tour-highlights__title inherits .tour-sec-title — one shared section-title style */
.tour-highlights__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tour-highlights__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 20px;
  line-height: 1.6;
  padding: 6px 0;
  color: #000000;
}
.tour-highlights__list li i {
  flex: none;
  color: #03a4a3;
  font-size: 18px;
  line-height: 32px;
}
/* facts moved into the booking card → highlights are the band's sole content: centre a max-width column (client 19 Jul 2026) */
.tour-facts__cols--center {
  justify-items: center;
}
.tour-facts__cols--center .tour-highlights {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.tour-facts__cols--center .tour-highlights__list {
  display: inline-block;
  text-align: left;
}

@media (max-width: 860px) {
  .tour-facts__cols {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 560px) {
  .tour-facts__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Trip Inclusions — split card per the approved tour-detail-final sample:
   included (teal checks) | not included (red crosses, warm tint). Squared corners per sitewide direction. */
.tour-ie {
  border: 1px solid #e6eaee;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.tour-ie--single {
  grid-template-columns: 1fr;
}
.tour-ie__half {
  padding: 30px 32px;
  text-align: left;
}
.tour-ie__half--no {
  border-left: 1px solid #e6eaee;
  background: #fbf9f6;
}
.tour-ie h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: #232936;
  margin: 0 0 16px;
}
.tour-ie__half--ok h3 i {
  color: #03a4a3;
}
.tour-ie__half--no h3 i {
  color: #c94f4f;
}
.tour-ie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tour-ie li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 20px;
  line-height: 1.6;
  padding: 6px 0;
  color: #000000;
}
.tour-ie li i {
  flex: none;
  font-size: 16px;
  line-height: 32px;
}
.tour-ie__half--ok li i {
  color: #03a4a3;
}
.tour-ie__half--no li i {
  color: #c94f4f;
}
@media (max-width: 800px) {
  .tour-ie {
    grid-template-columns: 1fr;
  }
  .tour-ie__half--no {
    border-left: none;
    border-top: 1px solid #e6eaee;
  }
}

/* anchor target for the facts-strip Book Now (clear the fixed header) */
#tour-enquire {
  scroll-margin-top: 130px;
}

/* =========================================================================
 * Feature #2 — Fixed-departure ROW-LIST (content-fixeddepartures.php).
 * Scoped to .dep2* / .ttype / .ticon selectors ONLY — never touches the
 * shared .featured-trip-block card. Teal #03a4a3 primary, gold #f8c100 accent.
 * ========================================================================= */
.fixed-dep-section { padding: 10px 0 40px; }
.fixed-dep-section .container { max-width: 1180px; }

.dep2-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.dep2-head__label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #79828f; }
.dep2-months { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 15px; font-weight: 600; }
.dep2-months a { color: #03a4a3; cursor: pointer; padding: 4px 8px; border-radius: 6px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.dep2-months a:hover { background: #e9f6f6; }
.dep2-months a.dim { color: #c3c9d1; pointer-events: none; }
.dep2-months a.on { background: #03a4a3; color: #fff; }
.dep2-months a.on:hover { background: #027a79; }
.dep2-months .sep { color: #d6dbe1; font-weight: 400; }

.dep2-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 26px; padding: 14px 20px; background: #f0faf9; border: 1px solid #d6ecec; border-radius: 12px; }
.dep2-legend__title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #027a79; }
.dep2-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #232936; }
.dep2-legend__item i { color: #03a4a3; font-size: 15px; width: 18px; text-align: center; }

.dep2 { display: grid; grid-template-columns: 170px 1fr auto auto; gap: 24px; align-items: center; background: #fff; border: 1px solid #e6eaee; border-radius: 14px; padding: 18px 26px 18px 18px; margin-bottom: 16px; transition: box-shadow 0.3s, transform 0.3s; }
.dep2:hover { box-shadow: 0 10px 26px rgba(20, 30, 50, 0.12); transform: translateY(-3px); }
.dep2.dep2--hidden { display: none; }
.dep2__thumb { display: block; width: 170px; height: 120px; border-radius: 10px; background-size: cover; background-position: center; background-color: #e9eef1; }
.dep2__title { font-size: 18.5px; font-weight: 600; color: #232936; margin: 0; line-height: 1.3; }
.dep2__title a { color: #232936; text-decoration: none; }
.dep2__title a:hover { color: #03a4a3; }
.dep2__meta { display: flex; gap: 22px; align-items: center; margin-top: 9px; font-size: 14px; color: #232936; font-weight: 500; flex-wrap: wrap; }
.dep2__meta span { display: inline-flex; align-items: center; }
.dep2__meta i { color: #03a4a3; margin-right: 7px; }

.ttype { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; text-align: center; }
.ttype .ticon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; background: #e9f6f6; border-radius: 11px; }
.ttype .ticon i { color: #027a79; font-size: 20px; line-height: 1; }
.ttype .tlabel { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #79828f; line-height: 1.3; }

.dep2__acts { display: flex; flex-direction: row; gap: 10px; }
.dep2-btn { display: inline-block; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; padding: 11px 22px; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; transition: background 0.2s; }
.dep2-btn--teal { background: #03a4a3; color: #fff; }
.dep2-btn--teal:hover { background: #027a79; color: #fff; }
.dep2-btn--gold { background: #f8c100; color: #4a3600; }
.dep2-btn--gold:hover { background: #dfac00; color: #4a3600; }

.dep2-empty { display: none; text-align: center; color: #79828f; font-size: 14.5px; padding: 34px 0 10px; }
.dep2-empty a { color: #03a4a3; }

@media (max-width: 940px) {
  .dep2 { grid-template-columns: 1fr; }
  .dep2__thumb { width: 100%; height: 180px; }
  .ttype { flex-direction: row; justify-content: flex-start; min-width: 0; text-align: left; }
  .dep2__acts { flex-wrap: wrap; }
}

/* ===== Blog (CPT: story) — listing + single ===== */
/* Reproduces samples/blog-page/option-2.html, recolored teal-only (client rejected gold). */
/* Teal #03a4a3 · teal-dark #027a79 · ink #232936 · muted #79828f · hairline #e6eaee. */

/* --- Shared card bits (archive grid + single "More stories" grid) --- */
.blog-page .blog-badge,
.blog-single .blog-badge { display: inline-block; background: #03a4a3; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.blog-page .blog-meta,
.blog-single .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 12.5px; color: #79828f; font-weight: 500; }
.blog-page .blog-meta i,
.blog-single .blog-meta i { color: #03a4a3; margin-right: 6px; }

/* --- Shared grid + cards --- */
.blog-page .blog-grid,
.blog-single .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 32px 0 8px; }
.blog-page .blog-card,
.blog-single .blog-card { background: #fff; border: 1px solid #e6eaee; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.blog-page .blog-card:hover,
.blog-single .blog-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(35, 41, 54, 0.12); }
.blog-page .blog-card__img,
.blog-single .blog-card__img { position: relative; height: auto; aspect-ratio: 1 / 1; min-height: 260px; background-size: cover; background-position: center; }
.blog-page .blog-card__img .blog-badge,
.blog-single .blog-card__img .blog-badge { position: absolute; left: 20px; bottom: -13px; box-shadow: 0 4px 10px rgba(3, 164, 163, 0.30); }
.blog-page .blog-card__body,
.blog-single .blog-card__body { padding: 30px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-page .blog-card__body .blog-meta,
.blog-single .blog-card__body .blog-meta { margin-bottom: 10px; }
.blog-page .blog-card__title,
.blog-single .blog-card__title { font-size: 22px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.blog-page .blog-card__title a,
.blog-single .blog-card__title a { transition: color 0.2s; }
.blog-page .blog-card__title a:hover,
.blog-single .blog-card__title a:hover { color: #03a4a3; }
.blog-page .blog-card__excerpt,
.blog-single .blog-card__excerpt { font-size: 20px; line-height: 1.6; color: #000000; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-page .blog-readmore,
.blog-single .blog-readmore { margin-top: auto; font-size: 13px; font-weight: 600; color: #03a4a3; display: inline-flex; align-items: center; gap: 7px; transition: gap 0.2s ease, color 0.2s ease; }
.blog-page .blog-readmore:hover,
.blog-single .blog-readmore:hover { gap: 11px; color: #027a79; }
.blog-page .blog-readmore i,
.blog-single .blog-readmore i { font-size: 11px; }

/* --- Archive hero --- */
.blog-page .blog-hero { position: relative; min-height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; }
.blog-page .blog-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 24, 34, 0.52) 0%, rgba(18, 24, 34, 0.74) 100%); }
.blog-page .blog-hero__inner { position: relative; z-index: 1; padding: 56px 24px; }
.blog-page .blog-hero__crumb { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; }
.blog-page .blog-hero__crumb a { color: rgba(255, 255, 255, 0.82); transition: color 0.2s; }
.blog-page .blog-hero__crumb a:hover { color: #fff; }
.blog-page .blog-hero__crumb .sep { margin: 0 10px; color: #03a4a3; }
.blog-page .blog-hero__crumb .current { color: #03a4a3; }
.blog-page .blog-hero__title { font-size: 44px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 10px; }
.blog-page .blog-hero__title .accent { color: #03a4a3; }
.blog-page .blog-hero__tagline { font-size: 15.5px; font-weight: 400; color: rgba(255, 255, 255, 0.88); }

/* --- Filter pills --- */
.blog-page .blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 34px 0 6px; }
.blog-page .blog-pill { border: 1px solid #e6eaee; background: #fff; color: #232936; font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
.blog-page .blog-pill:hover { border-color: #03a4a3; color: #03a4a3; }
.blog-page .blog-pill.is-active { background: #03a4a3; border-color: #03a4a3; color: #fff; box-shadow: 0 6px 14px rgba(3, 164, 163, 0.28); }

/* --- Featured card --- */
.blog-page .blog-featured { display: flex; background: #fff; border: 1px solid #e6eaee; border-radius: 14px; overflow: hidden; margin: 34px 0 8px; box-shadow: 0 4px 18px rgba(35, 41, 54, 0.06); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.blog-page .blog-featured:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(35, 41, 54, 0.12); }
.blog-page .blog-featured__img { flex: 0 0 55%; min-height: 380px; background-size: cover; background-position: center; }
.blog-page .blog-featured__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 44px 42px; }
.blog-page .blog-featured__body .blog-badge { margin-bottom: 16px; }
.blog-page .blog-featured__body .blog-meta { margin-bottom: 14px; }
.blog-page .blog-featured__title { font-size: 26px; font-weight: 700; line-height: 1.35; margin-bottom: 14px; }
.blog-page .blog-featured__title a { transition: color 0.2s; }
.blog-page .blog-featured__title a:hover { color: #03a4a3; }
.blog-page .blog-featured__excerpt { font-size: 20px; line-height: 1.6; color: #000000; margin-bottom: 26px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-page .blog-btnread { display: inline-flex; align-items: center; gap: 9px; background: #03a4a3; color: #fff; font-size: 14px; font-weight: 600; padding: 13px 28px; border-radius: 8px; border: none; transition: background 0.2s ease, transform 0.2s ease; }
.blog-page .blog-btnread:hover { background: #027a79; transform: translateY(-1px); }
.blog-page .blog-btnread i { font-size: 12px; }

/* --- Grid items hidden until "Load more" --- */
.blog-page .blog-item.is-extra { display: none; }

/* --- Empty state --- */
.blog-page .blog-empty { display: none; text-align: center; color: #79828f; font-size: 15px; padding: 70px 0 40px; }
.blog-page .blog-empty i { display: block; font-size: 30px; color: #e6eaee; margin-bottom: 14px; }
.blog-page .blog-empty.is-show { display: block; }

/* --- Load more --- */
.blog-page .blog-loadmore-wrap { text-align: center; padding: 38px 0 78px; }
.blog-page .blog-loadmore { background: #fff; color: #03a4a3; border: 2px solid #03a4a3; font-family: inherit; font-size: 14px; font-weight: 600; padding: 13px 34px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.blog-page .blog-loadmore:hover { background: #03a4a3; color: #fff; box-shadow: 0 8px 18px rgba(3, 164, 163, 0.28); }
.blog-page .blog-loadmore i { margin-right: 9px; font-size: 12px; }

/* --- Single story: hero (bg image set inline by template via --hero-img) --- */
.blog-single .blog-single__hero { position: relative; min-height: 360px; background-image: var(--hero-img); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; }
.blog-single .blog-single__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 24, 34, 0.35), rgba(18, 24, 34, 0.78)); }
.blog-single .blog-single__hero-inner { position: relative; z-index: 1; max-width: 860px; padding: 64px 24px; }
.blog-single .blog-single__hero-inner .blog-badge { margin-bottom: 16px; }
.blog-single .blog-single__hero-inner .blog-meta { justify-content: center; margin-top: 16px; color: rgba(255, 255, 255, 0.88); }
.blog-single .blog-single__hero-inner .blog-meta i { color: #fff; }
.blog-single .blog-single__title { font-size: 38px; font-weight: 800; color: #fff; line-height: 1.2; }

/* --- Single story: back link --- */
.blog-single .blog-single__back { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; padding: 26px 24px 0; color: #03a4a3; font-size: 14px; font-weight: 600; transition: gap 0.2s ease, color 0.2s ease; }
.blog-single .blog-single__back:hover { gap: 12px; color: #027a79; }
.blog-single .blog-single__back i { font-size: 12px; }

/* --- Single story: long-form content --- */
.blog-single .blog-single__content { max-width: 760px; margin: 0 auto; padding: 30px 24px 20px; font-size: 16.5px; line-height: 1.8; color: #000000; }
.blog-single .blog-single__content p { margin: 0 0 22px; }
.blog-single .blog-single__content h2 { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 38px 0 14px; color: #232936; }
.blog-single .blog-single__content h3 { font-size: 21px; font-weight: 600; line-height: 1.35; margin: 30px 0 12px; color: #232936; }
.blog-single .blog-single__content ul,
.blog-single .blog-single__content ol { margin: 0 0 22px; padding-left: 1.3em; }
.blog-single .blog-single__content li { margin-bottom: 8px; line-height: 1.7; }
.blog-single .blog-single__content a { color: #03a4a3; text-decoration: underline; transition: color 0.2s; }
.blog-single .blog-single__content a:hover { color: #027a79; }
.blog-single .blog-single__content img { max-width: 100%; height: auto; display: block; border-radius: 12px; margin: 20px 0; }
.blog-single .blog-single__content blockquote { margin: 26px 0; padding: 14px 22px; border-left: 4px solid #03a4a3; background: #f4fafa; color: #000000; font-style: italic; border-radius: 0 8px 8px 0; }
.blog-single .blog-single__content blockquote p:last-child { margin-bottom: 0; }

/* --- Single story: "More stories" footer --- */
.blog-single .blog-more { max-width: 1180px; margin: 0 auto; padding: 30px 24px 70px; }
.blog-single .blog-more h2 { font-size: 24px; font-weight: 700; color: #232936; margin-bottom: 4px; text-align: center; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .blog-page .blog-hero__title { font-size: 34px; }
  .blog-page .blog-featured { flex-direction: column; }
  .blog-page .blog-featured__img { flex-basis: auto; width: 100%; min-height: 260px; }
  .blog-page .blog-featured__body { padding: 32px 26px 34px; }
  .blog-page .blog-featured__title { font-size: 22px; }
  .blog-page .blog-grid,
  .blog-single .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-single .blog-single__title { font-size: 30px; }
}
@media (max-width: 600px) {
  .blog-page .blog-hero__title { font-size: 28px; }
  .blog-page .blog-grid,
  .blog-single .blog-grid { grid-template-columns: 1fr; }
  .blog-page .blog-featured__body { padding: 26px 22px 30px; }
  .blog-single .blog-single__title { font-size: 26px; }
  .blog-single .blog-single__content { font-size: 15.5px; }
}

/* ===== SITEWIDE squared corners — sharp edges on every card / box / panel / input / label across the whole site.
   Buttons stay pill (see the pill rule below) and circular icons/avatars stay circular (deliberately excluded). ===== */
.dep2,
.dep2__thumb,
.dep2-legend,
.ttype .ticon,
.tour-facts,
.tour-fact__ic,
.festival-calendar .frow,
.festival-calendar .datebadge,
.festival-calendar .fphoto,
.festival-calendar .mgroup .chip,
.festival-calendar .fwrite .wmeta span,
.blog-page .blog-card,
.blog-single .blog-card,
.blog-page .blog-featured,
.blog-page .blog-badge,
.blog-single .blog-badge,
.blog-single .blog-single__content img,
.blog-single .blog-single__content blockquote,
.wpcf7-form-control:not(.wpcf7-submit),
.contact .php-email-form input,
.contact .php-email-form textarea,
.booking-form input[type=text],
.booking-form input[type=email],
.booking-form textarea,
.travel-resources-page .resource-toc,
.travel-resources-page .resource-toc a,
div.alphabet div.alphabet-info,
.card,
.card-header,
.card-footer,
.card-img,
.card-img-top,
.card-img-bottom,
.card-img-overlay,
.badge,
.form-control,
.alert,
.dropdown-menu {
  border-radius: 0 !important;
}

/* ===== All buttons → fully-rounded pill (client ref: solid teal pill button) ===== */
.btn,
.btn-custom,
.btn-primary,
.btn-secondary,
.dep2-btn,
.addbtn,
.blog-btnread,
.blog-loadmore,
.wpcf7-submit,
input[type="submit"],
.cta .cta-btn,
.check-rates-btn,
.btn-get-started,
.dep2-months .dim,
.dep2-months .on {
  border-radius: 999px !important;
}
/* team-band buttons are force-squared at .team-section specificity — match it so they pill too */
.team-section .btn-outline-light {
  border-radius: 999px !important;
}

/* ===== Title/heading font → Arrus BT Roman (client trial 13 Aug 2026) =========
   Self-hosted from assets/fonts/. Supersedes the Playfair Display SC trial of
   12 Jul 2026.
   REVERT to Playfair: restore font-family to
     'Playfair Display SC', Georgia, 'Times New Roman', serif
   and put letter-spacing back to 0.01em. The 'playfair-sc-font' enqueue in
   functions.php is deliberately LEFT IN PLACE so reverting is a one-line edit.
   REVERT to the original: delete this block from custom.css AND custom.scss +
   the enqueue line. The pre-Playfair title font was Poppins (inherited).

   NOTE ON WEIGHTS: only the Roman (regular) cut was supplied, so the face is
   declared across 100–900. That makes the browser use the real letterforms at
   every weight INSTEAD of smearing a fake bold, which is the honest way to
   judge the typeface — but headings asking for 600/700 will render at regular
   weight, so the weight hierarchy is flat until the Medium/Bold cuts are added. */
@font-face {
  font-family: 'Arrus BT';
  src: url('../fonts/ArrusBT-Roman.ttf') format('truetype');
  /* Declared at 400 ONLY (was 100–900) so the browser SYNTHESISES bold for the
     600/700 headings. Only the Roman cut was supplied; without synthesis every
     heading rendered at regular weight, giving no weight contrast against the
     Poppins body — which is why the client read the titles as "smaller than the
     content" even though they measured 32% wider. Compared against a
     -webkit-text-stroke fake bold; native synthesis is heavier, cleaner and needs
     no hack. Replace with the real Medium/Bold cuts when they are licensed. */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
h1, h2, h3, h4, h5, h6,
.page-heading,
.featured-trip-title,
.blog-hero__title,
.blog-featured__title,
.blog-card__title,
.blog-single__title {
  font-family: 'Arrus BT', Georgia, 'Times New Roman', serif !important;
  letter-spacing: normal !important; /* the 0.01em was to open up Playfair's small caps; Arrus is not small caps */
  /* Optical size bump, +22% (client, 13 Aug 2026: "this font decreased the font a bit").
     The cause is NOT a smaller face — measured at 100px, Arrus actually has a TALLER
     cap-height than Playfair (72.9 vs 66.2). It reads smaller because Playfair Display SC
     was SMALL CAPS, so lowercase rendered as small capitals and filled much more vertical
     space; Arrus renders true lowercase.
     Done with font-size-adjust rather than editing the 42 separate heading font-size
     declarations, so every heading scales by the same ratio from one line and nothing is
     missed. The value is Arrus's natural x-height ratio (46.58/100 = 0.4658) x 1.22.
     TO TUNE: 0.4658 = no change, 0.4891 = +5%, 0.5077 = +9%, 0.5683 = +22% (current), 0.5124 = +10%, 0.5590 = +20%.
     REMOVE THIS LINE if reverting to Playfair — it would scale Playfair by ~1.13 and
     overshoot the original size. */
  font-size-adjust: 0.5683 !important;
}

/* ===== Material Symbols Rounded — trip-fact icons (client picked Option 2, icon-styles sample) ===== */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'opsz' 40, 'wght' 300, 'FILL' 0, 'GRAD' 0;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.tour-fact__ic .material-symbols-rounded { font-size: 28px; }

/*# sourceMappingURL=custom.css.map */

/* ===== Team page — CEO spotlight card + bio card grid (client-approved team samples, applied 12 Jul 2026).
   Squared corners per sitewide direction; circular contact buttons deliberately stay round. ===== */
.team-leader-card {
  display: flex;
  background: #fff;
  border: 1px solid #e6eaee;
  box-shadow: 0 2px 10px rgba(35, 41, 54, 0.05);
  overflow: hidden;
  margin: 10px 0 42px;
}
.team-leader-card__photo {
  flex: 0 0 300px;
  height: 340px; /* fixed, not min — any-dimension uploads crop via object-fit instead of growing the card */
}
.team-leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-leader-card__body {
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.team-leader-card__body h3 {
  font-size: 24px;
  color: #232936;
  margin: 0 0 6px;
}
.team-leader-card__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #03a4a3;
  margin: 0 0 14px;
}
.team-leader-card__bio {
  font-size: 20px;
  line-height: 32px;
  color: #000000;
  margin: 0 0 20px;
}
.team-leader-card__contact {
  display: flex;
  gap: 10px;
}
.team-leader-card__contact a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6eaee;
  border-radius: 50%;
  font-size: 15px;
  color: #79828f;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.team-leader-card__contact a:hover {
  color: #03a4a3;
  border-color: #03a4a3;
  background: #eef6f6;
}

.team-bio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.team-bio-card {
  background: #fff;
  border: 1px solid #e6eaee;
  box-shadow: 0 2px 10px rgba(35, 41, 54, 0.05);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-bio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(35, 41, 54, 0.12);
}
.team-bio-card__photo {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;
  background: #eef6f6;
}
.team-bio-card__body {
  padding: 26px 24px 30px;
  text-align: center;
}
.team-bio-card__body h3 {
  font-size: 22px;
  color: #232936;
  margin: 0 0 5px;
}
.team-bio-card__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #03a4a3;
  margin: 0;
}
.team-bio-card__divider {
  width: 36px;
  height: 3px;
  background: #03a4a3;
  border: 0;
  opacity: 1;
  margin: 16px auto;
}
.team-bio-card__bio {
  font-size: 20px;
  line-height: 32px;
  color: #000000;
  margin: 0;
}

@media (max-width: 991px) {
  .team-bio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .team-leader-card {
    flex-direction: column;
  }
  .team-leader-card__photo {
    flex: none;
    width: 100%;
    min-height: 0;
    height: 300px;
  }
  .team-leader-card__body {
    padding: 26px 22px;
  }
}
@media (max-width: 575px) {
  .team-bio-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Tour detail — full-page redesign (tour-detail-final applied 15 Jul 2026)
   Sticky section nav · overview + booking card · gallery · itinerary
   accordion with dzongkhag map · FAQ accordion. Every section is
   data-gated in single-tour.php (no ACF data → no section, no nav link).
   Squared corners per sitewide direction; buttons are pills.
   Heading font comes from the sitewide heading override — not set here.
   ===================================================================== */

/* hero meta — breadcrumb + gold duration line under the title */
.tour-hero-meta {
  position: absolute;
  top: 56%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  padding: 0 24px;
}
.tour-hero-crumb {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.tour-hero-crumb a {
  color: #fff;
  text-decoration: none;
}
.tour-hero-crumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.tour-hero-sub {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffe066;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* sticky section nav (below #header's z-index 997) */
.tour-snav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e6eaee;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.05);
}
.tour-snav__wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tour-snav__wrap > a {
  flex: none;
  font-size: 13.5px;
  font-weight: 500;
  color: #79828f;
  padding: 16px 14px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.tour-snav__wrap > a:hover {
  color: #027a79;
  border-color: #03a4a3;
}
/* center the nav items as a group; auto margins collapse to 0 when the row
   overflows, so the first/last items stay reachable while scrolling */
.tour-snav__wrap > a:first-child {
  margin-left: auto;
}
.tour-snav__wrap > a:last-child {
  margin-right: auto;
}

/* page body: sits directly under the sticky nav (no big top gap) */
.tour-main {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* shared section shell */
.tour-section {
  padding: 52px 0;
  scroll-margin-top: 90px;
}
/* trim the space above the first section so it sits close under the sticky nav */
.tour-main > .tour-section:first-child {
  padding-top: 44px;
}
.tour-section--tint {
  background: #f6f9f9;
}
.tour-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.tour-sec-title {
  font-size: 26px;
  font-weight: 700;
  color: #232936;
  margin-bottom: 20px;
}
.tour-facts-wrap {
  scroll-margin-top: 90px;
}
.tour-anchor {
  scroll-margin-top: 90px;
}
.book-package-title {
  scroll-margin-top: 90px;
}

/* overview — description (left) + booking card (right) */
.tour-ov {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 50px;
  align-items: start;
}
.tour-ov--single {
  grid-template-columns: 1fr;
}
.tour-ov__body {
  text-align: left;
  font-size: 16px;
}
.tour-ov__body p {
  line-height: 1.75;
  margin-bottom: 14px;
  font-weight: 400;    /* T6: keep overview body text un-bold (black comes from T1) */
}
.tour-ov__body p strong,
.tour-ov__body p b {
  font-weight: 400;    /* T6: content wraps whole paragraphs in <strong>; de-bold them */
}
/* booking card */
.tour-bcard {
  position: sticky;
  top: 90px;
  background: #034b4b;
  color: #fff;
  padding: 28px;
}
.tour-bcard__from {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tour-bcard__price {
  font-size: 32px;
  font-weight: 800;
  margin: 2px 0 0;
}
.tour-bcard__price small {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.tour-bcard__tiers {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  line-height: 1.6;
}
.tour-bcard__book,
.tour-bcard__ask {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 13px 24px;
  margin-top: 12px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.tour-bcard__book {
  background: #f8c100;
  color: #4a3600;
  box-shadow: 0 4px 12px rgba(248, 193, 0, 0.3);
}
.tour-bcard__book:hover {
  background: #dfac00;
  color: #4a3600;
}
.tour-bcard__book .material-symbols-rounded {
  font-size: 18px;
  vertical-align: -3px;
  margin-right: 7px;
}
.tour-bcard__ask {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.tour-bcard__ask:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* facts moved INTO the booking card — bare gold Material Symbols (no cream tile),
   muted labels, white values; compact 2-col grid above a subtle divider (client 19 Jul 2026) */
.tour-bcard__facts {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;                        /* slightly more row air for the larger fact text (client 19 Jul 2026) */
}
.tour-bcard__fact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tour-bcard__fact .material-symbols-rounded {
  flex: none;
  font-size: 26px;                       /* was 24px — scaled up to match the larger fact text */
  color: #ffe066;
}
.tour-bcard__fact-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tour-bcard__fact-label {
  font-size: 12px;                       /* was 10.5px — more legible, still smaller/uppercase than the value */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.2;
  margin-bottom: 1px;
}
.tour-bcard__fact-value {
  font-size: 17px;                       /* was 14px — harmonised with the ~18-20px Trip Overview body (client 19 Jul 2026) */
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
@media (max-width: 380px) {
  .tour-bcard__facts {
    grid-template-columns: 1fr;
  }
}

/* gallery — lead image + scrolling thumb strip */
.tour-gal__big {
  height: 430px;
  background-size: cover;
  background-position: center;
  margin-bottom: 14px;
}
.tour-gal__thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.tour-gal__thumbs button {
  flex: none;
  width: 150px;
  height: 96px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.75;
  border: 3px solid transparent;
  padding: 0;
  border-radius: 0;
}
.tour-gal__thumbs button:hover,
.tour-gal__thumbs button.on {
  opacity: 1;
  border-color: #03a4a3;
}

/* itinerary — timeline accordion (left) + sticky map card (right) */
.tour-itin {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px;
  align-items: start;
}
.tour-itin__tl {
  position: relative;
  padding-left: 44px;
  text-align: left;
}
/* timeline rule is drawn per day (dot → next dot) so it can never overflow past the first/last dot */
.tour-day {
  position: relative;
  margin-bottom: 22px;
}
.tour-day::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 13px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #03a4a3;
}
.tour-day:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 33px;
  bottom: -33px;
  border-left: 2px dotted #9fd3d2;
}
.tour-day__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  cursor: pointer;
}
.tour-day__num {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #03a4a3;
  border-radius: 999px;
  padding: 5px 13px;
  margin-top: 3px;
  white-space: nowrap;
}
.tour-day__head h4 {
  font-size: 20px;
  font-weight: 600;
  color: #232936;
  line-height: 1.35;
  margin: 0;
}
.tour-day__head i {
  margin-left: auto;
  color: #03a4a3;
  transition: transform 0.3s;
  margin-top: 7px;
}
.tour-day__head:hover h4 {
  color: #027a79;
}
.tour-day__body {
  display: none;
  padding: 6px 0 4px;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
}
.tour-day.open .tour-day__body {
  display: block;
}
.tour-day.open .tour-day__head i {
  transform: rotate(45deg); /* + becomes × */
}
.tour-day__banner {
  height: 240px;
  background-size: cover;
  background-position: center;
  margin: 12px 0;
}
.tour-day__meta {
  font-size: 13px;
  font-weight: 600;
  color: #79828f;
  margin-top: 8px;
}
.tour-map {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid #e6eaee;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 30, 50, 0.08);
}
.tour-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}
.tour-map__cap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: #232936;
  border-top: 1px solid #e6eaee;
}
.tour-map__cap i {
  color: #03a4a3;
}

/* Leaflet route map — interactive canvas, numbered teardrop pins, dashed teal
   route, "place · day" chip + fullscreen button. Rendered by single-tour.php
   when day coordinates resolve; the Google iframe above is the 0-point fallback.
   A <div> gets no intrinsic height like an <iframe>, so the height is explicit. */
#tour-map-canvas {
  width: 100%;
  height: 400px;
  background: #e9eef1;
  z-index: 0;
}
.tour-map__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 96px);
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #232936;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.18);
  pointer-events: none;
}
.tour-map__chip.is-visible {
  display: inline-flex;
}
.tour-map__chip i {
  color: #03a4a3;
  font-size: 12px;
}
.tour-map__chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour-map__fs {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1200;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e6eaee;
  border-radius: 50%;
  background: #fff;
  color: #034b4b;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.18);
  transition: background 0.2s, color 0.2s;
}
.tour-map__fs:hover {
  background: #034b4b;
  color: #fff;
}
/* teardrop pins (rotated rounded-square, counter-rotated number) */
.btc-pin-wrap {
  background: none;
  border: 0;
}
.btc-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #b9c2cc;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(20, 30, 50, 0.28);
}
.btc-pin__n {
  transform: rotate(45deg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #034b4b;
}
.btc-pin--active {
  background: #034b4b;
  border-color: #034b4b;
  box-shadow: 0 3px 9px rgba(3, 75, 75, 0.45);
}
.btc-pin--active .btc-pin__n {
  color: #fff;
  font-size: 14px;
}
/* fullscreen — canvas fills the screen-sized card */
.tour-map--leaflet:fullscreen {
  top: 0;
  border: 0;
  box-shadow: none;
  background: #fff;
}
.tour-map--leaflet:fullscreen #tour-map-canvas {
  height: 100%;
}

/* FAQ accordion */
.tour-faq-item {
  background: #fff;
  border: 1px solid #e6eaee;
  margin-bottom: 12px;
  overflow: hidden;
  text-align: left;
}
.tour-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  color: #232936;
}
.tour-faq-item summary::-webkit-details-marker {
  display: none;
}
.tour-faq-item summary i {
  margin-left: auto;
  flex: none;
  color: #03a4a3;
  font-size: 15px;
  transition: transform 0.3s;
}
.tour-faq-item[open] {
  border-color: #03a4a3;
}
.tour-faq-item[open] summary {
  color: #027a79;
}
.tour-faq-item[open] summary i {
  transform: rotate(45deg);
}
.tour-faq-item__body {
  padding: 0 22px 18px;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
}

/* responsive */
@media (max-width: 900px) {
  .tour-ov {
    grid-template-columns: 1fr;
  }
  .tour-bcard {
    position: static;
  }
  .tour-itin {
    grid-template-columns: 1fr;
  }
  .tour-map {
    position: static;
  }
  .tour-map iframe,
  #tour-map-canvas {
    height: 300px;
  }
}
@media (max-width: 560px) {
  .tour-gal__big {
    height: 260px;
  }
  .tour-day__head h4 {
    font-size: 17px;
  }
  .tour-hero-meta {
    top: 58%;
  }
}

/* =====================================================================
   Hotels — archive grid, dzongkhag filter chips, hotel cards & detail page.
   Added 10 Aug 2026 (client request). Rendered by archive-hotel.php /
   content-hotel.php / single-hotel.php.
   Reuses the sitewide tokens: teal #03a4a3, 12px card radius, pill buttons,
   #e6eaee hairlines, #f6f9f9 tint band — so Hotels reads as part of the same
   system as the blog grid and the tour detail page. Self-contained `hotel-*`
   classes (parallel to the tour ones) so the feature deploys as a set.
   ===================================================================== */

/* hero — both hotel templates reuse the sitewide .top-menu-cover band, but
   centre their own crumb → title → meta stack instead of the 44%/56% absolute
   placement, which overlapped itself as soon as a hotel name wrapped to two
   lines on a phone. Scoped to the two modifiers, so tour heroes are untouched.
   NO HEIGHT OVERRIDE (client, 13 Aug 2026 — "the hero section size is not
   unified"): /hotels/ used to halve the band to 46vh/340px so the first row of
   cards showed without scrolling, which made it the only hero on the site that
   was not 90vh. Both hotel heroes now inherit the sitewide 90vh, matching the
   tour archive and every other landing band.
   The flex centring below STAYS — it is the two-line-title overlap fix, not
   part of the halving, and deleting it would reintroduce that bug. */
.top-menu-cover--hotels,
.top-menu-cover--hotel-single {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotel-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 24px;
}
.top-menu-cover--hotels .post-title,
.top-menu-cover--hotel-single .post-title {
  position: static;
  top: auto;
  width: auto;
  margin: 10px 0 0;
}
.top-menu-cover--hotels .hotel-hero-sub,
.top-menu-cover--hotel-single .hotel-hero-sub {
  margin-top: 14px;
}
.hotel-hero-crumb {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hotel-hero-crumb a {
  color: #fff;
  text-decoration: none;
}
.hotel-hero-crumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.hotel-hero-sub {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hotel-hero-stars {
  display: inline-flex;
  gap: 3px;
  color: #ffc93c;
  font-size: 14px;
}
/* renamed from --boutique 11 Aug 2026: the pill now carries whichever Hotel
   Category is not a star tier (Glamping, Farmhouses…), not the retired
   "Boutique" star_rating value. Styling deliberately unchanged. */
.hotel-hero-stars--cat {
  background: #03a4a3;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  text-shadow: none;
}

/* shared page container */
.hotel-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The ARCHIVE grid runs full-bleed, matching the tour listings (archive.php uses
   Bootstrap .container-fluid, so a tour card measures 446px starting 20px from
   the viewport edge). The 1180px cap above left ~120px of dead space each side
   at 1440 (client, 12 Aug 2026).
   Scoped to .hotel-archive ON PURPOSE: single-hotel.php reuses .hotel-wrap for
   all seven of its body sections, and widening those would stretch the running
   text to the full viewport and wreck the measure. */
.hotel-archive .hotel-wrap {
  max-width: none;
  padding: 0 20px;
}

/* dzongkhag filter chips */
.hotel-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 40px 0 6px;
}
.hotel-pill {
  border: 1px solid #e6eaee;
  background: #fff;
  color: #232936;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hotel-pill:hover {
  border-color: #03a4a3;
  color: #03a4a3;
}
.hotel-pill.is-active {
  background: #03a4a3;
  border-color: #03a4a3;
  color: #fff;
  box-shadow: 0 6px 14px rgba(3, 164, 163, 0.28);
}

/* card grid — 3-up desktop, 2-up tablet, 1-up mobile */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 32px 0 8px;
}
.hotel-card {
  background: #fff;
  border: 1px solid #e6eaee;
  /* Squared, not rounded (client, 12 Aug 2026): every other card on the site is
     square-cornered — .featured-trip-block sets border-radius: 0 explicitly. The
     12px here made the hotel grid the odd one out. */
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(35, 41, 54, 0.12);
}
/* 5:4 box matches the btc-card crop, so the registered size is not re-cropped */
.hotel-card__img {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  background-size: cover;
  background-position: center;
  background-color: #f6f9f9;
}
.hotel-stars {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.94);
  color: #f0a500;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(20, 30, 50, 0.18);
}
/* renamed from --boutique 11 Aug 2026 — see .hotel-hero-stars--cat above */
.hotel-stars--cat {
  background: #03a4a3;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(3, 164, 163, 0.3);
}
.hotel-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* line-height 1.22 + 10px below matches .featured-trip-title. The old 1.4 added
   ~6px of leading under a one-line hotel name, which is where the gap ABOVE the
   location line was coming from (client, 12 Aug 2026). */
.hotel-card__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.22;
  margin-bottom: 10px;
}
.hotel-card__title a {
  color: #232936;
  text-decoration: none;
  transition: color 0.2s;
}
.hotel-card__title a:hover {
  color: #03a4a3;
}
/* Matched to the tour card's route line, .featured-trip-route (client, 12 Aug
   2026): same 17px/500/#6b7280 text, same 15px teal pin, same 6px gap and 6px
   bottom margin. It was 14px with 12px below, which read small and left the
   line floating between the title and the blurb. align-items: center (not
   baseline) so the pin sits level with the text rather than riding low. */
.hotel-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 500;
  color: #6b7280;
  /* Shorthand, NOT margin-bottom: this <p> inherits a ~14px top margin from the
     theme's paragraph rule, which was the real source of the gap above the line.
     .featured-trip-route uses `margin: 0 0 6px` for exactly this reason. */
  margin: 0 0 6px;
}
.hotel-card__meta i {
  color: #03a4a3;
  font-size: 15px;
  flex: 0 0 auto;
}
/* clamped to 3 lines so every card in a row stays the same height */
.hotel-card__blurb {
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  /* shorthand for the same inherited-top-margin reason as .hotel-card__meta */
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* pill button, pinned to the bottom of the card via the auto top margin */
.hotel-card__btn {
  margin-top: auto;
  align-self: flex-start;
  background: #fff;
  color: #03a4a3;
  border: 2px solid #03a4a3;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hotel-card__btn:hover {
  background: #03a4a3;
  color: #fff;
  box-shadow: 0 8px 18px rgba(3, 164, 163, 0.28);
}
.hotel-card__btn i {
  margin-left: 8px;
  font-size: 12px;
}

/* empty states — the filter miss and the no-hotels-at-all case share this */
.hotel-empty {
  display: none;
  text-align: center;
  color: #79828f;
  font-size: 15px;
  padding: 70px 0 40px;
}
.hotel-empty i {
  display: block;
  font-size: 30px;
  color: #e6eaee;
  margin-bottom: 14px;
}
.hotel-empty.is-show {
  display: block;
}
.hotel-archive {
  padding-bottom: 40px;
}

/* ---------------------------------------------------------------------
   Hotel detail page
   --------------------------------------------------------------------- */

/* sticky section nav (below #header's z-index 997), mirroring .tour-snav */
.hotel-snav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e6eaee;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.05);
}
.hotel-snav__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hotel-snav__wrap > a {
  flex: none;
  font-size: 13.5px;
  font-weight: 500;
  color: #79828f;
  padding: 16px 14px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.hotel-snav__wrap > a:hover {
  color: #027a79;
  border-color: #03a4a3;
}
/* centre the row as a group; the auto margins collapse when it overflows */
.hotel-snav__wrap > a:first-child {
  margin-left: auto;
}
.hotel-snav__wrap > a:last-child {
  margin-right: auto;
}

.hotel-single {
  margin-bottom: 3rem;
}
.hotel-section {
  padding: 52px 0;
  scroll-margin-top: 90px;
}
.hotel-single > .hotel-section:first-child {
  padding-top: 44px;
}
.hotel-section--tint {
  background: #f6f9f9;
}
.hotel-sec-title {
  font-size: 26px;
  font-weight: 700;
  color: #232936;
  margin-bottom: 20px;
}

/* overview — editor body (left) + facts card (right) */
.hotel-ov {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 50px;
  align-items: start;
}
.hotel-ov--single {
  grid-template-columns: 1fr;
}
.hotel-ov__body {
  text-align: left;
  font-size: 16px;
}
.hotel-ov__body p {
  line-height: 1.75;
  margin-bottom: 14px;
  font-weight: 400;
}

/* facts card — dark teal, same language as the tour booking card */
.hotel-fcard {
  position: sticky;
  top: 90px;
  background: #034b4b;
  color: #fff;
  padding: 28px;
  border-radius: 12px;
}
.hotel-fcard__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hotel-fcard__row:first-child {
  padding-top: 0;
}
.hotel-fcard__row .material-symbols-rounded {
  font-size: 22px;
  color: #4fd8d7;
  line-height: 1.3;
}
.hotel-fcard__txt {
  display: flex;
  flex-direction: column;
}
.hotel-fcard__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.hotel-fcard__value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.hotel-fcard__cta {
  display: block;
  margin-top: 22px;
  text-align: center;
  background: #03a4a3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hotel-fcard__cta:hover {
  background: #fff;
  color: #034b4b;
}

/* highlights — matched to .tour-highlights__list on the tour detail page
   (client, 13 Aug 2026: "unify the font size as the rest of the website").
   Same 20px/1.6 #000 text and the same 18px teal check on a 32px line-box,
   which sits the tick on the first text line without the old margin-top nudge.
   Row rhythm comes from the grid gap alone (12px — the same distance the tour
   list gets from its 6px+6px li padding) and NOT from padding on the li as well.
   Padding would have added 6px of trailing space under the final bullet, and the
   space under that bullet is precisely what the client called out. This way the
   inter-row rhythm matches the tour page and the section boundary stays tight.
   The remaining 104px to the next heading is 52+52 of section padding — the
   site's established rhythm, unchanged on purpose. */
.hotel-hl {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 12px 34px;
}
.hotel-hl li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
}
.hotel-hl li i {
  flex: none;
  color: #03a4a3;
  font-size: 18px;
  line-height: 32px;
}

/* rooms */
.hotel-rooms {
  display: grid;
  gap: 14px;
}
.hotel-room {
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 12px;
  padding: 20px 22px;
}
.hotel-room__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* matched to .tour-day__head h4, the tour page's equivalent row heading */
.hotel-room__name {
  font-size: 20px;
  font-weight: 600;
  color: #232936;
  line-height: 1.35;
  margin: 0;
}
.hotel-room__occ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #027a79;
  background: #eaf7f7;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
/* 20px/1.6 #000 — the site's body-copy step, byte-identical to
   .tour-day__body and .tour-faq-item__body (13 Aug 2026) */
.hotel-room__desc {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
}

/* amenities — auto-fit, NOT a fixed 4 columns (13 Aug 2026). At the new 20px
   the longest registered label, "Traditional Hot Stone Bath", needs ~320px and
   four fixed columns wrapped it to two lines inside a 999px pill. minmax lets
   the row find its own count (3 at 1180, 2 at tablet, 1 on a phone) so the grid
   flexes and the type never has to shrink back down — per the brief, adjust the
   grid, not the type. */
.hotel-amen {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px 24px;
}
.hotel-amen li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  line-height: 1.6;
  color: #232936;
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 999px;
  padding: 10px 22px;
}
.hotel-amen li i {
  flex: none;
  color: #03a4a3;
  font-size: 18px;
  width: 22px;
  text-align: center;
}

/* gallery — lead image + thumb strip (no extra library) */
.hotel-gal__big {
  height: 460px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.hotel-gal__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.hotel-gal__thumbs button {
  flex: none;
  width: 110px;
  height: 78px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hotel-gal__thumbs button:hover {
  opacity: 1;
}
.hotel-gal__thumbs button.on {
  opacity: 1;
  border-color: #03a4a3;
}

/* location — a full-width STACK: one compact meta bar over a full-width map.
   Replaces the old 5fr/7fr grid, which the client rejected by screenshot on
   13 Aug 2026 ("i dont like this make it better").
   WHY THE GRID FAILED: address and website are deliberately blank on most
   properties (a content-accuracy policy — the facts could not be verified), and
   the numbers are stark: of the 47 hotels that carry a map, 31 carry NOTHING
   but their town. So the common case put one 50px-tall line beside a 380px map
   and left ~330px of dead white space in the left column.
   WHY THE STACK: it makes the sparse case the DESIGNED case. The bar is always
   full-width, so it reads as a deliberate meta strip whether it holds one item
   or three — it can never look half-empty the way a column can. The map gains
   the whole measure instead of 7/12ths of it. The 3 hotels with no map at all
   show the bar alone, which still reads as a finished block rather than a
   heading with a stray line under it.
   The white-card-on-tint treatment (12px radius, #e6eaee hairline) is the same
   one .hotel-room and .hotel-amen li already use on these tinted bands, so the
   block stays consistent with the sections above it. */
.hotel-loc {
  display: block;
}
.hotel-loc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 38px;
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 12px;
  padding: 6px 26px;
  margin-bottom: 18px;
}
/* no map (or no bar) — whichever child lands last loses its trailing gap, so
   density (d) needs no modifier class of its own */
.hotel-loc__meta:last-child {
  margin-bottom: 0;
}
.hotel-loc__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 20px;
  line-height: 1.6;
  color: #232936;
  padding: 14px 0;
}
.hotel-loc__item i {
  flex: none;
  color: #03a4a3;
  font-size: 18px;
  line-height: 32px;
  width: 20px;
  text-align: center;
}
.hotel-loc__item a {
  color: #027a79;
  font-weight: 600;
  text-decoration: none;
}
.hotel-loc__item a:hover {
  text-decoration: underline;
}
.hotel-loc__map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6eaee;
}
/* 440px, up from 380: full-bleed the map can afford the presence, and it keeps
   a roughly 3:1 band rather than the squat box the old 7fr column produced */
.hotel-loc__map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}

/* enquire CTA — sits directly above the enquiry form footer.php injects */
.hotel-enquire-cta {
  text-align: center;
  padding-bottom: 10px;
}
/* This is a <p>, so the 16px here was actively overriding the theme's global
   p { font-size: 20px } — the sole reason the CTA read smaller than the copy
   above it. Measure widened with the type so it still breaks over two lines
   rather than four. (13 Aug 2026) */
.hotel-enquire-cta__lead {
  font-size: 20px;
  line-height: 1.7;
  color: #232936;
  max-width: 780px;
  margin: 0 auto 22px;
}
.hotel-enquire-cta__btn {
  display: inline-block;
  background: #03a4a3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hotel-enquire-cta__btn:hover {
  background: #027a79;
  color: #fff;
  box-shadow: 0 8px 18px rgba(3, 164, 163, 0.28);
}
.hotel-enquire-cta__btn i {
  margin-left: 9px;
  font-size: 12px;
}

/* responsive */
@media (max-width: 992px) {
  .hotel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .hotel-loc left this reset 13 Aug 2026 — it is no longer a grid. .hotel-amen
     left it too: auto-fit already picks its own column count at every width. */
  .hotel-ov {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hotel-fcard {
    position: static;
  }
  .hotel-gal__big {
    height: 360px;
  }
}
@media (max-width: 767px) {
  /* hero height override deleted 13 Aug 2026 with its desktop twin — see the
     hero comment at the top of this block. .hotel-hl needs no rule here: it is
     auto-fit and collapses to one column by itself — and a 767 breakpoint could
     not have helped anyway, since the two-column squeeze bit hardest at 768. */
  .hotel-section {
    padding: 40px 0;
  }
  .hotel-sec-title {
    font-size: 22px;
  }
}
@media (max-width: 640px) {
  /* a 3em hotel name eats the whole phone hero — trim it on both hotel heroes */
  .top-menu-cover--hotels .post-title,
  .top-menu-cover--hotel-single .post-title {
    font-size: 2.1em;
  }
  .hotel-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hotel-filters {
    padding-top: 30px;
    gap: 8px;
  }
  .hotel-pill {
    font-size: 12.5px;
    padding: 8px 16px;
  }
  /* .hotel-hl is already single-column from 767 down and .hotel-amen is
     auto-fit, so the pair that stood here was redundant (13 Aug 2026) */
  .hotel-gal__big {
    height: 240px;
  }
  .hotel-loc__map iframe {
    height: 280px;
  }
}
@media (max-width: 400px) {
  .hotel-wrap,
  .hotel-snav__wrap {
    padding: 0 16px;
  }
  .hotel-card__body {
    padding: 18px;
  }
  .hotel-card__title {
    font-size: 19px;
  }
  .hotel-fcard {
    padding: 22px 18px;
  }
  .hotel-gal__thumbs button {
    width: 88px;
    height: 64px;
  }
}

/* Hotel enquiry CTA — the "Send an enquiry" buttons scroll to the enquiry form
   that footer.php injects below this template. scrollIntoView({block:'start'})
   honours scroll-margin, and without one the form's heading and first field land
   behind the 120px position:fixed header. 130px matches the offset already used
   for the other anchor targets above. Scoped to hotel singles so the shared
   partial's behaviour on every other template is untouched. (10 Aug 2026) */
.single-hotel .home-enquiry {
  scroll-margin-top: 130px;
}

/* =====================================================================
   Hotels — two-row filter bar (District + Category).
   Added 11 Aug 2026 (client decision): /hotels/ now filters on TWO
   dimensions that combine with AND, so each chip row carries a short
   label — two unlabelled rows read as one accidentally-wrapped row.
   Rendered by archive-hotel.php.
   Layout only: the chips themselves stay on the existing .hotel-pill
   tokens (teal active state, 999px radius, #e6eaee hairline) so nothing
   new is invented visually.
   ===================================================================== */
.hotel-filterbar {
  padding: 40px 0 6px;
}
/* the outer padding now lives on the bar, so each row's chip group sits
   flush inside it; the standalone .hotel-filters rule above is untouched
   and still correct anywhere the chips are used without a label */
.hotel-filterbar .hotel-filters {
  padding: 0;
}
.hotel-filterrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
/* hairline between the rows: with both rows centred, the label alone was
   not enough separation once the district row wrapped to two lines */
.hotel-filterrow + .hotel-filterrow {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e6eaee;
}
.hotel-filterrow__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b8794;
  white-space: nowrap;
}
/* phones: stack the label ABOVE its chips — side by side, the label eats
   the width two rows of chips need and every chip drops to its own line */
@media (max-width: 640px) {
  .hotel-filterbar {
    padding-top: 30px;
  }
  .hotel-filterrow {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .hotel-filterrow + .hotel-filterrow {
    margin-top: 12px;
    padding-top: 12px;
  }
  .hotel-filterrow__label {
    font-size: 11.5px;
  }
}

/* ===== White strip above the header (client, 18 Aug 2026) =====================
   main.css (the orphaned May-2021 build) carries `#main{margin-top:1rem}`. On the
   ~15 templates where <main id="main"> is the FIRST in-flow child — the header is
   position:absolute, so it does not count — that 16px margin has nothing to
   collapse against inside <body>, so it COLLAPSES THROUGH body and pushes the
   whole body box down 16px. The page background then shows above the header as a
   white line across the full width.
   Zeroing it here rather than editing main.css: that file is a stale compiled
   artifact (May 2021, minified, its .scss source is orphaned) and must not be
   hand-edited. custom.css is enqueued after it, so this wins.
   Templates that put a .top-menu-cover hero BEFORE <main> (archive.php,
   page-contact.php) were getting a real 16px gap under the hero from this margin;
   both were checked after the change and their own section padding carries the
   spacing. */
#main {
  margin-top: 0;
}

/* ===== Floating WhatsApp button (client, 18 Aug 2026) ==========================
   Rendered site-wide by footer.php. Stacked directly ABOVE the .cd-top scroll
   arrow, bottom-right (client, 19 Aug 2026 — moved from bottom-left). The arrow
   is 40x40 at right:20/bottom:80, so right:12 centres this 56px circle over it
   and bottom:132 = arrow top + 12px gap. Brand green per WhatsApp's guidelines;
   z-index under the mega-menu (997) so it never covers the nav. */
.btc-whatsapp {
  position: fixed;
  right: 12px;
  bottom: 132px;
  z-index: 990;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(20, 30, 50, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btc-whatsapp:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.34);
}
@media (max-width: 640px) {
  .btc-whatsapp {
    right: 15px;
    bottom: 128px;
    width: 50px;
    height: 50px;
    font-size: 27px;
  }
}