header #menu .navbar .dropdown-favorite ul.list-unstyled li.media img {
  width: 4.6rem !important;
  height: 3.45rem !important;
  object-fit: cover !important;
  border-radius: .35rem !important;
  display: block !important;
}

/* Contact/MICE form: avoid nested `.container` padding/max-width issues */
.form-contact-inner {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header vertical rhythm: keep header content visually centered */
header .menu-block {
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
}

/* Sticky header: make background full-width on scroll, but keep content aligned (container width). */
header .menu-block-wrap.is-sticky {
  background: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
header .menu-block.shadow-sm {
  /* Shadow is applied to the wrapper for full-width look. */
  box-shadow: none !important;
}

/* Alignment guard:
   If a legacy JS variant ever removes `.container` and turns the inner block into a fluid/fixed element,
   force it back to `.container` geometry so logo/menu doesn't jump on scroll. */
header .menu-block:not(.container) {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 576px) { header .menu-block:not(.container) { max-width: 540px; } }
@media (min-width: 768px) { header .menu-block:not(.container) { max-width: 720px; } }
@media (min-width: 992px) { header .menu-block:not(.container) { max-width: 960px; } }
@media (min-width: 1200px) { header .menu-block:not(.container) { max-width: 1140px; } }
header .menu-block.fixed-top {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}
header .menu-block-wrap{
  /* Keep the fixed header wrapper from affecting layout width; inner `.menu-block.container`
     controls the actual alignment and max-width. */
  left: 0;
  right: 0;
}

/* Mobile header: full-width background, but keep content padded like the rest of the site */
@media (max-width: 576px) {
  header .menu-block-wrap {
    background: #fff;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Override legacy `header .fixed-top { padding-left/right:2rem }` so bg reaches edges */
  header .menu-block-wrap.fixed-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  header .menu-block {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
header .menu-block .logo {
  display: block !important;
  height: auto !important;
}

/* Reset legacy negative margins on the desktop navbar that cause vertical misalignment */
header #menu nav.navbar.navbar-expand.d-none.d-lg-block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Global: prevent tiny horizontal overflows from causing mobile side-scroll */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Home showcase slider: prevent sub-pixel overflow from creating page-level horizontal scroll in Chrome */
#home .home-s5,
#home #travelList .home-s5,
#travelList .home-s5{
  max-width: 100%;
  overflow-x: hidden;
}
#home .home-s5-track,
#home #travelList .home-s5-track,
#travelList .home-s5-track{
  max-width: 100%;
}

/* Global: header is fixed-top; reserve space so page content doesn't sit under it */
html {
  scroll-padding-top: calc(var(--gt-header-h, 78px) + 12px);
}
body {
  padding-top: var(--gt-header-h, 78px);
}

/* Home: banner text + controls (mobile) */
#genaralCarousel {
  overflow: hidden;
  margin-top: 0;
}
#genaralCarousel img,
#genaralCarousel video {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 576px) {
  #genaralCarousel .carousel-caption {
    left: 1rem !important;
    right: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #genaralCarousel .carousel-caption h2 {
    font-size: calc(var(--bnr-title-size, 3.5rem) * 0.48) !important;
    line-height: 1.08 !important;
    margin-bottom: .35rem !important;
  }
  #genaralCarousel .carousel-caption .banner-desc {
    font-size: calc(var(--bnr-title-size, 3.5rem) * 0.29) !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }
  #genaralCarousel .carousel-caption .banner-actions {
    margin-top: .65rem !important;
  }
  #genaralCarousel .carousel-caption .banner-btn {
    font-size: calc(var(--bnr-title-size, 3.5rem) * 0.38) !important;
  }
}

/* Live contact: was positioned off-screen (bottom:-5.5rem) and only animated on desktop.
   On mobile, keep it visible and avoid left+right stretching. */
@media (max-width: 576px){
  .liveContact{
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    /* Avoid fixed-position bugs on mobile browsers when an ancestor is transformed */
    transform: none !important;
  }

  /* Slightly smaller avatar on mobile */
  .liveContact .avatar .img-avatar,
  .liveContact .avatar .img-avatar-smile,
  .liveContact .avatar .img-avatar-single{
    width: 4.25rem !important;
    height: 4.25rem !important;
  }
  .liveContact .avatar .active-icon{
    width: .85rem !important;
    height: .85rem !important;
    margin: .33rem .45rem !important;
  }

  /* Center the popover on mobile; the base CSS uses fixed left:0 + width:30rem which overflows small screens */
  .liveContact .popover{
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 2rem !important;
    transform: translateX(-50%) !important;
    width: min(86vw, 22rem) !important;
    max-width: 86vw !important;
    max-height: calc(100vh - 4rem) !important;
    overflow: auto !important;
    margin-top: 0 !important;
  }

  /* Bigger close button on mobile */
  .liveContact .popover .popover-body .popover-close{
    font-size: 2.1rem !important;
    line-height: 1 !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* When popover is open, hide the avatar button (popover has its own close button) */
  .liveContact.is-open .avatar{
    display: none !important;
  }
}

/* Home: banner search bar should stay single-line on mobile */
#search #search-content form {
  width: 100%;
}
#search #search-content .input-group {
  flex-wrap: nowrap;
}
#search #search-content .input-group-prepend {
  flex: 0 0 auto;
}
#search #search-content input#search_input {
  min-width: 0;
  width: 1%;
  flex: 1 1 auto;
}
@media (max-width: 576px) {
  /* Smaller placeholder text without affecting input sizing */
  #search #search-content input#search_input::placeholder {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }
}

/* Mobile menu: cover the full viewport height */
@media (max-width: 576px) {
  #mobilmenu-content.remodal.mobilmenu-content {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 1.25rem 1rem 3.25rem 1rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #mobilmenu-content .container.mt-5 {
    margin-top: 3.75rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .remodal-wrapper {
    padding: 0 !important;
    overflow-y: auto !important;
  }
}

/* Home; Testimonials (Triple Slider) - tighter intro text + slightly larger dots */
#testimonialsComments .container-fluid .px-3.py-3.pt-md-5.pb-md-4.mx-auto {
  max-width: 80rem;
}
#testimonialsComments p.lead {
  max-width: 66rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Testimonials (Single models): keep the description from stretching too wide */
