/* ============================================ Language Switcher (direction-neutral) ============================================ */ .lang-switcher { display: inline-flex; align-items: center; gap: 4px; margin-left: 16px; line-height: 80px; } .lang-btn { background: none; border: none; color: var(--heading-color); font-weight: 600; font-size: 14px; cursor: pointer; padding: 2px 5px; line-height: 1; transition: color 0.3s; font-family: inherit; } .lang-btn:hover { color: var(--main-color); } .lang-btn.active { color: var(--main-color); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lang-divider { color: #ccc; font-size: 14px; line-height: 80px; } .lang-btn[data-lang="ar"] { font-family: 'Cairo', sans-serif; } /* Language switcher: lives in hamburger menu on mobile, in navbar on desktop */ .lang-switcher-mobile { display: none; /* Hidden — lang switcher moved into hamburger menu on mobile */ } @media only screen and (min-width: 992px) { .lang-switcher-desktop { display: inline-flex; } } @media only screen and (max-width: 991px) { /* Show lang switcher inside the hamburger collapse menu */ .lang-switcher-desktop { display: flex !important; margin-left: 0; line-height: 1; padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .lang-divider { line-height: 1.5; } } /* ============================================ RTL (Right-to-Left) Overrides Active when ============================================ */ /* --- FONTS --- */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button, [dir="rtl"] .btn { font-family: 'Cairo', sans-serif; } /* --- LINE HEIGHT (Arabic needs more breathing room) --- */ [dir="rtl"] body { line-height: 1.9; } [dir="rtl"] p { line-height: 1.9; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.6; } /* --- NAVBAR --- */ [dir="rtl"] .navbar-area .nav-container.navbar-bg { padding-left: 0; padding-right: 40px; } [dir="rtl"] .navbar-area .nav-container.navbar-bg:after { left: auto; right: 15px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav { text-align: right; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li + li { margin-left: 0; margin-right: 17px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav > li { margin-right: 0; margin-left: 12px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children { padding-right: 0; padding-left: 14px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:before { right: auto; left: 3px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:after { right: auto; left: -1px; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a:before { left: auto; right: 17px; content: '\f053'; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li:hover a { padding: 10px 30px 10px 20px; } [dir="rtl"] .navbar-nav { margin-right: 0; margin-left: -30px; } [dir="rtl"] .menu-open { margin-right: 0; margin-left: 0; } [dir="rtl"] .lang-switcher { margin-left: 0; margin-right: 16px; } /* Mobile navbar RTL */ @media only screen and (max-width: 991px) { [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li { text-align: right; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li + li { margin-right: 0; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav > li { margin-left: 0; } [dir="rtl"] .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:before { right: auto; left: 20px; } /* Hamburger on the LEFT in RTL (logo is on the right) */ [dir="rtl"] .toggle-btn { left: 0; right: auto; } /* Logo at the right edge in RTL mobile (flex order) */ [dir="rtl"] .logo { order: -1; } /* Push search icon away from the left-side hamburger */ [dir="rtl"] .nav-right-part { margin-right: 0; margin-left: 60px; } /* Lang-switcher inside hamburger: align to the right in RTL */ [dir="rtl"] .lang-switcher-desktop { justify-content: flex-end; } [dir="rtl"] .lang-switcher { margin-right: 0; } } /* --- BANNER --- */ [dir="rtl"] .banner-image-section { margin-left: 0; } @media (min-width: 992px) { [dir="rtl"] .banner-image-section { margin-right: 8.33333%; } } @media (min-width: 1200px) { [dir="rtl"] .banner-image-section { margin-right: 16.66667%; } } [dir="rtl"] .banner-area-1 .animate-img-1 { left: auto; right: 80px; } [dir="rtl"] .banner-area-1 .animate-img-2 { left: auto; right: 100px; } [dir="rtl"] .banner-thumb:after { left: auto; right: -25px; } [dir="rtl"] .banner-thumb .banner-animate-img-1 { left: auto; right: -140px; } [dir="rtl"] .banner-thumb .banner-animate-img-3 { right: auto; left: -9px; } [dir="rtl"] .banner-inner { text-align: right; } /* --- RTL ANIMATIONS --- */ [dir="rtl"] .wow.fadeInLeft { animation-name: fadeInRight; } [dir="rtl"] .wow.fadeInRight { animation-name: fadeInLeft; } @media (max-width: 575px) { [dir="rtl"] .banner-inner .title { font-size: 30px; } } /* --- ABOUT --- */ [dir="rtl"] .about-thumb-inner .animate-img-1 { left: auto; right: 100px; } [dir="rtl"] .about-thumb-inner .animate-img-2 { right: auto; left: 50px; } [dir="rtl"] .about-thumb-inner .animate-img-3 { left: auto; right: 80px; } [dir="rtl"] .about-thumb-inner .animate-img-bottom-right { right: auto; left: -100px; } /* --- ACCORDION (FAQ section) --- */ [dir="rtl"] .accordion-inner .accordion-item .accordion-button { text-align: right; } [dir="rtl"] .accordion-inner.accordion-icon-left .accordion-item .accordion-button { padding-left: 0; padding-right: 50px; } [dir="rtl"] .accordion-inner.accordion-icon-left .accordion-item .accordion-button:after { left: auto; right: 0; } /* --- SECTION TITLE --- */ [dir="rtl"] .section-title { text-align: right; } [dir="rtl"] .section-title.text-center { text-align: center !important; } /* --- BUTTONS --- */ [dir="rtl"] .btn i { float: left; padding-left: 0; padding-right: 5px; } [dir="rtl"] .btn svg { float: left; margin-left: 0; margin-right: 6px; } /* --- SERVICES decoration image --- */ [dir="rtl"] .position-bottom-left { left: auto; right: 30px; } /* --- FOOTER --- */ [dir="rtl"] .footer-area .widget_about .details p svg, [dir="rtl"] .footer-area .widget_about .details p i { margin-right: 0; margin-left: 10px; } [dir="rtl"] .footer-area .widget_about .subscribe input { padding: 0 15px 0 50px; } [dir="rtl"] .footer-area .widget_about .subscribe button { right: auto; left: 0; border-radius: 5px 0 0 5px; } [dir="rtl"] .footer-area .widget_subscribe label { padding-left: 0; padding-right: 22px; } [dir="rtl"] .footer-area .widget_subscribe label input { left: auto; right: 0; } [dir="rtl"] .footer-area .widget_subscribe button { right: auto; left: 15px; } [dir="rtl"] .footer-bottom a { margin-right: 0; margin-left: 10px; } [dir="rtl"] .footer-bottom a:last-child { margin-left: 0; } [dir="rtl"] .footer-bottom .col-md-6 { text-align: right; } /* --- BACK TO TOP --- */ [dir="rtl"] .back-to-top { right: auto; left: 30px; } /* --- CONTACT FORM --- */ [dir="rtl"] .single-input-inner label { text-align: right; display: block; } [dir="rtl"] .single-input-inner input, [dir="rtl"] .single-input-inner textarea { text-align: right; direction: rtl; } [dir="rtl"] .newsletter-checkbox { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; } [dir="rtl"] .newsletter-checkbox input[type="checkbox"] { margin-top: 3px; margin-right: 0; margin-left: 10px; flex-shrink: 0; } /* --- CONTACT SECTION --- */ [dir="rtl"] .contact-inner-1 .section-title { margin-left: 0; margin-right: -190px; } @media (max-width: 991px) { [dir="rtl"] .contact-inner-1 .section-title { margin-right: 0; } } /* --- READ MORE --- */ [dir="rtl"] .read-more-text i { margin-left: 0; margin-right: 3px; } [dir="rtl"] .read-more-text svg { margin-left: 0; margin-right: 6px; } [dir="rtl"] .read-more-text:after { left: auto; right: 0; } /* --- SINGLE LIST (check style) --- */ [dir="rtl"] .single-list-inner.style-check li svg, [dir="rtl"] .single-list-inner.style-check li i { margin-right: 0; margin-left: 10px; } /* --- SLIDER CONTROL --- */ [dir="rtl"] .slider-control-right-top .owl-nav { right: auto; left: 0; } /* --- GENERAL TEXT ALIGNMENT HELPERS --- */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; }