/* ============================================================
   RTL / Arabic Style Overrides
   Applied when html[dir="rtl"] is set via language switcher
   ============================================================ */

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

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

/* ---- Hide ALL Google Translate UI (aggressive) ---- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate,
.skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-menu-value,
.goog-te-menu2,
.goog-te-menu2-item,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-yAWNEb-L7lbkb {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Google Translate injects a top offset on body — hard reset */
body {
    top: 0 !important;
    position: static !important;
    margin-top: 0 !important;
}

/* ---- Language Toggle Button — mobile sidebar version ---- */
.lang-switcher-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 168, 90, 0.15);
    border: 1.5px solid rgba(200, 168, 90, 0.5);
    border-radius: 50px;
    color: #e8d49a;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 12px;
}

.lang-switcher-mobile:hover {
    background: rgba(200, 168, 90, 0.35);
    color: #fff;
}

/* ============================================================
   RTL-SPECIFIC OVERRIDES
   ============================================================ */

/* ---- RTL: Flip spacing utilities ---- */
html[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.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"] .mr-10 {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[dir="rtl"] .ml-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

html[dir="rtl"] .ml-5 {
    margin-left: 0 !important;
    margin-right: 3rem !important;
}

html[dir="rtl"] .pl-50 {
    padding-left: 0 !important;
    padding-right: 50px !important;
}

html[dir="rtl"] .pl-xl-10 {
    padding-left: 0 !important;
    padding-right: 10px !important;
}

html[dir="rtl"] .pr-50 {
    padding-right: 0 !important;
    padding-left: 50px !important;
}

/* ---- RTL: Navigation ---- */
html[dir="rtl"] .main-menu>ul {
    padding-right: 0;
}

html[dir="rtl"] .main-menu ul li {
    float: right;
}

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

html[dir="rtl"] .main-menu ul li:hover .sub-menu {
    left: auto;
    right: 0;
}

html[dir="rtl"] .header-right {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mobile-nav-bar {
    margin-left: 0 !important;
    margin-right: 12px;
}

/* ---- RTL Mobile: Fix header layout on small screens ---- */
@media (max-width: 991px) {
    html[dir="rtl"] .custom-responsive-navbar {
        direction: ltr;
        /* keep logo LEFT, hamburger RIGHT on mobile */
    }

    html[dir="rtl"] .header-right {
        flex-direction: row;
        /* language btn stays left of hamburger */
        gap: 4px;
    }

    html[dir="rtl"] .mobile-nav-bar {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Language button — smaller on mobile */
    html[dir="rtl"] .ah-lang-toggle {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
}

/* ---- RTL: Mobile Sidebar ---- */
html[dir="rtl"] .mobile-nav {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] .mobile-nav.active {
    transform: translateX(0);
}

html[dir="rtl"] .close-nav {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .consulter-mobile-nav ul {
    padding-right: 0;
    text-align: right;
}

/* ---- RTL: Header top bar ---- */
html[dir="rtl"] .header-cta ul {
    padding-right: 0;
    justify-content: flex-start;
}

html[dir="rtl"] .header-right-socail {
    flex-direction: row-reverse;
}

/* ---- RTL: Footer ---- */
html[dir="rtl"] .single-footer-wid {
    text-align: right;
}

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

/* html[dir="rtl"] .social-links { flex-direction: row-reverse; } */
html[dir="rtl"] .footer-contact-list .icon-box {
    margin-right: 0;
    margin-left: 12px;
}

/* ============================================================
   RTL: Side Sticky CTA Bar
   Bar stays RIGHT side. Lock width so RTL flex-end flip
   cannot stretch the container and break hover hit areas.
   ============================================================ */
html[dir="rtl"] .side-cta-bar {
    right: 0;
    left: auto;
    width: 55px;
    /* hard lock — same as LTR */
    align-items: flex-end;
    /* keep items right-anchored in RTL too */
    direction: ltr;
    /* prevent RTL from flipping flex-end meaning */
}

html[dir="rtl"] .side-cta-item {
    direction: ltr;
    /* icon left, text right — readable on hover */
}

/* ============================================================
   RTL: Our Network Marquee — force LTR so animation + overflow work
   ============================================================ */
html[dir="rtl"] .partners-marquee-wrapper {
    direction: ltr;
    /* fix RTL overflow clipping hiding logos */
}

html[dir="rtl"] .partners-marquee-container {
    direction: ltr;
    animation-name: marquee;
    /* keep the same LTR scroll — logos are images */
    animation-duration: 35s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

html[dir="rtl"] .partners-track {
    direction: ltr;
}

/* ============================================================
   RTL: Slick Testimonial Slider
   Force direction:ltr on the entire section so Slick's
   LTR positioning works correctly. Re-apply RTL only to
   the actual slide content so Arabic text reads correctly.
   ============================================================ */
html[dir="rtl"] section.testimonial {
    direction: ltr;
}

html[dir="rtl"] .testimonial .premium-testimonial-card,
html[dir="rtl"] .testimonial .ptc-header,
html[dir="rtl"] .testimonial .ptc-body {
    direction: rtl;
    text-align: right;
}

/* ---- RTL: Testimonial arrow gap ---- */
html[dir="rtl"] .testimonial .testimonial-slider-arrows {
    gap: 16px;
    justify-content: flex-start;
    /* arrows on the left in Arabic */
}

/* ---- RTL: Floating WhatsApp ---- */
html[dir="rtl"] .floating-whatsapp {
    right: auto;
    left: 20px;
}

/* ---- RTL: General text & layout ---- */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] span:not(.notranslate),
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"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-md-start {
    text-align: right !important;
}

/* ---- RTL: Icon spacing flip ---- */
html[dir="rtl"] .icon-phone::before,
html[dir="rtl"] .icon-email::before,
html[dir="rtl"] i[class*="fa-"] {
    margin-right: 0;
    margin-left: 6px;
}

/* ---- RTL: Section headings / sub-titles ---- */
html[dir="rtl"] .section-title {
    text-align: right;
}

html[dir="rtl"] .section-title::before {
    right: 0;
    left: auto;
}

/* ---- RTL: Breadcrumb ---- */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

/* ---- RTL: Slick slider arrows ---- */
html[dir="rtl"] .slick-prev {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .slick-next {
    left: auto;
    right: 20px;
}