/**
 * EchoVision — RTL Stylesheet for Arabic Localization
 * Applies natural right-to-left alignment, mirrors directional arrows,
 * unifies Cairo typography (400, 500, 600, 700), and adjusts margins, padding & layout.
 */

/* -------------------------------------------------------------------------
   01. TYPOGRAPHY & GLOBAL DIRECTION
   ------------------------------------------------------------------------- */
:root:has([dir="rtl"]),
html[dir="rtl"],
html[lang="ar"],
body[dir="rtl"],
body.is-rtl {
  --font-arabic: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-main: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-tech: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[dir="rtl"],
body[dir="rtl"],
html[lang="ar"],
body.is-rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  letter-spacing: normal !important;
}

/* Ensure all interactive and textual elements inherit Cairo */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] optgroup,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] p,
html[dir="rtl"] label,
html[dir="rtl"] li,
html[dir="rtl"] blockquote {
  font-family: 'Cairo', sans-serif;
  letter-spacing: normal;
}

/* 700 for Main Headings */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .scene-title,
html[dir="rtl"] .section-main-title,
html[dir="rtl"] .quote-title,
html[dir="rtl"] .panel-heading,
html[dir="rtl"] .article-title,
html[dir="rtl"] .casestudy-headline,
html[dir="rtl"] .manifesto-title,
html[dir="rtl"] .scene-02-title,
html[dir="rtl"] .why-echo-title,
html[dir="rtl"] .portfolio-hero-title,
html[dir="rtl"] .cta-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700;
  letter-spacing: normal !important;
  line-height: 1.35;
  text-align: right;
}

/* 600 for Subheadings & Interactive Elements */
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .card-title,
html[dir="rtl"] .service-card-title,
html[dir="rtl"] .case-title,
html[dir="rtl"] .flanking-title,
html[dir="rtl"] .blog-card-title,
html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .modal-heading,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .btn,
html[dir="rtl"] .btn-cta-blue,
html[dir="rtl"] .card-cta-btn,
html[dir="rtl"] .stat-label,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .brand-badge {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600;
  letter-spacing: normal !important;
}

/* 500 for Medium Text, Meta, Subtitles */
html[dir="rtl"] .hero-subtext,
html[dir="rtl"] .section-subtitle,
html[dir="rtl"] .cta-subtext,
html[dir="rtl"] .portfolio-hero-subtext,
html[dir="rtl"] .blog-card-meta,
html[dir="rtl"] .testimonial-card-author-role,
html[dir="rtl"] .footer-nav-link,
html[dir="rtl"] .footer-legal-link,
html[dir="rtl"] .choice-pill span,
html[dir="rtl"] .editorial-breadcrumb a,
html[dir="rtl"] .editorial-breadcrumb span,
html[dir="rtl"] .lang-dropdown-trigger,
html[dir="rtl"] .lang-dropdown-item {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 500;
}

/* 400 for Regular Body Text, Descriptions */
html[dir="rtl"] p,
html[dir="rtl"] .card-desc,
html[dir="rtl"] .service-card-desc,
html[dir="rtl"] .case-desc,
html[dir="rtl"] .manifesto-text,
html[dir="rtl"] .scene-02-lead-1,
html[dir="rtl"] .scene-02-lead-2,
html[dir="rtl"] .article-body-content,
html[dir="rtl"] .testimonial-quote-text,
html[dir="rtl"] .footer-newsletter-desc,
html[dir="rtl"] .footer-newsletter-privacy {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 400;
}

html[dir="rtl"] .hero-tagline,
html[dir="rtl"] .vertical-echo-tagline,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .brand-badge {
  letter-spacing: normal !important;
}

/* -------------------------------------------------------------------------
   02. HEADER & NAVIGATION
   ------------------------------------------------------------------------- */
