/* ========================================================================== DESIGN CRUNCHERS UAE — RIGHT-TO-LEFT LAYER Loaded only when the page renders in Arabic (), from includes/header-styles.php. Nothing here affects the English site. Flexbox and grid are already direction-aware, so most of the layout mirrors itself once dir="rtl" is set. What does NOT flip on its own — and is what this file fixes — is: • float: left|right (3 rules) • text-align: left|right (9 rules + Bootstrap 4 classes) • margin-/padding-left|right (127 rules) • left:/right: on positioned elements (69 rules) • Bootstrap 4's physical .text-*-left/right classes used in the markup (Bootstrap 5's .ms-/.me-/.ps-/.pe- are logical and flip by themselves) ========================================================================== */ /* ---------- base ---------- */ [dir="rtl"] body{ direction: rtl; text-align: right; } /* Cairo already ships with the theme and reads far better than Outfit/Poppins for Arabic; keep the Latin faces for any English that remains inline. */ [dir="rtl"] body, [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"] a, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea{ font-family: 'Cairo', 'Outfit', 'Poppins', sans-serif !important; } /* Arabic sits lower in its em box; a touch more line-height stops clipping */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3{ line-height: 1.45 !important; } /* ---------- Bootstrap 4 physical text classes (the markup uses these) ------ */ [dir="rtl"] .text-left, [dir="rtl"] .text-sm-left, [dir="rtl"] .text-md-left, [dir="rtl"] .text-lg-left, [dir="rtl"] .text-xl-left{ text-align: right !important; } [dir="rtl"] .text-right, [dir="rtl"] .text-sm-right, [dir="rtl"] .text-md-right, [dir="rtl"] .text-lg-right, [dir="rtl"] .text-xl-right{ text-align: left !important; } [dir="rtl"] .float-left{ float: right !important; } [dir="rtl"] .float-right{ float: left !important; } /* ---------- contact page: the float-based two-column section --------------- */ [dir="rtl"] .section2-ccc .col2-ccc.first-ccc{ float: right; } [dir="rtl"] .section2-ccc .col2-ccc.last-ccc{ float: left; } [dir="rtl"] .sec2addr-ccc{ text-align: right; } [dir="rtl"] .sec2contactform-ccc input, [dir="rtl"] .sec2contactform-ccc textarea, [dir="rtl"] .form-control{ text-align: right; } /* ---------- navbar ---------- */ [dir="rtl"] .dcx-nav{ direction: rtl; } [dir="rtl"] .dcx-links > li > a{ text-align: right; } /* The chrome is written bilingually: an English label with an Arabic one beside or under it. In Arabic that renders as a duplicate, so drop whichever half is now redundant. Two different shapes exist, and they need opposite treatment: 1. Main nav links wrap English in -> hide that span and promote the Arabic .ar to full size. 2. The dropdown, the drawer and the CTA have the English as a BARE text node with the Arabic in a span. CSS cannot hide a bare text node, so those labels go through te() instead (see includes/header.php) and it is the Arabic span that becomes the duplicate to hide here. */ [dir="rtl"] .dcx-links .en{ display: none !important; } [dir="rtl"] .dcx-links .ar{ font-size: 15px !important; opacity: 1 !important; } /* shape 2 — the label itself is already Arabic, so drop the sub-label */ [dir="rtl"] .dcx-drop-ar, [dir="rtl"] .dcx-nav-quote .ar-cta, [dir="rtl"] .dcx-mobile .ar, [dir="rtl"] .dcx-m-title span[dir="rtl"]{ display: none !important; } /* top bar: the Arabic half is the one that stays */ [dir="rtl"] .uae-topbar-en, [dir="rtl"] .uae-topbar-sep{ display: none !important; } /* the caret on the Services dropdown points the other way in RTL */ [dir="rtl"] .dcx-links .fa-chevron-down, [dir="rtl"] .dcx-links .fa-angle-down{ transform: scaleX(-1); } /* ---------- hero ---------- */ [dir="rtl"] .dcx-hero-copy, [dir="rtl"] .dcx-hero-title, [dir="rtl"] .dcx-hero-sub{ text-align: right; } [dir="rtl"] .dcx-hero-flag, [dir="rtl"] .dcx-hero-ctas, [dir="rtl"] .dcx-hero-stats{ justify-content: flex-start; } /* the hero art is anchored to a side — swap it */ [dir="rtl"] .dcx-hero-reel{ left: auto; right: 4%; } /* ---------- pricing / package cards ---------- */ [dir="rtl"] .dcx-pk-card, [dir="rtl"] .dcx-pk-name, [dir="rtl"] .dcx-pk-price, [dir="rtl"] .dcx-pk-note{ text-align: right; } [dir="rtl"] .dcx-pk-feats li{ padding-right: 26px; padding-left: 0; } [dir="rtl"] .dcx-pk-feats li::before{ right: 0; left: auto; } [dir="rtl"] .dcx-pk-badge{ right: auto; left: 18px; } [dir="rtl"] .dcx-pk-per{ margin-right: 4px; margin-left: 0; } /* ---------- legal pages ---------- */ [dir="rtl"] .dcx-legal, [dir="rtl"] .dcx-legal h1, [dir="rtl"] .dcx-legal h2, [dir="rtl"] .dcx-legal p, [dir="rtl"] .dcx-legal li{ text-align: right; } [dir="rtl"] .dcx-legal ul{ padding-right: 22px; padding-left: 0; } /* ---------- footer ---------- */ [dir="rtl"] .footer_list ul, [dir="rtl"] .footer-content{ text-align: right; } [dir="rtl"] .footer_list ul{ padding-right: 0; } [dir="rtl"] .footer-iconz{ margin-left: 6px; margin-right: 0; } /* the presence heading and the tagline are each written as an English span plus an Arabic one; in Arabic the English half is a redundant duplicate */ [dir="rtl"] .dcx-presence-title .en{ display: none !important; } [dir="rtl"] .dcx-presence-title .ar{ font-size: 15px !important; } [dir="rtl"] .footer-content > p:not(.uae-footer-ar){ display: none; } [dir="rtl"] .uae-footer-ar{ font-size: 15px; opacity: 1; } /* ---------- section kickers (the little rule + label) ---------------------- */ [dir="rtl"] .team-txt{ flex-direction: row-reverse; } [dir="rtl"] .set_Universal_Headings{ text-align: center; } /* stays centred */ /* ---------- marquee ---------- */ /* the legacy scrolls the wrong way for Arabic; the tag has no CSS-only fix, so js/uae-modern.js flips the attribute. */ /* ---------- icons that imply direction ------------------------------------ */ [dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-chevron-right{ transform: scaleX(-1); } /* ---------- language switcher ---------- */ [dir="rtl"] .dcx-lang-switch{ margin-right: 0; margin-left: 4px; }