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

[dir="rtl"]{
  font-family:'Cairo','DM Sans',sans-serif;
}

:root{
  --blue:#001F3F;
  --blue-dark:#001529;
  --blue-light:#1C5075;
  --blue-pale:#e6eef5;
  --navy-ink:#0b1d3a;
  --navy-deep:#081629;
  --navy-darker:#00152b;
  --sky-top:#001F3F;
  --sky-bot:#1C5075;
  --text:#0A0A0A;
  --muted:#6B7280;
  --muted-light:#9CA3AF;
  --bg:#F7F8FA;
  --bg2:#EEEEF2;
  --white:#FFFFFF;
  --radius-pill:999px;
  --radius-card:20px;
  --radius-lg:16px;
  --radius-sm:10px;
  --shadow:0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.12);
  --transition:0.25s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth;scrollbar-width:none;overflow-x:hidden;}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;cursor:default;}

/* Nav targets for the #why / #about / #contact links. The nav pill is fixed at
   top:20px and ~66px tall, so without this an anchor jump parks the section's
   heading underneath it. */
#why,#about,#contact{scroll-margin-top:100px;}

/* ── SCROLLBAR (hidden — scrolling still works) ── */
html::-webkit-scrollbar{display:none;width:0;height:0;}
::-webkit-scrollbar{width:0;height:0;}

/* ── SELECTION ── */
::selection{background:var(--blue);color:white;}

/* ── TYPOGRAPHY ── */
h1,h2,h3{font-family:'Outfit',sans-serif;}

/* ── NAV ── */
nav{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:min(1000px,94vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
  /* Frosted glass: translucent enough to read the video/section through it,
     with saturate() to keep the colour behind it rich instead of milky.
     Kept light rather than dark so the navy logo and links stay legible over
     both the video and the pale sections further down. */
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--radius-pill);
  padding:8px 20px;
  box-shadow:0 8px 32px rgba(3,12,24,0.18);
  z-index:1000;
  transition:transform 0.3s ease, box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Slides up out of view — toggled by the scroll listener in each page's
   inline script: hidden while scrolling down, back on scrolling up, and
   hidden at the very top on mobile. */
nav.nav-hidden{
  transform:translate(-50%,-140%);
}

@media(max-width:768px){
  nav{
    grid-template-columns:1fr auto 1fr;
    gap:16px;
  }
}

nav.scrolled{
  box-shadow:0 10px 40px rgba(3,12,24,0.22);
}

.nav-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  justify-self:start;
}

.nav-logo-img{
  height:36px;
  width:auto;
}

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

.nav-links a{
  font-size:14px;
  font-weight:500;
  color:var(--navy-ink);
  text-decoration:none;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  transition:var(--transition);
  white-space:nowrap;
}

.nav-links a:hover{
  color:var(--text);
  background:rgba(255,255,255,0.55);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  justify-content:flex-end;
  justify-self:end;
}

.nav-cta{
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  color:white;
  border:none;
  border-radius:10px;
  padding:10px 24px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}

.nav-cta:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,21,41,0.3);
}

.nav-lang-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:none;
  border-radius:8px;
  padding:7px 10px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--navy-ink);
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}

.nav-lang-toggle i{
  font-size:11px;
  color:var(--blue-light);
  transition:var(--transition);
}

.nav-lang-toggle:hover{
  color:var(--text);
  background:rgba(255,255,255,0.55);
}

.nav-lang-toggle:hover i{
  color:var(--blue-light);
}

.nav-divider{
  width:1px;
  height:20px;
  background:rgba(0,31,63,0.18);
  flex-shrink:0;
}

.nav-menu-btn{
  display:none;
}

/* Mobile Menu */
.nav-mobile-menu{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  visibility:hidden;
  opacity:0;
  transition:visibility 0.3s, opacity 0.3s;
}

.nav-mobile-menu.active{
  visibility:visible;
  opacity:1;
}

.nav-mobile-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
}

.nav-mobile-content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(320px, 85vw);
  background:var(--white);
  box-shadow:-4px 0 24px rgba(0,0,0,0.15);
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex;
  flex-direction:column;
}

.nav-mobile-menu.active .nav-mobile-content{
  transform:translateX(0);
}

.nav-mobile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid #f0f0f0;
}

.nav-mobile-logo{
  height:32px;
  width:auto;
}

.nav-mobile-close{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  padding:8px;
  cursor:pointer;
  color:var(--navy-ink);
  font-size:20px;
  transition:var(--transition);
  border-radius:8px;
}

.nav-mobile-close:hover{
  background:rgba(11,29,58,0.08);
  color:var(--navy-deep);
}

.nav-mobile-links{
  flex:1;
  padding:16px 0;
  overflow-y:auto;
}

.nav-mobile-link{
  display:block;
  padding:14px 24px;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  transition:var(--transition);
}

.nav-mobile-link:hover{
  background:var(--bg);
  color:var(--navy-ink);
}

.nav-mobile-footer{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px 24px;
  border-top:1px solid #f0f0f0;
}

.nav-mobile-cta{
  width:100%;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  color:white;
  border:none;
  border-radius:12px;
  padding:14px 24px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}

.nav-mobile-cta:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,21,41,0.3);
}

.nav-mobile-lang-toggle{
  width:100%;
  background:transparent;
  border:none;
  font-family:'DM Sans',sans-serif;
  text-align:left;
  cursor:pointer;
}
[dir="rtl"] .nav-mobile-lang-toggle{text-align:right;}

@media(max-width:768px){
  .nav-links{
    display:none;
  }
  .nav-right{
    display:none;
  }
  .nav-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    grid-column:4;
    background:transparent;
    border:none;
    padding:8px;
    cursor:pointer;
    color:var(--navy-ink);
    font-size:20px;
    transition:var(--transition);
  }
  .nav-menu-btn:hover{
    color:var(--navy-deep);
    opacity:0.8;
  }
}

/* ── HERO / BANNER ── navbar, video and hero content all sit on one
   continuous navy gradient — see templates/webpage/hero.html. No crop,
   scrim or overlay on the video itself; the "banner" feel comes entirely
   from the shared background behind it. */
.hero{
  position:relative;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 15%,var(--blue-light) 35%,var(--blue-light) 65%,var(--navy-darker) 85%,var(--blue) 100%);
  overflow:hidden;
}

/* Sits on top of the video, curving over just the bottom edge of it. */
.hero-panel{
  position:relative;
  z-index:2;
  margin-top:-32px;
  border-radius:32px 32px 0 0;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 15%,var(--blue-light) 35%,var(--blue-light) 65%,var(--navy-darker) 85%,var(--blue) 100%);
}