html[dir="rtl"] .header-nav {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .pill-dot {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

html[dir="rtl"] .nav-link {
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}

html[dir="rtl"] .lang-dropdown-trigger {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

html[dir="rtl"] .lang-dropdown-menu {
  left: 0;
  right: auto;
}

html[dir="rtl"] .lang-dropdown-item {
  font-family: 'Cairo', sans-serif;
}

/* Mobile drawer slides in from the right */
html[dir="rtl"] .mobile-nav-drawer {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%);
  text-align: right;
}

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

html[dir="rtl"] .mobile-drawer-close {
  left: 24px;
  right: auto;
}

/* -------------------------------------------------------------------------
   03. DIRECTIONAL ARROWS & BUTTONS (FLIP FORWARD/BACKWARD)
   ------------------------------------------------------------------------- */
html[dir="rtl"] .btn-arrow,
html[dir="rtl"] .btn-arrow-circle svg,
html[dir="rtl"] .arrow-circle svg,
html[dir="rtl"] .label-arrow-icon svg,
html[dir="rtl"] .btn-become-client svg,
html[dir="rtl"] .btn-send-message svg,
html[dir="rtl"] .btn-cta-blue .btn-arrow-circle svg,
html[dir="rtl"] .blog-read-link svg,
html[dir="rtl"] .magnet-btn svg:not(.brand-mini-svg):not(.step-check-icon) {
  transform: scaleX(-1);
}

/* Navigation carousel arrows */
html[dir="rtl"] #featured-prev-btn svg,
html[dir="rtl"] #t-prev svg,
html[dir="rtl"] #w-prev svg {
  transform: scaleX(-1);
}

html[dir="rtl"] #featured-next-btn svg,
html[dir="rtl"] #t-next svg,
html[dir="rtl"] #w-next svg {
  transform: scaleX(-1);
}

/* In Step Back buttons: reverse rotation */
html[dir="rtl"] .prev-step-btn svg.btn-arrow {
  transform: scaleX(1) !important;
}

html[dir="rtl"] .next-step-btn svg.btn-arrow {
  transform: scaleX(-1) !important;
}

/* -------------------------------------------------------------------------
   04. HOMEPAGE HERO SECTION & ASIDE INDICATORS (RTL)
   ------------------------------------------------------------------------- */
/* Social media icon rail moved to far RIGHT edge */
html[dir="rtl"] .social-rail {
  right: 2rem;
  left: auto;
}

html[dir="rtl"] .social-rail-title {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 1px;
}

/* Hero container padding gives breathing room to right-side social rail */
@media (min-width: 993px) {
  html[dir="rtl"] .hero-container {
    padding: 0 5rem 0 2rem;
  }
}

/* Hero typography and content alignment */
html[dir="rtl"] .hero-content {
  text-align: right;
}

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

html[dir="rtl"] .hero-title .line-1 {
  margin-right: 0;
  margin-left: 0.35em;
}

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

html[dir="rtl"] .hero-ctas {
  justify-content: flex-start;
}

/* Play triangle retains forward orientation */
html[dir="rtl"] .play-icon-circle svg {
  transform: none !important;
}

/* Vertical slide-number navigation rail (01–05) moved to outer LEFT side */
html[dir="rtl"] .hero-step-rail {
  left: 1.5rem;
  right: auto;
}

/* Rotating badge mirrored to left side */
html[dir="rtl"] #hero-rotating-badge,
html[dir="rtl"] .hero-badge-circle {
  left: 6%;
  right: auto;
}

html[dir="rtl"] .scene-chapter-rail {
  left: 36px !important;
  right: auto !important;
}

html[dir="rtl"] .vertical-echo-tagline {
  left: 0;
  right: auto;
}

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


html[dir="rtl"] .scene-02-content-wrap,
html[dir="rtl"] .scene-03-content-wrap,
html[dir="rtl"] .scene-05-content-wrap
html[dir="rtl"] .principle-item
 {
 
  text-align: right !important;
}

@media (max-width: 768px) {
 html[dir="rtl"]   .drives-header ,
 html[dir="rtl"] .principle-item
 {
  text-align: right !important;

    }
  }
/* -------------------------------------------------------------------------
   04b. EDITORIAL MANIFESTO & FLOATING STATS SECTION (RTL)
   ------------------------------------------------------------------------- */
/* Full-width container in RTL */
html[dir="rtl"] .manifesto-stats-fullwidth-grid {
  grid-template-columns: 58vw 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 1440px) {
  html[dir="rtl"] .manifesto-stats-fullwidth-grid {
    grid-template-columns: 60vw 1fr;
    gap: 3rem;
  }
}

