@charset "UTF-8";

* {
box-sizing: border-box;
margin: 0;
}
body {
margin: 0;
}
button {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
background-color: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
color: inherit;
}
a, button {
text-decoration: none;
}
a:not([class]) {
color: inherit;
}
ul {
padding-inline-start: 0;
padding-left: 0;
}
ol {
list-style: none;
}
label {
width: 100%;
}
.page-home img {
display: block;
}
p:not(:last-child) {
margin-bottom: var(--xs-gap);
}
:root {
color-scheme: light only;
--color-black: #313C4E;
--color-light-black: #62738D;
--color-black-rgb: 49, 60, 78;
--color-white: #ffffff;
--color-white-rgb: 255, 255, 255;
--color-light-gray: #F3F4F7;
--color-light-gray-rgb: 243, 244, 247;
--color-orange: #F0A93B;
--color-orange-2: #FEB645;
--color-blue: #145FAC;
--color-blue-rgb: 20, 95, 172;
--color-blue-2: #336FC2;
--color-blue-dark: #0f131b;
--color-blue-dark-rgb: 15, 19, 27;
--opacity-10: .1;
--opacity-15: .15;
--opacity-30: .3;
--opacity-60: .6;
--opacity-70: .7;
--site-header-height: 96px;
--container-width: 1244px;
--container-side-padding: 20px;
--gap-xs: 8px;
--gap-s: 12px;
--gap-m: 16px;
--gap-l: 24px;
--gap-xl: 32px;
--gap-xxl: 40px;
--fs-base: 20px;
--fs-btn: 16px;
--fs-text: 18px;
--fs-text-small: 16px;
--fs-h1: 60px;
--fs-h2: 44px;
--fs-h3: 36px;
--fs-h4: 24px;
--fw-base: 400;
--fw-bold: 600;
--lh-base: 1.3;
--lh-text: 1.35;
--lh-h1: 1.15;
--lh-h2: 1.2;
--lh-h3: 1.2;
--lh-h4: 1.2;
--lh-s: 1.3;
--lh-s-super: 1.44;
--lh-btn: 1.2;
--lsp-base: 1;
--b-rad-s: 8px;
--b-rad-m: 40px;
--animate-time: .3s;
--base-icon-size: 32px;
}
@media screen and (max-width: 1440px) {
:root {
--fs-text-small: 16px;
--fs-h1: 38px;
--fs-h2: 31px;
--fs-h3: 25px;
--fs-h4: 20px;
--section-padding: 40px;
--base-icon-size: 24px;
}
}
@media screen and (max-width: 1023px) {
:root {
--fs-base: 15px;
--fs-btn: 13px;
--fs-text: 13px;
--fs-text-small: 12px;
--fs-h1: 38px;
--fs-h2: 28px;
--fs-h3: 22px;
--fs-h4: 18px;
--site-header-height: 70px;
--container-width: 500px;
--container-side-padding: 16px;
--base-icon-size: 32px;
}
}
html:has(.page-home) {
font-size: var(--fs-base);
line-height: var(--lh-base);
font-family: "Tahoma", sans-serif;
font-style: normal;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
text-size-adjust: none;
}
body:has(.page-home) h1, body:has(.page-home) .h1, body:has(.page-home) h2, body:has(.page-home) .h2, body:has(.page-home) h3, body:has(.page-home) .h3, body:has(.page-home) h4, body:has(.page-home) .h4 {
--marginBottom: 0px;
font-weight: var(--fw-bold);
}
body:has(.page-home) h1, body:has(.page-home) .h1 {
font-size: var(--fs-h1);
line-height: var(--lh-h1);
letter-spacing: var(--lsp-title);
}
body:has(.page-home) h2, body:has(.page-home) .h2 {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--lsp-title);
}
body:has(.page-home) h3, body:has(.page-home) .h3 {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
letter-spacing: var(--lsp-title);
}
body:has(.page-home) h4, body:has(.page-home) .h4 {
font-size: var(--fs-h4);
line-height: var(--lh-h4);
letter-spacing: var(--lsp-title);
}
.text-center {
text-align: center;
}
@media screen and (max-width: 1023px) {
.text-left-mob {
text-align: left;
}
}
.text-fs-small {
font-size: var(--fs-text-small);
}
.text-fw-b {
font-weight: var(--fw-bold);
}
.text-fs-2 {
font-size: var(--fs-text);
line-height: var(--lh-text);
}
.text-fs-3 {
font-size: var(--fs-text-small);
line-height: var(--lh-text);
}
html:has(.page-home) {
--color-text: var(--color-black);
color: var(--color-text);
scroll-behavior: smooth;
}
html:has(.page-home).modal-open {
overflow: hidden;
touch-action: none;
}
html:has(.page-home).modal-open body {
overflow: hidden;
height: 100%;
touch-action: none;
}
html:has(.page-home), body:has(.page-home) {
overflow-x: initial;
}
body:has(.page-home) {
--color-body: var(--color-white);
background-color: var(--color-body);
}
ul, ol {
padding-left: 0;
}
ul li, ol li {
list-style-type: none;
}
.page-home img {
width: 100%;
height: auto;
}
@media screen and (min-width: 1023px) {
.del-on-desk {
display: none !important;
}
}
@media screen and (max-width: 1023px) {
.del-on-mob {
display: none !important;
}
}
.b-rad-s {
border-radius: var(--b-rad-s);
}
.b-rad-m {
border-radius: var(--b-rad-m);
}
.custom-scroll {
max-height: 70dvh;
overflow-y: auto; }
@media screen and (max-width: 767px) {
.custom-scroll {
max-height: 67dvh;
}
}
.custom-scroll * {
scrollbar-width: thin;
scrollbar-color: var(--color-gray);
}
.custom-scroll *::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.custom-scroll *::-webkit-scrollbar-track {
background: var(--color-white);
}
.custom-scroll *::-webkit-scrollbar-thumb {
background-color: var(--color-white);
border-radius: 5px;
border: 8px solid var(--color-gray);
}
.wrapper {
width: 100%;
max-width: var(--container-width);
padding: 0 var(--container-side-padding);
margin: 0 auto;
position: relative;
}
.home-section--mt {
margin-top: 130px;
}
@media screen and (max-width: 1440px) {
.home-section--mt {
margin-top: 90px;
}
}
@media screen and (max-width: 1023px) {
.home-section--mt {
margin-top: 80px;
}
}
.home-section__title {
margin-bottom: 40px;
}
@media screen and (max-width: 1440px) {
.home-section__title {
margin-bottom: 30px;
}
}
@media screen and (max-width: 1023px) {
.home-section__title {
margin-bottom: 20px;
}
}
.row {
display: flex;
flex-wrap: wrap;
}
.row.nowrap {
flex-wrap: nowrap;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-space {
justify-content: space-between;
}
.direction-column {
flex-direction: column;
}
.flex-col-2 {
flex: 0 0 calc(var(--grid-column) * 2 - var(--gap-m) / (var(--gap-m) - 1));
}
.flex-col-3 {
flex: 0 0 calc(var(--grid-column) * 3 - var(--gap-m) / (var(--gap-m) - 1));
}
.flex-col-4 {
flex: 0 0 calc(var(--grid-column) * 4 - var(--gap-m) / (var(--gap-m) - 1));
}
.flex-col-fit {
flex: 1;
}
.gap-xs {
gap: var(--gap-xs);
}
.gap-s {
gap: var(--gap-s);
}
.gap-m {
gap: var(--gap-m);
}
.gap-l {
gap: var(--gap-l);
}
.gap-xl {
gap: var(--gap-xl);
}
.gap-xxl {
gap: var(--gap-xxl);
}
.m-b--xs {
margin-bottom: var(--gap-xs);
}
.m-b--s {
margin-bottom: var(--gap-s);
}
.m-b--m {
margin-bottom: var(--gap-m);
}
.m-b--l {
margin-bottom: var(--gap-l);
}
.m-b--xl {
margin-bottom: var(--gap-xl);
}
.m-b--xxl {
margin-bottom: var(--gap-xxl);
}
.underlined {
text-decoration: underline;
}
.grid {
display: grid;
gap: 20px;
}
@media screen and (max-width: 1023px) {
.grid {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 1024px) {
.grid--4-items {
grid-template-columns: repeat(4, 1fr);
}
}
@keyframes displayBlock {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
display: block;
}
}
@keyframes hideFlex {
0% {
opacity: 1;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
@keyframes displayFlex {
0% {
opacity: 0;
display: none;
}
100% {
display: flex;
opacity: 1;
}
}
@keyframes displayGrid {
0% {
opacity: 0;
display: none;
}
100% {
display: grid;
opacity: 1;
}
}
@keyframes animation-move-top {
from {
top: 30px;
}
to {
opacity: 1;
top: 0;
}
}
@keyframes animation-move-top-200-50 {
from {
transform: translate(-50%, 200px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes animation-move-top-100 {
from {
transform: translateY(200px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes animation-move-bottom {
from {
bottom: 30px;
}
to {
opacity: 1;
bottom: 0;
}
}
@keyframes animation-move-bottom-200-50 {
from {
transform: translate(-50%, -200px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes animation-move-bottom-100 {
from {
transform: translateY(-200px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes animation-move-left {
from {
right: -30px;
}
to {
opacity: 1;
right: 0;
}
}
@keyframes animation-move-right {
from {
left: -30px;
}
to {
opacity: 1;
left: 0;
}
}
@keyframes animation-scale-fade-in {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes animation-tablet {
from {
margin-top: 0;
}
to {
margin-top: -100px;
}
}
.animation, .animation--on-load {
position: relative;
z-index: 1;
}
.animation:not(.animation--visible), .animation--on-load:not(.animation--visible) {
opacity: 0;
}
.animation-tablet.animation-active {
animation: animation-tablet 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-top.animation-active {
animation: animation-move-top 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-top-200-50.animation-active {
animation: animation-move-top-200-50 1.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-top-100.animation-active {
animation: animation-move-top-100 1.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-bottom.animation-active {
animation: animation-move-bottom 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-bottom-200-50.animation-active {
animation: animation-move-bottom-200-50 1.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-bottom-100.animation-active {
animation: animation-move-bottom-100 1.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-right.animation-active {
animation: animation-move-right 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-move-left.animation-active {
animation: animation-move-left 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-scale-fade-in.animation-active {
animation: animation-scale-fade-in 0.5s 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.animation-active.animation-delay-01 {
animation-delay: 0.1s;
}
.animation-active.animation-delay-02 {
animation-delay: 0.2s;
}
.animation-active.animation-delay-03 {
animation-delay: 0.3s;
}
.animation-active.animation-delay-04 {
animation-delay: 0.4s;
}
.animation-active.animation-delay-05 {
animation-delay: 0.5s;
}
.animation-active.animation-delay-06 {
animation-delay: 0.6s;
}
.animation-active.animation-delay-07 {
animation-delay: 0.7s;
}
.animation-active.animation-delay-08 {
animation-delay: 0.8s;
}
.animation-active.animation-delay-09 {
animation-delay: 0.9s;
}
.animation-active.animation-delay-10 {
animation-delay: 1s;
}
.animation-active.animation-delay-11 {
animation-delay: 1.1s;
}
.animation-active.animation-delay-12 {
animation-delay: 1.2s;
}
.animation-active.animation-delay-13 {
animation-delay: 1.3s;
}
.animation-active.animation-delay-14 {
animation-delay: 1.4s;
}
.animation-active.animation-delay-15 {
animation-delay: 1.5s;
}
.animation-active.animation-delay-16 {
animation-delay: 1.6s;
}
.animation-active.animation-delay-17 {
animation-delay: 1.7s;
}
.animation-active.animation-delay-18 {
animation-delay: 1.8s;
}
.animation-active.animation-delay-19 {
animation-delay: 1.9s;
}
.animation-active.animation-delay-20 {
animation-delay: 2s;
}
.link-button {
--font-size: var(--fs-btn);
--font-weight: var(--fw-bold);
--line-height: var(--lh-btn);
--btn-height: 59px;
--btn-padding-top: 5px;
--btn-padding-right: 30px;
--btn-padding-bottom: 5px;
--btn-padding-left: 30px;
--btn-gap: 10px;
--btn-b-rad: var(--b-rad-s);
--btn-bg: var(--color-orange);
--btn-color: var(--color-white);
--btn-bg-hover: var(--color-orange-2);
--btn-color-hover: var(--color-white);
--icon-shape: false;
--btn-icon-size: 24px;
--btn-icon-color: currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: var(--btn-gap);
width: fit-content;
min-height: var(--btn-height);
padding: var(--btn-padding-top) var(--btn-padding-right) var(--btn-padding-bottom) var(--btn-padding-left);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height);
text-decoration: none;
text-align: center;
text-transform: uppercase;
color: var(--btn-color);
border: none;
border-radius: var(--btn-b-rad);
background-color: var(--btn-bg);
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.link-button:disabled {
cursor: initial;
}
@media screen and (min-width: 1024px) {
.link-button:not(:disabled):not(.link-button--no-hover):hover, .link-button:not(:disabled):not(.link-button--no-hover):focus {
--btn-bg: var(--btn-bg-hover);
--btn-color: var(--btn-color-hover);
}
}
@media screen and (max-width: 1023px) {
.link-button {
--btn-padding-right: 16px;
--btn-padding-left: 16px;
}
}
.link-button .base-icon {
--icon-size: var(--btn-icon-size);
--icon-color: var(--btn-icon-color);
}
.link-button--accent {
--btn-bg: var(--color-blue);
--btn-bg-hover: var(--color-blue-2);
}
.link-button--light {
--btn-bg: rgba(var(--color-light-gray-rgb), var(--opacity-10));
--btn-bg-hover: rgba(var(--color-light-gray-rgb), var(--opacity-60));
--btn-color: currentColor;
--btn-color-hover: var(--color-blue);
border: 3px solid rgba(var(--color-white-rgb), var(--opacity-70));
box-shadow: 0px 14px 40px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
.link-button--line {
--btn-height: 0px;
--btn-padding-top: 0px;
--btn-padding-right: 0px;
--btn-padding-bottom: 0px;
--btn-padding-left: 0px;
}
.link-button--min {
--btn-height: 48px;
}
@media screen and (max-width: 1023px) {
.link-button--min {
--font-size: 12px;
--btn-height: 32px;
--btn-padding-right: 6px;
--btn-padding-left: 6px;
}
}
.base-icon {
--icon-color: inherit;
--icon-size: var(--base-icon-size);
--icon-bg: none;
--icon-margin-left: 0;
width: var(--icon-size);
height: var(--icon-size);
color: var(--icon-color);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: var(--icon-margin-left);
transition: color var(--animate-time), background-color var(--animate-time), fill var(--animate-time);
}
.icon-shape {
--icon-shape-size: 44px;
--icon-shape-color: var(--color-black);
--icon-shape-b-rad: var(--b-rad-m);
--icon-shape-margin-left: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-shape-size);
height: var(--icon-shape-size);
background-color: var(--icon-shape-color);
border-radius: var(--icon-shape-b-rad);
margin-left: var(--icon-shape-margin-left);
transition: color var(--animate-time), background-color var(--animate-time);
}
.icon-shape.base-icon {
margin-left: 0;
}
.modal-controls {
--modal-controls-icon-width: 20px;
--modal-controls-icon-height: 2px;
--modal-controls-icon-color: var(--color-white);
--modal-controls-icon-space: var(--gap-xs);
--close-after-postion: rotate(-45deg) translateY(50%);
--close-before-postion: rotate(40deg) translateY(-50%);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--modal-controls-icon-space);
}
.modal-controls:before, .modal-controls:after {
content: "";
display: block;
position: relative;
width: var(--modal-controls-icon-width);
height: var(--modal-controls-icon-height);
background-color: var(--modal-controls-icon-color);
pointer-events: none;
}
.modal-controls.icon-shape {
--icon-shape-color: var(--color-orange);
}
.modal-controls.icon-close {
--modal-controls-icon-space: 0;
}
.modal-controls.icon-close:before {
transform: var(--close-after-postion);
}
.modal-controls.icon-close:after {
transform: var(--close-before-postion);
}
.burger {
will-change: contents;
display: none;
}
@media screen and (max-width: 767px) {
.burger {
display: block;
}
}
.modal {
display: none;
position: fixed !important;
z-index: 100 !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
max-width: 100% !important;
background: initial !important;
}
.modal__overlay {
width: 100%;
height: 100%;
padding: 30px;
background-color: var(--c-overlay);
overflow: auto;
}
@media (max-width: 767px) {
.modal__overlay {
padding: 25px 12px;
}
}
.modal__inner {
position: relative;
max-width: 460px;
background-color: var(--c-gray-2);
border-radius: var(--borderRadiusLarge);
margin: 110px auto;
}
.modal__content {
overflow-y: hidden;
padding: 56px 48px;
}
@media (max-width: 767px) {
.modal__content {
--paddingX: 30px;
padding-left: var(--paddingX);
padding-right: var(--paddingX);
}
}
.modal__close-btn {
--size: 32px;
--offset: 20px;
position: absolute;
top: var(--offset);
right: var(--offset);
width: var(--size);
height: var(--size);
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.modal__close-btn:hover path {
stroke: var(--c-main-bright);
}
.modal__close-btn:active {
-webkit-transform: scale(1.1) translateZ(0);
transform: scale(1.1) translateZ(0);
}
.modal__close-btn svg {
--iconSize: 18px;
}
.modal__header:not(:last-child) {
margin-bottom: 36px;
}
.modal__title:not(:last-child) {
margin-bottom: 12px;
}
.modal__subtitle {
color: var(--c-additional);
}
.modal__success-text { color: var(--c-additional);
width: 100%;
}
.jquery-modal {
background-color: rgba(0, 0, 0, 0.6) !important;
z-index: 1000 !important;
}
#actionModalContainer {
padding: 0 !important;
height: fit-content !important;
box-shadow: none !important;
max-width: 869px !important;
border-radius: 10px;
background: #fff !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
#actionModalContainer .close-modal {
right: 0;
top: -60px;
background: url(//ipnote.pro/wp-content/themes/ipnote/assets/icons/closeIconModal.svg);
width: 34px;
height: 34px;
}
#actionModal {
overflow: hidden;
padding: 37px 0 43px 34px;
position: relative;
border-radius: 10px;
}
#actionModal .transactionsImage {
margin: 0;
position: absolute;
right: -15%;
top: 0;
}
#actionModal .content {
position: relative;
z-index: 1;
max-width: 55%;
}
#actionModal .lightRound {
position: absolute;
width: 680px;
height: 680px;
background: linear-gradient(to right, #fff, #EAECF2);
border-radius: 100%;
left: -10%;
top: -50%;
}
#actionModal .grayRound {
position: absolute;
width: 494px;
height: 494px;
background: linear-gradient(to right, #fff, #DFE1E9);
border-radius: 100%;
left: 10px;
top: -60px;
}
#actionModal .title {
color: var(--primary-gray);
font-size: 40px;
font-weight: bold;
}
#actionModal .description {
margin-top: 25px;
font-size: 18px;
color: var(--secondary-gray);
}
#actionModal footer {
margin-top: 36px;
}
@media (max-width: 768px) {
#actionModalContainer {
max-height: 440px;
height: 100% !important;
}
#actionModal .transactionsImage {
left: -5%;
bottom: -5%;
top: auto;
right: auto;
}
.lightRound {
left: -80% !important;
top: -40% !important;
}
.grayRound {
left: -30% !important;
top: -20% !important;
}
#actionModal .content {
max-width: 100%;
}
#actionModal .title {
font-size: 27px;
}
#actionModal .description {
font-size: 14px;
text-align: center;
margin-top: 22px;
}
#actionModal footer {
margin-top: 39px;
}
#actionModal {
padding: 21px 21px 0 21px;
height: 100%;
}
}
.btn {
--c-accent: #F0A93B;
--c-accent-hover: #FEB645;
--c-main-bright: #336FC2;
--c-white: #FFFFFF;
--btnBorderRadius: 8px;
position: relative;
overflow: hidden;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: var(--btnHeight);
padding: var(--btnPadding);
font-weight: 700;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
color: var(--c-white);
background-color: var(--c-main);
border-radius: var(--btnBorderRadius);
}
.btn:hover {
background-color: var(--c-main-bright);
}
.btn:active {
-webkit-transform: scale(1.02) translateZ(0);
transform: scale(1.02) translateZ(0);
}
.btn[disabled] {
background-color: var(--c-gray-1);
pointer-events: none;
}
.btn--orange {
background-color: var(--c-accent);
}
.btn--orange:hover {
background-color: var(--c-accent-hover);
}
.btn--wide {
width: 100%;
}
main:has(.page-home) {
padding-top: 96px;
}
@media (max-width: 1024px) {
main:has(.page-home) {
padding-top: 68px;
}
}
.page-home {
position: relative;
overflow: initial;
}
.page-home img {
max-width: none;
}
main:has(.page-home) {
overflow: initial;
}
.page-home__bg {
position: absolute;
z-index: 0;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
}
@media screen and (max-width: 1023px) {
.page-home__bg {
top: -45px;
}
}
.page-home__bg-item {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.page-home__bg-item--1.page-home__bg-item--1 {
top: -20px;
}
.page-home__bg-item--1.page-home__bg-item--1 img {
width: 1920px;
height: auto;
}
.page-home__bg-item--1.page-home__bg-item--1 .video {
position: relative;
top: -360px;
}
.page-home__bg-item--1.page-home__bg-item--1 .video::before {
content: "";
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
display: block;
height: 400px;
background: linear-gradient(0deg, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0.3) 50%, rgb(255, 255, 255) 100%);
}
.page-home__bg-item--1.page-home__bg-item--1 video {
width: 1920px;
height: auto;
opacity: 0.4;
}
@media screen and (max-width: 1440px) {
.page-home__bg-item--1.page-home__bg-item--1 {
top: -30px;
}
}
@media screen and (max-width: 1280px) {
.page-home__bg-item--1.page-home__bg-item--1 {
top: -72px;
}
}
@media screen and (max-width: 1023px) {
.page-home__bg-item--1.page-home__bg-item--1 {
top: 0;
}
.page-home__bg-item--1.page-home__bg-item--1 img {
width: 850px;
}
.page-home__bg-item--1.page-home__bg-item--1 video {
width: 850px;
}
.page-home__bg-item--1.page-home__bg-item--1 .video {
top: -160px;
}
.page-home__bg-item--1.page-home__bg-item--1 .video::before {
background: linear-gradient(0deg, rgb(255, 255, 255) 42%, rgba(255, 255, 255, 0.5) 50%, rgb(255, 255, 255) 100%);
}
}
.page-home__bg-item--2.page-home__bg-item--2 {
top: 133px;
}
.page-home__bg-item--2.page-home__bg-item--2 img {
width: 1802px;
height: auto;
}
.page-home__bg-item--2.page-home__bg-item--2 .video {
position: relative;
top: 148px;
}
.page-home__bg-item--2.page-home__bg-item--2 .video::before {
content: "";
position: absolute;
z-index: 10;
top: 32%;
bottom: 0;
left: 0;
right: 0;
display: block;
background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 90%, rgba(255, 255, 255, 0) 100%);
}
.page-home__bg-item--2.page-home__bg-item--2 .video::after {
content: "";
position: absolute;
z-index: 10;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
display: block;
background: linear-gradient(90deg, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgb(255, 255, 255) 95%);
}
.page-home__bg-item--2.page-home__bg-item--2 video {
width: 1800px;
height: auto;
}
@media screen and (max-width: 1440px) {
.page-home__bg-item--2.page-home__bg-item--2 {
top: 103px;
}
}
@media screen and (max-width: 1280px) {
.page-home__bg-item--2.page-home__bg-item--2 {
top: 174px;
}
.page-home__bg-item--2.page-home__bg-item--2 img {
width: 1309px;
}
.page-home__bg-item--2.page-home__bg-item--2 video {
width: 1309px;
}
}
@media screen and (max-width: 1023px) {
.page-home__bg-item--2.page-home__bg-item--2 {
top: 420px;
}
.page-home__bg-item--2.page-home__bg-item--2 img {
width: 843px;
}
.page-home__bg-item--2.page-home__bg-item--2 video {
width: 900px;
}
.page-home__bg-item--2.page-home__bg-item--2 .video {
top: 120px;
}
.page-home__bg-item--2.page-home__bg-item--2 .video::before {
top: 20%;
height: 700px;
}
}
.top-line {
padding-top: 24px;
padding-bottom: 24px;
}
@media screen and (max-width: 1023px) {
.top-line {
padding-top: 19px;
padding-bottom: 19px;
}
}
@media screen and (max-width: 1023px) {
.top-line__menu-btn {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
margin-right: 12px;
}
._menu-opened .top-line__menu-btn span::before {
top: 4px;
transform: rotate(45deg);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.15s, top 0.3s, transform 0.3s 0.15s;
}
._menu-opened .top-line__menu-btn span::after {
bottom: 4px;
transform: rotate(-45deg);
transition: bottom 0.3s, transform 0.3s 0.15s;
}
.top-line__menu-btn span {
position: relative;
width: 18px;
height: 10px;
}
.top-line__menu-btn span::before, .top-line__menu-btn span::after {
content: "";
left: 0;
position: absolute;
display: block;
width: 100%;
height: 2px;
border-radius: var(--b-rad-s);
background: currentColor;
}
.top-line__menu-btn span::before {
top: 0;
box-shadow: 0 4px 0 currentColor;
transition: box-shadow 0.3s 0.15s, top 0.3s 0.15s, transform 0.3s;
}
.top-line__menu-btn span::after {
bottom: 0;
transition: bottom 0.3s 0.15s, transform 0.3s;
}
}
.top-line-logo {
margin-right: 50px;
}
.top-line-logo svg {
max-width: 150px;
height: 43px;
--icon-c1: #313C4E;
--icon-c2: #F0A93B;
}
.top-line-logo svg path {
transition: fill 0.3s;
}
@media screen and (max-width: 1280px) {
.top-line-logo {
margin-right: 27px;
}
}
@media screen and (max-width: 1023px) {
.top-line-logo {
flex-grow: 1;
margin-right: 20px;
}
.top-line-logo svg {
max-width: 99px;
height: 28px;
}
._menu-opened .top-line-logo svg {
--icon-c1:#F0A93B;
--icon-c2: #313C4E;
}
}
.top-line__nav {
flex-grow: 1;
margin-right: 20px;
}
@media screen and (max-width: 1280px) {
.top-line__nav {
margin-right: 16px;
}
}
@media screen and (max-width: 1023px) {
.top-line__nav {
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
}
._menu-opened .top-line__nav {
position: static;
opacity: 1;
pointer-events: auto;
}
}
.top-line__options {
display: flex;
align-items: center;
column-gap: 8px;
margin-right: 20px;
}
@media screen and (max-width: 1280px) {
.top-line__options {
margin-right: 16px;
column-gap: 16px;
}
}
@media screen and (max-width: 1023px) {
.top-line__options {
flex-grow: 1;
justify-content: flex-end;
column-gap: 8px;
margin-right: 8px;
}
}
.top-line__enter-link {
display: flex;
color: var(--color-blue);
}
.top-line__enter-link:hover {
color: var(--color-blue-2);
}
._menu-opened .top-line__enter-link {
color: var(--color-white);
}
@media screen and (max-width: 1280px) {
.top-line__enter-btn .in-desk {
display: none;
}
}
@media screen and (min-width: 1281px) {
.top-line__enter-btn .in-mob {
display: none;
}
}
.top-line__options .header-language-switcher .blog-nav-button {
padding: 0 15px;
font-size: 16px;
color: var(--color-black);
}
@media screen and (max-width: 1280px) {
.top-line__options .header-language-switcher .blog-nav-button {
height: 40px;
padding: 0 8px;
gap: 4px;
font-size: 14px;
}
.top-line__options .header-language-switcher .blog-nav-button svg {
width: 16px;
height: 16px;
}
.top-line__options .header-language-switcher .blog-nav-button .in-desk {
display: none;
}
}
@media screen and (min-width: 1281px) {
.top-line__options .header-language-switcher .blog-nav-button .in-mob {
display: none;
}
}
@media screen and (max-width: 1023px) {
.top-line__options .header-language-switcher .blog-nav-button {
height: 32px;
padding: 0px 5px;
font-size: 12px;
}
.top-line__options .header-language-switcher .blog-nav-button svg {
width: 12px;
height: 12px;
}
}
.top-nav nav ul {
list-style: none;
padding-left: 0;
}
.top-nav nav ul li {
list-style: none;
}
.top-nav nav ul li a {
color: inherit;
text-decoration: none;
}
.top-nav nav > ul {
display: flex;
align-items: center;
gap: 30px;
font-size: 16px;
}
@media screen and (max-width: 1280px) {
.top-nav nav > ul {
gap: 25px;
}
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul {
flex-direction: column;
align-items: flex-start;
}
}
.top-nav nav > ul > li {
position: relative;
}
.top-nav nav > ul > li:has(ul) > a {
position: relative;
display: block;
}
@media screen and (min-width: 1024px) {
.top-nav nav > ul > li:has(ul) > a {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 22px;
}
.top-nav nav > ul > li:has(ul) > a:hover::after {
border-top: 2px solid var(--color-blue);
border-right: 2px solid var(--color-blue);
}
.top-nav nav > ul > li:has(ul) > a::after {
content: "";
position: absolute;
top: 50%;
right: 5px;
transform: translate(-50%, -50%);
width: 8.5px;
height: 8.5px;
margin-top: -6px;
border-radius: 0px 4px 0px 0px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(135deg);
box-sizing: content-box;
}
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul > li:has(ul) > a {
font-size: 14px;
line-height: 21px;
}
}
.top-nav nav > ul > li > ul > li > a {
color: #0F1520;
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul > li > ul > li > a {
color: #fff;
}
}
.top-nav nav > ul > li > ul > li + li {
margin-top: 8px;
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul > li > ul > li + li {
margin-top: 15px;
}
}
@media screen and (min-width: 1024px) {
.top-nav nav > ul > li > ul {
position: absolute;
z-index: 1;
top: 100%;
left: 0;
min-width: max-content;
padding: 16px 16px;
border-radius: var(--b-rad-s);
background-color: var(--color-body);
box-shadow: 0px 14px 40px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
}
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul > li > ul {
margin-top: 15px;
}
}
@media screen and (min-width: 1024px) {
.top-nav nav > ul > li:hover a + ul {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
@media screen and (max-width: 1023px) {
.top-nav nav > ul > li {
width: 100%;
}
.top-nav nav > ul > li:has(ul):not(:last-child) {
padding-bottom: 25px;
border-bottom: 1px solid #CFD2D9;
}
}
@media screen and (min-width: 1024px) {
.top-nav nav a:hover {
color: var(--color-blue);
}
}
@media screen and (max-width: 1023px) {
.top-nav {
order: 1;
width: 100%;
margin-top: 33px;
padding-bottom: 7px;
overflow-y: auto;
max-height: calc(85dvh - var(--site-header-height) - 14px);
}
}
.hero-main {
position: relative;
z-index: 1;
}
.hero-main__header {
--hero-main__header-mt: 70px;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 35px;
max-width: 796px;
margin: var(--hero-main__header-mt) auto 0;
text-align: center;
}
@media screen and (max-width: 1440px) {
.hero-main__header {
--hero-main__header-mt: 60px;
}
}
@media screen and (max-width: 1280px) {
.hero-main__header {
--hero-main__header-mt: 50px;
}
}
.hero-main__title {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px;
}
@media screen and (min-width: 1024px) {
.hero-main__title br {
display: none;
}
}
.hero-main__options {
display: flex;
justify-content: center;
margin-top: 80px;
}
@media screen and (max-width: 1023px) {
.hero-main__options {
margin-top: 50px;
}
}
.hero-main__options-list {
display: inline-flex;
column-gap: 40px;
max-width: 100%;
padding: 0px 40px;
background-color: var(--color-light-gray);
border: 7px solid rgba(var(--color-white-rgb), var(--opacity-70));
border-radius: 100px;
box-shadow: 0px 24px 100px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
@media screen and (max-width: 1023px) {
.hero-main__options-list {
flex-direction: column;
flex-grow: 1;
row-gap: 20px;
padding: 16px;
border-radius: 16px;
}
}
.hero-main__options-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 173px;
min-height: 80px;
text-align: center;
color: inherit;
}
.hero-main__options-item:hover {
color: var(--color-blue);
}
.hero-main__options-item:hover .hero-main__options-descr {
opacity: 1;
}
@media screen and (max-width: 1023px) {
.hero-main__options-item {
width: 100%;
min-height: 0;
}
}
.hero-main__options-title {
transition: color 0.3s;
}
@media screen and (max-width: 1023px) {
.hero-main__options-title br {
display: none;
}
}
.hero-main__options-descr {
position: absolute;
pointer-events: none;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 5px 10px;
font-size: 14px;
font-weight: var(--fw-bold);
line-height: var(--lh-text);
background-color: var(--color-body);
border-radius: 30px;
box-shadow: 0px 6px 20px 0px rgba(var(--color-blue-dark-rgb), 0.26);
opacity: 0;
transition: opacity 0.3s;
}
@media screen and (max-width: 1023px) {
.hero-main__options-descr {
display: none;
}
}
@keyframes scroll {
0% {
transform: translate(0);
}
100% {
transform: translate(calc(-100% - 12px));
}
}
.hero-main__brands {
margin-top: 160px;
}
@media screen and (max-width: 1440px) {
.hero-main__brands {
margin-top: 90px;
}
}
@media screen and (max-width: 1280px) {
.hero-main__brands {
margin-top: 136px;
}
}
@media screen and (max-width: 1023px) {
.hero-main__brands {
margin-top: 113px;
}
}
.hero-main__brands-title {
margin-bottom: 10px;
font-size: 16px;
font-weight: var(--fw-bold);
text-transform: uppercase;
text-align: center;
}
.hero-main__brands-list {
overflow: hidden;
display: flex;
-webkit-user-select: none;
user-select: none;
gap: 40px;
}
@media screen and (max-width: 1023px) {
.hero-main__brands-list {
gap: 12px;
}
}
.hero-main__brands-list-wrapper {
flex-shrink: 0;
display: flex;
gap: 40px;
justify-content: space-around;
align-items: center;
min-width: 100%;
animation: scroll 80s linear infinite;
will-change: transform;
}
@media screen and (max-width: 1023px) {
.hero-main__brands-list-wrapper {
gap: 12px;
}
}
.hero-main__brans-item {
position: relative;
width: 211px;
height: 93px;
display: flex;
justify-content: center;
}
.hero-main__brans-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 1023px) {
.hero-main__brans-item {
width: 130px;
height: 57px;
}
}
.steps__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
counter-reset: num;
}
@media screen and (max-width: 1023px) {
.steps__list {
grid-template-columns: 1fr;
}
}
.steps__item {
counter-increment: num;
position: relative;
}
.steps__item::before {
content: counter(num, decimal-leading-zero);
display: block;
margin-bottom: 40px;
font-size: var(--fs-h2);
line-height: 1.2;
}
@media screen and (max-width: 1023px) {
.steps__item::before {
margin-bottom: 20px;
}
}
.steps__item::after {
content: "";
position: absolute;
top: 26.5px;
right: 0;
height: 2px;
width: calc(100% - 70px);
background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0) 0%, rgba(var(--color-black-rgb), 1) 100%);
}
@media screen and (max-width: 1440px) {
.steps__item::after {
top: 18.5px;
width: calc(100% - 54px);
}
}
@media screen and (max-width: 1023px) {
.steps__item::after {
top: 17px;
width: calc(100% - 51px);
}
}
.steps__title {
margin-bottom: 20px;
}
.main-compos {
--main-compos-grid-row: 8;
position: relative;
width: calc(var(--container-width) + 160px);
max-width: calc(100vw - var(--container-side-padding) * 2);
margin: 0 auto;
border-radius: 18px;
background: linear-gradient(-90deg, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-light-gray-rgb), 1) 63%);
}
.main-compos + .main-compos {
margin-top: 20px;
}
@media screen and (max-width: 1280px) {
.main-compos {
--main-compos-grid-row: 7;
max-width: 100vw;
width: 100%;
}
.main-compos + .main-compos {
margin-top: 10px;
}
}
.main-compos--reverse {
background: linear-gradient(90deg, rgba(var(--color-white-rgb), 1) 0%, rgba(var(--color-light-gray-rgb), 1) 63%);
}
.main-compos--reverse .main-compos__assets {
grid-column: var(--main-compos-grid-row)/13;
}
.main-compos--reverse .main-compos__content {
grid-column: 1/var(--main-compos-grid-row);
}
.main-compos--overflow {
overflow: hidden;
}
.main-compos__row {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense;
gap: 20px;
min-height: 668px;
}
@media screen and (max-width: 1440px) {
.main-compos__row {
min-height: 572px;
}
}
@media screen and (max-width: 1280px) {
.main-compos__row {
gap: 10px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__row {
display: block;
min-height: 0;
}
}
.main-compos--grid-1 {
--main-compos-grid-row: 7;
}
@media screen and (max-width: 1280px) {
.main-compos--grid-1 {
--main-compos-grid-row: 6;
}
}
.main-compos__assets {
position: relative;
grid-column: 1/var(--main-compos-grid-row);
pointer-events: none;
}
.main-compos__assets img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.main-compos__assets:has(.main-compos__assets-wrapper) + .main-compos__content {
margin-left: -55px;
}
@media screen and (max-width: 1280px) {
.main-compos__assets:has(.main-compos__assets-wrapper) + .main-compos__content {
margin-left: 14px;
}
.main-compos__assets.main-compos__assets--type2 + .main-compos__content {
margin-right: -57px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets {
margin-bottom: 25px;
}
.main-compos__assets:has(.main-compos__assets-wrapper) + .main-compos__content {
margin-left: 0;
}
.main-compos__assets.main-compos__assets--type2 + .main-compos__content {
margin-right: 0;
}
}
.main-compos__assets-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: calc(-80px - var(--container-side-padding));
right: 45px;
display: flex;
justify-content: center;
align-items: center;
column-gap: 16px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, transparent 6%, #000 24%, #000 77%, transparent 95%);
}
.main-compos__assets-wrapper picture {
width: 343px;
flex-shrink: 0;
}
.main-compos__assets-wrapper picture:nth-child(2) {
filter: drop-shadow(0px 0px 100px rgba(var(--color-blue-dark-rgb), var(--opacity-15)));
}
@media screen and (max-width: 1280px) {
.main-compos__assets-wrapper {
left: calc(var(--container-side-padding) * -1);
right: -5px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets-wrapper {
position: relative;
left: 0;
right: 0;
width: calc(100% + var(--container-side-padding) * 2);
margin-left: calc(var(--container-side-padding) * -1);
aspect-ratio: 100/56;
}
.main-compos__assets-wrapper picture {
width: 149px;
flex-shrink: 0;
}
.main-compos__assets-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgb(243, 244, 247) 0%, rgba(var(--color-light-gray-rgb), 0) 23%, rgba(var(--color-light-gray-rgb), 0) 76%, rgb(243, 244, 247), 100%);
z-index: 1;
}
}
.main-compos__assets--type1 picture {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 140px;
width: 740px;
border-radius: 16px;
box-shadow: -30px -30px 71px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
@media screen and (max-width: 1280px) {
.main-compos__assets--type1 picture {
right: 18px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets--type1 picture {
position: static;
}
}
.main-compos__assets--type2 picture:nth-child(1) {
position: absolute;
top: 10px;
max-width: 394px;
max-height: calc(100% - 10px);
left: 95px;
border-radius: 26px;
box-shadow: -30px -30px 71px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
@media screen and (max-width: 1280px) {
.main-compos__assets--type2 picture:nth-child(1) {
left: 80px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets--type2 picture:nth-child(1) {
position: static;
width: 195px;
display: block;
box-shadow: -14px -14px 35px 0px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
}
.main-compos__assets--type2 picture:nth-child(2) {
position: absolute;
top: 249px;
max-width: 414px;
left: 48px;
border-radius: 12px;
box-shadow: 30px 0px 50px -103px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
@media screen and (max-width: 1280px) {
.main-compos__assets--type2 picture:nth-child(2) {
left: 107px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets--type2 picture:nth-child(2) {
top: 105px;
left: calc(50% + 20px);
transform: translateX(-50%);
width: 210px;
box-shadow: 14px 0px 24px -51px rgba(var(--color-blue-dark-rgb), var(--opacity-10));
}
}
@media screen and (max-width: 1023px) {
.main-compos__assets--type2 {
display: flex;
justify-content: center;
width: auto;
}
}
.main-compos__content {
grid-column: var(--main-compos-grid-row)/13;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 70px 0;
}
@media screen and (max-width: 1440px) {
.main-compos__content {
padding: 90px 0;
}
}
@media screen and (max-width: 1280px) {
.main-compos__content {
padding-left: 20px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__content {
padding: 16px 0 30px;
align-items: stretch;
}
}
.main-compos__tag {
width: max-content;
margin-bottom: 30px;
padding: 18px;
font-size: var(--fs-btn);
font-weight: var(--fw-bold);
line-height: var(--lh-btn);
text-transform: uppercase;
color: var(--color-blue);
background-color: rgba(var(--color-blue-rgb), var(--opacity-15));
border-radius: 16px;
}
@media screen and (max-width: 1280px) {
.main-compos__tag {
margin-bottom: 25px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__tag {
border-radius: 7px;
margin-bottom: 18px;
padding: 10px 14px;
}
}
.main-compos__title {
margin-bottom: 30px;
}
@media screen and (max-width: 1280px) {
.main-compos__title {
margin-bottom: 25px;
}
}
.main-compos__limited-width {
width: 100%;
max-width: 505px;
}
@media screen and (max-width: 1280px) {
.main-compos__limited-width {
max-width: none;
}
}
.main-compos__bottom {
margin-top: 30px;
display: flex;
column-gap: 20px;
}
.main-compos__bottom.main-compos__limited-width .link-button {
flex-grow: 1;
flex-basis: 0;
}
@media screen and (max-width: 1280px) {
.main-compos__bottom {
column-gap: 10px;
}
}
@media screen and (max-width: 1023px) {
.main-compos__bottom {
margin-top: 18px;
}
.main-compos__bottom .link-button {
flex-grow: 1;
flex-basis: 0;
}
}
.benefit {
position: relative;
padding: 30px 30px 100px;
min-height: 380px;
background-color: var(--color-light-gray);
border-radius: 14px;
overflow: hidden;
}
@media screen and (max-width: 1280px) {
.benefit {
min-height: 360px;
padding: 20px 16px 100px;
}
}
@media screen and (max-width: 1023px) {
.benefit {
min-height: 240px;
padding-bottom: 0;
}
}
.benefit__content {
position: relative;
z-index: 1;
}
.benefit__title {
margin-bottom: 15px;
}
@media screen and (max-width: 1023px) {
.benefit__title {
margin-bottom: 10px;
}
}
.benefit__img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
@media screen and (max-width: 1023px) {
.benefit__img {
position: static;
width: calc(100% + 16px + 16px);
margin-top: -20px;
margin-left: -16px;
display: flex;
top: 60px;
}
.benefit__img picture {
margin-top: auto;
}
}
.offer-main {
position: relative;
padding: 90px 0;
background-color: #1766B1;
color: var(--color-white);
overflow: hidden;
}
@media screen and (max-width: 1023px) {
.offer-main {
padding: 40px 0;
}
}
.offer-main__bg.offer-main__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.offer-main__bg.offer-main__bg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.offer-main__bottom {
margin-top: 20px;
display: flex;
gap: 20px;
}
.offer-main__btn {
--btn-height: 67px;
}
.offer-main__btn.link-button--light {
border: 3px solid rgba(var(--color-white-rgb), var(--opacity-30));
}
@media screen and (max-width: 1023px) {
.offer-main__btn {
--btn-height: 67px;
flex: 1 1 0;
}
}
.plan {
position: relative;
}
.plan__section:nth-of-type(5n + 1) {
top: 100px;
}
@media screen and (max-width: 1023px) {
.plan__section:nth-of-type(5n + 1) {
top: 75px;
}
}
.plan__section:nth-of-type(5n + 2) {
top: 245px;
}
@media screen and (max-width: 1023px) {
.plan__section:nth-of-type(5n + 2) {
top: 95px;
}
}
.plan__section:nth-of-type(5n + 3) {
top: 390px;
}
@media screen and (max-width: 1023px) {
.plan__section:nth-of-type(5n + 3) {
top: 115px;
}
}
.plan__section:nth-of-type(5n + 4) {
top: 535px;
}
@media screen and (max-width: 1023px) {
.plan__section:nth-of-type(5n + 4) {
top: 135px;
}
}
.plan__section:nth-of-type(5n + 5) {
top: 680px;
}
@media screen and (max-width: 1023px) {
.plan__section:nth-of-type(5n + 5) {
top: 155px;
}
}
.plan__section {
position: sticky;
}
.plan__section:nth-of-type(5n + 1) .plan__section-inner {
border: 1px solid #AFBDD1;
background-color: var(--color-body);
}
.plan__section:nth-of-type(5n + 2) .plan__section-inner {
background-color: #F3F7FB;
}
.plan__section:nth-of-type(5n + 3) .plan__section-inner {
background-color: #DCE7F3;
}
.plan__section:nth-of-type(5n + 4) .plan__section-inner {
background-color: #C4D7EA;
}
.plan__section:nth-of-type(5n + 5) .plan__section-inner {
background-color: var(--color-blue);
color: var(--color-white);
}
.plan__section:nth-of-type(5n + 5) .plan__section-inner .plan__list li::before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99935 1.66675C5.39935 1.66675 1.66602 5.40008 1.66602 10.0001C1.66602 14.6001 5.39935 18.3334 9.99935 18.3334C14.5993 18.3334 18.3327 14.6001 18.3327 10.0001C18.3327 5.40008 14.5993 1.66675 9.99935 1.66675ZM8.33268 14.1667L4.16602 10.0001L5.34102 8.82508L8.33268 11.8084L14.6577 5.48341L15.8327 6.66675L8.33268 14.1667Z' fill='%23F3F4F7'/%3E%3C/svg%3E%0A");
}
.plan__section-inner {
display: flex;
flex-direction: column;
row-gap: 30px;
padding: 35px;
border-radius: 14px;
}
@media screen and (max-width: 1280px) {
.plan__section-inner {
padding: 25px 16px;
width: calc(100% + var(--container-side-padding) * 2);
margin-left: calc(var(--container-side-padding) * -1);
}
}
@media screen and (max-width: 1023px) {
.plan__section-inner {
padding: 20px 16px;
row-gap: 16px;
min-height: 557px;
}
}
.plan__header {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 30px;
}
@media screen and (max-width: 1023px) {
.plan__header {
flex-direction: column;
align-items: stretch;
row-gap: 16px;
}
}
.plan__header-title {
display: flex;
align-items: center;
gap: 20px;
}
.plan__header-tag {
padding: 14px;
font-size: var(--fs-btn);
font-weight: var(--fw-bold);
line-height: var(--lh-btn);
text-transform: uppercase;
color: var(--color-blue);
background-color: rgba(var(--color-blue-rgb), var(--opacity-15));
border-radius: 16px;
}
.plan__header-descr {
margin-top: 10px;
}
.plan__header-descr p + p {
margin-top: 7px;
}
.plan__header-btn {
min-width: 200px;
}
@media screen and (max-width: 1023px) {
.plan__header-btn {
--btn-height: 46px;
width: 100%;
}
}
.plan__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.plan__list li {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 28px;
padding-left: 30px;
}
.plan__list li::before {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 20px;
height: 20px;
color: blue;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99935 1.66675C5.39935 1.66675 1.66602 5.40008 1.66602 10.0001C1.66602 14.6001 5.39935 18.3334 9.99935 18.3334C14.5993 18.3334 18.3327 14.6001 18.3327 10.0001C18.3327 5.40008 14.5993 1.66675 9.99935 1.66675ZM8.33268 14.1667L4.16602 10.0001L5.34102 8.82508L8.33268 11.8084L14.6577 5.48341L15.8327 6.66675L8.33268 14.1667Z' fill='%23145FAC'/%3E%3C/svg%3E%0A");
}
@media screen and (max-width: 1023px) {
.plan__list {
display: block;
}
.plan__list li + li {
margin-top: 10px;
}
}
.loader {
position: fixed;
top: 0;
z-index: 110;
height: 100vh;
width: 100vw;
background-color: var(--color-body);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 37px;
}
@media screen and (max-width: 1023px) {
.loader {
gap: 35px;
}
}
.loader__logo {
--icon-c1: #313C4E;
--icon-c2: #F0A93B;
}
.loader__logo svg {
width: 270px;
height: 77px;
}
@media screen and (max-width: 1023px) {
.loader__logo svg {
width: 214px;
height: 61px;
}
}
.loader__progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
width: 100%;
}
@media screen and (max-width: 1023px) {
.loader__progress {
gap: 22px;
}
}
.loader__progress-bar {
position: relative;
width: calc(100% - var(--container-side-padding) * 2);
max-width: 320px;
height: 4px;
background-color: #AFBDD1;
border-radius: 4px;
}
.loader__progress-bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--loader);
background-color: var(--color-blue);
border-radius: 4px;
transition: width 0.3s;
}
.loader__progress-count {
color: #62738D;
}
.loader__progress-count::after {
content: "" attr(data-loader);
display: block;
width: 40px;
height: 40px;
}