#testimonialsCommentsSingle p.text,
#testimonialsCommentsSingle p.lead{
  max-width: 56rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
}
#testimonialsComments .slick-prev,
#testimonialsComments .slick-next {
  width: 44px;
  height: 54px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 2;
}
#testimonialsComments .slick-prev:hover,
#testimonialsComments .slick-next:hover {
  background: transparent !important;
}
#testimonialsComments .slick-prev:before,
#testimonialsComments .slick-next:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 26px;
  color: rgba(0, 0, 0, 0.7);
  opacity: 1;
}
#testimonialsComments .slick-prev:hover:before,
#testimonialsComments .slick-next:hover:before {
  color: rgba(0, 0, 0, 0.98);
}
#testimonialsComments .slick-prev:before {
  content: "\f053";
}
#testimonialsComments .slick-next:before {
  content: "\f054";
}
#testimonialsComments .slick-prev {
  left: -2.25rem;
}
#testimonialsComments .slick-next {
  right: -2.25rem;
}
#testimonialsComments .testimonials-triple {
  position: relative;
}
#testimonialsComments .testimonials-triple .slick-prev,
#testimonialsComments .testimonials-triple .slick-next {
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 768px){
  #testimonialsComments .slick-prev,
  #testimonialsComments .slick-next{
    display: none !important;
  }
}
#testimonialsComments .slick-dots li {
  width: 22px;
  height: 22px;
}
#testimonialsComments .slick-dots li button,
#testimonialsComments .slick-dots li button:before {
  width: 22px;
  height: 22px;
  line-height: 22px;
}
#testimonialsComments .slick-dots li button:before {
  font-size: 10px;
}
@media (max-width: 576px){
  /* Mobile: keep description readable (title stays theme-default) and hide slider dots */
  #testimonialsComments p.lead{
    font-size: 1rem !important;
    line-height: 1.35;
  }
  #testimonialsComments .slick-dots{
    display: none !important;
  }

  /* Reduce the large bottom gap before the next block on mobile */
  #testimonialsComments .container.pb-5{
    padding-bottom: 1.25rem !important;
  }
}

/* News page: align mobile side padding with home standard */
@media (max-width: 576px){
  /* Detail: `mobil-mx` (1.4rem) is too much on 360px screens */
  #news .content .row.mobil-mx{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tours intro: row mobil-px (1.4rem) + inner px-3 (1rem) stacked was too narrow */
  #news .container-fluid .row.mobil-px{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #news .news-travel-intro{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* News: tighten paragraph rhythm (global, not mobile-only) */
#news .content p{
  line-height: 1.4rem !important;
}

/* Category page: FAQ / Good to know blocks (after pagination) */
#category #category-faqs h3,
#category #category-goodtoKnow h3 {
  font-size: 1.6rem;
  color: #000;
  margin: 0 0 .8rem 0;
}

/* Home + FAQ page: reuse the same FAQ list visual language as the category page */
#home #home-faqs {
  margin-top: 2rem;
}
#home #home-faqs h3 {
  font-size: 1.6rem;
  color: #000;
  margin: 0 0 .8rem 0;
}
@media (max-width: 576px){
  /* `mobil-mx` adds large side margins on small screens; keep FAQ block aligned with home standard. */
  #home #home-faqs .mobil-mx{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
#home #home-faqs .faq-accordion,
.us-faq-page .faq-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}
#home #home-faqs .faq-accordion > li,
.us-faq-page .faq-accordion > li {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0;
}
#home #home-faqs .faq-accordion > li:first-child,
.us-faq-page .faq-accordion > li:first-child {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
#home #home-faqs .faq-accordion > li a,
.us-faq-page .faq-accordion > li a {
  color: #383838 !important;
  display: block;
  padding: .65rem 0;
}
#home #home-faqs .faq-accordion > li a h5,
.us-faq-page .faq-accordion > li a h5 {
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
#home #home-faqs .faq-accordion > li a h5 i,
.us-faq-page .faq-accordion > li a h5 i {
  flex: 0 0 auto;
  margin-top: .2rem;
}
#home #home-faqs .faq-accordion > li a:hover,
.us-faq-page .faq-accordion > li a:hover {
  color: #000 !important;
  text-decoration: none;
}
#home #home-faqs .category-content-text,
.us-faq-page .category-content-text {
  color: #3f3f3f !important;
  padding: .35rem 0 .6rem 0;
}
#home #home-faqs .category-content-text ul,
.us-faq-page .category-content-text ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}
#home #home-faqs .category-content-text ol,
.us-faq-page .category-content-text ol {
  list-style: decimal;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}
#home #home-faqs .category-content-text ul li,
.us-faq-page .category-content-text ul li,
#home #home-faqs .category-content-text ol li,
.us-faq-page .category-content-text ol li {
  border: 0 !important;
  padding: 0 !important;
}

#category #category-faqs ul,
#category #category-goodtoKnow ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#category #category-faqs ul li,
#category #category-goodtoKnow ul li {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0;
}

#category #category-faqs ul li:first-child,
#category #category-goodtoKnow ul li:first-child {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#category #category-goodtoKnow {
  margin-top: 1.2rem;
}

#category #category-faqs ul li a,
#category #category-goodtoKnow ul li a {
  color: #383838 !important;
  display: block;
  padding: .65rem 0;
}

#category #category-faqs ul li a h5,
#category #category-goodtoKnow ul li a h5 {
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

#category #category-faqs ul li a h5 i,
#category #category-goodtoKnow ul li a h5 i {
  flex: 0 0 auto;
  margin-top: .2rem;
}

#category #category-faqs ul li a:hover,
#category #category-goodtoKnow ul li a:hover {
  color: #000 !important;
  text-decoration: none;
}

#category #category-faqs ul li .category-content-text,
#category #category-goodtoKnow ul li .category-content-text {
  color: #3f3f3f !important;
  padding: .35rem 0 .6rem 0;
}

#category #category-faqs ul li .category-content-text ul,
#category #category-goodtoKnow ul li .category-content-text ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}

#category #category-faqs ul li .category-content-text ol,
#category #category-goodtoKnow ul li .category-content-text ol {
  list-style: decimal;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}

