/* Right-to-left layout for the Arabic pages */
html[dir="rtl"] { direction: rtl; }
html[dir="rtl"] body { direction: rtl; text-align: right; font-family: var(--default-font); }
html[dir="rtl"] .header .container { direction: ltr; align-items: center; flex-wrap: nowrap; }
html[dir="rtl"] .header .logo,
html[dir="rtl"] .header .btn-getstarted { align-self: center; }
html[dir="rtl"] .header .btn-getstarted { direction: rtl; }
html[dir="rtl"] .navmenu ul { direction: rtl; padding-right: 0; align-items: center; }
html[dir="rtl"] .navmenu a i, html[dir="rtl"] .navmenu a:focus i { margin-left: 0; margin-right: 5px; }
html[dir="rtl"] .navmenu .dropdown ul { left: auto; right: 14px; }
html[dir="rtl"] .navmenu .dropdown .dropdown ul { left: auto; right: -90%; }
html[dir="rtl"] .navmenu .dropdown .dropdown:hover > ul { left: auto; right: -100%; }
@media (min-width: 1200px) {
  html[dir="rtl"] .navmenu > ul > li > a:not(.language-switch) { padding-left: 15px; padding-right: 15px; }
  html[dir="rtl"] .navmenu > ul > li > a.language-switch { margin-inline-start: 20px; }
}
@media (max-width: 1199px) {
  html[dir="rtl"] .mobile-nav-toggle { margin-left: 10px; margin-right: 0; }
}
html[dir="rtl"] .service-details .service-features .feature-item .feature-icon { margin-left: 20px; margin-right: 0; }
html[dir="rtl"] .service-details .service-process .process-steps .process-step:not(:last-child)::after { left: auto; right: 25px; }
html[dir="rtl"] .service-details .service-process .process-steps .process-step .step-number { margin-left: 25px; margin-right: 0; }
html[dir="rtl"] .service-details .service-sidebar .service-menu .menu-list .menu-item:hover,
html[dir="rtl"] .service-details .service-sidebar .service-menu .menu-list .menu-item.active { padding-left: 0; padding-right: 10px; }
html[dir="rtl"] .service-details .service-sidebar .service-menu .menu-list .menu-item i { margin-left: 12px; margin-right: 0; }
html[dir="rtl"] .service-details .service-sidebar .contact-card .contact-content .contact-info .contact-item i { margin-left: 10px; margin-right: 0; }
html[dir="rtl"] .breadcrumbs ol { direction: rtl; }
html[dir="rtl"] .breadcrumbs ol li + li::before { float: right; padding-left: .5rem; padding-right: 0; transform: scaleX(-1); }

/* Keep feature card numbers opposite the icons in the RTL layout. */
html[dir="rtl"] .features .features-grid .feature-item .feature-number {
  left: 25px;
  right: auto;
}
@media (max-width: 767px) {
  html[dir="rtl"] .features .features-grid .feature-item .feature-number {
    left: 20px;
  }
}

/* Match the Arabic contact consent checkbox to the brand accent. */
html[dir="rtl"] #contactConsent:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
html[dir="rtl"] #contactConsent:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 75%);
}

/* Keep CTA decoration behind the Arabic text and artwork. */
html[dir="rtl"] .call-to-action .advertise-1 > .content-left,
html[dir="rtl"] .call-to-action .advertise-1 > .content-right {
  position: relative;
  z-index: 2;
}
html[dir="rtl"] .call-to-action .advertise-1 > .decoration {
  z-index: 0;
}

/* Keep the growth percentage together; Arabic counters follow RTL word order. */
html[dir="rtl"] .call-to-action .floating-card .stats-number {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Center each Arabic counter over its caption and lift its unit slightly. */
html[dir="rtl"] .stats .counters > [class*="col-"] {
  text-align: center;
}
html[dir="rtl"] .stats .counters h2 .stats-unit {
  font-size: 0.86em;
  vertical-align: 0.12em;
}

/* Keep Arabic topic labels within their row on narrow screens. */
@media (max-width: 576px) {
  html[dir="rtl"] .features-tabs .content-wrapper .stats-row .stat-item .stat-number {
    font-size: clamp(15px, 5vw, 18px);
    white-space: nowrap;
  }
}

/* Mirror the decorative circles away from the right-aligned Arabic copy. */
html[dir="rtl"] .call-to-action .decoration .circle-1 {
  right: auto;
  left: -150px;
}
html[dir="rtl"] .call-to-action .decoration .circle-2 {
  left: -100px;
  right: auto;
}
@media (min-width: 1200px) {
  html[dir="rtl"] .navmenu .dropdown .dropdown > ul,
  html[dir="rtl"] .navmenu .dropdown .dropdown:hover > ul {
    left: 100%;
    right: auto;
  }
}

html[dir="rtl"] .call-to-action .content-right .floating-card {
  right: 0;
}