/* RTL overrides for the Arabic pilot (/ar). Loaded only when locale is Arabic - additive on top of styles.css, which is never modified directly. Every rule below is scoped with html[dir="rtl"] and only targets the directional declarations that actually affect the pilot page's components (header/nav/mega-menu, hero, who-we-are, stats, footer, etc). */ html[dir="rtl"] body { font-family: 'Cairo', 'Figtree', sans-serif; } /* Hero (home page): styles.css hardcodes physical text-align: left here, which doesn't flip under dir="rtl" on its own. justify-items: start and justify-content: flex-start (used elsewhere in this section) are already logical/direction-aware and correctly resolve to the right under RTL on their own - do not override those to "end"/"flex-end", that would push them back to the left. */ html[dir="rtl"] .hero-grid { text-align: right; } html[dir="rtl"] .hero-stat-box { right: auto; left: clamp(2rem, 5vw, 4rem); } /* Header / nav dropdown + mega-menu positioning */ html[dir="rtl"] .nav-dropdown .dropdown-toggle::after { left: auto; right: 0; } /* Excludes .mega-menu: that variant overrides position to fixed and left:50% + transform: translateX(-50%) to center itself on the viewport (not anchored to its toggle like the simple dropdowns below). Since .mega-menu elements still carry the .dropdown-menu class, an unscoped rule here would win on specificity over the mega-menu's own centering rule and push it off-center instead of leaving it centered. */ html[dir="rtl"] .dropdown-menu:not(.mega-menu) { left: auto; right: 0; } html[dir="rtl"] .mega-menu-close { left: auto; right: 0; } html[dir="rtl"] .service-dropdown .dropdown-menu { left: auto; right: 0; } html[dir="rtl"] .dropdown-menu a::before { left: auto; right: 0; } html[dir="rtl"] .lang-switch-menu { right: auto; left: 0; } html[dir="rtl"] .header-cta { margin-left: 0; margin-right: auto; } /* who-we-are */ html[dir="rtl"] .who-we-are-title { margin-left: 0; margin-right: 8rem; } @media (max-width: 960px) { html[dir="rtl"] .who-we-are-wrapper .who-we-are-title { margin-right: 0; } } /* stat counters */ html[dir="rtl"] .stat-item { text-align: right; } /* expertise feature cards (under "Why Resources") */ html[dir="rtl"] .feature-card { text-align: right; } /* hero CTA arrow */ html[dir="rtl"] .btn-arrow { margin-left: 0; margin-right: 0.45rem; } /* testimonials logo carousel fade edges */ html[dir="rtl"] .logo-carousel::before { left: auto; right: 0; } html[dir="rtl"] .logo-carousel::after { right: auto; left: 0; } /* work.php pagination: prev/next glyphs are plain "<-"/"->" text characters. Under RTL these buttons swap visual sides (prevPage ends up on the right, nextPage on the left, since DOM order flows start-to-end and start=right in RTL) - flip the glyphs themselves so the arrow still points toward where the button actually navigates. The click handlers are bound by id, so this is purely visual. */ html[dir="rtl"] #prevPage, html[dir="rtl"] #nextPage { display: inline-block; transform: scaleX(-1); } /* The project/lightbox modal's prev/next chevrons and the Experience timeline (below) are deliberately left un-mirrored: fixed left=previous, right=next is the conventional pattern for media browsers regardless of text direction, matching how most RTL sites treat photo/gallery navigation. */ /* Experience timeline: keep LTR on purpose. Its content is mostly proper nouns (client/project names), and main.js drives horizontal scrolling via raw scrollLeft/scrollBy({left}) - if this inherited dir="rtl" from , browsers would flip scrollLeft semantics and break the scroll buttons and drag-to-scroll, not just the visuals. */ html[dir="rtl"] .work-horizontal, html[dir="rtl"] .horizontal-timeline, html[dir="rtl"] .horizontal-timeline-track, html[dir="rtl"] .horizontal-timeline-wrapper { direction: ltr; text-align: left; } /* access-control.php hero scanner animation: the badge rests off to the physical right (position: absolute; right: -120px) and slides toward center when "scanning". Under RTL the badge should approach from the opposite side to match the mirrored page - flip the resting position to the left. The ":not(.scanning)" guard matters: .badge-holder.scanning already centers the badge via right:50% + translateX(50%) (a symmetric trick that lands in the same spot regardless of which side it's measured from, so it needs no override) - but since our selector's specificity (html[dir="rtl"] .badge-holder) beats .badge-holder.scanning's, an unguarded left:-120px here would keep pinning the badge off-screen during the scan animation instead of letting it travel to center. */ html[dir="rtl"] .badge-holder:not(.scanning) { right: auto; left: -120px; } @media (max-width: 768px) { html[dir="rtl"] .badge-holder:not(.scanning) { right: auto; left: -90px; } } @media (max-width: 480px) { html[dir="rtl"] .badge-holder:not(.scanning) { right: auto; left: -70px; } } /* accreditation.php "Curious about a specific feature?" dropdown: styles.css hardcodes physical text-align: left on the menu and each option row (the menu itself is centered via left:50%/transform, which is already direction-neutral, so only the text alignment needs flipping). Left uncorrected, wrapped Arabic option labels/descriptions would stay left-aligned inside an otherwise RTL page. */ html[dir="rtl"] .feature-select-menu, html[dir="rtl"] .feature-select-option { text-align: right; } /* e-invitations.php hero phone mockup: this card uses a 3D transform chain (transform-style: preserve-3d, rotateY/rotateX tilt). Under RTL, Chrome's hit-testing for elements inside a preserve-3d ancestor combined with dir="rtl" breaks down: a real click dispatched at the accept button's own computed center (getBoundingClientRect) lands on its container instead of the button (confirmed with page.mouse.click, not just a coordinate-math artifact - the identical test succeeds under LTR). Attempting to compensate by mirroring the tilt angle didn't fix it, so - matching the precedent already used for the Experience timeline's scrollLeft direction - the pragmatic fix is to keep this specific 3D component's internal layout direction LTR regardless of page locale. The Arabic text inside still renders as Arabic; only the box layout/flex ordering and hit-test geometry are pinned to the same (working) direction as the English page. */ html[dir="rtl"] .invite-hero-phone { direction: ltr; } /* visitors-registration.php hero tablet mockup: the "+966" country-code chip sits before the phone number inside a flex row (flag, code, number in DOM order), with a divider drawn via padding-right/border-right on the code chip so it appears between the code and the number that follows it. Under RTL the flex row's visual order reverses (number now renders to the code chip's left instead of its right), so a divider fixed to the right would end up facing the flag instead of the number - move it to the left so it still separates the code from the number. */ html[dir="rtl"] .reg-input-code { padding-right: 0; padding-left: 0.45rem; border-right: none; border-left: 1px solid rgba(255, 255, 255, 0.15); } /* radio-dispatch.php intro checkmark list: styles.css hardcodes physical padding-left on each
  • and left:0 on its ::before checkmark to reserve space for the mark before the text. Under RTL the text flows right-to-left, so the checkmark needs to sit before the text on the right instead. */ html[dir="rtl"] .intro-highlights li { padding-left: 0; padding-right: 1.8rem; } html[dir="rtl"] .intro-highlights li::before { left: auto; right: 0; } /* communicate.php "What We Help With" checkmark list: same physical padding-left/left:0 pattern as .intro-highlights above, unique to this page's own markup. */ html[dir="rtl"] .details-list li { padding-left: 0; padding-right: 1.5rem; } html[dir="rtl"] .details-list li::before { left: auto; right: 0; } /* communicate.php "Pro Tip" callout: the accent stripe is a physical border-left, drawn on the leading edge in LTR - move it to the leading edge (right) under RTL. */ html[dir="rtl"] .details-highlight { border-left: none; border-right: 3px solid #2ed573; } /* communicate.php contact form: each field is wrapped in a "> " terminal prompt glyph, absolutely positioned at the physical left with padding-left on the input/textarea reserving space for it. Under RTL the field's text renders right-aligned (inherited from dir="rtl"), so the prompt needs to sit on the right, with matching padding to keep the input text out from under it. */ html[dir="rtl"] .input-wrapper::before, html[dir="rtl"] .textarea-wrapper::before { left: auto; right: 0.2rem; } html[dir="rtl"] .write-input, html[dir="rtl"] .write-textarea { padding-left: 0.2rem; padding-right: 1.5rem; text-align: right; } /* The subject