#category #category-faqs ul li .category-content-text ul li,
#category #category-goodtoKnow ul li .category-content-text ul li,
#category #category-faqs ul li .category-content-text ol li,
#category #category-goodtoKnow ul li .category-content-text ol li {
  border: 0 !important;
  padding: 0 !important;
}

/* Travel detail: fix nested lists inside FAQ / Good to know answers (avoid inheriting accordion list borders) */
#travel #travel-faqs .travel-content-text,
#travel #travel-goodtoKnow .travel-content-text {
  color: #3f3f3f !important;
  padding: .35rem 0 .6rem 0;
}

#travel #travel-faqs .travel-content-text ul,
#travel #travel-goodtoKnow .travel-content-text ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}

#travel #travel-faqs .travel-content-text ol,
#travel #travel-goodtoKnow .travel-content-text ol {
  list-style: decimal;
  padding-left: 1.1rem;
  margin: .4rem 0 .6rem 0;
}

#travel #travel-faqs .travel-content-text ul li,
#travel #travel-goodtoKnow .travel-content-text ul li,
#travel #travel-faqs .travel-content-text ol li,
#travel #travel-goodtoKnow .travel-content-text ol li {
  border: 0 !important;
  padding: 0 !important;
}

#travel #travel-faqs .travel-content-text p,
#travel #travel-goodtoKnow .travel-content-text p {
  margin: 0 0 .6rem 0;
}

#travel #travel-faqs .travel-content-text p:last-child,
#travel #travel-goodtoKnow .travel-content-text p:last-child {
  margin-bottom: 0;
}

/* About Us page: centered site logo above the main text (shown on About Us content id=1). */
#us #us_content .us-about-logo-wrap{
  text-align: center;
  margin: .75rem 0 1rem 0;
}
#us #us_content .us-about-logo{
  display: inline-block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Remodal-based mobile menus: ensure they cover the full viewport (not vertically centered). */
@media (max-width: 992px) {
  #mobilmenu-content.remodal,
  #mobilfavorites-content.remodal,
  #mobillanguages-content.remodal,
  #mobilcurrency-content.remodal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: auto !important;
    border-radius: 0 !important;
  }

  /* Extra bottom padding so the last link isn't flush against the screen edge */
  #mobilmenu-content.remodal {
    padding-bottom: 3.25rem !important;
  }

  /* Center the close button (hamburger) horizontally on mobile menus */
  #mobilmenu-content .remodal-close,
  #mobilfavorites-content .remodal-close,
  #mobillanguages-content .remodal-close,
  #mobilcurrency-content .remodal-close {
    display: block !important;
    width: max-content !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* ============ Home Showcase: Group/Private Best Tours (show_home_showcase=5) ============ */
#home .home-s5,
#travelList .home-s5{
  margin-top: 1rem;
}
#home .home-s5-section,
#travelList .home-s5-section{
  margin: 1.25rem 0 1.5rem 0;
}
#home .home-s5-section + .home-s5-section,
#travelList .home-s5-section + .home-s5-section{
  margin-top: 3rem;
}
#home .home-s5-head,
#travelList .home-s5-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
#home .home-s5-title,
#travelList .home-s5-title{
  margin: 0;
}
#home .home-s5-group-title,
#travelList .home-s5-group-title{
  margin: 0 0 1.4rem 0;
}
#home .home-s5-nav,
#travelList .home-s5-nav{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}
#home .home-s5-count,
#travelList .home-s5-count{
  color: #64748b;
  font-size: .9rem;
  margin-right: .25rem;
  white-space: nowrap;
}
#home .home-s5-btn,
#travelList .home-s5-btn{
  line-height: 1;
  background: #0b0b0b !important;
  border-color: #0b0b0b !important;
  color: #fff !important;
  height: 3rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#home .home-s5-btn:hover,
#travelList .home-s5-btn:hover{
  background: #111 !important;
  border-color: #111 !important;
}
#home .home-s5-btn i,
#travelList .home-s5-btn i{
  color: #fff !important;
  font-size: 1.15rem;
}

@media (max-width: 576px){
  /* Give the block a bit more breathing room on small screens (all 3 styles) */
  #home .home-s5-section,
  #travelList .home-s5-section{
    margin-top: 2rem;
  }

  /* Prevent heading/nav overlap on small phones */
  #home .home-s5-count,
  #travelList .home-s5-count{
    display: none !important;
  }

  #home .home-s5-title,
  #travelList .home-s5-title{
    font-size: 1.55rem !important;
    line-height: 1.15;
  }

  #home .home-s5-head,
  #travelList .home-s5-head{
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .6rem;
  }

  #home .home-s5-title,
  #travelList .home-s5-title{
    flex: 1 1 auto;
    min-width: 0;
  }

  #home .home-s5-nav,
  #travelList .home-s5-nav{
    flex: 0 0 auto;
    gap: .35rem;
  }

  #home .home-s5-btn,
  #travelList .home-s5-btn{
    height: 2.2rem !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  #home .home-s5-btn i,
  #travelList .home-s5-btn i{
    font-size: .92rem;
  }

  /* CTA buttons were too large on mobile */
  #home .home-s5-cta-btn,
  #travelList .home-s5-cta-btn{
    font-size: 1.25rem !important;
    padding: .42rem .7rem !important;
  }
}

#home .home-s5-track,
#travelList .home-s5-track{
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
#home .home-s5-track::-webkit-scrollbar,
#travelList .home-s5-track::-webkit-scrollbar{
  display: none;
}
#home .home-s5-item,
#travelList .home-s5-item{
  flex: 0 0 auto;
  width: calc((100% - (2 * .75rem)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 768px){
  #home .home-s5-item,
  #travelList .home-s5-item{
    width: 100%;
  }
}

#home .home-s5-card,
#travelList .home-s5-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .85rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#home .home-s5-media,
#travelList .home-s5-media{
  display: block;
  width: 100%;
  aspect-ratio: 3/3;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}
