/* MachSoft Arabic RTL layer — additive only; shared/root files remain unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');

html[lang="ar"] {
  direction: rtl;
  overflow-x: hidden;
}

html[lang="ar"] body {
  direction: rtl;
  text-align: right;
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  overflow-x: hidden;
}

/* Arabic text font: keep icon glyphs and embedded technical marks on their own fonts. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button,
html[lang="ar"] .navigation a,
html[lang="ar"] .mobile-nav .nav-links a,
html[lang="ar"] .solution-page-main,
html[lang="ar"] .solution-page-content,
html[lang="ar"] .solution-page-callout,
html[lang="ar"] .footer-distributed,
html[lang="ar"] .solutions-v2,
html[lang="ar"] .home,
html[lang="ar"] .about,
html[lang="ar"] .missionvision,
html[lang="ar"] .contact,
html[lang="ar"] .contact-in {
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

/* Main and detail navigation flow in RTL while keeping the existing transparent header. */
html[lang="ar"] .navigation,
html[lang="ar"] .mobile-nav,
html[lang="ar"] .language,
html[lang="ar"] .solution-breadcrumb,
html[lang="ar"] .solution-page-hero,
html[lang="ar"] .solution-page-callout-inner {
  direction: rtl;
}

html[lang="ar"] .navigation {
  text-align: right;
}

html[lang="ar"] .navigation > a:first-child {
  margin-right: 0 !important;
  margin-left: 1rem;
}

html[lang="ar"] .navigation .site-language-switcher,
html[lang="ar"] .language .solution-language-switch,
html[lang="ar"] .site-language-switcher {
  direction: rtl;
  unicode-bidi: isolate;
}

html[lang="ar"] .solution-breadcrumb {
  text-align: right;
}

html[lang="ar"] .solution-page-hero-copy,
html[lang="ar"] .solution-page-section,
html[lang="ar"] .solution-page-callout,
html[lang="ar"] .solution-page-main {
  text-align: right;
}

html[lang="ar"] .solution-page-hero-copy h1,
html[lang="ar"] .solution-page-heading,
html[lang="ar"] .solution-page-section h2,
html[lang="ar"] .solution-page-section h3 {
  text-align: right;
}

html[lang="ar"] .solution-capability-grid,
html[lang="ar"] .vision-product-grid,
html[lang="ar"] .vision-partner-grid,
html[lang="ar"] .solutions-v2__grid,
html[lang="ar"] .solutions-v2__cards,
html[lang="ar"] .solutions-v2__layout {
  direction: rtl;
}

html[lang="ar"] .solution-page-list,
html[lang="ar"] .solution-page-section ul,
html[lang="ar"] .solution-page-section ol {
  padding-right: 1.3rem;
  padding-left: 0;
}

html[lang="ar"] .solution-page-list li {
  padding-right: .2rem;
  padding-left: 0;
}

html[lang="ar"] .solution-page-callout-inner {
  flex-direction: row;
}

html[lang="ar"] .solution-page-callout h2 {
  text-align: right;
}

html[lang="ar"] .solution-page-action,
html[lang="ar"] .hero-actions {
  direction: rtl;
}