@media (max-width: 1200px) {
  html[dir="rtl"] .manifesto-stats-fullwidth-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Blue Angled Polygon Panel mirrored for RTL:
   - Level top edge (y=0%) for full headroom on title and eyebrow
   - Flush right edge against viewport
   - Dynamic angled left edge (0% 100% to 8% 0%) slanting towards stats */
html[dir="rtl"] .manifesto-polygon-panel {
  background: linear-gradient(225deg, #0B528D 0%, #1369AB 65%, #1E7CC4 100%);
  padding: 4.5rem 5vw 4rem 4.5rem;
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: 25px;
}

@media (max-width: 1200px) {
  html[dir="rtl"] .manifesto-polygon-panel {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding: 3rem 2rem;
    margin-top: 15px;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .manifesto-polygon-panel {
    padding: 2.5rem 1.5rem;
    margin-top: 10px;
  }

   html[dir="rtl"]  .hero-bg-video {
    object-position: 20% 50%;
  } 

 html[dir="rtl"] .scene-05-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center left;
  display: block;
  filter: brightness(0.95) contrast(1.08);
  transform: scale(1.02);
}


}

/* Internal content grid: generous title column on the right, divider, description on the left */
html[dir="rtl"] .manifesto-content-grid {
  grid-template-columns: 1.15fr auto 0.85fr;
  gap: 2.2rem;
  align-items: center;
}

@media (max-width: 992px) {
  html[dir="rtl"] .manifesto-content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Title Column */
html[dir="rtl"] .manifesto-title-col {
  text-align: right;
}

html[dir="rtl"] .manifesto-title-col .eyebrow-light {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
  text-align: right;
  display: block;
}

html[dir="rtl"] .manifesto-title {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.85rem, 2.6vw, 2.65rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: right;
}

html[dir="rtl"] .title-underline-svg {
  right: 0;
  left: auto;
  transform: scaleX(-1);
}

/* Vertical divider */
html[dir="rtl"] .manifesto-vertical-divider {
  width: 1px;
  height: 130px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 0.5rem;
}

@media (max-width: 992px) {
  html[dir="rtl"] .manifesto-vertical-divider {
    display: none;
  }
}

/* Description Column */
html[dir="rtl"] .manifesto-desc-col {
  text-align: right;
  display: block;
}

html[dir="rtl"] .manifesto-text {
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  margin-bottom: 1.25rem;
}

html[dir="rtl"] .manifesto-divider-line {
  width: 35px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 0 1.3rem auto;
}

html[dir="rtl"] .btn-more-about {
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

html[dir="rtl"] .btn-more-about:hover .arrow-circle {
  transform: translateX(-4px);
}

/* Statistics Block floating on the left in RTL */
html[dir="rtl"] .stats-floating-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
  align-items: center;
  padding-left: 4.5vw;
  padding-right: 0;
  margin-top: 100px;
}

@media (max-width: 1440px) {
  html[dir="rtl"] .stats-floating-rail {
    padding-left: 3vw;
    gap: 1.4rem;
  }
}

@media (max-width: 992px) {
  html[dir="rtl"] .stats-floating-rail {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1.5rem;
    gap: 2rem 1.5rem;
  }
}

/* Homepage Stat Column in RTL */
html[dir="rtl"] .stats-floating-rail .stat-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  padding-left: 1.2rem;
  padding-right: 0;
}

/* Separator line between stat columns: position on LEFT edge in RTL */
html[dir="rtl"] .stats-floating-rail .stat-col:not(:last-child)::after {
  left: 0;
  right: auto;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 992px) {
  html[dir="rtl"] .stats-floating-rail .stat-col {
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
}

html[dir="rtl"] .stats-floating-rail .stat-icon-wrap {
  justify-content: flex-start;
}

@media (max-width: 992px) {
  html[dir="rtl"] .stats-floating-rail .stat-icon-wrap {
    justify-content: center;
  }
}

/* Number + Plus symbol: keep in LTR inline flow so + is immediately adjacent to the digits */
html[dir="rtl"] .stat-number-wrap {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .stat-number {
  font-family: var(--font-heading);
  line-height: 1;
}

html[dir="rtl"] .stat-plus {
  margin-left: 3px;
  line-height: 1;
}

html[dir="rtl"] .stat-label {
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  text-transform: none;
  text-align: right;
}

@media (max-width: 992px) {
  html[dir="rtl"] .stat-label {
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
   04c. SERVICES WAVE & STAIRCASE NODES (RTL)
   ------------------------------------------------------------------------- */
/* 1. Connecting wave matches the reversed vertical stagger (Low on left at 06, High on right at 01) */
html[dir="rtl"] .services-svg-wave {
  transform: none;
}

/* Reversed vertical stagger for Arabic RTL:
   Cards previously positioned HIGH (06, 05, 04) move DOWN.
   Cards previously positioned LOW (01, 02, 03) move UP.
   01 (far right) is HIGH (-30px), descending to 06 (far left) which is LOW (40px). */
html[dir="rtl"] .node-pos-1 {
  transform: translateY(-30px) rotate(0deg);
}

html[dir="rtl"] .node-pos-2 {
  transform: translateY(-16px) rotate(0deg);
}

html[dir="rtl"] .node-pos-3 {
  transform: translateY(-2px) rotate(0deg);
}

html[dir="rtl"] .node-pos-4 {
  transform: translateY(12px) rotate(0deg);
}

html[dir="rtl"] .node-pos-5 {
  transform: translateY(26px) rotate(0deg);
}

html[dir="rtl"] .node-pos-6 {
  transform: translateY(40px) rotate(0deg);
}

/* 2. Services header layout in Arabic */
html[dir="rtl"] .services-header-flex {
  flex-direction: row;
  justify-content: space-between;
}

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

html[dir="rtl"] .services-view-all-btn {
  flex-direction: row;
  letter-spacing: 0;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}

html[dir="rtl"] .services-view-all-btn .view-all-circle svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .services-view-all-btn:hover .view-all-circle {
  transform: translateX(-4px);
}

/* 3. Services Grid Container & Panel Cards */
html[dir="rtl"] .services-nodes-wrapper {
  direction: rtl;
}

html[dir="rtl"] .service-panel-card {
  direction: rtl;
  text-align: right;
  min-height: 270px;
  padding: 2.5rem 1rem 1.35rem 1rem;
}

/* 4. Headings & Descriptions in Arabic */
html[dir="rtl"] .service-card-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0 !important;
  text-transform: none;
  text-align: right;
  margin-bottom: 0.6rem;
}

html[dir="rtl"] .service-card-desc {
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0 !important;
  text-align: right;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.95rem;
}

/* 5. More Info Action Button & Left-Pointing Arrow */
html[dir="rtl"] .service-card-action {
  justify-content: flex-start;
  text-align: right;
  width: 100%;
  margin-top: auto;
}

html[dir="rtl"] .service-more-info-btn {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  flex-direction: row;
  gap: 7px;
}

html[dir="rtl"] .service-more-info-arrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .service-node-item:hover .service-more-info-arrow,
html[dir="rtl"] .service-panel-card:hover .service-more-info-arrow,
html[dir="rtl"] .service-panel-card:focus-visible .service-more-info-arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  html[dir="rtl"] .service-panel-card {
    min-height: 285px;
    padding: 2.4rem 0.85rem 1.25rem 0.85rem;
  }

  html[dir="rtl"] .service-card-title {
    font-size: 0.84rem;
  }

  html[dir="rtl"] .service-card-desc {
    font-size: 0.74rem;
  }
}

@media (max-width: 991px) {
  html[dir="rtl"] .services-header-flex {
    flex-direction: row;
  }

  html[dir="rtl"] .node-pos-1,
  html[dir="rtl"] .node-pos-2,
  html[dir="rtl"] .node-pos-3,
  html[dir="rtl"] .node-pos-4,
  html[dir="rtl"] .node-pos-5,
  html[dir="rtl"] .node-pos-6 {
    transform: translateY(0) rotate(0deg);
  }

  html[dir="rtl"] .service-panel-card {
    min-height: 240px;
    padding: 2.6rem 1.25rem 1.4rem 1.25rem;
  }
}

@media (max-width: 640px) {
  html[dir="rtl"] .services-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  html[dir="rtl"] .node-pos-1,
  html[dir="rtl"] .node-pos-2,
  html[dir="rtl"] .node-pos-3,
  html[dir="rtl"] .node-pos-4,
  html[dir="rtl"] .node-pos-5,
  html[dir="rtl"] .node-pos-6 {
    transform: translateY(0) rotate(0deg);
  }

  html[dir="rtl"] .service-panel-card {
    min-height: auto;
    padding: 2.8rem 1.5rem 1.8rem 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   04d. SERVICES PAGE — ACTIVE PROJECT CARD (WORK-HERO-CARD RTL)
   ------------------------------------------------------------------------- */
/* Active Card Container */
html[dir="rtl"] .work-hero-card {
  direction: rtl;
  text-align: right;
  position: relative;
}

/* 1. Project Visual Image: Positioned on the LEFT side of the card */
html[dir="rtl"] .hero-card-bg-img {
  left: -10px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 58% !important;
  height: 92% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
  display: block !important;
}

/* 2. Dark Gradient Overlay: Dark on the RIGHT under text, fades to transparent on the LEFT over the image */
html[dir="rtl"] .hero-card-gradient-overlay {
  background: linear-gradient(270deg, #020812 0%, rgba(2, 8, 18, 0.95) 46%, rgba(2, 8, 18, 0.35) 75%, transparent 100%) !important;
}

/* 3. Content Layout: Occupies the RIGHT side of the card with balanced flex distribution */
html[dir="rtl"] .hero-card-content {
  position: relative;
  z-index: 3;
  width: 55%;
  height: 100%;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  text-align: right;
  align-items: flex-start;
  margin-right: 0;
  margin-left: auto;
}

/* 4. Upper Area: Category tag & Title */
html[dir="rtl"] .hero-card-header {
  text-align: right;
  width: 100%;
}

html[dir="rtl"] .hero-card-header .case-tag {
  text-align: right;
  display: block;
  margin-bottom: 0.35rem;
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}

html[dir="rtl"] .hero-card-header .case-title {
  text-align: right;
  font-family: 'Cairo', sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
}

/* 5. Middle Area: Project short description */
html[dir="rtl"] .case-desc {
  text-align: right;
  font-family: 'Cairo', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.84);
  width: 100%;
  margin: 0;
}

html[dir="rtl"] .flanking-card-overlay {
  text-align: right;
}

html[dir="rtl"] .flanking-tag {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  text-align: right;
}

html[dir="rtl"] .flanking-title {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

html[dir="rtl"] .flanking-arrow-circle {
  right: auto;
  left: 1rem;
}

html[dir="rtl"] .flanking-arrow-circle svg,
html[dir="rtl"] #work-prev-btn svg,
html[dir="rtl"] #work-next-btn svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .work-counter-txt {
  margin-left: 0;
  margin-right: 0.8rem;
  direction: ltr;
  unicode-bidi: isolate;
}

/* 6. Bottom Area: Details CTA button anchored with forward-pointing arrow */
html[dir="rtl"] .case-card-action {
  justify-content: flex-start;
  width: 100%;
}

html[dir="rtl"] .case-cta-pill-btn {
  font-family: 'Cairo', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  flex-direction: row;
}

html[dir="rtl"] .case-cta-pill-btn svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .case-cta-pill-btn:hover svg {
  transform: scaleX(-1) translateX(4px);
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
  html[dir="rtl"] .hero-card-bg-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    opacity: 0.35 !important;
    border-radius: 18px !important;
  }

  html[dir="rtl"] .hero-card-gradient-overlay {
    background: linear-gradient(180deg, rgba(2, 8, 18, 0.82) 0%, rgba(2, 8, 18, 0.95) 100%) !important;
  }

  html[dir="rtl"] .hero-card-content {
    width: 100% !important;
    padding: 1.6rem 1.4rem !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   04e. WORK PAGE — STATISTICS / RESULTS PANEL (RTL)
   ------------------------------------------------------------------------- */
html[dir="rtl"] .portfolio-stats-section {
  position: relative;
  padding: 5rem 0;
  background-color: #020812;
  overflow: hidden;
}

html[dir="rtl"] .portfolio-stats-section .stats-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  direction: rtl;
}

html[dir="rtl"] .portfolio-stats-section .stat-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  padding: 1.5rem 2.2rem;
  box-sizing: border-box;
  border-right: none !important;
  border-left: 1px solid rgba(71, 196, 242, 0.18) !important;
}

html[dir="rtl"] .portfolio-stats-section .stat-col:last-child {
  border-left: none !important;
  border-right: none !important;
}

/* Circular Icon: centered perfectly inside circular glowing border */
html[dir="rtl"] .portfolio-stats-section .stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem;
  background: rgba(4, 13, 26, 0.85);
  border: 1.5px solid rgba(71, 196, 242, 0.4);
  color: var(--color-spicy);
  box-shadow: 0 0 16px rgba(71, 196, 242, 0.25);
}

html[dir="rtl"] .portfolio-stats-section .stat-icon-wrap svg {
  width: 22px;
  height: 22px;
  margin: 0 !important;
}

/* Numerical Value: LTR isolate so numbers and signs are correctly ordered */
html[dir="rtl"] .portfolio-stats-section .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 900;
  color: var(--color-spicy);
  line-height: 1;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 20px rgba(71, 196, 242, 0.4);
  text-align: right;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
}

/* Stat Label: Cairo typography, clean spacing, right-aligned */
html[dir="rtl"] .portfolio-stats-section .stat-label {
  font-family: 'Cairo', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
  letter-spacing: 0;
  text-align: right;
  margin: 0;
}

/* Tablet: 2 balanced columns with inner vertical separator */
@media (max-width: 768px) {
  html[dir="rtl"] .portfolio-stats-section .stats-panel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem 0;
  }

  html[dir="rtl"] .portfolio-stats-section .stat-col {
    padding: 1.2rem 1.5rem;
    border-right: none !important;
    border-left: none !important;
  }

  /* Right column (items 1 & 3 in RTL 2-col flow) has left border */
  html[dir="rtl"] .portfolio-stats-section .stat-col:nth-child(1),
  html[dir="rtl"] .portfolio-stats-section .stat-col:nth-child(3) {
    border-left: 1px solid rgba(71, 196, 242, 0.15) !important;
  }
}

/* Mobile: Single balanced column with subtle bottom divider */
@media (max-width: 480px) {
  html[dir="rtl"] .portfolio-stats-section .stats-panel-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  html[dir="rtl"] .portfolio-stats-section .stat-col {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(71, 196, 242, 0.12) !important;
    padding: 0.8rem 1rem 1.8rem 1rem;
    align-items: flex-start;
    text-align: right;
  }

  html[dir="rtl"] .portfolio-stats-section .stat-col:last-child {
    border-bottom: none !important;
  }
}

/* -------------------------------------------------------------------------
   04f. ABOUT PAGE — SCENE 02 WHO WE ARE (RTL)
   ------------------------------------------------------------------------- */
html[dir="rtl"] .about-scene.scene-02-who {
  position: relative;
  min-height: 640px;
  height: auto;
  max-height: none;
  display: flex;
  align-items: center;
  padding: 5rem 0 4.5rem 0;
  background-color: #020812;
  overflow: hidden;
}

/* Background Team Workspace Image: Position on LEFT side in RTL */
html[dir="rtl"] .scene-02-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

html[dir="rtl"] .scene-02-image-wrap {
  position: absolute;
  top: 0;
  left: 0 !important;
  right: auto !important;
  width: 52% !important;
  height: 100% !important;
  overflow: hidden;
}

html[dir="rtl"] .scene-02-team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Gradient Overlay: Clear on left over photo, deep dark on right behind Arabic text */
html[dir="rtl"] .scene-02-img-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(2, 8, 18, 0.15) 0%,
    rgba(2, 8, 18, 0.4) 30%,
    rgba(2, 8, 18, 0.94) 72%,
    #020812 100%
  ) !important;
  pointer-events: none;
}