#home .home-s5-img,
#travelList .home-s5-img{
  width: 100%;
  height: 380px !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 768px){
  #home .home-s5-media,
  #travelList .home-s5-media{
    aspect-ratio: 4/3;
  }

  /* On mobile, let the image follow the media box height to avoid blank bottom space. */
  #home .home-s5-img,
  #travelList .home-s5-img{
    height: 100% !important;
  }
}
#home .home-s5-body,
#travelList .home-s5-body{
  padding: .75rem .85rem .85rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

#home .home-s5-quality,
#travelList .home-s5-quality{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}
#home .home-s5-badge,
#travelList .home-s5-badge{
  display: inline-flex;
  align-items: center;
  padding: .2rem .45rem;
  border-radius: .4rem;
  font-size: .82rem;
  line-height: 1.1;
  white-space: nowrap;
}
#home .home-s5-badge-code,
#travelList .home-s5-badge-code{
  background: #0b0b0b;
  color: #fff;
}
#home .home-s5-badge-quality,
#travelList .home-s5-badge-quality{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}
#home .home-s5-name,
#travelList .home-s5-name{
  color: #000;
  text-decoration: none !important;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  margin: 0;
}
#home .home-s5-name:hover,
#travelList .home-s5-name:hover{
  text-decoration: none !important;
}
#home .home-s5-meta,
#travelList .home-s5-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  color: #475569;
  font-size: .92rem;
}
#home .home-s5-dot,
#travelList .home-s5-dot{
  color: #94a3b8;
}
#home .home-s5-price,
#travelList .home-s5-price{
  margin-top: .6rem;
  color: #0f172a;
  font-size: .95rem;
  position: relative;
}
#home .home-s5-desc,
#travelList .home-s5-desc{
  color: #475569;
  font-size: .92rem;
  line-height: 1.35;
}
#home .home-s5-actions,
#travelList .home-s5-actions{
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
#home .home-s5-cta,
#travelList .home-s5-cta{
  display: inline-flex;
  align-items: stretch;
  border-radius: 0;
  overflow: hidden;
}
#home .home-s5-cta-btn,
#travelList .home-s5-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .48rem .9rem;
  font-size: 1.6rem;
  line-height: 1.1;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
}
#home .home-s5-cta-route,
#travelList .home-s5-cta-route{
  background: #0ea5a4;
  color: #fff;
}
#home .home-s5-cta-route:hover,
#travelList .home-s5-cta-route:hover{
  background: #0b8f8e;
  color: #fff;
}
#home .home-s5-cta-book,
#travelList .home-s5-cta-book{
  background: #16a34a;
  color: #fff;
}
#home .home-s5-cta-book:hover,
#travelList .home-s5-cta-book:hover{
  background: #11803a;
  color: #fff;
}

#home .home-s5-warning,
#travelList .home-s5-warning{
  position: absolute;
  bottom: .5rem;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 2;
}
#home .home-s5-warning li,
#travelList .home-s5-warning li{
  width: fit-content;
  font-size: .78rem;
  line-height: .9rem;
  padding: .45rem .55rem;
  margin-bottom: .3rem;
  color: #fff;
  text-align: left;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: .25rem !important;
  border-bottom-right-radius: .25rem !important;
}
#home .home-s5-from,
#travelList .home-s5-from{
  color: #64748b;
  margin-right: .25rem;
}
#home .home-s5-old,
#travelList .home-s5-old{
  color: #64748b;
  margin-right: .35rem;
}
#home .home-s5-new,
#travelList .home-s5-new{
  font-weight: 600;
}

/* ============ Tour List Model: Single Horizontal (model 1) ============ */
/* Goal (>=576px): image column height follows the row height when text grows,
   while keeping the image masked and undistorted (cover-crop). */
