/*
  Travel Trek Tourism — unified responsive design and 3D motion layer
  Version: 13.0.0
*/
:root {
  --tt-container: 1240px;
  --tt-gutter: clamp(18px, 3.4vw, 42px);
  --tt-section-space: clamp(74px, 8vw, 112px);
  --tt-radius-sm: 12px;
  --tt-radius-md: 18px;
  --tt-radius-lg: 26px;
  --tt-shadow-soft: 0 16px 42px rgba(43, 29, 85, .10);
  --tt-shadow-lift: 0 28px 65px rgba(43, 29, 85, .18);
  --tt-ease: cubic-bezier(.2, .75, .25, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden;
}

body {
  min-width: 320px;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  display: block;
}

.container {
  width: min(var(--tt-container), calc(100% - (var(--tt-gutter) * 2))) !important;
  max-width: var(--tt-container);
  margin-inline: auto;
}

.section {
  padding-block: var(--tt-section-space) !important;
}

.section-heading {
  width: min(100%, 760px);
  margin: 0 auto clamp(34px, 4.5vw, 54px) !important;
}

.section-heading h2,
.story-copy h2,
.promise-copy h2,
.service-promise-copy h2,
.tour-help-copy h2,
.coverage-copy h2,
.quote-copy h2,
.contact-side h2,
.hours-panel h2 {
  text-wrap: balance;
}

.section-heading p,
.hero-description,
.story-copy p,
.promise-copy p,
.service-promise-copy p,
.tour-help-copy p,
.coverage-copy p,
.quote-copy p,
.contact-side > p {
  text-wrap: pretty;
}

/* Shared header geometry */
.site-header {
  height: 88px !important;
}

.site-header.scrolled {
  height: 74px !important;
}

.site-header .nav-wrap {
  width: 100%;
  min-width: 0;
  gap: clamp(18px, 2.4vw, 34px);
}

.logo {
  min-width: 218px !important;
  transform-style: preserve-3d;
  perspective: 800px;
}

.logo-mark {
  transform: translateZ(18px);
  transition: transform .45s var(--tt-ease), filter .45s ease;
}

.logo:hover .logo-mark {
  transform: translateZ(30px) rotateY(-12deg) rotateX(5deg);
  filter: drop-shadow(0 14px 22px rgba(22, 13, 52, .28));
}

.logo-copy {
  transform: translateZ(10px);
}

.desktop-nav {
  gap: clamp(14px, 1.55vw, 27px) !important;
  white-space: nowrap;
}

.desktop-nav a {
  font-size: clamp(.76rem, .84vw, .88rem) !important;
  letter-spacing: .015em;
}

.nav-actions {
  flex: 0 0 auto;
}

.menu-btn,
.close-menu {
  touch-action: manipulation;
}

/* Shared hero alignment */
.hero {
  min-height: clamp(640px, 78vh, 760px) !important;
  overflow: hidden;
  perspective: 1200px;
}

.hero-content {
  width: min(100%, 790px);
  max-width: 790px !important;
  padding-block: clamp(176px, 21vh, 220px) clamp(92px, 12vh, 130px) !important;
}

.hero h1 {
  max-width: 900px;
  font-size: clamp(2.75rem, 5.5vw, 5.05rem) !important;
  line-height: .99 !important;
  letter-spacing: -.062em !important;
  text-wrap: balance;
}

.hero-description {
  width: min(100%, 700px);
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  line-height: 1.75;
}

.hero-buttons {
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  min-height: 49px !important;
  border-radius: 11px !important;
  padding-inline: clamp(18px, 2vw, 24px) !important;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.btn:hover {
  transform: translate3d(0, -3px, 12px) !important;
}

/* 3D hero ornaments */
.tt-hero-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform-style: preserve-3d;
}

.tt-orb {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  transition: transform .35s ease-out;
}

.tt-orb > i {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.025)),
    linear-gradient(145deg, rgba(227,20,19,.16), rgba(8,115,72,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 24px 55px rgba(24, 14, 55, .2);
  backdrop-filter: blur(5px);
  animation: ttFloat3d 9s ease-in-out infinite;
}

.tt-orb--one {
  right: 8%;
  top: 22%;
  width: clamp(76px, 8vw, 126px);
  height: clamp(76px, 8vw, 126px);
}

.tt-orb--one > i {
  animation-delay: -1.5s;
}

.tt-orb--two {
  right: 23%;
  bottom: 13%;
  width: clamp(48px, 5vw, 82px);
  height: clamp(48px, 5vw, 82px);
}

.tt-orb--two > i {
  border-radius: 50%;
  animation-delay: -4s;
  animation-duration: 11s;
}

.tt-orb--three {
  left: 5%;
  bottom: 9%;
  width: clamp(36px, 4vw, 64px);
  height: clamp(36px, 4vw, 64px);
  opacity: .7;
}

.tt-orb--three > i {
  animation-delay: -6s;
  animation-duration: 12s;
}

@keyframes ttFloat3d {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateX(8deg) rotateY(-10deg) rotateZ(0deg);
  }
  35% {
    transform: translate3d(0, -16px, 28px) rotateX(-10deg) rotateY(16deg) rotateZ(8deg);
  }
  70% {
    transform: translate3d(0, 8px, 8px) rotateX(12deg) rotateY(7deg) rotateZ(-7deg);
  }
}