/* Wall Text: Position on LEFT wall over background photo, separate from Arabic text */
html[dir="rtl"] .scene-02-wall-text {
  position: absolute;
  left: 6% !important;
  right: auto !important;
  top: 18%;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  pointer-events: none;
  z-index: 2;
}

/* Container & Content Layout: Positioned on the RIGHT with ample width & breathing room */
html[dir="rtl"] .scene-02-container {
  position: relative;
  z-index: 5;
  width: 100%;
}

/* html[dir="rtl"] .scene-02-layout {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
} */

html[dir="rtl"] .scene-02-content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100% !important;
  max-width: 580px !important;
  position: relative;
  z-index: 5;
  padding-right: 1.5rem;
  box-sizing: border-box;
  text-align: right;
  align-items: flex-start;
}

/* Section Eyebrow Badge */
html[dir="rtl"] .scene-02-content .scene-eyebrow {
  align-self: flex-start;
  margin-bottom: 0.25rem;
  font-family: 'Cairo', sans-serif;
}

html[dir="rtl"]  .why-echo-card-content p{
  text-align: right;



}


html[dir="rtl"] .why-echo-title {
text-align: center;
}

/* Arabic Heading: Spacious line-height preventing glyph collisions */
html[dir="rtl"] .scene-02-title {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(32px, 3.2vw, 44px) !important;
  font-weight: 700;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  color: #FFFFFF;
  margin: 0 !important;
  max-width: 100% !important;
  text-align: right;
}