@media (min-width: 576px){
  .mt-single-horizontal .tour-sh-media-col,
  .tour-sh-media-col{
    display: flex;
    position: relative;
    align-self: stretch;
    min-height: 13rem;
  }
  .mt-single-horizontal .tour-sh-media-link,
  .tour-sh-media-link{
    /* Prevent portrait images from defining the row height.
       The row height should come from text/price columns; media fills it. */
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
  }
  /* Override main.css fixed heights (13rem/18rem/14rem) only for this model. */
  .mt-single-horizontal .tour-sh-media-col .tour-sh-media-overlay,
  .tour-sh-media-col .tour-sh-media-overlay{
    height: 100% !important;
    min-height: 13rem;
  }
  .mt-single-horizontal .tour-sh-media-mask,
  .tour-sh-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .mt-single-horizontal .tour-sh-media-mask picture,
  .tour-sh-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-horizontal .tour-sh-media-img,
  .tour-sh-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    object-fit: cover;
    object-position: center center;
  }

  /* Beat legacy rules like:
     .mt-single-horizontal .col .overlay picture{width:auto !important}
     .mt-single-horizontal .col .overlay picture img{width:auto !important}
     which can break cover-crop for portrait images. */
  .mt-single-horizontal .col .overlay.tour-sh-media-overlay picture,
  .col .overlay.tour-sh-media-overlay picture{
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-horizontal .col .overlay.tour-sh-media-overlay picture img.tour-sh-media-img,
  .col .overlay.tour-sh-media-overlay picture img.tour-sh-media-img{
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Mobile (<=575.98px): keep the image masked and kill any width/left "shift" hacks. */
@media (max-width: 575.98px){
  .mt-single-horizontal .tour-sh-media-col .tour-sh-media-overlay,
  .tour-sh-media-col .tour-sh-media-overlay{
    overflow: hidden;
  }
  .mt-single-horizontal .tour-sh-media-mask,
  .tour-sh-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-single-horizontal .tour-sh-media-mask picture,
  .tour-sh-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-horizontal .tour-sh-media-img,
  .tour-sh-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .mt-single-horizontal .col .overlay.tour-sh-media-overlay picture,
  .col .overlay.tour-sh-media-overlay picture{
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-horizontal .col .overlay.tour-sh-media-overlay picture img.tour-sh-media-img,
  .col .overlay.tour-sh-media-overlay picture img.tour-sh-media-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .mt-single-horizontal .tour-sh-mobile .tour-sh-meta{
    font-size: .88rem;
    line-height: 1.25;
  }
  .mt-single-horizontal .tour-sh-mobile .tour-meta-line{
    margin-bottom: .5rem !important;
  }
  .mt-single-horizontal .tour-sh-mobile .tour-sh-price{
    position: relative;
  }
  .mt-single-horizontal .tour-sh-mobile .tour-sh-price strong{
    font-size: 1.45rem;
  }
  .mt-single-horizontal .tour-sh-mobile .tour-sh-actions{
    gap: .6rem;
  }
  .mt-single-horizontal .tour-sh-mobile .tour-sh-actions > *{
    flex: 1 1 50%;
  }
}

/* ============ Tour List Model: Single Thin (model 2) ============ */
/* Goal (>=576px): image column height follows the row height when text grows,
   while keeping the image masked and undistorted (cover-crop). */
 @media (min-width: 576px){
   .mt-single-thin .tour-st-media-col{
     display: flex;
     padding-left: 0 !important;
   }
  .mt-single-thin .tour-st-media-link{
    display: flex;
    flex: 1 1 auto;
    width: 100%;
  }
  /* Override travel.css fixed heights (7rem/8rem/13rem) only for this model. */
  .mt-single-thin .tour-st-media-col a.tour-st-media-link .tour-st-media-overlay{
    height: 100% !important;
    min-height: 7rem;
  }
  .mt-single-thin .tour-st-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-single-thin .tour-st-media-col a.tour-st-media-link .tour-st-media-overlay .tour-st-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-thin .tour-st-media-col a.tour-st-media-link .tour-st-media-overlay .tour-st-media-mask .tour-st-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* Mobile (<=767.98px): keep the image masked and kill any width/left "shift" hacks. */
@media (max-width: 767.98px){
  /* Prevent subtle horizontal overflow from Bootstrap gutters inside the media row. */
  .mt-single-thin .tour-st-media-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  .mt-single-thin .tour-st-media-overlay{
    width: 100% !important;
  }

  .mt-single-thin .tour-st-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-single-thin .tour-st-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-single-thin .tour-st-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .mt-single-thin .tour-st-mobile .tour-st-price{
    position: relative;
  }
  .mt-single-thin .tour-st-mobile .tour-st-price strong{
    font-size: 1.45rem;
  }
  .mt-single-thin .tour-st-mobile .tour-st-actions{
    gap: .6rem;
    margin-top: .4rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
  }
  .mt-single-thin .tour-st-mobile .tour-st-actions > *{
    width: 100%;
  }
}

/* ============ Tour List Model: Double Horizontal (model 3) ============ */
/* Goal: remove image "shift" hacks (250% width + negative left) and make the
   image height follow the *whole card* height when the right column grows. */
.mt-double-horizontal .col > .row{
  align-items: stretch;
}
.mt-double-horizontal .tour-dh-media-col{
  display: flex;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.mt-double-horizontal .tour-dh-media-link{
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  align-items: stretch;
}
.mt-double-horizontal .tour-dh-media-overlay{
  width: 100%;
  height: 100% !important;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
}
.mt-double-horizontal .tour-dh-media-mask{
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex: 1 1 auto;
}
.mt-double-horizontal .tour-dh-media-mask picture{
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.mt-double-horizontal .tour-dh-media-img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (min-width: 576px){
  /* Keep a reasonable minimum height on wider layouts. */
  .mt-double-horizontal .tour-dh-media-overlay{
    min-height: 19rem;
  }
}

/* travel.css/theme has a mobile rule that forces `.overlay img` to `width:auto;height:auto !important`
   under `#travelList`, which breaks cover-crop. Override it only for this model. */
@media (max-width: 768px){
  #travelList .mt-double-horizontal .overlay img.tour-dh-media-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ============ Tour List Model: Double Thin (model 4) ============ */
/* Goal (>=576px): remove image "shift" hacks (200% width + negative left) and
   make image height follow the row height when text grows, while keeping it masked. */

/* Discount badge: remove absolute positioning so it can't overflow the price column. */
.mt-double-thin .js-tour-card-price span.bg-danger.position-absolute{
  position: static !important;
  display: inline-block;
  margin-top: 0 !important;
  margin-left: .35rem !important;
  transform: translateY(-0.2rem);
  white-space: nowrap;
}

@media (min-width: 576px){
  /* Make sure the inner row uses stretch so the image column follows the content column height. */
  .mt-double-thin .col > .row{
    align-items: stretch;
  }

  /* Ensure the left content column fills the full card height (which may be driven by the price column). */
  .mt-double-thin .tour-dt-body-col{
    display: flex;
  }
  .mt-double-thin .tour-dt-body-row{
    flex: 1 1 auto;
    width: 100%;
    align-items: stretch;
  }

  .mt-double-thin .tour-dt-media-col{
    display: flex;
  }
  .mt-double-thin .tour-dt-media-link{
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    align-items: stretch;
  }
  /* Override travel.css fixed heights (9rem/14rem) only for this model. */
  .mt-double-thin .tour-dt-media-col a.tour-dt-media-link .tour-dt-media-overlay{
    height: 100% !important;
    min-height: 9rem;
    width: 100%;
    flex: 1 1 auto;
  }
  .mt-double-thin .tour-dt-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-double-thin .tour-dt-media-col a.tour-dt-media-link .tour-dt-media-overlay .tour-dt-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  /* Kill "shift" positioning and rely on object-fit cover. */
  .mt-double-thin .tour-dt-media-col a.tour-dt-media-link .tour-dt-media-overlay .tour-dt-media-mask .tour-dt-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* travel.css/theme has a mobile rule that forces `.overlay img` to `width:auto;height:auto !important`
   under `#travelList`, which breaks cover-crop. Override it only for this model. */
@media (max-width: 768px){
  /* Ensure the mask renders as true cover-crop on mobile (kills any centering/shift hacks). */
  .mt-double-thin .tour-dt-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-double-thin .tour-dt-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  #travelList .mt-double-thin .overlay img.tour-dt-media-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .mt-double-thin .tour-dt-mobile-price-actions.has-price .tour-dt-mobile-actions.has-price{
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }

  .mt-double-thin .tour-dt-mobile-price-actions.no-price .tour-dt-mobile-actions-row{
    display: flex;
    gap: .6rem;
    justify-content: center;
    width: 100%;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }
  .mt-double-thin .tour-dt-mobile-price-actions.no-price .tour-dt-mobile-actions-row > *{
    flex: 1 1 50%;
    width: 100%;
  }
}

/* ============ Tour List Model: Double Vertical (model 5) ============ */
/* Goal:
   1) Keep warning tags (wtags) on top of the image (not clipped / not pushed below),
      and make their left edges square.
   2) Standardize the image rendering with mask + object-fit cover (no width/left hacks). */
/* Warning tags on top of the image (all breakpoints).
   NOTE: travel.css has `.mt-double-vertical .card .overlay ul.warning { bottom: -.8rem; }`
   which can clip the first tag. We override it only for this template via `.tour-dv-media-overlay`. */
.mt-double-vertical .card .overlay.tour-dv-media-overlay ul.warning,
.mt-double-vertical a.tour-dv-media-link .overlay ul.warning{
  position: absolute;
  bottom: .8rem !important;
  left: 0;
  z-index: 20;
  margin: 0;
}

.mt-double-vertical .card .overlay.tour-dv-media-overlay ul.warning li,
.mt-double-vertical a.tour-dv-media-link .overlay ul.warning li{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

@media (min-width: 576px){
  .mt-double-vertical .tour-dv-media-overlay{
    position: relative;
    /* Let warning tags overflow if needed; cropping is handled by the mask. */
    overflow: visible !important;
  }

  .mt-double-vertical .card .overlay .tour-dv-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mt-double-vertical .card .overlay .tour-dv-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  /* Kill 992px<= hacks (width:200% + left:-50%) and rely on object-fit cover. */
  .mt-double-vertical .card .overlay .tour-dv-media-mask picture .tour-dv-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* Mobile/tablet (<=992px): travel.css applies `width:200%` + `left:-50%` shift.
   Override it for this model to keep true cover-crop without horizontal drift. */
@media (max-width: 991.98px){
  .mt-double-vertical .card .overlay .tour-dv-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mt-double-vertical .card .overlay .tour-dv-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .mt-double-vertical .card .overlay .tour-dv-media-mask picture .tour-dv-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ============ Tour List Model: Triple (model 6) ============ */
/* Goal: fix warning tags being pushed below the image via negative bottom value,
   make left edges square (no rounding),
   and remove image "shift" hacks (125%/200% width + negative left). */
.mt-triple .card .overlay ul.warning{
  bottom: .2rem !important; /* override travel.css bottom:-.8rem */
  z-index: 20;
}

.mt-triple .card .overlay ul.warning li{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

@media (min-width: 576px){
  .mt-triple .card .overlay.tour-tr-media-overlay{
    overflow: hidden; /* keep cropping inside the mask */
  }
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  /* Kill travel.css width/left hacks and rely on object-fit cover. */
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask picture .tour-tr-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* Mobile: same fix for the image shift/empty-space issue (travel.css applies width/left hacks on small screens). */
@media (max-width: 575.98px){
  .mt-triple .card .overlay.tour-tr-media-overlay{
    overflow: hidden; /* keep cropping inside the mask */
  }
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .mt-triple .card .overlay.tour-tr-media-overlay .tour-tr-media-mask picture .tour-tr-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
  }

  .mt-triple .tour-tr-mobile .tour-tr-meta{
    font-size: .88rem;
    line-height: 1.25;
  }
  .mt-triple .tour-tr-mobile .tour-meta-line{
    margin-bottom: .5rem !important;
  }
  .mt-triple .tour-tr-mobile .tour-tr-price{
    position: relative;
  }
  .mt-triple .tour-tr-mobile .tour-tr-price strong{
    font-size: 1.45rem;
  }
  .mt-triple .tour-tr-mobile .tour-tr-actions{
    gap: .6rem;
  }
  .mt-triple .tour-tr-mobile .tour-tr-actions > *{
    flex: 1 1 50%;
  }
}

/* ============ Tour List Model: Quaternary (model 7) ============ */
/* Goal: fix warning tags being pushed below the image via negative bottom value,
   make left edges square (no rounding),
   and remove image "shift" hacks (200%/175% width + negative left). */
.mt-quaternary .card .overlay.tour-q4-media-overlay ul.warning{
  bottom: .2rem !important; /* override travel.css bottom:-.8rem */
  z-index: 20;
}

.mt-quaternary .card .overlay.tour-q4-media-overlay ul.warning li{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

@media (min-width: 576px){
  .mt-quaternary .card .overlay.tour-q4-media-overlay{
    overflow: hidden;
  }
  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  /* Kill travel.css width/left hacks and rely on object-fit cover. */
  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask picture .tour-q4-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* Mobile (<576px): travel.css uses `width:175%` + `left:-25%` shift. Override for this model. */
@media (max-width: 575.98px){
  .mt-quaternary .card .overlay.tour-q4-media-overlay{
    overflow: hidden;
  }

  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask picture{
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .mt-quaternary .card .overlay.tour-q4-media-overlay .tour-q4-media-mask picture .tour-q4-media-img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Tour lists: `.mobil-px` is intentionally a bit wide globally (1.4rem), but inside
   `#travelList` it makes cards look too narrow on small phones. Keep it closer to
   Bootstrap's default container padding. */
@media (max-width: 576px){
  #travelList .mobil-px{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Home showcase: categories (show_home_showcase=1) */
#travelList .cm-one h1.card-title,
#travelList .cm-two h1.card-title,
#travelList .cm-three h1.card-title,
#travelList .cm-four h1.card-title{
  font-size: 2rem !important;
}

/* Desc text should be left-aligned (not justified) */
#travelList .cm-one .card-body p,
#travelList .cm-two .card-body p,
#travelList .cm-three .card-body p,
#travelList .cm-four .card-body p{
  text-align: left !important;
}

/* Subtle borders + tighter spacing between image and text (all category showcase variants) */
#travelList .cm-one .card,
#travelList .cm-two .card,
#travelList .cm-four .card,
#travelList .cm-three .cardC{
  border: 1px solid rgba(15, 23, 42, 0.04) !important;
  border-radius: .5rem !important; /* Bootstrap-like rounded-4 */
  overflow: hidden;
  background: #fff;
}

#travelList .cm-one .card-body,
#travelList .cm-two .card-body,
#travelList .cm-three .card-body,
#travelList .cm-four .card-body{
  padding-top: .65rem !important;
  padding-left: .85rem !important;
  padding-right: .85rem !important;
  padding-bottom: .85rem !important;
}

#travelList .cm-one h1.card-title,
#travelList .cm-two h1.card-title,
#travelList .cm-three h1.card-title,
#travelList .cm-four h1.card-title{
  margin-bottom: .35rem !important;
}

#travelList .cm-one .card-body p,
#travelList .cm-two .card-body p,
#travelList .cm-three .card-body p,
#travelList .cm-four .card-body p{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.45;
}

/* Mobile: stabilize category media height and crop with a mask (no top/bottom gaps) */
@media (max-width: 576px){
  #travelList .cm-one h1.card-title,
  #travelList .cm-two h1.card-title,
  #travelList .cm-three h1.card-title,
  #travelList .cm-four h1.card-title{
    font-size: 1.4rem !important;
  }

  #travelList .cm-one .overlay,
  #travelList .cm-two .overlay,
  #travelList .cm-three .overlay,
  #travelList .cm-four .overlay{
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  #travelList .cm-one .overlay picture img.category-list-media,
  #travelList .cm-two .overlay picture img.category-list-media,
  #travelList .cm-three .overlay picture img.category-list-media,
  #travelList .cm-four .overlay picture img.category-list-media{
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Travel detail: slide + tags (mobile/desktop tweaks) */
/* Reduce top whitespace above the slide on small screens */
@media (max-width: 578px){
  #travelDetail #travel-slideVideo{
    margin-top: 1rem !important; /* was ~2rem in travel.css */
  }
}

/* Make slide images always cover the slide mask so heights are consistent */
#travelDetail #travel-slideVideo .carousel .carousel-inner .carousel-item picture img{
  width: 100% !important;
  height: 100% !important;
  /* travel.css centers the image with absolute + margin:auto, which can leave
     top/bottom gaps when the image is wide. Force full-bleed cover. */
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Slide controls: make them about half size */
#travelDetail #travel-slideVideo .carousel .carousel-control{
  width: 1.6rem !important;
  height: 1.6rem !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
#travelDetail #travel-slideVideo .carousel .carousel-control .carousel-control-icon i{
  font-size: .75rem !important;
}

/* Favorites icon a bit smaller (override fa-2x) */
#travelDetail #travel-slideVideo .favorite i{
  font-size: 1.2rem !important;
}

/* Hide warning tags on mobile inside the slide (keep them elsewhere) */
@media (max-width: 576px){
  #travelDetail #travel-slideVideo ul.warning{
    display: none !important;
  }
}

/* Travel detail tags: "3 + More" should be mobile-only. Desktop shows all tags. */
#travelDetail #travel-tags .travel-tags-wrap{
  position: relative;
}
#travelDetail #travel-tags .travel-tags-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* Default (desktop): do not show the More control, do not hide tags. */
#travelDetail #travel-tags .travel-tags-more{
  display: none;
}

@media (max-width: 576px){
  #travelDetail #travel-tags .travel-tags-toggle:not(:checked) ~ .travel-tags-list a:nth-of-type(n+4){
    display: none;
  }
  #travelDetail #travel-tags .travel-tags-more{
    display: inline-block;
    background: #111827;
    color: #fff;
    font-size: .8rem;
    padding: .3rem .55rem;
    margin-right: .1rem;
    margin-bottom: .3rem;
    border-radius: .35rem;
    cursor: pointer;
    user-select: none;
  }
  #travelDetail #travel-tags .travel-tags-more:hover{
    opacity: .85;
  }
  #travelDetail #travel-tags .travel-tags-more:after{
    content: 'More';
  }
  #travelDetail #travel-tags .travel-tags-toggle:checked ~ .travel-tags-list .travel-tags-more:after{
    content: 'Less';
  }
  #travelDetail #travel-tags .travel-tags-more{
    font-size: .7rem;
    padding: .2rem .45rem;
    margin-right: .07rem;
    margin-bottom: .07rem;
  }
}

