/* ============================================================
   Alphabet Group — Arabic (RTL) overrides
   Loaded only when the page locale is Arabic (dir="rtl").
   ============================================================ */

/* ---------- Thmanyah Sans (self-hosted) ---------- */
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/assets/fonts/thmanyah/thmanyahsans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/assets/fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/assets/fonts/thmanyah/thmanyahsans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/assets/fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/assets/fonts/thmanyah/thmanyahsans-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Typography ---------- */
html[dir='rtl'] body,
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'] p,
html[dir='rtl'] a,
html[dir='rtl'] span,
html[dir='rtl'] li,
html[dir='rtl'] div,
html[dir='rtl'] blockquote,
html[dir='rtl'] button,
html[dir='rtl'] input,
html[dir='rtl'] textarea,
html[dir='rtl'] label {
  font-family: 'Thmanyah Sans', 'Inter', sans-serif !important;
}

/* Keep icon fonts intact (Font Awesome 5 + Pe-icon-7) */
html[dir='rtl'] .fa,
html[dir='rtl'] .fas,
html[dir='rtl'] .far,
html[dir='rtl'] [class^='fa-'],
html[dir='rtl'] [class*=' fa-'] {
  font-family: 'Font Awesome 5 Free' !important;
}
html[dir='rtl'] .fab {
  font-family: 'Font Awesome 5 Brands' !important;
}
html[dir='rtl'] [class^='pe-7s-'],
html[dir='rtl'] [class*=' pe-7s-'] {
  font-family: 'Pe-icon-7-stroke' !important;
}
html[dir='rtl'] [class^='ti-'],
html[dir='rtl'] [class*=' ti-'] {
  font-family: 'themify' !important;
}

/* Wide tracking corrupts Arabic letter joining */
html[dir='rtl'] * {
  letter-spacing: 0 !important;
}

/* Arabic reads better with a touch more leading */
html[dir='rtl'] p {
  line-height: 1.8;
}

/* ---------- Directional utility flips (only those the site uses) ---------- */
html[dir='rtl'] .ml-5 { margin-left: 0 !important; margin-right: 5px !important; }
html[dir='rtl'] .ml-10 { margin-left: 0 !important; margin-right: 10px !important; }
html[dir='rtl'] .ml-20 { margin-left: 0 !important; margin-right: 20px !important; }
html[dir='rtl'] .ml-30 { margin-left: 0 !important; margin-right: 30px !important; }
html[dir='rtl'] .ml-40 { margin-left: 0 !important; margin-right: 40px !important; }

/* Bootstrap offset uses margin-left; mirror it for RTL. Bootstrap only applies
   .offset-lg-1 at >=992px, so scope the mirror the same way — leaving it global
   leaked an 8.333% margin-right onto every offset-lg-1 column on mobile, shoving
   the content off the end (left) edge in RTL (e.g. the "Our Values" list). */
@media (min-width: 992px) {
  html[dir='rtl'] .offset-lg-1 {
    margin-left: 0;
    margin-right: 8.333333%;
  }
}

/* ---------- Component flips ---------- */
/* Navbar dropdown alignment */
html[dir='rtl'] .navbar .dropdown-menu {
  text-align: right;
}

/* The rolling-text guard strips the class that gives each nav link its 30px
   height, so with the shorter Arabic line-height the whole navbar collapses
   ~15px shorter than English. Restore the link's line-box (EN nav-link is 69.5px:
   20+15 padding + a 34.5px inline line-box around the 30px span). */
html[dir='rtl'] .navbar .navbar-nav .nav-link {
  line-height: 34.5px;
}
html[dir='rtl'] .navbar .navbar-nav .nav-link > span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

/* Header divider lines are positioned with physical border-right/left at fixed
   left/right offsets; mirror them so both appear in the same visual spots in RTL */
html[dir='rtl'] .navbar .logo:after {
  right: auto;
  left: -30px;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
html[dir='rtl'] .navbar .contact-button:after {
  left: auto;
  right: -30px;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile header: the theme gives the logo margin-left:30px (gap from the left
   edge) and the toggler margin-right:30px (gap from the right edge). In RTL the
   two swap sides, so those physical margins land on the inner side and both the
   logo and burger sit flush against the window edge. Mirror them so Arabic gets
   the same edge breathing room as English. */
@media (max-width: 991.98px) {
  html[dir='rtl'] .navbar .logo {
    margin-left: 0;
    margin-right: 30px;
  }
  html[dir='rtl'] .navbar .navbar-toggler {
    margin-right: 0;
    margin-left: 30px;
  }
}

/* Language toggle keeps direction:ltr (to hold EN|ع order), which makes its
   margin land on the wrong side in RTL — place the gap toward the contact button */
html[dir='rtl'] .navbar .lang-switch {
  margin-right: 0;
  margin-left: 18px;
}

/* Caret: theme uses vertical-align:12px (tuned for the Latin cap-height) which
   floats the triangle far above the Arabic label — re-center it and flip the gap */
html[dir='rtl'] .navbar .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0;
  margin-right: 6px;
}

/* Featured Services carousel: the arrow control uses .ml-auto (margin-left:auto),
   which in RTL floats it to the right — push it to the physical left instead */
html[dir='rtl'] .services .sec-head .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Keep the two carousel arrows laid out LTR: prev(←) on the left, next(→) on the
   right (pointing outward) with the theme's margin-left gap between them. Under RTL
   the flex order would otherwise reverse them to point inward and collapse the gap. */
html[dir='rtl'] .swiper-arrow-control {
  direction: ltr;
}

/* .butn-crev (e.g. "Learn more", "Visit part.iq"): theme gives the circle icon
   margin-right:15px as the icon→label gap; flip it in RTL so the label gets that
   breathing room instead of the icon sitting flush against it */
html[dir='rtl'] .butn-crev .circle {
  margin-right: 0;
  margin-left: 15px;
}

/* Footer link lists */
html[dir='rtl'] footer ul.rest {
  padding-right: 0;
}

/* Directional arrows/chevrons mirror horizontally */
html[dir='rtl'] .fa-arrow-right,
html[dir='rtl'] .fa-arrow-left,
html[dir='rtl'] .fa-chevron-right,
html[dir='rtl'] .fa-chevron-left,
html[dir='rtl'] .fa-long-arrow-alt-right,
html[dir='rtl'] .fa-long-arrow-alt-left,
html[dir='rtl'] .fa-angle-right,
html[dir='rtl'] .fa-angle-left,
html[dir='rtl'] .arrow-icon,
html[dir='rtl'] .icon-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---------- Motion / layout safety ---------- */
/* Marquees, Swiper carousels and GSAP xPercent tweens keep LTR flow:
   pages wrap those sections with dir="ltr" so no override is needed here. */

/* Keep the scroll-progress button in its familiar corner */
html[dir='rtl'] .progress-wrap {
  right: auto;
  left: 30px;
}