/* RTL Fixes for Arabic Language */

/* Preloader fix: force physical left position so spans stay centered in RTL */
.preloader span {
    left: 0;
    right: auto;
}


/* Swap padding-left with padding-right */
.pl-55 {
    padding-right: 55px !important;
    padding-left: 0 !important;
}

.pl-60 {
    padding-right: 60px !important;
    padding-left: 0 !important;
}

.pl-70 {
    padding-right: 70px !important;
    padding-left: 0 !important;
}

.pr-55 {
    padding-left: 55px !important;
    padding-right: 0 !important;
}

.pr-60 {
    padding-left: 60px !important;
    padding-right: 0 !important;
}

.pr-70 {
    padding-left: 70px !important;
    padding-right: 0 !important;
}

/* Swap margin-left with margin-right */
.ml-20 {
    margin-right: 20px !important;
    margin-left: 0 !important;
}

.ml-25 {
    margin-right: 25px !important;
    margin-left: 0 !important;
}

.ml-35 {
    margin-right: 35px !important;
    margin-left: 0 !important;
}

.mr-20 {
    margin-left: 20px !important;
    margin-right: 0 !important;
}

.mr-25 {
    margin-left: 25px !important;
    margin-right: 0 !important;
}

.mr-35 {
    margin-left: 35px !important;
    margin-right: 0 !important;
}

/*
 * Hero under absolute header (projects + similar)
 * .header-transparent is position:absolute; z-index:9 while .tp-hero-2-title uses z-index:99,
 * so hero text can paint over the navbar. Arabic menu is often taller, so overlap looks worse.
 */
html[dir="rtl"] #header-sticky.header-transparent,
html[dir="rtl"] #header-sticky.header-sticky {
    z-index: 120 !important;
}

/*
 * Projects hero (RTL): header is position:absolute — push the whole block down.
 * Only wrapper padding (no background-clip / no huge inner padding overrides).
 */
html[dir="rtl"] .tp-hero-2-wrapper {
    padding-top: 92px;
}

@media (max-width: 991px) {
    html[dir="rtl"] .tp-hero-2-wrapper {
        padding-top: 80px;
    }
}

/*
 * Home hero button (RTL): the circle is on the LEFT in RTL, so pr-15 gives
 * extra space on the wrong side and the gooey filter clips on mobile.
 * Swap padding-right → padding-left so the filter has room on the left.
 */
.creative-2-hero-btn .tp-btn-black.btn-green-light-bg.pr-15 {
    padding-right: 0 !important;
    padding-left: 15px !important;
}

/* FAQ + Contact hero: same absolute header; push block below nav in RTL */
html[dir="rtl"] .tp-contact-us-ptb.p-relative {
    padding-top: 92px;
}

@media (max-width: 991px) {
    html[dir="rtl"] .tp-contact-us-ptb.p-relative {
        padding-top: 80px;
    }
}

/* ── Testimonial slider ─────────────────────────────────────────────────────
   In LTR the slider uses margin-right: -370px to "bleed" right and peek at
   the next slide. In RTL that pushes the active slide off-screen to the right,
   so we flip the extension to the left instead.
─────────────────────────────────────────────────────────────────────────── */
.creative-testimonial-active {
    margin-right: 0 !important;
    margin-left: -370px;
}
@media (max-width: 767px) {
    .creative-testimonial-active {
        margin-left: 0 !important;
    }
}

/* Avatar image: gap goes to the left in RTL */
.creative-testimonial-avater img {
    margin-right: 0;
    margin-left: 13px;
}

/* Quote icon span: gap goes to the left in RTL */
.creative-testimonial-text p span {
    margin-right: 0;
    margin-left: 8px;
}

/* Mobile card: looser padding on small screens */
@media (max-width: 575px) {
    .creative-testimonial-item {
        padding: 22px 18px;
    }
    .creative-testimonial-text p {
        font-size: 20px;
    }
}