/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    vertical-align: baseline;
    font-size: 24px;
    line-height: 32px;
    color: var(--text);
    font-family: Regular, sans-serif;
    font-weight: 400;
  }
  
  b {
    font-weight: 700;
  }
  
  i {
    font-weight: 300;
    font-style: normal;
  }

  video {
    display: block;
  }
  
  img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  ol,
  ul {
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
    display: block;
    color: var(--text);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  
  address {
    font-style: normal;
  }
  
  p a {
    text-decoration: underline;
  }
  
  button {
    display: block;
    background-color: inherit;
    border: none;
    cursor: pointer;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  
  body {
    position: relative;
    overflow-x: hidden;
    min-width: 325px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    scroll-behavior: smooth;
  }
  
  :root {
    --text: #1f2650;
    --transition: all 0.3s ease;
    --blue: rgba(31, 38, 80, 1) ;
  }
  
  .container {
    max-width: 1536px;
    padding: 0 32px;
    margin: 0 auto;
  }

h1, h2, h3, h4, h5, h6 {
    font-family: Bold, sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 64px;
    line-height: 62px;
}

.h2,
h2 {
    font-size: 48px;
    line-height: 64px;
}

.h3,
h3 {
    font-size: 32px;
    line-height: 42px;
}

footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 233px;
    background: -o-linear-gradient(359.27deg, #1F2650 0.76%, #4A4F71 99.1%);
    background: linear-gradient(90.73deg, #1F2650 0.76%, #4A4F71 99.1%);
}

.product .trio-imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
    gap: 10px;
}

footer .logo {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 30px;
}

footer .logo p {
    background: -webkit-gradient(linear, left top, right top, from(#EAF2FB), to(#9ECEE4));
    background: -o-linear-gradient(left, #EAF2FB 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #EAF2FB 0%, #9ECEE4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border-bottom: 1px solid rgba(234, 242, 251, 1);
    text-decoration: underline;
}

footer img {
    width: 101px;
    height: 75px;
}

footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
    width: 100%;
}

footer .block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
}

footer .block a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 20px;
    line-height: 26px;
    color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
    text-decoration: underline;
    background-image: -webkit-gradient(linear, left top, right top, from(#EAF2FB), to(#9ECEE4));
    background-image: -o-linear-gradient(left, #EAF2FB 0%, #9ECEE4 100%);
    background-image: linear-gradient(90deg, #EAF2FB 0%, #9ECEE4 100%);
}

footer .block a:hover {
    color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #18A2E1 96.55%);
	background-image: linear-gradient(107.48deg, #EAF2FB 3.85%, #18A2E1 96.55%);
    text-decoration: underline;
}

footer .block a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
}

footer .block a.tel::before {
    background-image: url(svg/tel-li.svg);
}

footer .block a.mail::before {
    background-image: url(svg/email-li.svg);
}

button.blue,
a.blue {
    background-color: var(--blue);
    border-radius: 40px;
    padding: 16px 34px;
    color: white;
    font-size: 20px;
    line-height: 26px;
}

button.blue:hover,
a.blue:hover {
    background: -webkit-gradient(linear, left top, right top, from(#DDDDE2), to(#9ECEE4));
    background: -o-linear-gradient(left, #DDDDE2 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #DDDDE2 0%, #9ECEE4 100%);
    color: var(--blue);
}

button.white,
a.white {
    background: #EAF2FB;
    color: var(--blue)!important;
    border-radius: 40px;
    padding: 16px 34px;
    color: white;
    font-size: 20px;
    line-height: 26px;
}

button.white:hover,
a.white:hover {
    background: -webkit-gradient(linear, left top, right top, from(#DDDDE2), to(#9ECEE4));
    background: -o-linear-gradient(left, #DDDDE2 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #DDDDE2 0%, #9ECEE4 100%);
}


.main .blue {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    &::after {
        content: '';
        background-image: url('svg/arrow-a-white.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: 8px;
    }

    &:hover::after {
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        background-image: url('svg/arrow-a.svg');
    }
}


p.white {
    background-color: transparent;
    border: 1px solid rgba(31, 38, 80, 1);
    border-radius: 40px;
    padding: 16px 34px;
    font-size: 20px;
    line-height: 26px;
    width: 100%;
    text-align: center;
}

.section {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.gif .video {
    height: 853px;
}

.gif video {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.gif h2 {
    text-align: center;
    margin-bottom: 30px;
}

.part .inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

.part .img {
    border: 1px solid rgba(31, 38, 80, 0.15);
    border-radius: 16px;
    padding: 25px 25px;
    height: 120px;
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);

    &:hover {
        -webkit-filter: none;
                filter: none;
    }
}

.part .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.part h2 {
    text-align: center;
    margin-bottom: 30px;
}
.part .buttons {
    display: none;
}
.buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    margin: 24px auto 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.buttons .prev {
    background-color: rgba(234, 242, 251, 1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
}

.buttons .prev:hover {
    background: -webkit-gradient(linear, left top, right top, from(#EAF2FB), to(#9ECEE4));
    background: -o-linear-gradient(left, #EAF2FB 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #EAF2FB 0%, #9ECEE4 100%);
}

.buttons .next {
    background-color: rgba(234, 242, 251, 1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
}

.buttons .next:hover {
    background: -webkit-gradient(linear, left top, right top, from(#EAF2FB), to(#9ECEE4));
    background: -o-linear-gradient(left, #EAF2FB 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #EAF2FB 0%, #9ECEE4 100%);
}

.history .inner {
    background-image: url('img/history/line.png');
    background-repeat: no-repeat;
    background-position: 70%;
    height: 2800px;
}

.history .block {
    width: 344px;
    position: relative;
}

.history .block[data-count='1'] {
    top: 90px;
}

.history .block[data-count='2'] {
    top: -225px;
    left: 100%;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.history .block[data-count='3'] {
    top: -250px;
}

.history .block[data-count='4'] {
    top: -600px;
    left: 100%;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.history .block[data-count='5'] {
    top: -550px;
}

.history .block[data-count='6'] {
    top: -1000px;
    left: 100%;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.history .block[data-count='7'] {
    top: -900px;
}

.history .block[data-count='8'] {
    top: -1375px;
    left: 100%;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}


.history .block[data-count='9'] {
    top: -1300px;
}

.history .block[data-count='10'] {
    top: -1700px;
    left: 100%;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.history .block::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 50%;
}

.history .block::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 50%;
}

.history .block img {
    height: 269px;
    margin-bottom: 10px;
    -o-object-fit: contain;
       object-fit: contain;
}

.history .h2 {
    font-family: Bold, sans-serif;
    font-weight: 700;
    margin-bottom: 8px;
}

.history p {
    font-size: 20px;
    line-height: 26px;
}

.tz h2 {
    margin-bottom: 32px;
    text-align: center;
}

.tz {
    background-color: rgba(234, 242, 251, 1);
    height: 260px;
}

.tz button {
    margin: 0 auto;
}

.how {
    position: relative;
    z-index: 2;
}

.how::before {
    content: '';
    display: block;
    position: absolute;
    top: -10%;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 100%;
    z-index: -1;
}

.how::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10%;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 100%;
    z-index: -1;
}

.how h2:first-child {
    margin-bottom: 90px;
    text-align: center;
}

.how h2:last-child {
    margin-top: 90px;
    text-align: center;
}

.how .video {
    height: 700px;
    position: relative;
    border-radius: 40px;
}


.how .video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 40px;
}

.play {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(234, 242, 251, 0.733333)), to(#9ECEE4));
    background: -o-linear-gradient(left, rgba(234, 242, 251, 0.733333) 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, rgba(234, 242, 251, 0.733333) 0%, #9ECEE4 100%);
}

.play::after {
    content: '';
    display: block;
    background-image: url('svg/play.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
}

.play:hover {
    background: -webkit-gradient(linear, left top, right top, from(#EAF2FB), to(#9ECEE4));
    background: -o-linear-gradient(left, #EAF2FB 0%, #9ECEE4 100%);
    background: linear-gradient(90deg, #EAF2FB 0%, #9ECEE4 100%);

}

.product.blue {
    background: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #CFDDE3 96.55%);
    background: linear-gradient(107.48deg, #EAF2FB 3.85%, #CFDDE3 96.55%);
}

.product.hardblue {
    background: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #9ECEE4 96.55%);
    background: linear-gradient(107.48deg, #EAF2FB 3.85%, #9ECEE4 96.55%);
}

.product.gray {
    background: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #ABADBB 96.55%);
    background: linear-gradient(107.48deg, #EAF2FB 3.85%, #ABADBB 96.55%);

}

.product .inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 500px 24px 1fr;
    grid-template-columns: 500px 1fr;
    gap: 24px;
}

.product.reverse .inner {
    -ms-grid-columns: 1fr 500px;
    grid-template-columns: 1fr 500px;
}

.product .slider {
    width: 90%;
    margin: 0 auto;
    height: auto;

    & .slick-list {
        height: 100%;
    }
}

.product .box_slider {
    margin-top: 75px;
    position: relative;
}

.product .arrows {
    position: absolute;
    top: 35%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
}

.product .arrows button {
    background-color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.product .box_slider .block {
    margin-left: 12px;
    margin-right: 12px;
    height: auto;
}

.product .box_slider .block .name {
    margin-top: 16px;
    text-align: center;
}

.product .box_slider .block .img {
    position: relative;
}

.product .box_slider .block .play {
    width: 56px;
    height: 56px;

    &::after {
        width: 11px;
        height: 11px;
    }
}


.product .imgs {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1.3fr 24px 0.7fr;
    grid-template-columns: 1.3fr 0.7fr;
    -ms-grid-rows: 254px 24px 254px;
    grid-template-rows: 254px 254px;
    gap: 24px;

    & .big {
        position: relative;
    }

    & .layout {
        position: absolute;
        top: 15px;
        right: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        &::after {
            content: '';
            background-image: url('svg/arrow-a.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-left: 8px;
        }

        &:hover::after {
            -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                    transform: rotate(45deg);
        }
    }

    & .layout2 {
                position: absolute;
        top: 80px;
        right: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
            background: #eaf2fb;
    color: var(--blue) !important;
    border-radius: 40px;
    padding: 16px 34px;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    }
}


.product .imgs > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}


.product .imgs > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}


.product .imgs > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}


.product .imgs > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.product img,
.product video {
    border-radius: 40px;
}

.product .imgs .big {
    -ms-grid-row-span: 2;
    grid-row: span 2;
}

.product .h3 {
    font-weight: 700;
    margin-bottom: 32px;
}

.product .desc {
    margin-bottom: 32px;
}

.specs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
}

.specs .spec {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.specs .spec span:first-child {
    font-weight: 700;
    content: '';
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: .4em;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.specs .spec .line:first-child::after {
    content: '';
    border-bottom: 1px dashed rgba(102, 130, 143, 1);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: inline-block;
    margin-left: .4em;
}

.sl-wrapper {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    z-index: 2;

    &.slick-initialized {
        opacity: 1;
        visibility: visible;
    }
}

.our .img {
    position: relative;
}

.our {
    padding-top: 252px!important;
    padding-bottom: 322px!important;
}

.our img {
    width: 500px;
    height: 455px;
    margin: 0 auto;
    display: block;
}

.our .img::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 25%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 50%;
}

.our .img::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 25%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
    background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
    -webkit-filter: blur(75px);
            filter: blur(75px);
    height: 50%;
    width: 50%;
}

.our h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.our span {
    position: absolute;
    text-align: center;
    width: 25%;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(158, 206, 228, 1);
    font-family: Medium, sans-serif;
    font-weight: 500;
}

.our span[data-pos='1'] {
    top: -30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

}

.our span[data-pos='2'] {
    top: 0;
    left: 80%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 24px;
        height: 1px;
        background: rgba(158, 206, 228, 1);
        left: -21px;
        bottom: -9px;
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}

.our span[data-pos='3'] {
    top: 35%;
    left: 90%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.our span[data-pos='4'] {
    top: 70%;
    left: 90%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}


.our span[data-pos='5'] {
    top: 110%;
    left: 80%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 24px;
        height: 1px;
        background: rgba(158, 206, 228, 1);
        left: -21px;
        bottom: 7px;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }
}

.our span[data-pos='6'] {
    top: 130%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.our span[data-pos='7'] {
    top: 110%;
    left: 20%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 24px;
        height: 1px;
        background: rgba(158, 206, 228, 1);
        right: -21px;
        bottom: 7px;
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}

.our span[data-pos='8'] {
    top: 70%;
    left: 10%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.our span[data-pos='9'] {
    top: 35%;
    left: 10%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.our span[data-pos='10'] {
    top: 0;
    left: 15%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 24px;
        height: 1px;
        background: rgba(158, 206, 228, 1);
        right: -21px;
        bottom: -9px;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }
}


.main {
    max-height: 850px;
    position: relative;
}

.main .video {
    height: auto;
    display: block;
    height: 850px;
}

.main .container {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    height: 100%;
     margin: 0 auto;
}

.main .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    &::after {
        content: '';
        display: block;
        position: absolute;
        top: -20%;
        left: -50%;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.7)), to(rgba(158, 206, 228, 0.7)));
        background: -o-linear-gradient(top, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
        background: linear-gradient(180deg, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
        -webkit-filter: blur(100px);
                filter: blur(100px);
        z-index: -1;

    }
}

.main .inner .text {
    font-size: 40px;
    line-height: 44px;
}

.main .inner .text {
    width: 50%;
}
.main .inner h1 {
    width: 60%;
}

video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 24px;
    width: 100%;
    z-index: 2;

    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.7)), to(rgba(158, 206, 228, 0.7)));
        background: -o-linear-gradient(top, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
        background: linear-gradient(180deg, rgba(158, 206, 228, 0.7) 0%, rgba(158, 206, 228, 0.7) 100%);
        -webkit-filter: blur(100px);
                filter: blur(100px);
        z-index: -1;
    }
}

header .logo {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

header img {
    width: 101px;
    height: 75px;
}

header .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
    width: 100%;
}

header .block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
}

header .block .tel,
header .block .mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 20px;
    line-height: 26px;
}

header .block .tel:hover,
header .block .mail:hover {
    color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #18A2E1 96.55%);
	background-image: linear-gradient(107.48deg, #EAF2FB 3.85%, #18A2E1 96.55%);
}

header .block .tel::before,
header .block .mail::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
}

header .block a.tel::before {
    background-image: url(svg/phone.svg);
}

header .block a.mail::before {
    background-image: url(svg/email.svg);
}

header .block a.tel:hover::before {
    background-image: url(svg/tel-li.svg);
}

header .block a.mail:hover::before {
    background-image: url(svg/email-li.svg);
}

header .mobile {
    display: none;
}

header .phone {
    width: 40px;
    height: 40px;
    background-color: #1F2650;
    border-radius: 40px;
    padding: 10px;
    background-image: url(svg/phone-white.svg);
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;

    &:hover {
        opacity: 0.7;
    }
}

.fly {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: white;
    width: 1016px;
    height: auto;
    border-radius: 40px;
    padding: 32px 49px;
    display: none;
    z-index: 999;
    overflow: hidden;
}

.fly h3 {
    margin-bottom: 60px;
    text-align: center;

}

.fly .player {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 24px 1fr 24px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.fly .block {
    border: 1px solid rgba(171, 173, 187, 1);
    border-radius: 40px;
    height: 316px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    & img {
        height: 150px;
        width: 150px;
    }

    &:hover {
        background-color: rgba(234, 242, 251, 1);
    }
}

.fly figure {
    display: none;
    width: 100%;
    height: 470px;

    &.active {
        display: block;
    }
}

.fly.videos iframe {
    display: none;
    width: 100%;
    height: 100%;

    &.active {
        display: block;
    }
}

.fly .player img {
    -o-object-fit: contain;
       object-fit: contain;
}

.arrows {
    z-index: 0;
}

.close-btn {
    position: absolute;
    top: 3%;
    right: 5%;
    width: 24px;
    height: 24px;
    background-image: url('svg/close.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    &:hover {
        opacity: 0.7;
    }
}
#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(31, 38, 80, 0.5);
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);

    &.active {
        opacity: 1;
        visibility: visible;
    }
}

form input,
form textarea {
    border: 1px solid rgba(171, 173, 187, 1);
    padding: 18px 16px;
    border-radius: 15px;
    width: 100%;
    font-size: 16px;
    line-height: 21px;
    outline: none;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    resize: none;

    &::-webkit-input-placeholder {
        color: rgba(171, 173, 187, 1);
    }

    &::-moz-placeholder {
        color: rgba(171, 173, 187, 1);
    }

    &:-ms-input-placeholder {
        color: rgba(171, 173, 187, 1);
    }

    &::-ms-input-placeholder {
        color: rgba(171, 173, 187, 1);
    }

    &::placeholder {
        color: rgba(171, 173, 187, 1);
    }

    &:focus {
        border: 1px solid rgba(31, 38, 80, 1);
    }

    &:hover {
        border: 1px solid rgba(31, 38, 80, 1);
    }
}

form label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
    position: relative;

    & span {
        font-family: Bold, sans-serif;
    }

    & .phone {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
    }

    & .phone .flag-btn {
        border: 1px solid rgba(171, 173, 187, 1);
        border-radius: 15px 0 0 15px;
        width: 15%;
        border-right: none;
    }

    & .phone input {
        border-radius: 0 15px 15px 0;
    }

    & label.error {
        position: absolute;
        top: 100%;
        font-size: 16px;
        color: rgb(224, 116, 116);
    }
}

form label .phone .flag-btn:hover {
    background-color: rgba(234, 242, 251, 1);
}

form .blue {
    width: 100%;
    margin-bottom: 24px;
}

.fly.form {
    width: 850px;
}

form small {
    color: rgba(171, 173, 187, 1);
    text-align: center;
    font-size: 16px;
    line-height: 21px;
    margin: 0 auto;
    display: block;
    width: 75%;

    & span {
        color: rgba(171, 173, 187, 1);
        font-size: 16px;
        line-height: 21px;
    }
}

.scroll-lock {
    overflow: hidden
}

form .slide {
    /* display: none; */
    position: absolute;
    width: 25%;
    height: 300px;
    overflow-y: scroll;
    background-color: white;
    top: 100%;
    display: none;

    & img {
        width: 21px;
        height: 16px;
    }

    & button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 3px;
        font-size: 16px;
        line-height: 21px;
        padding: 8px;
        width: 100%;

        &:hover {
            background-color: rgba(234, 242, 251, 1);
        }
    }

}

form .flag-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    &::after {
        content: '';
        display: block;
        background-image: url('svg/arrow.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }
}

form .flag {
    width: 32px;
    height: 20px;
}


.fail_over,
.over {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
    position: absolute;
    left: -100%;
    top: 0;
    padding: 68px;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    z-index: 1000;
    background-color: white;

    &.active {
        left: 0;
    }
}

.fail_over,
.over p {
    font-family: Bold sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.fly.form .mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.fly.form .mobile .tel,
.fly.form  .mobile .mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 20px;
    line-height: 26px;
}

.fly.form  .mobile .tel:hover,
.fly.form  .mobile .mail:hover {
    color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: -o-linear-gradient(342.52deg, #EAF2FB 3.85%, #18A2E1 96.55%);
	background-image: linear-gradient(107.48deg, #EAF2FB 3.85%, #18A2E1 96.55%);
}

.fly.form  .mobile .tel::before,
.fly.form  .mobile .mail::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
}

.fly.form  .mobile a.tel::before {
    background-image: url(svg/phone.svg);
}

.fly.form  .mobile a.mail::before {
    background-image: url(svg/email.svg);
}

.fly.form  .mobile a.tel:hover::before {
    background-image: url(svg/tel-li.svg);
}

.fly.form  .mobile a.mail:hover::before {
    background-image: url(svg/email-li.svg);
}

.fly.form .mobile {
    display: none;
}

.fly.form .logo {
    display: none;
    width: 100px;
    height: 75px;
    margin-bottom: 40px;

    & img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
}

.offers {
    padding-top: 100px!important;
}

.offers h2 {
    text-align: center;
    margin-bottom: 120px;
}

.offers .wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 24px 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 120px;
}

.offers .block {
    & .blue {
        width: 100%;
        margin-top: auto;
    }

    & .white {
        margin-bottom: 32px;
    }

    & .content {
        background-color: rgba(234, 242, 251, 1);
        border-radius: 0 0 30px 30px;
        padding: 16px;
    }

    & .title {
        font-family: Bold, sans-serif;
        font-weight: 700;
        font-size: 32px;
        line-height: 42px;
        margin-bottom: 32px;
        text-align: left;
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
    }

    & .specs span {
        font-size: 20px;
        line-height: 26px;
    }

    & .price {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 80px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font-size: 32px;
        line-height: 42px;
        font-family: Bold, sans-serif;
    }

    & .up {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: rgba(234, 242, 251, 1);
        padding: 16px;
        gap: 12px;
        border-radius: 30px 30px 0 0;
        height: 190px;
    }

    & .img {
        background-color: white;
        height: 272px;
        width: 40%;
        border-radius: 30px;
        position: relative;
        top: -120px;
        -ms-flex-negative: 0;
            flex-shrink: 0;

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: -40%;
            left: 0;
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(158, 206, 228, 0.2)), to(rgba(158, 206, 228, 0.2)));
            background: -o-linear-gradient(top, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
            background: linear-gradient(180deg, rgba(158, 206, 228, 0.2) 0%, rgba(158, 206, 228, 0.2) 100%);
            -webkit-filter: blur(100px);
                    filter: blur(100px);
            height: 100%;
            width: 100%;
            z-index: -1;
        }
    }

    & img {
        -o-object-fit: contain;
           object-fit: contain;
    }
}

.error_page {
    background-color: #1F2650;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    & h1 {
        font-size: 4em;
        color: white;
        font-family: 'Bold', sans-serif;
        text-align: center;
        margin-bottom: 1em;
    }

    & .text {
        color: white;
        text-align: center;
        font-size: 1.5em;
        font-family: 'Regular', sans-serif;
    }
}



#cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 14px;
    max-width: 550px;
    border: 1px solid #1f2650;
    box-shadow: 0px 2px 8px 0px #00000040;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    display: none;
}

#cookie-banner .btn {
    /* border-radius: 4px; */
    flex-shrink: 0;
    padding: 14px 20px;
    background-color: #1F2650;
    color: white;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 30px;
}

#cookie-banner a {
    text-decoration: underline;
    font-size: 14px!important;
    display: inline-block;
    line-height: 120%;
}

#cookie-banner .text {
    font-size: 14px!important;
    flex-grow: 1;
    line-height: 120%;
}

@media (max-width:640px) {
    #cookie-banner {
    position: fixed;
    bottom: 10px;
    right: 10px;
    left: 10px;
    max-width: 100%;
}

}