/* Mesar RTL layer for Adon (the parent ships no rtl.css). Loaded only when the site locale is RTL. */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .text-left, html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-right, html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .elementor-widget-heading .elementor-heading-title { text-align: inherit; }
/* Bootstrap floats / margins commonly used by the theme */
html[dir="rtl"] .float-start { float: right !important; } html[dir="rtl"] .float-end { float: left !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
/* Nav & header pieces */
html[dir="rtl"] .header__nav ul, html[dir="rtl"] .main-menu ul { padding-right: 0; }
html[dir="rtl"] .header__nav ul li { margin-left: 0; }
html[dir="rtl"] .header__nav ul li ul.sub-menu, html[dir="rtl"] .main-menu ul li .sub-menu { left: auto; right: 0; text-align: right; }
/* Offcanvas slides from the left in RTL */
/* Side-info offcanvas: rtlcss flips left/right and the translate, but the original right:0 still wins in RTL
   when both edges are set, which drags the hidden panel on-screen. Release the right edge. */
html[dir="rtl"] .side-info { right: auto; left: 0; transform: translateX(calc(-1 * (100% + 80px))); }
html[dir="rtl"] .side-info.info-open { transform: translateX(0); }
html[dir="rtl"] .side-info-close { right: auto; left: 20px; }
/* Icons that point “forward” */
html[dir="rtl"] .text-underline i, html[dir="rtl"] .theme-btn i, html[dir="rtl"] .adon-btn i, html[dir="rtl"] .rr-btn i, html[dir="rtl"] .portfolio__cursor i { transform: scaleX(-1); display: inline-block; }
/* Keep Latin numerals / brand codes readable */
html[dir="rtl"] .counter, html[dir="rtl"] .odometer, html[dir="rtl"] .info-list__subheading { direction: ltr; unicode-bidi: isolate; }
/* Swiper / marquee keep LTR mechanics */
html[dir="rtl"] .swiper, html[dir="rtl"] .news-ticker, html[dir="rtl"] .rr-marquee { direction: ltr; }
html[dir="rtl"] .news-ticker *, html[dir="rtl"] .rr-marquee * { direction: rtl; }
/* Lists */
html[dir="rtl"] ul, html[dir="rtl"] ol { padding-left: 0; padding-right: 1.25em; }
html[dir="rtl"] .elementor-icon-list-items li { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .elementor-icon-list-icon { margin-right: 0; margin-left: 8px; }

/* Pinned services animation: its card geometry (translateX per .item-N) assumes an LTR grid.
   Keep the grid LTR and flip only the text inside the cards. */
html[dir="rtl"] .services-wrapper-1 { direction: ltr; }
html[dir="rtl"] .service-box-1, html[dir="rtl"] .service-box-1 .title, html[dir="rtl"] .mockup-text { direction: rtl; text-align: right; }
html[dir="rtl"] .service-area .section-header { direction: rtl; }
/* Other GSAP-driven layouts that measure x positions */
html[dir="rtl"] .rr-marquee, html[dir="rtl"] .news-ticker, html[dir="rtl"] .brand-slider, html[dir="rtl"] .swiper-wrapper { direction: ltr; }

/* Header: keep the logo pinned to the right edge at the same x on every page.
   rtlcss added margin-left:auto but the original margin-right:auto still applied, centring the logo. */
html[dir="rtl"] .header-area-4 .header__logo { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .header-area-4 .rr-container-1860 { max-width: 1650px; }
html[dir="rtl"] .header-area-4__inner { padding-inline: 31px; }
/* Buttons: centre their label instead of the theme's left alignment */
html[dir="rtl"] .rr-btn, html[dir="rtl"] .adon-el-button, html[dir="rtl"] .rr-btn .btn-wrap, html[dir="rtl"] .rr-btn .text-one, html[dir="rtl"] .rr-btn .text-two { text-align: center; }

/* Large two-word heading ("شغل بيتكلم / عن نفسه"): the demo bleeds each word past the container edge.
   Arabic words are wider, so the bleed clips them. Keep both lines inside the container, staggered. */
html[dir="rtl"] .adon-title-one.section-title span.first, html[dir="rtl"] .adon-title-one.section-title span.last { margin-left: 0 !important; margin-right: 0 !important; display: block; }
html[dir="rtl"] .adon-title-one.section-title span.first { text-align: right; }
html[dir="rtl"] .adon-title-one.section-title span.last, html[dir="rtl"] .adon-title-one.section-title span:nth-child(2) { text-align: left; }