/* ═══════════════════════════════════════════ VISIO | فيسيو — RTL & Arabic Typography Activated when is set ═══════════════════════════════════════════ */ /* ── Arabic Font Import ── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); /* ── Arabic Typography: Applied via body.lang-ar ── */ body.lang-ar { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; letter-spacing: 0 !important; /* Arabic doesn't use letter-spacing */ } /* Map headings to Cairo ExtraBold for a sharp, corporate tech look */ body.lang-ar .h1, body.lang-ar .h2, body.lang-ar .h3, body.lang-ar .eyebrow, body.lang-ar .nav-link, body.lang-ar .btn-yellow, body.lang-ar .btn-outline, body.lang-ar .footer-col-title, body.lang-ar .section-label, body.lang-ar .cat-block-title, body.lang-ar .cat-block-eyebrow, body.lang-ar .mobile-section-label, body.lang-ar .cap-label, body.lang-ar [data-ar][style*="Rajdhani"], body.lang-ar h1, body.lang-ar h2, body.lang-ar h3 { font-family: 'Cairo', sans-serif !important; font-weight: 800 !important; letter-spacing: 0 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; line-height: 1.4 !important; } body.lang-ar .mb-10 { margin-bottom: 4.5rem !important; } body.lang-ar #room-tv-size { font-size: clamp(2.5rem, 5vw, 4rem) !important; white-space: nowrap !important; } body.lang-ar .lead, body.lang-ar p, body.lang-ar .footer-link, body.lang-ar .lang-btn, body.lang-ar .form-group label { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-weight: 400; letter-spacing: 0 !important; } /* ── RTL Global Layout ── */ [dir="rtl"] { text-align: right; } /* ── RTL Navigation ── */ [dir="rtl"] .nav-inner { flex-direction: row-reverse; } [dir="rtl"] .nav-right { flex-direction: row-reverse; } [dir="rtl"] .nav-menu { flex-direction: row-reverse; } [dir="rtl"] .nav-dropdown { left: auto; right: 50%; transform: translateX(50%); } [dir="rtl"] .nav-item:hover .nav-dropdown { transform: translateX(50%) translateY(0); } [dir="rtl"] .nav-dropdown a { flex-direction: row-reverse; text-align: right; } /* ── RTL Editorial Content ── */ [dir="rtl"] .editorial-content { text-align: right; } [dir="rtl"] .eyebrow { text-align: right; justify-content: flex-end !important; } /* Centered elements stay centered regardless of RTL */ [dir="rtl"] h1[style*="text-align: center"], [dir="rtl"] p[style*="text-align: center"], [dir="rtl"] div[style*="text-align: center"] { text-align: center !important; } /* ── RTL Glass Cards & Feature Grids ── */ [dir="rtl"] .glass-card { text-align: right; } /* ── RTL Models Grid ── */ [dir="rtl"] .custom-3x2-grid .glass-card, [dir="rtl"] .custom-4-row .glass-card { text-align: right; } /* ── RTL Footer ── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-grid > div { text-align: right; } [dir="rtl"] .footer-link { display: block; text-align: right; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } /* ── RTL Lang Toggle ── */ [dir="rtl"] .lang-toggle { flex-direction: row-reverse; } /* ── RTL Mobile Menu ── */ [dir="rtl"] .mobile-menu { text-align: right; } /* ── RTL Accordion ── */ [dir="rtl"] .accord-header { flex-direction: row-reverse; } /* ── RTL Divider and Section spacing — no changes needed (symmetric) ── */ /* ── Prevent overflow on RTL switch ── */ [dir="rtl"] body { overflow-x: hidden; } /* RTL Banner Background Mirroring */ body.lang-ar .aplus-banner > div:nth-child(1), body.lang-ar .aplus-banner > div:nth-child(2), body.lang-ar .climate-banner > div:nth-child(1), body.lang-ar .climate-banner > div:nth-child(2), body.lang-ar .visio-care-banner > div:nth-child(1), body.lang-ar .visio-care-banner > div:nth-child(2) { transform: scaleX(-1); } body.lang-ar .visio-care-content { padding-left: 20px !important; padding-right: 80px !important; } [dir="rtl"] .container { direction: rtl; } /* ── RTL Responsive: keep grids working at all breakpoints ── */ @media (max-width: 768px) { body.lang-ar .visio-care-content { padding-left: 20px !important; padding-right: 20px !important; } [dir="rtl"] .footer-grid { text-align: right; } [dir="rtl"] .footer-grid > div { align-items: flex-end; } }