/* MST Theme 1.9.14: consistency, RTL hero and home hero entrance. */
/* Header: visual state stays identical on all page templates (including light-mode pages). */
.site-header{background:#101113!important;color:#f5f3ee!important;border-bottom:1px solid #3a3020!important}
.site-header .brand-text strong,.site-header .main-nav a{color:#f5f3ee!important}
.site-header .brand-text span{color:#bfb9ab!important}
.site-header .mst-lang-carousel{background:#17191c!important;border:1px solid #454035!important;box-shadow:0 8px 23px rgba(0,0,0,.18)!important}
.site-header .mst-lang-flag{background:linear-gradient(180deg,#2a2c31,#181a1d)!important;border-color:#4f4a3e!important;color:#fff!important;filter:none!important;opacity:1!important}
.site-header .mst-lang-flag.active{border-color:#e7bc46!important;box-shadow:0 0 0 3px rgba(240,194,72,.45),0 10px 26px #0006!important}
.site-header .mst-lang-flag-emoji{filter:none!important;opacity:1!important}
.site-header .mst-lang-arrow{background:#1a1b20!important;color:#f1cc6d!important;border:1px solid #5b523d!important}
.site-header .btn-contact{background:linear-gradient(135deg,#f2be2b,#ffe077)!important;color:#151515!important}
/* Arabic About: reverse the visual composition, not only the text flow. */
@media(min-width:981px){
 html[dir="rtl"] .mst-about-hero-layout{direction:ltr!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
 html[dir="rtl"] .mst-about-hero-copy{grid-column:2!important;grid-row:1!important;direction:rtl!important;text-align:right!important;width:100%!important;max-width:100%!important;padding:50px 0 50px clamp(12px,2vw,30px)!important;}
 html[dir="rtl"] .mst-about-hero-image{
  left:-4vw!important;right:49%!important;inset-block:0!important;
  clip-path:polygon(0 0,67% 0,70% 8%,73% 17%,76% 26%,79% 35%,82% 44%,85% 53%,88% 63%,91% 73%,94% 83%,97% 92%,100% 100%,0 100%)!important;
}
html[dir="rtl"] .mst-about-hero-image::before{
  clip-path:polygon(66.1% 0%,69.1% 8%,72.1% 17%,75.1% 26%,78.1% 35%,81.1% 44%,84.1% 53%,87.1% 63%,90.1% 73%,93.1% 83%,96.1% 92%,99.1% 100%,98.65% 100%,95.65% 92%,92.65% 83%,89.65% 73%,86.65% 63%,83.65% 53%,80.65% 44%,77.65% 35%,74.65% 26%,71.65% 17%,68.65% 8%,65.65% 0%)!important;
}
 html[dir="rtl"] .mst-about-hero-image:after{background:linear-gradient(270deg,#101113 0%,rgba(16,17,19,.12) 55%,transparent 80%)!important;}
 html[dir="rtl"] .mst-about-hero h1{font-size:clamp(2.4rem,3.8vw,4.3rem)!important;line-height:1.18!important;overflow-wrap:break-word!important;}
 html[dir="rtl"] .mst-about-hero h2{font-size:clamp(1.1rem,1.5vw,1.5rem)!important;line-height:1.5!important;}
 html[dir="rtl"] .mst-about-hero-copy p{max-width:100%!important;line-height:1.65!important;}
}
@media(min-width:651px) and (max-width:980px){
 html[dir="rtl"] .mst-about-hero-copy{text-align:right!important;direction:rtl!important;max-width:68%!important;margin-left:auto!important;margin-right:0!important;}
 html[dir="rtl"] .mst-about-hero-image{left:-4vw!important;right:30%!important;opacity:.28!important;}
}
@media(max-width:650px){html[dir="rtl"] .mst-about-hero-copy{text-align:right!important;direction:rtl!important;}}
/* Keep home CTA anchored to the selected language; do not alter the header direction for RTL. */
@media(prefers-reduced-motion:reduce){body.mst-home-v188.mst-hero-ready .mst-new-hero.mst-hero-enter .mst-hero-copy > *{animation:none!important}}

/* 1.9.19: shared header has same physical order on every language. */
html[dir="rtl"] body .site-header .header-inner{direction:ltr!important;flex-direction:row!important}
html[dir="rtl"] body .site-header .brand{order:0!important;direction:ltr!important}
html[dir="rtl"] body .site-header .main-nav{order:1!important;direction:ltr!important;flex-direction:row!important}
html[dir="rtl"] body .site-header .header-actions{order:2!important;direction:ltr!important;flex-direction:row!important}
html[dir="rtl"] body .site-header .mst-lang-carousel,html[dir="rtl"] body .site-header .mst-lang-wheel{direction:ltr!important}
/* Use the same non-transparent flag carousel visuals on every site page. */
body .site-header .mst-lang-carousel{background:#17191c!important;border:1px solid #454035!important;box-shadow:0 8px 23px rgba(0,0,0,.18)!important}
body .site-header .mst-lang-flag{background:#24262a!important;border-color:#4f4a3e!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
body .site-header .mst-lang-flag-emoji{filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
body .site-header .mst-lang-arrow{background:#1a1b20!important;color:#f1cc6d!important;border-color:#5b523d!important}
@media(max-width:740px){html[dir="rtl"] body .site-header .main-nav{flex-direction:column!important}}

/* 1.9.18: the language selector is a language-neutral LTR widget, even inside RTL pages.
   Keep the flags, buttons, carousel geometry and palette identical to the FR/CS/EN view. */
.site-header .mst-lang-carousel[dir="ltr"]{direction:ltr!important;unicode-bidi:isolate!important;flex-direction:row!important;background:#17191c!important;border-color:#454035!important;color:#fff!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-wheel{direction:ltr!important;unicode-bidi:isolate!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-arrow-prev{order:0!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-wheel{order:1!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-arrow-next{order:2!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-flag{background:linear-gradient(180deg,#2a2c31,#181a1d)!important;opacity:1!important;filter:none!important}
.site-header .mst-lang-carousel[dir="ltr"] .mst-lang-flag-emoji{filter:none!important;opacity:1!important}

/* 1.9.19 — language-neutral geometry: same header and carousel for FR/CS/EN/AR. */
html[dir="rtl"] body .site-header .header-inner,
html[dir="rtl"] body .site-header .main-nav,
html[dir="rtl"] body .site-header .header-actions{direction:ltr!important;flex-direction:row!important}
html[dir="rtl"] body .site-header .brand{direction:ltr!important}
html[dir="rtl"] body .site-header .main-nav a,
html[dir="rtl"] body .site-header .main-nav .mst-nav-service-toggle{direction:rtl!important;unicode-bidi:isolate}
html[dir="rtl"] body .site-header .mst-lang-carousel,
html[dir="rtl"] body .site-header .mst-lang-wheel{direction:ltr!important}
/* Off-screen fourth flag must remain hidden even when common flag colors override opacity. */
.site-header .mst-lang-carousel .mst-lang-flag[data-offset="-2"],
.site-header .mst-lang-carousel .mst-lang-flag[data-offset="2"]{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.site-header .mst-lang-carousel .mst-lang-flag[data-offset="-1"],
.site-header .mst-lang-carousel .mst-lang-flag[data-offset="0"],
.site-header .mst-lang-carousel .mst-lang-flag[data-offset="1"]{visibility:visible!important}
/* Footer always retains the same column order; only individual Arabic text is RTL. */
html[dir="rtl"] body .mst-shared-footer .footer-grid,
html[dir="rtl"] body .mst-shared-footer .footer-bottom{direction:ltr!important}
html[dir="rtl"] body .mst-shared-footer .footer-grid>div{direction:rtl!important;text-align:right!important}
html[dir="rtl"] body .mst-shared-footer .footer-links{direction:rtl!important}
@media(max-width:740px){html[dir="rtl"] body .site-header .main-nav{flex-direction:column!important;direction:rtl!important}}

/* 1.9.20: Header's HTML direction is structurally LTR, independent of page RTL.
   Arabic strings retain independent RTL direction. No page-specific header reversal. */
.site-header[dir="ltr"] .header-inner[dir="ltr"]{direction:ltr!important;flex-direction:row!important}
.site-header[dir="ltr"] .header-inner > .brand{order:0!important}
.site-header[dir="ltr"] .header-inner > .main-nav{order:1!important;direction:ltr!important}
.site-header[dir="ltr"] .header-inner > .header-actions{order:2!important;direction:ltr!important;flex-direction:row!important}
.site-header[dir="ltr"] .mst-lang-carousel{direction:ltr!important}
@media(max-width:1250px) and (min-width:741px){.site-header[dir="ltr"] .header-inner > .main-nav{order:3!important}}
@media(max-width:740px){.site-header[dir="ltr"] .header-inner > .main-nav{order:3!important;flex-direction:column!important}}