/* ==========================================================================
   Time Solution — theme layer (loaded by BOTH ar + en, after style.css).
   Two-state sticky header, animated preloader, one-line nav, module cards,
   RTL/LTR placement, WhatsApp.
   ========================================================================== */
:root{
  --ts-primary:#213B7E;   /* brand navy */
  --ts-accent:#0078D4;    /* brand blue */
  --ts-accent-2:#213B7E;  /* gradient end */
  --ts-teal:#0E9F8E;
  --ts-light:#C4E2F6;     /* brand light blue */
  --ts-nav-h:82px;
  /* 2026-08-10 owner: hover gradients must match the logo (blue + green).
     Remap the TEMPLATE tokens so every var(--bg-gradient)/var(--color-secondary) use
     (31 + 28 places in style.css) renders brand blue→teal instead of blue→purple #9c00ff. */
  --color-primary:var(--ts-accent);
  --color-secondary:var(--ts-teal);
}

/* --------------------------------------------------------------------------
   HEADER — TWO STATES.
   At top: a clean SOLID bar in normal flow (never overlaps the hero).
   On scroll (JS adds .ts-stuck): a fixed bar that slides down and STAYS.
   -------------------------------------------------------------------------- */
header{ position:relative; z-index:1030; }

/* AT TOP (nav keeps .no-background): TRANSPARENT overlay ON the hero — template gives it
   position:absolute; we just drop the background so the hero shows through. (Task 1a/1b) */
nav.navbar.validnavs.navbar-fixed.no-background{
  background:transparent !important; box-shadow:none !important; z-index:1030 !important;
}
/* ON SCROLL — validnavs removes .no-background at scrollTop>34 (Task 1c native two-tier).
   `:not(.no-background)` out-specifies the base navbar-fixed (position:absolute at desktop)
   so the solid state becomes FIXED and STAYS. */
nav.navbar.validnavs.navbar-fixed:not(.no-background){
  position:fixed !important; top:0 !important; inset-inline:0 !important; width:100% !important;
  background:#fff !important; box-shadow:0 6px 22px rgba(23,51,90,.14) !important;
  animation:tsSlideDown .35s ease; z-index:1030 !important;
}
@keyframes tsSlideDown{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }

/* nav text: WHITE over the hero (overlay) → NAVY when solid (scrolled).
   NOTE: template sets `-webkit-text-fill-color` on nav links, which overrides `color` for
   rendering — so we MUST set both. */
nav.navbar.validnavs.no-background ul.nav.navbar-center > li > a{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
nav.navbar.validnavs.navbar-fixed:not(.no-background) ul.nav.navbar-center > li > a{ color:var(--ts-primary) !important; -webkit-text-fill-color:var(--ts-primary) !important; }
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.dropdown:hover > a{ color:var(--ts-accent) !important; }

/* Task 1e — CONTRAST SCRIM: our hero slides are lighter than the template's, so white
   overlay-nav text can fail WCAG over bright areas. Dark gradient over the top nav zone only
   (fades out before the hero content), so the H1/buttons keep full brightness.
   Worst case rgba(10,20,40,.68) over a white pixel → ~(88,96,110): white text ≈5.9:1. */
.banner-area{ position:relative; }
.banner-area::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:230px;
  background:linear-gradient(to bottom, rgba(10,20,40,.68), rgba(10,20,40,0));
  z-index:3; pointer-events:none;
}
/* keep the actual hero content above the scrim */
.banner-area .container, .banner-area .content{ position:relative; z-index:4; }

/* logo */
.navbar .navbar-brand{ display:flex; align-items:center; height:var(--ts-nav-h); position:relative; z-index:2; }
.navbar .navbar-brand img,
.navbar .navbar-brand img.logo{ max-height:64px; width:auto; position:relative; }

/* Logo panel — MATCH the Tekni template EXACTLY (style.css:2931), adapted for RTL.
   Template (LTR, .no-background): .navbar-header padding-right:45px/margin-right:-45px;
   ::after = WHITE skewX(15deg) panel (right:0 bottom:0 h:300 w:500%); ::before = #cfd2d5 shadow
   (right:-10px bottom:15px); img top:-35px (lift). We KEEP the native LTR panel and MIRROR it for
   RTL (anchor to inline-start = RIGHT; flip skew) so panel + logo stay together on the right. */
