.terms-and-privacy { background-color: #EAEAEA; display: flex; justify-content: end; padding: 0.5rem 5vw; } .terms-and-privacy .link { text-decoration: underline; text-underline-offset: 2px; color: #000; opacity: 0.9; font-weight: 700; transition: 350ms ease-out; } .terms-and-privacy .link:hover { opacity: 1; @apply text-primary; } .terms-and-privacy .link ~ .link { margin-left: 2rem; } .top-banner { background-color: #272727; color: #FFF; } .top-banner .container-lg { position: relative; z-index: 1; } .banner-img { position: absolute; right: 5%; top: -25%; height: auto; width: 90%; opacity: 0.25; filter: blur(2px); z-index: 0; } @media (min-width: 1400px) { .banner-img { right: 10%; top: -45%; rotate: 15deg; height: 170%; width: unset; opacity: 1; filter: none; } } .features-block { position: relative; } .features-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 52%; background-color: #F6F6F6; z-index: 0; } .features-block::after { content: ""; position: absolute; top: 62%; left: 0; right: 0; bottom: 0; z-index: 0; } .features-block .container { position: relative; z-index: 1; } .features-block .features-wrapper { scroll-snap-type: x mandatory; scroll-snap-stop: always; max-width: 100%; overflow-x: auto; display: flex; gap: 1rem; } .features-block .features-wrapper > * { scroll-snap-align: center; } .features-block .features-wrapper .feature-item { display: flex; flex-direction: column; justify-content: space-between; min-width: 60vw; max-width: 100%; } @media (min-width: 900px) { .features-block .features-wrapper .feature-item { min-width: 30vw; } } @media (min-width: 1200px) { .features-block .features-wrapper .feature-item { min-width: unset; width: 300px; max-height: unset; } } @media (min-width: 1400px) { .features-block .features-wrapper .feature-item { width: 400px; } } .features-block .features-wrapper .feature-item img { width: 100%; max-width: 100%; object-fit: contain; object-position: top; } .features-block .features-wrapper .feature-item-title { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 1rem; } .features-block .features-wrapper .feature-item-title .feature-item-number { font-size: 1.5rem; font-weight: 700; margin-bottom: 0; } .features-block .features-wrapper .feature-item-title h3 { font-size: 1rem; line-height: 1; } .s1-block .s1-title { color: #22D2F8; font-size: 1.25rem; margin-bottom: 1rem; } .s1-block .desktop { display: none; } .s1-block .desktop .s1-title { white-space: nowrap; margin-bottom: 0; } @media (min-width: 1200px) { .s1-block .desktop { display: grid; grid-template-columns: auto 1fr; gap: 96px; align-items: center; } } .s1-block .desktop img { width: 100%; max-width: 100%; object-fit: contain; object-position: top; } .s1-block .mobile { display: block; } .s1-block .mobile .screens-wrapper { scroll-snap-type: x mandatory; scroll-snap-stop: always; max-width: 100%; overflow-x: auto; display: flex; gap: 1rem; } .s1-block .mobile .screens-wrapper > * { scroll-snap-align: center; } .s1-block .mobile .screens-wrapper img { width: 70%; max-height: 60vh; object-fit: contain; object-position: top; } @media (min-width: 1200px) { .s1-block .mobile { display: none; } } .s2-block .s2-title { color: #2DDF9E; font-size: 1.25rem; margin-bottom: 1rem; } .s2-block .desktop { display: none; } .s2-block .desktop .s2-title { white-space: nowrap; margin-bottom: 0; } @media (min-width: 1200px) { .s2-block .desktop { display: flex; gap: 96px; align-items: center; justify-content: center; margin: 0 auto; } } .s2-block .desktop img { max-width: 440px; object-fit: contain; object-position: top; } .s2-block .mobile { display: block; } .s2-block .mobile .screens-wrapper { scroll-snap-type: x mandatory; scroll-snap-stop: always; max-width: 100%; overflow-x: auto; display: flex; gap: 1rem; } .s2-block .mobile .screens-wrapper > * { scroll-snap-align: center; } .s2-block .mobile .screens-wrapper img { width: 70%; max-height: 60vh; object-fit: contain; object-position: top; } @media (min-width: 1200px) { .s2-block .mobile { display: none; } } .s3-block { position: relative; } .s3-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 65%; z-index: 0; } .s3-block .container { position: relative; z-index: 1; } .s3-block .s3-title { color: #F57F58; font-size: 1.25rem; margin-bottom: 1rem; } .s3-block .desktop { display: none; } .s3-block .desktop .s3-title { white-space: nowrap; margin-bottom: 0; } @media (min-width: 1400px) { .s3-block .desktop { display: flex; gap: 96px; align-items: center; justify-content: center; } } .s3-block .desktop img { width: Min(100%, 600px); max-width: 100%; object-fit: contain; object-position: top; } .s3-block .mobile { display: block; } .s3-block .mobile .screens-wrapper { scroll-snap-type: x mandatory; scroll-snap-stop: always; max-width: 100%; overflow-x: auto; display: flex; gap: 1rem; } .s3-block .mobile .screens-wrapper > * { scroll-snap-align: center; } .s3-block .mobile .screens-wrapper img { width: 70%; max-height: 60vh; object-fit: contain; object-position: top; } @media (min-width: 1200px) { .s3-block .mobile { display: none; } } .s4-block { position: relative; } .s4-block .container { position: relative; z-index: 1; } .s4-block .s4-title { color: #F0CB03; font-size: 1.25rem; margin-bottom: 1rem; } .s4-block .desktop { display: none; } .s4-block .desktop .s4-title { white-space: nowrap; margin-bottom: 0; } @media (min-width: 1400px) { .s4-block .desktop { display: flex; gap: 96px; align-items: center; justify-content: center; } } .s4-block .desktop img { width: Min(100%, 600px); max-width: 100%; object-fit: contain; object-position: top; } .s4-block .mobile { display: block; } .s4-block .mobile .screens-wrapper { scroll-snap-type: x mandatory; scroll-snap-stop: always; max-width: 100%; overflow-x: auto; display: flex; gap: 1rem; } .s4-block .mobile .screens-wrapper > * { scroll-snap-align: center; } .s4-block .mobile .screens-wrapper img { width: 70%; max-height: 60vh; object-fit: contain; object-position: top; } @media (min-width: 1200px) { .s4-block .mobile { display: none; } } .screens-wrapper.is-start + * > .prev-arrow, .features-wrapper.is-start + * > .prev-arrow { opacity: 0 !important; position: absolute; content: ""; } .screens-wrapper.is-end + * > .next-arrow, .features-wrapper.is-end + * > .next-arrow { opacity: 0 !important; position: absolute; content: ""; } .ios-icon { height: 64px; width: auto; }