/* Travel itinerary: collapse long intro (show first paragraph, then More/Less) */
#travelDetail #travel-itinerary .itinerary-desc{
  margin-bottom: .15rem;
}
#travelDetail #travel-itinerary .itinerary-desc-toggle{
  border: 0;
  background: transparent;
  padding: 0;
  color: #199aad;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  cursor: pointer;
  display: inline;
  margin-left: .35rem;
}
#travelDetail #travel-itinerary .itinerary-desc-toggle:hover{
  text-decoration: underline;
}

/* Travel itinerary (desktop): emphasize active titles and route badges */
@media (min-width: 769px){
  #travelDetail #travel-itinerary ul.itinerary-list li .title-active{
    font-size: 1.4rem !important;
    margin-top: -.3rem !important;
  }

  #travel-itinerary .itnx-daily .route-icon.active .itnx-route-badge,
  #travel-itinerary .itnx-daily .active .itnx-route-badge{
    min-width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }
}

/* Travel itinerary (mobile): daily route bodies should align with the title (avoid sitting under the vertical line). */
@media (max-width: 576px){
  /* Active title a bit smaller on phones */
  #travelDetail #travel-itinerary ul.itinerary-list li .title-active{
    font-size: 1.2rem !important;
    margin-top: -.2rem !important;
  }

  /* Package itinerary (tour type=2): day title alignment/size on mobile
     Inline <style> inside `travel_itinerary.tpl` loads after overrides.css, so we
     use a more specific selector to reliably override it. */
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li.itnx-day-item > a.itnx-day-head .route-title,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li.itnx-day-item > a.itnx-day-head .route-title.title-active,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li.itnx-day-item > a.itnx-day-head .route-title.title-active-first,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li.itnx-day-item > a.itnx-day-head .route-title.title-active-last{
    margin-left: .6rem !important;
  }

  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li.itnx-day-item.itnx-day-open > a.itnx-day-head .route-title{
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }

  /* Package + daily copy should not be justified on mobile */
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-day-body p,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-copy,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-copy p,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-text,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-short{
    text-align: left !important;
  }

  /* Package: hide the start/end decorative hooks on mobile */
  #travel-itinerary .itnx-package .itnx-inday-list::before,
  #travel-itinerary .itnx-package .itnx-inday-list::after{
    display: none !important;
  }

  /* Package: move preview under the copy and make it wider/taller (daily-like) */
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-side-mobile{
    margin-top: .6rem;
  }
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-side-mobile .itnx-inroute-preview-frame{
    height: 112px !important;
  }
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-inroute-side-mobile .itnx-inroute-preview-label{
    font-size: .74rem;
  }

  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left{
    margin-left: 0 !important; /* overrides inline `.daily { margin-left: 1.7rem; }` */
    padding-left: calc(22px + .55rem) !important; /* route-icon width + head gap */
  }

  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-body{
    gap: .85rem !important;
  }

  /* Daily route detail copy should be left-aligned (avoid justify). */
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-copy,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-copy p{
    text-align: left !important;
  }

  /* Destination/photo preview: make it aligned with copy width and slightly taller */
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-side{
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-preview-frame{
    height: 112px !important;
    border-radius: .55rem;
  }
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-daily li .collapse.daily.route-left .itnx-inroute-preview-label{
    font-size: .74rem;
  }
}