@media (min-width:992px){
  header, nav.navbar.validnavs .navbar-header{ overflow:visible; }
  /* keep the WHITE panel pure white (::before stays #cfd2d5 as the template's shadow layer) */
  nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::after{ background:#fff !important; }
  /* items 1 — TIGHTEN the panel (our TS mark is squarish, not a wide wordmark).
     2026-08-10 owner pass: panel is now a fixed 210px badge (was 402px template bleed) with the
     logo optically CENTERED in it — offsets tuned live at 1400px and 1912px viewports
     (logo margins measured 62/59px inside the painted skewed shape). ::after = white panel,
     ::before = gray accent peeking 8px on the slant side. */
  nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::after,
  nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::before{
    height:200px !important; width:210px !important;
  }
  /* header reserves the skew space on the correct inline-end side per dir (logical) */
  nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header{
    padding-right:0 !important; margin-right:0 !important;
    padding-inline-end:34px !important; margin-inline-end:-34px !important;
  }
  /* dir-aware anchors: panel hugs the logo, bleeding 16px past the header toward the page corner */
  html[dir="rtl"] nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::after{
    right:auto !important; left:-16px !important; transform:skewX(-15deg) !important;
  }
  html[dir="rtl"] nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::before{
    right:auto !important; left:-24px !important; transform:skewX(-15deg) !important;
  }
  html[dir="ltr"] nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::after{
    left:auto !important; right:-16px !important; transform:skewX(15deg) !important;
  }
  html[dir="ltr"] nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header::before{
    left:auto !important; right:-24px !important; transform:skewX(15deg) !important;
  }
  /* logo scales to fill the panel; template lifts it via .navbar-header img{top:-35px} (native now) */
  /* logo CENTERED in the panel's visible band + larger. Only in the overlay (.no-background)
     state where the panel exists; scrolled state keeps the logo natural. */
  nav.navbar .navbar-brand{ z-index:2; display:flex; align-items:center; justify-content:center; }
  nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header img.logo{
    max-height:100px !important; top:-58px !important; margin-inline:auto !important; display:block;
  }
}
/* 2026-08-10 owner: EN section eyebrows (.sub-title) rendered ALL-CAPS by the template while
   Arabic (no letter case) reads naturally — normalize EN to the authored sentence case so both
   locales' headings feel consistent. */
html[dir="ltr"] .sub-title{ text-transform:none !important; letter-spacing:normal; }

/* 2026-08-11: integration logo grid (owner-supplied logos) — uniform 170x64 cards, 2x assets.
   Cells flex-centered (template's margin/text-align centering fails on some RTL grid cells). */
.partner-items ul li{ display:flex !important; align-items:center; justify-content:center; }
.partner-items ul img{ max-width:170px; max-height:64px; width:auto; height:auto; margin:0 !important; }

/* 2026-08-31 owner: Saudi Vision 2030 logo — WHITE monochrome version directly on the dark
   footer (no card, per owner); colored original on the light About section. */
.ts-vision2030{ display:inline-block; margin:10px 0 20px; line-height:0; }
.ts-vision2030 img{ display:block; width:160px; height:auto; }
.ts-vision2030-lg{ margin-top:22px; }
.ts-vision2030-lg img{ width:190px; }

/* dropdowns above content */
.navbar .dropdown-menu, .navbar .megamenu-content, .navbar .megamenu-fw .megamenu-content{ z-index:1055 !important; }
.banner-area{ margin-top:0 !important; }

/* A3 — hero was too short (~360px); give it a taller, template-proportional height with the
   content vertically centered. Background thumb (absolute, bg-cover) fills it. */
@media (min-width:768px){
  .banner-area.banner-style-one .swiper-slide{ min-height:620px; display:flex; align-items:center; }
}
@media (min-width:992px){
  .banner-area.banner-style-one .swiper-slide{ min-height:740px; }
}

/* --------------------------------------------------------------------------
   NAV on one line (desktop >=992px). Mobile menu untouched.
   -------------------------------------------------------------------------- */
@media (min-width:992px){
  .navbar .navbar-nav.navbar-center{ white-space:nowrap; text-align:center; }
  .navbar .navbar-nav > li{ float:none; display:inline-block; vertical-align:middle; }
  /* high-specificity so it beats the template's nav.navbar ul.nav>li>a (padding 30px/font 19px)
     2026-08-11 owner: ONE *visual* size both locales. At identical px Arabic reads smaller
     (letter body ≈ x-band vs Latin caps), so AR carries +3px to RENDER equal to EN.
     Canvas ink measurement + owner screenshots confirmed 17px/17px looks unequal. */
  nav.navbar.validnavs ul.nav.navbar-center > li > a{ padding:10px 10px !important; font-size:17px !important; white-space:nowrap; }
  html[dir="rtl"] nav.navbar.validnavs ul.nav.navbar-center > li > a{ font-size:21px !important; }
}
/* tighter tier so the wider EN-LTR labels + long CTA never collide at 992–1399 */
@media (min-width:992px) and (max-width:1399.98px){
  nav.navbar.validnavs ul.nav.navbar-center > li > a{ padding:10px 7px !important; font-size:15px !important; }
  html[dir="rtl"] nav.navbar.validnavs ul.nav.navbar-center > li > a{ font-size:18.5px !important; }
  .attr-nav li.button > a{ padding:11px 16px; }
}
@media (min-width:1600px){ nav.navbar.validnavs ul.nav.navbar-center > li > a{ padding:10px 13px !important; font-size:16px !important; } }

/* CTA button — clean gradient pill, no skew */
.navbar.navbar-style-one.no-background .attr-right .attr-nav li.button a::after{ display:none !important; }
.attr-nav li.button > a{
  display:inline-block; background:linear-gradient(90deg,var(--ts-accent),var(--ts-accent-2));
  color:#fff !important; padding:12px 22px; border-radius:8px; font-weight:700; white-space:nowrap; line-height:1.1; min-height:44px;
}
.attr-nav li.button > a:hover{ filter:brightness(1.06); color:#fff !important; }

/* A4 — language toggle relocated into the main header (next to CTA), so it stays visible on
   scroll. Legible on both states; logical spacing so it never overlaps the CTA. */
.attr-nav > ul{ display:inline-flex; align-items:center; }
.attr-nav .ts-lang-item{ display:inline-flex; align-items:center; margin-inline-end:14px; flex:0 0 auto; overflow:visible; }
/* high specificity + !important so it beats the template's .attr-nav>ul>li>a (block, its own padding)
   → toggle shows its FULL label ("EN"/"ع"), never clipped */
nav.navbar .attr-nav > ul > li.ts-lang-item > a.ts-lang{
  display:inline-flex !important; align-items:center; justify-content:center;
  padding:0 12px !important; min-height:38px !important; height:auto !important;
  width:auto !important; min-width:max-content !important; max-width:none !important;
  border:1px solid currentColor; border-radius:6px; font-weight:700; line-height:1;
  white-space:nowrap !important; text-decoration:none; overflow:visible !important;
}
nav.navbar.validnavs.no-background .attr-nav .ts-lang{ color:#fff !important; -webkit-text-fill-color:#fff !important; border-color:rgba(255,255,255,.65) !important; }
nav.navbar.validnavs.navbar-fixed:not(.no-background) .attr-nav .ts-lang{ color:var(--ts-primary) !important; -webkit-text-fill-color:var(--ts-primary) !important; border-color:rgba(33,59,126,.4) !important; }
.attr-nav .ts-lang:hover{ color:var(--ts-accent) !important; border-color:currentColor !important; }

/* --------------------------------------------------------------------------
   Top-bar social icons — aligned, evenly spaced, language chip.
   -------------------------------------------------------------------------- */
.top-bar-area .social ul{ display:flex; align-items:center; gap:10px; margin:0; }
html[dir="rtl"] .top-bar-area .social ul{ justify-content:flex-end; }
html[dir="ltr"] .top-bar-area .social ul{ justify-content:flex-end; }
.top-bar-area .social ul li{ display:inline-flex; align-items:center; }
.top-bar-area .social ul li a{ color:#fff; }
.top-bar-area .social ul li a.ts-lang{ font-weight:700; border:1px solid rgba(255,255,255,.5); padding:1px 9px; border-radius:4px; }

/* focus (WCAG 2.2) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--ts-accent); outline-offset:2px; }

/* header end-cluster placement */
html[dir="rtl"] .navbar .attr-right{ text-align:left; }
html[dir="ltr"] .navbar .attr-right{ text-align:right; }
html[dir="rtl"] .top-bar-area .social{ text-align:left; }
html[dir="ltr"] .top-bar-area .social{ text-align:right; }
html[dir="ltr"] .top-bar-area .item-flex{ justify-content:flex-start; }

/* Homepage hero H1 */
.banner-area .content h1.ts-hero-h1{ color:#fff; font-weight:700; line-height:1.14; font-size:clamp(34px,4.6vw,64px); margin:0 0 10px; }

/* --------------------------------------------------------------------------
   Odoo module grid — clickable cards with distinct icons.
   -------------------------------------------------------------------------- */
.ts-module-card{ display:flex; align-items:center; gap:12px; height:100%; background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:16px 18px; color:var(--ts-primary); font-weight:600; transition:all .2s ease; text-align:start; }
.ts-module-card:hover{ border-color:var(--ts-accent); box-shadow:0 10px 24px rgba(0,120,212,.14); color:var(--ts-accent); transform:translateY(-2px); }
.ts-module-card i{ width:46px; height:46px; min-width:46px; border-radius:10px; background:var(--ts-light); color:var(--ts-accent); display:flex; align-items:center; justify-content:center; font-size:20px; }
.ts-modules > [class*="col-"]{ margin-bottom:18px; }

/* --------------------------------------------------------------------------
   Preloader — a single, larger, animated brand logo on white (no spinner).
   -------------------------------------------------------------------------- */
/* Task 3 — loading screen: full-screen brand cover over EVERYTHING (hides header during load),
   centered animated logo. The gif self-animates (no CSS pulse). JS locks scroll + fades out. */
#preloader{
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  background:#ffffff !important; display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .5s ease;
}
#preloader.ts-preloader-hide{ opacity:0; pointer-events:none; }
#preloader .tranzi-loader-inner{ display:none !important; }
/* loader logo — TRANSPARENT high-res PNG (8000px, alpha) on white; no black matte (the GIF had
   a black backdrop → switched to PNG). Bigger + gentle pulse for the loading feel. */
.ts-preloader-logo{ height:248px; width:auto; background:transparent !important; animation:tsLoaderPulse 1.5s ease-in-out infinite; }
@keyframes tsLoaderPulse{ 0%,100%{ transform:scale(1); opacity:.88; } 50%{ transform:scale(1.05); opacity:1; } }
@media (max-width:767px){ .ts-preloader-logo{ height:172px; } }
@media (prefers-reduced-motion: reduce){ .ts-preloader-logo{ animation:none; } }
/* 2026-08-10: visible motion while loading — spinner ring around the pulsing logo */
#preloader::after{
  content:""; position:absolute; inset:0; margin:auto; width:320px; height:320px;
  border:3px solid var(--ts-light); border-top-color:var(--ts-primary);
  border-radius:50%; animation:tsSpin 1s linear infinite;
}
@keyframes tsSpin{ to{ transform:rotate(360deg); } }
@media (max-width:767px){ #preloader::after{ width:225px; height:225px; } }
@media (prefers-reduced-motion: reduce){ #preloader::after{ display:none; } }
/* lock scroll while the loader is visible */
body.ts-loading{ overflow:hidden !important; height:100vh; }
/* reduced motion: no fade transition (still shows, just no animated dismissal) */
@media (prefers-reduced-motion: reduce){ #preloader{ transition:none; } }

/* --------------------------------------------------------------------------
   WhatsApp floating button.
   -------------------------------------------------------------------------- */
.ts-whatsapp{ position:fixed; bottom:24px; z-index:9999; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:26px; transition:transform .2s ease; }
.ts-whatsapp:hover{ color:#fff; transform:scale(1.08); }
html[dir="rtl"] .ts-whatsapp{ left:24px; right:auto; }
html[dir="ltr"] .ts-whatsapp{ right:24px; left:auto; }
@media (prefers-reduced-motion: reduce){ .ts-whatsapp, .ts-preloader-logo{ animation:none; transition:none; } }

/* hero (home): below xl, the col-xl-8 offset must NOT leave a 125px inline margin
   (that pushed RTL content off-edge and clipped the H1/buttons on mobile) */
@media (max-width:1199.98px){
  .banner-area .col-xl-8.offset-xl-4{ margin-inline:0 !important; max-width:100%; flex:0 0 100%; }
  .banner-area .content{ padding-inline:6px; }
}

/* Mega-menu: follow document direction (RTL right-aligned, LTR left).
   Title sizing/spacing is left to the template's own .megamenu-style-three rules. */
.megamenu-content, .megamenu-content .col-menu, .megamenu-content .col-menu .title,
.megamenu-content .menu-col, .megamenu-content .menu-col li,
.megamenu-content .menu-col li a{ text-align:start; }
/* the template hardcodes `.menu-col li a{ text-align:left }` (and headings inherit it) —
   force logical `start` so heading TEXT and item TEXT share the same inline-start edge in RTL. */
.megamenu-content .col-menu .title,
.megamenu-content .content ul.menu-col li a{ text-align:start !important; }
/* hover indent must move inline-start (right in RTL), not physical-left */
.megamenu-content .content ul.menu-col li a:hover{ padding-left:0 !important; padding-inline-start:10px !important; }
/* Bug 3: all 4 columns identical — equal grid, equal inline gutters, no per-column
   padding drift, headings + items share the same start edge in RTL and LTR. */
.megamenu-style-three .col-menu-wrap{ grid-template-columns:repeat(4,1fr) !important; column-gap:24px; align-items:start; }
.megamenu-content .col-menu{ padding-inline:0 !important; margin:0; min-width:0; }
.megamenu-content .col-menu .menu-col li a{ overflow-wrap:anywhere; }
.megamenu-content .col-menu .title{ margin:0 0 15px !important; padding:0; }
/* Task 4 — mega titles are now <span class="title ts-mega-title"> (non-heading, fixes
   heading-order). Give them the SAME 22px the template's `.col-menu-wrap h6` gave. */
/* 2026-08-11 owner bug: long EN category titles ("Digital Transformation & Automation") overflowed
   their quarter-width mega column into the neighbours (template nowrap at 22px). Allow wrapping and
   size EN titles to fit; Arabic titles are short and keep 22px. */
.megamenu-content .col-menu .ts-mega-title{ display:block; font-weight:700; color:var(--ts-primary); white-space:normal !important; overflow-wrap:break-word; }
@media (min-width:1024px){
  /* ONE size both locales; wrapping (above) keeps long EN titles inside their column */
  .megamenu-style-three .col-menu-wrap .ts-mega-title{ font-size:20px; line-height:1.35; }
}
.megamenu-content .col-menu .content > .menu-col{ padding-inline-start:0 !important; margin:0; list-style:none; }

/* B1 — simple nav dropdowns must open on the trigger's inline-start (RIGHT in RTL, LEFT in
   LTR). Template inherits Bootstrap `left:0` → opens left in RTL. Fix with LOGICAL insets so
   it mirrors automatically; do NOT touch the mega (.megamenu-content). */
@media (min-width:992px){
  nav.navbar.validnavs li.dropdown > ul.dropdown-menu:not(.megamenu-content){
    inset-inline-start:0 !important; inset-inline-end:auto !important; text-align:start;
  }
}
nav.navbar.validnavs li.dropdown ul.dropdown-menu:not(.megamenu-content){ list-style:none; }
nav.navbar.validnavs li.dropdown ul.dropdown-menu:not(.megamenu-content) > li{ margin:0; }
nav.navbar.validnavs li.dropdown ul.dropdown-menu:not(.megamenu-content) > li > a{ text-align:start !important; }

/* Bug 2: header is one flex row that RESERVES space for the CTA so nav can never
   overlap it. Logical margins only (collision side flips by locale). Desktop only. */
@media (min-width:992px){
  header nav.navbar .container > .row.align-center{ display:flex !important; flex-wrap:nowrap; align-items:center; }
  header nav.navbar .row.align-center > [class*="col-"]{ width:auto; max-width:none; flex:0 0 auto; }
  header nav.navbar .row.align-center > [class*="col-"]:nth-child(2){ flex:1 1 auto; min-width:0; }
  header nav.navbar .row.align-center > [class*="col-"]:last-child{ margin-inline-start:20px; padding-inline:0 !important; }
  header nav.navbar .navbar-nav.navbar-center{ display:flex; flex-wrap:nowrap; justify-content:center; max-width:100%; }
  /* item 2 — nudge the nav away from the logo panel (it was overlapping it, gap −4px, while the
     CTA side had 76px). padding-inline-start on the nav column (flex:1) shifts the whole nav toward
     inline-end using the CTA-side slack → balanced gaps. Logical → mirrors (LTR right / RTL left). */
  header nav.navbar .row.align-center > [class*="col-"]:nth-child(2){ padding-inline-start:56px !important; }
  header nav.navbar .attr-right{ white-space:nowrap; }
  /* trim CTA-column wrapper bloat so the nav gets the width it needs (no overlap) */
  header nav.navbar .attr-right .attr-nav,
  header nav.navbar .attr-right .attr-nav > ul{ margin:0 !important; padding:0 !important; }
}

/* item 5 — TOP UTILITY BAR distribution: one clean flex row → contact cluster (location · phone ·
   email) flush to inline-start, social flush to inline-end. Mirrors by dir (no offset clumping). */
/* Top bar: the logo PANEL rises over the inline-start ~170px of this bar. Pad the inline-start
   (panel side — RIGHT in RTL / LEFT in EN via logical prop) so the country text clears the panel.
   Contact = one tight grouped cluster (inline-start); social stays at inline-end with a clear gap. */
/* 2026-08-10 owner target layout: [logo panel] …gap… [location · phone · email] [social icons]
   — the whole cluster hugs the inline-END (mirrors automatically in RTL: social far left).
   padding-inline-start 178px keeps content clear of the logo panel at narrow desktops. */
.top-bar-area .row.align-center{ display:flex !important; align-items:center; justify-content:flex-end !important; flex-wrap:nowrap; padding-inline-start:178px; padding-inline-end:12px; column-gap:40px; }
.top-bar-area .row.align-center > [class*="col-"]{ width:auto !important; max-width:none !important; margin:0 !important; padding-inline:0 !important; flex:0 0 auto; }
.top-bar-area .item-flex{ display:flex; align-items:center; gap:36px; margin:0; flex-wrap:nowrap; }
.top-bar-area .item-flex > li{ display:inline-flex; align-items:center; gap:7px; margin:0; white-space:nowrap; }
/* 2026-08-10: social icons in equal 30px boxes so spacing reads even (glyph widths differ) */
.top-bar-area .social ul{ display:flex; align-items:center; gap:8px; margin:0; }
.top-bar-area .social ul li{ margin:0 !important; }
.top-bar-area .social ul li a{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; }
.top-bar-area .item-flex li a:hover{ color:var(--ts-light); }
/* 2026-08-12 owner: Help Desk button -> Odoo helpdesk portal (pill chip in the top bar) */
.top-bar-area .item-flex li a.ts-helpdesk{
  display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.55);
  border-radius:999px; padding:3px 14px; font-weight:600; line-height:1.6;
}
.top-bar-area .item-flex li a.ts-helpdesk:hover{ background:#fff; color:var(--ts-primary); }
/* @375-batch: below 992 the logo panel doesn't exist → the 140px clearance + nowrap forced the
   bar past the viewport at 768 (AR +143 / EN +44). Drop the clearance and let the bar wrap. */
@media (max-width:991.98px){
  .top-bar-area .row.align-center{ padding-inline-start:15px !important; padding-inline-end:15px !important; flex-wrap:wrap !important; row-gap:2px; column-gap:20px; }
  .top-bar-area .item-flex{ flex-wrap:wrap; gap:4px 18px; }
  /* containment: template sections use small decorative bleeds (shapes/arrows ~6px past the
     inline edge). Root causes above are fixed; this clips residual DECOR only, on mobile only. */
  #main{ overflow-x:clip; }
}

/* .sub-title converted from heading to span for correct heading-order (a11y);
   keep it block so section eyebrows lay out exactly as before */
span.sub-title{ display:block; }

/* C2 — blog "read more" button: text + arrow as logical inline-flex, arrow at inline-END,
   consistent gap and circular pill. Mirrors automatically (RTL arrow→left, LTR arrow→right);
   fixes the RTL text-overlap and inconsistent pill. */
.btn-simple{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.btn-simple i{ order:2; margin:0 !important; flex:0 0 auto; }

/* ── Audit R2 visual fixes ─────────────────────────────────────────────── */
/* service/module grid cards: PNG line-icons replaced with one FA set — uniform size, brand
   colour, same 80px box the old <img> occupied so card rhythm is unchanged. */
.services-style-one-item .icon i{
  font-size:56px; line-height:80px; height:80px; display:inline-block; color:var(--ts-accent);
}
/* eyebrow (.sub-title) sat flush against its heading (gap 0 on all 28 section headers —
   crowded with Arabic ascenders). Give every section header breathing room. */
.sub-title{ display:inline-block; margin-bottom:12px !important; }
/* card grids: equal heights within a grid (cards previously varied up to ~67px) */
.services-more .item{ height:100%; }
.services-style-one-item{ height:100%; }
/* P2-1(a): the services grid row used .align-center, so columns didn't stretch and card
   heights varied 488–556. Stretch the row (cards equalize per row line); the intro column
   recreates its centered look with an inner flex. Wrapper exists only on index + services. */
.service-style-one-items .row.align-center{ align-items:stretch !important; }
.service-style-one-items .row.align-center > [class*="col-"]:first-child{
  display:flex; flex-direction:column; justify-content:center;
}
.services-more .item i{ font-size:30px; color:var(--ts-accent); }

/* drawer utility block is mobile-only (main.js appends it on every page) */
.ts-drawer-actions{ display:none; }

/* "20+" mask-text: banner/6.jpg is a grey template placeholder (its baked-in dimension text
   even bled through) → clip a brand gradient into the numerals instead. !important beats the
   inline style attribute. */
.partner-map h2.mask-text{
  background-image:linear-gradient(135deg, var(--ts-accent) 0%, var(--ts-primary) 60%, var(--ts-teal) 120%) !important;
}

/* sector pages: the "النتيجة التي تكسبها" block sat flush under the FAQ accordion */
main .faq-style-one.dark + h3{ margin-top:44px; }

/* ── MOBILE PASS (≤991.98) — the desktop header/footer never translated to phones ────────── */
@media (max-width:991.98px){
  /* HEADER: solid branded bar instead of the transparent desktop overlay */
  nav.navbar.navbar-style-one.validnavs.navbar-fixed{
    position:relative !important; background:#fff !important;
    box-shadow:0 2px 12px rgba(33,59,126,.10);
  }
  nav.navbar.navbar-style-one .row.align-center{
    display:flex !important; align-items:center; flex-wrap:nowrap; padding-block:8px;
    padding-inline:15px;
  }
  nav.navbar.navbar-style-one .row.align-center > [class*="col-"]{
    width:auto !important; max-width:none !important; flex:0 0 auto !important;
    padding:0 !important; margin:0 !important;
  }
  /* first col (logo+burger) fills the bar: logo at inline-start, burger pushed to inline-end */
  nav.navbar.navbar-style-one .row.align-center > [class*="col-"]:first-child{ flex:1 1 auto !important; }
  nav.navbar .navbar-header{ display:flex !important; align-items:center; width:100%; overflow:visible; }
  nav.navbar .navbar-header .navbar-brand{
    display:inline-flex !important; order:1; padding:0; height:auto;
    margin:0 !important; float:none !important;
    /* validnavs centres the mobile brand via left:50% + translate(-50%,-50%) — undo it */
    position:static !important; left:auto !important; right:auto !important; transform:none !important;
  }
  nav.navbar .navbar-header .navbar-brand img.logo{
    height:44px !important; max-height:44px !important; width:auto !important;
    position:static !important; top:0 !important; transform:none !important;
  }
  nav.navbar .navbar-header .navbar-toggle{
    order:2; margin-inline-start:auto !important; margin-block:0 !important; float:none !important;
    width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
    padding:0; font-size:20px; color:var(--ts-primary); background:#fff;
    border:1px solid var(--ts-light); border-radius:8px;
  }
  /* the desktop skew panel/lift is ≥992-scoped already; kill any residual bleed */
  nav.navbar .navbar-header::before, nav.navbar .navbar-header::after{ display:none !important; }

  /* DRAWER: RTL mirror — slide from the RIGHT (validnavs hardcodes left) */
  html[dir="rtl"] nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile{
    left:auto !important; right:-485px; text-align:right;
  }
  html[dir="rtl"] nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile.show{
    right:0 !important; left:auto !important;
  }
  /* 2026-08-10 owner bug report (iOS): drawer opened at page TOP showed empty rows — the
     overlay-state rule (line ~45) paints links WHITE with !important AND -webkit-text-fill-color,
     invisible on the white drawer; scrolling swapped the nav state and the text "appeared".
     Force drawer text navy with HIGHER specificity (0,6,4 > its 0,5,4) + text-fill override.
     Mobile drawer only — desktop states untouched. */
  nav.navbar.validnavs.mobile-sidenav .navbar-collapse ul.nav.navbar-center > li > a{
    color:var(--ts-primary) !important; -webkit-text-fill-color:var(--ts-primary) !important;
  }
  nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav.navbar-nav a{
    color:var(--ts-primary); -webkit-text-fill-color:var(--ts-primary);
  }
  nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav.navbar-nav .ts-mega-title{ color:var(--ts-primary) !important; }
  /* drawer utility actions (appended by main.js from existing page links) */
  .ts-drawer-actions{ margin-top:22px; padding-top:18px; border-top:1px solid #eef2f7;
    display:flex !important; flex-direction:column; gap:10px; }
  .ts-drawer-actions a{ display:flex; align-items:center; justify-content:center;
    min-height:46px; border-radius:8px; font-weight:600; padding-inline:14px; }
  .ts-drawer-actions .ts-da-cta{ background:var(--ts-primary); color:#fff !important; }
  .ts-drawer-actions .ts-da-phone, .ts-drawer-actions .ts-da-lang, .ts-drawer-actions .ts-da-help{
    border:1px solid var(--ts-light); color:var(--ts-primary); }
}

/* FOOTER on phones: centered, breathable, ≥44px link rows */
@media (max-width:767.98px){
  footer .f-item, footer .f-item.about, footer .widget-title{ text-align:center !important; }
  footer .f-item.about img.logo{ margin:0 auto 18px !important; display:block; }
  /* the brand column's pr-50 (flipped to padding-left in RTL) skews it off-centre on phones */
  footer .footer-item.pr-50{ padding-left:15px !important; padding-right:15px !important; }
  footer .f-item.link ul li a{ display:inline-block; padding-block:10px; }
  footer .opening-hours ul li{ justify-content:center; }
  footer .newsletter form{ max-width:420px; margin-inline:auto; }
  footer .footer-social{ display:flex; justify-content:center; }
  footer .footer-bottom .col-lg-6, footer .footer-bottom .text-end{ text-align:center !important; }
  footer .footer-bottom ul{ display:flex; justify-content:center; gap:18px; float:none !important; }
  footer .footer-bottom ul li a{ display:inline-block; padding-block:8px; }
}

/* footer newsletter submit — template positions it physically (right:5px) and doesn't centre
   the svg: in RTL the button landed on the text-start side with a backwards arrow. Logical
   position (inline-end), flex-centred icon, input reserves space at inline-end; arrow mirrored. */
footer .newsletter form button{ display:flex; align-items:center; justify-content:center; }
/* LTR keeps the template's right:5px; RTL mirrors to the inline-end (left). Explicit physical
   override because RTL over-constraint resolution favours `right`, so a logical inset loses. */
html[dir="rtl"] footer .newsletter form button{ right:auto; left:5px; }
footer .newsletter form input{ padding-inline-start:26px !important; padding-inline-end:60px !important; }
html[dir="rtl"] footer .newsletter form button svg{ transform:scaleX(-1); }

/* footer brand tagline (logo lockup) */
.f-item.about .ts-tagline{
  color:var(--ts-light); font-weight:600; font-size:1.02em; letter-spacing:.2px;
  margin:6px 0 14px; line-height:1.5;
}

/* cyber accent + note */
.services-style-one-item.ts-cyber{ border-top:3px solid var(--ts-teal); }
.note{ color:var(--ts-teal); font-size:.85em; }

/* ── Grouped services sidebar: 13 services under 4 categories (logical props → RTL-safe) ── */
.services-list-widget .ts-services-nav{ list-style:none; margin:0; padding:0; }
.services-list-widget .ts-services-nav > li{ margin-bottom:20px; }
.services-list-widget .ts-services-nav > li:last-child{ margin-bottom:0; }
.ts-services-nav .ts-cat-title{
  display:block; font-weight:700; color:var(--ts-primary); font-size:16px;
  padding-block:5px; padding-inline-start:12px; margin-bottom:8px;
  border-inline-start:3px solid var(--ts-light);
}
.ts-services-nav > li.ts-cat-current .ts-cat-title{ color:var(--ts-accent); border-inline-start-color:var(--ts-accent); }
.ts-services-nav .ts-cat-services{ list-style:none; margin:0; padding-inline-start:15px; }
.ts-services-nav .ts-cat-services > li{ margin:0; }
.ts-services-nav .ts-cat-services > li > a{
  display:block; padding:7px 12px; border-radius:6px; text-decoration:none;
  color:#5a6b8c; font-size:14.5px; transition:background .2s, color .2s;
}
.ts-services-nav .ts-cat-services > li > a::before{ content:"—"; margin-inline-end:8px; opacity:.45; }
.ts-services-nav .ts-cat-services > li > a:hover,
.ts-services-nav .ts-cat-services > li > a:focus-visible{ color:var(--ts-accent); background:var(--ts-light); }
.ts-services-nav .ts-cat-services > li.current-item > a{ color:#fff; background:var(--ts-primary); font-weight:600; }
.ts-services-nav .ts-cat-services > li.current-item > a::before{ opacity:1; color:#fff; }

/* category eyebrow above the service H1 (in the dark breadcrumb hero) */
.breadcrumb-area .ts-eyebrow{
  display:inline-block; color:var(--ts-light); font-weight:700;
  font-size:14px; letter-spacing:.5px; margin-bottom:10px;
}

/* related systems (modules) chips on Odoo-system service pages */
.ts-related-systems .ts-modules-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ts-related-systems .ts-modules-chips a{
  display:inline-block; padding:6px 12px; border:1px solid var(--ts-light); border-radius:20px;
  color:var(--ts-primary); font-size:13.5px; text-decoration:none; transition:all .2s;
}
.ts-related-systems .ts-modules-chips a:hover,
.ts-related-systems .ts-modules-chips a:focus-visible{ background:var(--ts-primary); color:#fff; border-color:var(--ts-primary); }

/* ── P3.1: homepage "20+" mask-text (.partner-map h2) is 250px → 382px wide, overflows small
   viewports. Scale it down so it fits & wraps cleanly on mobile (background-clip unaffected). ── */
@media (max-width:767px){
  .partner-map h2.mask-text{ font-size:clamp(120px,34vw,180px); line-height:1; overflow-wrap:anywhere; }
}
@media (max-width:400px){
  .partner-map h2.mask-text{ font-size:120px; }
}