/* ==========================================================================
   KLINK MENA — RTL Overrides (loaded only when dir="rtl", i.e. Arabic)
   Base layout mirroring is handled by Bootstrap's own RTL stylesheet
   (css/bootstrap.rtl.min.css). This file fixes template-specific
   directional details that Bootstrap RTL does not know about.
   ========================================================================== */

body[dir="rtl"] {
  /* Overriding the template's own custom properties means every rule that
     reads var(--heading-font-family) / var(--body-font-family) — which is
     virtually every heading and paragraph in style.css — picks up Cairo
     automatically, with no specificity fight needed against the template's
     chained classes (.hero_title.tv_hero_title.hero_title_1 etc). */
  --heading-font-family: "Cairo", sans-serif;
  --body-font-family: "Cairo", sans-serif;
  font-family: "Cairo", sans-serif;
  text-align: right;
}

/* A few labels use a hardcoded font-family instead of the variable */
body[dir="rtl"] .menu-text,
body[dir="rtl"] .user-links li a {
  font-family: "Cairo", sans-serif;
}

/* Nav: flip margins used for spacing between menu items */
body[dir="rtl"] .main-menu .navigation > li {
  margin-left: 0;
}
body[dir="rtl"] .main-menu .navigation > li + li {
  margin-right: 30px;
  margin-left: 0;
}

/* Buttons with arrow icons: mirror the arrow direction */
body[dir="rtl"] .theme-btn-arrow-left i,
body[dir="rtl"] .theme-btn-arrow-right i {
  transform: scaleX(-1);
}
body[dir="rtl"] .theme-btn-main {
  flex-direction: row-reverse;
}

/* Hero: the photo is pinned with a hardcoded "right:0". Rather than mirror
   the whole hero (which then requires re-flipping every decorative badge
   nested inside .content-box), we keep the photo exactly where it is and
   push the text block to the free (left) side instead. Physical left/right
   properties are used here on purpose — they are unambiguous, and every
   rule in this file is already gated by body[dir="rtl"]. */
body[dir="rtl"] .banner-section.style_two .content-box {
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 991.98px) {
  body[dir="rtl"] .banner-section.style_two .content-box {
    max-width: 100%;
    margin-right: 0;
  }
}

/* Sections with two-column image/content layout: swap visual order */
body[dir="rtl"] .about-section-two .row,
body[dir="rtl"] .skill-section .row,
body[dir="rtl"] .process-section-two .row {
  flex-direction: row-reverse;
}

/* Service cards / numbers: align number to the left in RTL */
body[dir="rtl"] .service-no {
  right: auto;
  left: 20px;
}

/* Marquee direction: reverse scroll so it still reads naturally in RTL */
body[dir="rtl"] .marquee-group,
body[dir="rtl"] .hero-flags-scroll {
  animation-direction: reverse;
}

/* Choose-us icon boxes: text stays right-aligned */
body[dir="rtl"] .choose-single-box {
  text-align: right;
}

/* Contact form: right-align labels/inputs */
body[dir="rtl"] .contact-forms-two input,
body[dir="rtl"] .contact-forms-two textarea,
body[dir="rtl"] .contact-forms-two select {
  text-align: right;
  direction: rtl;
}

/* Footer widgets: mirror text alignment */
body[dir="rtl"] .footer-widget {
  text-align: right;
}
body[dir="rtl"] .user-links a i {
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 8px;
}

/* Language switcher active state */
.lang-switch a.active {
  color: var(--theme-color1);
  font-weight: 700;
}