/* Travel itinerary: featured/day photo strips
   - Slightly taller images
   - On mobile, show a peek of the next item to make the strip feel like a slider
   - Add a bit more bottom breathing room */
#travelDetail #travel-itinerary .photos.itnx-daily-featured figure a picture,
#travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-day-photos figure a picture{
  height: 156px !important;
}

@media (max-width: 768px){
  #travelDetail #travel-itinerary .photos.itnx-daily-featured,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .collapse.itnx-day-body .itnx-day-photos,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .collapsing.itnx-day-body .itnx-day-photos{
    padding-bottom: .75rem !important;
  }

  #travelDetail #travel-itinerary .photos.itnx-daily-featured figure,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .collapse.itnx-day-body .itnx-day-photos figure,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .collapsing.itnx-day-body .itnx-day-photos figure{
    flex: 0 0 88% !important;
    width: 88% !important;
  }

  #travelDetail #travel-itinerary .photos.itnx-daily-featured figure a picture,
  #travelDetail #travel-itinerary ul.itinerary-list.itnx-package li .itnx-day-photos figure a picture{
    height: 188px !important;
  }
}

/* Travel detail: customer comments (testimonials) */
#travelDetail #travel-customerComments h3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#travelDetail #travel-customerComments h3 .btn-addReview{
  white-space: nowrap;
  margin-left: auto;
}