.hero-container{
  max-width:1400px;
  margin:0 auto;
  padding-inline:20px;
  padding-top:20px;
  position:relative;
}

.hero-video-wrap{
  position:relative;
  width:100%;
}

.hero-video{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  /* Same trap as .about-material img: the reduced-motion fallback that shares
     this class is an <img height="1080">, and that presentational hint would
     pin it to 1080px tall and cancel the aspect-ratio below. */
  height:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  object-fit:cover;
  background:#5F615D; /* poster's average tone, so a slow load never flashes black */
}

/* Chrome/Edge inject a hover "enter picture-in-picture" overlay button on
   any playing <video> — the disablepictureinpicture attribute stops the
   feature itself, this hides the control if a browser still renders it. */
.hero-video::-webkit-media-controls-picture-in-picture-button{
  display:none !important;
}

.hero-video-fallback{
  display:none;
}

@media(prefers-reduced-motion:reduce){
  video.hero-video{display:none;}
  .hero-video-fallback{display:block;}
}

/* Hero content */
.hero-inner{
  padding-top:64px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:48px;
  align-items:center;
  position:relative;
  z-index:1;
}

@media(max-width:768px){
  .hero-inner{
    padding-top:40px;
    gap:24px;
  }
}

.hero h1{
  font-size:clamp(34px,5vw,58px);font-weight:700;color:white;
  text-align:left;line-height:1.04;
  margin-bottom:22px;position:relative;
  animation:fadeUp 0.6s 0.1s ease both;
  letter-spacing:-0.025em;
  text-shadow:0 4px 24px rgba(0,0,0,0.25);
  white-space:nowrap;
}
.hero h1 em{font-style:italic;opacity:0.85;}
.btn-outline-white{
  background:rgba(255,255,255,0.14);color:white;
  border:1.5px solid rgba(255,255,255,0.36);border-radius:var(--radius-pill);
  padding:14px 30px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;
  cursor:pointer;transition:var(--transition);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:9px;
}
.btn-outline-white:hover{background:rgba(255,255,255,0.24);border-color:rgba(255,255,255,0.6);transform:translateY(-2px);}

.hero-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  min-width:0;
  padding-inline-start:110px;
}

@media(max-width:768px){
  .hero-content{
    padding-inline-start:0;
    align-items:center;
    text-align:center;
  }
  .hero h1{
    text-align:center;
    white-space:normal;
  }
  .hero-cta{
    justify-content:center;
    margin-bottom:0;
  }
  /* Only the text-align override is still needed here — the align-items and
     justify-content counterparts existed solely to undo the RTL overrides
     that have now been removed. */
  [dir="rtl"] .hero h1{
    text-align:center;
  }
}

.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:100px;
  backdrop-filter:blur(10px);
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
  color:white;
  margin-bottom:32px;
  animation:fadeUp 0.6s ease both;
}

.trust-flag{
  width:16px;
  height:auto;
  border-radius:2px;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.3);
}

.hero h1 .highlight{
  background:linear-gradient(90deg, #AA8445 0%, #EFDA97 50%, #AA8348 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
}

.hero-description{
  font-size:18px;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
  max-width:540px;
  margin-bottom:32px;
  animation:fadeUp 0.6s 0.2s ease both;
}

.hero-cta{
  margin-bottom:40px;
  animation:fadeUp 0.6s 0.3s ease both;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}

@media(max-width:420px){
  .store-btn-glass{
    flex:1 1 100%;
    min-height:48px;
    /* Stretched full-width here, so the icon+label cluster has to be centred —
       it defaults to flex-start, which leaves it stranded on the left. */
    justify-content:center;
  }
}

.store-btn-glass{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 24px;
  border-radius:14px;
  cursor:pointer;
  min-width:180px;
  background:rgba(255, 255, 255, 0.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(212, 168, 67, 0.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.15);
  transition:all 0.2s ease;
  text-decoration:none;
}

.store-btn-glass:hover{
  background:rgba(255, 255, 255, 0.13);
  border-color:rgba(212, 168, 67, 0.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.2);
  transform:translateY(-1px);
}

.store-btn-glass svg{
  flex-shrink:0;
  opacity:0.95;
}

.store-btn-text{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.store-btn-label{
  font-size:10px;
  font-weight:400;
  letter-spacing:0.06em;
  color:rgba(255, 255, 255, 0.75);
  text-transform:uppercase;
  line-height:1;
}

.store-btn-name{
  font-size:17px;
  font-weight:700;
  color:#ffffff;
  line-height:1.2;
  letter-spacing:-0.01em;
}

.hero-mockup{
  max-width:620px;
  width:100%;
  display:flex;
  justify-content:center;
  justify-self:end;
  position:relative;
  animation:fadeUp 0.8s 0.4s ease both;
}

.hero-mockup-glow{
  position:absolute;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  width:420px;
  height:220px;
  background:radial-gradient(ellipse at center, rgba(240,218,151,0.30) 0%, rgba(28,80,117,0.20) 45%, transparent 75%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}

.hero-phone-image{
  width:100%;
  max-width:620px;
  height:auto;
  display:block;
  object-fit:contain;
  position:relative;
  z-index:1;
}

/* ── MARQUEE ── */
.marquee-section{background:var(--white);padding:40px 0;overflow:hidden;border-bottom:1px solid #f0f0f0;}
.marquee-track{display:flex;gap:0;overflow:hidden;}
.marquee-inner{
  display:flex;align-items:center;gap:56px;flex-shrink:0;
  animation:marquee 22s linear infinite;
  padding:0 28px;
}
.marquee-track:hover .marquee-inner{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.brand-item{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;
  color:#C0C0C0;display:flex;align-items:center;gap:7px;
  white-space:nowrap;transition:color var(--transition);cursor:default;
}
.brand-item:hover{color:#888;}
.brand-icon{
  width:20px;height:20px;border-radius:5px;background:#DDD;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#888;
}

/* ── WHY SECTION ── */
.section-inner{max-width:1160px;margin:0 auto;}
.section-eyebrow{
  display:inline-block;border:1px solid var(--blue-pale);border-radius:var(--radius-pill);
  padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:0.02em;
  color:var(--blue-dark);margin-bottom:18px;background:var(--blue-pale);
}
.section-title{font-size:clamp(34px,4.5vw,58px);font-weight:900;line-height:1.1;letter-spacing:-0.02em;}
.text-blue{color:var(--blue-dark);}
.why{background:var(--bg);padding:64px 40px 100px;}
.why-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:30px;flex-wrap:wrap;}
.why-head .section-title{
  max-width:16ch;font-size:clamp(36px,4vw,52px);line-height:1.05;
}

.why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.why-grid{grid-template-columns:1fr;}}

.why-card{
  background:var(--white);border-radius:var(--radius-lg);
  overflow:hidden;position:relative;
  box-shadow:0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08);
  opacity:0;transform:translateY(24px);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);
}
.why.visible .why-card{
  transform:translateY(0);
  animation:cardFadeIn 0.6s ease forwards;
}
.why-grid .why-card:nth-child(1){animation-delay:0.05s;}
.why-grid .why-card:nth-child(2){animation-delay:0.12s;}
.why-grid .why-card:nth-child(3){animation-delay:0.19s;}
.why-grid .why-card:nth-child(4){animation-delay:0.26s;}
.why-grid .why-card:nth-child(5){animation-delay:0.33s;}
.why-grid .why-card:nth-child(6){animation-delay:0.40s;}

.why-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(16,24,40,0.06), 0 12px 28px rgba(16,24,40,0.12);
}

/* Material "state layer" — faint tonal wash on hover, no border needed */
.why-card::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:var(--blue);opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.why-card:hover::before{opacity:0.03;}

.why-card-visual{height:156px;position:relative;overflow:hidden;}
.why-card-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.why-card:hover .why-card-visual img{transform:scale(1.05);}

.why-card-body{padding:26px 26px 28px;position:relative;}
.why-card-index{
  display:block;font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0.1em;
  color:var(--blue);margin-bottom:10px;
}
.why-card h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--text);}
.why-card p{font-size:14px;color:var(--muted);line-height:1.65;}

