/* ============================================================
   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', 'Plus Jakarta Sans', 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 */
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);
}

/* 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-toggle {
  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;
}