/* Keep meta (name/date/stars) tidy on all breakpoints */
#travelDetail #travel-customerComments ul li .testimonial-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem .6rem;
}
#travelDetail #travel-customerComments ul li .testimonial-meta h5{
  margin: 0 !important;
  float: none !important;
}
#travelDetail #travel-customerComments ul li .testimonial-meta .date{
  margin: 0 !important;
  float: none !important;
}
#travelDetail #travel-customerComments ul li .testimonial-meta .star-rating{
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 576px){
  /* Button under the title, left-aligned */
  #travelDetail #travel-customerComments h3{
    flex-direction: column;
    align-items: flex-start;
  }
  #travelDetail #travel-customerComments h3 .btn-addReview{
    margin-left: 0;
    margin-top: .35rem;
    margin-bottom: .75rem;
  }
  #travelDetail #travel-customerComments ul#LoadContent{
    margin-top: 0 !important;
  }

  /* Re-layout each comment: avatar + meta on top row, title+text full width below */
  #travelDetail #travel-customerComments ul li.media{
    display: grid !important;
    grid-template-columns: 4rem 1fr;
    column-gap: .85rem;
    row-gap: .35rem;
    align-items: start;
  }
  #travelDetail #travel-customerComments ul li.media > img{
    float: none !important;
    margin: 0 !important;
    grid-column: 1;
    grid-row: 1;
  }
  #travelDetail #travel-customerComments ul li.media > .media-body{
    float: none !important;
    width: auto !important;
    grid-column: 2;
    grid-row: 1;
    /* Let children become grid items when needed */
    display: contents;
  }
  #travelDetail #travel-customerComments ul li.media .testimonial-meta{
    grid-column: 2;
    grid-row: 1;
  }
  #travelDetail #travel-customerComments ul li.media .testimonial-copy{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #travelDetail #travel-customerComments ul li.media .testimonial-copy h6{
    margin-top: .35rem;
  }
}

/* Travel detail: FAQs + GoodToKnow collapse icon alignment
   When the question wraps to multiple lines, the default float-right icon can
   drop to the next line and overlap the text. Keep it top-right and reserve space. */
#travelDetail #travel-faqs a.collapse-title h5,
#travelDetail #travel-goodtoKnow a.collapse-title h5{
  position: relative;
  padding-right: 2.1rem; /* room for the chevron */
}
#travelDetail #travel-faqs a.collapse-title h5 i,
#travelDetail #travel-goodtoKnow a.collapse-title h5 i{
  float: none !important;
  position: absolute !important;
  right: 0;
  top: .15rem;
  width: 1.4rem;
  text-align: right;
}

/* Footer text (category/day/tags): show 2-sentence preview on mobile with a More/Less toggle. */
.footerintro .footerintro-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.footerintro .footerintro-preview{
  display: none;
}
.footerintro .footerintro-more{
  display: none;
}
.footerintro .footerintro-content p{
  margin: 0;
}
.footerintro .footerintro-content p + p{
  margin-top: .6rem;
}

@media (max-width: 576px){
  .footerintro.is-ready .footerintro-preview{
    display: block;
  }
  .footerintro.is-ready .footerintro-content{
    display: none;
  }
  .footerintro.is-ready .footerintro-toggle:checked ~ .footerintro-preview{
    display: none;
  }
  .footerintro.is-ready .footerintro-toggle:checked ~ .footerintro-content{
    display: block;
  }
  .footerintro.is-ready .footerintro-more{
    display: inline-block;
    font-weight: 600;
    text-decoration: underline;
    margin-top: .35rem;
    white-space: nowrap;
    cursor: pointer;
  }
  .footerintro.is-ready .footerintro-more:after{
    content: 'More';
  }
  .footerintro.is-ready .footerintro-toggle:checked ~ .footerintro-more:after{
    content: 'Less';
  }
}