@keyframes cardFadeIn{from{opacity:0;}to{opacity:1;}}

/* ── WHY / SERVICES: ACCORDION + VISUAL ── */
.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;}
@media(max-width:900px){.why-layout{display:none;}}

.why-accordion{display:flex;flex-direction:column;}
.why-accordion-item{
  position:relative;padding-bottom:14px;
  border-bottom:1px solid #e5e7eb;
  transition:border-color 250ms ease;
}
.why-accordion-item.active{border-bottom-color:transparent;}

.why-accordion-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;background:none;border:none;padding:20px 0 8px;margin:0;
  font:inherit;color:inherit;appearance:none;-webkit-appearance:none;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
[dir="rtl"] .why-accordion-head{text-align:right;}

.why-accordion-head:focus-visible{
  outline:2px solid var(--blue);outline-offset:6px;border-radius:8px;
}

.why-accordion-head h3{
  font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--muted-light);
  font-family:'Outfit',sans-serif;transition:color 0.25s ease;
}
.why-accordion-item.active .why-accordion-head h3{color:var(--text);font-weight:700;}

/* grid-rows 0fr → 1fr gives a smooth, JS-free height animation with no max-height guessing */
.why-accordion-collapse{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 350ms ease-in-out;
}
.why-accordion-item.active .why-accordion-collapse{grid-template-rows:1fr;}
.why-accordion-body{overflow:hidden;}
.why-accordion-body p{
  font-size:14px;color:var(--muted);line-height:1.6;max-width:440px;
  padding-top:0;padding-bottom:16px;opacity:0;transform:translateY(-4px);
  transition:opacity 250ms ease,transform 250ms ease;
}
.why-accordion-item.active .why-accordion-body p{
  opacity:1;transform:translateY(0);transition-delay:100ms;
}

.why-learn-more{
  display:inline-block;
  margin-bottom:16px;padding:0;border:none;background:none;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  color:var(--blue);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px;
  transition:color 0.25s ease;
}
.why-learn-more:hover{color:var(--blue-dark);}

.why-accordion-body .why-learn-more{
  opacity:0;transform:translateY(-4px);
  transition:opacity 250ms ease,transform 250ms ease;
}
.why-accordion-item.active .why-accordion-body .why-learn-more{
  opacity:1;transform:translateY(0);transition-delay:150ms;
}

.why-mobile-slide .why-learn-more{margin-top:4px;margin-bottom:0;margin-left:40px;margin-right:40px;}

/* ── VISUAL PANEL (same dark-card + service-row treatment as the mobile carousel) ── */
.why-visual{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  display:flex;align-items:center;justify-content:center;
}
.why-visual::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 62% 42%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 78%, rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 88% 25%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.4) 50%, transparent);
}
.why-visual-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;top:-8%;right:-6%;
  background:radial-gradient(circle, rgba(240,218,151,0.28) 0%, transparent 70%);
  filter:blur(45px);pointer-events:none;
}
.why-visual-frame{
  position:relative;z-index:2;width:100%;height:100%;
}
.why-visual-card{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  opacity:0;transform:translateY(20px);
  transition:none;
  pointer-events:none;
  z-index:1;
}
.why-visual-card.active{
  opacity:1;transform:translateY(0);z-index:3;
  transition:opacity 500ms ease-out,transform 500ms ease-out;
}
.why-visual-card.leaving{
  opacity:0;transform:translateY(-20px);z-index:2;
  transition:opacity 400ms ease-out,transform 400ms ease-out;
}

/* ── MOBILE: SWIPEABLE SERVICE CAROUSEL ── */
.why-mobile-carousel{display:none;}
@media(max-width:900px){
  .why-mobile-carousel{display:block;margin-top:8px;}
}

/* grid-auto-columns:100% gives every slide an unambiguous, deterministic
   width equal to the track's content box — avoids the flex-basis:% edge
   cases (min-width:auto content forcing a wider hypothetical size) that
   made this overflow the viewport on some widths but not others.
   The track itself bleeds past the section's 40px side padding so each
   slide is the FULL viewport width — that way the visual panel can fill
   its slide edge-to-edge without spilling into the next slide's column
   (a negative margin on the panel instead of the track would bleed into
   the neighboring carousel cell, since grid columns don't clip siblings). */
.why-mobile-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  margin:0 -40px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.why-mobile-track::-webkit-scrollbar{display:none;}

.why-mobile-slide{
  min-width:0;
  scroll-snap-align:start;
}

.why-mobile-slide h3,
.why-mobile-slide p{padding-left:40px;padding-right:40px;}

.why-mobile-visual{
  position:relative;overflow:hidden;border-radius:0;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  height:260px;min-height:260px;min-width:0;
  margin-bottom:24px;
  padding:28px 20px;
  display:flex;align-items:center;justify-content:center;
}
.why-mobile-visual::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,0.4) 50%, transparent);
}
.why-mobile-visual-glow{
  position:absolute;width:220px;height:220px;border-radius:50%;top:-10%;right:-10%;
  background:radial-gradient(circle, rgba(240,218,151,0.28) 0%, transparent 70%);
  filter:blur(40px);pointer-events:none;
}
/* Shared "service row" card — used inside both the mobile carousel slides
   and the desktop visual panel, so both breakpoints render the same look. */
