/* Composable Systems Site Kit: Arabic (right-to-left) pages only.
   Loaded by inc/arabic.php when the page is right-to-left, after Astra, Elementor and the Additional CSS. */
/* ==========================================================================
   Arabic / right-to-left (pages Polylang serves in Arabic get <html dir="rtl">)
   Astra and Elementor mirror their own layouts; these rules mirror our effects
   and adapt the typography. Nothing here applies to the English pages.
   ========================================================================== */
/* Arabic typeface (IBM Plex Sans Arabic, loaded on Arabic pages only); Latin words use its Latin set */
html[dir="rtl"] body, html[dir="rtl"] body *:not(svg):not(path):not(circle):not(rect) {
  font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important;   /* tracking breaks the joins between Arabic letters */
}
html[dir="rtl"] .cs-eyebrow .elementor-heading-title, html[dir="rtl"] .cs-tag .elementor-heading-title,
html[dir="rtl"] .cs-partner-meta .elementor-heading-title, html[dir="rtl"] .site-footer .widget-title { text-transform: none !important; }
/* Arabic needs more room between lines */
html[dir="rtl"] .elementor-heading-title { line-height: 1.4 !important; }
html[dir="rtl"] .cs-display .elementor-heading-title, html[dir="rtl"] .cs-page-title .elementor-heading-title { line-height: 1.3 !important; }
html[dir="rtl"] .elementor-widget-text-editor, html[dir="rtl"] .elementor-icon-box-description, html[dir="rtl"] .elementor-icon-list-text { line-height: 1.85 !important; }
/* IBM Plex Sans Arabic draws smaller than Plus Jakarta Sans at the same size: lift body-size text a little */
html[dir="rtl"] .elementor-widget-text-editor p, html[dir="rtl"] .elementor-icon-box-description, html[dir="rtl"] .elementor-icon-list-text,
html[dir="rtl"] .elementor-counter-title, html[dir="rtl"] .cs-mi-desc, html[dir="rtl"] .site-footer .menu-link, html[dir="rtl"] .cs-footer-about { font-size: 1.08em; }
html[dir="rtl"] .cs-statement { line-height: 1.6 !important; }
html[dir="rtl"] .cs-eyebrow .elementor-heading-title { font-size: 14px !important; }

