﻿/* ================================================================
   TUT TRAVELS – COMPLETE MASTER CSS
   PHASE 1 UPGRADE
   Great Vibes + SVG + Mobile Overflow + Image Stability
   Dashboard-safe
   #D15D4D Terracotta | #1C2538 Navy | #6495ED Sky | #FFFFFF White
================================================================ */

/* ── FONTS ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

html{
  color-scheme:light only;
}

:root{
  --terra:#D15D4D;
  --terra-dk:#b84a3a;
  --terra-lt:rgba(209,93,77,.08);

  --navy:#1C2538;
  --navy2:#2a3650;
  --navy-lt:rgba(28,37,56,.06);

  --sky:#6495ED;
  --sky-lt:rgba(100,149,237,.1);

  --white:#FFFFFF;

  --g1:#f8f7f4;
  --g2:#eeecea;
  --g3:#d2cfc8;

  --body:#2d2d2d;
  --muted:#787672;

  /* PHASE 1: Great Vibes */
  --script:'Allura','Caginari','Cagliostro','Montserrat Alternates','Trebuchet MS',cursive;
  --sans:'Montserrat',Arial,sans-serif;

  --r:12px;
  --rlg:20px;

  --sh:0 4px 24px rgba(28,37,56,.09);
  --sh2:0 16px 56px rgba(28,37,56,.15);
  --sh3:0 32px 80px rgba(28,37,56,.2);
}

/* ── GLOBAL RESET ────────────────────────────── */

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

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  color:var(--body);
  background:#fff;
  overflow-x:hidden;
  max-width:100%;
  min-width:0;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body,
main,
section,
header,
footer,
nav,
aside,
article,
div{
  min-width:0;
}

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

svg{
  display:block;
  max-width:100%;
}

button,
input,
select,
textarea{
  font-family:var(--sans);
  max-width:100%;
}

button{
  -webkit-appearance:none;
  appearance:none;
}

a{
  text-decoration:none;
  color:inherit;
  overflow-wrap:anywhere;
}

ul{
  list-style:none;
}

iframe,
video{
  max-width:100%;
}


/* ── UTILS ───────────────────────────────────── */

.wrap{
  width:100%;
  max-width:1260px;
  margin:0 auto;
  padding:0 28px;
}

.sp{padding:96px 0}
.sp-sm{padding:60px 0}
.sp-xs{padding:40px 0}

.tc{text-align:center}

.eyebrow{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terra);
  margin-bottom:10px;
  display:block;
}

.eyebrow.sky{
  color:var(--sky);
}

.h2{
  font-size:clamp(1.8rem,3.6vw,2.9rem);
  font-weight:800;
  color:var(--navy);
  line-height:1.15;
  margin-bottom:18px;
}

.h2 em{
  font-style:normal;
  font-family:var(--script);
  font-weight:400;
  color:var(--terra);
  font-size:1.2em;
  line-height:1;
}

.h2.wh{
  color:#fff;
}

.h2.wh em{
  color:var(--sky);
}

.lead{
  color:var(--muted);
  font-size:.93rem;
  line-height:1.75;
}

.lead.center{
  max-width:560px;
  margin:0 auto;
}


/* ── BUTTONS ─────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:13px 30px;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:
    background .25s,
    color .25s,
    border-color .25s,
    transform .25s,
    box-shadow .25s;
  white-space:nowrap;
  max-width:100%;
}

.btn-terra{
  background:var(--terra);
  color:#fff;
  box-shadow:0 4px 16px rgba(209,93,77,.28);
}

.btn-terra:hover{
  background:var(--terra-dk);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(209,93,77,.38);
}

.btn-navy{
  background:var(--navy);
  color:#fff;
}

.btn-navy:hover{
  background:var(--navy2);
}

.btn-sky{
  background:var(--sky);
  color:#fff;
}

.btn-ghost{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.1);
  border-color:#fff;
}

.btn-outline{
  background:transparent;
  color:var(--navy);
  border:2px solid var(--navy);
}

.btn-outline:hover{
  background:var(--navy);
  color:#fff;
}

.btn-wa{
  background:#25d366;
  color:#fff;
  box-shadow:0 4px 16px rgba(37,211,102,.3);
}

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

.btn-lg{
  padding:16px 44px;
  font-size:.92rem;
}

.btn-sm{
  padding:8px 20px;
  font-size:.72rem;
}

.btn-full{
  width:100%;
}


/* ── SVG SYSTEM ──────────────────────────────── */

.svg-icon{
  width:1.15em;
  height:1.15em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:inherit;
  line-height:1;
}

.svg-icon svg{
  width:100%;
  height:100%;
  display:block;
  margin:auto;
  fill:currentColor;
  stroke:currentColor;
  overflow:visible;
}

.svg-icon svg[fill="none"]{
  fill:none;
}

.svg-icon svg path,
.svg-icon svg circle,
.svg-icon svg rect,
.svg-icon svg line,
.svg-icon svg polyline,
.svg-icon svg polygon{
  vector-effect:non-scaling-stroke;
}

.wc-icon.svg-icon,
.vi.svg-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--terra);
}

.stat-icon.svg-icon{
  color:inherit;
}

.cd-icon.svg-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.tb-icon.svg-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 3px;
}

.ai.svg-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

.ai.svg-icon svg{
  width:18px;
  height:18px;
}


/* ── NAVBAR ──────────────────────────────────── */

.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:999;
  transition:background .3s,box-shadow .3s;
}

.navbar.solid{
  background:var(--navy);
  box-shadow:0 2px 20px rgba(28,37,56,.3);
}

.nav-inner{
  width:100%;
  max-width:1260px;
  margin:0 auto;
  padding:0 28px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  min-width:0;
}

.logo-mark{
  display:flex;
  align-items:center;
  line-height:1;
  flex-shrink:0;
}

.lt1,
.lu,
.lt2{
  font-weight:900;
  font-size:1.9rem;
  color:#fff;
  letter-spacing:-2px;
}

.logo-word{
  font-family:var(--script);
  font-size:2.3rem;
  line-height:1;
  color:var(--terra);
  margin-left:7px;
  font-weight:400;
  letter-spacing:.01em;
  font-style:normal;
  text-transform:none;
  white-space:nowrap;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  justify-content:center;
  min-width:0;
}

.nav-links>li{
  position:relative;
  min-width:0;
}

.nav-links>li>a{
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 12px;
  color:rgba(255,255,255,.82);
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:8px;
  transition:color .2s,background .2s;
  white-space:nowrap;
}

.nav-links>li>a:hover,
.nav-links>li>a.active{
  color:#fff;
  background:rgba(255,255,255,.08);
}


/* ── DROPDOWN ────────────────────────────────── */

.has-drop .dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--navy);
  border-radius:var(--r);
  box-shadow:var(--sh3);
  padding:8px;
  min-width:240px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s,transform .25s;
  z-index:1000;
}

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

