/* ============================================
   AXIS Corporation — RTL / Arabic Override
   ============================================
   IMPORTANT — flex layout principle:
   html[dir="rtl"] already makes flex-direction:row flow RIGHT→LEFT
   natively. Never add flex-direction:row-reverse here — that would
   reverse an already-reversed row back to LTR (double reversal).
   Only override text-align, physical padding/margin, absolute
   positioning, and things that don't respond to direction:rtl.
   ============================================ */

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

/* ---- Base direction ---- */
html[dir="rtl"] {
    direction: rtl;
}
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] label,
html[dir="rtl"] select {
    font-family: "Cairo", sans-serif !important;
}
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", sans-serif !important;
}
html[dir="rtl"] p { line-height: 1.9; }

/* ---- Navbar ---- */
/* direction:rtl makes flex rows flow right→left natively.
   No flex-direction overrides needed — just fix text alignment,
   the submenu dropdown position, and the dropdown chevron margin. */
html[dir="rtl"] .nav-menu-wrapper { flex: 1; }
html[dir="rtl"] .header-btn { margin-right: 0; margin-left: 16px; }
html[dir="rtl"] .navbar-brand { margin-right: 0 !important; margin-left: 16px; }
html[dir="rtl"] .nav-item .nav-link { text-align: right; }
html[dir="rtl"] .navbar-nav .nav-item { text-align: right; }
/* Dropdown chevron: move from left of text to right (physical) */
html[dir="rtl"] .main-menu ul li.submenu > a::after { margin-left: 0; margin-right: 8px; float: left; }
/* Submenu dropdown: open from right edge, not left */
html[dir="rtl"] .submenu > ul { right: 0; left: auto; text-align: right; }
html[dir="rtl"] .main-menu ul ul { text-align: right; }

/* Mobile SlickNav — direction:rtl handles flow; just align text */
html[dir="rtl"] .slicknav_menu,
html[dir="rtl"] .slicknav_nav { text-align: right; }
html[dir="rtl"] .slicknav_nav li { text-align: right; }
html[dir="rtl"] .slicknav_arrow { float: left; margin-left: 0; margin-right: 0.4em; }

/* ---- Buttons ---- */
/* Move the arrow-circle decoration from the right side to the left side */
html[dir="rtl"] .btn-default {
    margin-right: 0;
    margin-left: 50px;
}
html[dir="rtl"] .btn-default::before {
    right: auto;
    left: -50px;
    transform: translateY(-50%) scaleX(-1); /* flip SVG arrow to point left */
}
html[dir="rtl"] .btn-default:hover::before {
    transform: translateY(-50%) scaleX(-1) rotate(45deg);
}
@media only screen and (max-width: 991px) {
    html[dir="rtl"] .btn-default {
        margin-right: 0;
        margin-left: 46px;
    }
    html[dir="rtl"] .btn-default::before {
        right: auto;
        left: -46px;
        transform: translateY(-50%) scaleX(-1);
    }
    html[dir="rtl"] .btn-default:hover::before {
        transform: translateY(-50%) scaleX(-1) rotate(45deg);
    }
}

/* Button wrapper alignment — align to the right (RTL content start) */
html[dir="rtl"] .hero-btn,
html[dir="rtl"] .about-footer-btn,
html[dir="rtl"] .faq-content-btn,
html[dir="rtl"] .why-choose-btn,
html[dir="rtl"] .industries-btn,
html[dir="rtl"] .about-rating-btn,
html[dir="rtl"] .pricing-item-btn { text-align: right; }

/* ---- Hero ---- */
/* Flip gradient so the dark side faces right — where RTL content sits */
html[dir="rtl"] .hero::before {
    background: linear-gradient(90deg, rgba(24, 25, 26, 0.42) 0%, rgba(24, 25, 26, 0.82) 60%, rgba(24, 25, 26, 0.92) 100%);
}
html[dir="rtl"] .hero-contant { text-align: right; }
html[dir="rtl"] .hero-content-body { justify-content: flex-start; }
html[dir="rtl"] .hero-info-list ul { justify-content: flex-start; }
html[dir="rtl"] .satisfy-client-content { text-align: right; }

/* ---- Section Titles ---- */
html[dir="rtl"] .section-title { text-align: right; }
html[dir="rtl"] .section-title h1,
html[dir="rtl"] .section-title h2,
html[dir="rtl"] .section-title p,
html[dir="rtl"] .section-sub-title { text-align: right; }
html[dir="rtl"] .section-title-center,
html[dir="rtl"] .section-title-center h2,
html[dir="rtl"] .section-title-center p,
html[dir="rtl"] .section-title-center .section-sub-title { text-align: center; }

/* ---- About Us ---- */
html[dir="rtl"] .about-us-item-contant { text-align: right; }
html[dir="rtl"] .about-rating-counter-content { text-align: right; }

/* ---- Section Footer Text ---- */
html[dir="rtl"] .section-footer-text { text-align: right; }
html[dir="rtl"] .section-footer-text ul { justify-content: flex-start; }

