/* ==========================================================================
   RTL layer - loaded only by the Arabic pages under /ar/.
   It never touches the English site: every rule is scoped to [dir="rtl"].
   The goal is to mirror the existing layout, not to restyle it.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

[dir="rtl"] {
    --font-arabic: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

/* ---------------------------------------------------------------- typography */

[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: var(--font-arabic);
    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"] li,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] em,
[dir="rtl"] label {
    font-family: var(--font-arabic);
    letter-spacing: normal;
}

/* Arabic has no uppercase; forcing it just breaks the glyphs. */
[dir="rtl"] .section-title span,
[dir="rtl"] .breadcrumb-list,
[dir="rtl"] .breadcrumb-list li,
[dir="rtl"] .breadcrumb-list li a,
[dir="rtl"] .widget-title h5,
[dir="rtl"] .link-card em,
[dir="rtl"] .primary-btn1,
[dir="rtl"] .primary-btn1 span,
[dir="rtl"] .eyebrow {
    text-transform: none;
}

/* Phone numbers and e-mail addresses read left-to-right even inside an Arabic
   sentence. Scope this to bare inline links only: tel:/mailto: is also used on
   cards and buttons whose own layout must not be forced to ltr/inline-block,
   and on those the Arabic label would render in the wrong order. */
[dir="rtl"] a[href^="tel:"]:not([class]),
[dir="rtl"] a[href^="mailto:"]:not([class]),
[dir="rtl"] .contact-card-value,
[dir="rtl"] .footer-contact a[href^="tel:"],
[dir="rtl"] .footer-contact a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Brand names (Zoho, Odoo, ERPNext, ERP, CRM...) sit inline inside Arabic
   sentences. They must stay inline - inline-block would add stray spacing
   and break line wrapping mid-sentence. */
[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline;
}

/* ------------------------------------------------------------------ layout */

[dir="rtl"] .container,
[dir="rtl"] .container-fluid,
[dir="rtl"] .row {
    direction: rtl;
}

[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;
}

[dir="rtl"] .justify-content-lg-end {
    justify-content: flex-start !important;
}

[dir="rtl"] .justify-content-lg-start {
    justify-content: flex-end !important;
}

[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ------------------------------------------------------------------ header */

[dir="rtl"] .header-section .main-menu ul,
[dir="rtl"] .nav-right,
[dir="rtl"] .contact-btn-and-language,
[dir="rtl"] .header-logo {
    direction: rtl;
}

[dir="rtl"] .main-menu ul li .submenu,
[dir="rtl"] .main-menu ul li ul {
    right: 0;
    left: auto;
    text-align: right;
}

[dir="rtl"] .main-menu ul li .submenu li a,
[dir="rtl"] .mega-menu-wrap a {
    text-align: right;
}

[dir="rtl"] .menu-item-has-children>a i,
[dir="rtl"] .drop-down i {
    margin-right: 6px;
    margin-left: 0;
}

/* The theme centres this list on its button with left:50% + translateX(-50%),
   which is direction-agnostic and already correct. Only the text needs
   mirroring - overriding the offset pushes it off the left edge in RTL. */
[dir="rtl"] .language-list {
    text-align: right;
}

[dir="rtl"] .mobile-menu,
[dir="rtl"] .mobile-menu-wrap {
    direction: rtl;
    text-align: right;
}

/* Arrow glyphs inside buttons point the other way in RTL. */
[dir="rtl"] .primary-btn1 span svg,
[dir="rtl"] .primary-btn2 span svg,
[dir="rtl"] .primary-btn3 span svg {
    transform: scaleX(-1);
}

[dir="rtl"] .primary-btn1>span {
    flex-direction: row;
}

/* -------------------------------------------------------------- components */

[dir="rtl"] .breadcrumb-list {
    direction: rtl;
    padding-right: 0;
}

[dir="rtl"] .breadcrumb-list li {
    margin-left: 8px;
    margin-right: 0;
}

[dir="rtl"] .outcome-list {
    padding-right: 0;
}

[dir="rtl"] .outcome-list li {
    padding-right: 28px;
    padding-left: 0;
}

[dir="rtl"] .outcome-list li::before {
    right: 0;
    left: auto;
}

[dir="rtl"] .feature-card,
[dir="rtl"] .link-card,
[dir="rtl"] .feature-card.is-wide {
    text-align: right;
}

[dir="rtl"] .feature-card::before,
[dir="rtl"] .link-card::before,
[dir="rtl"] .feature-card::after,
[dir="rtl"] .link-card::after {
    right: auto;
    left: 0;
}

[dir="rtl"] .link-card em {
    float: left;
}

[dir="rtl"] .section-title,
[dir="rtl"] .section-title.two,
[dir="rtl"] .banner-content {
    text-align: right;
}

[dir="rtl"] .intro-media .intro-tag {
    right: auto;
    left: 16px;
}

[dir="rtl"] .riyadh-cta-content,
[dir="rtl"] .riyadh-cta-wrap {
    text-align: right;
}

[dir="rtl"] .riyadh-cta-btns {
    justify-content: flex-start;
}

[dir="rtl"] .faq-item,
[dir="rtl"] .accordion-item,
[dir="rtl"] .accordion-button {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] blockquote {
    border-right: 3px solid currentColor;
    border-left: 0;
    padding-right: 20px;
    padding-left: 0;
}

/* ------------------------------------------------------------------ footer */

[dir="rtl"] .footer-section,
[dir="rtl"] .footer-widget,
[dir="rtl"] .footer-menu,
[dir="rtl"] .footer-bottom {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .widget-list,
[dir="rtl"] .footer-widget ul {
    padding-right: 0;
}

[dir="rtl"] .widget-list li a svg,
[dir="rtl"] .footer-widget ul li a svg {
    transform: scaleX(-1);
    margin-right: 6px;
    margin-left: 0;
}

[dir="rtl"] .footer-bottom ul {
    padding-right: 0;
}

/* ------------------------------------------------------------------ forms */

[dir="rtl"] .form-inner input,
[dir="rtl"] .form-inner textarea,
[dir="rtl"] .form-inner select,
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

/* Phone number fields stay left-to-right so the digits read correctly. */
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* ----------------------------------------------------------------- sliders */

/* Swiper and Slick compute transforms in pixels, so the track itself stays
   LTR. Only the content inside each slide is mirrored. */
[dir="rtl"] .swiper-slide,
[dir="rtl"] .slick-slide {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .swiper-button-next svg,
[dir="rtl"] .swiper-button-prev svg,
[dir="rtl"] .slider-btn svg {
    transform: scaleX(-1);
}

/* Marquee keeps its original direction - it is decorative. */
[dir="rtl"] .marquee-wrapper,
[dir="rtl"] .client-marquee {
    direction: ltr;
}

/* --------------------------------------------------------------- utilities */

[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 0;
    padding-left: 0;
}

[dir="rtl"] .list-style ul,
[dir="rtl"] .content-list {
    padding-right: 18px;
    padding-left: 0;
}

[dir="rtl"] .scroll-btn,
[dir="rtl"] .back-to-top {
    right: auto;
    left: 24px;
}

[dir="rtl"] .whatsapp-float,
[dir="rtl"] .floating-whatsapp {
    left: 24px;
    right: auto;
}

/* ==========================================================================
   RTL corrections - second pass
   Issues found on the Arabic build: the "Backed by" badge sat on top of the
   heading, Latin brand names inside Arabic sentences rendered with the wrong
   font and could pick up neighbouring punctuation, and a few animated
   headings kept transforms that pushed text out of its box.
   ========================================================================== */

/* --- "Backed by" badge -------------------------------------------------- */

/* margin-left:auto pushes the badge to the right edge in LTR. In RTL the
   start edge is the right, so the auto margin has to swap or the badge
   collides with the heading beneath it. */
[dir="rtl"] .section-title .backed-badge,
[dir="rtl"] .backed-badge {
    margin-left: 0;
    margin-right: auto;
    padding: 9px 16px 9px 20px;
    flex-direction: row;
    float: none;
    clear: both;
}

[dir="rtl"] .section-title .backed-badge span {
    letter-spacing: normal;
    text-transform: none;
}

/* Do NOT set `position` here. On desktop brand.css lifts the badge out of
   flow (position:absolute) so it can sit in the corner opposite the heading;
   forcing position:relative put it back in flow directly above the heading,
   where the two boxes met and overlapped by a couple of pixels. Only the
   stacking order is worth asserting. */
[dir="rtl"] .section-title .backed-badge {
    display: flex;
    z-index: 2;
}

[dir="rtl"] .home6-about-section .section-title h2,
[dir="rtl"] .section-title .backed-badge + h2 {
    clear: both;
    margin-top: 0;
}

/* --- animated headings -------------------------------------------------- */

/* GSAP SplitText is disabled for RTL in custom.js, so headings animate as a
   whole element. These guard against any leftover split markup and stop a
   heading overflowing its container while it animates. */
[dir="rtl"] .text-anim {
    display: block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* Do NOT force display/transform on the split word elements: GSAP animates
   them via transform and opacity, and an !important override here stops the
   reveal tween from ever showing the heading. */

/* Circular rotating text is decorative and Latin-only; keep it LTR. */
[dir="rtl"] .circular-text,
[dir="rtl"] .circular-text2 {
    direction: ltr;
}

/* --- Latin inside Arabic ------------------------------------------------ */

/* Brand and product names (ERP, CRM, Zoho, Odoo, ERPNext, ZATCA, WMS...)
   stay in Latin script inside Arabic sentences. Isolating them keeps the
   bidi algorithm from dragging adjacent punctuation into the Latin run, and
   the font stack renders them in a Latin face rather than the Arabic one. */
[dir="rtl"] .ltr,
[dir="rtl"] bdi,
[dir="rtl"] code,
[dir="rtl"] kbd {
    unicode-bidi: isolate;
    font-family: var(--font-poppins), "Cairo", sans-serif;
}

/* Latin headings and buttons that are entirely brand names read better
   without the Arabic font's wider default tracking. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    word-spacing: normal;
    line-height: 1.45;
}

[dir="rtl"] .feature-card h3,
[dir="rtl"] .link-card h3 {
    line-height: 1.5;
}

/* --- overlap guards ----------------------------------------------------- */

/* Anything absolutely positioned from the left in the LTR design needs its
   offset mirrored, otherwise it lands on top of the content in RTL. */
[dir="rtl"] .section-title span.black,
[dir="rtl"] .section-title .eyebrow {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .banner-content h1,
[dir="rtl"] .banner-content .breadcrumb-list {
    position: relative;
    z-index: 1;
}

[dir="rtl"] .intro-media,
[dir="rtl"] .feature-card,
[dir="rtl"] .link-card {
    overflow: hidden;
}

/* Counters and stat blocks keep their digits left-to-right. */
[dir="rtl"] .counter-number,
[dir="rtl"] .odometer,
[dir="rtl"] .counter {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* --- absolutely-positioned elements need their offset mirrored ----------- */

/* brand.css anchors the "Backed by" badge to the container's right edge on
   desktop (position:absolute; right:<gutter>). An offset written as `right`
   does not mirror on its own, so in RTL the badge stayed on the right and
   collided with the heading. Anchor it to the left edge instead. */
@media (min-width: 992px) {
    [dir="rtl"] .home6-about-section .section-title .backed-badge {
        right: auto;
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        margin: 0;
    }
}

/* Below 992px the badge is a normal flex item again, so the auto margin is
   what positions it. */
@media (max-width: 991px) {
    [dir="rtl"] .section-title .backed-badge {
        margin-left: 0;
        margin-right: auto;
    }
}

/* --- off-canvas mobile menu --------------------------------------------- */

/* The drawer is anchored left:0 and parked off-screen with
   translateX(-100%). In an RTL document, content sitting to the left of the
   viewport is *after* the end of the flow, so Chrome counts it as scrollable
   overflow and the whole page gains ~300px of horizontal scroll on mobile.
   Parking it off-screen to the right fixes the scroll and makes the drawer
   slide in from the correct side for Arabic. */
@media only screen and (max-width: 991px) {

    [dir="rtl"] header.style-1 .main-menu,
    [dir="rtl"] header.style-2 .main-menu,
    [dir="rtl"] header.style-1.it-company-header .main-menu {
        left: auto;
        right: 0;
        transform: translateX(100%);
        border-right: 0;
        border-left: 1px solid var(--borders-color);
    }

    [dir="rtl"] header.style-1 .main-menu.show-menu,
    [dir="rtl"] header.style-2 .main-menu.show-menu,
    [dir="rtl"] header.style-1.it-company-header .main-menu.show-menu {
        transform: translateX(0);
    }

    [dir="rtl"] header.style-1 .main-menu .mobile-menu-logo,
    [dir="rtl"] header.style-2 .main-menu .mobile-menu-logo {
        text-align: right;
    }

    /* The close button and the submenu +/- toggles are absolutely placed
       from the left in the source design. */
    [dir="rtl"] .main-menu .menu-close-btn {
        margin-left: 0;
        margin-right: auto;
    }

    [dir="rtl"] .main-menu .menu-list li .dropdown-icon,
    [dir="rtl"] .main-menu .menu-list li a i.bi-plus,
    [dir="rtl"] .main-menu .menu-list li a i.bi-minus {
        right: auto;
        left: 0;
    }
}

/* NOTE: deliberately no `overflow-x: hidden` on body here. It hides sideways
   overflow but also turns body into a scroll container, which breaks
   ScrollTrigger/ScrollSmoother position maths and leaves every animated
   heading stuck at opacity 0. The off-canvas fix above removes the overflow
   at source, so the hack is not needed. */

/* Card- and button-shaped tel:/mailto: links keep the document direction so
   their Arabic label stays in the right order; only the number itself is
   isolated. */
[dir="rtl"] a.contact-card,
[dir="rtl"] a.primary-btn1[href^="tel:"],
[dir="rtl"] a.primary-btn1[href^="mailto:"] {
    direction: rtl;
    unicode-bidi: normal;
}

[dir="rtl"] a.contact-card {
    display: flex;
    text-align: right;
}

/* ==========================================================================
   Header dropdowns - RTL
   The theme positions these with selectors like
   `header.style-1 .main-menu>ul>li ul.sub-menu` (0,3,4). The earlier generic
   rules in this file were less specific and silently lost, so in Arabic the
   submenu still opened from the left with left-aligned text and looked cut
   off. These match the theme's own selector depth for all header variants.
   ========================================================================== */

[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu,
[dir="rtl"] header.style-3 .main-menu>ul>li ul.sub-menu,
[dir="rtl"] .main-menu>ul>li ul.sub-menu {
    left: auto;
    right: 0;
    text-align: right;
}

/* Nested submenu opens further to the left in RTL, not the right. */
[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu ul.sub-menu,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu ul.sub-menu,
[dir="rtl"] .main-menu>ul>li ul.sub-menu ul.sub-menu {
    right: 100%;
    left: auto;
}

/* Row content and the chevron that sits at the far edge of each item. */
[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu>li,
[dir="rtl"] .main-menu>ul>li ul.sub-menu>li {
    text-align: right;
}

[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li i,
[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li .dropdown-icon,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu>li i,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu>li .dropdown-icon,
[dir="rtl"] .main-menu>ul>li ul.sub-menu>li .dropdown-icon {
    right: auto;
    left: 20px;
    transform: scaleX(-1);
}

[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li>a,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu>li>a,
[dir="rtl"] .main-menu>ul>li ul.sub-menu>li>a {
    text-align: right;
    direction: rtl;
}

/* The little hover marker is drawn from the left edge in the LTR design. */
[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li>a::before,
[dir="rtl"] header.style-2 .main-menu>ul>li ul.sub-menu>li>a::before,
[dir="rtl"] .main-menu>ul>li ul.sub-menu>li>a::before {
    left: auto;
    right: 0;
}

[dir="rtl"] header.style-1 .main-menu>ul>li ul.sub-menu>li>a span svg,
[dir="rtl"] .main-menu>ul>li ul.sub-menu>li>a span svg {
    transform: scaleX(-1);
}

/* --- mega menu ---------------------------------------------------------- */

/* The wide mega menu is centred with left:50% + translateX(-50%); that keeps
   working in RTL. Only the inner alignment needs mirroring. */
[dir="rtl"] .main-menu>ul>li .mega-menu,
[dir="rtl"] .main-menu>ul>li .mega-menu2 {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .mega-menu .single-menu,
[dir="rtl"] .mega-menu2 .single-menu,
[dir="rtl"] .mega-menu .indutry-menu-area,
[dir="rtl"] .mega-menu .menu-row {
    text-align: right;
    direction: rtl;
}

/* At 992-1199px the theme pins the mega menu to the left edge. */
@media (min-width: 992px) and (max-width: 1199px) {
    [dir="rtl"] header.style-1 .main-menu>ul>li .mega-menu,
    [dir="rtl"] header.style-2 .main-menu>ul>li .mega-menu,
    [dir="rtl"] .main-menu>ul>li .mega-menu {
        left: auto;
        right: 0;
        transform: translateX(0);
    }
}

/* --- language dropdown -------------------------------------------------- */

/* Anchored with left:50% in the LTR design. In RTL the switcher sits at the
   top-left of the header, so anchoring the list to the button's left edge is
   what keeps all 180px of it on screen. */
[dir="rtl"] .language-area .language-list {
    text-align: right;
}

[dir="rtl"] .language-area .language-list li a {
    text-align: right;
    direction: rtl;
}

/* --- language switcher: make the current language obvious ---------------- */

/* The list now leads with the language the visitor is already reading. This
   marks it so nobody switches to English by reflex on an Arabic page. */
.language-list a.is-current {
    font-weight: 600;
    color: var(--primary-color1);
    pointer-events: none;
    position: relative;
}

.language-list a.is-current::after {
    content: "\2713";
    margin-inline-start: 8px;
    font-size: 0.85em;
}

/* Each option renders in its own script direction so "English" stays LTR in
   the Arabic menu and العربية stays RTL in the English menu. */
.language-list a[lang="en"] { direction: ltr; }
.language-list a[lang="ar"] { direction: rtl; }

/* --- mega-menu columns: mirror the asymmetric padding ------------------- */

/* .service-wrap carries `padding: 50px 0 50px 50px` - inset on the left only,
   because in LTR that is the side facing the menu edge. Flipped to RTL the
   column moves to the right of the grid, so the inset has to move with it or
   the headings and cards sit flush against the menu edge and read as cut off. */
[dir="rtl"] header.style-1 .main-menu>ul>li .mega-menu .menu-row .service-wrap,
[dir="rtl"] header.style-2 .main-menu>ul>li .mega-menu .menu-row .service-wrap,
[dir="rtl"] header.style-3 .main-menu>ul>li .mega-menu .menu-row .service-wrap,
[dir="rtl"] .mega-menu .menu-row .service-wrap {
    padding-left: 0;
    padding-right: 50px;
}

@media (max-width: 1399px) {
    [dir="rtl"] header.style-1 .main-menu>ul>li .mega-menu .menu-row .service-wrap,
    [dir="rtl"] header.style-2 .main-menu>ul>li .mega-menu .menu-row .service-wrap,
    [dir="rtl"] .mega-menu .menu-row .service-wrap {
        padding-left: 0;
        padding-right: 30px;
    }
}