/* ========================================= RTL (Arabic) Layout Overrides Applied when ========================================= */ /* --- Base Direction --- */ html[dir="rtl"] body { font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, sans-serif; direction: rtl; text-align: right; } /* --- Typography --- */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] div, html[dir="rtl"] label, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, sans-serif; } /* --- Navigation --- */ /* The nav uses float-based clearfix, so reverse order via float:right */ html[dir="rtl"] #pbmit-top-menu > li { float: right; } html[dir="rtl"] #pbmit-top-menu > li > a { padding-right: 20px; padding-left: 20px; } /* Dropdown submenus: open from right side */ html[dir="rtl"] #pbmit-top-menu .dropdown ul, html[dir="rtl"] .pbmit-header-main-menu > ul > li > ul, html[dir="rtl"] .pbmit-header-main-menu > ul > li:hover > ul { left: auto; right: 0; text-align: right; } html[dir="rtl"] #pbmit-top-menu .dropdown ul li a { text-align: right; } html[dir="rtl"] .pbmit-right-box { flex-direction: row-reverse; } /* --- Logo --- */ html[dir="rtl"] .pbmit-header-content { flex-direction: row-reverse; } /* --- Breadcrumb separator arrow --- */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\276F"; transform: scaleX(-1); display: inline-block; } /* --- Flex containers --- */ html[dir="rtl"] .d-flex:not(.flex-column):not(.flex-column-reverse) { flex-direction: row-reverse; } /* Undo for elements that should NOT flip */ html[dir="rtl"] .swiper-wrapper, html[dir="rtl"] .owl-carousel, html[dir="rtl"] .pbmit-social-links { flex-direction: row; } /* --- Margins and Paddings --- */ html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } /* --- Icons before text become icons after text --- */ html[dir="rtl"] .pbmit-icon-list-icon { margin-right: 0; margin-left: 10px; } html[dir="rtl"] .tick-list li::before, html[dir="rtl"] .pbmit-list li::before { margin-right: 0; margin-left: 10px; float: right; } /* --- Contact info --- */ html[dir="rtl"] .pbmit-contact-info-list li { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .pbmit-contact-info-list .pbmit-icon { margin-right: 0; margin-left: 15px; } /* --- Footer --- */ html[dir="rtl"] .pbmit-footer-widget { text-align: right; } html[dir="rtl"] .pbmit-social-links { justify-content: flex-start; } /* --- Form inputs --- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* --- Mobile menu (panel is .pbmit-navbar > div) --- */ /* Slide from LEFT in RTL — handled in style.css with !important */ /* Kept here for reference; style.css overrides take precedence */ html[dir="rtl"] .pbmit-navbar > div { right: auto; left: 0; transform: translateX(-100%); box-shadow: 6px 0 32px rgba(0,0,0,0.18); } html[dir="rtl"] .pbmit-navbar > div.active { transform: translateX(0); } html[dir="rtl"] .pbmit-navbar > div .closepanel { right: auto; left: 16px; } /* --- Back to top button --- */ html[dir="rtl"] .back-to-top { right: auto; left: 30px; } /* --- Sticky header row alignment --- */ html[dir="rtl"] .pbmit-header-main { flex-direction: row-reverse; } /* --- Toggle buttons in RTL context --- */ html[dir="rtl"] .lang-toggle-btn, html[dir="rtl"] .theme-toggle-btn, html[dir="rtl"] .morph-toggle, html[dir="rtl"] .lang-pill-toggle { margin-right: 0; margin-left: 8px; } /* --- Service/feature boxes --- */ html[dir="rtl"] .pbmit-service-style-5 .pbmit-service-icon { float: right; margin-right: 0; margin-left: 20px; } /* --- Section title alignment --- */ html[dir="rtl"] .pbmit-heading-subheading, html[dir="rtl"] .pbmit-title-heading { text-align: right; } html[dir="rtl"] .pbmit-heading-subheading.text-center, html[dir="rtl"] .pbmit-title-heading.text-center { text-align: center; } /* --- Counter/stat boxes --- */ html[dir="rtl"] .pbmit-fld-contents { flex-direction: row-reverse; } /* --- Gallery items --- */ html[dir="rtl"] .pbmit-portfolio-style-1 .pbmit-portfolio-content { text-align: right; } /* --- Table of contents / ordered lists --- */ html[dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } html[dir="rtl"] ul { padding-right: 0; padding-left: 0; }