/* ---- How Work / Vision ---- */
html[dir="rtl"] .how-work-item { text-align: right; }
html[dir="rtl"] .how-work-item-contant { text-align: right; }
html[dir="rtl"] .how-work-item-contant ul { padding-right: 18px; padding-left: 0; text-align: right; }

/* ---- Industries / Capabilities ---- */
html[dir="rtl"] .our-industries-content { text-align: right; }
html[dir="rtl"] .industries-body-item-content { text-align: right; }
html[dir="rtl"] .industries-contact-box-content { text-align: right; }

/* ---- Why Choose ---- */
html[dir="rtl"] .why-choose-contant-box { text-align: right; }
html[dir="rtl"] .why-choose-body-list ul { text-align: right; padding-right: 18px; padding-left: 0; }

/* ---- Project / Branch Cards ---- */
html[dir="rtl"] .project-item-contant { text-align: right; }

/* ---- Service Items ---- */
html[dir="rtl"] .service-item-title { text-align: right; }

/* ---- Pricing ---- */
html[dir="rtl"] .pricing-item { text-align: right; }
html[dir="rtl"] .pricing-item-list ul { padding-right: 18px; padding-left: 0; }

/* ---- CTA Map Box ---- */
html[dir="rtl"] .cta-item-contant-box { text-align: right; }
html[dir="rtl"] .cta-box-counter-contant { text-align: right; }

/* ---- FAQ / Accordion ---- */
html[dir="rtl"] .our-faq-contant { text-align: right; }
/* Bootstrap sets text-align:left and margin-left:auto on accordion-button;
   override both so chevron lands on the LEFT in RTL */
html[dir="rtl"] .accordion-button { text-align: right; }
html[dir="rtl"] .accordion-button::after { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .accordion-body { text-align: right; }

/* ---- Footer ---- */
html[dir="rtl"] .footer-contact-form { text-align: right; }
html[dir="rtl"] .about-footer { text-align: right; }
html[dir="rtl"] .footer-links { text-align: right; }
html[dir="rtl"] .form-control { text-align: right; }

/* ---- Bootstrap RTL Utilities ---- */
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* ---- Axis Management — CI Specific ---- */
/* Timeline: move the vertical line from left edge to right edge */
html[dir="rtl"] .ci-timeline::before { left: auto; right: 18px; }
html[dir="rtl"] .ci-timeline-body { text-align: right; }
html[dir="rtl"] .downtime-card { text-align: right; }
html[dir="rtl"] .dmaic-step { text-align: right; }
/* DMAIC arrow: flip from right-pointing to left-pointing */
html[dir="rtl"] .dmaic-step:not(:last-child)::after {
    right: auto;
    left: -1px;
    border-left: 14px solid var(--accent-color, #1a60d4);
    border-right: none;
}
html[dir="rtl"] .belt-card { text-align: right; }
html[dir="rtl"] .belt-card ul { padding-right: 18px; padding-left: 0; }
html[dir="rtl"] .why-ci-card { text-align: right; }
html[dir="rtl"] .roadmap-card { text-align: right; }
html[dir="rtl"] .roadmap-card ul { padding-right: 18px; padding-left: 0; }
html[dir="rtl"] .ci-tool-card { text-align: right; }
html[dir="rtl"] .cert-badge { font-family: "Cairo", sans-serif !important; }

/* ---- Language Switcher ---- */
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255,255,255,0.55);
    color: #ffffff !important;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s;
    margin-left: 10px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lang-switch-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #fff !important;
    text-decoration: none !important;
    border-color: rgba(255,255,255,0.85);
}
html[dir="rtl"] .lang-switch-btn {
    margin-left: 0;
    margin-right: 10px;
    font-family: "Poppins", sans-serif !important;
    letter-spacing: 0.3px;
}

/* ---- SplitText / split-line fixes for Arabic ---- */
/* SplitText adds overflow:hidden to .split-line line wrappers which clips
   offset words during animation. Remove the clip. */
html[dir="rtl"] .split-line {
    overflow: visible !important;
}

/* Fallback: ensure text in dark sections is always white regardless of
   animation state, so a missed ScrollTrigger never leaves headings invisible. */
html[dir="rtl"] .dark-section .section-title h1,
html[dir="rtl"] .dark-section .section-title h2,
html[dir="rtl"] .dark-section .section-title h3,
html[dir="rtl"] .dark-section .section-title p,
html[dir="rtl"] .dark-section .section-title .section-sub-title,
html[dir="rtl"] .dark-section .section-title-content p,
html[dir="rtl"] .dark-section .section-footer-text p,
html[dir="rtl"] .dark-section .section-footer-text ul li,
html[dir="rtl"] .dark-section h1,
html[dir="rtl"] .dark-section h2,
html[dir="rtl"] .dark-section h3,
html[dir="rtl"] .dark-section h4,
html[dir="rtl"] .dark-section p,
html[dir="rtl"] .dark-section li {
    color: var(--white-color, #ffffff) !important;
}
html[dir="rtl"] .dark-section .split-line > div,
html[dir="rtl"] .dark-section .split-line span {
    color: inherit !important;
}