/* =================================================================== rtl.css — RTL Overrides for Aeterna Arabic Page (index-ar.html) Load ONLY on index-ar.html, after all other stylesheets. KEY INSIGHT: Bootstrap 4's .row uses display:flex. With dir="rtl" on , browsers automatically reverse the flex row direction, so first DOM children appear on the RIGHT and last children appear on the LEFT. We use this natural behaviour for the header (logo goes RIGHT, menu goes LEFT). Where we need to KEEP LTR column order (philosophy, form), we explicitly set flex-direction: row. =================================================================== */ /* ======================= 1. TYPOGRAPHY / FONT ======================= */ body, h1, h2, h3, h4, h5, h6, p, span, a, li, button, label { font-family: 'Cairo', sans-serif; } input, select, textarea { font-family: 'Cairo', sans-serif; } /* ======================= 2. NAVIGATION The browser's natural RTL flex already places logo on RIGHT and menu-area on LEFT. We only need to fix the nav list items (floated) and their sub-menu alignment. ======================= */ /* Float nav list items to the RIGHT so they stack right-to-left */ .main-menu .navigation > li { float: right; } /* Re-apply first/last child zero-margin on the correct side */ .main-menu .navigation > li:first-child { margin-left: 24px; margin-right: 0; } .main-menu .navigation > li:last-child { margin-right: 24px; margin-left: 0; } /* Sub-menus open from the right edge of the parent item */ .main-menu .navigation > li > ul, .main-menu .navigation > li > .megamenu { left: auto; right: 0; } .main-menu .navigation > li > ul > li > ul { left: auto; right: 100%; } /* ======================= 3. LANGUAGE SWITCHER In RTL flex, this is the leftmost item in menu-area. margin-right creates the visual gap between it and the sidebar icon that sits to its right. ======================= */ .lang-switcher { margin-left: 0; margin-right: 15px; } /* ======================= 4. SEC-TITLE SUBTITLE DECORATIVE LINE In English the horizontal line sits to the LEFT of the text (:before, left:0, padding-left:42px). In Arabic (RTL) it should be to the RIGHT. ======================= */ .sec-title .sub-title { padding-left: 0; padding-right: 42px; } .sec-title .sub-title:before { left: auto; right: 0; } /* ======================= 5. SECTION 2 — PHILOSOPHY (about-style-four) Bootstrap RTL flex would put the image-column on the LEFT and content-column on the RIGHT. The user wants the image to remain on the RIGHT (matching the English design). Force LTR column order. ======================= */ .about-style-four .row { flex-direction: row; } /* With image staying on the RIGHT, keep the original image-box margins (ml_50 mr_30 pl_140) and image-2 at left:0 b:0 — no overrides needed. Only swap the content-box left margin for visual balance. */ .about-style-four .content-box.ml_100 { margin-left: 60px; } /* ======================= 6. SECTION 5 — WHY AETERNA (chooseus-style-two) Bootstrap RTL flex reversal puts the title-column on the RIGHT and the feature-boxes column on the LEFT. Swap directional margins so the internal spacing still looks balanced. ======================= */ .chooseus-style-two .sec-title.ml_100 { margin-left: 0; margin-right: 100px; } .chooseus-style-two .content-box.mr_100 { margin-right: 0; margin-left: 100px; } /* ======================= 7. SECTION 6 — CONSULTATION (consulting-style-two) — CRITICAL FIX Bug: the content-column (col-lg-6) in RTL naturally goes to the RIGHT 50% of the section. The .video-column is absolutely positioned at right:0, also covering the RIGHT 50%. They overlap, hiding all text. Fix: a) Move video-column to LEFT: right:auto, left:0 b) Move bg-color band to RIGHT side to cover the content area c) Swap content-box margin so it keeps space from the video on the left ======================= */ .consulting-style-two .video-column { right: auto; left: 0; } .consulting-style-two .bg-color { left: auto; right: 0; } /* content-box originally had mr_70 (space from right/video side). In RTL, content is on RIGHT and video is on LEFT, so we need space on the LEFT side instead. */ .consulting-style-two .content-box.mr_70 { margin-right: 0; margin-left: 70px; } /* ======================= 8. SECTION 7 — MATERIALS (bestselling-section) Bootstrap RTL reversal: image-column goes RIGHT, content-column goes LEFT. Swap ml_110 so the sec-title indent reads correctly within the left column. ======================= */ .bestselling-section .sec-title.ml_110 { margin-left: 0; margin-right: 110px; } /* ======================= 9. SECTION 8 — ABOUT (about-style-five) ======================= */ .about-style-five .author-info.mr_80 { margin-right: 0; margin-left: 80px; } /* ======================= 10. CONTACT SECTION (contact-style-two) — CRITICAL FIX Bug: Bootstrap RTL reversal puts the offset-lg-3 + col-lg-9 form column on the LEFT, where it overlaps the bg-layer kitchen image (also on left). The form content effectively disappears or misaligns. Fix: Force LTR column order so form stays on the RIGHT (same as English). The bg-layer kitchen image stays on LEFT, form is RIGHT. ======================= */ .contact-style-two .inner-container .row { flex-direction: row; } /* ======================= 11. FOOTER ======================= */ .main-footer .footer-widget.ml_170 { margin-left: 0; margin-right: 170px; } .main-footer .info-list li { direction: rtl; text-align: right; } /* ======================= 12. MOBILE MENU — slide from LEFT in RTL The hamburger icon is on the LEFT in RTL layout, so the menu panel should emerge from the LEFT side of the screen. ======================= */ .mobile-menu { right: auto; left: 0; padding-right: 0; padding-left: 30px; } /* Slide out to the left (hidden state) */ .mobile-menu .menu-box { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } /* Slide in from the left (visible state) */ .mobile-menu-visible .mobile-menu .menu-box { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } /* RTL text direction inside mobile menu */ .mobile-menu .menu-box, .mobile-menu .contact-info, .mobile-menu .nav-logo { text-align: right; direction: rtl; } /* ======================= 13. SIDEBAR / INFO PANEL Sidebar slides from the right — fine for RTL (it is on the right side, triggered by the icon). Just align text content RTL inside. ======================= */ .xs-sidebar-group .sidebar-textwidget, .xs-sidebar-group .content-inner { direction: rtl; text-align: right; } /* Icon + text pairs: icon on the right of the text line in RTL */ .xs-sidebar-group .content-inner .info-box .info li { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; } .xs-sidebar-group .content-inner .info-box .info li .icon { margin-left: 0; flex-shrink: 0; } /* ======================= 14. NICE-SELECT (custom dropdown plugin) ======================= */ .nice-select { direction: rtl; text-align: right; padding-left: 30px; padding-right: 18px; } .nice-select:after { right: auto; left: 12px; } .nice-select .list { direction: rtl; text-align: right; } .nice-select .option { text-align: right; } /* ======================= 15. FORM INPUTS ======================= */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea { direction: rtl; text-align: right; }