.dropdown li a{
  display:block;
  padding:10px 14px;
  color:rgba(255,255,255,.72);
  font-size:.78rem;
  font-weight:500;
  border-radius:8px;
  transition:all .2s;
}

.dropdown li a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  padding-left:18px;
}


/* ── NAV RIGHT ───────────────────────────────── */

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.lang-btn{
  background:rgba(255,255,255,.1);
  color:#fff;
  border:none;
  padding:6px 14px;
  border-radius:50px;
  font-size:.7rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.06em;
  transition:background .2s;
}

.lang-btn:hover{
  background:rgba(255,255,255,.2);
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  flex-shrink:0;
}

.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  transition:all .3s;
}

.hamburger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2){
  opacity:0;
}

.hamburger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}


/* ── MOBILE MENU ─────────────────────────────── */

.mob-menu{
  display:none;
  width:100%;
  background:var(--navy);
  padding:12px 24px 20px;
  overflow:hidden;
}

.mob-menu.open{
  display:block;
}

.mob-menu li{
  border-bottom:1px solid rgba(255,255,255,.07);
}

.mob-menu a{
  display:block;
  padding:12px 0;
  color:rgba(255,255,255,.8);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* ── HERO ────────────────────────────────────── */

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(
      150deg,
      rgba(28,37,56,.9) 0%,
      rgba(28,37,56,.55) 50%,
      rgba(209,93,77,.2) 100%
    ),
    url('https://images.unsplash.com/photo-1568322445389-f64ac2515020?w=1800&q=80')
    center/cover no-repeat;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  display:none;
}

.hero-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:40%;
  z-index:1;
  background:linear-gradient(
    to top,
    rgba(28,37,56,.65),
    transparent
  );
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  width:100%;
  padding:0 24px;
  animation:hIn 1.1s ease both;
}

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

.hero-eyebrow{
  font-size:clamp(.7rem,.62rem + .32vmin,.88rem);
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sky);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.hero-eyebrow::before,
.hero-eyebrow::after{
  content:'';
  flex:1;
  max-width:52px;
  height:1px;
  background:rgba(100,149,237,.45);
}

.hero-h1{
  font-size:clamp(2.3rem,1.9rem + 4vmin,5.6rem);
  font-weight:900;
  color:#fff;
  line-height:1.06;
  margin-bottom:6px;
  overflow-wrap:break-word;
}

.hero-h1 .accent{
  color:var(--terra);
  display:block;
}

.hero-script{
  font-family:var(--script)!important;
  font-size:clamp(1.7rem,1.4rem + 2.9vmin,4rem);
  font-weight:400;
  line-height:1;
  color:#fff;
  display:block;
  margin-bottom:20px;
}

.hero-sub{
  color:rgba(255,255,255,.72);
  font-size:clamp(.95rem,.87rem + .3vmin,1.15rem);
  font-weight:300;
  margin-bottom:38px;
}

.hero-btns{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-scroll{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.35);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  z-index:2;
  white-space:nowrap;
}

.scroll-line{
  width:1px;
  height:40px;
  background:linear-gradient(
    transparent,
    rgba(255,255,255,.4)
  );
  animation:sp 2s ease infinite;
}

/* ── HOME SLIDER — Hidden Trails hero + recommendations ────────── */

.recommendations{
  position:relative;
  background:var(--navy);
  isolation:isolate;
}

.rec-slider{
  position:relative;
  width:100%;
  height:640px;
  max-height:78vh;
  overflow:hidden;
}

.rec-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .8s cubic-bezier(.65,0,.35,1);
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.rec-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* The "Hidden Trails" hero slide — always first, centered like the old hero */
.rec-slide.hero-slide{
  justify-content:center;
}

.rec-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    100deg,
    rgba(28,37,56,.92) 0%,
    rgba(28,37,56,.62) 45%,
    rgba(28,37,56,.25) 100%
  );
}

.rec-content{
  position:relative;
  z-index:2;
  max-width:640px;
  padding:0 8vw;
  animation:hIn .9s ease both;
}

.rec-eyebrow{
  display:inline-flex;
  align-items:center;
  font-size:clamp(.85rem,.75rem + .4vmin,1.05rem);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  background:var(--terra);
  padding:8px 20px;
  border-radius:50px;
  box-shadow:0 6px 20px rgba(209,93,77,.45);
  margin-bottom:18px;
}

/* Recommendation badge colors — matches the "Label Color" choice from the
   admin dashboard (was previously ignored, so every slide showed orange). */
