@charset "UTF-8";
/* ==========================================================================
   إبدأ رحلتك — Ebdaa Rehletk
   Layout follows the GoTravel structure; type and colour follow the brand
   guide: Century Gothic / Mersin for Latin, Madani Arabic / RB for Arabic,
   and the amber→violet "grid" gradient used as roughly a quarter of the
   surface, everything else white and black.
   Written with logical properties so RTL (the default) and LTR share one file.
   ========================================================================== */

/* ---------- 1. Fonts ---------- */

/* Latin primary — headings */
@font-face { font-family:'Century Gothic'; src:url('../fonts/century-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Century Gothic'; src:url('../fonts/century-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Century Gothic'; src:url('../fonts/century-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Century Gothic'; src:url('../fonts/century-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* Latin secondary — body and display accents */
@font-face { font-family:'Mersin'; src:url('../fonts/mersin-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Mersin'; src:url('../fonts/mersin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Mersin'; src:url('../fonts/mersin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Mersin'; src:url('../fonts/mersin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* Arabic primary — headings */
@font-face { font-family:'Madani Arabic'; src:url('../fonts/madani-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Madani Arabic'; src:url('../fonts/madani-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Madani Arabic'; src:url('../fonts/madani-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

/* Arabic secondary — body */
@font-face { font-family:'RB'; src:url('../fonts/rb-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'RB'; src:url('../fonts/rb-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- 2. Tokens ---------- */

:root{
  /* The grid gradient, straight off the brand sheet. */
  --amber:#E3A03C;
  --rose:#BC5E86;
  --violet:#7B31A8;
  --grid:linear-gradient(135deg,var(--amber) 0%,var(--rose) 50%,var(--violet) 100%);
  --grid-soft:linear-gradient(135deg,rgba(227,160,60,.12) 0%,rgba(123,49,168,.12) 100%);

  /* Everything else is black and white. */
  --black:#000;
  --ink:#141414;
  --body:#808285;
  --line:#e8e8e8;
  --bg-soft:#f7f7f7;
  --white:#fff;

  /* Mersin is a Fontspring DEMO cut — its 4, + and % are watermarked, so the
     body face falls back to Century Gothic until a licensed cut is supplied. */
  --font-head:'Century Gothic','Madani Arabic',sans-serif;
  --font-body:'Century Gothic','RB',sans-serif;

  --container:1100px;
  --gutter:15px;
  --radius:0px;
  --shadow:0 6px 34px rgba(0,0,0,.08);
  --shadow-lg:0 14px 50px rgba(0,0,0,.14);
  --ease:cubic-bezier(.25,.46,.45,.94);
}

/* Latin codepoints are served from the Latin brand faces even while Arabic is
   active: the Madani Arabic demo ships watermarked digits, and the brand sheet
   sets numerals in Century Gothic anyway. Arabic (U+0600–06FF) is outside these
   ranges, so it still falls through to Madani / RB. */
@font-face{ font-family:'Brand Head Latin'; src:url('../fonts/century-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF,U+2190-21FF; }
@font-face{ font-family:'Brand Head Latin'; src:url('../fonts/century-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF,U+2190-21FF; }
@font-face{ font-family:'Brand Body Latin'; src:url('../fonts/century-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF; }
@font-face{ font-family:'Brand Body Latin'; src:url('../fonts/century-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF; }

/* Arabic swaps the family order so Arabic glyphs win, Latin still resolves. */
html[lang="ar"]{
  --font-head:'Brand Head Latin','Madani Arabic',sans-serif;
  --font-body:'Brand Body Latin','RB',sans-serif;
}

/* Phone numbers stay left-to-right inside RTL text. */
.top-phone{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;gap:6px;}

/* ---------- 3. Reset ---------- */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:27px;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease);}
ul,ol{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 18px;
  font-weight:700;
  line-height:1.25;
}
h1{font-size:47px;}
h2{font-size:37px;}
h3{font-size:30px;}
h4{font-size:22px;}
h5{font-size:18px;}
h6{font-size:15px;}
p{margin:0 0 22px;}
p:last-child{margin-bottom:0;}
::selection{background:var(--violet);color:#fff;}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container-wide{max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);}
.row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gutter) * -1);}
.col{padding-inline:var(--gutter);width:100%;}
.col-6{width:50%;}
.col-4{width:33.3333%;}
.col-3{width:25%;}
.col-8{width:66.6667%;}
.col-9{width:75%;}
.section{padding-block:95px;}
.section-sm{padding-block:60px;}
.bg-soft{background:var(--bg-soft);}
.text-center{text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- 4. Gradient utilities (the 25%) ---------- */

.grid-bg{background:var(--grid);color:#fff;}
.grid-text{
  background:var(--grid);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.grid-rule{width:56px;height:4px;background:var(--grid);border:0;margin:0 0 24px;}
.text-center .grid-rule{margin-inline:auto;}

/* ---------- 5. Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:16px 34px;border:2px solid var(--black);
  color:var(--black);background:transparent;
  position:relative;overflow:hidden;z-index:0;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--grid);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .4s var(--ease);
}
.btn:hover{color:#fff;border-color:transparent;}
.btn:hover::before{transform:scaleX(1);}
.btn-grid{background:var(--grid);border-color:transparent;color:#fff;}
.btn-grid::before{background:var(--black);}
.btn-light{border-color:#fff;color:#fff;}
.btn-sm{padding:11px 24px;font-size:12px;}
.btn-block{width:100%;justify-content:center;}

/* ---------- 6. Header ---------- */

.top-bar{
  background:var(--grid);
  color:#fff;font-size:12px;letter-spacing:.6px;
  height:44px;display:flex;align-items:center;
}
.top-bar .container{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;
}
.top-bar .top-phone{justify-self:start;}
.top-bar .lang-switch{justify-self:end;}
.top-bar a:hover{opacity:.75;}
.social-list{display:flex;align-items:center;justify-content:center;gap:17px;font-size:14px;}
.social-list a{opacity:.9;transition:opacity .2s var(--ease),transform .2s var(--ease);}
.social-list a:hover{opacity:1;transform:translateY(-2px);}
.flag{display:block;border-radius:2px;flex:none;}
.lang-switch{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:1px;
  padding:5px 12px;border:1px solid rgba(255,255,255,.55);
}
.lang-switch:hover{background:#fff;color:var(--violet);border-color:#fff;}

.site-header{background:#fff;position:relative;z-index:120;}
.site-header.is-stuck{position:fixed;inset-block-start:0;inset-inline:0;box-shadow:0 2px 20px rgba(0,0,0,.08);animation:dropIn .4s var(--ease);}
@keyframes dropIn{from{transform:translateY(-100%);}to{transform:translateY(0);}}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:96px;}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.5px;}
/* The lockup stacks the Latin and Arabic wordmarks, so it needs more height
   than a single-line mark would to stay legible. */
.logo img{height:68px;width:auto;display:block;}
@media (max-width:992px){.logo img{height:58px;}}
@media (max-width:560px){.logo img{height:50px;}}
.mobile-nav-head .logo img{height:54px;}
.logo .logo-mark{
  width:38px;height:38px;background:var(--grid);
  display:grid;place-items:center;color:#fff;font-size:17px;flex:none;
}

.main-nav > ul{display:flex;align-items:center;gap:34px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:6px;height:96px;
  position:relative;
}
.main-nav > ul > li > a::after{
  content:'';position:absolute;inset-block-end:32px;inset-inline-start:0;
  width:100%;height:3px;background:var(--grid);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .3s var(--ease);
}
.main-nav > ul > li:hover > a::after,
.main-nav > ul > li.current > a::after{transform:scaleX(1);}
.main-nav .caret{font-size:9px;opacity:.6;}

.sub-menu{
  position:absolute;inset-block-start:100%;inset-inline-start:-24px;
  min-width:232px;background:#fff;padding:18px 0;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .3s var(--ease);
}
.main-nav li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sub-menu li > a{
  display:block;padding:9px 26px;font-size:13px;
  font-family:var(--font-body);color:var(--body);
}
.sub-menu li > a:hover{color:var(--ink);padding-inline-start:32px;}

.header-tools{display:flex;align-items:center;gap:20px;}
.header-tools .tool{font-size:16px;color:var(--ink);display:grid;place-items:center;width:24px;height:24px;}
.header-tools .tool:hover{color:var(--violet);}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;}
.nav-toggle span{display:block;height:2px;background:var(--ink);transition:.3s var(--ease);}

/* Mobile drawer */
.mobile-nav{
  position:fixed;inset:0;background:#fff;z-index:300;
  padding:28px 24px;overflow-y:auto;
  transform:translateX(100%);transition:transform .4s var(--ease);
}
html[dir="ltr"] .mobile-nav{transform:translateX(-100%);}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.mobile-nav-close{font-size:26px;line-height:1;}
.mobile-nav ul li > a{
  display:block;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.8px;color:var(--ink);
}
.mobile-nav .sub-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;padding:0 0 8px;display:none;
}
.mobile-nav .sub-menu.open{display:block;}
.mobile-nav .sub-menu li > a{
  text-transform:none;font-weight:400;font-size:13px;
  font-family:var(--font-body);color:var(--body);
  padding-inline-start:18px;
}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:290;opacity:0;visibility:hidden;transition:.3s;}
.nav-backdrop.open{opacity:1;visibility:visible;}

/* ---------- 7. Hero slider ---------- */

.hero{position:relative;height:calc(100vh - 140px);min-height:560px;overflow:hidden;background:var(--ink);}
/* The incoming slide sits on top and fades in while the outgoing one clears
   faster underneath, so the two images never ghost through each other. */
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1;
  transition:opacity .45s var(--ease),visibility .45s;
}
.hero-slide.active{
  opacity:1;visibility:visible;z-index:3;
  transition:opacity .8s var(--ease),visibility 0s;
}
/* Held by the slider for the length of one crossfade. */
.hero-slide.leaving{opacity:1;visibility:visible;z-index:2;transition:none;}
.hero-slide-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1);transition:transform 7s linear;}
.hero-slide.active .hero-slide-img{transform:scale(1.09);}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.66) 100%);}
.hero-caption{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  max-width:640px;color:#fff;
}
.hero-caption .eyebrow{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;
  display:inline-block;align-self:flex-start;
  background:var(--grid);padding:7px 16px;
}
.hero-caption h1{color:#fff;font-size:60px;margin-bottom:20px;}
.hero-caption p{font-size:17px;line-height:31px;color:rgba(255,255,255,.9);margin-bottom:30px;}
.hero-price{
  font-family:var(--font-head);font-size:34px;font-weight:700;
  color:#fff;margin-bottom:26px;display:block;
}
.hero-price small{font-size:14px;font-weight:400;opacity:.8;display:block;}
.hero-nav{
  position:absolute;inset-block-end:40px;inset-inline-end:40px;z-index:5;
  display:flex;gap:10px;
}
.hero-nav button{
  width:48px;height:48px;border:1px solid rgba(255,255,255,.5);
  color:#fff;display:grid;place-items:center;font-size:15px;
  transition:.3s var(--ease);
}
.hero-nav button:hover{background:var(--grid);border-color:transparent;}
.hero-dots{position:absolute;inset-block-end:52px;inset-inline-start:50%;transform:translateX(-50%);z-index:5;display:flex;gap:9px;}
.hero-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.3s;}
.hero-dots span.active{background:#fff;width:28px;border-radius:6px;}

/* ---------- 8. Search / filter bar ---------- */

.tour-filter{
  background:var(--grid);padding:26px 34px;
  position:relative;z-index:20;
}
.tour-filter.floating{margin-block-start:-56px;box-shadow:var(--shadow-lg);}
.filter-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;}
.filter-field{flex:1 1 180px;min-width:150px;}
.filter-field label{
  display:block;font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:#fff;margin-bottom:8px;
}
.filter-field select,.filter-field input{
  width:100%;height:46px;padding-inline:14px;
  border:0;background:#fff;color:var(--ink);font-size:14px;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23141414' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:11px;
  background-position:right 14px center;
}
html[dir="rtl"] .filter-field select{background-position:left 14px center;}
.filter-field input{background-image:none;}
.filter-submit{flex:0 0 auto;}
.filter-submit .btn{background:var(--black);color:#fff;border-color:var(--black);height:46px;padding-block:0;}
.filter-submit .btn::before{background:#fff;}
.filter-submit .btn:hover{color:var(--black);}

/* ---------- 9. Section headings ---------- */

.section-head{margin-bottom:56px;}
.section-head.center{text-align:center;max-width:680px;margin-inline:auto;}
.section-head .eyebrow{
  font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;
  display:block;
}
.section-head h2{margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px;}
.section-head p{max-width:620px;}
/* The rule is a block with no auto margin, so a centred head left it stuck
   against the start edge while the text above it sat in the middle. */
.section-head.center .grid-rule{margin-inline:auto;}
.section-head.center p{margin-inline:auto;}

/* ---------- 10. Tour cards ---------- */

.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.tour-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.tour-grid.cols-4{grid-template-columns:repeat(4,1fr);}

.tour-card{background:#fff;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column;}
.tour-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.tour-card-media{position:relative;overflow:hidden;aspect-ratio:600/463;}
.tour-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.tour-card:hover .tour-card-media img{transform:scale(1.08);}
.tour-label{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;
  background:var(--grid);color:#fff;
  font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;padding:6px 13px;
}
.tour-card-body{padding:26px 26px 0;flex:1;}
.tour-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px;}
.tour-card-title-row h4{margin:0;font-size:20px;line-height:1.35;}
.tour-card-title-row h4 a:hover{background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tour-price{
  font-family:var(--font-head);font-weight:700;font-size:19px;
  white-space:nowrap;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tour-price del{font-size:13px;color:var(--body);-webkit-text-fill-color:var(--body);opacity:.7;margin-inline-end:6px;}
.tour-rating{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;}
.tour-rating .rate{
  background:var(--grid);color:#fff;font-family:var(--font-head);font-weight:700;
  padding:3px 9px;font-size:12px;
}
.tour-rating .label{font-weight:500;color:var(--ink);}
.tour-card-excerpt{font-size:14px;line-height:25px;margin-bottom:20px;}
.tour-card-foot{
  display:flex;align-items:center;gap:24px;
  padding:16px 26px;border-top:1px solid var(--line);
  font-size:13px;
}
.tour-meta{display:inline-flex;align-items:center;gap:7px;}
.tour-meta i{font-size:14px;background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Gallery variant — content slides up over the image on hover */
.tour-gallery-card{position:relative;overflow:hidden;aspect-ratio:600/870;display:block;}
.tour-gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.tour-gallery-card:hover img{transform:scale(1.07);}
.tour-gallery-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75) 100%);}
.tour-gallery-body{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:28px;color:#fff;
  transform:translateY(56px);transition:transform .45s var(--ease);
}
.tour-gallery-card:hover .tour-gallery-body{transform:translateY(0);}
.tour-gallery-body h4{color:#fff;margin:0 0 6px;font-size:21px;}
.tour-gallery-body .tour-price{-webkit-text-fill-color:#fff;color:#fff;background:none;}
.tour-gallery-excerpt{
  font-size:13.5px;line-height:24px;color:rgba(255,255,255,.85);margin-top:10px;
  opacity:0;transition:opacity .45s var(--ease) .05s;
}
.tour-gallery-card:hover .tour-gallery-excerpt{opacity:1;}

/* Split / list variant */
.tour-split{display:flex;gap:0;background:#fff;box-shadow:var(--shadow);margin-bottom:34px;}
.tour-split-media{flex:0 0 42%;position:relative;overflow:hidden;}
.tour-split-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.tour-split:hover .tour-split-media img{transform:scale(1.06);}
.tour-split-body{flex:1;padding:34px;display:flex;flex-direction:column;justify-content:center;}
.tour-split-body h4{font-size:24px;}

/* ---------- 11. Tour type / destination tiles ---------- */

.type-strip{position:relative;background-size:cover;background-position:center;padding-block:110px;}
.type-strip::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);}
.type-strip > *{position:relative;z-index:2;}
.type-strip .section-head h2,.type-strip .section-head p{color:#fff;}
.type-strip .section-head .eyebrow{color:#fff;}

/* Twelve destinations in two rows of six. */
.dest-carousel{display:grid;grid-template-columns:repeat(6,1fr);gap:0;}
.dest-tile{
  position:relative;aspect-ratio:1/1;overflow:hidden;display:block;
  background:var(--ink);
}
.dest-tile img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:.6s var(--ease);}
.dest-tile:hover img{opacity:1;transform:scale(1.09);}
.dest-tile-label{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  text-align:center;padding:14px;
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff;
}
.dest-tile::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:var(--grid);opacity:0;transition:opacity .45s var(--ease);
  mix-blend-mode:multiply;
}
.dest-tile:hover::before{opacity:.75;}

.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.dest-card{position:relative;overflow:hidden;aspect-ratio:4/3;display:block;}
.dest-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.dest-card:hover img{transform:scale(1.08);}
.dest-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8) 100%);}
.dest-card-body{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:26px;color:#fff;}
.dest-card-body h4{color:#fff;margin:0 0 4px;font-size:22px;}
.dest-card-body span{font-size:13px;opacity:.85;}

/* ---------- 12. Reviews ---------- */

.reviews{position:relative;}
.review-item{max-width:600px;}
.review-stars{color:var(--amber);font-size:15px;letter-spacing:3px;margin-bottom:16px;}
.review-text{font-size:17px;line-height:32px;color:var(--ink);font-style:italic;margin-bottom:22px;}
.review-author{display:flex;align-items:center;gap:14px;}
.review-author img{width:54px;height:54px;border-radius:50%;object-fit:cover;}
.review-author strong{display:block;font-family:var(--font-head);color:var(--ink);font-size:15px;}
.review-author span{font-size:13px;}

.video-box{position:relative;aspect-ratio:16/10;overflow:hidden;}
.video-box img{width:100%;height:100%;object-fit:cover;}
.video-box::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3);}
.video-play{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);z-index:3;
  width:82px;height:82px;border-radius:50%;background:var(--grid);
  display:grid;place-items:center;color:#fff;font-size:22px;
  transition:transform .35s var(--ease);
}
html[dir="rtl"] .video-play{transform:translate(50%,-50%);}
.video-play:hover{transform:translate(-50%,-50%) scale(1.1);}
html[dir="rtl"] .video-play:hover{transform:translate(50%,-50%) scale(1.1);}

/* ---------- 13. Last minute ---------- */

.deal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.deal-card{position:relative;overflow:hidden;aspect-ratio:16/11;display:block;}
.deal-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.deal-card:hover img{transform:scale(1.07);}
.deal-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.78) 100%);}
.deal-body{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:30px;color:#fff;}
.deal-body h4{color:#fff;display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:8px;font-size:22px;}
.deal-body p{font-size:14px;color:rgba(255,255,255,.85);margin:0;}
.deal-badge{
  position:absolute;inset-block-start:20px;inset-inline-end:20px;z-index:3;
  background:var(--grid);color:#fff;width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.1;
}

/* ---------- 14. Parallax quote ---------- */

.quote-strip{
  position:relative;background:var(--grid);
  padding-block:105px;text-align:center;color:#fff;
}
.quote-strip h2{color:#fff;font-size:42px;text-transform:uppercase;max-width:820px;margin-inline:auto;}
.quote-strip p{max-width:660px;margin-inline:auto;color:rgba(255,255,255,.9);}

/* ---------- 15. Newsletter ---------- */

.newsletter{background:var(--ink);color:#fff;padding-block:80px;text-align:center;}
.newsletter h2{color:#fff;text-transform:uppercase;margin-bottom:8px;}
.newsletter p{color:rgba(255,255,255,.7);margin-bottom:30px;}
.newsletter-form{display:flex;max-width:520px;margin-inline:auto;}
.newsletter-form input{
  flex:1;height:54px;padding-inline:20px;border:0;background:#fff;color:var(--ink);
}
.newsletter-form button{
  height:54px;padding-inline:32px;background:var(--grid);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:1.2px;text-transform:uppercase;
  transition:filter .3s var(--ease);
}
.newsletter-form button:hover{filter:brightness(1.12);}

/* ---------- 16. Blog ---------- */

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.post-card{background:#fff;transition:transform .4s var(--ease);}
.post-card:hover{transform:translateY(-6px);}
.post-card-media{overflow:hidden;aspect-ratio:16/11;margin-bottom:20px;}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post-card:hover .post-card-media img{transform:scale(1.07);}
.post-meta{
  font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.post-card h4{font-size:20px;line-height:1.4;margin-bottom:12px;}
.post-card p{font-size:14px;line-height:25px;margin-bottom:16px;}
.post-more{
  font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.post-more:hover{background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.post-masonry{columns:3;column-gap:34px;}
.post-masonry .post-card{break-inside:avoid;margin-bottom:34px;display:inline-block;width:100%;}

/* ---------- 17. Page title area ---------- */

.page-title{
  position:relative;padding-block:150px 130px;
  background-size:cover;background-position:center;background-color:var(--ink);
  text-align:center;color:#fff;
}
.page-title::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);}
.page-title > *{position:relative;z-index:2;}
.page-title h1{color:#fff;text-transform:uppercase;margin-bottom:12px;}
.breadcrumb{display:flex;justify-content:center;gap:10px;font-size:13px;color:rgba(255,255,255,.85);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.6;}

/* ---------- 18. Tour detail ---------- */

.tour-hero{position:relative;height:64vh;min-height:460px;background-size:cover;background-position:center;}
.tour-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.7));}
.tour-hero-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-block-end:56px;color:#fff;}
.tour-hero-body h1{color:#fff;margin-bottom:10px;}
.tour-facts{display:flex;flex-wrap:wrap;gap:34px;margin-block:0 8px;font-size:14px;}
.tour-facts .fact{display:inline-flex;align-items:center;gap:9px;}

.tour-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;}
.tour-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:34px;}
.tour-tab{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--body);
  padding:14px 26px;position:relative;
}
.tour-tab::after{content:'';position:absolute;inset-block-end:-1px;inset-inline-start:0;width:100%;height:3px;background:var(--grid);transform:scaleX(0);transition:transform .3s var(--ease);}
.tour-tab.active{color:var(--ink);}
.tour-tab.active::after{transform:scaleX(1);}
.tour-panel{display:none;}
.tour-panel.active{display:block;animation:fadeUp .45s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.itinerary-item{border-inline-start:2px solid var(--line);padding-inline-start:28px;padding-block-end:30px;position:relative;}
.itinerary-item:last-child{padding-block-end:0;}
.itinerary-item::before{
  content:'';position:absolute;inset-block-start:5px;inset-inline-start:-8px;
  width:14px;height:14px;border-radius:50%;background:var(--grid);
}
.itinerary-item h5{margin-bottom:6px;font-size:17px;}
.itinerary-day{
  font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;margin-bottom:5px;display:block;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.check-list li{position:relative;padding-inline-start:28px;margin-bottom:11px;font-size:14.5px;}
.check-list li::before{
  content:'✓';position:absolute;inset-inline-start:0;inset-block-start:0;
  font-weight:700;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.check-list.cross li::before{content:'✕';}

.booking-box{background:#fff;box-shadow:var(--shadow);padding:30px;position:sticky;top:24px;}
.booking-box .price{
  font-family:var(--font-head);font-size:34px;font-weight:700;margin-bottom:4px;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.booking-box .price-note{font-size:13px;margin-bottom:22px;}
.booking-box .fact-row{display:flex;justify-content:space-between;padding-block:11px;border-bottom:1px solid var(--line);font-size:14px;}
.booking-box .fact-row:last-of-type{border-bottom:0;margin-bottom:20px;}
.booking-box .fact-row strong{color:var(--ink);font-weight:500;}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery-grid a{overflow:hidden;aspect-ratio:1/1;display:block;}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.gallery-grid a:hover img{transform:scale(1.09);}

/* ---------- 19. Team / FAQ / forms ---------- */

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.team-card{text-align:center;}
.team-card-media{position:relative;overflow:hidden;aspect-ratio:3/4;margin-bottom:18px;}
.team-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.team-card:hover .team-card-media img{transform:scale(1.07);}
.team-card-media::after{content:'';position:absolute;inset:0;background:var(--grid);opacity:0;mix-blend-mode:multiply;transition:opacity .4s var(--ease);}
.team-card:hover .team-card-media::after{opacity:.65;}
.team-social{
  position:absolute;inset-block-end:20px;inset-inline:0;z-index:3;
  display:flex;justify-content:center;gap:16px;color:#fff;font-size:15px;
  opacity:0;transform:translateY(12px);transition:.4s var(--ease);
}
.team-card:hover .team-social{opacity:1;transform:none;}
.team-card h5{margin-bottom:2px;}
.team-card span{font-size:13px;}

.accordion-item{border:1px solid var(--line);margin-bottom:14px;}
.accordion-head{
  width:100%;text-align:start;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);
}
.accordion-head .icon{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  background:var(--grid);color:#fff;font-size:14px;line-height:1;
  transition:transform .3s var(--ease);
}
.accordion-item.open .accordion-head .icon{transform:rotate(45deg);}
.accordion-body{display:none;padding:0 24px 22px;font-size:14.5px;}
.accordion-item.open .accordion-body{display:block;animation:fadeUp .35s var(--ease);}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink);}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line);background:#fff;padding:13px 15px;
  font-size:14.5px;transition:border-color .3s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:0;border-color:var(--violet);}
.form-field textarea{min-height:140px;resize:vertical;}
.alert{padding:15px 20px;margin-bottom:24px;font-size:14.5px;border-inline-start:4px solid;}
.alert-ok{background:rgba(123,49,168,.07);border-color:var(--violet);color:var(--ink);}
.alert-err{background:rgba(227,160,60,.12);border-color:var(--amber);color:var(--ink);}

.info-card{display:flex;gap:16px;margin-bottom:26px;}
.info-card .ico{
  width:46px;height:46px;flex:none;background:var(--grid);color:#fff;
  display:grid;place-items:center;font-size:17px;
}
.info-card h6{margin-bottom:3px;text-transform:uppercase;letter-spacing:1px;font-size:12px;}
.info-card p{font-size:14.5px;margin:0;}

/* ---------- 20. Footer ---------- */

.site-footer{background:var(--ink);color:rgba(255,255,255,.65);padding-block:76px 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;}
.site-footer h6{
  color:#fff;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:24px;position:relative;padding-bottom:14px;
}
.site-footer h6::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:38px;height:3px;background:var(--grid);}
.site-footer a:hover{color:#fff;}
.footer-links li{margin-bottom:11px;font-size:14px;}
.footer-contact li{margin-bottom:13px;font-size:14px;display:flex;gap:11px;align-items:flex-start;}
.footer-contact i{
  background:var(--grid);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;margin-top:5px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-size:13px;flex-wrap:wrap;
}
.footer-social{display:flex;gap:16px;font-size:15px;}
.footer-social a:hover{background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.to-top{
  position:fixed;inset-block-end:28px;inset-inline-start:28px;z-index:150;
  width:46px;height:46px;background:var(--grid);color:#fff;
  display:grid;place-items:center;font-size:15px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:.35s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none;}

.whatsapp-fab{
  position:fixed;inset-block-end:86px;inset-inline-start:28px;z-index:150;
  width:46px;height:46px;background:#25D366;color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow);
}

/* ---------- 21. Pagination / misc ---------- */

.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px;}
.pagination a,.pagination span{
  min-width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);font-family:var(--font-head);font-size:14px;font-weight:700;
  padding-inline:12px;
}
.pagination .current,.pagination a:hover{background:var(--grid);color:#fff;border-color:transparent;}

.empty-state{text-align:center;padding-block:70px;}
.empty-state p{font-size:16px;}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---------- 22. Responsive ---------- */

@media (max-width:1100px){
  .dest-carousel{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .tour-detail-grid{grid-template-columns:1fr;}
  .booking-box{position:static;}
}
@media (max-width:992px){
  h1{font-size:38px;} h2{font-size:30px;} h3{font-size:25px;}
  .hero-caption h1{font-size:42px;}
  .quote-strip h2{font-size:32px;}
  .main-nav,.header-tools .tool-search{display:none;}
  .nav-toggle{display:flex;}
  .tour-grid,.tour-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .post-masonry{columns:2;}
  .dest-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .section{padding-block:66px;}
  .tour-filter.floating{margin-block-start:0;}
}
@media (max-width:768px){
  .col-6,.col-4,.col-3,.col-8,.col-9{width:100%;}
  .hero{height:auto;min-height:0;padding-block:120px;}
  .hero-slide{position:absolute;}
  .hero-caption h1{font-size:34px;}
  .tour-split{flex-direction:column;}
  .tour-split-media{flex:none;aspect-ratio:16/10;}
  .deal-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .top-bar{height:auto;padding-block:9px;}
  .top-bar .container{flex-direction:column;gap:9px;}
  .page-title{padding-block:110px 90px;}
}
@media (max-width:560px){
  .tour-grid,.tour-grid.cols-2,.tour-grid.cols-4,
  .post-grid,.dest-grid,.team-grid{grid-template-columns:1fr;}
  .post-masonry{columns:1;}
  .dest-carousel{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .newsletter-form{flex-direction:column;gap:10px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  h1{font-size:30px;} h2{font-size:25px;}
}

/* ---------- 23. Currency mark ---------- */
/* The Riyal symbol is the official artwork painted through a mask, so it takes
   the colour of whatever text it sits in — including gradient-clipped prices,
   where the surrounding fill is transparent and would erase a normal glyph. */
.price-value{display:inline-flex;align-items:baseline;gap:.26em;white-space:nowrap;}
.sar{
  display:inline-block;flex:none;align-self:center;
  width:.78em;height:.78em;position:relative;top:.03em;
  background-color:currentColor;
  -webkit-mask:url('../img/sar.png') center/contain no-repeat;
          mask:url('../img/sar.png') center/contain no-repeat;
}
/* Prices painted with the gradient leave currentColor transparent, so the mark
   is given the gradient's own end colour instead of vanishing. */
.tour-price .sar,.booking-box .price .sar{background-color:var(--violet);}
.tour-price del .sar,.booking-box .price del .sar{background-color:var(--body);}
.hero-price .sar,.deal-body .sar,.tour-gallery-body .sar,.grid-bg .sar{background-color:#fff;}
.deal-body del .sar{background-color:rgba(255,255,255,.6);}

/* ---------- 24. Compact 4-up tour grid ---------- */
/* Used by the "most popular" block: same card, tightened so four sit in the
   1100px container without the type or imagery feeling cramped. */
.tour-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:24px;}
.tour-grid.cols-4 .tour-card-body{padding:19px 19px 0;}
.tour-grid.cols-4 .tour-card-title-row{gap:9px;margin-bottom:8px;}
.tour-grid.cols-4 .tour-card-title-row h4{font-size:16px;line-height:1.32;}
.tour-grid.cols-4 .tour-price{font-size:15px;}
.tour-grid.cols-4 .tour-price del{font-size:11px;margin-inline-end:4px;}
.tour-grid.cols-4 .tour-rating{margin-bottom:9px;font-size:12px;}
.tour-grid.cols-4 .tour-rating .rate{font-size:11px;padding:2px 7px;}
.tour-grid.cols-4 .tour-card-excerpt{font-size:13px;line-height:22px;margin-bottom:15px;}
.tour-grid.cols-4 .tour-card-foot{padding:12px 19px;gap:14px;font-size:12px;}
.tour-grid.cols-4 .tour-label{font-size:10px;padding:5px 10px;inset-block-start:12px;inset-inline-start:12px;}

@media (max-width:1100px){ .tour-grid.cols-4{grid-template-columns:repeat(3,1fr);} }
@media (max-width:992px) { .tour-grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px) { .tour-grid.cols-4{grid-template-columns:1fr;} }


/* ---------- 25. "Coming soon" menu entries ---------- */
.menu-soon{
  display:block;padding:9px 26px;font-size:13px;font-family:var(--font-body);
  color:var(--body);opacity:.75;cursor:default;
}
.menu-soon em{
  font-style:normal;font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;margin-inline-start:7px;padding:2px 7px;
  background:var(--grid);color:#fff;vertical-align:middle;
}
.mobile-social{justify-content:flex-start;gap:20px;margin-top:24px;color:var(--ink);}
.footer-bottom .credit{
  font-weight:700;
  background:var(--grid);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- 26. Auto-scrolling marquee ---------- */
/* One track duplicated end to end, translated by exactly half its width, so the
   seam is invisible and the loop never jumps. Hovering parks it. */
.marquee{overflow:hidden;position:relative;--speed:46s;}
.marquee-track{animation-timing-function:linear;will-change:transform;}
.marquee-track{display:flex;gap:24px;width:max-content;animation:marquee var(--speed) linear infinite;}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
html[dir="rtl"] .marquee-track{animation-name:marquee-rtl;}
@keyframes marquee-rtl{from{transform:translateX(0);}to{transform:translateX(50%);}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;overflow-x:auto;}
  .marquee{overflow-x:auto;}
}
.marquee-track > *{flex:0 0 300px;}

/* Last-minute cards, tightened for the marquee */
.deal-card.sm{aspect-ratio:4/3;}
.deal-card.sm .deal-body{padding:20px;}
.deal-card.sm .deal-body h4{font-size:17px;margin-bottom:5px;}
.deal-card.sm .deal-body p{font-size:12.5px;line-height:20px;}
.deal-card.sm .deal-badge{width:52px;height:52px;font-size:12px;inset-block-start:14px;inset-inline-end:14px;}

/* ---------- 27. Countdown strip ---------- */
.countdown-strip{background:var(--grid);color:#fff;padding-block:34px;}
.countdown-strip .container{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.countdown-copy h3{color:#fff;margin:0 0 4px;font-size:24px;}
.countdown-copy p{color:rgba(255,255,255,.9);margin:0;font-size:14px;}
.countdown{display:flex;gap:10px;}
.cd-cell{
  min-width:66px;padding:9px 8px;text-align:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(2px);
}
.cd-cell b{display:block;font-family:var(--font-head);font-size:26px;font-weight:700;line-height:1.1;}
.cd-cell span{font-size:11px;letter-spacing:.6px;opacity:.9;}
.countdown-strip .btn{border-color:#fff;color:#fff;flex:none;}
.countdown-strip .btn::before{background:#fff;}
.countdown-strip .btn:hover{color:var(--violet);}

/* ---------- 28. Hotel tiles ---------- */
.hotel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.hotel-tile{position:relative;overflow:hidden;aspect-ratio:1/1;display:block;}
.hotel-tile:nth-child(even){margin-block-start:26px;}
.hotel-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.hotel-tile:hover img{transform:scale(1.07);}
.hotel-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72) 100%);}
.hotel-tile span{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:18px;
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:16px;
}

/* ---------- 29. Reviews split ---------- */
/* The video is a fixed 600x600 frame on the left; the reviews column fills the
   rest and is capped to the same height so the section is no taller than it. */
/* Clip on the left in a square frame, reviews on the right. The frame is sized
   off the viewport so the portrait video reads large without pushing the
   reviews column too narrow. */
.reviews-split{display:grid;grid-template-columns:var(--vidw) 1fr;gap:48px;align-items:stretch;
  --vidw:400px;}
html[dir="rtl"] .reviews-split{grid-template-columns:1fr var(--vidw);}
html[dir="rtl"] .review-video{order:2;}          /* last track = left in RTL */
.review-video{
  position:relative;overflow:hidden;isolation:isolate;
  width:var(--vidw);max-width:100%;aspect-ratio:1/1;
  background:var(--grid);
}
/* Frosted sides: the poster blown up and blurred behind the clip, so the bars
   carry a soft echo of the footage instead of flat colour. */
.review-video::before{
  content:'';position:absolute;inset:-12%;z-index:0;
  background-image:var(--poster);background-size:cover;background-position:center;
  filter:blur(30px) saturate(1.4);
  transform:scale(1.1);
}
/* The glass itself — brand tint plus a diagonal sheen and a hairline edge. */
.review-video::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(135deg,rgba(227,160,60,.42),rgba(188,94,134,.34) 50%,rgba(123,49,168,.42)),
    linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%,rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
/* Absolutely positioned so width/height resolve against the square for certain —
   under grid centring the percentages lost to the clip's intrinsic aspect and it
   overflowed. contain then letterboxes it, and the gradient shows either side. */
.review-video video,.review-video img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:contain;display:block;
}
.reviews-col{display:flex;flex-direction:column;justify-content:center;min-width:0;height:var(--vidw);}

/* The row runs left to right and is clipped to its own column, so cards appear
   from beside the clip rather than sliding out from behind it. */
.reviews-split{position:relative;}
.review-video{z-index:2;}
.reviews-flow{width:100%;overflow:hidden;}
/* LTR starts the doubled track half-shifted and walks it back to 0. RTL already
   lays the track out from the right edge, so it uses the base marquee-rtl —
   forcing marquee-out there pushed the whole row off-screen. */
.reviews-flow .marquee-track{animation-name:marquee-out;}
@keyframes marquee-out{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.reviews-flow .marquee-track > *{flex:0 0 300px;}
.reviews-col .g-review{padding:20px 22px;height:100%;}
.reviews-col .g-review p{font-size:13.5px;line-height:24px;}
@media (max-width:1100px){
  .reviews-split,html[dir="rtl"] .reviews-split{grid-template-columns:1fr;justify-items:center;}
  html[dir="rtl"] .review-video{order:0;}
  .reviews-col{height:auto;width:100%;max-width:100%;}
  /* Stacked, so the row no longer tucks under the clip. */
  .reviews-flow{width:100%;margin-left:0;overflow:hidden;}
  .reviews-flow .marquee-track > *,.branch-reviews .marquee-track > *{flex-basis:260px;}
}

/* ---------- 31. Branch pages ---------- */
/* Same vertical scroll as the home section, a size down and in two columns so
   the block stays compact on a page that is mostly practical detail. */
.branch-reviews .marquee-track{gap:20px;}
.branch-reviews .marquee-track > *{flex:0 0 300px;}
.branch-reviews .g-review{padding:20px 22px;box-shadow:0 3px 18px rgba(0,0,0,.06);height:100%;}
.branch-reviews .g-review p{font-size:13.5px;line-height:24px;}

/* A small plane crosses the page once, then fades out over the map. */
.plane-fly{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  z-index:5;pointer-events:none;color:var(--violet);
  opacity:0;
}
.plane-fly.go{animation:planeCross 3.4s var(--ease) forwards;}
@keyframes planeCross{
  0%   {opacity:0;   transform:translate(-12vw, 34px) rotate(8deg)  scale(.85);}
  12%  {opacity:.95;}
  70%  {opacity:.95;}
  100% {opacity:0;   transform:translate(88vw, -18px) rotate(-6deg) scale(1.05);}
}
html[dir="rtl"] .plane-fly{inset-inline-start:auto;inset-inline-end:0;}
html[dir="rtl"] .plane-fly.go{animation-name:planeCrossRtl;}
@keyframes planeCrossRtl{
  0%   {opacity:0;   transform:translate(12vw, 34px) rotate(-8deg) scale(.85);}
  12%  {opacity:.95;}
  70%  {opacity:.95;}
  100% {opacity:0;   transform:translate(-88vw, -18px) rotate(6deg) scale(1.05);}
}
.plane-trail{
  position:absolute;inset-block-start:50%;inset-inline-end:100%;
  width:70px;height:2px;border-radius:2px;
  background:linear-gradient(to var(--trail-dir, left), currentColor, transparent);
  opacity:.35;
}
@media (prefers-reduced-motion:reduce){
  .plane-fly{display:none;}
}
.branch-map-wrap{position:relative;}

/* A destination with no programmes yet is dimmed a touch, so the tile reads as
   not-yet-open rather than broken. */
.dest-tile.is-soon img{opacity:.5;}
.dest-tile.is-soon:hover img{opacity:.72;}
.hotel-tile.is-soon img{opacity:.62;}
.hotel-tile.is-soon:hover img{opacity:.85;}


/* ---------- 32. Rounded corners ---------- */
/* One 10px corner on every contained surface: cards, panels, buttons, inputs,
   the search bar, media frames, the video. Three things stay square on purpose:
     - full-bleed bands (top bar, header, hero, section backgrounds, the quote
       and countdown strips, page titles, the footer) — a rounded corner on a
       full-width band reads as a rendering fault rather than a choice;
     - anything already circular (avatars, slider dots, the play button, the
       discount badge, the itinerary bullets);
     - hairlines and 2-4px rules, where a radius only distorts the shape.
   Where a child image or video runs edge to edge the box is clipped as well,
   or the child's square corner punches straight through the rounded parent. */
:root{--r:10px;}

.btn,
.lang-switch,
.hero-nav button,
.pagination a,.pagination span,
.to-top,
.logo .logo-mark,
.hero-caption .eyebrow,
.tour-label,
.tour-rating .rate,
.menu-soon em,
.accordion-head .icon,
.info-card .ico,
.cd-cell,
.soon-badge,
.sub-menu,
.tour-filter,
.booking-box,
.accordion-item,
.alert,
.post-card,
.g-review,
.review-item,
.service-card,
.filter-field select,.filter-field input,
.form-field input,.form-field select,.form-field textarea{border-radius:var(--r);}

/* Media frames — clipped so the picture takes the corner along with the box.
   The destination tiles are left out on purpose: they tile edge to edge with no
   gap, so a corner on them punches a white notch wherever four tiles meet. */
.tour-card,
.tour-gallery-card,
.tour-split,
.dest-card,
.hotel-tile,
.deal-card,
.post-card-media,
.team-card-media,
.gallery-grid a,
.video-box,
.review-video{border-radius:var(--r);overflow:hidden;}

/* The frosted layer paints its own inset hairline, so it needs the corner too —
   otherwise the line runs straight into the clip and breaks at each corner. */
.review-video::after{border-radius:var(--r);}

/* Field and button read as one control side by side; stacked on a phone they
   are two, so each takes its own corner. */
.newsletter-form{border-radius:var(--r);overflow:hidden;}
@media (max-width:560px){
  .newsletter-form{border-radius:0;overflow:visible;}
  .newsletter-form input,.newsletter-form button{border-radius:var(--r);}
}


/* ---------- 33. About page ---------- */
/* Everything on this page reads down the middle, over a layer of brand shapes.
   The layer is ornament: it never takes a pointer event and is hidden from
   assistive tech, so it cannot get between a reader and the content. */
.about-page{position:relative;overflow:hidden;text-align:center;}
.about-page .section-head{text-align:center;max-width:760px;margin-inline:auto;}
.about-page .section-head p{margin-inline:auto;}
.about-page .grid-rule{margin-inline:auto;}
.about-page .container{position:relative;z-index:1;}

.page-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.page-deco > *{position:absolute;}
.d-dots{color:var(--violet);opacity:.16;}
.d-rings{color:var(--rose);opacity:.2;}
.d-path{color:var(--amber);opacity:.42;}
.d-cloud{color:var(--violet);opacity:.13;}
.d-cloud-far{opacity:.1;}
/* Blurred wash rather than a hard shape, so the corners of the page carry a hint
   of the brand without turning into a band. */
.d-blob{border-radius:50%;filter:blur(70px);opacity:.16;}
.d-blob-a{inset-block-start:-90px;inset-inline-start:-60px;width:320px;height:320px;background:var(--amber);}
.d-blob-b{inset-block-end:-110px;inset-inline-end:-80px;width:360px;height:360px;background:var(--violet);}

/* Mission and vision: same white card, centred, no icon. */
.purpose-card{
  background:#fff;box-shadow:var(--shadow);border-radius:var(--r);
  padding:40px 34px;height:100%;text-align:center;
}
.purpose-card h4{font-size:22px;margin-bottom:14px;}
.purpose-card p{font-size:15px;line-height:28px;margin:0;}

.stat-row{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:30px;}
/* The values carry a leading or trailing '+', which Arabic bidi otherwise
   flips to the far side — one reads "10,000+" and the next "+400". Laying
   the number out LTR keeps every stat punctuated the way it was written. */
.stat-value{font-family:var(--font-head);font-size:44px;font-weight:700;line-height:1;
  direction:ltr;unicode-bidi:isolate;}
.stat-label{font-size:14px;letter-spacing:1px;margin-top:8px;opacity:.92;}

/* The parachute drops in once, then breathes. The drop is on the wrapper and the
   sway on the svg, so the two transforms never fight over the same element. */
.chute{display:block;width:104px;margin:0 auto 20px;opacity:0;}
.chute svg{display:block;width:100%;height:auto;}
.chute.land{animation:chuteDrop 2.3s cubic-bezier(.22,.9,.3,1) forwards;}
.chute.land svg{animation:chuteSway 4.5s 2.1s ease-in-out infinite;transform-origin:60px 8px;}
@keyframes chuteDrop{
  0%  {opacity:0;transform:translateY(-260px) rotate(-7deg);}
  18% {opacity:1;}
  62% {transform:translateY(-46px) rotate(5deg);}
  82% {transform:translateY(-9px) rotate(-2.5deg);}
  100%{opacity:1;transform:translateY(0) rotate(0);}
}
@keyframes chuteSway{0%,100%{transform:rotate(-2.5deg);}50%{transform:rotate(2.5deg);}}

@media (max-width:768px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:26px;}
  .chute{width:80px;}
  /* The ornaments crowd a phone screen, so only the washes stay. */
  .page-deco .d-dots,.page-deco .d-rings,.page-deco .d-path,.page-deco .d-cloud{display:none;}
}
/* Nothing here carries meaning, so it all stops when motion is unwelcome. */
@media (prefers-reduced-motion:reduce){
  .chute{opacity:1;}
  .chute.land,.chute.land svg{animation:none;}
}

/* ---------- 34. Blog "load more" ---------- */
.load-more{margin-top:52px;text-align:center;}


/* ---------- 35. Night-sky strip ---------- */
/* Sits between the header and the first section on the pages that carry no
   banner. Full bleed, so it stays square like the other bands.
   Each star is a tinted core over a radial halo — a flat circle at low opacity
   reads as a grey disc rather than a glow — and each carries its own twinkle
   period so nothing pulses in unison. The field is drawn twice, a full width
   apart, and walked back exactly one width, so the drift never shows a seam. */
.sky-strip{
  position:relative;height:70px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(130% 175% at 50% 130%,
      rgba(227,160,60,.22) 0%, rgba(188,94,134,.15) 34%, rgba(123,49,168,0) 64%),
    linear-gradient(180deg,#070B1E 0%,#101331 52%,#1E1640 100%);
}
.sky-stars{position:absolute;inset:0;width:100%;height:100%;display:block;}

.sky-drift{animation:skyDrift 100s linear infinite;}
@keyframes skyDrift{from{transform:translateX(0);}to{transform:translateX(-1200px);}}

.sky-stars .tw{
  animation-name:twinkle;animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
@keyframes twinkle{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Two meteors on long, unequal cycles — rare enough to read as a real sky.
   Positioned physically rather than logically: the streak has to start off the
   left edge and travel right in both languages, and a logical start would flip
   it off-screen in Arabic. */
.sky-shoot{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.sky-shoot i{
  position:absolute;left:-12%;width:90px;height:1px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
  transform:rotate(14deg);
}
.sky-shoot i:nth-child(1){top:16%;animation:skyShoot 11s 2s linear infinite;}
.sky-shoot i:nth-child(2){top:54%;width:64px;animation:skyShoot 17s 9s linear infinite;}
@keyframes skyShoot{
  0%  {opacity:0;transform:translate(0,0) rotate(14deg);}
  4%  {opacity:1;}
  16% {opacity:0;}
  100%{opacity:0;transform:translate(150vw,42px) rotate(14deg);}
}

@media (max-width:768px){.sky-strip{height:54px;}}
/* Pure ornament, so it holds still when motion is unwelcome. */
@media (prefers-reduced-motion:reduce){
  .sky-drift,.sky-stars .tw,.sky-shoot i{animation:none;}
  .sky-shoot i{opacity:0;}
}


/* ---------- 36. Mobile app shell ---------- */
/* Every rule below lives inside a media query on purpose. The desktop layout
   has to come out of this pass unchanged, so nothing here is allowed to apply
   above 992px — the width where the hamburger already takes over. */

@media (max-width:992px){

  /* The top bar cost 126px on a phone because the phone number wrapped onto
     four lines in a 49px column. The number, the language switch and all seven
     channels are already in the drawer, so the bar earns nothing here. */
  .top-bar{display:none;}

  /* 96px is a desktop header. Sticky so it behaves like an app's title bar. */
  .site-header{position:sticky;inset-block-start:0;z-index:130;
    box-shadow:0 1px 0 rgba(0,0,0,.07);}
  .header-inner{height:58px;}
  .logo img{height:38px;}

  /* 44px is about the smallest target a thumb hits reliably; the hamburger was
     16px tall and the drawer close 30px. */
  /* 44px tap target, but the bars need an explicit width: the toggle is a
     column flexbox, so centring the items collapsed the three spans — which
     have height but no width of their own — to zero and the icon vanished. */
  .nav-toggle{width:44px;height:44px;justify-content:center;align-items:center;}
  .nav-toggle span{width:22px;flex:none;}
  .mobile-nav-close{width:44px;height:44px;display:grid;place-items:center;}
  .header-tools .tool{width:44px;height:44px;display:grid;place-items:center;}
  .mobile-nav ul li > a{padding:15px 0;}
  .mobile-social a{width:44px;height:44px;display:grid;place-items:center;}

  /* Vertical rhythm: desktop padding is roughly double what a phone wants, and
     it was the main reason the home page ran to fifteen screens. */
  .section{padding-block:38px;}
  .section-sm{padding-block:32px;}
  .section-head{margin-bottom:28px;}
  .quote-strip{padding-block:52px;}
  .type-strip{padding-block:56px;}
  .newsletter{padding-block:44px;}
  .countdown-strip{padding-block:26px;}
  .site-footer{padding-block-start:44px;}
  .footer-grid{gap:26px;padding-bottom:30px;}

  /* The search panel was 510px — more than half the screen. The four type tabs
     become one swipeable row instead of wrapping into a block. */
  .tour-filter{padding:16px;}
  .tour-filter .filter-tabs{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tour-filter .filter-tabs::-webkit-scrollbar{display:none;}
  .tour-filter .filter-tab{flex:0 0 auto;padding:9px 16px;font-size:11px;letter-spacing:.6px;}
  .tour-filter .filter-form{gap:12px;}
  .tour-filter .filter-field{flex:1 1 100%;}
  .tour-filter .filter-field label{margin-bottom:6px;font-size:10px;letter-spacing:1px;}
  .tour-filter .filter-submit{flex:1 1 100%;}
  .tour-filter .filter-submit .btn{width:100%;justify-content:center;height:48px;}
}

@media (max-width:768px){
  /* 120px of padding inside a 240px hero left the caption crushed. */
  .hero{padding-block:52px;min-height:400px;}
  .hero-caption h1{font-size:30px;line-height:1.25;}
  .hero-caption p{font-size:14.5px;line-height:25px;}
}

/* ---------- 37. Bottom tab bar ---------- */
/* Phones navigate from the bottom. Hidden entirely above 992px, so the desktop
   never sees it. */
.app-tabs{display:none;}

@media (max-width:992px){
  .app-tabs{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;inset-inline:0;inset-block-end:0;z-index:160;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-block-start:1px solid var(--line);
    /* clears the home indicator on a notched phone */
    padding-block-end:env(safe-area-inset-bottom,0px);
  }
  .app-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:56px;padding-block:8px 6px;
    font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.2px;
    color:var(--body);
  }
  .app-tab svg{width:21px;height:21px;}
  .app-tab.is-on{color:var(--violet);}
  .app-tab.is-wa{color:#1FA855;}

  /* Content has to clear the bar, and the two floats have to sit above it. */
  body{padding-block-end:calc(58px + env(safe-area-inset-bottom,0px));}
  .to-top{inset-block-end:calc(74px + env(safe-area-inset-bottom,0px));}
  /* WhatsApp is a tab now, so the floating button is a duplicate. */
  .whatsapp-fab{display:none;}
}

/* Standalone = launched from the home screen. No browser chrome, so the sticky
   header can sit right under the status bar. */
@media (display-mode:standalone){
  .site-header{padding-block-start:env(safe-area-inset-top,0px);}
}


/* ---------- 38. Home card rails ---------- */
/* Twelve programme cards stacked one per row ran to 3,874px on a phone — the
   single biggest reason the home page was fifteen screens. Apps swipe sideways
   instead, so on a phone these two grids become snap rails: the section
   collapses to one card's height and the next card peeks in to advertise that
   it scrolls.
   Scoped to the home page — tours.php and blog.php still want a real grid you
   can scan — and to phones, so the desktop grid is untouched. */
@media (max-width:992px){
  body.page-home .tour-grid,
  body.page-home .post-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleeds to the screen edges so a card can sit half off-screen */
    margin-inline:calc(var(--gutter, 20px) * -1);
    padding-inline:var(--gutter, 20px);
    padding-block-end:2px;
  }
  body.page-home .tour-grid::-webkit-scrollbar,
  body.page-home .post-grid::-webkit-scrollbar{display:none;}
  body.page-home .tour-grid > *,
  body.page-home .post-grid > *{scroll-snap-align:start;}
  /* The cards lift on hover on desktop; on a rail that just clips. */
  body.page-home .tour-grid .tour-card:hover,
  body.page-home .post-grid .post-card:hover{transform:none;}
}


/* ---------- 39. Reviews frame on a phone ---------- */
/* The clip sits in a fixed 400px square. On a 375px screen that one element
   made the document 40px wider than the viewport, so the whole page could be
   dragged sideways — which is what made the layout look broken and shifted.
   Cap the frame to the column it sits in. Phones only; the desktop keeps its
   400px square exactly as it was. */
@media (max-width:992px){
  .reviews-split{--vidw:100%;}
  .review-video{width:100%;max-width:400px;margin-inline:auto;}
  .reviews-col,.reviews-flow,.g-badge{max-width:100%;min-width:0;}
}


/* ---------- 40. Home page on a phone — round two ---------- */
/* Same rule as before: everything is inside a media query, so the desktop
   layout is untouched by all of this. */

@media (max-width:992px){

  /* 1. The search icon had come back. Section 36 sized ".header-tools .tool"
        to 44px, and because .tool-search carries .tool that display:grid
        overrode the display:none that had been hiding it. Put it back, and
        leave the burger alone on the left. */
  .header-tools .tool-search{display:none;}

  /* 2. The slider changes on its own and the dots already show position, so
        the two arrows are just clutter on a phone. */
  .hero-nav{display:none;}

  /* 3. The search bar reads as one compact block again rather than a tall
        stack: all four type tabs fit across without scrolling, and the three
        fields sit two to a row. */
  .tour-filter .filter-tabs{flex-wrap:nowrap;overflow:visible;gap:5px;}
  .tour-filter .filter-tab{
    flex:1 1 0;min-width:0;padding:9px 4px;font-size:10px;
    letter-spacing:0;white-space:nowrap;text-align:center;
  }
  .tour-filter .filter-form{gap:9px;}
  .tour-filter .filter-field{flex:1 1 calc(50% - 5px);min-width:0;}
  .tour-filter .filter-field select,
  .tour-filter .filter-field input{height:42px;font-size:13px;padding-inline:11px;}
  .tour-filter .filter-submit{flex:1 1 100%;}
  .tour-filter .filter-submit .btn{height:44px;}

  /* 4. The four hotel tiles sit closer together and closer to the copy above. */
  .hotel-grid{gap:8px;}
  .hotel-tile:nth-child(even){margin-block-start:12px;}

  /* 5. Schengen strip: heading, counter and button all down the middle. */
  .countdown-strip .container{flex-direction:column;justify-content:center;gap:18px;}
  .countdown-copy{text-align:center;}
  .countdown{justify-content:center;flex-wrap:wrap;}
  .countdown-strip .btn{align-self:center;}

  /* 7. Reviews keep the desktop arrangement — clip on the left, Google reviews
        on the right — just scaled down, instead of stacking. */
  .reviews-split{grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:12px;
    align-items:start;justify-items:stretch;}
  html[dir="rtl"] .reviews-split{grid-template-columns:minmax(0,1fr) minmax(0,44%);}
  html[dir="rtl"] .review-video{order:2;}
  .review-video{width:100%;max-width:none;margin-inline:0;}
  .reviews-col{height:auto;justify-content:flex-start;}
  .reviews-flow .marquee-track > *{flex-basis:150px;}
  .reviews-col .g-review{padding:11px 12px;}
  .reviews-col .g-review p{font-size:11px;line-height:18px;}
  .reviews-col .g-review .who strong{font-size:11px;}
  .reviews-col .g-review .who small{font-size:9.5px;}
  .reviews-col .g-badge{font-size:11px;}
}

/* 6. "رحلات مختارة" — three tiles to a row rather than two. */
@media (max-width:560px){
  .dest-carousel{grid-template-columns:repeat(3,1fr);}
  .dest-tile-label{font-size:10px;letter-spacing:.4px;padding:8px;}
}


/* ---------- 41. Marquees and reviews on a phone ---------- */
/* Mobile only — the desktop keeps its auto-scrolling marquees untouched. */

@media (max-width:992px){

  /* The loop stays — the movement is the point of the strip. What it was
     missing on a phone is a way to be tapped: there is no hover on touch, so
     the desktop's pause-on-hover never fired and a card kept sliding out from
     under the thumb. It now parks while a finger is down and picks the loop
     back up the moment it lifts. */
  .marquee:active .marquee-track{animation-play-state:paused;}
  .marquee:not(.reviews-flow):not(.branch-reviews) .marquee-track{gap:12px;}

  /* The Google reviews were nearly twice the height of the clip beside them.
     Trimming the type and clamping the quote to four lines brings the column
     down to roughly the square's height so the two sit level. */
  .reviews-col .g-review{padding:9px 10px;}
  .reviews-col .g-review p{
    font-size:10.5px;line-height:15.5px;margin:6px 0 8px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .reviews-col .g-review .stars{font-size:9px;letter-spacing:1px;}
  .reviews-col .g-review .who{gap:7px;}
  .reviews-col .g-review .who .av{width:22px;height:22px;font-size:10px;}
  .reviews-col .g-review .who strong{font-size:10px;}
  .reviews-col .g-review .who small{font-size:9px;}
  .reviews-col .g-badge{font-size:10.5px;margin-bottom:6px;}
  .reviews-flow .marquee-track{gap:9px;}
  /* One review fills its column with the next just peeking in. At 132px two
     landed side by side and the second was cut mid-word. */
  .reviews-flow .marquee-track > *{flex:0 0 45vw;}
}


/* ---------- 42. Rail widths and review height, corrected ---------- */
@media (max-width:992px){
  /* A percentage flex-basis resolves against the flex container, and the track
     is width:max-content — circular, so the cards collapsed to ~103px. Viewport
     units side-step it entirely. */
  .marquee:not(.reviews-flow):not(.branch-reviews) .marquee-track > *{flex:0 0 76vw;}

  /* Pin the review column to the clip's height. The clip is a square taking 44%
     of the row, so its height tracks the viewport the same way — matching it in
     vw keeps the two level at any phone width instead of guessing in pixels. */
  .reviews-flow{height:calc(41vw - 20px);min-height:104px;}
  .reviews-col .g-review{height:100%;overflow:hidden;padding:8px 9px;}
  .reviews-col .g-review p{-webkit-line-clamp:3;margin:5px 0 6px;}
  .reviews-col .g-badge{margin-bottom:4px;}
}