/* ==========================================================================
   Aurora Tech — Layout Fixes (navbar overflow + responsive font sizes)
   ========================================================================== */

/* ---- Kill horizontal overflow (navbar / mega-menu spilling past viewport) ---- */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* ---- Contain the Royal mega-menu / nav within the viewport ---- */
.wpr-nav-menu-container,
.wpr-mobile-nav-menu-container,
.wpr-mega-menu { max-width: 100%; }
.wpr-mega-menu-item .wpr-mega-menu-sub,
.wpr-mega-menu-container .wpr-mega-menu-sub { max-width: 100vw; box-sizing: border-box; }
.elementor-widget-wpr-mega-menu { max-width: 100%; }

/* ---- Header sections never wider than the screen ---- */
.elementor-127 .elementor-section,
.elementor-127 .elementor-container,
.elementor-127 .e-con,
.elementor-124 .elementor-section { max-width: 100vw; }

/* ---- Long words/links never force horizontal scroll ---- */
.elementor-heading-title,
.elementor-widget-text-editor,
.wpr-menu-item,
.elementor-button { overflow-wrap: break-word; word-break: break-word; }

/* ---- Responsive scaling of large headings (tablet <=1024) ---- */
@media (max-width:1024px){
.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-advanced-text-preffix{font-size:59px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text b, .elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text b i,.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text,.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-highlighted-text{font-size:59px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-1b40d8d .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-aac092a .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-182d237 .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-advanced-text-preffix{font-size:28px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text b, .elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text b i,.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text,.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-highlighted-text{font-size:28px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-d0deae0 .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-1392f80 .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-81e25b0 .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-091a759 .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-57577fa .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-567670a .wpr-flip-box-back .wpr-flip-box-icon{font-size:26px !important;line-height:1.2 !important}
.elementor-8 .elementor-element.elementor-element-b3424c5 .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-27de54e .elementor-heading-title{font-size:46px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-9dd292b .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-4f48736 .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-284f1b3 .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-7622155 .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-11 .elementor-element.elementor-element-9f79a14 .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-4f2fca3 .elementor-heading-title{font-size:46px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-da1c1ab .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-4889f6b .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-186a1ee .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-b80a4a0 .elementor-heading-title{font-size:26px !important;line-height:1.2 !important}
.elementor-157 .elementor-element.elementor-element-7e4a627 .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
.elementor-203 .elementor-element.elementor-element-d9fc9a5 .elementor-heading-title{font-size:46px !important;line-height:1.2 !important}
.elementor-203 .elementor-element.elementor-element-3b7d6cd .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
.elementor-203 .elementor-element.elementor-element-05881ec .elementor-heading-title{font-size:28px !important;line-height:1.2 !important}
}

/* ---- Responsive scaling of large headings (mobile <=767) ---- */
@media (max-width:767px){
.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-advanced-text-preffix{font-size:41px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text b, .elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text b i,.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-anim-text,.elementor-8 .elementor-element.elementor-element-9be5eaf .wpr-highlighted-text{font-size:41px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-1b40d8d .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-aac092a .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-182d237 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-advanced-text-preffix{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text b, .elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text b i,.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-anim-text,.elementor-8 .elementor-element.elementor-element-8a704ed .wpr-highlighted-text{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-d0deae0 .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-1392f80 .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-81e25b0 .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-091a759 .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-57577fa .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-567670a .wpr-flip-box-back .wpr-flip-box-icon{font-size:22px !important;line-height:1.22 !important}
.elementor-8 .elementor-element.elementor-element-b3424c5 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-27de54e .elementor-heading-title{font-size:32px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-9dd292b .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-4f48736 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-284f1b3 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-7622155 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-11 .elementor-element.elementor-element-9f79a14 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-4f2fca3 .elementor-heading-title{font-size:32px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-da1c1ab .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-4889f6b .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-186a1ee .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-b80a4a0 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-157 .elementor-element.elementor-element-7e4a627 .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-203 .elementor-element.elementor-element-d9fc9a5 .elementor-heading-title{font-size:32px !important;line-height:1.22 !important}
.elementor-203 .elementor-element.elementor-element-3b7d6cd .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
.elementor-203 .elementor-element.elementor-element-05881ec .elementor-heading-title{font-size:22px !important;line-height:1.22 !important}
}

/* ==========================================================================
   Home page refinements  (added 2026-09-11)
   Scoped to body.home so the rest of the site is untouched.

   Fixes measured on the live page, not guesses:
   - the four category cards sat at 146 / 110 / 126 px, so the row looked broken
   - headings and body copy ran to 1227px, roughly double a comfortable measure
   - the "about" section carried 200px of empty padding above it
   - the three feature blocks had ragged baselines because their text lengths differ
   - the main call to action was a flat purple box, off-palette and with no focus ring

   Tokens come from custom-professional.css (Aurora Tech design system).
   ========================================================================== */

/* -- 1. Category cards row: one height, aligned, and actually tappable ------ */
body.home .elementor-element-4c0ab05 > .elementor-container {
  align-items: stretch;
}
body.home .elementor-element-4c0ab05 .elementor-column,
body.home .elementor-element-4c0ab05 .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
}
body.home .elementor-element-4c0ab05 .elementor-widget-wrap > .elementor-widget {
  flex: 1 1 auto;
  display: flex;
}
body.home .elementor-element-4c0ab05 .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 72px;                      /* comfortably above the 44px touch minimum */
}

/* -- 2. Readable line length ----------------------------------------------
   A heading that spans 1227px forces the eye to travel too far between lines.
   ~24ch for display headings and ~68ch for body copy is the readable band.    */
body.home .elementor-element-1b40d8d .elementor-heading-title,
body.home .elementor-element-091bed4 .wpr-advanced-text {
  max-width: 24ch;
  margin-inline: auto;
  letter-spacing: 0.005em;               /* all-caps needs a touch more air */
  text-wrap: balance;
}
body.home .elementor-element-dd36273,
body.home .elementor-element-091bed4 > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget-text-editor {
  max-width: 68ch;
  margin-inline: auto;
}

/* -- 3. (intentionally empty)
   The large top padding on the "about" section is not dead space: that section
   carries margin-top:-150px so its background slides under the category cards.
   Shrinking the padding would pull the copy up into the cards, so it stays.     */

/* -- 4. The three feature blocks: equal height, aligned baselines ---------- */
body.home .elementor-element-29b4352 .elementor-inner-section > .elementor-container {
  align-items: stretch;
}
body.home .elementor-element-29b4352 .elementor-inner-section .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
/* the icon sits in a fixed box so every column starts its text at the same line */
body.home .elementor-element-29b4352 .elementor-inner-section .elementor-widget-image
  .elementor-widget-container {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home .elementor-element-29b4352 .elementor-inner-section .elementor-widget-heading
  .elementor-widget-container {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- 5. Calls to action: on-palette, reachable, with a visible focus ring ---
   Elementor writes ".elementor-8 .elementor-element.elementor-element-XXX
   .wpr-button" (four classes), so the class name is repeated below to outweigh
   it without hard-coding each button's generated id.                          */
body.home .elementor-element .wpr-button.wpr-button {
  background-image: linear-gradient(135deg, #22D3EE 0%, #6366F1 100%);
  background-color: transparent;
  color: #06121B;
  border-radius: 999px;
  min-height: 52px;
  padding-inline: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 34px -10px rgba(99, 102, 241, 0.55);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .elementor-element .wpr-button.wpr-button:hover,
body.home .elementor-element .wpr-button.wpr-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(99, 102, 241, 0.72);
  color: #06121B;
}
body.home .elementor-element .wpr-button.wpr-button:focus-visible {
  outline: 2px solid #22D3EE;
  outline-offset: 3px;
}
/* the plugin paints its hover state with a ::before overlay - keep it out of the way */
body.home .elementor-element .wpr-button.wpr-button::before,
body.home .elementor-element .wpr-button.wpr-button::after {
  background-color: transparent;
}

/* -- 6. Hero: let the headline breathe, keep the subtitle in proportion ---- */
body.home .elementor-element-9be5eaf .wpr-advanced-text {
  line-height: 1.08;
  text-wrap: balance;
}
body.home .elementor-element-9be5eaf + .elementor-widget-text-editor,
body.home .elementor-element-9be5eaf ~ .elementor-widget-text-editor {
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* -- 7. Service flip cards: even gaps on every row ------------------------- */
body.home .elementor-element-091bed4 .wpr-flip-box {
  height: 100%;
}

/* -- 8. Small screens: the fixed minimums above must not create dead space -- */
@media (max-width: 767px) {
  body.home .elementor-element-29b4352 .elementor-inner-section .elementor-widget-image
    .elementor-widget-container,
  body.home .elementor-element-29b4352 .elementor-inner-section .elementor-widget-heading
    .elementor-widget-container {
    min-height: 0;
  }
  body.home .elementor-element-1b40d8d .elementor-heading-title,
  body.home .elementor-element-091bed4 .wpr-advanced-text {
    max-width: none;
  }
  body.home .wpr-button {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .wpr-button {
    transition: none;
  }
  body.home .wpr-button:hover,
  body.home .wpr-button:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Font Awesome 6 icon names on a Font Awesome 5 build   (added 2026-09-11)

   The Portfolio cards ask for fa-shield-halved, fa-gears, fa-heart-pulse and
   fa-cart-shopping. Those are Font Awesome 6 names; this site loads Font
   Awesome 5, where the same glyphs are called shield-alt, cogs, heartbeat and
   shopping-cart. The result was four project cards with a blank space where
   the icon should be.

   Font Awesome ships exactly this kind of alias when it renames an icon, so
   the codepoints below are the FA5 ones taken from the stylesheet that is
   actually loaded, not from memory. Kept site-wide: the same names may be
   used on any page.
   ========================================================================== */
.fa-shield-halved:before { content: "\f3ed"; }   /* = fa-shield-alt     */
.fa-gears:before         { content: "\f085"; }   /* = fa-cogs           */
.fa-heart-pulse:before   { content: "\f21e"; }   /* = fa-heartbeat      */
.fa-cart-shopping:before { content: "\f07a"; }   /* = fa-shopping-cart  */
.fa-circle-check:before  { content: "\f058"; }   /* = fa-check-circle   */
.fa-magnifying-glass:before { content: "\f002"; } /* = fa-search        */
.fa-arrow-right-long:before { content: "\f178"; } /* = fa-long-arrow-alt-right */
/* the renamed icons still need the solid face to be picked */
.fa-shield-halved, .fa-gears, .fa-heart-pulse, .fa-cart-shopping,
.fa-circle-check, .fa-magnifying-glass, .fa-arrow-right-long {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* ==========================================================================
   Portfolio page refinements   (added 2026-09-11)
   Scoped to the portfolio template so no other page is affected.
   ========================================================================== */

/* Cards in a row were 129px and 100px tall depending on how long the copy was,
   which left the grid ragged and pushed the icons out of line. One height per
   row, icon on a fixed band, so the six cards read as a set.                  */
.elementor-391 .elementor-section > .elementor-container {
  align-items: stretch;
}
.elementor-391 .elementor-column > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
}
.elementor-391 .elementor-widget-icon-box {
  flex: 1 1 auto;
  display: flex;
}
.elementor-391 .elementor-widget-icon-box > .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
}
.elementor-391 .elementor-widget-icon-box .elementor-icon-box-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.elementor-391 .elementor-widget-icon-box .elementor-icon-box-icon {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-391 .elementor-widget-icon-box .elementor-icon-box-title {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-391 .elementor-widget-icon-box .elementor-icon-box-description {
  max-width: 46ch;
  margin-inline: auto;
}

/* The closing "Have a project in mind?" band is a saturated purple that sits
   apart from the navy the rest of this page uses. It is left as it is: the same
   purple carries the home page hero, so it reads as a brand accent rather than
   a mistake, and recolouring one of the two would make the pair less coherent,
   not more.                                                                    */

@media (max-width: 767px) {
  .elementor-391 .elementor-widget-icon-box .elementor-icon-box-icon,
  .elementor-391 .elementor-widget-icon-box .elementor-icon-box-title {
    min-height: 0;
  }
}

/* ==========================================================================
   Centred paragraphs sat left of centre   (added 2026-09-14)

   custom-professional.css caps every paragraph at 72ch so lines stay readable,
   which is right, but it never centres the resulting box. A paragraph whose
   text is centred therefore drew its 72ch box against the left edge of a wide
   container, leaving the copy visibly off-centre from the heading above it
   (seen under "Our Portfolio": heading centred at 720px, paragraph at 524px).

   Centre the box only where the text is already centred. Left-aligned body copy
   must keep its left edge, so it is deliberately untouched.
   ========================================================================== */
p[style*="text-align:center"],
p[style*="text-align: center"],
.elementor-widget-text-editor[class*="align-center"] p {
  margin-inline: auto;
}

/* ==========================================================================
   Languages: switcher, right-to-left, Arabic typeface   (added 2026-09-15)
   The site is published in English, Arabic and French (scripts/build-i18n.mjs).
   ========================================================================== */

/* -- switcher: a slim bar above the header --------------------------------
   Kept out of the menu row on purpose: seven menu items plus a switcher do
   not fit on one line at common laptop widths, and a wrapped menu looks
   broken. flex-end puts it at the right in English/French and at the left
   in Arabic without any extra rule.                                        */
.se-lang-bar { background: #070B16; border-bottom: 1px solid rgba(255,255,255,.07); }
.se-lang-wrap { max-width: 1240px; margin-inline: auto; padding: 0 20px; display: flex; justify-content: flex-end; }
.se-lang { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; }
.se-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 30px; padding: 0 10px; border-radius: 999px;
  font: 600 .78rem/1 var(--font-sans, 'Inter', sans-serif); letter-spacing: .04em;
  color: var(--text-muted, #8794B4); text-decoration: none;
  transition: background .2s, color .2s;
}
.se-lang a:hover { color: var(--text-primary, #EAF0FA); background: rgba(255,255,255,.07); }
.se-lang a.is-current { color: var(--accent, #22D3EE); background: rgba(34,211,238,.10); }
.se-lang a:focus-visible { outline: 3px solid var(--accent, #22D3EE); outline-offset: 2px; }
.se-lang a[lang="ar"] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: .9rem; }

/* Seven menu items (AI and Estimate were added) no longer fit on one line
   below about 1425px with the 15px type and 18px gaps set in Elementor, and
   a wrapped menu looks broken. Between the tablet breakpoint (1025px) and
   1424px the gaps and the type are reduced just enough for one line in all
   three languages (French labels are the longest); two bands because the
   column keeps shrinking. Elementor writes its rule with five classes and
   the type size comes from the kit, hence the repeated classes and
   !important - both scoped to these widths only.                          */
@media (min-width: 1026px) and (max-width: 1424px) {
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu > .menu-item.menu-item.menu-item { margin-left: 5px; margin-right: 5px; }
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu .wpr-menu-item.wpr-menu-item.wpr-menu-item,
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu .wpr-menu-item.wpr-menu-item.wpr-menu-item > span { font-size: 14px !important; }
}
@media (min-width: 1026px) and (max-width: 1120px) {
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu > .menu-item.menu-item.menu-item { margin-left: 4px; margin-right: 4px; }
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu .wpr-menu-item.wpr-menu-item.wpr-menu-item,
  .elementor-widget-wpr-mega-menu .wpr-nav-menu.wpr-nav-menu .wpr-menu-item.wpr-menu-item.wpr-menu-item > span { font-size: 12px !important; }
}

/* -- right-to-left (Arabic) ------------------------------------------------ */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .elementor-heading-title { letter-spacing: 0; }
/* left-aligned copy becomes right-aligned; centred copy stays centred */
html[dir="rtl"] .elementor-widget-text-editor p:not([style*="center"]),
html[dir="rtl"] .elementor-align-left { text-align: right; }

/* -- Arabic typeface: the site's Latin fonts have no Arabic glyphs -------- */
html[lang="ar"] :where(body, p, h1, h2, h3, h4, h5, h6, a, span, li, div, button, input, select, textarea, label,
  .elementor-heading-title, .elementor-button, .wpr-button, .wpr-nav-menu a) {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}
html[lang="ar"] p { line-height: 1.95; }

/* -- Arabic home hero: mirror the background ------------------------------
   The hero (section 9cd5142) is one "cover" photo with the laptop on its
   right half. In Arabic the text column moves to the right and sat on top of
   the laptop. The photo is redrawn on a pseudo-element flipped horizontally,
   so the laptop moves to the left and the text keeps its clear space. The
   illustration is decorative (circuit lines, fake code), so mirroring it
   costs nothing.                                                            */
html[dir="rtl"] .elementor-element-9cd5142:not(.elementor-motion-effects-element-type-background) { background-image: none; }
html[dir="rtl"] .elementor-element-9cd5142 { position: relative; overflow: hidden; }
html[dir="rtl"] .elementor-element-9cd5142::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #0E1428 url("/wp-content/uploads/2023/02/illustration-10.jpg") center center / cover no-repeat;
  transform: scaleX(-1);
}
html[dir="rtl"] .elementor-element-9cd5142 > .elementor-container { position: relative; z-index: 1; }