/* Hero "Roi Ovadia" - values measured on the live page (vw units). Yellow #edbe2e, dark #141414 */
.c-roi-hero { background: #141414; color: #333; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; font-size: 1rem; line-height: 1.5; overflow-x: clip; isolation: isolate; }
.c-roi-hero :where(p, h2, ul) { margin: 0; padding: 0; }
.c-roi-hero img { display: block; max-width: 100%; height: auto; border: 0; }

.c-roi-hero__top { padding: 3vw 5vw; }
.c-roi-hero__head { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.c-roi-hero__logo { width: 10%; align-self: center; }
.c-roi-hero__lead { width: 100%; margin-bottom: -1vw; padding-bottom: .9rem; text-align: center; font-size: max(1.5vw, 14px); font-weight: 400; color: snow; }
.c-roi-hero__title { width: 100%; text-align: center; font-size: 4vw; font-weight: 900; line-height: 1; color: #fff; }

.c-roi-hero__chip { position: relative; display: flex; align-items: center; align-self: center; padding: .5em 1em .5em 1em; padding-right: calc(1em + 16px); background: #0e0f11; border-radius: 8px; }
.c-roi-hero__chip p { font-size: max(1.5vw, 14px); font-weight: 300; color: #fff; }
.c-roi-hero__chip-icon { position: absolute; right: -1em; display: inline-block; padding: .5em; font-size: 1.1em; line-height: 1; text-align: center; background: #edbe2e; color: #141414; border-radius: 50%; transform: translateY(-10%); box-shadow: rgba(210, 158, 51, .35) 0 8px 20px; }
.c-roi-hero__chip-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }

.c-roi-hero__main { position: relative; display: flex; flex-direction: column; width: 55%; margin: 0 auto; padding-bottom: 1vw; }
.c-roi-hero__video-label { position: relative; z-index: 20; padding: 12px; text-align: center; font-size: 18px; font-weight: 300; line-height: 1; color: #fff; background: #edbe2e; border-radius: 20px 20px 0 0; }
.c-roi-hero__video-label b { font-weight: 400; }
.c-roi-hero__video { position: relative; z-index: 20; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.c-roi-hero__video iframe { display: block; width: 100%; height: 100%; border: 0; }

.c-roi-hero__proof { position: absolute; z-index: 0; width: 35%; border-radius: 8px; }
.c-roi-hero__proof--1 { top: 9vw; right: -18vw; transform: rotate(-2deg); }
.c-roi-hero__proof--2 { top: 9vw; left: -19vw; transform: rotate(2deg); }
.c-roi-hero__proof--3 { top: 19vw; right: -17vw; transform: rotate(2deg); box-shadow: rgba(0, 0, 0, .5) 0 0 10px 0; }
.c-roi-hero__proof--4 { top: 19vw; left: -18.5vw; transform: rotate(-2deg); box-shadow: rgba(0, 0, 0, .5) 0 0 10px 0; }

.c-roi-hero__button { align-self: center; margin-top: 2vw; padding: 14px 55px; font-size: max(1.5vw, 14px); font-weight: 800; line-height: 1; text-align: center; text-decoration: none; color: #141414; background: #edbe2e; border-radius: 255px; transition: transform .4s, color .3s; }
.c-roi-hero__button:hover, .c-roi-hero__button:focus-visible { color: #fffefb; transform: scale(1.05); }

.c-roi-hero .c-roi-hero__checks { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px -8px 0; list-style: none; }
.c-roi-hero__checks li { display: flex; align-items: center; margin-inline: 8px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .63); }
.c-roi-hero__checks svg { width: 14px; height: 14px; margin-right: 3.5px; fill: #edbe2e; }
.c-roi-hero__checks span { padding-inline-start: 5px; }

@media (max-width: 767px) {
  .c-roi-hero__logo { width: 70px; }
  .c-roi-hero__lead { margin-bottom: -5vw; font-size: 16px; }
  .c-roi-hero__title { font-size: 26px; }
  .c-roi-hero__chip { text-align: center; }
  .c-roi-hero__chip p { font-size: 14px; }
  .c-roi-hero__chip-icon { font-size: 1em; transform: translateY(-50%); }
  .c-roi-hero__main { width: 90%; }
  .c-roi-hero .c-roi-hero__proof { display: none; }
  .c-roi-hero__button { margin-top: 12px; padding: 14px 45px; font-size: 16px; }
  .c-roi-hero__checks li { font-size: 12px; }
}
.c-roi-hero__video-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #4a4a4a; }
.c-roi-hero__video-placeholder svg { width: 12%; height: auto; fill: rgba(255, 255, 255, .55); }