body {
    text-align: right;
    direction: rtl;
}

/* ========================================
   ARABIC (RTL) MIRROR
   Loaded only on Arabic pages, after responsive.css: every left/right-specific
   rule of the design is mirrored here.
   ======================================== */

/* ---- Home hero: the text is on the right, so the dark side of the overlay is too ---- */
.hero-slide-overlay {
    background: linear-gradient(
        255deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.78) 35%,
        rgba(0, 0, 0, 0.45) 65%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.hero-slide-overlay::after {
    right: auto;
    left: 42%;
    transform: skewX(8deg);
}

.hero::before {
    left: auto;
    right: 5%;
    border-left: 0;
    border-right: 2px solid var(--color-Primary2);
}

.hero-vertical-text {
    right: auto;
    left: 2%;
    transform: translateY(-50%) rotate(-90deg);
}

.hero-progress {
    left: auto;
    right: 2%;
}

.hero-counter {
    left: auto;
    right: 5%;
}

.hero .owl-nav {
    right: auto;
    left: 5%;
}

/* the photo slides in from the left */
.hero-image {
    transform: translateX(-60px) scale(0.95);
}

.hero-image::before {
    right: auto;
    left: -15px;
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
}

@media (max-width: 992px) {
    /* centered on tablets/phones, as in English */
    .hero-counter {
        right: auto;
        left: 50%;
    }

    .hero .owl-nav {
        left: auto;
        right: 50%;
    }
}

/* ---- About collage: main photo on the right, round photo and its ring on the inner (left) side ---- */
.about-img-main {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}

.about-img-badge {
    right: auto;
    left: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.about-img-secondary {
    right: auto;
    left: 0;
}

.about-img-accent {
    right: auto;
    left: calc(var(--about-ring-gap) * -1);
}

@media (max-width: 576px) {
    .about-img-main {
        clip-path: none;
    }
}

/* ---- Arrows point left in Arabic. "scale" (not "transform") so the hover nudges written
   with transform: translateX(…) still apply, and now move towards the left too ---- */
i.fa-arrow-right,
i.fa-chevron-right,
i.bi-arrow-right,
i.bi-chevron-right {
    display: inline-block;
    scale: -1 1;
}

/* this hover nudge is on the wrapper, not the icon */
.about-social-card:hover .social-card-arrow {
    transform: translateX(-4px);
}

/* ---- Inner page banner (About, Services, Contact, Social): dark side, glow, line and the
   slanted bottom edge mirrored so the title on the right stays readable ---- */
.title-page {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}

.title-page-overlay {
    background: linear-gradient(
        245deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.72) 40%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.title-page-accent::before {
    left: auto;
    right: -15%;
    transform: rotate(-18deg);
    background: radial-gradient(circle at 70% 20%, rgba(240, 168, 41, 0.14), transparent 55%);
}

.title-page-accent::after {
    right: auto;
    left: 18%;
}

/* ---- About page: mission / goal / values ---- */
.mission-values-section::before {
    right: auto;
    left: -8%;
    transform: rotate(-18deg);
}

.mission-values-section::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, var(--color-Primary2), transparent);
}

/* accent bar, cut corner and glow on the far side of the text, as in English */
.mission-value-card {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}

.mission-value-card::after {
    right: auto;
    left: 0;
}

.mission-card-glow {
    right: auto;
    left: -70px;
}

.mission-card-icon {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
}

.value-mini-card::before {
    transform-origin: right;
}

.value-mini-card span {
    right: auto;
    left: 22px;
}

/* Bootstrap's (LTR build) breadcrumb floats the "/" to the left */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 0.5rem;
}

/* ---- Footer: heading underline under the text, link hover line on the reading side ---- */
.footer-heading::after {
    left: auto;
    right: 0;
}

.footer-links li a:hover {
    padding-left: 0;
    padding-right: 14px;
}

.footer-links li a:hover::before {
    margin-right: 0;
    margin-left: 4px;
}

/* ---- Red accent line above the service / blog card titles starts at the text edge ---- */
.project-card-body::before,
.blog-card-body::before {
    left: auto;
    right: 24px;
}

.blog-card-featured .blog-card-body::before {
    left: auto;
    right: 30px;
}

.blog-card-small .blog-card-body::before {
    left: auto;
    right: 22px;
}

/* ---- Site header & drawer ---- */
.site-nav-link::after {
    transform-origin: right;
}

.site-cta {
    padding: 0 24px 0 32px;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1100px) {
    .site-cta {
        padding: 0 18px 0 26px;
    }
}

/* the drawer slides in from the left */
.site-drawer {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
}

.site-drawer.is-open {
    transform: translateX(0);
}

.site-drawer-nav li {
    transform: translateX(-24px);
}

/* ---- Paid banners: the text sits on the right, so the dark side of the gradient does too ---- */
.ad-slot-banner--with-text::after {
    background: linear-gradient(
        255deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

.ad-slot-overlay {
    left: auto;
    right: 6%;
}