.rec-eyebrow.terra{background:var(--terra);box-shadow:0 6px 20px rgba(209,93,77,.45)}
.rec-eyebrow.sky{background:var(--sky);box-shadow:0 6px 20px rgba(100,149,237,.45)}
.rec-eyebrow.sand{background:#8f6a35;box-shadow:0 6px 20px rgba(143,106,53,.45)}
.rec-eyebrow.navy{background:var(--navy);box-shadow:0 6px 20px rgba(28,37,56,.45)}
.rec-eyebrow.green{background:#2e9e6b;box-shadow:0 6px 20px rgba(46,158,107,.45)}
.rec-eyebrow.gold{background:#c8952d;box-shadow:0 6px 20px rgba(200,149,45,.45)}
.rec-eyebrow.red{background:#c0392b;box-shadow:0 6px 20px rgba(192,57,43,.45)}
.rec-eyebrow.dark{background:#111827;box-shadow:0 6px 20px rgba(17,24,39,.45)}

.rec-title{
  font-size:clamp(1.9rem,1.3rem + 3vmin,3.2rem);
  font-weight:800;
  color:#fff;
  line-height:1.15;
  margin-bottom:20px;
}

.rec-stats{
  display:flex;
  gap:32px;
  margin-bottom:28px;
}

.rec-stat{
  display:flex;
  flex-direction:column;
}

.rec-stat strong{
  font-size:clamp(1.35rem,1.1rem + 1vmin,1.75rem);
  font-weight:800;
  color:#fff;
}

.rec-stat span{
  font-size:clamp(.66rem,.6rem + .2vmin,.78rem);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.rec-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(28,37,56,.35);
  color:#fff;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}

.rec-arrow:hover{
  background:var(--terra);
  border-color:var(--terra);
}

.rec-prev{ left:24px; }
.rec-next{ right:24px; }

.rec-dots{
  position:absolute;
  z-index:3;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}

.rec-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  border:none;
  cursor:pointer;
  padding:0;
  transition:background .25s ease,transform .25s ease;
}

.rec-dot.active{
  background:var(--terra);
  transform:scale(1.2);
}

@media(max-width:768px){
  .rec-content{ padding:0 28px; max-width:100%; }
  .rec-stats{ gap:22px; margin-bottom:22px; }
  .rec-arrow{
    width:36px;
    height:36px;
    font-size:.8rem;
  }
  .rec-prev{ left:10px; }
  .rec-next{ right:10px; }
}

@keyframes sp{
  0%,100%{opacity:.25}
  50%{opacity:1}
}


/* ── STATS BAR ───────────────────────────────── */

.stats-bar{
  background:var(--navy);
  padding:0;
  overflow:hidden;
}

.stats-inner{
  display:flex;
  flex-wrap:wrap;
}

.stat-item{
  flex:1;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 28px;
  border-right:1px solid rgba(255,255,255,.07);
  min-width:0;
}

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

.stat-icon{
  font-size:2.1rem;
  width:56px;
  height:56px;
  border-radius:10px;
  background:rgba(255,255,255,.1);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.stat-icon i{
  color:#fff;
}

.stat-num{
  display:block;
  font-size:1.6rem;
  font-weight:900;
  color:#fff;
  line-height:1;
}

.stat-lbl{
  font-size:.68rem;
  color:rgba(255,255,255,.45);
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* ── TOUR CARDS ──────────────────────────────── */

.tours-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:48px;
}

.tc-wrap{
  min-width:0;
  border-radius:var(--rlg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--sh);
  transition:transform .3s,box-shadow .3s;
  display:flex;
  flex-direction:column;
}

.tc-wrap:hover{
  transform:translateY(-7px);
  box-shadow:var(--sh2);
}

.tc-img{
  width:100%;
  height:auto;
  min-height:210px;
  aspect-ratio:16/10;
  position:relative;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.tc-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(28,37,56,.5),
    transparent 60%
  );
  pointer-events:none;
}

.tc-badges{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  gap:6px;
  z-index:1;
  flex-wrap:wrap;
  max-width:calc(100% - 24px);
}

.tc-badge{
  padding:3px 11px;
  border-radius:50px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

.tc-badge.terra{background:var(--terra)}
.tc-badge.sky{background:var(--sky)}
.tc-badge.sand{background:#8f6a35;color:#fff}
.tc-badge.navy{background:var(--navy)}
.tc-badge.green{background:#2e9e6b}
.tc-badge.gold{background:#c8952d}
.tc-badge.red{background:#c0392b}
.tc-badge.dark{background:#111827}
.tc-badge.blue{background:var(--sky)}

.tc-price-tag{
  position:absolute;
  bottom:12px;
  right:12px;
  background:rgba(28,37,56,.85);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  padding:5px 12px;
  border-radius:8px;
  backdrop-filter:blur(6px);
  z-index:1;
}

.tc-body{
  padding:22px 22px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.tc-body h3{
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:7px;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.tc-body p{
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:14px;
  line-height:1.65;
  flex:1;
  overflow-wrap:anywhere;
}

.tc-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:.7rem;
  color:var(--muted);
  margin-bottom:18px;
}

.tc-meta span{
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:500;
  min-width:0;
}

.tc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  min-width:0;
}

.tc-price{
  font-size:1.1rem;
  font-weight:900;
  color:var(--terra);
}

.tc-price small{
  font-size:.68rem;
  font-weight:400;
  color:var(--muted);
}


/* ── FILTER BAR ──────────────────────────────── */

.filter-bar{
  background:#fff;
  border-bottom:1.5px solid var(--g2);
  padding:16px 0;
  position:sticky;
  top:68px;
  z-index:90;
  box-shadow:0 2px 12px rgba(28,37,56,.06);
}

.filter-inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

.filter-sel{
  max-width:100%;
  padding:9px 34px 9px 14px;
  border:1.5px solid var(--g3);
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  color:var(--navy);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231C2538' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center no-repeat;
  appearance:none;
  cursor:pointer;
  outline:none;
  transition:border-color .2s;
}

.filter-sel:focus{
  border-color:var(--terra);
}

.filter-count{
  margin-left:auto;
  font-size:.75rem;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

.tc-wrap[data-hidden="true"]{
  display:none;
}


/* ── TOUR DETAIL PAGE ────────────────────────── */

.tour-hero{
  position:relative;
  padding-top:68px;
}

.tour-gallery{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-rows:300px 200px;
  gap:6px;
  max-height:500px;
  overflow:hidden;
}

.tg-main,
.tg-sm{
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.tg-main{
  grid-row:1/3;
  border-radius:var(--rlg) 0 0 var(--rlg);
  position:relative;
}

.tg-sm{
  position:relative;
}

.tg-sm:first-of-type{
  border-radius:0 var(--rlg) 0 0;
}

.tg-sm:last-of-type{
  border-radius:0 0 var(--rlg) 0;
}

.tg-overlay{
  position:absolute;
  inset:0;
  background:rgba(28,37,56,.15);
  transition:background .3s;
  cursor:zoom-in;
}

.tg-overlay:hover{
  background:rgba(28,37,56,.05);
}

.tg-count-btn{
  position:absolute;
  bottom:14px;
  right:14px;
  background:rgba(28,37,56,.75);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  padding:6px 14px;
  border-radius:8px;
  backdrop-filter:blur(4px);
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,.2);
}


/* ── DETAIL LAYOUT ───────────────────────────── */

.detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:48px;
  align-items:start;
  /* Explicit 4-value padding (not just padding-top) so this always wins
     over .sp-sm's `padding:60px 0` regardless of which class comes first
     in the markup. Before this fix, .sp-sm's shorthand zeroed out the
     left/right padding on every tour detail page (the only place `.wrap`
     and `.sp-sm` are combined directly on the same element instead of
     .sp-sm going on an outer <section> with its own inner .wrap) — so at
     any viewport under ~1260px the booking box and content lost their
     side padding entirely and ran edge-to-edge with square corners. */
  padding:40px 28px 60px;
}

.detail-main{
  min-width:0;
}


/* ── TABS ────────────────────────────────────── */

.tour-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--g2);
  margin-bottom:32px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.ttab{
  flex:0 0 auto;
  padding:12px 22px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .2s,border-color .2s;
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
  white-space:nowrap;
}

.ttab.active{
  color:var(--terra);
  border-bottom-color:var(--terra);
}

.tab-panel{
  display:none;
  min-width:0;
}

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


/* ── ITINERARY ───────────────────────────────── */

.itin-item{
  display:flex;
  gap:18px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--g2);
  min-width:0;
}

.itin-item:last-child{
  border-bottom:none;
}

.itin-num{
  width:38px;
  height:38px;
  background:var(--terra);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:900;
  flex-shrink:0;
  margin-top:2px;
}

.itin-num.sky{
  background:var(--sky);
}

.itin-text{
  min-width:0;
}

.itin-text h4{
  font-size:.9rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:5px;
  overflow-wrap:anywhere;
}

.itin-text p{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.65;
  overflow-wrap:anywhere;
}


/* ── INCLUDES / EXCLUDES ─────────────────────── */

.ie-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 24px;
}

.ie-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.82rem;
  color:var(--body);
  line-height:1.5;
  min-width:0;
  overflow-wrap:anywhere;
}

.ie-icon{
  font-size:.9rem;
  flex-shrink:0;
  margin-top:2px;
}


/* ── HIGHLIGHTS ──────────────────────────────── */

.highlight-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hl-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.85rem;
  color:var(--body);
  min-width:0;
}

.hl-icon{
  color:var(--terra);
  font-size:1rem;
  flex-shrink:0;
  margin-top:2px;
}


/* ── NOTES ───────────────────────────────────── */

.notes-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.85rem;
  color:var(--muted);
  padding:8px 0;
  border-bottom:1px solid var(--g2);
  line-height:1.6;
  overflow-wrap:anywhere;
}

.notes-list li::before{
  content:'ℹ️';
  flex-shrink:0;
  font-size:.9rem;
}


/* ── PHOTOS TAB ──────────────────────────────── */

.photos-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.photos-grid div{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  min-width:0;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  border-radius:var(--r);
  cursor:zoom-in;
  transition:transform .3s;
  overflow:hidden;
}

.photos-grid div:hover{
  transform:scale(1.03);
}


/* ── BOOKING SIDEBAR ─────────────────────────── */

.booking-box{
  background:#fff;
  border-radius:var(--rlg);
  box-shadow:var(--sh3);
  position:sticky;
  top:88px;
  min-width:0;
}

.bb-header{
  background:var(--navy);
  padding:20px 24px;
  /* Rounded on its own instead of relying on overflow:hidden on the
     parent .booking-box — an overflow:hidden ancestor was clipping
     form content (dropdown/select popups, focus outlines, validation
     messages) that needs to render outside the box's bounds. */
  border-radius:var(--rlg) var(--rlg) 0 0;
}

.bb-price{
  font-size:1.8rem;
  font-weight:900;
  color:#fff;
}

.bb-price small{
  font-size:.8rem;
  font-weight:400;
  color:rgba(255,255,255,.6);
}

.bb-sub{
  font-size:.72rem;
  color:rgba(255,255,255,.55);
  margin-top:2px;
}

.bb-body{
  padding:24px;
}

.bb-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.bb-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1.5px solid var(--g2);
  border-radius:var(--r);
  cursor:pointer;
  transition:border-color .2s,background .2s;
  font-size:.82rem;
  min-width:0;
}

.bb-option.selected{
  border-color:var(--terra);
  background:var(--terra-lt);
}

.bb-option strong{
  color:var(--navy);
  overflow-wrap:anywhere;
}

.bb-option span{
  color:var(--terra);
  font-weight:700;
  white-space:nowrap;
}

.divider{
  height:1px;
  background:var(--g2);
  margin:18px 0;
}

.form-g{
  margin-bottom:14px;
  min-width:0;
}

.form-g label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:6px;
}

.form-g input,
.form-g select,
.form-g textarea{
  width:100%;
  max-width:100%;
  padding:10px 14px;
  border:1.5px solid var(--g2);
  border-radius:8px;
  font-size:.85rem;
  color:var(--body);
  outline:none;
  transition:border-color .2s;
  background:#fff;
}

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

.form-g textarea{
  resize:vertical;
  min-height:80px;
}

.book-submit{
  width:100%;
  padding:15px;
  background:var(--terra);
  color:#fff;
  border:none;
  border-radius:50px;
  font-family:var(--sans);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,transform .2s;
  box-shadow:0 4px 16px rgba(209,93,77,.28);
}

.book-submit:hover{
  background:var(--terra-dk);
  transform:translateY(-2px);
}

.wa-book{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px;
  background:#25d366;
  color:#fff;
  border-radius:50px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:10px;
  cursor:pointer;
  transition:background .2s,transform .2s;
  text-decoration:none;
  width:100%;
}

.wa-book:hover{
  background:#1fad56;
  transform:translateY(-2px);
}

.trust-badges{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--g2);
}

.tb{
  text-align:center;
  font-size:.68rem;
  color:var(--muted);
  font-weight:600;
}

.tb-icon{
  font-size:1.4rem;
  display:block;
  margin-bottom:3px;
}


/* ── REVIEWS ─────────────────────────────────── */

.review-card{
  background:var(--g1);
  border-radius:var(--r);
  padding:20px;
  margin-bottom:14px;
}

.r-stars{
  color:#f59e0b;
  font-size:.85rem;
  margin-bottom:8px;
}

.r-text{
  font-size:.84rem;
  color:var(--body);
  font-style:italic;
  margin-bottom:12px;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.r-text::before{
  content:'"';
  color:var(--terra);
  font-size:1.6rem;
  line-height:0;
  vertical-align:-.4rem;
  margin-right:2px;
}

.r-author{
  font-size:.76rem;
  font-weight:700;
  color:var(--navy);
}

.r-date{
  font-size:.7rem;
  color:var(--muted);
  margin-left:6px;
}


/* ── FAQ ─────────────────────────────────────── */

.faq-item{
  border-bottom:1px solid var(--g2);
}

.faq-q{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:16px 0;
  font-family:var(--sans);
  font-size:.87rem;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.faq-arrow{
  transition:transform .3s;
  font-size:1rem;
  color:var(--terra);
  flex-shrink:0;
}

.faq-q.open .faq-arrow{
  transform:rotate(180deg);
}

.faq-ans{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-ans.open{
  max-height:300px;
}

.faq-ans p{
  padding:2px 0 16px;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.7;
  overflow-wrap:anywhere;
}


/* ── DESTINATIONS GRID ───────────────────────── */

.dest-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:48px;
}

.dest-card{
  border-radius:var(--rlg);
  overflow:hidden;
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  min-height:260px;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  box-shadow:var(--sh2);
  cursor:pointer;
  transition:transform .3s;
}

.dest-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(28,37,56,.85) 0%,
    rgba(28,37,56,.15) 60%,
    transparent 100%
  );
  transition:opacity .3s;
  pointer-events:none;
}

.dest-card:hover{
  transform:scale(1.02);
}

.dest-info{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:24px;
  z-index:1;
  min-width:0;
}

.dest-info h3{
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
  overflow-wrap:anywhere;
}

.dest-info p{
  font-size:.78rem;
  color:rgba(255,255,255,.7);
  margin-bottom:12px;
  overflow-wrap:anywhere;
}

.dest-meta2{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:.7rem;
  color:rgba(255,255,255,.65);
}

.dest-count{
  position:absolute;
  top:14px;
  right:14px;
  background:var(--terra);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  padding:4px 11px;
  border-radius:50px;
  z-index:1;
}


/* ── BLOG ────────────────────────────────────── */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:48px;
}

.blog-card{
  min-width:0;
  border-radius:var(--rlg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--sh);
  transition:transform .3s,box-shadow .3s;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh2);
}

