/* ============================================
   RTL overrides — Arabic pages only
   Loaded after style.css
   ============================================ */

body{
  font-family:'Tajawal','Inter',system-ui,sans-serif;
}
h1,h2,h3,h4{
  font-family:'Cairo','Tajawal',system-ui,sans-serif;
  letter-spacing:0;
}
.stat-headline b,
.stat-grid div b,
.stat-item b,
.case-result-row div b,
.process-num,
.modal-body h4{
  font-family:'Cairo','Tajawal',sans-serif;
}

/* Forward-pointing arrows (→) should point the other way (←) in RTL */
.btn svg,
.learn-more svg{
  transform:scaleX(-1);
}
.service-card:hover .learn-more svg,
.case-card:hover .learn-more svg{
  transform:scaleX(-1) translateX(3px);
}
.back-link svg{
  transform:scaleX(-1);
}

/* Testimonial prev/next chevrons — JS flips which physical direction each
   button scrolls in RTL, so flip the icon glyphs to match */
.testi-controls svg{
  transform:scaleX(-1);
}

/* Avatar overlap stack direction */
.hero-proof .avatars img{
  margin-left:0;
  margin-right:-10px;
}
.hero-proof .avatars img:first-child{
  margin-right:0;
}

/* Modal close button to the "end" edge (left, in RTL) */
.modal-close{
  right:auto;
  left:18px;
}

/* Bulleted list indent */
.modal-body li{
  padding-left:0;
  padding-right:20px;
}
.modal-body li::before{
  left:auto;
  right:0;
}

/* About section: photo/copy order handled via HTML source order on the
   Arabic page, so neutralize the LTR-specific placement hacks */
.about-photo{
  order:initial;
  justify-self:initial;
}
.about-copy{
  order:initial;
}
.about-photo::before{
  inset:22px -22px -22px 22px;
}

/* Growth chart reads start (right) → end (left) in RTL */
.stat-chart svg{
  transform:scaleX(-1);
}

/* Logo marquee: in RTL, a shrink-to-fit block (width:max-content) anchors
   to the right edge instead of the left, so the LTR loop (translateX to
   -50%) would slide the whole track off-screen into blank space instead of
   looping. Looping back the other way (+50%) keeps it seamless. */
.logo-track{
  animation-name:scrollLogosRTL;
}
@keyframes scrollLogosRTL{
  from{transform:translateX(0);}
  to{transform:translateX(50%);}
}

/* Nav logo text block stays right-aligned under RTL flow */
.nav-logo-text,
.footer-brand{
  text-align:right;
}