.svc-row{
  position:relative;z-index:2;width:100%;min-width:0;
  display:flex;align-items:center;gap:14px;
  background:var(--white);border-radius:16px;padding:14px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.svc-row-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-light) 0%,var(--blue) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
}
.svc-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.svc-row-label{font-size:11px;color:var(--muted);}
.svc-row-title{
  font-size:15px;font-weight:700;color:var(--text);font-family:'Outfit',sans-serif;
  line-height:1.3;
}
.svc-row-badge{
  flex-shrink:0;font-size:11px;font-weight:600;color:var(--blue-dark);
  background:var(--blue-pale);padding:5px 10px;border-radius:999px;white-space:nowrap;
}

.why-visual-card .svc-row{max-width:360px;}

.why-mobile-slide h3{
  font-size:22px;font-weight:700;color:var(--text);margin-bottom:8px;
  font-family:'Outfit',sans-serif;
}
.why-mobile-slide p{font-size:14px;color:var(--muted);line-height:1.6;max-width:440px;}

.why-mobile-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px;}
.why-mobile-dot{
  width:8px;height:8px;border-radius:50%;background:#D1D5DB;
  transition:background 0.25s ease,width 0.25s ease;cursor:pointer;padding:0;border:none;
}
.why-mobile-dot.active{background:var(--blue);width:22px;border-radius:4px;}

@media(max-width:480px){
  .why-mobile-visual{min-height:200px;padding:24px 16px;}
}

@media(prefers-reduced-motion:reduce){
  .why-accordion-collapse,
  .why-accordion-body p,
  .why-accordion-head h3,
  .why-visual-card,
  .why-mobile-track{scroll-behavior:auto;transition:none !important;}
}

/* ── REWARDS ── */
.rewards{
  --rw-navy-1:#1D4E72;--rw-navy-2:#103654;--rw-navy-3:#061A2E;
  --rw-gold:#C9A45C;--rw-gold-light:#E2C285;
  padding:72px 32px 80px;
  background:radial-gradient(120% 90% at 78% 12%,var(--rw-navy-1) 0%,var(--rw-navy-2) 42%,var(--rw-navy-3) 100%);
  color:#fff;font-family:'Poppins',sans-serif;
}
[dir="rtl"] .rewards{font-family:'Cairo','Poppins',sans-serif;}

.rewards-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:40px;}

.rewards-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:rgba(201,164,92,0.16);border:1px solid rgba(201,164,92,0.45);
}
.rewards-badge-dot{width:6px;height:6px;border-radius:999px;background:var(--rw-gold-light);flex:none;}
.rewards-badge span[data-i18n]{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rw-gold-light);
}

.rewards-title{
  font-size:clamp(30px,3.6vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:16px 0 0;
}
.rewards-title-gold{color:var(--rw-gold);}

.rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;}
.rewards-card{
  display:flex;flex-direction:column;gap:14px;
  padding:24px 24px 26px;border-radius:20px;
  background:rgba(255,255,255,0.055);border:1px solid rgba(255,255,255,0.14);
}
.rewards-card-highlight{
  background:linear-gradient(180deg,rgba(201,164,92,0.18),rgba(201,164,92,0.06));
  border:1px solid rgba(201,164,92,0.42);
}

.rewards-card-top{display:flex;align-items:center;justify-content:space-between;}
.rewards-card-index{
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,0.6);
}
.rewards-card-tag{
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:rgba(255,255,255,0.12);color:#fff;
}
.rewards-card-tag-solid{background:rgba(201,164,92,0.9);color:var(--rw-navy-3);}

.rewards-card h3{font-size:21px;line-height:1.2;font-weight:800;margin:0;}
.rewards-card p{font-size:14px;line-height:1.58;color:rgba(255,255,255,0.82);margin:0;}

.rewards-card-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,0.16);}
.rewards-card-foot-main{font-size:24px;font-weight:800;color:#fff;}
.rewards-card-foot-gold{color:var(--rw-gold-light);}
.rewards-card-foot-sub{font-size:12.5px;color:rgba(255,255,255,0.62);margin-top:3px;}

[dir="rtl"] .rewards-header,
[dir="rtl"] .rewards-card{text-align:right;}

@media(max-width:900px){
  .rewards{padding:56px 24px 64px;}
}

/* ── ABOUT US ── layout from design_handoff_about_section, re-themed onto the
   site's existing tokens (Outfit/DM Sans, the shared navy gradient, the same
   gold used in the hero highlight) rather than the handoff's own bespoke
   palette/typeface, so it reads as one site rather than a pasted-in block. */
.about{
  background:var(--bg);
  padding:104px 0 112px;
}

.about-inner{max-width:1240px;margin:0 auto;padding-inline:24px;}

.about-header{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:16px 24px;
}
.about-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:0.02em;
  color:var(--blue-dark);background:var(--blue-pale);
  border:1px solid var(--blue-pale);padding:6px 16px;border-radius:var(--radius-pill);
}
.about-lead{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:48px 72px;align-items:start;margin-top:32px;
}
.about-lead-title{
  margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.06;
  letter-spacing:-.028em;font-weight:800;color:var(--navy-ink);text-wrap:balance;
}
.about-lead-body{display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.about-lead-body p{margin:0;font-size:17px;line-height:1.7;color:var(--text);text-wrap:pretty;}

/* Same diagonal navy gradient used by the hero, nav CTA and legal-page banner. */
.about-quote{
  position:relative;overflow:hidden;
  margin:64px 0 0;border-radius:var(--radius-card);padding:clamp(40px,5vw,64px);
  /* Same navy gradient used sitewide — kept as-is, not the flatter panel
     shown in the reference design. */
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
}
/* Giant decorative closing-quote mark, bleeding off the top-right corner —
   clipped by the card's own overflow:hidden and rounded corners. */
.about-quote::after{
  content:'\201D';
  position:absolute;top:-0.28em;right:28px;
  font-family:Georgia,'Times New Roman',serif;font-size:clamp(120px,14vw,200px);
  font-weight:700;line-height:1;color:rgba(255,255,255,.06);
  pointer-events:none;user-select:none;z-index:0;
}
.about-quote blockquote{
  position:relative;z-index:1;
  margin:0;padding-left:28px;border-left:2px solid rgba(255,255,255,.18);
  font-size:clamp(22px,2.6vw,34px);line-height:1.36;font-weight:600;
  letter-spacing:-.015em;color:#FFFFFF;max-width:960px;text-wrap:pretty;
}
/* Small gold accent tick at the top of the left rule. */
/* Same gold gradient text-fill as the hero's ".highlight" span. */
.about-quote-highlight{
  background:linear-gradient(90deg, #AA8445 0%, #EFDA97 50%, #AA8348 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:700;
}

.about-band{margin-top:32px;height:clamp(260px,32vw,420px);}
.about-band img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card);display:block;
}