.blog-img{
  width:100%;
  height:auto;
  min-height:190px;
  aspect-ratio:16/10;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

.blog-cat{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--navy);
  color:#fff;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:50px;
}

.blog-body{
  padding:22px;
  min-width:0;
}

.blog-meta{
  font-size:.7rem;
  color:var(--muted);
  margin-bottom:9px;
}

.blog-body h3{
  font-size:.95rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.blog-body p{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:14px;
  overflow-wrap:anywhere;
}

.read-more{
  font-size:.73rem;
  font-weight:700;
  color:var(--terra);
  letter-spacing:.06em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:5px;
}


/* ── BLOG FEATURE ────────────────────────────── */

.blog-feat-img{
  width:100%;
  height:auto;
  min-height:360px;
  aspect-ratio:16/11;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.bsc-img{
  width:100%;
  aspect-ratio:1/1;
  height:auto;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
}

.blog-side-card{
  min-width:0;
}


/* ── ABOUT / WHY TUT ─────────────────────────── */

.why-section{
  background:var(--navy);
  padding:96px 0;
  overflow:hidden;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:48px;
}

.why-card{
  min-width:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  padding:26px 20px;
  text-align:center;
  transition:background .3s,border-color .3s;
}

.why-card:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(100,149,237,.25);
}

.wc-icon{
  font-size:2.1rem;
  margin-bottom:13px;
  display:block;
  color:#fff;
}

.why-card h4{
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:7px;
}

.why-card p{
  color:rgba(255,255,255,.48);
  font-size:.78rem;
  line-height:1.6;
  overflow-wrap:anywhere;
}


/* ── TESTIMONIALS ────────────────────────────── */

.testi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:48px;
}

