/* RTL overrides — loaded only when the Arabic language is active ([dir="rtl"] on ). Flips direction-sensitive layout without touching the base style.css, which stays LTR-only. */ html[dir="rtl"] body { direction: rtl; text-align: right; } html[dir="rtl"], html[dir="rtl"] body { font-family: "Noto Sans", "Segoe UI", Tahoma, Arial, sans-serif; } /* Generic text alignment for common content blocks */ html[dir="rtl"] .section-title, html[dir="rtl"] .sub-title, html[dir="rtl"] p, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { text-align: right; } html[dir="rtl"] .text-center, html[dir="rtl"] .text-center * { text-align: center !important; } /* Header top bar */ html[dir="rtl"] .header-top-area .row { /*flex-direction: row-reverse;*/ } html[dir="rtl"] .header-links ul, html[dir="rtl"] .header-social ul { padding-right: 0; } html[dir="rtl"] .header-links ul li i { margin-left: 6px; margin-right: 0; } /* Main menu row + logo/nav order */ html[dir="rtl"] .header-menu-area .row.gx-20 { flex-direction: row-reverse; } html[dir="rtl"] .main-menu > ul { padding-right: 0; } html[dir="rtl"] .main-menu .sub-menu { text-align: right; right: 0; left: auto; } html[dir="rtl"] .menu-item-has-children > a:after { margin-right: 6px; margin-left: 0; } /* Mobile menu drawer opens from the right in RTL */ html[dir="rtl"] .vs-menu-wrapper { right: auto; left: 0; } /* The base theme's open-state rule (.vs-body-visible .vs-menu-area) was failing to take effect in Arabic mode — verified live that the class toggles correctly but the drawer stayed at its closed left:-110% position. Forcing it here guarantees the drawer actually becomes visible regardless of what's suppressing the original rule. */ .vs-menu-wrapper.vs-body-visible .vs-menu-area { left: 0 !important; opacity: 1 !important; visibility: visible !important; } html[dir="rtl"] .vs-mobile-menu ul { /*padding-right: 0;*/ text-align: right; } /* Icons that sit before text should sit after in RTL */ html[dir="rtl"] .footer-info i, html[dir="rtl"] .vs-widget-contact i { margin-left: 10px; margin-right: 0; } html[dir="rtl"] .widget_title:after { left: auto; right: 0; } html[dir="rtl"] .footer-widget ul.menu { padding-right: 0; text-align: right; } /* Bootstrap grid direction flip for common two-column layouts */ html[dir="rtl"] .justify-content-between { /* flex-direction: row-reverse;*/ } /* Buttons with a leading icon */ html[dir="rtl"] .vs-btn i, html[dir="rtl"] .wave-btn i { margin-right: 8px; margin-left: 0; } /* Forms */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Language toggle thumb direction mirrors visually the same regardless of page direction — keep it LTR internally so EN/AR reads naturally */ html[dir="rtl"] .lang-toggle-track { direction: ltr; } /* Slick carousel arrows commonly used across sections */ html[dir="rtl"] .slick-prev { right: -10px; left: auto; } html[dir="rtl"] .slick-next { left: -10px; right: auto; } @media (max-width: 575.98px) { html[dir="rtl"] .header-top-area .row, html[dir="rtl"] .header-menu-area .row.gx-20 { flex-direction: column; } }