/* --------------------------------------------------------------- Arabic / right-to-left layer. Loaded only when , so the English site is untouched. The base template is written with physical left/right properties, so this file mirrors the ones that matter rather than rewriting the stylesheet. --------------------------------------------------------------- */ @font-face { font-family: 'Tajawal'; src: url('../font/Tajawal-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../font/Tajawal-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../font/Tajawal-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ---- typography ------------------------------------------------ */ [dir='rtl'] body, [dir='rtl'] p, [dir='rtl'] a, [dir='rtl'] span, [dir='rtl'] li, [dir='rtl'] label, [dir='rtl'] input, [dir='rtl'] textarea, [dir='rtl'] button, [dir='rtl'] .tf-btn, [dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4, [dir='rtl'] h5, [dir='rtl'] h6 { font-family: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* Arabic has no upper case; letter-spacing hurts joined script badly */ [dir='rtl'] * { letter-spacing: normal !important; text-transform: none !important; } /* Arabic glyphs need a little more room vertically than the Latin faces */ [dir='rtl'] body { line-height: 1.85; } [dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { line-height: 1.45; } /* ---- global direction ------------------------------------------ */ [dir='rtl'] body { direction: rtl; text-align: right; } [dir='rtl'] .text-center, [dir='rtl'] .heading-section.text-center, [dir='rtl'] .section-head { text-align: center; } /* Keep phone numbers, emails and prices running LTR. Without this the bidi algorithm reorders "+971 50 905 8868" into "8868 905 50 971+". */ [dir='rtl'] .phone, [dir='rtl'] .number-phone, [dir='rtl'] a[href^='tel:'], [dir='rtl'] a[href^='mailto:'], [dir='rtl'] a[href*='wa.me'], [dir='rtl'] .price, [dir='rtl'] .card-price { direction: ltr; unicode-bidi: embed; display: inline-block; } /* ---- header / navigation --------------------------------------- */ [dir='rtl'] .main-nav ul, [dir='rtl'] .mobile-main-nav ul { padding-right: 0; } [dir='rtl'] .main-nav > ul > li { margin-left: 34px; margin-right: 0; } [dir='rtl'] .header-inner, [dir='rtl'] .header .wrap-header { flex-direction: row-reverse; } [dir='rtl'] .sub-menu, [dir='rtl'] .dropdown-menu { left: auto; right: 0; text-align: right; } /* the language switcher sits at the end of the nav in both directions */ .nav-lang { display: inline-flex; align-items: center; } .nav-lang .lang-switch { border: 1px solid rgba(245, 215, 143, 0.5); border-radius: 999px; padding: 5px 15px; color: #f5d78f; font-size: 13px; line-height: 1.6; white-space: nowrap; transition: background 0.25s, color 0.25s; } .nav-lang .lang-switch:hover { background: #f5d78f; color: #141414; } /* ---- content blocks -------------------------------------------- */ [dir='rtl'] .heading-section .divider, [dir='rtl'] .wg-location.style-split .heading-section .divider { margin-right: 0; margin-left: auto; transform: scaleX(-1); } [dir='rtl'] .wg-location.style-split { padding: 0 clamp(24px, 6vw, 130px) 0 0; flex-direction: row-reverse; } [dir='rtl'] .wg-location.style-split .content { text-align: right; padding: 72px 0 72px clamp(24px, 6vw, 130px); } [dir='rtl'] .location-facts, [dir='rtl'] .location-actions { text-align: right; } [dir='rtl'] .tf-btn i, [dir='rtl'] .btn i { transform: scaleX(-1); } [dir='rtl'] ul, [dir='rtl'] ol { padding-right: 1.2em; padding-left: 0; } [dir='rtl'] .footer .footer-inner, [dir='rtl'] .footer-cl { text-align: right; } /* ---- forms ------------------------------------------------------ */ [dir='rtl'] input, [dir='rtl'] textarea, [dir='rtl'] select { text-align: right; direction: rtl; } [dir='rtl'] input[type='tel'], [dir='rtl'] input[type='email'] { text-align: left; direction: ltr; } /* ---- carousels -------------------------------------------------- Swiper handles RTL itself when the container is dir="rtl"; stop the theme's own arrow offsets from fighting it. */ [dir='rtl'] .swiper-button-next, [dir='rtl'] .swiper-button-prev { transform: scaleX(-1); }