.testi-card{
  min-width:0;
  background:#fff;
  border-radius:var(--r);
  padding:26px;
  box-shadow:var(--sh);
}

.testi-q{
  font-size:.88rem;
  font-style:italic;
  color:var(--body);
  line-height:1.8;
  margin-bottom:18px;
  padding-left:22px;
  position:relative;
  overflow-wrap:anywhere;
}

.testi-q::before{
  content:'"';
  position:absolute;
  left:0;
  top:-5px;
  font-size:2.2rem;
  line-height:1;
  color:var(--terra);
  font-style:normal;
}

.testi-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.testi-av{
  width:42px;
  height:42px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  overflow:hidden;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
}

.testi-row strong{
  display:block;
  font-size:.84rem;
  color:var(--navy);
}

.testi-row span{
  font-size:.72rem;
  color:var(--muted);
}

.testi-stars{
  color:#f59e0b;
  font-size:.78rem;
  margin-top:2px;
}


/* ── PHOTO GALLERY ───────────────────────────── */

.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:200px 200px;
  gap:8px;
  border-radius:var(--rlg);
  overflow:hidden;
  margin-top:48px;
}

.gm-item{
  min-width:0;
  min-height:190px;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
  cursor:zoom-in;
  transition:filter .3s;
  overflow:hidden;
}

.gm-item:hover{
  filter:brightness(1.08);
}

.gm-item:nth-child(1){
  grid-column:1/2;
  grid-row:1/3;
}

.gm-item:nth-child(5){
  grid-column:4/5;
  grid-row:1/3;
}

.gallery-mosaic.cms-gallery{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  grid-template-rows:none;
}

.gallery-mosaic.cms-gallery .gm-item{
  min-height:190px;
  grid-column:auto!important;
  grid-row:auto!important;
}


/* ── CTA ─────────────────────────────────────── */

.cta-sec{
  background:linear-gradient(
    135deg,
    var(--terra),
    var(--terra-dk)
  );
  padding:96px 0;
  text-align:center;
  overflow:hidden;
}

.cta-sec h2{
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  color:#fff;
  margin-bottom:12px;
}

.cta-sec h2 em{
  font-style:normal;
  font-family:var(--script)!important;
  font-size:1.3em;
  font-weight:400;
}

.cta-sec p{
  color:rgba(255,255,255,.78);
  margin-bottom:34px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  font-size:.93rem;
}

.cta-sec .btn-navy{
  box-shadow:0 4px 20px rgba(28,37,56,.3);
}


/* ── CONTACT ─────────────────────────────────── */

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:60px;
  align-items:start;
}

.contact-detail{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
  min-width:0;
}

.cd-icon{
  width:44px;
  height:44px;
  background:var(--terra);
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
}

.cd-icon.sky{background:var(--sky)}
.cd-icon.navy{background:var(--navy)}
.cd-icon.wa{background:#25d366}

.cd-detail{
  min-width:0;
}

.cd-detail strong{
  display:block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:2px;
}

.cd-detail span,
.cd-detail a{
  font-size:.85rem;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.cd-detail a{
  transition:color .2s;
}

.cd-detail a:hover{
  color:var(--terra);
}

.cf-box{
  min-width:0;
  background:#fff;
  border-radius:var(--rlg);
  padding:36px;
  box-shadow:var(--sh3);
}

.cf-box h3{
  font-size:1.25rem;
  font-weight:800;
  color:var(--navy);
  margin-bottom:22px;
}

.form-row2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.form-success{
  display:none;
  text-align:center;
  padding:28px 0;
}

.form-success .suc-icon{
  font-size:3rem;
  display:block;
  margin-bottom:12px;
}

.form-success h4{
  font-size:1.1rem;
  font-weight:800;
  color:var(--navy);
  margin-bottom:6px;
}

.form-success p{
  font-size:.84rem;
  color:var(--muted);
}


/* ── PAGE HERO ───────────────────────────────── */

.page-hero{
  position:relative;
  padding:152px 0 68px;
  text-align:center;
  overflow:hidden;
}

.ph-bg{
  position:absolute;
  inset:0;
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
}

.ph-ov{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(28,37,56,.88) 0%,
    rgba(28,37,56,.62) 100%
  );
}

.ph-content{
  position:relative;
  z-index:2;
  min-width:0;
}

.ph-content .eyebrow{
  color:var(--sky);
}

.ph-content h1{
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:900;
  color:#fff;
  margin-bottom:12px;
  overflow-wrap:anywhere;
}

.ph-content h1 em{
  font-style:normal;
  font-family:var(--script)!important;
  color:var(--terra);
  font-size:1.2em;
  font-weight:400;
}

.ph-content .lead{
  color:rgba(255,255,255,.62);
}


/* ── ADMIN ───────────────────────────────────── */

.admin-wrap{
  display:flex;
  min-height:100vh;
  width:100%;
  max-width:100%;
  background:var(--g1);
  overflow-x:hidden;
}

.adm-side{
  width:256px;
  min-width:256px;
  background:var(--navy);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
}

.adm-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  min-width:0;
}