/* Recyclable streams, one photo per material.
   The source files are 512x512 and the bin fills almost the whole frame — the
   bottles break the top edge and the base sits on the bottom edge. So there is
   no slack to crop: forcing a landscape tile cut the tops off the contents and
   sliced through the base of every bin. These are shown at their native 1:1
   instead, which is the only ratio that holds the whole subject.
   Width, gap and edges match .about-band above and .about-cards below, so the
   three blocks line up on the same grid rather than floating independently. */
.about-materials{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;margin:32px 0 0;padding:0;list-style:none;
}
.about-material img{
  /* height:auto is load-bearing: the <img> carries height="512", which is a
     presentational hint that sets a used height. With a height other than
     auto, aspect-ratio is ignored entirely — which rendered these as 512px
     tall portraits in a ~300px column. */
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid #E0E0E0;border-radius:var(--radius-card);
  background:var(--white);transition:var(--transition);
}
.about-material:hover img{border-color:#D5D5D5;box-shadow:var(--shadow);}
/* Two up on phones — four across leaves each bin too small to make out. */
@media(max-width:680px){
  .about-materials{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;}
}

.about-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:20px;margin-top:64px;
}
.about-card{
  background:var(--white);border:1px solid #E0E0E0;border-radius:var(--radius-card);
  padding:40px 36px 44px;display:flex;flex-direction:column;gap:14px;
  transition:var(--transition);
}
.about-card:hover{border-color:#D5D5D5;box-shadow:var(--shadow);}
.about-card-label{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#B88A3B;
}
.about-card h3{
  margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;
  color:var(--text);line-height:1.25;
}
.about-card p{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted);text-wrap:pretty;}

/* ── HOW IT WORKS ── */
.how{background:#F6F7F9;padding:92px 48px 104px;font-family:'Poppins',sans-serif;}
[dir="rtl"] .how{font-family:'Cairo','Poppins',sans-serif;}
.how .section-inner{max-width:1240px;display:flex;flex-direction:column;gap:68px;}

.how-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;margin-bottom:0;}
.how-head .section-eyebrow{
  padding:9px 22px;border:none;background:#E4EAF1;color:#061A2E;
  font-weight:600;letter-spacing:0;margin-bottom:0;
}
.how-head .section-title{
  max-width:900px;margin:0 auto;line-height:1.12;font-weight:800;
  letter-spacing:-.02em;color:#061A2E;text-wrap:pretty;
}
.how-head .section-title .text-blue{color:#061A2E;}

.how-steps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;
  position:relative;
}
/* All five steps in one row, or stacked top-to-bottom — never a 3-up or 2-up
   grid, which breaks the left-to-right reading of the process. */
@media(max-width:1100px){.how-steps{grid-template-columns:1fr;}}

/* Animated arrow between each pair of steps. Drawn as pseudo-elements on each
   step (except the last) rather than one spanning line, so they position
   themselves per grid column instead of relying on hardcoded percentages.
   ::after is the dashed shaft, ::before the arrowhead. */
.how-step:not(:last-child)::after,
.how-step:not(:last-child)::before{
  content:'';
  position:absolute;
  z-index:0;
  opacity:0;
  transition:opacity 0.5s ease 0.45s;
}

/* Shaft: starts clear of this icon's ring, stops clear of the next one. */
.how-step:not(:last-child)::after{
  top:31px;
  left:calc(50% + 46px);
  right:calc(-50% + 22px);
  height:2px;
  background:repeating-linear-gradient(90deg,#C7CFD9 0 6px,rgba(0,0,0,0) 6px 14px);
}

/* Arrowhead, sitting at the end of the shaft. */
.how-step:not(:last-child)::before{
  top:27px;
  right:calc(-50% + 14px);
  width:0;
  height:0;
  border-left:7px solid #C7CFD9;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

.how.visible .how-step:not(:last-child)::after{
  opacity:1;
  animation:howDashFlow 0.9s linear infinite;
}
.how.visible .how-step:not(:last-child)::before{
  opacity:1;
  animation:howArrowNudge 1.8s ease-in-out infinite;
}

/* Dash period is 14px, so travelling exactly 14px loops seamlessly. */
@keyframes howDashFlow{
  to{background-position:14px 0;}
}
@keyframes howArrowNudge{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(5px);}
}

/* RTL: mirror the shaft and point the head the other way. */
[dir="rtl"] .how-step:not(:last-child)::after{
  left:calc(-50% + 22px);
  right:calc(50% + 46px);
}
[dir="rtl"] .how-step:not(:last-child)::before{
  right:auto;
  left:calc(-50% + 14px);
  border-left:none;
  border-right:7px solid #C7CFD9;
}
[dir="rtl"] .how.visible .how-step:not(:last-child)::after{
  animation-name:howDashFlowRtl;
}
[dir="rtl"] .how.visible .how-step:not(:last-child)::before{
  animation-name:howArrowNudgeRtl;
}
@keyframes howDashFlowRtl{
  to{background-position:-14px 0;}
}
@keyframes howArrowNudgeRtl{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-5px);}
}

/* Below 1100px the grid wraps to 3 then 2 then 1 column, so a horizontal
   arrow would point at nothing. */
@media(max-width:1100px){
  .how-step::after,
  .how-step::before{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .how.visible .how-step:not(:last-child)::after,
  .how.visible .how-step:not(:last-child)::before{animation:none;}
}

.how-step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:22px;position:relative;z-index:1;
  opacity:0;transform:translateY(20px);
}
.how.visible .how-step{
  transform:translateY(0);
  animation:cardFadeIn 0.6s ease forwards;
}
.how-steps .how-step:nth-child(2){animation-delay:0.1s;}
.how-steps .how-step:nth-child(3){animation-delay:0.2s;}
.how-steps .how-step:nth-child(4){animation-delay:0.3s;}
.how-steps .how-step:nth-child(5){animation-delay:0.4s;}