/* Shared 3D card system */
.tt-tilt {
  --tt-rx: 0deg;
  --tt-ry: 0deg;
  --tt-lift: 0px;
  --tt-scale: 1;
  position: relative;
  transform:
    perspective(1100px)
    rotateX(var(--tt-rx))
    rotateY(var(--tt-ry))
    translate3d(0, var(--tt-lift), 0)
    scale(var(--tt-scale)) !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition:
    transform .24s ease-out,
    box-shadow .35s var(--tt-ease),
    border-color .3s ease !important;
}

.tt-tilt:hover {
  --tt-lift: -8px;
  --tt-scale: 1.006;
  box-shadow: var(--tt-shadow-lift) !important;
}

.tt-tilt::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--tt-shine-opacity, 0);
  background:
    radial-gradient(
      circle at var(--tt-shine-x, 50%) var(--tt-shine-y, 50%),
      rgba(255,255,255,.30),
      rgba(255,255,255,.08) 22%,
      transparent 52%
    );
  transition: opacity .2s ease;
}

.tt-tilt.is-tilting {
  --tt-shine-opacity: 1;
}

.tt-tilt > :not(img):not(.tour-card-media):not(.vehicle-image) {
  transform: translateZ(14px);
  transform-style: preserve-3d;
}

.package-card,
.testimonial-card,
.value-card,
.purpose-card,
.approach-step,
.service-card,
.traveler-card,
.process-card,
.tour-card,
.tour-type-card,
.transfer-service-card,
.vehicle-card,
.transfer-step,
.contact-card {
  border-radius: var(--tt-radius-md) !important;
}

/* Shared content bands and grids */
.trust-strip,
.identity-strip,
.service-intro,
.tour-intro,
.transfer-trust,
.contact-overview {
  padding-block: clamp(34px, 4vw, 52px) !important;
}

.cta-section {
  padding-block: clamp(72px, 8vw, 104px) !important;
}

.cta-grid {
  gap: clamp(34px, 5vw, 72px) !important;
}

.stats {
  min-width: 0;
}

.stat {
  min-width: 0;
}

footer {
  overflow: hidden;
}

.footer-grid {
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(130px, .72fr)) minmax(220px, 1fr) !important;
  gap: clamp(26px, 3vw, 44px) !important;
}

.footer-brand,
.footer-column {
  min-width: 0;
}

.footer-contact a,
.footer-contact span {
  overflow-wrap: anywhere;
}

/* Forms and interactive controls */
input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  max-width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(227,20,19, .55);
  outline-offset: 3px;
}

.transfer-form,
.contact-form {
  width: 100%;
  min-width: 0;
}

.form-grid,
.contact-form-grid,
.enhanced-field-grid {
  min-width: 0;
}

.form-field,
.contact-field,
.input-wrap,
.contact-input-wrap {
  min-width: 0;
}