.adm-logo .logo-word{
  font-family:var(--script)!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  font-style:normal!important;
}

.adm-nav{
  padding:12px 0;
  flex:1;
  min-width:0;
}

.adm-nav li a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 20px;
  color:rgba(255,255,255,.6);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:all .2s;
  border-left:3px solid transparent;
  min-width:0;
}

.adm-nav li a:hover,
.adm-nav li a.active{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-left-color:var(--terra);
}

.adm-nav li a .ai{
  font-size:1rem;
  width:18px;
  text-align:center;
  flex:0 0 18px;
}

.adm-main{
  margin-left:256px;
  flex:1;
  min-width:0;
  width:calc(100% - 256px);
  overflow-x:hidden;
}

.adm-top{
  background:#fff;
  border-bottom:1.5px solid var(--g2);
  padding:0 28px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  position:sticky;
  top:0;
  z-index:100;
  min-width:0;
}

.adm-top h2{
  font-size:1rem;
  font-weight:800;
  color:var(--navy);
  min-width:0;
  overflow-wrap:anywhere;
}

.adm-top-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  min-width:0;
}

.adm-body{
  padding:28px;
  min-width:0;
  overflow-x:hidden;
}

.adm-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:28px;
}

.ac{
  min-width:0;
  background:#fff;
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--sh);
  overflow:hidden;
}

.ac-icon{
  width:46px;
  height:46px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  margin-bottom:14px;
}

.ac-icon.t{background:var(--terra-lt)}
.ac-icon.s{background:var(--sky-lt)}
.ac-icon.n{background:var(--navy-lt)}
.ac-icon.g{background:rgba(46,158,107,.08)}

.ac-num{
  font-size:1.85rem;
  font-weight:900;
  color:var(--navy);
  line-height:1;
  overflow-wrap:anywhere;
}

.ac-lbl{
  font-size:.68rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:4px;
  overflow-wrap:anywhere;
}

.ac-trend{
  font-size:.7rem;
  font-weight:700;
  margin-top:10px;
  overflow-wrap:anywhere;
}