html[dir="rtl"] .scene-02-title .gradient-cyan-glow {
  display: inline-block;
  margin-top: 0.2rem;
}

/* Arabic Copy & Paragraphs */
html[dir="rtl"] .scene-02-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 100% !important;
}

html[dir="rtl"] .scene-02-lead-1,
html[dir="rtl"] .scene-02-lead-2 {
  font-family: 'Cairo', sans-serif;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-weight: 400;
  margin: 0;
  text-align: right;
}

/* CTA Button */
html[dir="rtl"] .scene-02-cta {
  margin-top: 1.25rem !important;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

html[dir="rtl"] .scene-story-btn {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  padding: 0.65rem 1.6rem !important;
  gap: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html[dir="rtl"] .scene-story-btn .btn-arrow {
  transform: scaleX(-1);
}

/* Responsive: Tablet Landscape & Below */
@media (max-width: 1024px) {
  html[dir="rtl"] .scene-02-wall-text {
    display: none !important;
  }

  html[dir="rtl"] .scene-02-image-wrap {
    width: 46% !important;
  }

  html[dir="rtl"] .scene-02-content {
    width: 54% !important;
    max-width: 500px !important;
    padding-right: 1rem;
  }

  html[dir="rtl"] .scene-02-title {
    font-size: clamp(28px, 3.2vw, 36px) !important;
    line-height: 1.35 !important;
  }

  html[dir="rtl"] .scene-02-lead-1,
  html[dir="rtl"] .scene-02-lead-2 {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
}

/* Responsive: Mobile & Small Tablet */
@media (max-width: 768px) {
  html[dir="rtl"] .about-scene.scene-02-who {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 3.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  html[dir="rtl"] .scene-02-container {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
  }

  html[dir="rtl"] .scene-02-layout {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  html[dir="rtl"] .scene-02-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    gap: 1rem !important;
  }

  html[dir="rtl"] .scene-02-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.35 !important;
    margin: 0.25rem 0 0.5rem 0 !important;
  }

  html[dir="rtl"] .scene-02-copy {
    gap: 0.85rem !important;
  }

  html[dir="rtl"] .scene-02-lead-1,
  html[dir="rtl"] .scene-02-lead-2 {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  html[dir="rtl"] .scene-02-cta {
    margin-top: 1rem !important;
  }

  html[dir="rtl"] .scene-02-bg-layer {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 2.2rem !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
  }

  html[dir="rtl"] .scene-02-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 230px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(71, 196, 242, 0.28) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 20px rgba(53, 207, 255, 0.12) !important;
  }

  html[dir="rtl"] .scene-02-img-gradient-overlay {
    background: linear-gradient(180deg,
      rgba(2, 8, 18, 0.2) 0%,
      rgba(2, 8, 18, 0.6) 100%
    ) !important;
  }

  html[dir="rtl"] .scene-02-wall-text {
    display: none !important;
  }

      .process-nodes-container::before {
        right: 28px;
}

.scene-04-lead {
  text-align: right ;
}
}

/* -------------------------------------------------------------------------
   05. FORMS & INPUTS (CONTACT & QUOTE)
   ------------------------------------------------------------------------- */
html[dir="rtl"] .form-input,
html[dir="rtl"] .form-textarea,
html[dir="rtl"] .form-select {
  text-align: right;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
}

/* Phone Numbers & Telephone Inputs: Force LTR direction & BiDi isolation in RTL */
html[dir="rtl"] .phone-number,
html[dir="rtl"] a[href^="tel:"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

html[dir="rtl"] input[type="tel"],
html[dir="rtl"] .form-input[type="tel"],
html[dir="rtl"] input.phone-number {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right;
}

html[dir="rtl"] .input-with-icon .field-icon {
  right: 18px !important;
  left: auto !important;
}

html[dir="rtl"] .input-with-icon .form-input,
html[dir="rtl"] .input-with-icon .form-select,
html[dir="rtl"] .input-with-icon .form-textarea {
  padding-right: 50px !important;
  padding-left: 18px !important;
}

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

html[dir="rtl"] .form-status svg {
  margin-right: 0;
  margin-left: 12px;
}

/* Details list icons */
html[dir="rtl"] .detail-item-row .detail-icon-circle {
  margin-right: 0;
  margin-left: 16px;
}

/* Choice pills in quote form */
html[dir="rtl"] .choice-pill .pill-check {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

html[dir="rtl"] .choice-pill span {
  font-family: 'Cairo', sans-serif;
  font-weight: 500;
}

/* Required star */
html[dir="rtl"] .required-star {
  margin-left: 0;
  margin-right: 4px;
}

/* -------------------------------------------------------------------------
   06. QUOTE STEPPER & REVIEW SCREEN
   ------------------------------------------------------------------------- */
html[dir="rtl"] .quote-stepper-track {
  direction: rtl;
}

html[dir="rtl"] .quote-progress-bar {
  right: 0 !important;
  left: auto !important;
  transition: width 0.4s ease, right 0.4s ease;
}

html[dir="rtl"] .service-card-icon-circle {
  margin-right: 0;
  margin-left: 12px;
}

html[dir="rtl"] .card-top-meta {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .service-switcher-bar {
  direction: rtl;
}

html[dir="rtl"] .tab-dot {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

html[dir="rtl"] .review-card-title-wrap {
  text-align: right;
}

html[dir="rtl"] .review-icon-circle {
  margin-right: 0 !important;
  margin-left: 16px !important;
}

html[dir="rtl"] .review-edit-btn {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .review-edit-btn svg {
  margin-right: 0 !important;
  margin-left: 6px !important;
}

html[dir="rtl"] .review-answer-item {
  border-left: none !important;
  border-right: 2px solid var(--color-spicy, #47C4F2) !important;
  padding-left: 0 !important;
  padding-right: 16px !important;
  text-align: right;
}

html[dir="rtl"] .review-detail-item {
  text-align: right;
}

html[dir="rtl"] .review-detail-item .detail-label {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .terms-privacy-text svg {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .conf-next-steps-card ul li .step-dot {
  margin-right: 0;
  margin-left: 14px;
}

/* -------------------------------------------------------------------------
   07. CARDS, GRIDS & TESTIMONIALS
   ------------------------------------------------------------------------- */
html[dir="rtl"] .author-avatar-circle {
  margin-right: 0 !important;
  margin-left: 14px !important;
}

html[dir="rtl"] .author-avatar {
  margin-right: 0 !important;
  margin-left: 14px !important;
}

html[dir="rtl"] .featured-logo-header {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html[dir="rtl"] .brand-mini-svg {
  margin-right: 0;
  margin-left: 12px;
}

html[dir="rtl"] .header-actions-wrap {
  text-align: left;
}

html[dir="rtl"] .benefit-card .benefit-icon-circle {
  margin-right: 0;
  margin-left: 18px;
}

/* HUD Meta Facts rail on case study */
html[dir="rtl"] .hud-item {
  text-align: right;
}

html[dir="rtl"] .verified-badge svg {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .deliverable-check-icon {
  margin-right: 0;
  margin-left: 10px;
}

/* Transformation card border glow */
html[dir="rtl"] .transformation-card.challenge {
  border-left: none;
  border-right: 2px solid #F59E0B;
}

html[dir="rtl"] .transformation-card.solution {
  border-left: none;
  border-right: 2px solid #47C4F2;
}

/* -------------------------------------------------------------------------
   08. FOOTER
   ------------------------------------------------------------------------- */
html[dir="rtl"] .footer-top-grid {
  text-align: right;
}

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

html[dir="rtl"] .footer-bottom-row {
  flex-direction: row-reverse;
}

html[dir="rtl"] .footer-bottom-links a {
  margin-right: 0;
  margin-left: 20px;
}

/* -------------------------------------------------------------------------
   09. EDITORIAL & BLOG
   ------------------------------------------------------------------------- */
html[dir="rtl"] .editorial-breadcrumb a,
html[dir="rtl"] .editorial-breadcrumb span {
  font-family: 'Cairo', sans-serif;
  font-weight: 500;
}

html[dir="rtl"] .blog-search-icon {
  right: 16px;
  left: auto;
}

html[dir="rtl"] .blog-search-input {
  padding-right: 46px;
  padding-left: 16px;
  text-align: right;
}

html[dir="rtl"] .article-tags-list a {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .article-share-actions {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .article-footer-toolbar {
  flex-direction: row-reverse;
}

/* -------------------------------------------------------------------------
   10. ADMIN DASHBOARD RTL
   ------------------------------------------------------------------------- */
html[dir="rtl"] .admin-sidebar {
  border-right: none !important;
  border-left: 1px solid rgba(71, 196, 242, 0.15) !important;
}

html[dir="rtl"] .nav-item-link svg {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

html[dir="rtl"] .nav-badge-pill {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .topbar-right {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .alert svg {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

/* Google Review Button in RTL */
html[dir="rtl"] .btn-google-review .google-review-text {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

html[dir="rtl"] .btn-google-review .google-external-icon {
  transform: scaleX(-1);
}

html[dir="rtl"] .btn-google-review:hover .google-external-icon {
  transform: scaleX(-1) translate(2px, -2px);
}

/* ==========================================================================
   FOOTER NEWSLETTER (RTL)
   ========================================================================== */
html[dir="rtl"] .footer-newsletter-card::before,
body.is-rtl .footer-newsletter-card::before {
  right: auto;
  left: -60px;
}

html[dir="rtl"] .footer-newsletter-badge,
body.is-rtl .footer-newsletter-badge {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

html[dir="rtl"] .footer-newsletter-title,
body.is-rtl .footer-newsletter-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-align: right;
}

html[dir="rtl"] .footer-newsletter-desc,
body.is-rtl .footer-newsletter-desc {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 400;
  text-align: right;
}

html[dir="rtl"] .footer-newsletter-input-group,
body.is-rtl .footer-newsletter-input-group {
  padding: 5px 16px 5px 5px;
}

html[dir="rtl"] .footer-newsletter-btn,
body.is-rtl .footer-newsletter-btn {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

html[dir="rtl"] .footer-newsletter-btn .btn-arrow-icon,
body.is-rtl .footer-newsletter-btn .btn-arrow-icon {
  transform: rotate(180deg);
}

html[dir="rtl"] .footer-newsletter-btn:hover .btn-arrow-icon,
body.is-rtl .footer-newsletter-btn:hover .btn-arrow-icon {
  transform: translateX(-3px) rotate(180deg);
}

html[dir="rtl"] .footer-newsletter-privacy,
body.is-rtl .footer-newsletter-privacy {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 400;
  text-align: right;
}