/* ==========================================================================
   Time Solution — RTL overrides for the Tekni template
   Loaded AFTER style.css and ts-theme.css. Arabic-first RTL layout.
   ========================================================================== */
:root{ --ts-font: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; }

html[dir="rtl"] body,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] li,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button,
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"] .title, html[dir="rtl"] .sub-title, html[dir="rtl"] .btn, html[dir="rtl"] .widget-title{
  font-family: var(--ts-font) !important;
}
html[dir="rtl"] body{ direction: rtl; text-align: right; }

/* P2b — Arabic nav labels are wider, so the nav crowded the logo panel (gap ~8px vs 37px EN).
   Compact the AR nav item spacing + font a touch so it has comfortable breathing room from the
   panel. Logical padding; AR-only (EN keeps its sizing). */
@media (min-width:992px){
  html[dir="rtl"] nav.navbar.validnavs ul.nav.navbar-center > li > a{ padding-inline:5px !important; font-size:13.5px !important; }
  /* the LTR nav-column push (56px, to clear the logo) over-shoots the now-narrower AR nav → drop
     it for AR, and make the collapse FILL the nav column so the centered nav balances (was pinned
     to the CTA side leaving a 226px gap to the logo at 1440). */
  html[dir="rtl"] header nav.navbar .row.align-center > [class*="col-"]:nth-child(2){ padding-inline-start:30px !important; }
  html[dir="rtl"] header nav.navbar .navbar-collapse{ width:100% !important; flex:1 1 auto; }
}

/* C1 — stats card (.about-style-one): in RTL the NUMBER leads (inline-start = right) and the
   icon (certificate/globe) sits at inline-end (left). row-reverse mirrors the pair; gap keeps
   spacing. LTR unaffected. */
html[dir="rtl"] .about-style-one li{ flex-direction: row-reverse; gap: 15px; }
html[dir="rtl"] .about-style-one .counter{ text-align: start; }

/* Generic alignment flips */
html[dir="rtl"] .text-end{ text-align: left !important; }
html[dir="rtl"] .text-start{ text-align: right !important; }
html[dir="rtl"] .text-left{ text-align: right !important; }
html[dir="rtl"] .text-right{ text-align: left !important; }
html[dir="rtl"] ul{ padding-right: 0; }

/* ---- Top bar ---- */
html[dir="rtl"] .top-bar-area .pl-30{ padding-right: 30px; padding-left: 0; }
html[dir="rtl"] .top-bar-area .item-flex li{ margin: 0; } /* 2026-08-10: spacing comes from the flex gap in ts-theme, not margins */
html[dir="rtl"] .top-bar-area .social{ text-align: left; }

/* ---- Navigation ---- */
html[dir="rtl"] .navbar .attr-right{ float: left; }
html[dir="rtl"] .navbar-nav > li{ text-align: right; }
html[dir="rtl"] .attr-nav{ margin-left: 0; margin-right: 15px; }

/* ---- Banner / hero: content on the right half in RTL ---- */
/* @375-batch: mirror offsets ONLY at the breakpoints Bootstrap applies them (xl ≥1200) —
   unscoped, this leaked a 33% phantom margin on mobile and pushed rows off-edge. */
@media (min-width:1200px){
  html[dir="rtl"] .banner-area .offset-xl-4{ margin-right: 33.3333%; margin-left: 0; }
}
html[dir="rtl"] .banner-area .content{ text-align: right; }
html[dir="rtl"] .banner-area .content h1,
html[dir="rtl"] .banner-area .content h2,
html[dir="rtl"] .banner-area .content h4{ text-align: right; }

/* ---- Common padding utilities (mirror them) ---- */
html[dir="rtl"] .pr-80{ padding-left: 80px; padding-right: 0; }
html[dir="rtl"] .pr-50{ padding-left: 50px; padding-right: 0; }
html[dir="rtl"] .pl-30{ padding-right: 30px; padding-left: 0; }
html[dir="rtl"] .pr-0{ padding-left: 0; }
html[dir="rtl"] .pl-0{ padding-right: 0; }

/* ---- About card (floating counter box) ---- */
html[dir="rtl"] .about-style-one .about-card ul li{ text-align: right; }

/* ---- Service cards: mirror the round arrow button ---- */
html[dir="rtl"] .services-style-one-item .round-btn{ right: auto; left: 30px; }
html[dir="rtl"] .services-style-one-item{ text-align: right; }