.ac-trend.up{color:#2e9e6b}
.ac-trend.dn{color:#c0392b}


/* Dashboard table:
   Horizontal scrolling stays INSIDE the table box.
   This prevents the whole page from overflowing on mobile. */

.adm-table-box{
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--sh);
  overflow-x:auto;
  overflow-y:hidden;
  margin-bottom:24px;
  -webkit-overflow-scrolling:touch;
}

.atb-head{
  min-width:680px;
  padding:18px 22px;
  border-bottom:1.5px solid var(--g2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.atb-head h3{
  font-size:.9rem;
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
}

.atbl{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.atbl th{
  background:var(--g1);
  padding:10px 18px;
  text-align:left;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

.atbl td{
  padding:13px 18px;
  font-size:.82rem;
  border-bottom:1px solid var(--g2);
  color:var(--body);
  max-width:300px;
  overflow-wrap:anywhere;
}

.atbl tr:last-child td{
  border-bottom:none;
}

.atbl tr:hover td{
  background:var(--g1);
}

.sbadge{
  display:inline-block;
  padding:3px 10px;
  border-radius:50px;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.sbadge.ok{
  background:rgba(46,158,107,.1);
  color:#2e9e6b;
}

.sbadge.wait{
  background:var(--terra-lt);
  color:var(--terra);
}

.sbadge.no{
  background:rgba(192,57,43,.1);
  color:#c0392b;
}

.adm-panel{
  display:none;
  min-width:0;
}

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

.adm-form-box{
  min-width:0;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:28px;
  margin-bottom:24px;
  overflow:hidden;
}

.adm-form-box h3{
  font-size:.95rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1.5px solid var(--g2);
  overflow-wrap:anywhere;
}

.adm-upload-box{
  border:1.5px dashed rgba(209,93,77,.34);
  background:rgba(209,93,77,.045);
  border-radius:10px;
  padding:12px;
  max-width:100%;
  overflow:hidden;
}

.adm-upload-box input[type=file]{
  width:100%;
  max-width:100%;
  background:#fff;
  cursor:pointer;
}

.adm-upload-box small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}


/* ── VIDEO GRID ──────────────────────────────── */

.trip-video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.trip-video{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  background:#111;
  box-shadow:var(--sh);
  display:block;
}


/* ── IMAGE STABILITY LAYER ───────────────────── */

.stable-bg,
.tc-img,
.blog-img,
.blog-feat-img,
.bsc-img,
.dest-card,
.gm-item,
.tg-main,
.tg-sm,
.photos-grid div,
.team-av,
.team-photo{
  background-color:#e9e4dc;
  background-size:cover;
  background-position:center;
}

.team-photo{
  background-size:cover!important;
  background-position:center!important;
}

.team-av{
  overflow:hidden;
  background-size:cover;
  background-position:center;
}


/* Real image elements used by CMS */

.img-cover,
.object-cover{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.img-contain,
.object-contain{
  width:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

img[data-cover="true"]{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

img[data-contain="true"]{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}


/* ── WA FLOAT ────────────────────────────────── */

.wa-float{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:998;
  display:flex;
  align-items:center;
  gap:10px;
  background:#25d366;
  color:#fff;
  padding:12px 18px 12px 12px;
  border-radius:50px;
  box-shadow:0 6px 24px rgba(37,211,102,.38);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  animation:waIn 1s ease 1.5s both;
  white-space:nowrap;
  transition:transform .25s,box-shadow .25s;
  max-width:calc(100vw - 32px);
}

.wa-float:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 30px rgba(37,211,102,.48);
}

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

.wa-circle{
  width:32px;
  height:32px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}


/* ── FOOTER ──────────────────────────────────── */

.footer{
  background:var(--navy);
  padding:72px 0 0;
  overflow:hidden;
}

.footer-g{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:52px;
}

.fb{
  min-width:0;
}

.fb p{
  color:rgba(255,255,255,.42);
  font-size:.76rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin:14px 0 22px;
  overflow-wrap:anywhere;
}

.socials{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.socials a{
  width:34px;
  height:34px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.6);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:700;
  transition:background .2s;
}

.socials a:hover{
  background:var(--terra);
  color:#fff;
}

.fc{
  min-width:0;
}

.fc h5{
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.fc ul li{
  padding:5px 0;
  overflow-wrap:anywhere;
}

.fc ul a{
  color:rgba(255,255,255,.42);
  font-size:.82rem;
  transition:color .2s;
}

.fc ul a:hover{
  color:var(--terra);
}

.fc ul li:not(:has(a)){
  color:rgba(255,255,255,.42);
  font-size:.82rem;
}

.footer-bot{
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.footer-bot p,
.footer-bot a{
  color:rgba(255,255,255,.26);
  font-size:.72rem;
}

.footer-bot a:hover{
  color:var(--terra);
}


/* ── LANGUAGE MODAL ──────────────────────────── */

.lang-modal{
  position:fixed;
  inset:0;
  background:rgba(28,37,56,.6);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(5px);
  padding:20px;
  overflow:auto;
}

.lang-modal.show{
  display:flex;
}

.lang-box{
  background:#fff;
  border-radius:var(--rlg);
  padding:36px;
  max-width:400px;
  width:100%;
  text-align:center;
  max-height:calc(100vh - 40px);
  overflow:auto;
}

.lang-box h3{
  font-size:1rem;
  font-weight:800;
  color:var(--navy);
  margin-bottom:5px;
}

.lang-box p{
  color:var(--muted);
  font-size:.82rem;
  margin-bottom:22px;
}

.lang-opts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.lang-opt{
  padding:14px;
  border:2px solid var(--g2);
  border-radius:var(--r);
  cursor:pointer;
  font-size:.85rem;
  font-weight:700;
  color:var(--navy);
  transition:all .2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.lang-opt:hover,
.lang-opt.active{
  border-color:var(--terra);
  background:var(--terra-lt);
  color:var(--terra);
}

.lang-opt .flag{
  font-size:1.6rem;
}


/* ── FADE IN ─────────────────────────────────── */

.fade{
  opacity:1;
  transform:none;
  transition:opacity .45s ease,transform .45s ease;
}

.js-ready .fade{
  opacity:0;
  transform:translateY(18px);
}

.js-ready .fade.in{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .js-ready .fade{
    opacity:1;
    transform:none;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


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


/* ── 1080 ────────────────────────────────────── */

@media(max-width:1080px){

  .tours-grid,
  .dest-grid,
  .blog-grid,
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .adm-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-g{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .detail-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .booking-box{
    position:static;
  }

  .tour-gallery{
    grid-template-rows:280px 180px;
  }

  .gallery-mosaic{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto;
  }

  .gm-item:nth-child(1),
  .gm-item:nth-child(5){
    grid-column:auto;
    grid-row:auto;
  }

  .contact-layout{
    gap:35px;
  }
}


/* ── SPLIT 2-COLUMN CONTENT/IMAGE SECTIONS ─────
   Reusable in place of ad-hoc inline `grid-template-columns:1fr 1fr`.
   Those inline styles can't be overridden by a media query (nothing but
   another inline style/!important beats them), so on narrow phone
   screens the two columns kept squeezing side-by-side into ~50%-width
   slivers - and any fixed-height photo box inside (`height:200px;
   background:center/cover`) then only had that squeezed sliver's width
   to work with, so `cover` cropped away most of the image. These classes
   stack to a single column below 768px so photos get their full width
   back. Used on About Us and Nile Cruise. */
.split-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}

.split-2col-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
}

@media(max-width:768px){
  .split-2col,
  .split-2col-photos{
    grid-template-columns:1fr;
  }
}


/* ── 900 ────────────────────────────────────── */

@media(max-width:900px){

  .trip-video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .nav-links>li>a{
    padding-left:8px;
    padding-right:8px;
  }

  .nav-inner{
    gap:12px;
  }

  .logo-word{
    font-size:2rem;
  }
}


/* ── 768 ────────────────────────────────────── */

@media(max-width:768px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .rec-slider{
    height:520px;
    max-height:72vh;
  }

  .wrap{
    padding:0 18px;
  }

  .sp{
    padding:68px 0;
  }

  .sp-sm{
    padding:44px 0;
  }

  .nav-inner{
    padding:0 18px;
    height:64px;
  }

  .nav-links{
    display:none;
  }

  .hamburger{
    display:flex;
  }

  .nav-right{
    gap:6px;
  }

  .hero-content{
    padding:86px 18px 40px;
  }

  .hero-sub{
    margin-bottom:26px;
  }

  .hero-eyebrow{
    letter-spacing:.18em;
    gap:8px;
  }

  .hero-eyebrow::before,
  .hero-eyebrow::after{
    max-width:28px;
  }

  .tours-grid,
  .dest-grid,
  .blog-grid,
  .why-grid,
  .testi-grid{
    grid-template-columns:1fr;
  }

  .adm-cards{
    grid-template-columns:1fr;
  }

  .adm-side{
    transform:translateX(-100%);
  }

  .adm-main{
    margin-left:0;
    width:100%;
  }

  .adm-top{
    padding:0 18px;
  }

  .adm-body{
    padding:20px 18px;
  }

  .contact-layout{
    grid-template-columns:1fr;
  }

  .form-row2{
    grid-template-columns:1fr;
  }

  .tour-gallery{
    grid-template-columns:1fr;
    grid-template-rows:280px;
    max-height:none;
  }

  .tg-main{
    grid-row:auto;
    border-radius:var(--rlg);
  }

  .tg-sm{
    display:none;
  }

  .footer-g{
    grid-template-columns:1fr;
    gap:28px;
  }

  .ie-grid{
    grid-template-columns:1fr;
  }

  .photos-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .filter-inner{
    align-items:stretch;
  }

  .filter-sel,
  .filter-count{
    width:100%;
    margin-left:0;
  }

  .tc-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .tc-footer .btn{
    width:100%;
  }

  .detail-layout{
    gap:26px;
    padding-top:26px;
  }

  .tour-tabs{
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:2px;
  }

  .cf-box{
    padding:24px 18px;
  }

  .blog-feat{
    gap:18px;
  }

  .blog-feat-img{
    min-height:320px;
  }

  .blog-side-card{
    align-items:flex-start;
  }

  body{
    min-width:0;
  }

  .trip-video-grid{
    grid-template-columns:1fr 1fr;
  }

  .gallery-mosaic{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
  }

  .gallery-mosaic .gm-item,
  .gallery-mosaic .gm-item:nth-child(1),
  .gallery-mosaic .gm-item:nth-child(5){
    grid-column:auto!important;
    grid-row:auto!important;
  }

  .gm-item{
    min-height:170px;
  }

  .contact-detail{
    min-width:0;
  }
}


/* ── 560 ────────────────────────────────────── */

@media(max-width:600px){
  .wa-float span{
    display:none;
  }

  .wa-float{
    padding:12px;
    right:16px;
    bottom:16px;
  }
}

@media(max-width:560px){

  .trip-video-grid{
    grid-template-columns:1fr;
  }

  .gallery-mosaic,
  .gallery-mosaic.cms-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gallery-mosaic.cms-gallery .gm-item{
    min-height:150px;
  }

  .logo-word{
    font-size:1.9rem;
  }

  .lt1,
  .lu,
  .lt2{
    font-size:1.65rem;
  }

  .lang-box{
    padding:25px 18px;
  }

  .adm-form-box{
    padding:22px 18px;
  }
}


/* ── 480 ────────────────────────────────────── */

@media(max-width:480px){

  .wrap{
    padding:0 16px;
  }

  .btn,
  .btn-lg{
    width:100%;
    padding-left:18px;
    padding-right:18px;
  }

  .hero-btns{
    flex-direction:column;
    align-items:center;
    width:100%;
  }

  .hero-btns .btn{
    width:auto;
  }

  .h2{
    font-size:1.8rem;
  }

  .page-hero{
    padding:126px 0 54px;
  }

  .ph-content h1{
    font-size:2rem;
  }

  .stats-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .stat-item{
    min-width:0;
    padding:18px 14px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  .stat-icon{
    width:46px;
    height:46px;
    font-size:1.6rem;
  }

  .stat-num{
    font-size:1.3rem;
  }

  .stat-lbl{
    font-size:.6rem;
  }

  .tour-gallery{
    grid-template-rows:230px;
  }

  .photos-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .photos-grid div{
    height:auto;
    aspect-ratio:1/1;
  }

  .blog-side-card{
    display:grid;
    grid-template-columns:74px minmax(0,1fr);
    padding:12px;
  }

  .bsc-img{
    width:74px;
  }

  .adm-top{
    padding:0 14px;
  }

  .adm-body{
    padding:18px 14px;
  }

  .adm-cards{
    gap:12px;
  }

  .ac{
    padding:18px;
  }

  .footer-bot{
    padding-left:16px;
    padding-right:16px;
  }

  .ie-grid{
    grid-template-columns:1fr;
  }

  .bb-body{
    padding:20px 18px;
  }

  .trust-badges{
    gap:10px;
  }
}


/* ── EXTRA SMALL DEVICES ────────────────────── */

@media(max-width:360px){

  .logo-mark{
    transform:scale(.9);
    transform-origin:left center;
  }

  .stat-item{
    padding:16px 10px;
  }

  .stat-item{
    gap:9px;
  }

  .stat-icon{
    width:40px;
    height:40px;
    font-size:1.3rem;
  }

  .stat-num{
    font-size:1.15rem;
  }

  .stat-lbl{
    font-size:.55rem;
  }
}


/* ================================================================
   BRAND LOCK
   Keep TUT identity consistent everywhere
================================================================ */

.logo-mark .lt1,
.logo-mark .lu,
.logo-mark .lt2{
  color:#fff!important;
}

.navbar .logo .logo-word,
.footer .logo .logo-word,
.adm-logo .logo-word{
  font-family:var(--script)!important;
  color:var(--terra)!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  font-style:normal!important;
  text-transform:none!important;
}

.hero-script,
.h2 em,
.cta-sec h2 em,
.ph-content h1 em{
  font-family:var(--script)!important;
}


/* ================================================================
   FINAL OVERFLOW SAFETY
================================================================ */

.text-wrap,
.text-break,
[data-wrap="true"]{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.no-overflow{
  max-width:100%;
  overflow:hidden;
}

.scroll-x{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:768px){

  /* Never allow a component to create page-level horizontal scroll */
  .navbar,
  .recommendations,
  .stats-bar,
  .page-hero,
  .footer,
  .admin-wrap,
  .adm-main,
  .adm-body,
  section,
  main{
    max-width:100%;
  }

  /* Tables scroll internally instead of pushing the page */
  .adm-table-box{
    max-width:100%;
  }

  /* Long URLs/emails/IDs won't break the mobile layout */
  .adm-main,
  .adm-body,
  .adm-panel,
  .adm-form-box,
  .atbl td,
  .tc-body,
  .blog-body,
  .detail-main,
  .cd-detail{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}
/* ══════════════════════════════════════════════════════════
   ICON SYSTEM (Font Awesome) — replaces legacy emoji icons
   ══════════════════════════════════════════════════════════ */
i.fa-solid,i.fa-regular,i.fa-brands,
[class*=" fa-solid"],[class*=" fa-regular"],[class*=" fa-brands"]{
  color:currentColor;
  line-height:1;
  vertical-align:-1px;
}
.hl-icon i,.ie-icon i,.tb-icon i,.cd-icon i,.stat-icon i,.vi i,
.wc-icon i,.ac-icon i,.ai i{
  color:inherit;
}
.wa-circle i{font-size:1.4em;color:#25d366}
.faq-arrow{display:inline-flex;transition:transform .25s}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.tg-count-btn i{margin-right:6px}
.read-more i,.blog-feat-info .read-more i{margin-left:4px;font-size:.85em}
.r-stars i{color:#f59e0b;font-size:.85em;margin-right:1px}

/* ══════════════════════════════════════════════════════════
   GOOGLE TRANSLATE — integrated, banner hidden
   High-specificity selectors so this always wins over Google's
   own dynamically-injected !important styles (pure CSS, no JS).
   ══════════════════════════════════════════════════════════ */
html body iframe.goog-te-banner-frame,
html body .goog-te-banner-frame.skiptranslate,
html body .goog-te-banner-frame,
html body .goog-te-balloon-frame,
html body .goog-tooltip,
html body .goog-tooltip:hover,
html body #goog-gt-tt,
html body .goog-te-gadget-icon{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  width:0!important;
  position:absolute!important;
  top:-9999px!important;
  left:-9999px!important;
}
html body{
  top:0!important;
  position:static!important;
}
.goog-text-highlight{
  background:none!important;
  box-shadow:none!important;
  border:none!important;
}
#google_translate_element{
  display:none!important;
  position:absolute!important;
  left:-9999px!important;
  top:-9999px!important;
}
html{
  min-height:100%;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET — no horizontal scroll, ever
   ══════════════════════════════════════════════════════════ */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
*{
  box-sizing:border-box;
}
img,video,iframe,embed,object,svg{
  max-width:100%;
  height:auto;
}
.tour-gallery video,.tg-main video,.tg-sm video{
  height:100%;
}
table{
  max-width:100%;
}
input,select,textarea,button{
  max-width:100%;
  font-family:inherit;
}
pre,code{
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.wrap{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:600px){
  .tours-grid,.blog-grid,.values-grid,.team-grid,
  .highlight-list,.ie-grid,.testi-grid,.dest-grid,
  .stat-box,.adm-cards,.settings-grid{
    grid-template-columns:1fr!important;
  }
  .nl-form{
    flex-direction:column;
  }
  .filter-inner{
    flex-wrap:wrap;
  }
  .filter-sel{
    flex:1 1 45%;
  }
  h1{ font-size:clamp(1.4rem,7vw,2rem)!important; }
  .booking-box{
    position:static!important;
  }
}

@media(max-width:400px){
  .wrap{ padding-left:14px; padding-right:14px; }
  .btn,.book-submit{ width:100%; }
  .tc-meta{ flex-wrap:wrap; gap:6px 10px; }
}
