/* =============================================================
   SHK — How We Work (Sticky Carousel)
   All selectors are scoped under .shk-hww / .shk-hww__* so this
   never collides with theme classes like .container, .px-0, etc.
   (the original static file used those unscoped, which is what
   caused the class-name collision risk).
   ============================================================= */

.shk-hww {
  --shk-hww-accent: #ED1C24;
  --shk-hww-ink: #111111;
  --shk-hww-body-text: #475569;
  --shk-hww-section-bg: #f3f3f3;
  --shk-hww-card-bg: #ffffff;
  --shk-hww-wave-image: none;
  --shk-hww-wave-top: 100px;
  --shk-hww-wave-left: 287px;

  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--shk-hww-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.shk-hww *,
.shk-hww *::before,
.shk-hww *::after { box-sizing: border-box; }

.shk-hww img { max-width: 100%; display: block; }

.shk-hww__section {
  background-color: var(--shk-hww-section-bg);
  padding: 80px 0 0;
  overflow: hidden;
}

.shk-hww__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.shk-hww__row {
  display: flex;
  justify-content: start;
  gap: clamp(24px, 2.15vw, 60px);
  align-items: center;
}

.shk-hww__left {
  align-self: flex-start;
  min-width: 341px;
}

.shk-hww__heading {
  color: var(--shk-hww-accent) !important;
  margin: 0 0 8px;
  font-size: clamp(26px, 6.5vw, 38px);
  font-weight: 600;
  text-transform: uppercase;
}

.shk-hww__desc {
  margin: 0;
  text-align: justify;
  line-height: 28px;
  color: var(--shk-hww-body-text);
}

.shk-hww__stage {
  display: flex;
  column-gap: clamp(40px, 4.1vw, 48px);
  overflow: hidden;
  height: 600px;
  align-items: center;
  position: relative;
  padding-top: 2% !important;
}

.shk-hww__stage::-webkit-scrollbar { display: none; }

.shk-hww__stage--wave::before {
  content: "";
  position: absolute;
  left: var(--shk-hww-wave-left);
  top: var(--shk-hww-wave-top);
  z-index: 0;
  background-image: var(--shk-hww-wave-image);
  background-repeat: no-repeat;
  background-size: contain;
  width: 1958px;
  height: 382px;
}

.shk-hww__card {
  padding: clamp(16px, 2.78vw, 28px);
  min-width: 287px;
  width: 100%;
  background-color: var(--shk-hww-card-bg);
  border-radius: 12px;
  overflow: hidden;
  height: max-content;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgb(17 17 17 / 69%) !important;
}

.shk-hww__card:nth-child(2n) { margin-bottom: auto; }

.shk-hww__card-num-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(20px, 3.9vw, 28px);
  color: var(--shk-hww-accent);
  font-size: clamp(40px, 5.15vw, 48px);
  font-weight: 600;
  line-height: 100%;
}

.shk-hww__card-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--shk-hww-ink);
}

.shk-hww__card-para {
  margin: 0;
  text-align: justify;
  line-height: 26px;
  font-size: 15px;
  color: var(--shk-hww-body-text);
}

/* =============================================================
   Stacked (mobile/tablet) layout.
   This 1024px value is the built-in fallback and matches the
   widget's default "Disable Below Width" setting. If that setting
   is changed in Elementor, the widget also prints a matching
   per-instance <style> block (see class-how-we-work-widget.php)
   so the CSS breakpoint and the JS pin-disable breakpoint never
   drift out of sync with each other.
   ============================================================= */
@media (max-width: 1024px) {
  .shk-hww__section { padding: 48px 0 0; }
  .shk-hww__row { flex-direction: column; align-items: stretch; }
  .shk-hww__left { min-width: 0; }

  .shk-hww__stage {
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    column-gap: 0;
    row-gap: clamp(20px, 5vw, 32px);
    padding-bottom: 24% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .shk-hww__card {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
  }

  /* Neutralize the desktop-only masonry offset so cards never
     overlap once they're stacked full-width. */
  .shk-hww__card:nth-child(2n) { margin-bottom: 0; }
}