/* ============================================================
   Arabic / RTL refinements — loaded only when dir="rtl".
   The bulk left/right flip comes from main.rtl.css (rtlcss);
   this file applies the Arabic webfont and a few polish fixes.
   ============================================================ */

/* Modern Arabic typography (Tajawal) for all readable text. */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .span,
html[dir="rtl"] .title,
html[dir="rtl"] .tg-element-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-subtitle,
html[dir="rtl"] .service-title,
html[dir="rtl"] .service-description {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
}

/* Phone numbers, emails and URLs read left-to-right even inside RTL text. */
html[dir="rtl"] .pera a,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* In Arabic the AI assistant sits bottom-left, so move the switcher to the
   bottom-right — opposite corners, no overlap. */
html[dir="rtl"] .lang-switcher {
  right: 20px;
  left: auto;
}
@media (max-width: 575px) {
  html[dir="rtl"] .lang-switcher {
    right: 12px;
    left: auto;
  }
}

/* ------------------------------------------------------------------
   "Our Vision" (#about .hero2) is a complex, decoration-heavy section
   (animated background, floating circular graphic, robot-hand image
   with JS effects). The automatic RTL flip mis-positions these and the
   hand overlaps the text. Keep this one section in the ENGLISH layout
   (text left, graphics right) and only swap the copy to Arabic.
   ------------------------------------------------------------------ */
html[dir="rtl"] #about.hero2 {
  direction: ltr;
}
/* Arabic copy still reads right-to-left inside the left column. */
html[dir="rtl"] #about.hero2 .heading2 {
  direction: rtl;
  text-align: right;
}
/* Restore the English positions the flip reversed. */
html[dir="rtl"] #about.hero2::after {
  left: 0;
  right: auto;
}
html[dir="rtl"] #about.hero2 .hero2-main-imges .image1 {
  right: 0;
  left: auto;
}
html[dir="rtl"] #about.hero2 .hero2-main-imge2 {
  right: -45px;
  left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  html[dir="rtl"] #about.hero2 .hero2-main-imge2 {
    right: -135px;
    left: auto;
  }
}

/* ------------------------------------------------------------------
   CTA "subscribe" form: the English design floats the submit button as
   an absolute overlay on the input; the RTL flip leaves it stranded in
   the middle, over the placeholder. Replace it with a clean flex row
   (input grows, button sits at the start side) for RTL only.
   ------------------------------------------------------------------ */
html[dir="rtl"] .cta2 .subscribe-form {
  padding: 0;
}
html[dir="rtl"] .cta2 .subscribe-form form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
html[dir="rtl"] .cta2 .subscribe-form input {
  flex: 1 1 220px;
  width: auto;
  margin: 0;
}
html[dir="rtl"] .cta2 .subscribe-form .button {
  position: static;
  flex: 0 0 auto;
  top: auto;
  right: auto;
  left: auto;
}
html[dir="rtl"] .cta2 .subscribe-form .button .theme-btn2 {
  height: 100%;
}