.mobile-drawer {
  overscroll-behavior: contain;
  overflow-y: auto;
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
}

.whatsapp-widget {
  right: max(20px, env(safe-area-inset-right)) !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
}

/* Tablet */
@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: 1.25fr repeat(2, .75fr) 1fr !important;
  }

  .footer-grid > :nth-child(4) {
    grid-column: 2;
  }

  .footer-grid > :last-child {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1020px) {
  :root {
    --tt-gutter: clamp(18px, 4vw, 34px);
    --tt-section-space: clamp(68px, 9vw, 94px);
  }

  .desktop-nav,
  .nav-actions .btn {
    display: none !important;
  }

  .menu-btn {
    display: inline-flex !important;
  }

  .site-header {
    height: 78px !important;
  }

  .site-header.scrolled {
    height: 70px !important;
  }

  .logo {
    min-width: 0 !important;
  }

  .hero {
    min-height: clamp(610px, 74vh, 690px) !important;
  }

  .hero-content {
    width: min(100%, 760px);
    padding-block: clamp(150px, 20vh, 184px) clamp(84px, 11vh, 112px) !important;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 7vw, 4.45rem) !important;
  }

  .footer-grid {
    grid-template-columns: 1.25fr 1fr 1fr !important;
  }

  .footer-grid > :nth-child(4),
  .footer-grid > :last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .footer-grid > :last-child {
    grid-column: 1 / -1;
  }

  .tt-orb--one {
    right: -2%;
  }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --tt-gutter: 16px;
    --tt-section-space: 68px;
  }

  html {
    scroll-padding-top: 78px;
  }

  .container {
    width: calc(100% - 32px) !important;
  }

  .site-header,
  .site-header.scrolled {
    height: 70px !important;
  }

  .logo-mark {
    width: 45px !important;
    height: 40px !important;
  }

  .logo-copy {
    font-size: .82rem !important;
  }

  .logo-copy small {
    font-size: .55rem !important;
    letter-spacing: .14em !important;
  }

  .menu-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .hero {
    min-height: 620px !important;
  }

  .hero-content {
    width: 100%;
    padding-block: 142px 84px !important;
  }

  .hero h1 {
    font-size: clamp(2.32rem, 11.4vw, 3.55rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -.052em !important;
  }

  .hero-description {
    font-size: .96rem;
    line-height: 1.68;
  }

  .hero-buttons {
    width: 100%;
    gap: 10px !important;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .section-heading {
    text-align: left !important;
    margin-left: 0 !important;
  }

  .section-heading p {
    margin-left: 0 !important;
  }

  .section-heading h2 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
  }

  .story-grid,
  .purpose-grid,
  .values-grid,
  .approach-grid,
  .promise-grid,
  .services-grid,
  .traveler-grid,
  .process-grid,
  .service-promise-grid,
  .tours-grid,
  .tour-types-grid,
  .tour-help-grid,
  .transfer-services-grid,
  .vehicle-grid,
  .coverage-grid,
  .transfer-process-grid,
  .quote-grid,
  .contact-card-grid,
  .contact-main-grid,
  .visit-grid {
    grid-template-columns: 1fr !important;
  }

  .identity-grid,
  .transfer-trust-grid {
    grid-template-columns: 1fr !important;
  }

  .identity-item,
  .transfer-trust-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  .identity-item:last-child,
  .transfer-trust-item:last-child {
    border-bottom: 0;
  }

  .stats {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat {
    min-height: 120px;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .footer-brand p {
    max-width: 100% !important;
  }

  .tt-orb--one {
    width: 76px;
    height: 76px;
    right: -24px;
    top: 18%;
    opacity: .55;
  }

  .tt-orb--two {
    right: 8%;
    bottom: 7%;
    opacity: .45;
  }

  .tt-orb--three {
    display: none;
  }

  .tt-tilt,
  .tt-tilt:hover {
    --tt-rx: 0deg !important;
    --tt-ry: 0deg !important;
    --tt-scale: 1 !important;
    transform: translate3d(0, var(--tt-lift), 0) !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .whatsapp-panel {
    width: min(340px, calc(100vw - 32px)) !important;
  }
}

@media (max-width: 420px) {
  .container {
    width: calc(100% - 28px) !important;
  }

  .hero h1 {
    font-size: clamp(2.18rem, 11.8vw, 3rem) !important;
  }

  .stats {
    grid-template-columns: 1fr !important;
  }

  .mobile-drawer {
    width: min(340px, 92vw) !important;
    padding-inline: 22px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .tt-tilt,
  .tt-tilt:hover {
    --tt-rx: 0deg !important;
    --tt-ry: 0deg !important;
    --tt-scale: 1 !important;
  }
}

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

  .tt-orb > i {
    animation: none !important;
  }

  .tt-orb,
  .tt-tilt,
  .logo-mark,
  .btn {
    transition-duration: .01ms !important;
  }

  .tt-tilt,
  .tt-tilt:hover {
    --tt-rx: 0deg !important;
    --tt-ry: 0deg !important;
    --tt-lift: 0px !important;
    --tt-scale: 1 !important;
    transform: none !important;
  }
}


/* --- v9: updated Travel Trek UAE red / green / charcoal identity --- */
:root {
  --navy-950: #171d1f !important;
  --navy-900: #212829 !important;
  --navy-800: #0d5f42 !important;
  --navy-700: #087348 !important;
  --sky-500: #0a8a54 !important;
  --gold: #e31413 !important;
  --gold-dark: #ae0908 !important;
  --ink: #212829 !important;
  --muted: #68736d !important;
  --line: #e4ebe7 !important;
  --surface: #f7faf8 !important;
  --shadow: 0 18px 45px rgba(8,115,72,.14) !important;
  --tt-brand-red: #e31413;
  --tt-brand-red-dark: #ae0908;
  --tt-brand-green: #087348;
  --tt-brand-green-bright: #0a8a54;
  --tt-brand-charcoal: #212829;
}
::selection { color:#fff !important; background:var(--tt-brand-green) !important; }
:focus-visible { outline-color:rgba(227,20,19,.72) !important; }
.site-header.scrolled { background:rgba(23,29,31,.95) !important; box-shadow:0 14px 38px rgba(0,0,0,.24) !important; }
.logo { min-width:245px !important; }
.logo-mark { width:72px !important; height:50px !important; }
.logo-mark img { object-fit:contain !important; filter:drop-shadow(0 7px 13px rgba(0,0,0,.26)) !important; }
.logo-copy { color:#fff !important; letter-spacing:.018em !important; }
.logo-copy .brand-travel { color:var(--tt-brand-red) !important; font-weight:950; }
.logo-copy strong { color:#0fa05d !important; font-weight:950; }
.logo-copy small { color:rgba(255,255,255,.82) !important; letter-spacing:.1em !important; }
.site-footer,.mobile-drawer { background:radial-gradient(circle at 8% 10%,rgba(8,115,72,.18),transparent 30%),linear-gradient(145deg,#171d1f,#111718 70%,#08110d) !important; }
.footer-logo-card { width:190px !important; padding:10px !important; border:1px solid rgba(8,115,72,.16) !important; background:#fff !important; box-shadow:0 18px 38px rgba(0,0,0,.24) !important; }
.footer-logo-card img { max-height:172px; object-fit:contain; }
.btn-primary,.newsletter-form button { color:#fff !important; background:linear-gradient(135deg,#e31413,#b80e15) !important; box-shadow:0 13px 29px rgba(227,20,19,.25) !important; }
.btn-primary:hover,.newsletter-form button:hover { background:linear-gradient(135deg,#f12b28,#c71018) !important; box-shadow:0 17px 34px rgba(227,20,19,.31) !important; }
.btn-dark { background:linear-gradient(135deg,#212829,#0d5f42) !important; }
.btn-dark:hover { background:linear-gradient(135deg,#0d5f42,#087348) !important; }
.desktop-nav a::after,.mobile-links a[aria-current="page"]::after { background:linear-gradient(90deg,#e31413,#087348) !important; }
.phone .icon,.section-heading .script,.hero-script,.script { color:#e31413 !important; }
.trust-icon,.service-icon,.transfer-service-icon,.contact-card-icon,.transfer-form-title-icon,.contact-form-title-icon { color:#087348 !important; }
.package-badge,.tour-badge { color:#fff !important; background:linear-gradient(135deg,#e31413,#b60d14) !important; }
.price-tag { background:#171d1f !important; }
.text-link,.transfer-service-link,.tour-detail-btn { color:#087348 !important; }
.hero { background-color:#0d5f42 !important; }
.hero::after { background:linear-gradient(180deg,transparent,rgba(23,29,31,.56)) !important; }
.tt-orb > i { background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.025)),linear-gradient(145deg,rgba(227,20,19,.15),rgba(8,115,72,.15)) !important; }
.tt-tilt:hover { box-shadow:0 28px 65px rgba(8,115,72,.18) !important; }
.whatsapp-toggle { box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 0 7px rgba(37,211,102,.12),0 20px 44px rgba(9,114,51,.34) !important; }
@media(max-width:1020px){ .logo{min-width:0 !important;} }
@media(max-width:720px){ .logo-mark{width:58px !important;height:42px !important;} .logo-copy{font-size:.78rem !important;} .logo-copy small{max-width:145px;font-size:.49rem !important;line-height:1.25;letter-spacing:.07em !important;} }


/* --- v10: corrected social icons and tour-image treatment --- */
.socials{display:flex!important;align-items:center;flex-wrap:wrap;gap:11px!important;margin-top:22px!important;}
.socials .social-link{position:relative;width:48px!important;min-width:48px!important;height:48px!important;padding:0!important;display:grid!important;place-items:center;overflow:visible!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:50%!important;color:rgba(255,255,255,.9)!important;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.15),transparent 35%),rgba(255,255,255,.045)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 9px 22px rgba(0,0,0,.15)!important;backdrop-filter:blur(9px);transition:transform .28s var(--tt-ease),color .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease!important;}
.socials .social-link::before{content:attr(title);position:absolute;left:50%;bottom:calc(100% + 9px);min-width:max-content;padding:6px 9px;border-radius:8px;color:#fff;background:rgba(13,19,18,.94);box-shadow:0 10px 24px rgba(0,0,0,.2);font-size:.64rem;font-weight:850;letter-spacing:.02em;opacity:0;visibility:hidden;transform:translate(-50%,7px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none;}
.socials .social-link::after{display:none!important;}
.socials .social-link:hover::before,.socials .social-link:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0);}
.social-icon{width:21px!important;height:21px!important;display:block;fill:currentColor!important;stroke:none!important;transition:transform .28s var(--tt-ease);}
.socials .social-link:hover,.socials .social-link:focus-visible{transform:translateY(-5px) scale(1.04)!important;color:#fff!important;}
.socials .social-link:hover .social-icon,.socials .social-link:focus-visible .social-icon{transform:scale(1.1);}
.social-facebook:hover,.social-facebook:focus-visible{border-color:#1877f2!important;background:#1877f2!important;box-shadow:0 14px 28px rgba(24,119,242,.3)!important;}
.social-instagram:hover,.social-instagram:focus-visible{border-color:#e1306c!important;background:linear-gradient(135deg,#833ab4,#fd1d1d 58%,#fcaf45)!important;box-shadow:0 14px 28px rgba(225,48,108,.28)!important;}
.social-x:hover,.social-x:focus-visible{border-color:rgba(255,255,255,.8)!important;background:#080808!important;box-shadow:0 14px 28px rgba(0,0,0,.32)!important;}
.social-youtube:hover,.social-youtube:focus-visible{border-color:#ff0000!important;background:#ff0000!important;box-shadow:0 14px 28px rgba(255,0,0,.25)!important;}
.tour-card-media{background:linear-gradient(145deg,#17201c,#087348)!important;}
.tour-card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.025);}
.tour-card:hover .tour-card-media img{filter:saturate(1.1) contrast(1.04);}
@media(max-width:720px){.socials .social-link{width:45px!important;min-width:45px!important;height:45px!important}.socials .social-link::before{display:none;}}


/* --- v11: exact updated Travel Trek red / green / charcoal branding --- */
:root {
  --navy-950: #111719 !important;
  --navy-900: #202629 !important;
  --navy-800: #0b5b3d !important;
  --navy-700: #08754b !important;
  --sky-500: #0a945c !important;
  --gold: #df1216 !important;
  --gold-dark: #ae0b0f !important;
  --ink: #202629 !important;
  --muted: #65726c !important;
  --line: #e1e9e4 !important;
  --surface: #f7faf8 !important;
  --white: #ffffff !important;
  --tt-brand-red: #df1216;
  --tt-brand-red-dark: #ae0b0f;
  --tt-brand-green: #08754b;
  --tt-brand-green-bright: #0a945c;
  --tt-brand-charcoal: #202629;
  --tt-brand-black: #111719;
  --tt-shadow-soft: 0 16px 42px rgba(8,117,75,.11);
  --tt-shadow-lift: 0 28px 65px rgba(8,117,75,.18);
}

::selection {
  color: #fff;
  background: var(--tt-brand-green);
}

html {
  accent-color: var(--tt-brand-green);
}

body {
  color: var(--tt-brand-charcoal);
  background: #fff;
}

/* Logo treatment */
.logo {
  min-width: 248px !important;
  gap: 10px !important;
}
.logo-mark {
  width: 76px !important;
  height: 54px !important;
}
.logo-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.2)) !important;
}
.logo-copy {
  color: #fff !important;
  font-weight: 800 !important;
}
.logo-copy .brand-travel {
  color: var(--tt-brand-red) !important;
  font-weight: 950 !important;
}
.logo-copy strong {
  color: #10a267 !important;
  font-weight: 950 !important;
}
.logo-copy small {
  color: rgba(255,255,255,.78) !important;
  font-size: .55rem !important;
  letter-spacing: .09em !important;
}

.site-header.scrolled {
  background: rgba(17,23,25,.96) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.23) !important;
}

.footer-logo-card {
  width: min(220px, 100%) !important;
  padding: 8px !important;
  border: 1px solid rgba(8,117,75,.16) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.2) !important;
}
.footer-logo-card img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Footer + mobile drawer now match the charcoal/green side of the logo */
.site-footer,
.mobile-drawer {
  background:
    radial-gradient(circle at 8% 7%, rgba(8,117,75,.18), transparent 29%),
    radial-gradient(circle at 95% 100%, rgba(223,18,22,.08), transparent 26%),
    linear-gradient(145deg, #202629, #111719 73%, #07110d) !important;
}

/* CTA hierarchy: red primary, green secondary */
.btn-primary,
.newsletter-form button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-brand-red), var(--tt-brand-red-dark)) !important;
  box-shadow: 0 14px 30px rgba(223,18,22,.25) !important;
}
.btn-primary:hover,
.newsletter-form button:hover {
  background: linear-gradient(135deg, #f02a2d, #c20e14) !important;
  box-shadow: 0 19px 37px rgba(223,18,22,.31) !important;
}

.btn-dark {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-brand-charcoal), #0b5b3d) !important;
}
.btn-dark:hover {
  background: linear-gradient(135deg, #0b5b3d, var(--tt-brand-green)) !important;
}

.btn-outline:hover {
  border-color: var(--tt-brand-red) !important;
  background: var(--tt-brand-red) !important;
  color: #fff !important;
}

/* Navigation + headings */
.desktop-nav a.active,
.desktop-nav a[aria-current="page"],
.mobile-links a[aria-current="page"] {
  color: #fff !important;
}
.desktop-nav a::before,
.desktop-nav a::after {
  background: linear-gradient(90deg, var(--tt-brand-red), var(--tt-brand-green)) !important;
}
.hero-script,
.script,
.section-heading .script {
  color: #f32a2d !important;
}
.section-heading h2 strong,
.hero h1 strong {
  color: var(--tt-brand-green) !important;
}

/* Icon and card accents */
.contact-card-icon,
.transfer-service-icon,
.service-icon,
.trust-icon,
.contact-form-title-icon,
.transfer-form-title-icon {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-brand-green), #064f35) !important;
}
.package-badge,
.tour-badge {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-brand-red), var(--tt-brand-red-dark)) !important;
}
.price-tag {
  color: #fff !important;
  background: var(--tt-brand-charcoal) !important;
}
.text-link,
.transfer-service-link,
.tour-detail-btn,
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--tt-brand-green-bright) !important;
}

/* Form focus */
input:focus,
select:focus,
textarea:focus,
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--tt-brand-green) !important;
  box-shadow: 0 0 0 4px rgba(8,117,75,.11) !important;
}

/* 3D and motion highlights */
.tt-orb > i {
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02)),
    linear-gradient(145deg, rgba(223,18,22,.17), rgba(8,117,75,.17)) !important;
}
.tt-tilt:hover {
  box-shadow: var(--tt-shadow-lift) !important;
}
.tour-card::after,
.package-card::after {
  background: linear-gradient(90deg, transparent, var(--tt-brand-red) 20%, var(--tt-brand-green) 74%, transparent) !important;
}

/* Page loader colors */
.tt-page-transition {
  background:
    radial-gradient(circle at 17% 18%, rgba(223,18,22,.19), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(8,117,75,.25), transparent 34%),
    linear-gradient(145deg, #202629, #0a3d2b 58%, #111719) !important;
}
.tt-transition-progress span {
  background: linear-gradient(90deg, var(--tt-brand-red), #ffffff, var(--tt-brand-green)) !important;
}
.tt-transition-dot:first-child {
  background: var(--tt-brand-red) !important;
}
.tt-transition-dot:last-child {
  background: var(--tt-brand-green) !important;
}

/* Premium cursor colors */
.tt-cursor-ring::before {
  background:
    conic-gradient(
      from 0deg,
      rgba(223,18,22,.88),
      rgba(255,255,255,.18) 18%,
      rgba(8,117,75,.9) 38%,
      rgba(255,255,255,.16) 53%,
      rgba(223,18,22,.8) 72%,
      rgba(255,255,255,.14) 88%,
      rgba(223,18,22,.88)
    ) !important;
}
.tt-cursor-core {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.33), transparent 28%),
    linear-gradient(145deg, var(--tt-brand-red), var(--tt-brand-green) 65%, var(--tt-brand-charcoal)) !important;
}

/* Social icons sit naturally on the new charcoal footer */
.socials .social-link {
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.045) !important;
}

/* WhatsApp keeps official green, with red brand detail through the badge */
.whatsapp-toggle-badge {
  background: linear-gradient(145deg, #ef3437, var(--tt-brand-red)) !important;
}

/* Small brand line for a subtle UAE red/green identity */
.footer-bottom {
  position: relative;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  opacity: .5;
  background: linear-gradient(90deg, var(--tt-brand-red), rgba(255,255,255,.2), var(--tt-brand-green));
}

@media (max-width: 1020px) {
  .logo {
    min-width: 0 !important;
  }
}
@media (max-width: 720px) {
  .logo-mark {
    width: 62px !important;
    height: 44px !important;
  }
  .logo-copy {
    font-size: .8rem !important;
  }
  .logo-copy small {
    max-width: 150px;
    font-size: .49rem !important;
    line-height: 1.25 !important;
    letter-spacing: .065em !important;
  }
}


/* --- v13: locked WhatsApp geometry; prevents oversized SVG overflow --- */
.whatsapp-widget {
  position: fixed !important;
  z-index: 15000 !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(24px, env(safe-area-inset-bottom)) !important;
  width: 68px !important;
  height: 68px !important;
  display: block !important;
  pointer-events: none !important;
  contain: layout style !important;
}

.whatsapp-widget > * {
  pointer-events: auto !important;
}

.whatsapp-toggle {
  position: absolute !important;
  inset: 0 !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
  font-size: 0 !important;
  isolation: isolate !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  animation: ttWaLockedFloat 3.2s ease-in-out infinite !important;
  transition: transform .24s ease !important;
}

.wa-button-surface {
  position: absolute !important;
  inset: 0 !important;
  width: 68px !important;
  height: 68px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.38), transparent 25%),
    linear-gradient(145deg, #37e779 0%, #25d366 52%, #0a9a45 100%) !important;
  box-shadow:
    0 0 0 7px rgba(37,211,102,.12),
    0 18px 42px rgba(10,120,51,.34),
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -7px 14px rgba(4,98,42,.14) !important;
  box-sizing: border-box !important;
  transform: translateZ(0) !important;
}

.wa-button-surface::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important;
  pointer-events: none !important;
}

.wa-button-gloss {
  position: absolute !important;
  z-index: 1 !important;
  left: 9px !important;
  top: 7px !important;
  width: 37px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent) !important;
  transform: rotate(-18deg) !important;
  pointer-events: none !important;
}

.wa-button-icon {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
  overflow: hidden !important;
  flex: none !important;
  transform: none !important;
  filter: drop-shadow(0 5px 7px rgba(0,78,35,.22)) !important;
}

.wa-button-icon path {
  fill: #fff !important;
  stroke: none !important;
}

.whatsapp-toggle::before {
  content: "" !important;
  position: absolute !important;
  z-index: -2 !important;
  inset: -8px !important;
  border: 1.5px solid rgba(37,211,102,.36) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: ttWaLockedRing 2.5s ease-out infinite !important;
}

.whatsapp-toggle::after {
  display: none !important;
  content: none !important;
}

.whatsapp-toggle-badge {
  position: absolute !important;
  z-index: 6 !important;
  right: -4px !important;
  top: -5px !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(145deg, #f23b3f, #df1216) !important;
  box-shadow: 0 7px 16px rgba(160,17,20,.26) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-sizing: border-box !important;
}

.whatsapp-toggle:hover,
.whatsapp-toggle:focus-visible {
  transform: translateY(-5px) scale(1.055) !important;
}

.whatsapp-toggle:hover .wa-button-surface,
.whatsapp-toggle:focus-visible .wa-button-surface {
  box-shadow:
    0 0 0 9px rgba(37,211,102,.13),
    0 24px 50px rgba(10,120,51,.4),
    inset 0 2px 0 rgba(255,255,255,.4) !important;
}

.whatsapp-widget.open .whatsapp-toggle {
  animation: none !important;
  transform: scale(.96) !important;
}

.whatsapp-widget.open .whatsapp-toggle-badge {
  opacity: 0 !important;
  transform: scale(.35) !important;
}

/* panel is positioned from the locked 68px widget */
.whatsapp-panel {
  position: absolute !important;
  right: 0 !important;
  bottom: 82px !important;
  width: min(380px, calc(100vw - 48px)) !important;
  max-width: 380px !important;
  max-height: min(650px, calc(100dvh - 120px)) !important;
  overflow: hidden auto !important;
  border: 1px solid rgba(37,211,102,.22) !important;
  border-radius: 22px !important;
  color: #202629 !important;
  background: #f8fffb !important;
  box-shadow:
    0 30px 85px rgba(11,53,33,.27),
    0 0 0 1px rgba(255,255,255,.82) inset !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) scale(.97) !important;
  transform-origin: bottom right !important;
  transition: opacity .22s ease, visibility .22s ease, transform .26s cubic-bezier(.2,.75,.25,1) !important;
}

.whatsapp-widget.open .whatsapp-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

@keyframes ttWaLockedFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes ttWaLockedRing {
  0% { opacity: .72; transform: scale(.82); }
  78%,100% { opacity: 0; transform: scale(1.28); }
}

@media (max-width: 1020px) {
  .whatsapp-widget {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 720px) {
  .whatsapp-widget {
    width: 60px !important;
    height: 60px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .whatsapp-toggle,
  .wa-button-surface {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .wa-button-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .whatsapp-toggle-badge {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    right: -3px !important;
    top: -4px !important;
    font-size: 10px !important;
  }

  .whatsapp-panel {
    bottom: 72px !important;
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 104px) !important;
  }
}

@media (max-width: 420px) {
  .whatsapp-panel {
    width: calc(100vw - 24px) !important;
    right: -2px !important;
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-toggle,
  .whatsapp-toggle::before {
    animation: none !important;
  }
}