.step-icon{
  width:64px;height:64px;border-radius:999px;background:#061A2E;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;
  border:3px solid #fff;
  box-shadow:0 0 0 9px #F6F7F9;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.how-step:hover .step-icon{transform:translateY(-4px) scale(1.06);}
.step-icon-gold{
  background:linear-gradient(145deg,#E2C285 0%,#C9A45C 55%,#AD8944 100%);
  color:#061A2E;
  box-shadow:0 0 0 9px #F6F7F9,0 10px 26px rgba(201,164,92,0.45);
}

.how-step h4{font-size:16px;font-weight:600;letter-spacing:-.01em;color:#061A2E;margin:0;max-width:250px;}
.how-step p{font-size:13px;line-height:1.6;color:#7A828F;margin:0;max-width:250px;text-wrap:pretty;}

/* ── TESTIMONIALS ── */
.testimonials{background:var(--bg);padding:100px 40px;overflow:hidden;}
.testi-head{text-align:center;margin-bottom:56px;}
.testi-head .section-title{max-width:600px;margin:0 auto;}

/* Featured Testimonial Card */
.testi-featured-card{
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 50%, var(--blue-light) 100%);
  border-radius:24px;
  padding:56px 48px;
  margin-bottom:48px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,31,63,0.25);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  animation:fadeUp 0.8s ease both;
}

.testi-featured-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(28,80,117,0.15) 0%, transparent 50%);
  pointer-events:none;
}

.testi-featured-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(0,31,63,0.35);
}

.testi-featured-content{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
}

.testi-featured-card .testi-stars{
  display:flex;
  gap:4px;
  margin-bottom:24px;
  justify-content:center;
}

.testi-featured-card .testi-stars span{
  color:#FFD700;
  font-size:20px;
}

.testi-featured-quote{
  font-size:20px;
  line-height:1.75;
  color:rgba(255,255,255,0.95);
  margin-bottom:32px;
  text-align:center;
  font-weight:400;
}

.testi-featured-author{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.testi-featured-av{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:18px;
  color:white;
  flex-shrink:0;
  border:2px solid rgba(255,255,255,0.2);
}

.testi-featured-info{
  text-align:left;
}

.testi-featured-name{
  font-weight:700;
  font-size:17px;
  color:white;
  margin-bottom:4px;
}

.testi-featured-role{
  font-size:14px;
  color:rgba(255,255,255,0.7);
}

/* Scrolling Testimonials Marquee */
.testi-marquee-wrapper{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:20px 0;
}

.testi-marquee-track{
  display:flex;
  width:100%;
}

.testi-marquee-content{
  display:flex;
  gap:24px;
  animation:marqueeScroll 40s linear infinite;
  will-change:transform;
}

.testi-marquee-wrapper:hover .testi-marquee-content{
  animation-play-state:paused;
}

@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.testi-scroll-card{
  background:var(--white);
  border-radius:20px;
  padding:28px 24px;
  min-width:340px;
  max-width:340px;
  flex-shrink:0;
  border:1px solid #EBEBEB;
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex;
  flex-direction:column;
}

.testi-scroll-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  border-color:#D0D0D0;
}

.testi-card-tall{
  min-width:360px;
  max-width:360px;
}

.testi-scroll-card .testi-stars{
  display:flex;
  gap:3px;
  margin-bottom:16px;
}

.testi-scroll-card .testi-stars span{
  color:#F0A000;
  font-size:15px;
}

.testi-scroll-quote{
  font-size:15px;
  line-height:1.65;
  color:#333;
  margin-bottom:20px;
  flex-grow:1;
}

.testi-scroll-author{
  display:flex;
  align-items:center;
  gap:12px;
}

.testi-scroll-av{
  width:44px;
  height:44px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:15px;
  color:white;
}

.testi-scroll-name{
  font-weight:600;
  font-size:14px;
  color:var(--text);
  margin-bottom:2px;
}

.testi-scroll-role{
  font-size:13px;
  color:var(--muted);
}

/* Slider */
.testi-slider{position:relative;}
.testi-slide{display:none;animation:testi-fade-in 0.6s ease both;}
.testi-slide-active{display:block;}
@keyframes testi-fade-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.testi-dots{display:flex;justify-content:center;gap:10px;margin-top:24px;}
.testi-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(0,31,63,0.2);cursor:pointer;padding:0;transition:background 0.3s,transform 0.3s;}
.testi-dot-active{background:var(--blue);transform:scale(1.3);}

/* Responsive Adjustments */
@media(max-width:768px){
  .testi-featured-card{
    padding:40px 28px;
  }
  
  .testi-featured-quote{
    font-size:17px;
  }
  
  .testi-featured-author{
    flex-direction:column;
    text-align:center;
  }
  
  .testi-featured-info{
    text-align:center;
  }
  
  .testi-scroll-card,
  .testi-card-tall{
    min-width:280px;
    max-width:280px;
  }
  
  .testi-marquee-content{
    animation-duration:30s;
  }
}

@media(max-width:480px){
  .testi-featured-card{
    padding:32px 20px;
  }
  
  .testi-featured-quote{
    font-size:16px;
  }
  
  .testi-scroll-card,
  .testi-card-tall{
    min-width:260px;
    max-width:260px;
    padding:24px 20px;
  }
}

/* ── FAQ ── */
.faq{background:var(--bg);padding:100px 40px;}
.faq-inner{max-width:760px;margin:0 auto;}
.faq-head{text-align:center;margin-bottom:52px;}
.faq-head .section-title{margin:14px 0 12px;}
.faq-head p{font-size:16px;color:var(--muted);}
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid #EBEBEB;overflow:hidden;
  transition:var(--transition);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;background:none;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  text-align:left;color:var(--text);gap:16px;transition:var(--transition);
}
.faq-q:hover{background:#FAFAFA;}
.faq-icon{
  width:28px;height:28px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;color:var(--navy-ink);transition:var(--transition);
}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease;
  padding:0 24px;
}
.faq-a p{font-size:14px;color:var(--muted);line-height:1.7;padding-bottom:20px;}
.faq-item.open .faq-a{max-height:300px;padding-top:0;}
.faq-item.open .faq-icon{background:var(--blue);color:white;transform:rotate(45deg);}

/* ── CTA BANNER ── */
.cta-banner{background:var(--bg);padding:100px 40px;}
.cta-banner-card{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  padding:80px 40px;text-align:center;
}
.cta-banner-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 62% 42%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 78%, rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 88% 25%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(ellipse 60% 60% at 20% 50%,rgba(255,255,255,0.07) 0%,transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%,rgba(255,255,255,0.06) 0%,transparent 70%);
}
.cta-banner-inner{position:relative;max-width:700px;margin:0 auto;}
.cta-banner h2{
  font-size:clamp(30px,4.5vw,48px);font-weight:900;color:white;line-height:1.15;
  letter-spacing:-0.02em;margin-bottom:32px;
  opacity:0;
}
.cta-banner.visible h2{animation:fadeUp 0.6s 0.05s ease both;}
.cta-highlight{
  background:linear-gradient(90deg, #AA8445 0%, #EFDA97 50%, #AA8348 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:900;
}
.cta-banner-btns{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;
}
.cta-banner.visible .cta-banner-btns{animation:fadeUp 0.6s 0.25s ease both;}

.btn-solid-white{
  background:white;color:var(--blue-dark);
  border:none;border-radius:var(--radius-pill);
  padding:14px 28px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:9px;
}
.btn-solid-white i{font-size:13px;}
.btn-solid-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}

