/* @u */
/* Figma uDZg3WYkcWRbWbPLThB3Ry node 32:37: 101 three steps (zigzag cards with dashed connector arrows). Frame 1920. Fonts: Noto Sans Hebrew, Poppins (numbers).
   Built as a flow layout (card height follows the text, body text 17px instead of the design 13px). The dashed connectors from the design replace the scroll-fill timeline line on purpose. */
.c-sx { --u: calc(min(100vw, 1920px) / 1920); direction: rtl; font-family: "Noto Sans Hebrew", "Poppins", sans-serif; background: radial-gradient(ellipse 50% 50% at 50% 50%, #fff 0, #e6f7fe 50%, #fff 100%); color: #2d2d2d; overflow-x: clip; display: flow-root; }
.c-sx :where(h2, h3, p, ol, li) { margin: 0; padding: 0; list-style: none; }
.c-sx__sec { position: relative; box-sizing: border-box; padding: 46px 16px 56px; overflow: hidden; }
.c-sx__deco { display: none; }
.c-sx__h { position: relative; text-align: center; font-size: clamp(24px, 6.4vw, 34px); font-weight: 900; line-height: 1.35; text-wrap: balance; }
.c-sx__h b { color: #0072d0; font-weight: 900; }
.c-sx__h br { display: none; }
.c-sx__list { position: relative; display: flex; flex-direction: column; align-items: stretch; max-width: 600px; margin: 40px auto 0; }
.c-sx__step { position: relative; padding-top: 23px; }
.c-sx__n { position: absolute; top: 0; right: 14px; z-index: 2; font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 900; line-height: 46px; color: #0072d0; text-shadow: 0 0 20px rgba(0, 0, 0, .2); }
.c-sx__card { position: relative; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 40px 20px 22px; border-radius: 15px; background: #f2fcff; box-shadow: 0 0 0 5px #effdff, 0 4px 15px rgba(0, 0, 0, .3); }
.c-sx__txt { text-align: right; }
.c-sx__t { font-size: 21px; font-weight: 900; line-height: 1.35; color: #0072d0; }
.c-sx__txt p { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #2d2d2d; }
.c-sx__t + p { margin-top: 12px; }
.c-sx__txt b { font-weight: 700; color: #0072d0; }
.c-sx__img { display: block; margin: 0 auto; }
.c-sx__img--1 { width: 170px; height: 88px; object-fit: cover; object-position: 50% 45%; border-radius: 4px; box-shadow: 0 3px 17px rgba(0, 0, 0, .25); transform: rotate(-3.9deg); }
.c-sx__img--2 { width: 184px; height: 140px; object-fit: cover; }
.c-sx__img--3 { position: relative; width: 148px; height: 113px; margin-top: 50px; }
.c-sx__box { position: absolute; inset: 0; border-radius: 14px; background: #0072d0; box-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.c-sx__img--3 img { position: absolute; left: 24px; bottom: 0; width: 100px; height: 160px; object-fit: cover; clip-path: inset(-20px -20px 0 -20px round 0 0 14px 14px); }
.c-sx__conn { display: flex; justify-content: center; height: 120px; padding-top: 12px; box-sizing: border-box; }
.c-sx__flow { position: relative; display: block; width: 76px; height: 76px; }
.c-sx__path { display: block; width: 100%; height: 100%; transform: scaleY(-1); }
.c-sx__arrow { position: absolute; right: -15px; bottom: -15px; width: 30px; height: auto; transform: rotate(180deg); }
.c-sx__conn--a .c-sx__flow { transform: scaleX(-1); }

@media (min-width: 1280px) {
  .c-sx__sec { min-height: calc(1360 * var(--u)); padding: calc(77 * var(--u)) 0 calc(90 * var(--u)); }
  .c-sx__h { font-size: calc(42 * var(--u)); line-height: calc(59 * var(--u)); }
  .c-sx__h br { display: inline; }
  .c-sx__deco { display: block; position: absolute; width: calc(220 * var(--u)); height: auto; opacity: .2; filter: blur(calc(10 * var(--u))); }
  .c-sx__deco--l { left: calc(-97 * var(--u)); top: calc(161 * var(--u)); transform: rotate(-11.8deg); }
  .c-sx__deco--r { left: calc(1749 * var(--u)); top: calc(1076 * var(--u)); transform: rotate(-168.2deg) scaleY(-1); }
  .c-sx__list { width: calc(1280 * var(--u)); max-width: none; margin: calc(46 * var(--u)) auto 0; }
  .c-sx__step { width: calc(895 * var(--u)); padding-top: calc(23 * var(--u)); }
  .c-sx__step--1, .c-sx__step--3 { align-self: flex-start; }
  .c-sx__step--2 { align-self: flex-end; }
  .c-sx__n { top: 0; right: calc(15 * var(--u)); font-size: calc(57 * var(--u)); line-height: calc(47 * var(--u)); }
  .c-sx__card { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(30 * var(--u)); min-height: calc(217 * var(--u)); padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)) calc(38 * var(--u)); border-radius: calc(15 * var(--u)); box-shadow: 0 0 0 calc(5.7 * var(--u)) #effdff, 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, .3); }
  .c-sx__txt { width: calc(606 * var(--u)); flex: none; }
  .c-sx__t { font-size: calc(25 * var(--u)); line-height: calc(32 * var(--u)); }
  .c-sx__txt p { margin-top: calc(12 * var(--u)); font-size: max(13px, calc(16 * var(--u))); line-height: calc(25 * var(--u)); }
  .c-sx__img { margin: 0; }
  .c-sx__img--1 { width: calc(170 * var(--u)); height: calc(88 * var(--u)); }
  .c-sx__img--2 { width: calc(184 * var(--u)); height: calc(140 * var(--u)); }
  .c-sx__img--3 { margin-top: 0; }
  .c-sx__conn { height: calc(205 * var(--u)); padding-top: 0; }
  .c-sx__flow { width: calc(127 * var(--u)); height: calc(127 * var(--u)); margin-top: calc(40 * var(--u)); }
  .c-sx__arrow { right: calc(-25 * var(--u)); bottom: calc(-25 * var(--u)); width: calc(51 * var(--u)); }
  .c-sx__conn--a { justify-content: flex-start; padding-right: 0; margin-left: 0; }
  .c-sx__conn--b { justify-content: flex-end; }
  .c-sx__conn--a .c-sx__flow { margin-right: calc(320 * var(--u)); }
  .c-sx__conn--b .c-sx__flow { margin-left: calc(321 * var(--u)); }
}