@charset "UTF-8";
/* xl - DESKTOP STYLES */
/* ===== KW — Base Demo Section Styling (scoped) ===== */
.kw-section {
  padding: 96px 20px;
  color: #fff;
  text-align: center;
}
.kw-bg1 {
  background: #4A90E2;
}
.kw-bg2 {
  background: #50E3C2;
}
.kw-bg3 {
  background: #F5A623;
}
.kw-bg4 {
  background: #D0021B;
}
.kw-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto 0;
}
/* ===== KW — Reveal Animations ===== */
.kw-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: transform, opacity;
}
.kw-animate.kw-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Variants (apply together with .kw-animate) */
.kw-fade-in {
  transform: none;
}
/* just fade */
.kw-fade-in-up {
  transform: translateY(24px);
}
/* fade + rise */
/* ===== KW — Background Expand ===== */
.kw-bg-expand {
  width: 80%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px !important;
  padding: 48px 100px;
  transition: width 600ms ease;
}
.kw-bg-expand.kw-expanded {
  width: 100%;
  border-radius: 0px;
}
/* ===== KW — Pinned / “story” section ===== */
.kw-pin-section {
  position: relative;
  /* total scroll space to allow all steps to appear */
  min-height: calc(3 * 100vh);
  /* 3 steps example */
  justify-content: center;
  display: flex;
}
.kw-pin-inner {
  width: 100vw !important;
  position: sticky;
  top: 0;
  height: 100vh;
  /* locked to viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* keeps steps stacked inside */
}
.kw-pin-step {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.kw-pin-step.kw-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}
/* KW — Parallax container wrapper */
.kw-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
  /* smooth subtle movement */
}
/* Optional: small helper for spacing after pinned area */
.kw-spacer {
  height: 60vh;
}
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .kw-animate, .kw-bg-expand, .kw-pin-step {
    transition: none !important;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sourceRoot%22%3A%22%2F%22%2C%22sources%22%3A%5B%22(stdin)%22%2C%22wp-content%2Fcustom_codes%2F2756-scss-desktop.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3BAAAA%3BAAAA%3BACCA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAEA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADXA%3BACmBA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAAA%3BADzBA%3BAC%2BBA%3BAAAA%3BAAAA%3BAD%2FBA%3BACgCA%3BAAAA%3BAAAA%3BADhCA%3BAAAA%3BACmCA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQA%3BAAAA%3BAAAA%3BAAAA%3BAD3CA%3BAC8CA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAWA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAD7EA%3BACoFA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADpFA%3BAC4FA%3BAAAA%3BAAAA%3BAD5FA%3BAC%2BFA%3BAACE%3BAAAA%3BAAAA%3BAAAA%22%7D */