/* ── LEGAL PAGES (Privacy Policy / Terms of Service) ── */
.legal-hero{
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  padding:150px 24px 70px;text-align:center;
}
.legal-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;color:white;letter-spacing:-0.02em;margin-bottom:14px;}
.legal-hero p{color:rgba(255,255,255,0.7);font-size:15px;}
.legal-page{background:var(--bg);padding:64px 24px 100px;}
.legal-inner{max-width:820px;margin:0 auto;background:var(--white);border-radius:var(--radius-card,20px);box-shadow:var(--shadow);padding:56px;}
@media(max-width:640px){.legal-inner{padding:32px 22px;}}
.legal-inner h2{font-size:22px;font-weight:800;color:var(--blue-dark);margin:36px 0 14px;letter-spacing:-0.01em;}
.legal-inner h2:first-child{margin-top:0;}
.legal-inner p{font-size:15px;line-height:1.75;color:var(--text);margin-bottom:14px;}
.legal-inner ul{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:8px;}
[dir="rtl"] .legal-inner ul{padding-left:0;padding-right:22px;}
.legal-inner ul li{font-size:15px;line-height:1.7;color:var(--text);}
.legal-inner ul li strong{color:var(--blue-dark);}
.legal-inner a{color:var(--blue-dark);}

/* Bilingual legal content — the page renders both language blocks server-side;
   the nav language toggle just flips <html lang>, and this shows/hides the
   matching block, keeping legal pages in sync with the rest of the site's
   instant (no-reload) language switch. */
html[lang="en"] .legal-ar{display:none;}
html[lang="ar"] .legal-en{display:none;}

/* ── FOOTER ── */
footer{background:var(--bg);color:var(--text);padding:80px 40px 40px;border-top:1px solid #e5e7eb;}
.footer-inner{max-width:1160px;margin:0 auto;}
.footer-top{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:56px;border-bottom:1px solid #e5e7eb;
  margin-bottom:40px;
}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.footer-top{grid-template-columns:1fr;}}
.footer-brand{}
.footer-logo{
  display:flex;
  align-items:center;
  margin-bottom:20px;
}
.footer-logo-img{
  height:36px;
  width:auto;
}
.footer-desc{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:28px;max-width:280px;}
.footer-socials{display:flex;gap:10px;}
.footer-social{
  width:38px;height:38px;border-radius:10px;
  border:1px solid #e5e7eb;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:var(--transition);cursor:pointer;text-decoration:none;
  color:var(--muted);
}
.footer-social:hover{background:var(--blue);border-color:var(--navy-ink);color:white;}
.footer-col h4{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:20px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.footer-col ul li a{font-size:14px;color:var(--muted);text-decoration:none;transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--navy-ink);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px;
}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{color:var(--muted);text-decoration:none;transition:color var(--transition);}
.footer-bottom-links a:hover{color:var(--navy-ink);}
.footer-bottom-links .footer-legal-pending{color:var(--muted);cursor:default;}

/* ── CONTACT FORM MODAL ── */
.contact-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  visibility:hidden;
  opacity:0;
  transition:visibility 0.3s, opacity 0.3s;
}

.contact-modal.active{
  visibility:visible;
  opacity:1;
}

.contact-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.contact-modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.96);
  width:min(480px, 92vw);
  max-height:90vh;
  overflow-y:auto;
  scrollbar-width:none;
  border-radius:14px;
  background:var(--white);
  box-shadow:0 20px 56px rgba(0,0,0,0.2);
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.contact-modal-content::-webkit-scrollbar{display:none;width:0;height:0;}

.contact-modal.active .contact-modal-content{
  transform:translate(-50%, -50%) scale(1);
}

.contact-modal-body{
  padding:36px 36px 32px;
  position:relative;
}

.contact-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--bg);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);
  color:var(--muted);
  font-size:14px;
  z-index:2;
}

.contact-modal-close:hover{
  background:var(--blue);
  color:white;
}

.contact-modal-header{
  text-align:left;
  margin-bottom:26px;
  padding-right:32px;
}

.contact-modal-header h3{
  font-size:26px;
  font-weight:700;
  margin-bottom:8px;
  line-height:1.2;
  color:var(--text);
}

.contact-modal-header p{
  font-size:15px;
  color:var(--muted);
  line-height:1.5;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.form-group label{
  font-weight:600;
  color:var(--muted);
  font-size:13px;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:13px 15px;
  border:1px solid #E0E0E0;
  border-radius:10px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  color:var(--text);
  background:var(--white);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:hover,
.form-group textarea:hover{
  border-color:var(--muted-light);
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-pale);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--muted-light);
}

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

.contact-submit-btn{
  width:100%;
  padding:14px 28px;
  background:var(--blue);
  color:white;
  border:none;
  border-radius:10px;
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:4px;
}

.contact-submit-btn:hover{
  background:var(--blue-dark);
}

.contact-submit-btn:active{
  transform:scale(0.98);
}

.contact-submit-btn i{
  font-size:12px;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.reveal{transform:translateY(30px);transition:transform 0.65s ease;}
.reveal.visible{transform:translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:680px){
  .nav-links{display:none;}
  /* .why-head sets align-items:flex-end to sit the (desktop) right-hand column
     on the baseline of the title. Switching to a column here flips that onto
     the horizontal axis, which shunted the whole heading to the right edge —
     so the cross-axis alignment has to be reset along with the direction. */
  .why-head{flex-direction:column;align-items:flex-start;}
  .services-head{flex-direction:column;}
  .results-grid{gap:40px;}
  .stat-num{font-size:32px;}
}

/* Section vertical rhythm — desktop sections use ~100px top/bottom padding,
   which stacks into ~200px of dead space between two sections on mobile.
   Tighten it up so consecutive sections don't feel disconnected. */
@media(max-width:900px){
  .why{padding:48px 24px 56px;}
  /* Inline padding only on the section for the older layouts; .about delegates
     its side gutter to .about-inner, so adding it here too double-pads it. */
  .about{padding:56px 0;}
  .how{padding:56px 24px;}
  .testimonials{padding:56px 24px;}
  .faq{padding:56px 24px;}
  .cta-banner{padding:56px 24px;}
  footer{padding:56px 24px 32px;}
}




/* ── GET APP MODAL ── */
.app-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  visibility:hidden;
  opacity:0;
  transition:visibility 0.3s, opacity 0.3s;
}

