/* ══════════════════════════════════════════ RTL + Arabic overrides for Nova TLT ══════════════════════════════════════════ */ /* ── 1. Hide Google Translate toolbar & floating widget ── */ .goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-menu-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-te-gadget, .goog-te-combo, iframe.skiptranslate, div.skiptranslate, .goog-te-spinner-pos { display: none !important; visibility: hidden !important; } body { top: 0 !important; } #google_translate_element { display: none !important; } /* ── 2. Language dropdown ── */ .nt-lang-wrap { position: relative; display: inline-flex; align-items: center; } .nt-lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #141414; border: 1px solid rgba(202,149,61,0.35); border-radius: 8px; min-width: 120px; z-index: 9999; padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .nt-lang-menu.is-open { display: block; } .nt-lang-option { display: block; padding: 9px 16px; color: rgba(255,255,255,0.8); font-size: 13px; text-decoration: none; cursor: pointer; transition: color 0.2s; font-family: inherit; letter-spacing: 0; } .nt-lang-option:hover, .nt-lang-option.is-active { color: #CA953D; } /* ── 3. CRITICAL: zero letter-spacing in RTL (fixes garbled Arabic) ── */ [dir="rtl"], [dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; word-spacing: 0 !important; } /* ── 4. Arabic font for ALL elements ── */ [dir="rtl"], [dir="rtl"] * { font-family: 'Tajawal', sans-serif !important; } /* ── 5. Header RTL layout ── dir="rtl" on makes flex row flow right→left naturally. Do NOT add row-reverse here — that cancels out RTL and produces LTR visual order. */ /* ── 5b. Gfeat heading: tighter line-height for Arabic ── */ [dir="rtl"] .gfeat-heading { line-height: 1.2 !important; } /* ── 5c. text-hover: hide the duplicate hover span in RTL (no CSS-clip hover trick needed) ── */ [dir="rtl"] .text-hover__elem-2 { display: none !important; } /* ── 6. Nav dropdown: re-center for RTL ── */ [dir="rtl"] .nav-drop__panel { left: auto !important; right: 50% !important; transform: translateX(50%) translateY(-8px) !important; } [dir="rtl"] .nav-drop--open .nav-drop__panel { transform: translateX(50%) translateY(0) !important; } [dir="rtl"] .nav-drop__panel::after { left: auto !important; right: 50% !important; transform: translateX(50%) !important; } [dir="rtl"] .nt-lang-menu { right: 0; left: auto; } /* ── 7. Phone / email links stay LTR (direction identifiers) ── */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .contact-phone, [dir="rtl"] .phone-num { direction: ltr !important; unicode-bidi: isolate !important; display: inline-block; } /* ── 8. Footer RTL ── text-align and link alignment handled by global [dir="rtl"] rule */ /* ── 9. Section flex rows ── RTL flex row already flows right→left; no row-reverse needed */ /* ── 10. Icon + text pairs ── RTL flex row handles ordering naturally */ /* ── 11. Form inputs ── */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* Email/phone inputs stay LTR so addresses render correctly */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { direction: ltr !important; text-align: left !important; } /* ── 12. General text alignment ── */ [dir="rtl"] { text-align: right; } [dir="rtl"] li { text-align: right; } /* ── 13. Grid sections: swap column order for RTL visual reading order ── CSS grid ignores dir="rtl" for column order; use order to put text first (right) */ [dir="rtl"] .gfeat-inner .gfeat-text { order: 2; } [dir="rtl"] .gfeat-inner .gfeat-globe-wrap { order: 1; } /* ── 14. Mobile header: row-reverse cancels RTL; reset to row so dir=rtl handles order naturally ── */ @media (max-width: 1024px) { [dir="rtl"] .header__actions { flex-direction: row !important; } [dir="rtl"] .header__menu { align-items: center !important; text-align: center !important; } } /* ── 15. FAQ: text right, icon on left (natural RTL flex — last child goes left) ── */ [dir="rtl"] .faq-item__btn { text-align: right; } /* ── 16. Testimonials: right-align all text ── */ [dir="rtl"] .testi-card__text, [dir="rtl"] .testi-card__name, [dir="rtl"] .testi-card__role { text-align: right; } [dir="rtl"] .testi-card__author { justify-content: flex-start; } /* Stars: keep LTR order (decorative, don't reverse) */ [dir="rtl"] .testi-card__stars { direction: ltr; display: inline-block; }