/* ========================================================================== Haya Al Tamayuz — Arabic / RTL layer Loaded LAST, only on the Arabic pages (). IMPORTANT — read before adding rules here. `dir="rtl"` already does most of the work natively: • flex `row` containers reverse their order automatically, • `text-align` defaults to right, • inline/logical properties resolve to the right-hand side. So DO NOT add `flex-direction: row-reverse` or blanket `text-align: right`. Doing that flips an already-flipped container a second time and puts it back into LTR order — which is precisely the bug this file used to have. What genuinely needs fixing here is only what the browser cannot flip: 1. typography (Arabic face, tracking), 2. hard-coded PHYSICAL offsets in the base theme (`left:` / `right:`), 3. hard-coded physical margins, 4. directional glyphs and gradients, 5. bidi isolation for Latin runs and numerals. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Typography -------------------------------------------------------------------------- */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .title, [dir="rtl"] .disc, [dir="rtl"] .pre { font-family: var(--font-arabic); } [dir="rtl"] p, [dir="rtl"] .disc { line-height: 1.95; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .title { line-height: 1.55; } /* Arabic is cursive and caseless. Positive tracking prises the glyphs apart and forces them into isolated forms; `text-transform` is meaningless. The base theme applies both in ~20 places, so both are disabled wholesale — there is no case where letter-spacing is correct for Arabic text. The matching cause on the JS side is the SplitText call in main.js, which splits to words rather than characters on RTL documents. */ [dir="rtl"], [dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: normal !important; text-transform: none !important; } /* -------------------------------------------------------------------------- 2. Bidi isolation -------------------------------------------------------------------------- */ /* Latin runs inside Arabic text: phone numbers, e-mail, ISO 9001, EFQM */ [dir="rtl"] .ltr-text { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: var(--font-secondary); letter-spacing: initial !important; } /* Odometer digits must not reorder */ [dir="rtl"] .counter.title, [dir="rtl"] .odometer, [dir="rtl"] .swiper-pagination-fraction { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .title-style-two.center .counter.title, [dir="rtl"] .single-counter .counter.title { display: inline-block; } /* -------------------------------------------------------------------------- 3. Hard-coded physical offsets in the base theme These are absolute `left:` / `right:` values, which the browser does not mirror. Everything below is a straight swap of the theme's own value. -------------------------------------------------------------------------- */ [dir="rtl"] .title-style-two .bg-content, [dir="rtl"] .rts-breadcrumb-area .title-area-left .bg-title { left: auto; right: -90px; } [dir="rtl"] .left-thumbnail-about-area-two .small-image { right: auto; left: -63px; } [dir="rtl"] .left-thumbnail-about-area-two .counter-about-area { left: auto; right: -75px; } [dir="rtl"] .thumbnail-business-area-right-two .small-thumbnail { left: auto; right: -100px; } /* Newsletter submit button is absolutely positioned at right: 0 */ [dir="rtl"] .footer-two .update-wrapper .email-footer-area button, [dir="rtl"] .email-footer-area button { right: auto; left: 0; } [dir="rtl"] .email-footer-area input { padding-right: 20px; padding-left: 70px; } /* Offcanvas sidebar slides in from `right: -100%` */ [dir="rtl"] .side-bar { right: auto; left: -100%; } [dir="rtl"] .side-bar.show { right: auto; left: 0; } [dir="rtl"] .side-bar .close-icon-menu { right: auto; left: 30px; } /* Scroll-progress widget */ [dir="rtl"] .progress-wrap { right: auto; left: 30px; } /* Mega-menu panels anchor from the left edge */ [dir="rtl"] .rts-mega-menu { left: auto; right: 0; } /* --- Slider navigation ---------------------------------------------------- The theme pins the banner arrows with physical offsets (next: right 120px, prev: left 120px). Under RTL both collapsed onto the same side. In RTL, "next" advances leftwards, so the pair is swapped outright. */ [dir="rtl"] .mySwiper-banner-two .swiper-button-next { right: auto; left: 120px; } [dir="rtl"] .mySwiper-banner-two .swiper-button-prev { left: auto; right: 120px; } @media only screen and (max-width: 1199px) { [dir="rtl"] .mySwiper-banner-two .swiper-button-next { left: 30px; } [dir="rtl"] .mySwiper-banner-two .swiper-button-prev { right: 30px; } } /* Swiper's own base CSS also pins .swiper-button-* absolutely inside any .swiper it initialises. Reset those so the theme/flex rules win. */ [dir="rtl"] .swiper-button-next, [dir="rtl"] .swiper-button-prev { --swiper-navigation-sides-offset: 10px; } /* Arrow pairs that sit inline in a flex row (testimonials, project header) are already reordered by dir=rtl; they only need their glyphs turned. */ /* -------------------------------------------------------------------------- 4. Hard-coded physical margins The markup already uses the mirrored spacing utilities (pr--50 etc.); these are the theme's own baked-in values that have no class to swap. -------------------------------------------------------------------------- */ [dir="rtl"] .footer-two .footer-one-single-wized .quick-link-inner .links.margin-left-70 { margin-left: 0; margin-right: 70px; } [dir="rtl"] .footer-two .margin-left-65 { margin-left: 0; margin-right: 65px; } [dir="rtl"] .footer-one-single-wized.mid-bg { margin: -40px 0 0 30px; } [dir="rtl"] .appoinment-thumbnail { margin-left: 0; margin-right: -30px; } [dir="rtl"] .rts-btn.ml--20, [dir="rtl"] .menu-btn.ml--20 { margin-left: 0; margin-right: 20px; } [dir="rtl"] .haya-lang-switch { margin-left: 0; margin-right: 14px; } [dir="rtl"] .header-top-one-wrapper .haya-lang-switch { margin: 0 18px 0 0; } [dir="rtl"] .menu-thumb.pl--20 { padding-left: 0; padding-right: 20px; } [dir="rtl"] .header-one .nav-area { margin-right: 0; margin-left: 80px; } [dir="rtl"] .testimonials-main-wrapper-two .right-content-testimonials { padding-left: 0; padding-right: 30px; } [dir="rtl"] .footer-two .footer-one-single-wized .quick-link-inner .links li a i { margin-right: 0; margin-left: 12px; } @media only screen and (max-width: 767px) { [dir="rtl"] .footer-two .footer-one-single-wized .quick-link-inner .links.margin-left-70 { margin-right: 0; } [dir="rtl"] .testimonials-main-wrapper-two .right-content-testimonials { padding-right: 0; } } @media only screen and (max-width: 1199px) { [dir="rtl"] .left-thumbnail-about-area-two .small-image { left: 15px; } [dir="rtl"] .left-thumbnail-about-area-two .counter-about-area { right: auto !important; left: -50px !important; } [dir="rtl"] .thumbnail-business-area-right-two .small-thumbnail { right: 0; } } @media only screen and (max-width: 991px) { [dir="rtl"] .footer-two .margin-left-65, [dir="rtl"] .footer-two .footer-one-single-wized .quick-link-inner .links.margin-left-70 { margin-right: 10px; } [dir="rtl"] .appoinment-thumbnail { margin-right: 0; } } /* -------------------------------------------------------------------------- 5. Directional glyphs and artwork Font Awesome arrows point one way and must be turned around; decorative shapes read better mirrored. -------------------------------------------------------------------------- */ [dir="rtl"] .swiper-button-next i, [dir="rtl"] .swiper-button-prev i, [dir="rtl"] .arrow-right i, [dir="rtl"] .quick-link-inner .links li a i, [dir="rtl"] .mega-menu-item.with-list li a i, [dir="rtl"] .single-categories li a i, [dir="rtl"] .email-footer-area button i { transform: scaleX(-1); } [dir="rtl"] .rts-banner-area-two .shape-area-start, [dir="rtl"] .rts-about-area-two .shape-area .one, [dir="rtl"] .rts-about-area-two .shape-area .two { transform: scaleX(-1); } /* Gradients are directional and do not mirror on their own */ [dir="rtl"] .rts-banner-area-two::after { background: linear-gradient(270deg, rgba(7, 58, 94, .88) 0%, rgba(11, 75, 121, .72) 45%, rgba(11, 75, 121, .28) 100%); } [dir="rtl"] .haya-page-hero { background-image: linear-gradient(270deg, rgba(7, 58, 94, .94) 0%, rgba(11, 75, 121, .80) 100%), url(../images/banner/24.webp); } /* -------------------------------------------------------------------------- 6. The few places the theme hard-codes `text-align: left` (a blanket right-align is NOT needed — rtl already defaults to right) -------------------------------------------------------------------------- */ [dir="rtl"] .banner-inner-two-content, [dir="rtl"] .cta-style-two-area, [dir="rtl"] .title-style-two.center, [dir="rtl"] .title-area-client-client { text-align: center; } [dir="rtl"] .single-input input, [dir="rtl"] .single-input textarea, [dir="rtl"] .haya-select, [dir="rtl"] .email-footer-area input, [dir="rtl"] .search-input-area .search-input { text-align: right; }