.app-modal.active{
  visibility:visible;
  opacity:1;
}

.app-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.app-modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.9);
  width:min(360px, 90vw);
  background:var(--white);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.25);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.app-modal.active .app-modal-content{
  transform:translate(-50%, -50%) scale(1);
}

.app-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);
  color:white;
  font-size:13px;
  z-index:2;
}

.app-modal-close:hover{
  background:rgba(255,255,255,0.28);
  border-color:rgba(255,255,255,0.5);
  transform:rotate(90deg);
}

.app-modal-header{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy-darker) 20%,var(--blue-light) 50%,var(--navy-darker) 80%,var(--blue) 100%);
  padding:40px 24px 32px;
}
.app-modal-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 25%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 48% 15%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 68% 45%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1.5px 1.5px at 82% 75%, rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 90% 22%, rgba(255,255,255,0.4) 50%, transparent);
}

.app-modal-icon{
  position:relative;z-index:1;
  width:56px;
  height:56px;
  margin:0 auto 18px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:white;
}

.app-modal-header h3{
  position:relative;z-index:1;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  color:white;
}

.app-modal-body{
  padding:28px 24px 24px;
  text-align:center;
}

.app-download-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}

.app-store-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--bg);
  border:1.5px solid #E0E0E0;
  border-radius:12px;
  text-decoration:none;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
}

.app-store-btn:hover{
  background:var(--white);
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,31,63,0.15);
}

.app-store-btn:active{
  transform:translateY(0) scale(0.98);
  box-shadow:0 2px 8px rgba(0,31,63,0.15);
}

.app-store-btn svg{
  width:26px;
  height:26px;
  color:var(--text);
  flex-shrink:0;
}

.app-store-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
  flex:1;
}

.app-store-arrow{
  font-size:13px;
  color:var(--muted-light);
  transition:var(--transition);
  flex-shrink:0;
}

.app-store-btn:hover .app-store-arrow{
  color:var(--blue);
  transform:translateX(4px);
}

.app-store-label{
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.app-store-name{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}

@media(max-width:580px){
  .app-modal-content{
    width:min(320px, 90vw);
  }

  .app-modal-header{
    padding:32px 20px 24px;
  }

  .app-modal-body{
    padding:20px 20px 20px;
  }
}



/* ── RTL Overrides ── */
/* dir="rtl" already reverses the inline axis, so grid columns and flex rows
   mirror by themselves. Only *physical* properties need restating here —
   text-align, and transforms on directional icons. Do not add order,
   flex-direction:row-reverse or align/justify:flex-end to mirror something:
   those reverse an already-reversed axis and put the component back into LTR.
   flex-start/flex-end are logical — under RTL, flex-start IS the right edge. */
[dir="rtl"] .nav-links{
  direction:rtl;
}

/* The hero needs no order/flex-direction overrides for RTL, and must not have
   them: dir="rtl" already reverses the inline axis, so the grid columns and
   every flex row inside them mirror on their own. The rules that used to live
   here (order:2/1 on the content and mockup, row-reverse on .trust-badge and
   .store-btn-glass, justify-content:flex-end on .hero-cta) mirrored a second
   time and cancelled it out — which is what put the Arabic text on the left
   with the phone on the right, the flag on the wrong side of the badge and the
   buttons adrift from the text. flex-start/flex-end are logical, not physical:
   in RTL, flex-start already *is* the right-hand side.
   Only the text-align rules stay, since text-align:left/right are physical. */
[dir="rtl"] .hero-inner{
  text-align:right;
}

[dir="rtl"] .hero h1{
  text-align:right;
}

[dir="rtl"] .store-btn-text{
  text-align:right;
}

[dir="rtl"] .section-eyebrow{
  text-align:right;
}

[dir="rtl"] .why-card-body{
  text-align:right;
}

[dir="rtl"] .why-card-index{
  left:auto;
  right:16px;
}

[dir="rtl"] .why-accordion-body p{
  text-align:right;
  margin-left:auto;
  margin-right:0;
}


/* .how-head / .how-step are centred and symmetric, so they need no RTL
   mirroring. The step arrows do — those rules live with the arrows above. */

[dir="rtl"] .about-header,
[dir="rtl"] .about-lead-title,
[dir="rtl"] .about-lead-body p,
[dir="rtl"] .about-quote blockquote,
[dir="rtl"] .about-card{
  text-align:right;
}
[dir="rtl"] .about-quote blockquote{
  padding-left:0;padding-right:28px;
  border-left:none;border-right:2px solid rgba(255,255,255,.18);
}
[dir="rtl"] .about-quote::after{
  right:auto;left:28px;
}
/* Lead grid keeps the title visually first for an RTL reader (i.e. on the
   right), by swapping which column each element sits in rather than
   reordering the DOM. */

[dir="rtl"] .faq-q{
  text-align:right;
}

[dir="rtl"] .testi-head{
  text-align:right;
}

[dir="rtl"] .testi-featured-content{
  text-align:right;
}

[dir="rtl"] .testi-marquee-content{
  direction:ltr;
}

[dir="rtl"] .testi-scroll-card{
  text-align:right;
  direction:rtl;
}

[dir="rtl"] .cta-banner-inner{
  text-align:right;
}

[dir="rtl"] .contact-modal-header{
  text-align:right;
}

[dir="rtl"] .form-group label{
  text-align:right;
}

[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea{
  text-align:right;
  direction:rtl;
}

[dir="rtl"] .app-modal-body{
  text-align:right;
}

[dir="rtl"] .app-store-btn{
  text-align:right;
}

[dir="rtl"] .app-store-text{
  text-align:right;
}

[dir="rtl"] .app-store-arrow{
  transform:scaleX(-1);
}

[dir="rtl"] .app-store-btn:hover .app-store-arrow{
  transform:scaleX(-1) translateX(4px);
}

[dir="rtl"] .footer-brand{
  text-align:right;
}

[dir="rtl"] .footer-socials{
  justify-content:flex-start;
}

[dir="rtl"] .footer-col{
  text-align:right;
}

[dir="rtl"] .nav-mobile-content{
  right:auto;
  left:0;
  box-shadow:4px 0 24px rgba(0,0,0,0.15);
  transform:translateX(-100%);
}

[dir="rtl"] .nav-mobile-menu.active .nav-mobile-content{
  transform:translateX(0);
}

[dir="rtl"] .nav-mobile-links{
  text-align:right;
}

[dir="rtl"] .nav-mobile-link{
  text-align:right;
}

[dir="rtl"] .nav-mobile-footer{
  text-align:right;
}