/* ============================================================ rtl.css – Right-to-left overrides for the Arabic locale. Loaded ONLY when is set, so it doesn't add any bytes to English page loads. The site's main theme (plugin.css / style.css) was built for LTR Latin layouts. This file flips/fixes everything that doesn't auto-flip from `dir="rtl"` alone — margins, padding, icon directions, text alignment, Owl Carousel direction, Bootstrap utilities, etc. ============================================================ */ html[dir="rtl"] { /* Arabic-friendly font stack (Cairo > Tajawal > IBM Plex > system). Loaded via Google Fonts in app.blade.php for the ar locale. Falls back to system Arabic fonts so first paint never shows a blocky Latin font for Arabic glyphs. */ font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; direction: rtl; } html[dir="rtl"] body, 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"] a, html[dir="rtl"] span, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important; line-height: 1.7; } /* ============================================================ Generic text alignment — most theme elements use text-left which obviously breaks in RTL. ============================================================ */ html[dir="rtl"] .text-left, html[dir="rtl"] .text-md-left, html[dir="rtl"] .text-md-start { text-align: right !important; } html[dir="rtl"] .text-right, html[dir="rtl"] .text-md-right, html[dir="rtl"] .text-md-end { text-align: left !important; } /* ============================================================ Bootstrap margin / padding utility flips. Bootstrap 4 (which the theme uses) has -left/-right utilities that don't auto-flip in RTL. Mirror them so spacing looks sane in Arabic. ============================================================ */ html[dir="rtl"] .ml-1{margin-left:0!important;margin-right:.25rem!important} html[dir="rtl"] .ml-2{margin-left:0!important;margin-right:.5rem!important} html[dir="rtl"] .ml-3{margin-left:0!important;margin-right:1rem!important} html[dir="rtl"] .ml-4{margin-left:0!important;margin-right:1.5rem!important} html[dir="rtl"] .ml-5{margin-left:0!important;margin-right:3rem!important} html[dir="rtl"] .mr-1{margin-right:0!important;margin-left:.25rem!important} html[dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important} html[dir="rtl"] .mr-3{margin-right:0!important;margin-left:1rem!important} html[dir="rtl"] .mr-4{margin-right:0!important;margin-left:1.5rem!important} html[dir="rtl"] .mr-5{margin-right:0!important;margin-left:3rem!important} html[dir="rtl"] .pl-1{padding-left:0!important;padding-right:.25rem!important} html[dir="rtl"] .pl-2{padding-left:0!important;padding-right:.5rem!important} html[dir="rtl"] .pl-3{padding-left:0!important;padding-right:1rem!important} html[dir="rtl"] .pl-4{padding-left:0!important;padding-right:1.5rem!important} html[dir="rtl"] .pl-5{padding-left:0!important;padding-right:3rem!important} html[dir="rtl"] .pr-1{padding-right:0!important;padding-left:.25rem!important} html[dir="rtl"] .pr-2{padding-right:0!important;padding-left:.5rem!important} html[dir="rtl"] .pr-3{padding-right:0!important;padding-left:1rem!important} html[dir="rtl"] .pr-4{padding-right:0!important;padding-left:1.5rem!important} html[dir="rtl"] .pr-5{padding-right:0!important;padding-left:3rem!important} @media (min-width: 992px) { html[dir="rtl"] .ml-lg-1{margin-left:0!important;margin-right:.25rem!important} html[dir="rtl"] .ml-lg-2{margin-left:0!important;margin-right:.5rem!important} html[dir="rtl"] .ml-lg-3{margin-left:0!important;margin-right:1rem!important} html[dir="rtl"] .ml-lg-4{margin-left:0!important;margin-right:1.5rem!important} html[dir="rtl"] .ml-lg-5{margin-left:0!important;margin-right:3rem!important} html[dir="rtl"] .mr-lg-1{margin-right:0!important;margin-left:.25rem!important} html[dir="rtl"] .mr-lg-2{margin-right:0!important;margin-left:.5rem!important} html[dir="rtl"] .mr-lg-3{margin-right:0!important;margin-left:1rem!important} html[dir="rtl"] .mr-lg-4{margin-right:0!important;margin-left:1.5rem!important} html[dir="rtl"] .mr-lg-5{margin-right:0!important;margin-left:3rem!important} html[dir="rtl"] .pl-lg-1{padding-left:0!important;padding-right:.25rem!important} html[dir="rtl"] .pl-lg-2{padding-left:0!important;padding-right:.5rem!important} html[dir="rtl"] .pl-lg-3{padding-left:0!important;padding-right:1rem!important} html[dir="rtl"] .pl-lg-4{padding-left:0!important;padding-right:1.5rem!important} html[dir="rtl"] .pl-lg-5{padding-left:0!important;padding-right:3rem!important} html[dir="rtl"] .pr-lg-1{padding-right:0!important;padding-left:.25rem!important} html[dir="rtl"] .pr-lg-2{padding-right:0!important;padding-left:.5rem!important} html[dir="rtl"] .pr-lg-3{padding-right:0!important;padding-left:1rem!important} html[dir="rtl"] .pr-lg-4{padding-right:0!important;padding-left:1.5rem!important} html[dir="rtl"] .pr-lg-5{padding-right:0!important;padding-left:3rem!important} } html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } html[dir="rtl"] .me-1{margin-left:.25rem!important;margin-right:0!important} html[dir="rtl"] .me-2{margin-left:.5rem!important;margin-right:0!important} html[dir="rtl"] .me-3{margin-left:1rem!important;margin-right:0!important} html[dir="rtl"] .ms-1{margin-right:.25rem!important;margin-left:0!important} html[dir="rtl"] .ms-2{margin-right:.5rem!important;margin-left:0!important} html[dir="rtl"] .ms-3{margin-right:1rem!important;margin-left:0!important} /* ============================================================ Header / Top bar ============================================================ */ html[dir="rtl"] .header-topbar .language-change a { margin-right: .5rem; margin-left: 0; } html[dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; } html[dir="rtl"] .navbar-nav { padding-right: 0; } html[dir="rtl"] .navbar-collapse.justify-content-end { justify-content: flex-start !important; } html[dir="rtl"] .social-icon a { margin-left: .75rem; margin-right: 0; } /* ============================================================ Banner / Hero ============================================================ */ html[dir="rtl"] .banner-content, html[dir="rtl"] .banner-text, html[dir="rtl"] .banner-content .title, html[dir="rtl"] .banner-content .title-tag { text-align: right; direction: rtl; } /* ============================================================ Section titles — stack tag above heading (theme sets span/a to inline-block which puts them side-by-side in RTL). ============================================================ */ html[dir="rtl"] .section-title { direction: rtl; overflow: visible; } html[dir="rtl"] .section-title:not(.text-center) { text-align: right; } html[dir="rtl"] .section-title.text-center { text-align: center; } html[dir="rtl"] .section-title.text-center .title-tag, html[dir="rtl"] .section-title.text-center .title { text-align: center; } html[dir="rtl"] .section-title .title-tag, html[dir="rtl"] .section-title .title { display: block !important; width: 100%; letter-spacing: 0; text-transform: none; line-height: 1.45; overflow: visible; } html[dir="rtl"] .section-title .title-tag { margin-bottom: 6px; padding-bottom: 8px; } html[dir="rtl"] .section-title .title { margin-top: 0; } html[dir="rtl"] .section-title.with-right-border .title-tag { padding-right: 0; padding-left: 100px; } html[dir="rtl"] .section-title.with-right-border .title-tag::before { right: auto; left: 0; } @media (max-width: 575px) { html[dir="rtl"] .section-title.with-right-border .title-tag { padding-left: 0; } html[dir="rtl"] .section-title.with-right-border .title-tag::before { left: 0; right: auto; } } /* ============================================================ Feature list (About / Why Us) — flip checkmark bubble to the start edge (right in RTL). ============================================================ */ html[dir="rtl"] .feature-list li { padding-left: 0; padding-right: 80px; text-align: right; } @media (max-width: 1199px) { html[dir="rtl"] .feature-list li { padding-right: 30px; padding-left: 0; } } @media (max-width: 575px) { html[dir="rtl"] .feature-list li { padding-right: 0; } } html[dir="rtl"] .feature-list li::before { left: auto; right: 0; } html[dir="rtl"] .feature-list li h4, html[dir="rtl"] .feature-list li p { display: block; text-align: right; } /* ============================================================ FAQ accordion (home counter-faq + theme accordion-one) ============================================================ */ html[dir="rtl"] .accordion-one, html[dir="rtl"] .counter-faq-section { direction: rtl; } html[dir="rtl"] .accordion-one .card .card-header a, html[dir="rtl"] .accordion-one .accordion-trigger { direction: rtl; text-align: right; display: flex; align-items: flex-start; gap: 10px; line-height: 1.65 !important; padding: 14px 0 !important; white-space: normal; } html[dir="rtl"] .accordion-one .card .card-header a i, html[dir="rtl"] .accordion-one .accordion-trigger i { padding-right: 0 !important; padding-left: 0; flex-shrink: 0; margin-top: 5px; } html[dir="rtl"] .accordion-one .card .card-body { padding: 0 25px 14px 10px; text-align: right; } html[dir="rtl"] .accordion-one .card .card-body p { text-align: right; line-height: 1.75; } /* ============================================================ About page — gallery alignment, rich text ============================================================ */ html[dir="rtl"] .about-text-block, html[dir="rtl"] .text-color-3 { direction: rtl; text-align: right; } html[dir="rtl"] .about-text-block .text-color-3 p, html[dir="rtl"] .about-text-block .text-color-3 li { text-align: right; } html[dir="rtl"] .tile-gallery-two .img-one { text-align: right; } html[dir="rtl"] .tile-gallery-two .img-two { text-align: left !important; } /* ============================================================ Inner pages — breadcrumbs, blog/product body copy ============================================================ */ html[dir="rtl"] .page-title-area .breadcrumb-nav { direction: rtl; } html[dir="rtl"] .page-title-area .title { direction: rtl; } html[dir="rtl"] .blogdatacontent { direction: rtl; } html[dir="rtl"] .content-cta-actions { justify-content: flex-start; } html[dir="rtl"] .content-cta-body { flex-direction: row-reverse; } /* ============================================================ Counter boxes beside FAQ ============================================================ */ html[dir="rtl"] .counter-box-three, html[dir="rtl"] .faq-counter-boxes { direction: rtl; text-align: right; } html[dir="rtl"] .counter-box-three .title, html[dir="rtl"] .counter-box-three p { display: block; text-align: right; } /* ============================================================ Icons that look like arrows pointing forward (right in LTR, left in RTL). Mirror them so they always "point to the next thing" in reading order. ============================================================ */ html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-caret-right { transform: scaleX(-1); } html[dir="rtl"] .fa-long-arrow-left, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-caret-left { transform: scaleX(-1); } /* ============================================================ "Read more" buttons & similar inline link+icon combos. ============================================================ */ html[dir="rtl"] .read-more-btn, html[dir="rtl"] .main-btn { direction: rtl; } html[dir="rtl"] .read-more-btn i, html[dir="rtl"] .main-btn i { margin-right: 0; margin-left: 8px; } /* Home hero — block stack + readable Arabic type */ html[dir="rtl"] .home-hero-luxe__content { direction: rtl; text-align: right; } html[dir="rtl"] .home-hero-luxe__title, html[dir="rtl"] .home-hero-luxe__title-line, html[dir="rtl"] .home-hero-luxe__tag, html[dir="rtl"] .home-hero-luxe__desc { display: block !important; text-align: right; } html[dir="rtl"] .home-hero-luxe__actions { justify-content: flex-start; } html[dir="rtl"] .home-hero-luxe__btn { letter-spacing: 0; text-transform: none; } html[dir="rtl"] .home-hero-luxe__features-list li { text-align: right; } html[dir="rtl"] .home-hero-luxe__trust p { letter-spacing: 0; text-transform: none; } /* Service / blog cards — arrow links */ html[dir="rtl"] .services-content, html[dir="rtl"] .latest-news-box, html[dir="rtl"] .portfolio-content { direction: rtl; text-align: right; } html[dir="rtl"] .latest-news-box .post-meta, html[dir="rtl"] .latest-news-box h3, html[dir="rtl"] .latest-news-box p { display: block; text-align: right; } /* ============================================================ Forms — inputs / textareas / placeholders / icons ============================================================ */ html[dir="rtl"] .input-group input, html[dir="rtl"] .input-group textarea, html[dir="rtl"] .input-group select { text-align: right; direction: rtl; } html[dir="rtl"] .input-group .icon { left: 20px; right: auto; } html[dir="rtl"] .input-group input, html[dir="rtl"] .input-group select { padding-right: 20px; padding-left: 50px; } html[dir="rtl"] .input-group textarea { padding-right: 20px; padding-left: 50px; } html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; direction: rtl; } /* Search widget pill */ html[dir="rtl"] .search-widget .input-box input { text-align: right; padding-right: 20px; padding-left: 65px; } html[dir="rtl"] .search-widget .input-box button { right: auto; left: 0; } /* ============================================================ Sidebar widgets (blogs / category list) ============================================================ */ html[dir="rtl"] .widget ul li a { padding-right: 0; padding-left: 0; text-align: right; } html[dir="rtl"] .widget ul li a span { float: none; } html[dir="rtl"] .post-meta li { margin-right: 0; margin-left: 15px; } /* ============================================================ Service / portfolio cards ============================================================ */ html[dir="rtl"] .service-item-four .services-content, html[dir="rtl"] .single-choose, html[dir="rtl"] .portfolio-content { text-align: right; } /* ============================================================ Footer ============================================================ */ html[dir="rtl"] .footer-area .widget-item-1, html[dir="rtl"] .footer-area .widget-item-2, html[dir="rtl"] .footer-area .widget-item-3 { text-align: right; } html[dir="rtl"] .footer-area .footer-list ul li a { padding-right: 0; padding-left: 0; } html[dir="rtl"] .footer-area .footer-list ul li a i { margin-right: 0; margin-left: 8px; transform: scaleX(-1); } html[dir="rtl"] .footer-social-links a { margin-left: .5rem; margin-right: 0; } html[dir="rtl"] .widget-item-2 ul li i { margin-left: 8px; margin-right: 0; } html[dir="rtl"] .footer-copyright p { direction: rtl; text-align: center; } /* ============================================================ Floating quick-call / WhatsApp / back-to-top widgets. In LTR they sit on the right edge of the viewport; in RTL flip them to the LEFT so they don't cover the read direction. ============================================================ */ html[dir="rtl"] .quick_call_area { right: auto !important; left: 25px !important; } html[dir="rtl"] .back-to-top { right: auto !important; left: 25px !important; } @media (max-width: 1100px) { html[dir="rtl"] .quick_call_area { left: 0 !important; right: auto !important; } } /* ============================================================ Owl Carousel direction. The carousels initialise with `rtl:true` from JS when the element is RTL. These CSS tweaks just make sure the nav arrows and dots line up correctly even before JS runs. ============================================================ */ html[dir="rtl"] .owl-carousel { direction: rtl; } html[dir="rtl"] .owl-nav .owl-prev, html[dir="rtl"] .owl-nav .owl-next { /* Visually swap prev/next so they still mean "previous / next" in reading order. */ transform: scaleX(-1); } /* ============================================================ Pagination — Bootstrap pager arrows / hover background ============================================================ */ html[dir="rtl"] .pagination { direction: rtl; } html[dir="rtl"] .pagination .page-item:first-child .page-link, html[dir="rtl"] .pagination .page-item:last-child .page-link { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ============================================================ About section shapes — keep decorative corner shapes mirrored so the "open" side faces the page content like in LTR. ============================================================ */ html[dir="rtl"] .about-shape-1 { right: 0; left: auto; } html[dir="rtl"] .about-shape-2 { left: 0; right: auto; } /* ============================================================ Table of Contents ============================================================ */ html[dir="rtl"] .toc-wrapper { direction: rtl; text-align: right; } html[dir="rtl"] .toc-title { text-align: right; } html[dir="rtl"] #toc-list { padding-right: 1.2rem; padding-left: 0; } html[dir="rtl"] #toc-list li { list-style-position: inside; text-align: right; } /* ============================================================ Site-wide theme mirrors (style.css / new.css gaps) ============================================================ */ /* Header nav toggler (new.css uses margin-left) */ html[dir="rtl"] .header-navigation .nav-toggler { margin-left: 0; margin-right: 20px; } /* Blog sidebar — padding, widget titles, category badges, feeds */ html[dir="rtl"] .blog-sidebar { padding-left: 0; padding-right: 20px; } @media (max-width: 1199px) { html[dir="rtl"] .blog-sidebar { padding-right: 0; } } html[dir="rtl"] .blog-sidebar .widget .widget-title { padding-left: 0; padding-right: 40px; text-align: right; } html[dir="rtl"] .blog-sidebar .widget .widget-title::before { left: auto; right: 21px; } html[dir="rtl"] .blog-sidebar .widget .widget-title::after { left: auto; right: 0; } html[dir="rtl"] .blog-sidebar .widget.categories-widget ul li a, html[dir="rtl"] .blog-sidebar .widget.product-category ul li a { padding-left: 60px; padding-right: 30px; text-align: right; } html[dir="rtl"] .blog-sidebar .widget.categories-widget ul li a span, html[dir="rtl"] .blog-sidebar .widget.product-category ul li a span, html[dir="rtl"] .widget ul li a span { right: auto; left: 0; } html[dir="rtl"] .blog-sidebar .widget .news-feed-items .news-feed-item { padding-left: 0; padding-right: 100px; text-align: right; } html[dir="rtl"] .blog-sidebar .widget .news-feed-items .news-feed-item img { left: auto; right: 0; } html[dir="rtl"] .blog-sidebar .widget .news-feed-items .news-feed-item span i { padding-right: 0; padding-left: 6px; } /* Inquiry widget (blog/product sidebar forms) */ html[dir="rtl"] .blog-sidebar .widget.inquiry-widget .input-group input, html[dir="rtl"] .blog-sidebar .widget.inquiry-widget .input-group textarea { text-align: right; } html[dir="rtl"] .blog-sidebar .widget.inquiry-widget .input-group .icon { right: auto; left: auto; inset-inline-end: 14px; } /* Blog listing cards */ html[dir="rtl"] .latest-news-box .post-content .read-more-btn i, html[dir="rtl"] .latest-news-box-two .news-btn i { margin-left: 0; margin-right: 10px; } html[dir="rtl"] .latest-news-box .post-content .read-more-btn { direction: rtl; } /* Blog detail meta */ html[dir="rtl"] .blog-dteails-content, html[dir="rtl"] .blog-dteails-content .post-meta { direction: rtl; text-align: right; } html[dir="rtl"] .blog-dteails-content .post-meta li { margin-right: 0; margin-left: 28px; } @media (max-width: 575px) { html[dir="rtl"] .blog-dteails-content .post-meta li { margin-left: 10px; } } html[dir="rtl"] .blog-dteails-content .post-meta li i { padding-right: 0; padding-left: 6px; } /* Category / product grid cards */ html[dir="rtl"] .single-blog-grid .cat { left: auto; right: 30px; } html[dir="rtl"] .single-blog-grid .blog-grid-overlay { left: 30px; right: 30px; text-align: right; } /* Portfolio slider arrows */ html[dir="rtl"] .portfolio-arrow, html[dir="rtl"] .portfolio-arrow-two { text-align: left; direction: rtl; } html[dir="rtl"] .portfolio-arrow .slick-arrow.next, html[dir="rtl"] .portfolio-arrow-two .slick-arrow.next { margin-left: 0; margin-right: 15px; } /* Home contact section */ html[dir="rtl"] .conatct-section .contact-form-area .contact-form { padding-left: 0; padding-right: 10px; direction: rtl; text-align: right; } html[dir="rtl"] .conatct-section .contact-form-area .contact-form .form-title { padding-right: 0; padding-left: 40px; text-align: right; } html[dir="rtl"] .conatct-section .contact-form-area .contact-form .input-group input, html[dir="rtl"] .conatct-section .contact-form-area .contact-form .input-group textarea { text-align: right; direction: rtl; } html[dir="rtl"] .conatct-section .contact-form-area .contact-form .input-group .icon { right: auto; left: 0; } html[dir="rtl"] .contact-form .contact-select { text-align: right; direction: rtl; } /* Related products */ html[dir="rtl"] .related-products-section, html[dir="rtl"] .related-product-body { direction: rtl; text-align: right; } html[dir="rtl"] .related-product-btn { align-self: flex-end; direction: rtl; } /* Article tables gradient accent */ html[dir="rtl"] .blogdatacontent .article-table-wrap::before { background: linear-gradient(270deg, #1c4587 0%, #e4ad40 100%); } /* Gallery overlay text */ html[dir="rtl"] .project-gallery .project-gallery-item .gallery-item .item-thumbnail .content-overlay .content .info { text-align: right; direction: rtl; } /* Why choose / call-to-action blocks */ html[dir="rtl"] .why-choose-area, html[dir="rtl"] .call-to-action, html[dir="rtl"] .call-to-action-four .cta-content { direction: rtl; } html[dir="rtl"] .call-to-action-four .cta-btns .cta-btn i { margin-left: 0; margin-right: 8px; } /* Service details + portfolio carousel */ html[dir="rtl"] .service-details-content, html[dir="rtl"] .service-details-page { direction: rtl; text-align: right; } /* Side-bar contact CTA (categories page) */ html[dir="rtl"] .side-bar-contact .content { direction: rtl; text-align: center; } html[dir="rtl"] .justify-content-end { justify-content: flex-start !important; } html[dir="rtl"] .justify-content-start { justify-content: flex-end !important; } html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .text-end { text-align: left !important; } /* Pagination (Laravel + Bootstrap) */ html[dir="rtl"] .pagination .page-link { direction: rtl; } /* Privacy / static content pages */ html[dir="rtl"] .privacy-policy-content, html[dir="rtl"] .privacyPolicy-content { direction: rtl; text-align: right; } /* Inline icon spacing in blades (margin-left on arrows) */ html[dir="rtl"] .main-btn i[style*="margin-left"], html[dir="rtl"] i[style*="margin-left"] { margin-left: 0 !important; margin-right: 8px !important; } /* ============================================================ Helpers — keep numbers and Latin words readable inside RTL text (e.g. phone numbers, emails). ============================================================ */ html[dir="rtl"] .ltr-text, html[dir="rtl"] [dir="ltr"], html[dir="rtl"] .english-content { direction: ltr; unicode-bidi: embed; }