/* =========================
   RTL / Arabic Support
   ========================= */

/* Arabic font — !important overrides all specific
   font-family declarations in style.css */
html[dir="rtl"],
html[dir="rtl"]
  *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(
    .icofont
  ):not([class*="icofont-"]) {
  font-family: "Noto Sans Arabic", "Open Sans", sans-serif !important;
}

/* Why section paragraph: preserve line breaks from i18n */
[data-i18n="why.p"] {
  white-space: pre-line;
}

/* General RTL text alignment */
html[dir="rtl"] .about-details,
html[dir="rtl"] .about-details p,
html[dir="rtl"] .about-details.how-we-do .how-content p {
  text-align: right;
}

/* Hero RTL */
html[dir="rtl"] .hero.text-center,
html[dir="rtl"] .hero.text-center .single-slide .container {
  text-align: right;
}

html[dir="rtl"] .hero .single-slide .container {
  margin-left: auto;
  margin-right: 0;
  padding-left: 15px;
  padding-right: clamp(15px, 10vw, 380px);
}

/* Flip the hero background image horizontally in RTL
   so the image subject moves to the left and text on the right stays clear */
html[dir="rtl"] .hero .single-slide {
  background-image: none !important; /* hide original bg, we use ::after instead */
}

html[dir="rtl"] .hero .single-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/hero-bg.webp);
  background-size: cover;
  background-position: right center;
  transform: scaleX(-1);
}

html[dir="rtl"] .hero .single-slide::before {
  z-index: 1;
  background: linear-gradient(
    -90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0) 70%
  );
}

html[dir="rtl"] .hero .single-slide .container {
  z-index: 2;
}

@media (max-width: 767px) {
  html[dir="rtl"] .hero.text-center,
  html[dir="rtl"] .hero.text-center .single-slide .container {
    text-align: center;
  }
  html[dir="rtl"] .hero .single-slide .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Navbar RTL */
html[dir="rtl"] .zcv-menu a:last-child {
  margin-right: 0;
  margin-left: 10px;
}

@media (max-width: 991px) {
  html[dir="rtl"] .zcv-menu a:last-child {
    margin-left: 0;
  }
}

/* Flip row order for image+text sections in RTL */
@media (min-width: 992px) {
}

@media (max-width: 991px) {
  html[dir="rtl"] .contact-wrap {
    flex-direction: column;
  }
}

@media (max-width: 550px) {
  html[dir="rtl"] .site-footer .container {
    flex-direction: column;
  }
}

/* Scrollup RTL */
html[dir="rtl"] .scrollup {
  right: auto;
  left: 25px;
}

/* Award badges RTL */
html[dir="rtl"] .award-badges {
  left: auto;
  right: 12px;
}

html[dir="rtl"] .award-cta {
  justify-content: flex-start;
}

/* Media controls RTL */
html[dir="rtl"] .media-head {
  padding-right: 0;
  padding-left: 120px;
}

html[dir="rtl"] .media-controls {
  right: auto;
  left: 0;
}

@media (max-width: 991px) {
  html[dir="rtl"] .media-head {
    padding-left: 0;
  }
  html[dir="rtl"] .media-controls {
    position: static;
  }
}

/* Media play button RTL */
html[dir="rtl"] .media-play {
  left: auto;
  right: 14px;
}

/* Media CTA RTL */
html[dir="rtl"] .media-cta {
  justify-content: flex-start;
}

/* 7Cs card head RTL */
/* html[dir="rtl"] .seven-cs-card-head {
  flex-direction: row-reverse;
} */

html[dir="rtl"] .seven-cs-card p {
  text-align: right;
}

/* Subscribe section RTL */
html[dir="rtl"] .subscribe input {
  text-align: center;
}

/* Form labels RTL */
html[dir="rtl"] .contact-form-premium label {
  text-align: right;
}

html[dir="rtl"] .contact-form-premium input,
html[dir="rtl"] .contact-form-premium textarea {
  text-align: right;
}

/* Benefit card RTL text */
html[dir="rtl"] .benefit-card {
  text-align: right;
}

@media (max-width: 767px) {
  html[dir="rtl"] .benefit-card {
    text-align: center;
  }
}

/* Use cases RTL */
html[dir="rtl"] .usecases-title,
html[dir="rtl"] .usecases-text {
  text-align: right;
}

/* ---- Centered sections must stay centered in RTL ---- */

/* Force text-center to win over RTL default alignment */
html[dir="rtl"] .text-center {
  text-align: center !important;
}

/*
 * CRITICAL FIX: .section-header in style.css uses
 *   display:inline-block; left:50%; transform:translateX(-50%)
 * to center itself. In RTL the browser auto-flips left→right,
 * completely breaking the centering. We override to use a
 * standard block + margin:auto approach instead.
 */
html[dir="rtl"] .section-header {
  display: block;
  position: static;
  left: auto;
  right: auto;
  transform: none;
  -webkit-transform: none;
  text-align: center;
}

/* Section header h2 — keep inline-block for underline sizing, centered via text-align */
html[dir="rtl"] .section-header h2 {
  display: inline-block;
  text-align: center !important;
}

/* Green underline: use margin auto centering instead of left:50% which RTL flips */
html[dir="rtl"] .section-header h2:after {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

html[dir="rtl"] .usecases-header h2:after {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

/* Subtitles / descriptions that should stay centered */
html[dir="rtl"] .subscribe {
  text-align: center !important;
}

html[dir="rtl"] .media-title,
html[dir="rtl"] .media-title h2,
html[dir="rtl"] .media-title p {
  text-align: center !important;
}

html[dir="rtl"] .media-underline {
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .awards-subtitle {
  text-align: center !important;
}

html[dir="rtl"] .seven-cs-sub {
  text-align: center !important;
}

html[dir="rtl"] .contact-subtitle {
  text-align: center !important;
}

html[dir="rtl"] .usecases-subtitle {
  text-align: center !important;
}

html[dir="rtl"] .solution-intro,
html[dir="rtl"] .solution-outro {
  text-align: center !important;
}

html[dir="rtl"] .phone-link {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
}

/* html[dir="rtl"] .seven-cs-card-head {
  direction: rtl !important;
} */