/* ============================================= RTL (Right-to-Left) Layout Overrides Applied only when is set (Arabic language) ============================================= */ /* ---- 1. Global Font & Direction ---- */ [dir="rtl"], [dir="rtl"] body { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea { font-family: 'Cairo', sans-serif; } /* ---- 2. Top Header ---- */ [dir="rtl"] .top-header p { text-align: right; } [dir="rtl"] .top-header ul { margin-left: 0; margin-right: auto; padding-right: 0; text-align: left; } [dir="rtl"] .top-header ul li::before { margin-left: 0; margin-right: 10px; } [dir="rtl"] .top-header ul li:first-child::before { display: none; } [dir="rtl"] .top-header ul li i { margin-right: 0; margin-left: 4px; } /* ---- 3. Navbar ---- */ [dir="rtl"] .evolta-nav .navbar { flex-direction: row-reverse; } [dir="rtl"] .evolta-nav .navbar .navbar-brand { margin-left: auto; margin-right: 0; order: 0; } [dir="rtl"] .evolta-nav .navbar .collapse.navbar-collapse { order: 1; justify-content: flex-start; display: flex; align-items: center; flex-wrap: nowrap; } [dir="rtl"] .evolta-nav .navbar .navbar-nav { margin-left: 0; margin-right: 0; display: flex; align-items: center; gap: 0; } [dir="rtl"] .evolta-nav .navbar .navbar-nav .nav-item a { text-align: right; padding: 10px 15px; } [dir="rtl"] .lang-switcher { margin-left: 0 !important; margin-right: 0 !important; order: 0; display: inline-flex !important; align-items: center; } [dir="rtl"] .lang-switcher .lang-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.7); color: #ffffff; padding: 6px 16px; border-radius: 30px; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; transition: all 0.3s ease; white-space: nowrap; margin: 0; } [dir="rtl"] .lang-switcher .lang-btn:hover { background: #ffffff; color: #333333; border-color: #ffffff; } [dir="rtl"] .evolta-nav .navbar .navbar-nav .nav-item:last-child { margin-left: 0; } [dir="rtl"] .evolta-nav .navbar .navbar-nav .nav-item { margin: 0; } /* ---- Mean Menu RTL Fixes ---- */ [dir="rtl"] .mean-container .mean-bar { float: right; position: absolute; top: 0; right: 0; left: 0; } [dir="rtl"] .mean-container a.meanmenu-reveal { right: auto; left: 0; } [dir="rtl"] .mean-container .mean-nav { float: right; position: absolute; top: 100%; right: 0; left: 0; margin-top: 0; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } [dir="rtl"] .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; } [dir="rtl"] .mean-container .mean-nav ul li { float: right; width: 100%; } [dir="rtl"] .mean-container .mean-nav ul li a { float: right; text-align: right; padding: 12px 20px 12px 10px; width: 90%; color: #677294; border-top: 1px solid #DBEEFD; font-size: 14px; font-weight: 500; } [dir="rtl"] .mean-container .mean-nav ul li a.active { color: #074ece; } [dir="rtl"] .mean-container .mean-nav ul li a:hover { background: #f5f8ff; color: #074ece; } [dir="rtl"] .mean-container .mean-nav ul li li a { padding: 12px 35px 12px 10px; width: 80%; font-size: 13.5px; color: #677294; border-top: 1px solid #DBEEFD; } [dir="rtl"] .mean-container .mean-nav ul li li li a { padding: 12px 50px 12px 10px; width: 70%; font-size: 13px; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand { right: auto; left: 0; text-align: center; width: 46px; height: 46px; padding: 0 !important; line-height: 46px; font-size: 18px; font-weight: 700; color: #677294; background: transparent; border: none !important; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand:hover { background: #f5f8ff; color: #074ece; } [dir="rtl"] .mean-container .mean-push { float: right; } /* ---- Responsive ---- */ @media only screen and (max-width: 991px) { [dir="rtl"] .evolta-responsive-nav .evolta-responsive-menu { position: relative; display: flex; align-items: center; justify-content: space-between; } [dir="rtl"] .evolta-responsive-nav .logo { position: relative; width: 50%; z-index: 999; order: 0; margin-right: 0; } [dir="rtl"] .mobile-lang-switcher { position: absolute; left: 55px; right: auto; top: 7px; z-index: 999; display: flex; align-items: center; order: 1; } [dir="rtl"] .evolta-responsive-nav .mean-container a.meanmenu-reveal { color: #ffffff; order: 2; float: left !important; left: 0 !important; right: auto !important; position: relative !important; top: auto !important; } [dir="rtl"] .evolta-responsive-nav .mean-container a.meanmenu-reveal span { background: #ffffff; position: relative; top: 8px; margin-top: -6px; } [dir="rtl"] .mean-container .mean-nav { background: #ffffff; max-height: 400px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } [dir="rtl"] .mean-container .mean-nav ul li a { padding: 12px 20px; color: #677294; border-top: 1px solid #DBEEFD; font-size: 14px; } [dir="rtl"] .mean-container .mean-nav ul li a:hover { background: #f5f8ff; color: #074ece; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand { width: 46px; height: 46px; line-height: 46px; font-size: 18px; color: #677294; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand:hover { background: #f5f8ff; color: #074ece; } [dir="rtl"] .mean-container .mean-nav ul li li a { padding: 12px 35px; font-size: 13.5px; } [dir="rtl"] .mean-container .mean-nav ul li li li a { padding: 12px 50px; font-size: 13px; } } @media only screen and (max-width: 767px) { [dir="rtl"] .mobile-lang-switcher { left: 45px; top: 5px; } [dir="rtl"] .evolta-responsive-nav .logo { width: 60%; } [dir="rtl"] .evolta-responsive-nav .logo img { max-height: 35px; } [dir="rtl"] .mean-container .mean-nav ul li a { padding: 10px 15px; font-size: 13px; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand { width: 40px; height: 40px; line-height: 40px; font-size: 16px; } } @media only screen and (max-width: 480px) { [dir="rtl"] .mobile-lang-switcher { left: 40px; top: 5px; } [dir="rtl"] .mobile-lang-switcher .lang-icon-btn { font-size: 18px; } [dir="rtl"] .mobile-lang-switcher .lang-icon-btn i { font-size: 18px; } [dir="rtl"] .evolta-responsive-nav .logo { width: 70%; } [dir="rtl"] .evolta-responsive-nav .logo img { max-height: 30px; } [dir="rtl"] .mean-container .mean-nav ul li a { padding: 8px 12px; font-size: 12px; } [dir="rtl"] .mean-container .mean-nav ul li a.mean-expand { width: 36px; height: 36px; line-height: 36px; font-size: 14px; } } /* ---- 4. Responsive / Mobile Navbar ---- */ [dir="rtl"] .evolta-responsive-menu .logo { text-align: right; } /* ---- 5. Section Titles ---- */ [dir="rtl"] .section-title { text-align: right; } [dir="rtl"] .section-title span.sub-title::before, [dir="rtl"] .section-title span::before { right: 0; left: auto; margin-right: 0; margin-left: 8px; } [dir="rtl"] .section-title span.sub-title::after, [dir="rtl"] .section-title span::after { left: 0; right: auto; } /* ---- 6. Banner ---- */ [dir="rtl"] .data-analysis-banner-content { text-align: right; } [dir="rtl"] .data-analysis-banner-content .banner-btn { padding-right: 0; justify-content: flex-start; flex-direction: row-reverse; } [dir="rtl"] .data-analysis-banner-content .banner-btn li { margin-right: 0; margin-left: 4px; } [dir="rtl"] .main-banner-content { text-align: right; } /* ---- 7. Solutions / Feature Cards ---- */ [dir="rtl"] .solutions-wrap-card { text-align: center; } [dir="rtl"] .solutions-wrap-card .icon { text-align: right; } /* ---- 8. About Wrap Section ---- */ [dir="rtl"] .about-wrap-content { text-align: right; } [dir="rtl"] .about-wrap-content .wrap-list { padding-right: 0; } [dir="rtl"] .about-wrap-content .wrap-list li { text-align: right; } [dir="rtl"] .about-wrap-content .wrap-list li i { margin-right: 0; margin-left: 8px; } /* ---- 9. Features / Overview Box ---- */ [dir="rtl"] .overview-box { flex-direction: row-reverse; } [dir="rtl"] .overview-box .content { text-align: right; } [dir="rtl"] .overview-box .content .features-list { padding-right: 0; } [dir="rtl"] .overview-box .content .features-list li span { padding-left: 0; padding-right: 15px; } [dir="rtl"] .overview-box .content .features-list li span i { margin-right: 0; margin-left: 6px; } [dir="rtl"] .overview-box .content .features-list li span::before { left: auto; right: 0; } /* ---- 10. How It Works ---- */ [dir="rtl"] .single-how-it-work-box { text-align: right; height: 230px; } [dir="rtl"] .single-how-it-work-box .number-text { margin-right: 55px; right: -25px; } [dir="rtl"] .single-how-it-work-box .icon { text-align: left; } [dir="rtl"] .single-how-it-work-box .h3 { text-align:right; } /* ---- 11. Why Choose Us ---- */ [dir="rtl"] .single-choose-us-box .title { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .single-choose-us-box .title .icon { margin-right: 0; margin-left: 12px; } /* ---- 12. About Page ---- */ [dir="rtl"] .about-content { text-align: right; } [dir="rtl"] .about-text { text-align: right; } /* ---- 13. Services Cards (About Page) ---- */ [dir="rtl"] .single-services-box { text-align: center; } /* ---- 14. Page Title / Breadcrumb ---- */ [dir="rtl"] .page-title-content { text-align: right; } [dir="rtl"] .page-title-content ul { padding-right: 0; justify-content: flex-end; flex-direction: row-reverse; } [dir="rtl"] .page-title-content ul li::before { transform: rotate(180deg); } /* ---- 15. Contact Form ---- */ [dir="rtl"] .contact-form .form-control { text-align: right; direction: rtl; } [dir="rtl"] .contact-form textarea.form-control { text-align: right; direction: rtl; } [dir="rtl"] .contact-info-content { text-align: center; } [dir="rtl"] .contact-info-content .social { padding-right: 0; justify-content: flex-end; } /* ---- 16. Footer ---- */ [dir="rtl"] .footer-area .single-footer-widget { text-align: right; } [dir="rtl"] .footer-area .single-footer-widget .social { padding-right: 0; justify-content: flex-start; } [dir="rtl"] .footer-area .footer-contact-list { padding-right: 0; } [dir="rtl"] .footer-area .footer-contact-list li { text-align: right; } [dir="rtl"] .footer-area .footer-contact-list li span { margin-right: 0; margin-left: 6px; } [dir="rtl"] .copyright-area p { text-align: right; } [dir="rtl"] .copyright-area .col-lg-6:last-child p { text-align: left; } /* ---- 17. Privacy Policy Table ---- */ [dir="rtl"] .about-content table { text-align: right; } [dir="rtl"] .about-content ul { padding-right: 20px; padding-left: 0; } /* ---- 18. Bootstrap Utility Overrides ---- */ [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* ---- 19. Go-Top Button ---- */ [dir="rtl"] .go-top { right: auto; left: 20px; } /* ---- 20. Dark Mode Toggle Position ---- */ [dir="rtl"] .dark-version { right: auto; left: 20px; }