/* Arrows point the reading direction (the `scale` property keeps hover/nudge transforms working) */
html[dir="rtl"] .elementor-button-icon svg, html[dir="rtl"] .cs-hero-arrow svg,
html[dir="rtl"] .cs-link-arrow .elementor-heading-title::after, html[dir="rtl"] .ast-header-button-1 .ast-custom-button::after,
html[dir="rtl"] .cs-mi-all .cs-mi-label::after, html[dir="rtl"] .cs-mi-promo .cs-mi-desc::after, html[dir="rtl"] .cs-submit::after { scale: -1 1; }
html[dir="rtl"] .ast-header-button-1 .ast-custom-button { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .ast-mobile-header-content .ast-header-button-1 .ast-custom-button { margin: 0; }
/* Labels the stylesheet adds inside the Services panel */
html[dir="rtl"] .cs-mi-all .cs-mi-label::before { content: "الخدمات"; }
html[dir="rtl"] .cs-mi-promo .cs-mi-label::before { content: "دراسة حالة"; }
html[dir="rtl"] .cs-mi-all .cs-mi-label::after { margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .cs-mi-promo .cs-mi-desc::after { margin-left: 0; margin-right: 8px; }

/* Services panel */
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi > .menu-link { padding: 14px 68px 14px 14px !important; }
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi > .menu-link::before { left: auto; right: 14px; }
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi > .menu-link::after { left: auto; right: 24px; }
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi-all > .menu-link, html[dir="rtl"] .main-header-menu .sub-menu .cs-mi-promo > .menu-link { padding: 0 !important; }
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi-promo > .menu-link { padding: 26px !important; }
html[dir="rtl"] .main-header-menu .sub-menu .cs-mi-promo > .menu-link::before { right: auto; left: -80px; }
@media (min-width: 922px) {
  html[dir="rtl"].ast-desktop .main-header-menu > .cs-mega > .sub-menu > .cs-mi-all,
  html[dir="rtl"] .ast-desktop .main-header-menu > .cs-mega > .sub-menu > .cs-mi-all { padding-right: 0; padding-left: 24px; }
  html[dir="rtl"] .ast-desktop .main-header-menu > .cs-mega > .sub-menu > .cs-mi-promo { margin-left: 0; margin-right: 24px; }
}
html[dir="rtl"] .ast-mobile-header-content .sub-menu .menu-link { padding-left: 0 !important; padding-right: 16px !important; }
/* Language switcher in the menu */
.cs-lang-switch > .menu-link { font-weight: 600 !important; }

/* Hero: dark fade behind the text on the right, canvas focal point on the left */
html[dir="rtl"] .cs-hero::before {
  background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(123,92,255,.22), transparent 70%),
              radial-gradient(ellipse 50% 50% at 90% 90%, rgba(22,200,180,.14), transparent 70%),
              linear-gradient(270deg, rgba(6,8,24,.92) 0%, rgba(6,8,24,.55) 45%, rgba(6,8,24,0) 75%); }
html[dir="rtl"] .cs-canvas { scale: -1 1; }
html[dir="rtl"] .cs-hero-dot i { transform-origin: right; }

/* Inner-page heroes */
html[dir="rtl"] .cs-page-hero::before {
  background: radial-gradient(ellipse 50% 70% at 15% 10%, rgba(123,92,255,.25), transparent 70%),
              radial-gradient(ellipse 40% 60% at 0% 100%, rgba(22,200,180,.16), transparent 70%); }
html[dir="rtl"] .cs-hero-lines { right: auto; left: -80px; scale: -1 1; }
html[dir="rtl"] .cs-page-hero.cs-has-canvas::after { background: linear-gradient(270deg, rgba(6,8,24,.94) 0%, rgba(6,8,24,.7) 42%, rgba(6,8,24,0) 72%); }
@media (max-width: 767px) {
  html[dir="rtl"] .cs-page-hero.cs-has-canvas::after { background: linear-gradient(180deg, rgba(6,8,24,.9) 0%, rgba(6,8,24,.75) 55%, rgba(6,8,24,0) 85%); }
}

/* Cards, stats, lists */
html[dir="rtl"] .cs-card-num { right: auto; left: 32px; }
html[dir="rtl"] .cs-stat { padding: 36px 0 0 28px; }
html[dir="rtl"] .cs-stat + .cs-stat { padding-left: 28px; padding-right: 28px; border-left: 0; border-right: 1px solid var(--cs-line); }
@media (max-width: 1024px) { html[dir="rtl"] .cs-stat:nth-child(3) { border-right: 0; padding-right: 0; } }
html[dir="rtl"] .cs-case-visual::before {
  background: repeating-radial-gradient(circle at 15% 15%, transparent 0 39px, rgba(255,255,255,.13) 39px 40px, transparent 40px 74px);
  -webkit-mask: radial-gradient(circle at 15% 15%, #000 0, transparent 300px); mask: radial-gradient(circle at 15% 15%, #000 0, transparent 300px); }
html[dir="rtl"] .cs-cta-band::before { right: auto; left: -160px; }
html[dir="rtl"] .cs-cta-band::after { left: auto; right: 30%; }
html[dir="rtl"] .cs-cap:not(:nth-child(3n+1)) { padding-left: 0; padding-right: 32px; border-left: 0; border-right: 1px solid var(--cs-light-line); }
html[dir="rtl"] .cs-cap { padding-right: 0; padding-left: 32px; }
html[dir="rtl"] .cs-note p { border-left: 0; padding-left: 0; border-right: 2px solid var(--cs-line-2); padding-right: 16px; }
html[dir="rtl"] .cs-toc a { border-left: 0; border-right: 2px solid var(--cs-line); }
html[dir="rtl"] .cs-case-steps { padding-left: 0 !important; padding-right: 40px !important; }
/* The accreditation marquee scrolls the other way */
html[dir="rtl"] .cs-marquee .elementor-icon-list-items { animation-name: cs-marquee-rtl; }
@keyframes cs-marquee-rtl { to { transform: translateX(50%); } }
/* Mobile card sliders start from the right edge */
@media (max-width: 767px) { html[dir="rtl"] .cs-cards, html[dir="rtl"] .cs-partners { scroll-padding-left: 0; scroll-padding-right: 16px; } }

/* Forms and search */
html[dir="rtl"] .cs-search svg { left: auto; right: 18px; }
html[dir="rtl"] .cs-search input { padding: 0 50px 0 20px !important; }
html[dir="rtl"] .cs-field select { background-position: left 14px center !important; padding-right: 16px !important; padding-left: 44px !important; }
html[dir="rtl"] .cs-captcha input { direction: ltr; text-align: right; }

/* Phone numbers and email addresses stay left-to-right inside Arabic text */
html[dir="rtl"] a[href^="tel:"] .elementor-icon-list-text, html[dir="rtl"] a[href^="mailto:"] .elementor-icon-list-text,
html[dir="rtl"] .menu-item a[href^="tel:"], html[dir="rtl"] .menu-item a[href^="mailto:"],
html[dir="rtl"] .cs-contact-item .elementor-icon-box-description { unicode-bidi: plaintext; text-align: right; }
/* "3 / 7" counters read left-to-right, as numbers do in Arabic too */
html[dir="rtl"] .cs-count-badge { direction: ltr; unicode-bidi: isolate; }