/** * RTL (Right-to-Left) Styles for Arabic Language * Optimized for Marcom Attend Design System * * IMPORTANT: dir="rtl" is on the tag, so selectors use [dir="rtl"] * * NOTE: Pricing, FAQ, and component-level RTL overrides live in custom.css * alongside their base rules. This file handles structural/layout RTL only. */ /* ========================================== BASE ========================================== */ [dir="rtl"] body { direction: rtl; text-align: right; } /* ========================================== BOOTSTRAP MARGIN REVERSALS ========================================== */ [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } [dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } [dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; } [dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } [dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } [dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-lg-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .justify-content-sm-end { justify-content: flex-start !important; } /* ========================================== HEADER & NAVIGATION ========================================== */ [dir="rtl"] .navbar-logo, [dir="rtl"] .header-logo { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .main-nav { margin-right: auto; margin-left: 0; } [dir="rtl"] .nav-link { text-align: right; } [dir="rtl"] .header-btn { flex-direction: row-reverse; } [dir="rtl"] .offcanvas-info { left: 0; right: auto; transform: translateX(calc(-100% - 80px)); } [dir="rtl"] .offcanvas-info.show { transform: translateX(0); } [dir="rtl"] .offcanvas-close { left: 0; right: auto; } /* ========================================== LANGUAGE SWITCHER ========================================== */ [dir="rtl"] .language-switcher { margin-right: 15px; margin-left: 0; } [dir="rtl"] .language-switcher .dropdown-menu { right: auto; left: 0; } [dir="rtl"] .language-switcher .dropdown-toggle { flex-direction: row-reverse; } [dir="rtl"] .dropdown-item { text-align: right; } /* ========================================== HERO SECTION ========================================== */ [dir="rtl"] .hero-bg1 { right: auto; left: 0; transform: scaleX(-1); } [dir="rtl"] .hero-bg2 { left: auto; right: 0; transform: scaleX(-1); } [dir="rtl"] .hero-bg3 { transform: scaleX(-1); } /* ========================================== FORMS ========================================== */ [dir="rtl"] .form-label { text-align: right; } [dir="rtl"] .form-control, [dir="rtl"] .form-select { text-align: right; direction: rtl; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } [dir="rtl"] .btn-submit i { margin-right: 0; margin-left: 0.5rem; } /* ========================================== FOOTER ========================================== */ [dir="rtl"] .footer-links ul { padding-right: 0; list-style: none; } [dir="rtl"] .copy-right { text-align: right; } [dir="rtl"] .footer-lang-switcher { flex-direction: row-reverse; } [dir="rtl"] .footer-bottom .d-flex { flex-direction: row-reverse; } /* ========================================== MODALS ========================================== */ [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } [dir="rtl"] .modal-body { text-align: right; } [dir="rtl"] .modal-footer { flex-direction: row-reverse; } [dir="rtl"] #videoModal video { direction: ltr; } /* ========================================== NUMBERS — always LTR ========================================== */ [dir="rtl"] .stats-bar-number, [dir="rtl"] .amount, [dir="rtl"] .currency, [dir="rtl"] input[type="number"], [dir="rtl"] input[type="range"] { direction: ltr; } /* ========================================== ANIMATIONS ========================================== */ @media (min-width: 992px) { [dir="rtl"] .wow.slideInRight { animation-name: slideInLeft; } [dir="rtl"] .wow.slideInLeft { animation-name: slideInRight; } } /* ========================================== BACK TO TOP ========================================== */ [dir="rtl"] .back-to-top { left: auto; right: 15px; } /* ========================================== CODE BLOCKS — always LTR ========================================== */ [dir="rtl"] code, [dir="rtl"] pre { direction: ltr; text-align: left; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 768px) { [dir="rtl"] .language-switcher { margin-right: 10px; margin-left: 0; } [dir="rtl"] .footer-bottom .d-flex { flex-direction: column; text-align: right; } } @media print { [dir="rtl"] { direction: rtl; } }