/* RTL overrides for the Arabic (Oman) edition. Loaded only on /ar/ pages,
   after all other stylesheets, so these rules win without !important sprawl. */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Space Grotesk', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Marcellus', serif;
}

/* Flip directional arrow icons used on buttons/links throughout the theme. */
html[dir="rtl"] .icon-right-arrow,
html[dir="rtl"] .icon-right-arrow-1,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-long-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Text blocks that were explicitly left-aligned in the LTR template. */
html[dir="rtl"] .text-left,
html[dir="rtl"] .contact-two__left,
html[dir="rtl"] .section-title.text-left {
    text-align: right !important;
}

/* Fixed side-tab menu (Faqs/Support/Help) sits on the left edge in LTR; mirror it. */
html[dir="rtl"] .sidebar-tab,
html[dir="rtl"] .fixed-tab {
    left: auto;
    right: 0;
}

/* Breadcrumb / list arrow separators. */
html[dir="rtl"] .thm-breadcrumb .icon-right-arrow-1 {
    transform: scaleX(-1);
}

/* Form fields and icons inside them should read right-to-left too. */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

/* Owl carousel nav arrows: swap prev/next visual order. */
html[dir="rtl"] .owl-nav {
    direction: ltr;
}

/* Several two-column "big heading" sections tune the gap between the
   image column and the text column with physical left/right margins on
   BOTH: a margin on the image column carves out breathing room on its
   inner (text-facing) side, and a negative margin on the title bleeds
   it that same distance into the gap for an oversized-text effect.
   Correct in LTR; under RTL the two columns swap sides via flex
   reversal, so every one of those physical margins now opens/bleeds on
   the wrong (outer) side instead - collapsing the gap and letting the
   heading overlap the photo (confirmed on about-four's "طوّر أعمالك..."
   heading). Mirror both halves of each pair. */
html[dir="rtl"] .about-one__right { margin-left: 0; margin-right: 70px; }
html[dir="rtl"] .about-one__left .section-title__title { margin-right: 0; margin-left: -100px; }

html[dir="rtl"] .about-two__left { margin-right: 0; margin-left: 135px; }
html[dir="rtl"] .about-two__right .section-title__title { margin-right: 0; margin-left: -100px; }

html[dir="rtl"] .about-four__left { margin-right: 0; margin-left: 145px; }
html[dir="rtl"] .about-four__right .section-title__title { margin-right: 0; margin-left: -110px; }

html[dir="rtl"] .services-four__left { margin-right: 0; margin-left: 378px; }
html[dir="rtl"] .services-four__right .section-title__title { margin-right: 0; margin-left: -100px; }

html[dir="rtl"] .team-two__right { margin-right: 0; margin-left: -315px; }
html[dir="rtl"] .team-two__left .section-title__title { margin-right: 0; margin-left: -100px; }

html[dir="rtl"] .why-choose-one__right { margin-left: 0; margin-right: 70px; }
html[dir="rtl"] .why-choose-one__left .section-title__title { margin-right: 0; margin-left: -100px; }

/* Main nav spacing: the theme spaces menu items with margin-left on every
   item but the first (correct for LTR, where item 1 is leftmost and each
   later item needs a gap from its left neighbour). Under RTL the flex
   order visually mirrors so item 1 ("Home") sits rightmost, but its own
   margin-left:0 rule now falls on the wrong pair - the gap that's missing
   is between item 1 and item 2, which was rendering with no space at all.
   Mirror the rule: put the gap on margin-right instead, still skipping
   the first item. */
html[dir="rtl"] .main-menu .main-menu__list > li + li,
html[dir="rtl"] .stricky-header .main-menu__list > li + li {
    margin-left: 0;
    margin-right: 35px;
}

/* Odometer stat counters (e.g. "100+"): the digits and the adjacent "+"
   are separate inline elements, so the bidi algorithm can reorder them
   inside RTL text (showing "+100" or "001+" instead of "100+"). Isolate
   each as its own LTR run so they always render digit-then-plus. */
html[dir="rtl"] .odometer,
html[dir="rtl"] .odometer + span {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Phone numbers like "+968 78091943" have no letters to anchor a strong
   direction, so inside RTL text the bidi algorithm can scramble them
   (e.g. rendering as "78091943 968+"). Force an isolated LTR run. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] input[name="phone" i] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Marquee/ticker tracks (client-logo strip, "CRM/ERP/..." skills ticker,
   the contact-section sliding text) are built far wider than their
   container so they can scroll continuously. A block box wider than its
   container overflows to the *end* side of the writing direction - under
   direction:rtl that's the left, so these tracks were spilling tens of
   thousands of pixels off-screen to the left instead of starting flush
   at the container's left edge, making them invisible or reduced to a
   single pass before running out of visible content. Forcing ltr here
   restores the intended "start flush left, scroll left, clip" behavior
   regardless of page language. */
html[dir="rtl"] .brand-two__carousel,
html[dir="rtl"] .brand-two__marquee-track,
html[dir="rtl"] .sliding-text-three__wrap,
html[dir="rtl"] .sliding-text-three__list,
html[dir="rtl"] .contact-two__sliding-text-list {
    direction: ltr;
}