/* exiloz-rtl.css — Arabic overrides. Loaded LAST, only on /ar/ pages (build-arabic.py appends it and sets ). Strategy (per explicit user direction): translate text only — do NOT mirror the page layout. Every header, nav, hero, card and footer position must stay exactly where it is on the English page; only the Arabic text itself reads right-to-left within its own box. dir="rtl" on is kept for accessibility/SEO metadata, but `direction: ltr` is restored on the body so flexbox/grid containers stop auto-reversing — then `direction: rtl` is re-applied narrowly to actual prose elements so Arabic glyphs join and flow correctly. */ /* ---- kill layout mirroring: dir="rtl" would otherwise reverse every flex/grid container's visual order (nav, header, hero grid, footer grid, button rows) — this cancels that at the root. ------------------------- */ [dir="rtl"] body { direction: ltr; } /* ---- re-apply RTL only to elements that actually hold Arabic prose, so the text reads naturally without moving its container. ---------------- */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] blockquote, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] dd, [dir="rtl"] dt, [dir="rtl"] figcaption, [dir="rtl"] summary, [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea { direction: rtl; text-align: right; } /* ---- Arabic typography ------------------------------------------------- */ [dir="rtl"] body, [dir="rtl"] .exz-services-page, [dir="rtl"] .exz-header, [dir="rtl"] .exz-footer, [dir="rtl"] .main-slider, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button, [dir="rtl"] select { font-family: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, "Geeza Pro", "Arabic Typesetting", "Dubai", sans-serif; } /* letter-spacing breaks Arabic letter joining — never apply it to Arabic. */ [dir="rtl"] * { letter-spacing: normal !important; } /* Arabic reads better with a touch more line-height in dense blocks. */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .exz-hero__text, [dir="rtl"] .main-slider__text { line-height: 1.9; } /* ---- forms / misc ------------------------------------------------------ */ [dir="rtl"] .exz-lang-switch i { transform: none; /* globe icon never mirrors */ } /* ========================================================================= HERO SECTIONS — explicit exception to the "no layout mirroring" rule above: on hero banners specifically, the photo should sit on the left and the text/CTA block on the right (the mirror image of the English hero), since that's where RTL reading naturally starts. Every other section of the page keeps its English position untouched. ========================= */ /* ---- homepage slider (.main-slider) ------------------------------------ */ /* The photo panel is RIGHT-anchored (right:0; width:63%) with solid navy filling the left — English text sits on that navy. The gradient below is already the horizontal mirror of the English one (100deg→260deg), but the photo panel was never flipped, so Arabic text (now on the right) landed on top of the photo. Flip the panel to the LEFT so the navy — and the Arabic text over it — lands on the right, mirroring the English hero exactly. */ [dir="rtl"] .main-slider .image-layer { right: auto !important; left: 0 !important; } [dir="rtl"] .main-slider .image-layer:before { background-image: linear-gradient(180deg, rgba(2,20,54,0) 62%, rgba(2,17,48,.55) 100%), linear-gradient(260deg, rgba(2,13,38,.94) 0%, rgba(3,20,56,.86) 40%, rgba(3,24,64,.54) 72%, rgba(3,22,60,.34) 100%) !important; } [dir="rtl"] .main-slider .swiper-slide:after { -webkit-mask-image: linear-gradient(260deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 34%, transparent 58%); mask-image: linear-gradient(260deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 34%, transparent 58%); } [dir="rtl"] .main-slider__content { margin-left: auto; text-align: right !important; } [dir="rtl"] .main-slider__btn-box { justify-content: flex-end; /* CTAs hug the right, with the text */ } [dir="rtl"] .main-slider__specialize li { padding-left: 0; padding-right: 24px; } [dir="rtl"] .main-slider__specialize li:before { left: auto; right: 2px; } [dir="rtl"] .main-slider__nav { right: auto !important; left: 120px !important; /* nav arrows move to the photo (left) side */ } /* ---- blog post banner (.page-header--news) ----------------------------- */ [dir="rtl"] .page-header.page-header--news::before { background: linear-gradient(270deg, rgba(2,18,47,.92) 0%, rgba(3,28,70,.82) 46%, rgba(5,34,82,.45) 78%, rgba(5,34,82,.2) 100%), linear-gradient(180deg, rgba(2,26,68,.06) 0%, rgba(2,26,68,.42) 100%); } [dir="rtl"] .page-header.page-header--news .page-header__inner { margin-left: auto; align-items: flex-end; } [dir="rtl"] .page-header.page-header--news .thm-breadcrumb { flex-direction: row-reverse; } /* ---- service / cluster / hub page banner (.svc-hero) -------------------- */ [dir="rtl"] .svc-hero::before { background: linear-gradient(270deg, rgba(2,18,47,.95) 0%, rgba(3,28,70,.88) 46%, rgba(5,34,82,.58) 78%, rgba(5,34,82,.34) 100%), linear-gradient(180deg, rgba(2,26,68,.1) 0%, rgba(2,26,68,.58) 100%); } [dir="rtl"] .svc-breadcrumb { flex-direction: row-reverse; } /* ---- two-column hub heroes (.exd-hero__grid, .exz-hero): swap the grid's visual order only — text right, photo left — DOM order is untouched. --- */ [dir="rtl"] .exd-hero__grid, [dir="rtl"] .exz-hero { direction: rtl; } /* ---- services hub hero (.svc-final-hero): desktop uses ABSOLUTE positioning (image pinned right, angled navy panel pinned left), so direction:rtl can't flip it — mirror the pins explicitly. Copy/CTA move to the right, image to the left, and the panel's angled clip flips to cut its left edge. Only the ≥1200px absolute layout is touched; ≤1199px is a stacked grid, left alone. */ @media (min-width: 1200px) { [dir="rtl"] .svc-final-hero__image { inset: 0 auto 0 0; /* image to the LEFT */ } [dir="rtl"] .svc-final-hero__panel { inset: 0 0 0 auto; /* navy panel to the RIGHT */ clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%); /* angle cuts left edge */ } [dir="rtl"] .svc-final-hero__panel:after { left: 5%; right: auto; box-shadow: inset 18px 0 #ffffff05; } [dir="rtl"] .svc-final-hero__copy { margin-left: auto; /* push the copy block to the right */ margin-right: clamp(50px, 5vw, 96px); /* ...then indent it from the right edge */ } } /* ========================================================================= SECTION HEADERS — a "__top-left" column holds the section kicker + heading (e.g. the homepage services block). Bootstrap columns don't auto-flip under the forced direction:ltr body, so the header stays pinned left while the cards below read right. Flip just those header rows to RTL so the heading lines up on the right, over the content. Scoped via :has to header rows — the card/content rows keep their order untouched. ======================= */ [dir="rtl"] .row:has([class*="__top-left"]) { direction: rtl; } /* the kicker + section title are
s, so they miss the prose RTL rule at the top of this file — align them right explicitly. */ [dir="rtl"] .section-sub-title-box, [dir="rtl"] .section-title.text-left { direction: rtl; text-align: right; } /* centered section headers (testimonials, FAQ): the generic prose rule right- aligns the

/

, which fights the centered kicker + layout — keep the heading centered so the whole block stays symmetric. */ [dir="rtl"] .section-title.text-center .section-title__title { text-align: center; } /* ---- "Why choose us" split (.why-choose-one): content pinned left, with the team photo + 6 decorative diamond shapes clustered on the right. Too many pieces to mirror one at a time (and easy to miss one → overlap), so mirror the whole section geometrically with scaleX, then counter-flip the readable parts — the text content and the photo image — so they aren't reversed. Result: content/cards land on the right, photo + diamonds on the left, an exact mirror of the English section at any width. Desktop only; below 992px the section stacks (shapes/photo hidden) and needs no mirroring. --------- */ @media (min-width: 992px) { [dir="rtl"] .why-choose-one { transform: scaleX(-1); } [dir="rtl"] .why-choose-one__left, [dir="rtl"] .why-choose-one-img img { transform: scaleX(-1); /* un-mirror the content + the team photo */ } }