/* ==========================================================================
   WHY CHOOSE US — the dark panel is fixed LEFT and the image fixed RIGHT by
   absolute positioning (they do NOT flip). So in RTL we keep the TEXT column
   on the LEFT (over the dark panel) by flipping the row to LTR, then set the
   inner content back to RTL so the Arabic reads correctly.
   ========================================================================== */
html[dir="rtl"] .choose-us-style-one-area .container > .row{ direction: ltr; }
html[dir="rtl"] .choose-us-style-one-area .choose-us-style-one{ direction: rtl; text-align: right; }
html[dir="rtl"] .choose-us-style-one-area .col-lg-6.pr-80{ padding-right: 0 !important; padding-left: 80px !important; }
html[dir="rtl"] .choose-us-style-one .list-item{ padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .choose-us-style-one .list-item li{ padding-right: 40px; padding-left: 0; }
html[dir="rtl"] .choose-us-style-one .list-item::after{ left: auto; right: 0; }
html[dir="rtl"] .choose-us-style-one .list-item li:before{ right: 0; left: auto; }

/* ==========================================================================
   REQUEST CALL BACK — mirror the blue counter panel. In LTR the counter sits
   on the right and its ::after blue panel extends left. In RTL the counter
   sits on the left, so the panel must extend to the LEFT (anchor right:0) and
   round its inner (top-right) corner.
   ========================================================================== */
html[dir="rtl"] .request-call-back-area .achivement-counter{ padding-left: 0; padding-right: 120px; }
html[dir="rtl"] .achivement-counter::after{ left: auto; right: 0; border-top-left-radius: 0; border-top-right-radius: 50px; }
html[dir="rtl"] .achivement-counter li i{ margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .achivement-counter li{ text-align: right; }

/* ---- Offsets used on inner rows ----
   @375-batch: Bootstrap applies offset-lg-* margins only ≥992. The RTL mirror was unscoped, so
   every AR page with offset-lg-1/2 gained a phantom 8.33%/16.66% inline margin at MOBILE
   (+31px/+62px at 375 — the site-wide AR h-scroll). Scope the mirror to the same breakpoint. */
@media (min-width:992px){
  html[dir="rtl"] .offset-lg-1{ margin-right: 8.3333%; margin-left: 0; }
  html[dir="rtl"] .offset-lg-2{ margin-right: 16.6666%; margin-left: 0; }
}

/* ---- Service-details sidebar / related cards ---- */
html[dir="rtl"] .services-sidebar .quick-contact-widget{ text-align: right; }
html[dir="rtl"] .services-more .item{ text-align: right; }

/* ---- Footer ---- */
html[dir="rtl"] footer .f-item.newsletter form{ direction: rtl; }
html[dir="rtl"] footer .footer-social{ text-align: right; }
html[dir="rtl"] .footer-bottom .text-end{ text-align: left !important; }
html[dir="rtl"] .opening-hours ul li{ display:flex; }

/* ---- Buttons: keep icon spacing sane in RTL ---- */
html[dir="rtl"] .btn i{ margin-left: 8px; margin-right: 0; }
html[dir="rtl"] .btn-animation i{ transform: scaleX(-1); }

/* ---- @375-batch: ACCORDION mirror (template is physical-LTR) ----
   faq-style-one: chevron absolute right:25 + padding-right:60 → in RTL the chevron belongs at
   inline-END (left) and the reserve padding with it. */
html[dir="rtl"] .faq-style-one button.accordion-button{
  padding-right: 25px !important; padding-left: 60px !important; text-align: right;
}
html[dir="rtl"] .faq-style-one button.accordion-button::after{ right: auto; left: 25px; }
/* about-style-one accordion: left rail + left padding → mirror to the right */
html[dir="rtl"] .about-style-one .accordion{ border-left: 0; border-right: 2px solid #e7e7e7; }
html[dir="rtl"] .about-style-one .accordion-single .accordion-button{ padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .about-style-one .accordion-single .accordion-button::after{
  left: auto; right: -2px; border-left: 0; border-right: 2px solid;
}

/* @375-batch: the faq decorative circle hangs -120px off the LEFT (style.css:5428). In LTR the
   left side is the clipped/non-scroll side, but in RTL it's the SCROLL direction → +120px h-scroll
   on every AR page with a FAQ block. Mirror the shape to hang off the right (RTL's clip side). */
html[dir="rtl"] .faq-style-one::after{ left: auto; right: -120px; }
/* (.secondary variant already hangs right — that's RTL's clip side, so it needs no mirror;
   mirroring it left would recreate the overflow.) */

/* Arabic numerals / counters stay LTR inside RTL */
.timer, .operator, .counter{ direction: ltr; unicode-bidi: embed; }