/* Form fields use RTL except email/phone fields, which must remain LTR. */
html[lang="ar"] input:not([type="email"]):not([type="tel"]):not([type="url"]),
html[lang="ar"] textarea,
html[lang="ar"] select {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"],
html[lang="ar"] a[href^="mailto:"],
html[lang="ar"] a[href^="tel:"],
html[lang="ar"] code,
html[lang="ar"] .language-code {
  direction: ltr;
  unicode-bidi: isolate;
}

html[lang="ar"] .footer-distributed {
  direction: rtl;
}

html[lang="ar"] .footer-distributed .footer-links,
html[lang="ar"] .footer-distributed .footer-icons {
  direction: ltr;
}

html[lang="ar"] .footer-distributed .footer-icons {
  justify-content: center;
}

/* Mirror the existing mobile menu controls without changing the checked-panel height/scroll rules. */
@media (max-width: 768px) {
  html[lang="ar"] .mobile-nav .nav-links {
    direction: rtl;
    text-align: right;
  }

  html[lang="ar"] .mobile-nav .nav-links > li > a {
    direction: rtl;
    text-align: right;
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }

  html[lang="ar"] .mobile-nav .hamburger-icon {
    left: auto !important;
    right: 0.85rem !important;
  }

  html[lang="ar"] .mobile-nav .LogoForMobile {
    right: auto !important;
    left: 0.85rem !important;
  }

  html[lang="ar"] .navigation .site-language-switcher,
  html[lang="ar"] .language .solution-language-switch {
    text-align: center;
  }

  html[lang="ar"] .solution-page-hero {
    direction: rtl;
  }

  html[lang="ar"] .solution-page-callout-inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Readability and safe bidi handling on very narrow screens. */
@media (max-width: 380px) {
  html[lang="ar"] .solution-page-hero h1 {
    overflow-wrap: anywhere;
  }

  html[lang="ar"] .solution-page-main,
  html[lang="ar"] .solution-page-section,
  html[lang="ar"] .solution-page-callout {
    overflow-wrap: anywhere;
  }
}

/* Homepage-specific RTL flow: these rules are limited to /ar/index.html. */
html[lang="ar"] .hero-stack,
html[lang="ar"] .hero-panel,
html[lang="ar"] .hero-heading,
html[lang="ar"] .hero-services,
html[lang="ar"] .solutions-v2__intro,
html[lang="ar"] .solutions-v2__intro-copy,
html[lang="ar"] .solutions-v2__card,
html[lang="ar"] .contact-in-input,
html[lang="ar"] .contact-form,
html[lang="ar"] .about-text,
html[lang="ar"] .mission-text,
html[lang="ar"] .vision-text {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .solutions-v2__intro-cta,
html[lang="ar"] .solutions-v2__card-link {
  direction: rtl;
}

html[lang="ar"] .solutions-v2__intro-cta .fa-arrow-right,
html[lang="ar"] .solutions-v2__card-link .fa-arrow-right,
html[lang="ar"] .hero-action .fa-arrow-right {
  transform: scaleX(-1);
}

html[lang="ar"] .contact-in-input input,
html[lang="ar"] .contact-in-input textarea {
  text-align: right;
  direction: rtl;
}

html[lang="ar"] .footer-distributed .footer-left,
html[lang="ar"] .footer-distributed .footer-right {
  text-align: center;
}


/* RTL support for the current MachFlow MES, retrofit-gallery and Web SCADA layouts. */
html[lang="ar"] .solution-mes-page,
html[lang="ar"] .solution-mes-page .mes-product-intro,
html[lang="ar"] .solution-mes-page .mes-module-grid,
html[lang="ar"] .solution-mes-page .mes-existing-grid,
html[lang="ar"] .solution-mes-page .mes-architecture,
html[lang="ar"] .solution-mes-page .mes-flow-stack,
html[lang="ar"] .solution-mes-page .mes-ui-topbar,
html[lang="ar"] .solution-mes-page .mes-ui-chart-row,
html[lang="ar"] .solution-mes-page .mes-ui-bottom-row,
html[lang="ar"] .solution-data-scada-page .scada-capability-grid,
html[lang="ar"] .solution-data-scada-page .scada-feature-visual-grid,
html[lang="ar"] .solution-data-scada-page .scada-integration-grid,
html[lang="ar"] .solution-data-scada-page .scada-related-grid,
html[lang="ar"] .modernization-gallery,
html[lang="ar"] .modernization-engineering-feature,
html[lang="ar"] .modernization-evidence-grid {
  direction: rtl;
}

html[lang="ar"] .solution-mes-page .mes-module-card,
html[lang="ar"] .solution-mes-page .mes-existing-card,
html[lang="ar"] .solution-mes-page .mes-architecture-option,
html[lang="ar"] .solution-data-scada-page .scada-capability-card,
html[lang="ar"] .solution-data-scada-page .scada-integration-panel {
  text-align: right;
}

html[lang="ar"] .solution-mes-page .mes-module-card::before {
  left: 0;
  right: 0;
}

html[lang="ar"] .solution-data-scada-page .scada-feature-points li {
  flex-direction: row;
}

html[lang="ar"] .solution-mes-page .mes-ui-status-table,
html[lang="ar"] .solution-mes-page .mes-ui-kpis,
html[lang="ar"] .solution-mes-page .mes-ui-loss-body,
html[lang="ar"] .solution-mes-page .mes-ui-poweredby {
  direction: rtl;
}

html[lang="ar"] .solution-mes-page .mes-ui-kpi strong,
html[lang="ar"] .solution-mes-page .mes-ui-status-table b,
html[lang="ar"] .solution-mes-page .mes-ui-status-table small,
html[lang="ar"] .solution-mes-page .mes-ui-chart,
html[lang="ar"] .solution-mes-page .mes-ui-donut,
html[lang="ar"] .solution-mes-page .mes-ui-poweredby-logo,
html[lang="ar"] .solution-mes-page .mes-ui-poweredby-logo img,
html[lang="ar"] time,
html[lang="ar"] .technical-value {
  direction: ltr;
  unicode-bidi: isolate;
}


/* ============================================================
   ARABIC HEADER CONSISTENCY — v4
   Keep the same physical header layout as TR/EN: logo on the left,
   navigation and language selector grouped on the right. Arabic
   labels themselves retain RTL text direction. Mobile positioning
   remains unchanged because it already matches the shared header.
   ============================================================ */
@media (min-width: 769px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    direction: ltr !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    padding: 0 clamp(1.25rem, 3.5vw, 3.75rem) !important;
    gap: clamp(0.45rem, 1.15vw, 1.25rem) !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:first-child {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:not(:first-child) {
    direction: rtl !important;
    unicode-bidi: isolate;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: right !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > .language-menu {
    direction: rtl !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* At tablet widths, preserve the natural widths of menu labels and controls. */
@media (min-width: 769px) and (max-width: 1350px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    gap: clamp(0.35rem, 0.85vw, 0.75rem) !important;
    padding: 0 clamp(1rem, 2.4vw, 2rem) !important;
  }
}

/* Mobile keeps the existing shared TR/EN physical layout; navigation labels remain RTL. */
@media (max-width: 768px) {
  html[lang="ar"] .mobile-nav {
    direction: ltr !important;
  }

  html[lang="ar"] .mobile-nav .hamburger-icon {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[lang="ar"] .mobile-nav .LogoForMobile {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  html[lang="ar"] .mobile-nav .nav-links {
    direction: rtl !important;
    text-align: right !important;
  }
}

/* ============================================================
   ARABIC HOMEPAGE HERO INSET — v4
   Mirror the approved TR/EN hero panel's outer spacing. In RTL,
   the shared physical margin-left is not a reliable way to inset
   the fixed-width hero from the right edge, so use margin-right.
   Scoped to the Arabic homepage hero only; mobile and detail pages
   retain their existing layout.
   ============================================================ */
@media (min-width: 1351px) {
  html[lang="ar"] .home .hero-stack {
    margin-right: 10em !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1350px) {
  html[lang="ar"] .home .hero-stack {
    margin-right: 4.5em !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
   ARABIC HOMEPAGE HERO PANEL — RTL HORIZONTAL MIRROR v6
   Mirror the shared TR/EN corner pattern horizontally (not 180°).
   This keeps the lower-right edge flat beside the right-aligned CTA
   buttons, avoiding a large rounded gap under the panel.
   Desktop/tablet source radius: 9.375em 2.5em 9.375em 0em
   RTL horizontal mirror:        2.5em 9.375em 0em 9.375em
   ============================================================ */
html[lang="ar"] .home .box.hero-panel {
  border-radius: 2.5em 9.375em 0em 9.375em !important;
}

@media (max-width: 767.98px) {
  /* Mobile source radius: 4.5em 1.6em 4.5em 0em; mirrored left-to-right. */
  html[lang="ar"] .home .box.hero-panel {
    border-radius: 1.6em 4.5em 0em 4.5em !important;
  }
}



/* ARABIC FOOTER CONTACT ROWS — Latin contact text, icons on the left */
/* The contact details are all Latin-script, so keep the row LTR while the page stays RTL. */
html[lang="ar"] .footer-distributed .footer-center > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  direction: ltr !important;
}

html[lang="ar"] .footer-distributed .footer-center > div > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  float: none !important;
}

html[lang="ar"] .footer-distributed .footer-center > div > p {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
}

html[lang="ar"] .footer-distributed .footer-center .footer-phone,
html[lang="ar"] .footer-distributed .footer-center .footer-address {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
}

/* ============================================================
   ARABIC HOMEPAGE ABOUT SECTION — MIRRORED OUTER PADDING
   On wide desktop screens the shared stylesheet gives the image
   a large left inset and the text a large right inset. In RTL those
   become the facing edges and create an oversized gap. Mirror only
   those physical paddings so the large insets sit on the outer edges.
   Tablet and mobile layouts keep the shared responsive spacing.
   ============================================================ */
@media (min-width: 1351px) {
  html[lang="ar"] .about-img {
    padding: 1em 30vh 1em 1em !important;
  }

  html[lang="ar"] .about-text {
    padding: 1em 1em 1em 30vh !important;
  }
}

/* ============================================================
   ARABIC INDUSTRIAL AUTOMATION DETAIL — DIRECTIONAL ARROWS v1
   Mirror the desktop workflow connectors so the timeline flows
   from stage I on the right toward stage IV on the left. Also
   mirror the related-solution arrow to match RTL reading flow.
   Scoped only to the Arabic industrial-automation detail page.
   ============================================================ */
@media (min-width: 1001px) {
  html[lang="ar"] body.solution-automation-control-page #scope .automation-workflow-timeline li::after {
    left: auto !important;
    right: calc(50% + 1.45rem) !important;
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
  }
}

html[lang="ar"] body.solution-automation-control-page .solution-related-card h3::after {
  content: " ↖" !important;
}

/* ============================================================
   ARABIC MOTION-CONTROL / RETROFIT DETAIL — DIRECTIONAL ARROWS v1
   Mirror desktop timeline connectors so the workflow travels from
   stage I on the right toward stage IV on the left. Also mirror the
   related-solution arrow. Scoped only to the Arabic modernization page.
   ============================================================ */
@media (min-width: 1001px) {
  html[lang="ar"] body.solution-modernization-page #approach .automation-workflow-timeline li::after {
    left: auto !important;
    right: calc(50% + 1.45rem) !important;
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
  }
}

html[lang="ar"] body.solution-modernization-page .solution-related-card h3::after {
  content: " ↖" !important;
}

/* ============================================================
   ARABIC MACHINE-VISION DETAIL — RELATED-SOLUTION ARROW
   Reverse the related-solution card arrow to follow RTL reading
   direction. Scoped only to the Arabic vision detail page.
   ============================================================ */
html[lang="ar"] body.solution-vision-page .solution-related-card h3::after {
  content: " ↖" !important;
}

/* ============================================================
   ARABIC CUSTOM MACHINERY DETAIL — RTL DIRECTIONAL ARROWS v1
   Mirror the five-stage process line for the RTL stage order, reverse
   the inline project-link arrow, and reverse related-solution arrows.
   Scoped only to the Arabic custom-machinery engineering detail page.
   ============================================================ */
@media (min-width: 1001px) {
  html[lang="ar"] body.solution-custom-machinery-page .custom-engineering-timeline::before {
    left: calc(20% - 2.15rem) !important;
    right: 1.425rem !important;
    background: linear-gradient(270deg, rgba(8,126,172,.35) 0%, #08A8D2 62%, #E1B43A 100%) !important;
  }
}

html[lang="ar"] body.solution-custom-machinery-page .solution-related-card h3::after {
  content: " ↖" !important;
}



/* ============================================================
   ARABIC BOOK SORTING DETAIL — DIRECTIONAL ARROWS v1
   Reverse the inline project link and related-solution arrows for RTL.
   Scoped only to the Arabic book-sorting detail page.
   ============================================================ */
html[lang="ar"] body.solution-book-sorting-page .book-sorter-inline-link span[aria-hidden="true"] {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
}

html[lang="ar"] body.solution-book-sorting-page .solution-related-card h3::after {
  content: " ↖" !important;
}

/* ============================================================
   ARABIC ALL SOLUTION DETAIL PAGES — RELATED CARD ARROWS
   Apply the left-pointing arrow consistently to every related solution
   card, including standard cards and custom SCADA/RFID related grids.
   Scoped to the related section of Arabic detail pages only.
   ============================================================ */
html[lang="ar"] body.solution-detail-page #related .solution-capability h3::after {
  content: " ↖" !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Arabic homepage solution cards: keep every wrapped line aligned to the RTL edge. */
html[lang="ar"] body.homepage-header-pilot .solutions-v2 .solutions-v2__card h3,
html[lang="ar"] body.homepage-header-pilot .solutions-v2 .solutions-v2__card p {
  direction: rtl;
  text-align: right;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

/* ============================================================
   ARABIC HEADER POSITION + SPACING PARITY — v6
   Robustly match the physical TR/EN header frame without forcing
   arbitrary widths on Arabic labels. Logo and language control share
   the same outer insets as the reference headers; nav labels use natural
   widths with one consistent flex gap. Arabic text remains RTL.
   ============================================================ */

/* Desktop: use the same viewport frame and balanced navigation gap as TR/EN. */
@media (min-width: 1351px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    display: flex !important;
    direction: ltr !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(1rem, 1.35vw, 1.45rem) !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(190px, 13vw, 210px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  /* Natural label widths avoid uneven apparent spaces caused by fixed slots. */
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5) {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.solution-language-switch,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.solution-language-switch {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }
}

/* Homepage tablet: follow the same equal-column treatment as TR/EN. */
@media (min-width: 769px) and (max-width: 1350px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: flex !important;
    direction: ltr !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child {
    flex: 1 1 0% !important;
    min-width: clamp(190px, 13vw, 210px) !important;
    margin: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5) {
    flex: 1 1 0% !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: center !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.solution-language-switch {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Detail headers use the same compact spacing as the shared TR/EN detail header. */
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 clamp(1rem, 2.4vw, 2rem) !important;
    display: flex !important;
    direction: ltr !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(0.35rem, 0.85vw, 0.75rem) !important;
  }

  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:first-child {
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
    min-width: clamp(190px, 13vw, 210px) !important;
  }

  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.solution-language-switch {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* ============================================================
   ARABIC HEADER PARITY — v7
   Final layout override: use the same physical header frame as TR/EN.
   A dedicated flexible spacer separates the logo from the nav cluster;
   the four Arabic labels have natural widths and identical column gaps.
   The grid direction is LTR for physical placement only; each Arabic
   label retains RTL text direction and right alignment.
   ============================================================ */
@media (min-width: 1351px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 10vw !important;
    display: grid !important;
    direction: ltr !important;
    align-items: center !important;
    justify-content: stretch !important;
    grid-auto-flow: row !important;
    grid-template-columns: clamp(190px, 13vw, 210px) minmax(0, 1fr) max-content max-content max-content max-content max-content !important;
    column-gap: clamp(1rem, 1.35vw, 1.45rem) !important;
    row-gap: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(2),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(2) {
    grid-column: 3 !important;
  }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(3),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(3) {
    grid-column: 4 !important;
  }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(4),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(4) {
    grid-column: 5 !important;
  }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(5),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(5) {
    grid-column: 6 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5),
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5) {
    display: inline-block !important;
    justify-self: end !important;
    align-self: center !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.solution-language-switch,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a.solution-language-switch {
    grid-column: 7 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: max-content !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child img {
    display: block !important;
    width: clamp(190px, 13vw, 210px) !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
}

/* Tablet homepage: same order and equal-width menu slots as TR/EN. */
@media (min-width: 769px) and (max-width: 1350px) {
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: clamp(190px, 13vw, 210px) repeat(4, minmax(0, 1fr)) max-content !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(2),
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(3),
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(4),
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(5) {
    justify-self: stretch !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(2) { grid-column: 2 !important; }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(3) { grid-column: 3 !important; }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(4) { grid-column: 4 !important; }
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:nth-child(5) { grid-column: 5 !important; }

  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > .language-menu,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.site-language-switcher,
  html[lang="ar"] body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.solution-language-switch {
    grid-column: 6 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 0.45rem 0 0 !important;
    width: max-content !important;
    min-width: 0 !important;
  }
}

/* Tablet detail pages retain the TR/EN natural-width menu grouping, with a
   shared physical inset and one compact, uniform gap between each item. */
@media (min-width: 769px) and (max-width: 1350px) {
  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 clamp(1rem, 2.4vw, 2rem) !important;
    display: flex !important;
    direction: ltr !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(0.35rem, 0.85vw, 0.75rem) !important;
  }

  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:first-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;
  }

  html[lang="ar"] body.solution-detail-page > header > div.nav-bar > div.navigation > a:nth-child(n+2):nth-child(-n+5) {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}