/*
 * Shahen component CSS for rebuilt Elementor container layouts.
 * Convention: one block per component under a .sh-<component> class,
 * fenced by "sh-<name> start" / "sh-<name> end" marker comments so
 * parallel authors never collide.
 */

/* sh-fonts start */
/* Per-language site fonts (cluadedesign: IBM Plex Sans LTR, IBM Plex Sans Arabic RTL). */
body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	color: #1A2733;
}
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] button, html[lang="ar"] input,
html[lang="ar"] select, html[lang="ar"] textarea {
	font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
}
/* sh-fonts end */

/* sh-links start */
/* a plugin's reset.css sets a bare `a{color:#c36}` (pink) that leaks onto any link
   without an explicit colour (related-post wrappers, skip-link, stray inline links).
   Give links the brand colour so every page is on-theme; widget-styled links (nav,
   footer, buttons, breadcrumbs, post-body) keep their own more-specific colours. */
body a{color:var(--e-global-color-sh_red,#EF4423)}
body a:hover{color:var(--e-global-color-sh_orange,#F7941D)}
/* sh-links end */

/* sh-header start */
.sh-header{position:sticky;top:0}

/* design vertical rhythm: slim 35px topbar (8px padding, 13px text), 81px header (14px padding) —
   padding on the bar itself; child groups lose the kit's default 10px */
.sh-topbar{padding-top:8px;padding-bottom:8px;font-size:13px;line-height:1.4}
.sh-header{padding-top:14px;padding-bottom:14px}
.sh-topbar>.e-con-inner,
.sh-header>.e-con-inner{padding-top:0;padding-bottom:0}
.sh-topbar .e-con,
.sh-header .e-con{padding-top:0;padding-bottom:0}
/* topbar text renders at the design's 13px, not the theme's 16px base */
.sh-topbar .elementor-widget-text-editor,
.sh-topbar .elementor-widget-container,
.sh-topbar p,
.sh-topbar a,
.sh-topbar span{font-size:13px;line-height:1.4}
.sh-topbar p{margin:0}

.sh-topbar-social a{color:#CBD9EA;text-decoration:none;display:flex;align-items:center;transition:color .2s ease}
.sh-topbar-social a:hover{color:#F7941D}

/* Polylang language-switcher widget styled to the design's inline switcher:
   flag + name, 13px, orange, no list chrome */
.sh-lang-switcher .cpel-switcher{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.sh-lang-switcher .cpel-switcher__lang{margin:0}
.sh-lang-switcher .cpel-switcher__lang a{display:flex;align-items:center;padding:0;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;color:#F7941D}
.sh-lang-switcher .cpel-switcher__name{font-size:13px;font-weight:600}
.sh-lang-switcher .cpel-switcher__flag{display:flex}
.sh-lang-switcher .cpel-switcher__flag img{display:block;width:20px;height:14px;object-fit:cover;border-radius:2px}

.sh-header-logo img{height:52px;width:auto;display:block}

.sh-header-nav .elementor-nav-menu{display:flex;align-items:center;gap:32px}
.sh-header-nav .elementor-nav-menu .elementor-item{font-size:15px;font-weight:500;color:#1A2733;text-decoration:none;transition:color .2s ease}
/* design nav items are pure text: no padding shift, no underline pointer — the
   nav-menu widget re-adds 20px horizontal padding on hover; kill it in every state */
.sh-header-nav .elementor-nav-menu .elementor-item,
.sh-header-nav .elementor-nav-menu .elementor-item:hover,
.sh-header-nav .elementor-nav-menu .elementor-item:focus,
.sh-header-nav .elementor-nav-menu .elementor-item.elementor-item-active{padding-left:0 !important;padding-right:0 !important;margin:0 !important}
.sh-header-nav .elementor-nav-menu .elementor-item:hover{color:#EF4423}
.sh-header-nav .elementor-nav-menu .elementor-item.elementor-item-active{color:#EF4423;font-weight:700}
.sh-header-nav .elementor-item:before,
.sh-header-nav .elementor-item:after{display:none !important}

.sh-header-cta .elementor-button{background:linear-gradient(135deg,#F7941D,#EF4423);color:#FFFFFF;font-weight:700;font-size:15px;padding:12px 26px;border-radius:8px;box-shadow:0 4px 14px rgba(239,68,35,.25);border:none;transition:box-shadow .2s ease}
.sh-header-cta .elementor-button:hover{box-shadow:0 6px 20px rgba(239,68,35,.4);color:#FFFFFF}

/* responsive: the header's inner containers were a fixed 1200px → they overflowed
   tablet/mobile viewports and pushed the logo off-screen. Clamp them, then lay both
   bars out as single rows. */
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner{max-width:100% !important}
@media (max-width:1024px){
  /* main bar: logo + hamburger on one row (CTA auto-hides on mobile via widget setting) */
  .sh-header>.e-con{position:relative !important;flex-wrap:nowrap !important;justify-content:space-between !important;align-items:center !important}
  .sh-header-logo{flex:0 0 auto !important}
  .sh-header-nav{flex:0 0 auto !important;width:auto !important;position:static !important}
  /* the mobile dropdown was position:static (Elementor default is absolute), so it sat
     in-flow at full menu width and overflowed the viewport; restore absolute + full-row width */
  .sh-header-nav .elementor-nav-menu--dropdown{position:absolute !important;top:100% !important;left:0 !important;right:0 !important;width:auto !important;max-width:100vw !important}
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-nav-menu{flex-direction:column !important}
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-nav-menu>li,
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-nav-menu>li>a{width:100% !important}
  /* top contact bar: single compact row (phone / social / lang-switcher) */
  .sh-topbar>.e-con{flex-wrap:nowrap !important;justify-content:space-between !important;align-items:center !important;gap:10px}
  .sh-topbar>.e-con>.e-con{flex:0 1 auto !important;width:auto !important}
}

/* header polish (tablet/mobile): theme colours, spacing, subtle motion */
@media (max-width:1024px){
  .sh-header-logo img{height:44px !important}
  .sh-header{box-shadow:0 2px 14px rgba(22,57,95,.07)}
  /* hamburger themed navy → orange on hover/open (was default Elementor grey) */
  .sh-header-nav .elementor-menu-toggle{color:#16395F !important;background:transparent !important;border-radius:8px;transition:color .2s ease,background .2s ease}
  .sh-header-nav .elementor-menu-toggle svg{fill:currentColor !important}
  .sh-header-nav .elementor-menu-toggle:hover{color:#EF4423 !important;background:rgba(22,57,95,.06) !important}
  .sh-header-nav .elementor-menu-toggle.elementor-active{color:#EF4423 !important}
  /* dropdown = floating card with orange accent line */
  .sh-header-nav .elementor-nav-menu--dropdown{background:#fff !important;box-shadow:0 18px 40px rgba(22,57,95,.15) !important;border-radius:0 0 14px 14px !important;border-top:3px solid #F7941D !important;padding:4px 0 !important}
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-nav-menu{gap:0 !important}
  /* clean list rows: navy text, dividers, comfortable padding */
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-item{padding:15px 22px !important;font-size:16px !important;font-weight:600 !important;color:#16395F !important;border-bottom:1px solid #EEF2F6 !important;transition:color .2s ease,background .2s ease,padding-inline-end .2s ease !important}
  .sh-header-nav .elementor-nav-menu--dropdown li:last-child .elementor-item{border-bottom:0 !important}
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-item:hover{color:#EF4423 !important;background:rgba(247,148,29,.06) !important;padding-inline-end:28px !important}
  /* active row: orange tint + accent (replaces off-theme dark-grey bar) */
  .sh-header-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{color:#EF4423 !important;background:rgba(247,148,29,.08) !important;border-inline-start:3px solid #F7941D !important}
  /* simple staggered reveal when the menu opens */
  @keyframes shMenuItemIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li{animation:shMenuItemIn .3s ease both}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(1){animation-delay:.02s}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(2){animation-delay:.06s}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(3){animation-delay:.10s}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(4){animation-delay:.14s}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(5){animation-delay:.18s}
  .sh-header-nav:has(.elementor-menu-toggle.elementor-active) .elementor-nav-menu--dropdown li:nth-child(6){animation-delay:.22s}
}
@media (prefers-reduced-motion:reduce){
  .sh-header-nav .elementor-nav-menu--dropdown li{animation:none !important}
}
/* sh-header end */

/* sh-footer start */

.sh-footer__logo img {
  height: 56px;
  width: auto;
  display: block;
}

.sh-footer__col-brand {
  align-items: flex-start;
}

/* plain text link lists: hide the (empty) icon gutter Elementor still renders */
.sh-footer__nav-list .elementor-icon-list-icon,
.sh-footer__services-list .elementor-icon-list-icon,
.sh-footer__contact-list .elementor-icon-list-icon {
  display: none;
}

.sh-footer__nav-list a,
.sh-footer__services-list a,
.sh-footer__contact-list a {
  text-decoration: none;
}

/* design list rhythm: 14px text, 12px between items */
.sh-footer__nav-list .elementor-icon-list-text,
.sh-footer__services-list .elementor-icon-list-text,
.sh-footer__contact-list .elementor-icon-list-text {
  font-size: 14px;
}

.sh-footer__nav-list .elementor-icon-list-item:not(:last-child),
.sh-footer__services-list .elementor-icon-list-item:not(:last-child),
.sh-footer__contact-list .elementor-icon-list-item:not(:last-child) {
  padding-bottom: 12px;
}

.sh-footer__nav-list .elementor-icon-list-item:last-child,
.sh-footer__services-list .elementor-icon-list-item:last-child,
.sh-footer__contact-list .elementor-icon-list-item:last-child {
  padding-bottom: 0;
}

.sh-footer__nav-list .elementor-icon-list-item a:hover,
.sh-footer__services-list .elementor-icon-list-item a:hover,
.sh-footer__contact-list .elementor-icon-list-item a:hover {
  color: var(--e-global-color-sh_orange, #F7941D) !important;
}

/* phone number: bold + orange (Elementor icon-list has no per-item color control;
   widget CSS colors the inner span directly, so the span must be targeted too) */
.sh-footer__contact-list .elementor-icon-list-item:nth-child(2) a,
.sh-footer__contact-list .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text {
  color: var(--e-global-color-sh_orange, #F7941D);
  font-weight: 700;
}

/* match design vertical rhythm: no wrapper padding, 60px bottom bar */
.sh-footer {
  padding-top: 0;
  padding-bottom: 0;
}

.sh-footer__bottom {
  padding-top: 0;
  padding-bottom: 0;
}

.sh-footer__bottom-inner {
  --padding-block-start: 19px;
  --padding-block-end: 19px;
}

.sh-footer__copyright,
.sh-footer__copyright p,
.sh-footer__copyright .elementor-heading-title {
  font-size: 14px;
  line-height: 1.5;
}

.sh-footer__copyright p {
  margin: 0;
}

/* social icon boxes */
.sh-footer__social {
  align-items: center;
}

.sh-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #2A4A6E;
  border-radius: 8px;
  color: #B9C9DA;
  transition: color .2s ease, border-color .2s ease;
}

.sh-footer__social-link:hover {
  color: var(--e-global-color-sh_orange, #F7941D);
  border-color: var(--e-global-color-sh_orange, #F7941D);
}

.sh-footer__social-link svg {
  display: block;
}

/* sh-footer end */

/* sh-single-service start */

/* Page hero: navy gradient + radial orange glow accent (design: linear-gradient(120deg,#16395F 60%,#1B4A7E)) */
.sh-service-hero {
    position: relative;
    background: linear-gradient(120deg, #16395F 60%, #1B4A7E);
}

.sh-service-hero__glow {
    position: absolute;
    top: -80px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 148, 29, .3), transparent 70%);
    pointer-events: none;
}

.sh-service-hero__breadcrumb a {
    color: #8FA9C4;
    text-decoration: none;
}

/* Sidebar: sticky on desktop/tablet, static + after content on mobile */
.sh-service-sidebar {
    position: sticky;
    top: 100px;
}

/* "All services" nav list: hover treatment only.
   FLAG: the current-page gradient highlight from the design cannot be
   applied statically in a single shared template (it would be wrong on
   the other 5 service pages), so every item gets the same hover style. */
.sh-srvnav__item:hover {
    background: #F6F9FC;
}

.sh-srvnav__item:hover .elementor-heading-title {
    color: #EF4423;
}

/* CTA card: navy gradient background (design: linear-gradient(150deg,#16395F,#1B4A7E)) */
.sh-service-cta {
    background: linear-gradient(150deg, #16395F, #1B4A7E);
}

/* Gradient CTA button (design: linear-gradient(135deg,#F7941D,#EF4423)) */
.sh-btn-gradient .elementor-button {
    background-image: linear-gradient(135deg, #F7941D, #EF4423) !important;
    background-color: transparent !important;
}

/* Phone number button: force LTR so digits don't get reversed by the RTL page direction */
.sh-tel-btn .elementor-button {
    direction: ltr;
}

@media (max-width: 767px) {
    .sh-service-sidebar {
        position: static;
        top: auto;
    }
}

/* sh-single-service end */

/* sh-single-post start */
.sh-post-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#16395F 60%,#1B4A7E)}
.sh-post-hero a{text-decoration:none;color:inherit}
.sh-hero-glow{position:absolute;top:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.3),transparent 70%);pointer-events:none}
.sh-cat-badge{display:inline-block}
.sh-reading-time{font-size:14px;color:#CBD9EA}
.sh-cta-gradient{background:linear-gradient(150deg,#16395F,#1B4A7E)}
.sh-sidebar-cta-gradient{background:linear-gradient(150deg,#16395F,#1B4A7E)}
.sh-btn-gradient .elementor-button{background:linear-gradient(135deg,#F7941D,#EF4423) !important}
.sh-sidebar-sticky{position:sticky;top:100px}
.sh-related-item{text-decoration:none}

.sh-post-body p{margin:0 0 24px;font-size:16px;line-height:2.1;color:#33465A}
.sh-post-body h2{margin:36px 0 16px;font-size:26px;font-weight:700;color:#16395F}
.sh-post-body ul{margin:0 0 24px;padding-right:22px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:2;color:#33465A}
.sh-post-body ol{margin:0 0 24px;padding-right:22px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:2;color:#33465A}
.sh-post-body li{margin:0}
.sh-post-body strong{color:#16395F}
.sh-post-body a{color:#EF4423}
.sh-post-body blockquote{background:#FFF9F2;border-right:4px solid #F7941D;border-radius:10px;padding:24px 28px;margin:0 0 28px}
.sh-post-body blockquote p{margin:0;font-size:16px;line-height:2;color:#6B5A45;font-weight:500}

@media(max-width:767px){
  .sh-post-body h2{font-size:22px;margin:28px 0 14px}
}
/* sh-single-post end */

/* sh-about start */

/* ===== Page Hero ===== */
.sh-about-hero {
  position: relative;
  background: linear-gradient(120deg, #16395F 60%, #1B4A7E) !important;
}

.sh-about-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 29, .3), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sh-about-hero__inner {
  position: relative;
  z-index: 1;
}

.sh-about-hero__crumb p,
.sh-about-hero__subtitle p {
  margin: 0;
}

.sh-about-hero__subtitle {
  max-width: 600px;
}

.sh-about-hero__title .elementor-heading-title {
  margin: 0;
}

/* ===== Story ===== */
.sh-story__p p {
  margin: 0;
}

.sh-story__media {
  position: relative;
}

.sh-story__media-img img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ===== Mission / Vision / Values ===== */
.sh-mission__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.sh-mission__card-text p {
  margin: 0;
}

/* ===== Why Us ===== */
.sh-whyus__media-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.sh-whyus__num-text .elementor-heading-title {
  line-height: 1;
}

.sh-whyus__row-title .elementor-heading-title {
  margin: 0;
}

.sh-whyus__row-desc p {
  margin: 0;
}

/* ===== CTA Band ===== */
.sh-about-cta {
  position: relative;
}

.sh-about-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 29, .35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sh-about-cta__content,
.sh-about-cta__actions {
  position: relative;
  z-index: 1;
}

.sh-about-cta__title .elementor-heading-title {
  margin: 0 0 12px;
}

.sh-about-cta__desc p {
  margin: 0;
}

.sh-about-cta__btn-primary .elementor-button {
  background: linear-gradient(135deg, #F7941D, #EF4423) !important;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
}

.sh-about-cta__btn-primary .elementor-button:hover {
  color: #FFFFFF;
  filter: brightness(1.05);
}

.sh-about-cta__btn-ghost .elementor-button {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  direction: ltr;
}

.sh-about-cta__btn-ghost .elementor-button:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .18) !important;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .sh-about-hero__title .elementor-heading-title {
    font-size: 30px !important;
  }

  .sh-story__title .elementor-heading-title,
  .sh-whyus__title .elementor-heading-title {
    font-size: 26px !important;
  }

  .sh-mission__title .elementor-heading-title {
    font-size: 26px !important;
  }

  .sh-about-cta__actions {
    width: 100%;
  }

  .sh-about-cta__actions .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

/* sh-about end */

/* sh-services start */
.sh-hero-services{position:relative;overflow:hidden;}
.sh-hero-services::before{content:"";position:absolute;top:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.3),transparent 70%);pointer-events:none;}
.sh-hero-breadcrumb a{color:#8FA9C4;text-decoration:none;}
.sh-hero-subtitle{max-width:640px;}

.sh-service-card{transition:box-shadow .25s ease;overflow:hidden;}
.sh-service-card:hover{box-shadow:0 14px 36px rgba(22,57,95,.13);}
.sh-service-card>.e-con-inner{padding:0;}
/* full-bleed 220px image column per design (grid-template-columns:220px 1fr, overflow hidden);
   --width beats the element-level width var Elementor writes */
.sh-card-imgwrap{overflow:hidden;--width:220px;width:220px !important;min-width:220px;flex:none;align-self:stretch;padding:0;min-height:210px;}
.sh-service-card>.e-con-inner>.e-con:not(.sh-card-imgwrap){flex:1 1 auto;width:auto !important;}
.sh-card-img{width:100%;height:100%;}
.sh-card-img .elementor-widget-container{width:100%;height:100%;}
.sh-card-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
.sh-service-card>.e-con-inner>.e-con:not(.sh-card-imgwrap){padding:26px;justify-content:center;}

.sh-cta-band{position:relative;overflow:hidden;}
.sh-cta-band::before{content:"";position:absolute;top:-60px;left:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.35),transparent 70%);pointer-events:none;}
.sh-cta-tel{direction:ltr;}
/* sh-services end */

/* sh-faq start */
.sh-faq-hero{position:relative;overflow:hidden;}
.sh-faq-hero::before{content:"";position:absolute;top:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.3),transparent 70%);pointer-events:none;}
.sh-faq-hero-breadcrumb a{color:#8FA9C4;text-decoration:none;}
.sh-faq-hero-subtitle{max-width:600px;}

.sh-faq-sidebar{position:sticky;top:100px;}

/* accordion cards per design: white card, 1px #EAEEF3 border, 12px radius, 0 24px padding,
   14px gap, 20px summary padding, 17/700 titles. !important beats Elementor's per-element
   nested-accordion CSS (widget item/typography settings don't reliably reach it). */
.e-n-accordion{display:flex;flex-direction:column;gap:14px;}
.e-n-accordion-item{background:#FFFFFF !important;border:1px solid #EAEEF3 !important;border-radius:12px !important;padding:0 24px !important;overflow:hidden;}
.e-n-accordion-item>summary{padding:20px 0 !important;}
.e-n-accordion-item-title-text{font-size:17px;font-weight:700;color:#16395F;}
.e-n-accordion-item .e-n-accordion-item-title+div{padding:0 0 20px !important;font-size:15px;line-height:1.9;color:#33465A;}

.sh-faq-useful-links .elementor-icon-list-icon{display:none;}
.sh-faq-useful-links a{text-decoration:none;}
.sh-faq-useful-links .elementor-icon-list-item a:hover{color:var(--e-global-color-sh_red,#EF4423) !important;}

.sh-cta-band{position:relative;overflow:hidden;}
.sh-cta-band::before{content:"";position:absolute;top:-60px;left:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.35),transparent 70%);pointer-events:none;}
.sh-cta-tel{direction:ltr;}

@media(max-width:767px){
  .sh-faq-sidebar{position:static;top:auto;}
}
/* sh-faq end */

/* sh-home-ar start */

/* ===== shared kicker / section title / section link ===== */
.sh-home__kicker { letter-spacing: .5px; }
.sh-home__kicker p { margin: 0; }
.sh-home__section-title { text-wrap: pretty; }
.sh-home__section-link a,
.sh-home__about-phone a { text-decoration: none; }
.sh-home__section-link { border-bottom: 2px solid var(--e-global-color-sh_orange, #F7941D); padding-bottom: 4px; align-self: flex-end; }
.sh-home__section-link p { margin: 0; }
.sh-home__header-row { margin-bottom: 0; }
.sh-home__header-left { flex: 1 1 auto; }

/* ===== buttons (shared gradient/outline/navy/ghost) ===== */
.sh-home__btn-gradient .elementor-button {
  background: linear-gradient(135deg, #F7941D, #EF4423);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(239, 68, 35, .28);
  border: none;
  transition: box-shadow .2s ease;
}
.sh-home__btn-gradient .elementor-button:hover { box-shadow: 0 8px 22px rgba(239, 68, 35, .4); color: #FFFFFF; }

.sh-home__btn-outline .elementor-button {
  background: #FFFFFF;
  color: var(--e-global-color-sh_navy, #16395F);
  border: 1.5px solid #C9D6E4;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  transition: border-color .2s ease;
}
.sh-home__btn-outline .elementor-button:hover { border-color: var(--e-global-color-sh_navy, #16395F); }

.sh-home__btn-navy .elementor-button {
  background: var(--e-global-color-sh_navy, #16395F);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 8px;
  border: none;
}

.sh-home__btn-ghost .elementor-button {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  direction: ltr;
}

/* ===== HERO ===== */
/* design rows are bare flex rows — drop the kit's default 10px container padding */
.sh-home__hero-left, .sh-home__hero-left > .e-con-inner,
.sh-home__hero-buttons, .sh-home__hero-buttons > .e-con-inner,
.sh-home__hero-trust, .sh-home__hero-trust > .e-con-inner,
.sh-home__hero-trust-item,
.sh-home-en__hero-left, .sh-home-en__hero-left > .e-con-inner,
.sh-home-en__hero-buttons, .sh-home-en__hero-buttons > .e-con-inner,
.sh-home-en__hero-trust, .sh-home-en__hero-trust > .e-con-inner,
.sh-home-en__hero-trust-item {
  padding: 0;
}
.sh-home__hero-badge { width: fit-content; }
.sh-home__hero-badge-dot { flex: none; width: 8px; height: 8px; }
.sh-home__hero-badge-text p { margin: 0; }
.sh-home__hero-title { text-wrap: pretty; }
.sh-home__hero-text { max-width: 520px; }
.sh-home__hero-text p { margin: 0; }
.sh-home__hero-trust-item svg { flex: none; }

.sh-home__hero-visual { position: relative; }
.sh-home__hero-visual-backdrop {
  position: absolute;
  inset: 24px -24px -24px 24px;
  background: linear-gradient(135deg, #16395F, #1B4A7E);
  border-radius: 16px;
  z-index: 0;
}
.sh-home__hero-visual-img { position: relative; z-index: 1; }
.sh-home__hero-visual-img .elementor-widget-container,
.sh-home__hero-visual-img img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.sh-home__hero-stat-card {
  position: absolute;
  bottom: 28px;
  right: -18px;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(22, 57, 95, .18);
  width: auto;
}
.sh-home__hero-stat-label p { margin: 0; }

@media (max-width: 767px) {
  .sh-home__hero-visual-backdrop { display: none; }
}

/* ===== STATS ===== */
.sh-home__stats { position: relative; }
.sh-home__stats-band { box-shadow: 0 16px 40px rgba(22, 57, 95, .25); }
.sh-home__stat-number { line-height: 1; }
.sh-home__stat-cell:not(:last-child) { border-left: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 1024px) {
  .sh-home__stat-cell { border-left: none !important; }
}

/* ===== ABOUT PREVIEW ===== */
.sh-home__about-visual { position: relative; }
.sh-home__about-accent {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #F7941D, #EF4423);
  border-radius: 16px;
  z-index: 0;
}
.sh-home__about-img { position: relative; z-index: 1; }
.sh-home__about-img .elementor-widget-container,
.sh-home__about-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.sh-home__about-text p { margin: 0; }
.sh-home__about-minicard { text-align: center; }
.sh-home__about-minicard p { margin: 0; }
.sh-home__about-phone p { margin: 0; }
.sh-home__about-phone a { color: var(--e-global-color-sh_red, #EF4423); font-weight: 700; }

/* ===== SERVICES / PRODUCTS card links (whole-card containers as <a>) ===== */
.sh-home__service-card,
.sh-home__product-card { text-decoration: none; transition: box-shadow .2s ease; }
.sh-home__service-card:hover,
.sh-home__product-card:hover { box-shadow: 0 12px 32px rgba(22, 57, 95, .12); }
.sh-home__service-card-img .elementor-widget-container,
.sh-home__service-card-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.sh-home__service-card-body p { margin: 0; }
.sh-home__service-card-more { margin-top: 4px; }

.sh-home__product-card-img .elementor-widget-container,
.sh-home__product-card-img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.sh-home__product-card-body p { margin: 0; }

/* ===== HOW WE WORK ===== */
.sh-home__how-header { max-width: 640px; margin: 0 auto; text-align: center; }
.sh-home__how-header p { margin: 0; }
.sh-home__how-badge { flex: none; width: 44px; height: 44px; }
.sh-home__how-card p { margin: 0; }

/* ===== PROJECTS (page-level header block) ===== */
.sh-home__projects .sh-home__header-left { max-width: 100%; }

/* ===== CTA BAND ===== */
.sh-home__cta-box { position: relative; overflow: hidden; }
.sh-home__cta-glow {
  position: absolute;
  top: -60px;
  left: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 29, .35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.sh-home__cta-text { position: relative; z-index: 1; }
.sh-home__cta-text p { margin: 0; }
.sh-home__cta-buttons { position: relative; z-index: 1; flex: none; }

/* ===== BLOG (page-level loop grid) ===== */
.sh-home__blog-grid { margin-top: 0; }

/* ===== shared loop-item card styles (Projects + Blog loop items) ===== */
.sh-home__project-card,
.sh-home__blog-card { height: 100%; }

.sh-home__project-card-media { position: relative; }
.sh-home__project-card-img .elementor-widget-container,
.sh-home__project-card-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}
.sh-home__project-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg, #F7941D, #EF4423);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1.3;
}
.sh-home__project-card-badge p { margin: 0; }
.sh-home__project-card-title p { margin: 0; }
.sh-home__project-card-meta-item svg { flex: none; }
.sh-home__project-card-meta-item p { margin: 0; }

.sh-home__blog-card-img .elementor-widget-container,
.sh-home__blog-card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.sh-home__blog-card-meta p { margin: 0; }
.sh-home__blog-card-title p { margin: 0; }
.sh-home__blog-card-link p { margin: 0; }

/* sh-home-ar end */

/* sh-contact start */

/* Page hero: navy gradient + radial orange glow accent (design: linear-gradient(120deg,#16395F 60%,#1B4A7E)) */
.sh-contact-hero {
    position: relative;
    background: linear-gradient(120deg, #16395F 60%, #1B4A7E);
}

.sh-contact-hero__glow {
    position: absolute;
    top: -80px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 148, 29, .3), transparent 70%);
    pointer-events: none;
}

.sh-contact-hero__breadcrumb a {
    color: #8FA9C4;
    text-decoration: none;
}

.sh-contact-hero__desc {
    max-width: 600px;
}

/* Form fields: orange focus border (design: style-focus border-color:#F7941D) */
.sh-contact-form .elementor-field-group .elementor-field:focus,
.sh-contact-form .elementor-field-group .elementor-select-wrapper select:focus {
    border-color: #F7941D;
}

/* Submit button: gradient background (design: linear-gradient(135deg,#F7941D,#EF4423)) */
.sh-contact-form .elementor-button[type="submit"] {
    background-image: linear-gradient(135deg, #F7941D, #EF4423) !important;
    background-color: transparent !important;
    border: none;
    padding: 16px 44px;
    box-shadow: 0 6px 18px rgba(239, 68, 35, .28);
}

/* sh-contact end */

/* sh-blog start */
.sh-blog-hero{position:relative;overflow:hidden}
.sh-blog-hero::before{content:"";position:absolute;top:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.3),transparent 70%);pointer-events:none}
.sh-blog-hero p{margin:0}
.sh-blog-hero-breadcrumb a{color:#8FA9C4;text-decoration:none}
.sh-blog-hero-subtitle{max-width:600px}

.sh-blog-featured-card{text-decoration:none;transition:box-shadow .25s ease}
.sh-blog-featured-card:hover{box-shadow:0 14px 36px rgba(22,57,95,.13)}
.sh-blog-featured-card p{margin:0}
.sh-blog-featured-media{overflow:hidden}

.sh-blog-grid-card{text-decoration:none;transition:box-shadow .25s ease}
.sh-blog-grid-card:hover{box-shadow:0 12px 32px rgba(22,57,95,.12)}
.sh-blog-grid-card p{margin:0}

.elementor-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px}
.elementor-pagination .page-numbers{display:inline-flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid #EAEEF3;border-radius:8px;background:#FFFFFF;color:#16395F;font-size:15px;font-weight:600;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.elementor-pagination a.page-numbers:hover{border-color:#F7941D;color:#EF4423}
.elementor-pagination .page-numbers.current{background:linear-gradient(135deg,#F7941D,#EF4423);border-color:transparent;color:#FFFFFF}
.elementor-pagination .page-numbers.dots{border:none;background:none}
/* sh-blog end */

/* sh-home-en start */

/* ===== Hero ===== */
.sh-home-en__hero-visual {
  position: relative;
}

.sh-home-en__hero-visual::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  background: linear-gradient(135deg, #16395F, #1B4A7E);
  border-radius: 16px;
  z-index: 0;
}

.sh-home-en__hero-visual-img {
  position: relative;
  z-index: 1;
}

.sh-home-en__hero-visual-img img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.sh-home-en__hero-stat-card {
  position: absolute;
  bottom: 28px;
  left: -18px;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(22, 57, 95, .18);
  width: auto;
}

.sh-home-en__hero-badge {
  width: fit-content;
}

.sh-home-en__hero-badge-text p {
  margin: 0;
}

/* keep the 3 trust items on one row (EN copy is wider than the column) */
.sh-home-en__hero-trust,
.sh-home-en__hero-trust > .e-con-inner {
  flex-wrap: nowrap;
  --flex-wrap: nowrap;
}

.sh-home-en__hero-trust {
  gap: 20px;
}

.sh-home-en__hero-text p {
  margin: 0;
  max-width: 520px;
}

.sh-home-en__hero-stat-label p {
  margin: 0;
}

.sh-home-en__hero-title .elementor-heading-title {
  margin: 0;
}

.sh-home-en__hero-trust-item p {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}

.sh-home-en__kicker p {
  margin: 0;
}

.sh-home-en__section-title .elementor-heading-title {
  margin: 0;
}

/* ===== Stats band ===== */
.sh-home-en__stat-cell {
  position: relative;
}

.sh-home-en__stat-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}

.sh-home-en__stat-label p {
  margin: 0;
}

@media (max-width: 1024px) {
  .sh-home-en__stat-cell:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .sh-home-en__stat-cell:not(:last-child)::after {
    display: none;
  }
}

/* ===== About preview ===== */
.sh-home-en__about-visual {
  position: relative;
}

.sh-home-en__about-visual::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #F7941D, #EF4423);
  border-radius: 16px;
  z-index: -1;
}

.sh-home-en__about-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.sh-home-en__about-text p,
.sh-home-en__about-phone p,
.sh-home-en__about-minicard p {
  margin: 0;
}

/* ===== Section link / kicker helpers ===== */
.sh-home-en__section-link p {
  margin: 0;
}

.sh-home-en__section-link a {
  color: #16395F;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 2px solid #F7941D;
  padding-bottom: 4px;
}

/* ===== Service cards ===== */
.sh-home-en__service-card {
  text-decoration: none;
  transition: box-shadow .25s ease;
}

.sh-home-en__service-card:hover {
  box-shadow: 0 12px 32px rgba(22, 57, 95, .12);
}

.sh-home-en__service-card-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.sh-home-en__service-card-body p {
  margin: 0;
}

.sh-home-en__service-card-body .elementor-heading-title {
  margin: 0;
}

.sh-home-en__service-card-more p {
  margin: 0;
}

/* ===== How we work ===== */
.sh-home-en__how-card p {
  margin: 0;
}

.sh-home-en__how-card .elementor-heading-title {
  margin: 0;
}

/* ===== Projects (loop grid) ===== */
.sh-home-en__project-card-media {
  position: relative;
}

.sh-home-en__project-card-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

.sh-home-en__project-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #F7941D, #EF4423);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-block;
}

.sh-home-en__project-card-badge p {
  margin: 0;
}

.sh-home-en__project-card-title .elementor-heading-title {
  margin: 0;
}

.sh-home-en__project-card-meta-item p {
  margin: 0;
}

/* ===== CTA band ===== */
.sh-home-en__cta-box {
  position: relative;
}

.sh-home-en__cta-box::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 148, 29, .35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sh-home-en__cta-text,
.sh-home-en__cta-buttons {
  position: relative;
  z-index: 1;
}

.sh-home-en__cta-text .elementor-heading-title {
  margin: 0 0 12px;
}

.sh-home-en__cta-text p {
  margin: 0;
}

/* ===== Buttons ===== */
.sh-home-en__btn-gradient .elementor-button {
  background: linear-gradient(135deg, #F7941D, #EF4423) !important;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(239, 68, 35, .28);
  border: none;
  transition: box-shadow .2s ease;
}

.sh-home-en__btn-gradient .elementor-button:hover {
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(239, 68, 35, .4);
}

.sh-home-en__btn-outline .elementor-button {
  background: #FFFFFF !important;
  color: #16395F;
  border: 1.5px solid #C9D6E4;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  transition: border-color .2s ease;
}

.sh-home-en__btn-outline .elementor-button:hover {
  color: #16395F;
  border-color: #16395F;
}

.sh-home-en__btn-navy .elementor-button {
  background: #16395F !important;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 8px;
  border: none;
}

.sh-home-en__btn-navy .elementor-button:hover {
  color: #FFFFFF;
  background: #122E4D !important;
}

.sh-home-en__btn-ghost .elementor-button {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 8px;
  direction: ltr;
}

.sh-home-en__btn-ghost .elementor-button:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .18) !important;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .sh-home-en__hero-title .elementor-heading-title {
    font-size: 30px !important;
  }

  .sh-home-en__section-title .elementor-heading-title {
    font-size: 26px !important;
  }

  .sh-home-en__hero-visual::before {
    inset: 16px -16px -16px 16px;
  }
}

/* sh-home-en end */

/* sh-reveal start */
/* elegant scroll-reveal for top-level sections (JS adds .sh-js + .sh-reveal/.sh-in) */
@media (prefers-reduced-motion: no-preference) {
  .sh-js .sh-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .sh-js .sh-reveal.sh-in {
    opacity: 1;
    transform: none;
  }
}
/* sh-reveal end */

/* sh-project start */

/* Page hero: navy gradient + radial orange glow accent (design: linear-gradient(120deg,#16395F 60%,#1B4A7E)) */
.sh-project-hero {
    position: relative;
    background: linear-gradient(120deg, #16395F 60%, #1B4A7E);
}

/* badge is a compact pill (heading widget bg spans full width by default) */
.sh-project-badge {
    width: -moz-fit-content;
    width: fit-content;
}

.sh-project-hero__glow {
    position: absolute;
    top: -80px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 148, 29, .3), transparent 70%);
    pointer-events: none;
}

.sh-project-hero__breadcrumb a {
    color: #8FA9C4;
    text-decoration: none;
}

.sh-project-hero__desc {
    max-width: 640px;
}

/* Sidebar: sticky on desktop/tablet, static on mobile */
.sh-project-sidebar {
    position: sticky;
    top: 100px;
}

/* CTA card: navy gradient background (design: linear-gradient(150deg,#16395F,#1B4A7E)) */
.sh-project-cta {
    background: linear-gradient(150deg, #16395F, #1B4A7E);
}

/* Gradient CTA button (design: linear-gradient(135deg,#F7941D,#EF4423)) */
.sh-project-btn-gradient .elementor-button {
    background-image: linear-gradient(135deg, #F7941D, #EF4423) !important;
    background-color: transparent !important;
}

/* Phone number button: force LTR so digits don't get reversed by the RTL page direction */
.sh-project-tel-btn .elementor-button {
    direction: ltr;
}

@media (max-width: 1024px) {
    .sh-project-facts__card {
        grid-template-columns: repeat(2, 1fr);
    }

    .sh-project-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .sh-project-facts__card {
        grid-template-columns: 1fr;
    }

    .sh-project-sidebar {
        position: static;
        top: auto;
    }
}

/* Gallery section: hidden unless the dynamic tag rendered images (empty project_gallery -> no heading) */
.sh-project-gallery-section {
    display: none;
}

.sh-project-gallery-section:has(.elementor-image-gallery) {
    display: flex;
}

/* Force the WP [gallery] float layout into the design's 3-col grid (180px cover, 12px radius).
   !important throughout to beat Elementor's widget-image-gallery + WP core gallery CSS. */
.sh-project-gallery-grid .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    width: 100%;
}

.sh-project-gallery-grid .gallery-item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Each image is wrapped in .gallery-icon > a (inline lightbox link); force the
   wrappers to full-width blocks so the image fills its grid cell. */
.sh-project-gallery-grid .gallery-icon {
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    margin: 0 !important;
}

.sh-project-gallery-grid .gallery-icon a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.sh-project-gallery-grid .gallery-item img {
    width: 100% !important;
    height: 180px !important;
    max-width: none !important;
    object-fit: cover;
    border: 0 !important;
    border-radius: 12px;
    display: block;
}

.sh-project-gallery-grid .gallery-caption {
    display: none;
}

@media (max-width: 767px) {
    .sh-project-gallery-grid .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* sh-project end */

/* sh-mobile-grids start */
/* Cross-cutting mobile fix: Elementor reflows these uniform-tile grids to a single
   tall column on phones, which reads as broken. Force them back to a 2-col grid to
   match the reference (stats 2x2, service/product cards 2-col, "who suits" 2x2,
   footer 2x2). Selectors use [class*=token] so one rule covers AR (sh-home__) + EN
   (sh-home-en__). Only tile-only inners are gridded — never a section inner that also
   holds a header (those keep their own layout; the loops are handled via
   .elementor-loop-container below). */

/* The "who suits this system?" bullet: an empty Elementor container defaults to
   width:100%, so its orange background + border-radius:50% rendered as a stretched
   ellipse ("blob"). Pin it to a real 8px dot. Broken at ALL widths, so no media query. */
.sh-who-card .e-con-inner > .e-con {
  flex: 0 0 8px !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-self: center;
}

@media (max-width: 767px) {
  /* ---------------------------------------------------------------------------
     Mobile column system is driven by CONTENT DENSITY, not one blanket rule:
       * compact tiles  (number/label, icon + short title, no body copy)  -> 2 col
       * rich cards     (full paragraph + CTA, or a long post title)      -> 1 col
     A paragraph or a 4-7 word heading simply cannot set in a ~150px half-column
     (titles wrap 3-7 lines, body text breaks every 2 words), so those get the
     full phone width. Tokens: [class*=] selectors cover AR (sh-home__) + EN
     (sh-home-en__) in one rule.
     --------------------------------------------------------------------------- */

  /* --- compact tiles -> 2 columns --- */
  [class*="stats-band"] > .e-con-inner,
  [class*="products-grid"] > .e-con-inner,
  [class*="how-grid"] > .e-con-inner,
  .sh-story__stats > .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .e-con-inner:has(> .sh-who-card) {              /* service-detail "who suits" */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Elementor authors some tiles at --width:50% (2-per-row on the desktop flex
     row). Inside the forced 2-col grid that width then resolves against the grid
     CELL, shrinking each tile to half its cell and crushing the content to a
     sliver (paragraph measured 19px wide). Pin every gridded tile to fill its
     own cell. */
  [class*="stats-band"] > .e-con-inner > .e-con,
  [class*="products-grid"] > .e-con-inner > .e-con,
  [class*="how-grid"] > .e-con-inner > .e-con,
  .sh-story__stats > .e-con-inner > .e-con,
  .e-con-inner:has(> .sh-who-card) > .e-con {
    width: 100% !important;
    --width: 100% !important;
    max-width: 100% !important;
  }

  /* --- rich content cards -> 1 column --- */
  [class*="services-grid"] > .e-con-inner,      /* home service cards (paragraph) */
  .sh-mission__grid > .e-con-inner,             /* about vision / mission / values */
  .e-con-inner:has(> .sh-service-card) {        /* services-listing cards */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* services-listing card is a horizontal 220px-image row on desktop; stacked to a
     full-width vertical card on phones, so let the image span the card. */
  .sh-service-card .sh-card-imgwrap {
    width: 100% !important;
    --width: 100% !important;
    min-width: 0 !important;
    min-height: 160px !important;
  }
  /* blog + projects loops: same rich-card reasoning (post titles wrap 4-7 lines
     in a half column) -> 1 column. */
  .elementor-loop-container.elementor-grid {
    grid-template-columns: 1fr !important;
  }

  /* footer: 4 columns -> 2x2 (all pages) */
  .sh-footer__row > .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 20px !important;
  }

  /* section header rows: keep the heading and the "see all" link on ONE row, link
     anchored to the bottom-inline-end (reference: flex; space-between; align-flex-end) */
  [class*="__header-row"] > .e-con-inner {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 12px !important;
  }
  [class*="__header-row"] > .e-con-inner > [class*="header-left"],
  [class*="__header-row"] > .e-con-inner > [class*="__kicker"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  [class*="__section-link"] {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
  }
}
/* sh-mobile-grids end */
