.cs {
    padding-top: 240px;
}
.header {
    position: relative;
    z-index: 21;
}
@media (max-width: 1920px) {
    .cs {
        padding-top: calc(194px + (240 - 194) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs {
        padding-top: calc(129px + (194 - 129) * ((100vw - 414px) / (922 - 414)));
    }
}
@media (max-width: 767px) {
    .cs {
        overflow: hidden;
    }
}
@media (max-width: 414px) {
    .cs {
        padding-top: 129px;
    }
}

.cs-container {
    position: relative;
    padding: 0 359px;
    max-width: 1920px;
    margin: 0 auto;
    z-index: 20;
}

@media (max-width: 1920px) {
    .cs-container {
        padding: 0 calc(40px + (359 - 40) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-container {
        padding: 0 40px;
    }
}

.cs-container--mt {
    margin-top: 226px;
}

@media (max-width: 1920px) {
    .cs-container--mt {
        margin-top: calc(110px + (226 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-container--mt {
        margin-top: calc(95px + (110 - 95) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-back {
    display: flex;
    align-items: center;
    margin-bottom: 72px;
}

@media (max-width: 1920px) {
    .cs-back {
        margin-bottom: calc(60px + (72 - 60) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-back {
        margin-bottom: calc(45px + (60 - 45) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 414px) {
    .cs-back {
        margin-bottom: 45px;
    }

    .cs-back svg {
        width: 8px;
        height: 8px;
    }
}

.cs-back svg {
    transform: translateX(0);
    transition: .4s;
}

.cs-back:hover svg {
    transform: translateX(-7px);
    transition: .4s;
}

.cs-back a {
    display: inline-block;
    margin-left: 17px;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #6D6D6D;
    transition: .4s;
}

@media (max-width: 922px) {
    .cs-back a {
        font-size: calc(12px + (16 - 12) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(14px + (17 - 14) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 414px) {
    .cs-back a {
        font-size: 1.2rem;
        line-height: 1.4rem;
        margin-left: 7px;
    }
}

.cs-back:hover a {
    color: #388AF3;
    transition: .4s;
}

.cs-pd-bt {
    padding-bottom: 240px;
}

.org-block-caption--integration {
    margin-bottom: 185px;
}

@media (max-width: 1920px) {
    .cs-pd-bt {
        padding-bottom: calc(107px + (240 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .org-block-caption--integration {
        margin-bottom: 135px;
    }

    .cs-pd-bt {
        padding-bottom: calc(60px + (110 - 60) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 414px) {
    .cs-pd-bt {
        padding-bottom: 60px;
    }

    .org-block-caption--integration {
        grid-gap: 30px;
        margin-bottom: 0;
    }
}

.cs-caption {
    display: grid;
    grid-template-columns: 539px 1fr;
    grid-gap: 0 63px;
}


.cs-caption h1 {
    font-weight: 700;
    font-size: 52px;
    line-height: 64px;
    color: #343434;
}

.cs-caption p {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: #343434;
}

.cs-caption a {
    display: inline-flex;
    align-items: center;
    margin-top: 53px;
}

.cs-caption a>span {
    display: inline-block;
    margin-right: 5px;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    color: #282828;
    transition: .4s;
}

.cs-caption a:hover>span {
    color: #388AF3;
    transition: .4s;
}

.link-arroy {
    margin-top: 8px;
    transform: scale(1);
    transition: .4s;
}

.cs-caption a:hover .link-arroy {
    transform: scale(1.15);
    transition: .4s;
}

@media (max-width: 1920px) {
    .cs-caption {
        grid-template-columns: calc(381px + (539 - 381) * ((100vw - 922px) / (1920 - 922))) 1fr;
        grid-gap: 0 calc(50px + (63 - 50) * ((100vw - 922px) / (1920 - 922)));
    }

    .cs-caption h1 {
        font-size: calc(36px + (52 - 36) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(45px + (64 - 45) * ((100vw - 922px) / (1920 - 922)));
    }

    .cs-caption p {
        font-size: calc(16px + (24 - 16) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(25px + (38 - 25) * ((100vw - 922px) / (1920 - 922)));
    }

    .cs-caption a {
        margin-top: calc(30px + (53 - 30) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-caption {
        grid-template-columns: 381px 1fr;
        grid-gap: 0 50px;
    }

    .cs-caption h1 {
        font-size: calc(36px + (30 - 36) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(45px + (39 - 45) * ((100vw - 414px) / (922 - 414)));
    }

    .cs-caption p {
        margin-top: 9px;
        font-size: 1.6rem;
        line-height: 2.5rem;
    }

    .cs-caption a {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .cs-caption {
        grid-template-columns: 100%;
        grid-gap: 22px;
    }

    .cs-caption a {
        margin-top: calc(60px + (30 - 60) * ((100vw - 414px) / (767 - 414)));
    }
}

@media (max-width: 414px) {
    .cs-caption h1 {
        font-size: 3rem;
        line-height: 3.8rem;
    }

    .cs-caption a {
        margin-top: 60px;
    }

    .cs-caption p {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
}

.cs-banner {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-image picture {
    display: block;
    position: relative;
    max-height: calc(100vw * (910 / 1920));
}

@media (max-width: 767px) {
    .cs-image picture {
        max-height: calc(264px + (332 - 264) * ((100vw - 414px) / (767 - 414)))ж
    }
}

.cs-image {
    max-width: 100vw;
    overflow: hidden;
    margin-top: 40px;
}
.cs-image--first {
    margin-top: 0;
}

.cs-image img {
    transform: translate(0, 25px) scale(1.8);
    width: 100%;
}

@media (max-width: 767px) {
  .cs-image img {
    transform: translate(0, -30px) scale(2);
  }
}
.cs-image-window {
    padding: 310px 0 325px;
    position: relative;
}

@media (max-width: 1920px) {
    .cs-image-window {
        padding: calc(255px + (310 - 255) * ((100vw - 922px) / (1920 - 922))) 0 calc(126px + (325 - 126) * ((100vw - 922px) / (1920 - 922)));
    }

    .cs-image {
        margin-top: calc(0px + (40 - 0) * ((100vw - 414px) / (922 - 414)));
    }
    .cs-image--first {
        margin-top: 0;
    }
}

@media (max-width: 922px) {
    .cs-image-window {
        padding: calc(173px + (255 - 173) * ((100vw - 414px) / (922 - 414))) 0 calc(112px + (126 - 112) * ((100vw - 414px) / (922 - 414)));
    }
    .cs-image--first {
        margin-top: 0;
    }
}

@media (max-width: 414px) {
    .cs-image {
        margin-top: 0;
    }

    .cs-image-window {
        padding: 173px 0 112px;
    }
}

.cs-image-window::before {
    content: '';
    position: absolute;
    right: calc(100% - 198px);
    top: 70px;
    background-image: url(../img/planet-dots.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 547px;
    height: 596px;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 1920px) {
    .cs-image-window::before {
        width: calc(250px + (547 - 250) * ((100vw - 922px) / (1920 - 922)));
        height: calc(271px + (596 - 271) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-image-window::before {
        width: calc(242px + (250 - 242) * ((100vw - 414px) / (922 - 414)));
        height: calc(272px + (271 - 272) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 767px) {
    .cs-image-window::before {
        left: 20px;
    }
}

@media (max-width: 414px) {
    .cs-image-window::before {
        width: 242px;
        height: 272px;
    }
}

.cs-image-window__heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

@media (max-width: 767px) {
    .cs-image-window__heading {
        flex-direction: column;
        align-items: center;
    }
}

.cs-image-window__heading .cs-col:nth-child(1) {
    width: calc(50% + (33px / 2));
}

.cs-heading h2 {
    font-size: 45px;
    line-height: 56px;
    margin: 0;
    color: #343434;
}

@media (max-width: 1920px) {
    .cs-heading h2 {
        font-size: calc(35px + (45 - 35) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(39px + (56 - 39) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-heading h2 {
        font-size: calc(32px + (35 - 32) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(40px + (39 - 40) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 414px) {
    .cs-heading h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

.cs-image-window__heading .cs-col:nth-child(2) {
    width: calc(50% - (33px / 2));
    margin-top: 12px;
}

@media (max-width: 767px) {
    .cs-image-window__heading .cs-col {
        width: 100%;
    }

    .cs-image-window__heading .cs-col:nth-child(1) {
        width: 100%;
    }

    .cs-image-window__heading .cs-col:nth-child(2) {
        width: 100%;
        margin-top: 22px;
    }
}

.cs-heading p {
    font-size: 25px;
    line-height: 40px;
    margin: 0;
    color: #343434;
}

@media (max-width: 1920px) {
    .cs-heading p {
        font-size: calc(16px + (25 - 16) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(25px + (40 - 25) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-heading p {
        font-size: 16px;
        line-height: 25px;
    }
}

.cs-heading p a {
    cursor: pointer;
    transition: .3s linear;
    font-weight: 600;
    border-bottom: 1px solid #343434;
}

.cs-heading p a:hover {
    border-bottom: 1px solid transparent;
}

.cs-image-window__heading p {
    max-width: 493px;
}

.cs-blocks__heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cs-blocks__heading .cs-col:nth-child(1) {
    width: calc(50% + (33px / 2));
}

.cs-blocks__heading .cs-col:nth-child(2) {
    width: calc(50% - (33px / 2));
    margin-top: 10px;
}

.cs-blocks__heading--pt {
    padding-top: 250px;
}

@media (max-width: 767px) {
    .cs-blocks__heading {
        flex-direction: column;
    }

    .cs-blocks__heading .cs-col:nth-child(1) {
        width: 100%;
    }

    .cs-blocks__heading .cs-col:nth-child(2) {
        width: 100%;
        margin-top: 22px;
    }
}

.cs-steps {
    margin-top: 236px;
    padding-bottom: 325px;
}

@media (max-width: 1920px) {
    .cs-steps {
        margin-top: calc(135px + (236 - 135) * ((100vw - 922px) / (1920 - 922)));
        padding-bottom: calc(110px + (325 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-steps {
        margin-top: calc(55px + (135 - 55) * ((100vw - 414px) / (922 - 414)));
        padding-bottom: 110px;
    }
}

@media (max-width: 414px) {
    .cs-steps {
        margin-top: 55px;
    }
}

.cs-steps--structure {
    padding-bottom: 150px;
}

@media (max-width: 922px) {
    .cs-steps--structure {
        padding-bottom: calc(55px + (150 - 55) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-blocks__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 204px 33px;
}

@media (max-width: 1920px) {
    .cs-blocks__items {
        gap: calc(132px + (204 - 132) * ((100vw - 922px) / (1920 - 922))) calc(20px + (33 - 20) * ((100vw - 922px) / (1920 - 922)));
    }
}

.cs-blocks__items--ltg-gap {
    gap: 110px 33px;
    margin-bottom: 325px;
}

@media (max-width: 1920px) {
    .cs-blocks__items--ltg-gap {
        margin-bottom: calc(110px + (325 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-blocks__items--ltg-gap {
        margin-bottom: 110px;
    }
}

@media (max-width: 767px) {
    .cs-blocks__items {
        flex-direction: column;
        grid-gap: 56px;
    }
}

.cs-blocks__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(50% - (33px / 2));
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 56px;
}

@media (max-width: 767px) {
    .cs-blocks__item {
        width: 100%;
    }
}

.cs-steps .cs-blocks:nth-child(1) .cs-blocks__item:nth-child(2n-1) {
    -webkit-transform: translateY(-130px);
    -ms-transform: translateY(-130px);
    transform: translateY(-130px);
}

@media (max-width: 1920px) {
    .cs-steps .cs-blocks:nth-child(1) .cs-blocks__item:nth-child(2n-1) {
        -webkit-transform: translateY(calc(-55px + (-130 + 55) * ((100vw - 922px) / (1920 - 922))));
        -ms-transform: translateY(calc(-55px + (-130 + 55) * ((100vw - 922px) / (1920 - 922))));
        transform: translateY(calc(-55px + (-130 + 55) * ((100vw - 922px) / (1920 - 922))));
    }
}
@media (max-width: 767px) {
    .cs-steps .cs-blocks:nth-child(1) .cs-blocks__item:nth-child(2n-1) {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.cs-steps .cs-blocks:nth-child(1) .cs-blocks__items--ltg-gap .cs-blocks__item:nth-child(3) {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.cs-blocks__img {
    height: 1000px;
    overflow: hidden;
}

@media (max-width: 2500px) {
    .cs-blocks__img {
        height: calc(752px + (1000 - 752) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 1920px) {
    .cs-blocks__img {
        height: calc(506px + (752 - 506) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .cs-blocks__img {
        height: calc(428px + (650 - 428) * ((100vw - 414px) / (767 - 414)));
    }
    .cs-steps--braer .cs-blocks__img {
        height: calc(342px + (420 - 342) * ((100vw - 414px) / (767 - 414)));
    }
}

.cs-blocks__img>picture {
    display: block;
    position: relative;
}

.cs-blocks__item img {
    width: 100%;
    height: auto;
}

.cs-blocks__item:nth-child(1) img {
    transform: translate(-190px, 205px) scale(2.2);
}

@media (max-width: 1460px) {
    .cs-blocks__item:nth-child(1) img {
        transform: translate(-88px, 155px) scale(1.8);
    }
}

@media (max-width: 767px) {
    .cs-blocks__item:nth-child(1) img {
        transform: translate(-32px, 110px) scale(1.8);
    }
}

.cs-blocks__item:nth-child(3) img {
    transform: translate(0px, -60px);
}
@media (max-width: 767px) {
    .cs-blocks__item:nth-child(3) img {
        transform: translate(0px, -35px);
    }
}

.cs-blocks__item:nth-child(4) img {
    transform: translate(0px, -70px);
}

.cs-image-window__image {
    margin: 140px auto 325px;
    position: relative;
    max-width: 100%;
    width: 100%;
    padding: 13px;
}

@media (max-width: 1920px) {
    .cs-image-window__image {
        margin: calc(80px + (140 - 80) * ((100vw - 922px) / (1920 - 922))) auto calc(110px + (325 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-image-window__image {
        margin: calc(65px + (80 - 65) * ((100vw - 922px) / (1920 - 922))) auto 110px;
    }
}

.cs-image-window__background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 25px;
    z-index: 1;
}

.cs-image-window__image .img {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    z-index: 2;
    aspect-ratio: 1.83;
    background-color: #fff;
}

.cs-image-window__image picture {
    position: relative;
    display: block;
}

.cs-image-window__image img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .cs-image-window__image img {
        width: 606px;
        height: 330px;
    }
    .cs-image-window__image picture {
        overflow: visible;
    }
    .cs-image-window__image .img {
        overflow: visible;
    }
}

.cs-image-window__image .og-parallax::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 10;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    pointer-events: none;
    backdrop-filter: blur(1px);
}

.cs-image--no-parallax {
    margin-top: 150px;
    margin-bottom: 425px;
}

.cs-image--no-parallax img {
    transform: translate(0, 0) scale(1);
}

@media (max-width: 1920px) {
    .cs-image--no-parallax {
        margin-top: calc(80px + (150 - 80) * ((100vw - 922px) / (1920 - 922)));
        margin-bottom: calc(185px + (425 - 185) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-image--no-parallax {
        margin-top: calc(55px + (80 - 55) * ((100vw - 414px) / (922 - 414)));
        margin-bottom: calc(110px + (185 - 110) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-heading__col h2 {
    margin-bottom: 140px;
}

@media (max-width: 767px) {
    .cs-heading__col h2 {
        margin-bottom: 0;
    }
}

.cs-heading__col p {
    padding-bottom: 370px;
}

@media (max-width: 922px) {
    .cs-heading__col p {
        padding-bottom: 0;
    }
}

.cs-background-clip {
    position: relative;
    overflow: hidden;
}

.cs-background-clip--pt {
    padding-top: 325px;
}

@media (max-width: 1920px) {
    .cs-background-clip--pt {
        padding-top: calc(150px + (325 - 150) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .cs-background-clip--pt {
        padding-top: 110px;
    }
}

.cs-background-wrap {
    position: absolute;
    height: 2620px;
    width: 2620px;
    z-index: -1;
}

@media (max-width: 922px) {
    .cs-background-wrap {
        width: calc(900px + (2620 - 900) * ((100vw - 414px) / (922 - 414)));
        height: calc(900px + (2620 - 900) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-background-circle {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #F0F2F8;
    border-radius: 50%;
}

.circle-braer-1 {
    position: absolute;
    top: -300px;
    left: -1050px;
}

@media (max-width: 1920px) {
    .circle-braer-1 {
        left: calc(-650px + (-1050 + 650) * ((100vw - 414px) / (1920 - 414)));
    }
}

.circle-braer-2 {
    position: absolute;
    top: 880px;
    left: -900px;
}

@media (max-width: 1920px) {
    .circle-braer-2 {
        left: calc(-1250px + (-900 + 1250) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .circle-braer-2 {
        left: -500px;
        top: 870px;
    }
}

.cs-col {
    position: relative;
}

.cs-col--flex {
    display: flex;
    flex-direction: column;
}

@media (max-width: 922px) {
    .cs-heading__col {
        flex-direction: column;
    }

    .cs-col--flex {
        width: 100% !important;
        flex-direction: row;
        gap: 86px;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .cs-col--flex {
        flex-direction: column;
        gap: 22px;
    }
}

.table-anim {
    position: absolute;
    width: 1500px;
    top: 50px;
    left: 150px;
}

@media (max-width: 1920px) {
    .table-anim {
        width: calc(922px + (1500 - 922) * ((100vw - 922px) / (1920 - 922)));
        top: calc(80px + (50 - 80) * ((100vw - 922px) / (1920 - 922)));
        left: calc(0px + (150 - 0) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .table-anim {
        width: calc(595px + (922 - 595) * ((100vw - 414px) / (922 - 414)));
        top: 80px;
        left: calc(-25px + (0 + 25) * ((100vw - 414px) / (922 - 414)));
    }
}

.braer-ball {
    margin-top: 50px;
    position: relative;
    /* height: 385px; */
    z-index: 20;
}

.braer-ball_container {
    width: 1154px;
    height: 1154px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    transition: scale 0.3s ease;
}

@media (max-width: 1920px) {
    .braer-ball_container {
        width: calc(842px + (1154 - 842) * ((100vw - 922px) / (1920 - 922)));
        height: calc(842px + (1154 - 842) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .braer-ball_container {
        width: calc(537px + (842 - 537) * ((100vw - 414px) / (922 - 414)));
        height: calc(537px + (842 - 537) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 767px) {
    .braer-ball_container {
        width: 100%;
        height: 100%;
    }
}

.braer-ball_container.active {
    scale: 0.3;
    transition: scale 0.3s ease;
    background-color: rgba(0, 0, 0, 0.1);
}

.braer-ball_img {
    width: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.braer-ball_container.active .braer-ball_img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.braer-anim-line {
    position: absolute;
    top: 985px;
    left: 300px;
    width: 940px;
    z-index: -1;
}

@media (max-width: 2500px) {
    .braer-anim-line {
        top: calc(1080px + (985 - 1080) * ((100vw - 1920px) / (2500 - 1920)));
        left: calc(200px + (300 - 200) * ((100vw - 1920px) / (2500 - 1920)));
        width: calc(750px + (940 - 750) * ((100vw - 1920px) / (2500 - 1920)));
    }
}

@media (max-width: 1920px) {
    .braer-anim-line {
        top: calc(800px + (1080 - 800) * ((100vw - 922px) / (1920 - 922)));
        left: calc(-145px + (200 + 145) * ((100vw - 922px) / (1920 - 922)));
        width: calc(615px + (750 - 615) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .braer-anim-line {
        top: calc(850px + (1140 - 850) * ((100vw - 767px) / (1920 - 767)));
        left: calc(-90px + (240 + 90) * ((100vw - 767px) / (1920 - 767)));
        width: calc(475px + (615 - 475) * ((100vw - 767px) / (1920 - 767)));
    }
}

@media (max-width: 767px) {
    .braer-anim-line {
        top: calc(488px + (840 - 488) * ((100vw - 414px) / (767 - 414)));
        left: calc(-514px + (-330 + 514) * ((100vw - 414px) / (767 - 414)));
        width: calc(720px + (727 - 720) * ((100vw - 414px) / (767 - 414)));
    }
}

.cs-steps--braer {
    margin-top: 460px;
}

.cs-steps--braer .cs-blocks__img {
    background: #F8F8F8;
    height: 601px;
}
@media (max-width: 1920px) {
    .cs-steps--braer .cs-blocks__img {
        height: calc(420px + (601 - 420) * ((100vw - 922px) / (1920 - 922)));
    }
}

.cs-steps--braer .cs-blocks__item:nth-child(1) img {
    /* transform: translate(0, 250px) scale(1); */
    transform: translate(0, 45px) scale(0.7);
}
.cs-steps--braer .cs-blocks__item:nth-child(3) img {
    transform: translate(0, 45px) scale(0.7);
}
.cs-steps--braer .cs-blocks__item:nth-child(4) img {
    transform: translate(0, 120px);
}
@media (max-width: 767px) {
    .cs-steps--braer .cs-blocks__item:nth-child(1) img {
        transform: translate(0, 0px) scale(0.5);
    }
    .cs-steps .cs-blocks__item:nth-child(5) img {
        transform: translate(0, -90px) scale(0.8);
    }
    .cs-steps .cs-blocks__item:nth-child(5) .cs-blocks__img {
        background: #efefef;
    }
    .cs-steps--braer .cs-blocks__item:nth-child(4) img {
        transform: translate(0, 75px) scale(0.8);
    }
}
.cs-steps--braer .cs-blocks__item img {
    transform: translateY(170px);
}

@media (max-width: 2500px) {
    .cs-steps--braer {
        margin-top: calc(300px + (460 - 300) * ((100vw - 1920px) / (2500 - 1920)));
    }
}

@media (max-width: 1920px) {
    .cs-steps--braer .cs-blocks__items {
        gap: calc(95px + (204 - 95) * ((100vw - 922px) / (1920 - 922))) calc(20px + (33 - 20) * ((100vw - 922px) / (1920 - 922)));
    }

    .cs-steps--braer {
        margin-top: calc(206px + (300 - 206) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .cs-steps--braer .cs-blocks__items {
        gap: 40px;
    }

    .cs-steps--braer .cs-blocks__item img {
        transform: translateY(95px);
    }
}

.cs-slide__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 30px;
    margin-top: 320px;
    height: 1550px;
}

.pin-list {
    display: flex;
    flex-direction: column;
    grid-gap: 150px;
}

.pin-list__pic {
    margin-top: 55px;
}

.pin-list__pic img {
    width: 100%;
}

.pin-list__item {
    font-weight: 400;
    font-size: 22px;
    line-height: 40px;
    color: #343434;
}

@media (max-width: 767px) {
    .pin-list {
        grid-gap: 55px;
    }
    .pin-list__item p {
        font-size: 16px !important;
        line-height: 25px !important;
    }

    .pin-list__pic {
        margin-top: 40px;
    }
}

.cs-video__window {
    position: relative;
    padding: 14px;
    margin-bottom: 372px;
}

@media (max-width: 1920px) {
    .cs-video__window {
        padding: calc(5px + (14 - 5) * ((100vw - 922px) / (1920 - 922)));
        margin-left: calc(86px + (0 - 86) * ((100vw - 922px) / (1920 - 922)));
        margin-right: calc(86px + (0 - 86) * ((100vw - 922px) / (1920 - 922)));
        margin-bottom: calc(180px + (372 - 180) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-video__window {
        padding: 5px;
        margin-left: calc(0px + (86 - 0) * ((100vw - 414px) / (922 - 414)));
        margin-right: calc(0px + (86 - 0) * ((100vw - 414px) / (922 - 414)));
        margin-bottom: calc(110px + (180 - 110) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-video__window--black {
    margin-bottom: 225px;
}

@media (max-width: 1920px) {
    .cs-video__window--black {
        margin-bottom: calc(90px + (225 - 90) * ((100vw - 922px) / (1920 - 922)));
    }
}

.cs-video__window-background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 20px;
    z-index: 1;
}

.cs-video__window-background--black {
    background-color: #000000;
}

.cs-video__window>video {
    display: block;
    width: 100%;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.cs-video {
    margin-top: 200px;
}

@media (max-width: 1920px) {
    .cs-video {
        margin-top: calc(110px + (200 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

.braer-anim {
    padding-bottom: 210px;
}

@media (max-width: 1920px) {
    .braer-anim {
        padding-bottom: calc(110px + (210 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}
@media (max-width: 580px) {
    .braer-anim {
        margin-top: 55px;
    }
    .braer-anim svg {
        transform: scale(1.5);
    }
}

.cs-background-clip--grey {
    background-color: #F0F2F8;
}

.circle-braer-3 {
    background-color: #FFF;
    position: absolute;
    top: 1950px;
    left: -700px;
}

@media (max-width: 1920px) {
    .circle-braer-3 {
        left: calc(-1400px + (-700 + 1400) * ((100vw - 922px) / (1920 - 922)));
    }
}
@media (max-width: 767px) {
    .circle-braer-3 {
        left: -360px;
        top: 2400px;
    }
}

.cs-background-wrap--white {
    z-index: 0;
}

.cs-block__subtitle {
    max-width: 888px;
    width: 100%;
    margin: 0 auto 150px;
    font-weight: 400;
    font-size: 25px;
    line-height: 40px;
    color: #343434;
}

@media (max-width: 1920px) {
    .cs-block__subtitle {
        max-width: calc(498px + (888 - 498) * ((100vw - 922px) / (1920 - 922)));
        font-size: calc(16px + (25 - 16) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(25px + (40 - 25) * ((100vw - 922px) / (1920 - 922)));
        margin: 0 auto calc(54px + (150 - 54) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-block__subtitle {
        margin: 0 auto calc(80px + (54 - 80) * ((100vw - 414px) / (922 - 414)));
    }
}

@media (max-width: 767px) {
    .cs-block__subtitle {
        max-width: 100%;
        font-size: 22px;
        line-height: 32px;
    }
}

.title-animation {
    position: relative;
    margin-top: 225px;
    margin-bottom: 240px;
    height: 200px;
}

@media (max-width: 1920px) {
    .title-animation {
        height: calc(100px + (200 - 100) * ((100vw - 922px) / (1920 - 922)));
        margin-top: calc(90px + (225 - 90) * ((100vw - 922px) / (1920 - 922)));
        margin-bottom: calc(110px + (240 - 110) * ((100vw - 922px) / (1920 - 922)));
        ;
    }
}

@media (max-width: 922px) {
    .title-animation {
        height: calc(55px + (100 - 55) * ((100vw - 414px) / (922 - 414)));
        margin-top: calc(80px + (90 - 80) * ((100vw - 414px) / (922 - 414)));
        margin-bottom: calc(150px + (110 - 150) * ((100vw - 414px) / (922 - 414)));
    }
}

.title-animation__text {
    position: absolute;
    width: 2300px;
    margin: 0;
    font-weight: 700;
    font-size: 170px;
    line-height: 210px;
    text-align: center;
    color: #FFFFFF;
    transform: translateX(0px);
}

@media (max-width: 1920px) {
    .title-animation__text {
        font-size: calc(88px + (170 - 88) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(110px + (210 - 110) * ((100vw - 922px) / (1920 - 922)));
    }
}

.cs-blocks p {
    font-size: 25px;
    line-height: 40px;
    color: #343434;
}

@media (max-width: 1920px) {
    .cs-blocks p {
        font-size: calc(16px + (25 - 16) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(25px + (40 - 25) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-blocks p {
        font-size: 16px;
        line-height: 25px;
    }
}

@media (max-width: 767px) {
    .cs-blocks p {
        font-size: 22px;
        line-height: 32px;
    }
}

.clicker-block {
    background-color: #388AF3;
    padding: 188px 261px;
}

@media (max-width: 1920px) {
    .clicker-block {
        padding: calc(40px + (188 - 40) * ((100vw - 922px) / (1920 - 922))) calc(80px + (261 - 80) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .clicker-block {
        padding: 80px 40px;
    }
}

.switch-btn {
    display: flex;
    grid-gap: 30px;
    justify-content: center;
    align-items: center;
    width: 212px;
    /* ширина переключателя */
    height: 63px;
    /* высота переключателя */
    background: #ECECEC;
    /* цвет фона */
    border-radius: 14px;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms;
    /* анимация */
}

.switch-btn p {
    width: 50%;
    text-align: left;
    position: relative;
    z-index: 2;
    font-weight: 500;
    font-size: 20px;
    line-height: 144%;
    color: #1E1E1E;
}

.switch-btn p:first-child {
    text-align: right;
}

.switch-btn::after {
    content: "";
    border-radius: 10px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    height: 49px;
    /* высота кнопки */
    width: 100px;
    /* ширина кнопки */
    background: #fff;
    /* цвет кнопки */
    top: 8px;
    /* положение кнопки по вертикали относительно основы */
    left: 8px;
    /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms;
    /* анимация */
    box-shadow: 0 0 10px 0 #999999;
    /* тень */
    position: absolute;
    z-index: 1;
}

.switch-on::after {
    left: 105px;
}

@media (max-width: 1920px) {
    .switch-btn {
        width: calc(170px + (212 - 170) * ((100vw - 922px) / (1920 - 922)));
        height: calc(54px + (63 - 54) * ((100vw - 922px) / (1920 - 922)));
    }

    .switch-btn p {
        font-size: calc(14px + (20 - 14) * ((100vw - 922px) / (1920 - 922)));
    }

    .switch-btn::after {
        height: calc(40px + (49 - 40) * ((100vw - 922px) / (1920 - 922)));
        width: calc(83px + (100 - 83) * ((100vw - 922px) / (1920 - 922)));
    }

    .switch-on::after {
        left: calc(82px + (105 - 82) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .switch-btn {
        width: 170px;
        height: 54px;
    }

    .switch-btn p {
        font-size: 14px;
    }

    .switch-btn::after {
        height: 40px;
        width: 83px;
    }

    .switch-on::after {
        left: 82px;
    }
}


.clicker-block__pic2 {
    opacity: 0;
}

/* .clicker-block__wrapper {
    display: flex;
    grid-gap: 15px;
    justify-content: space-between;
    align-items: center;
} */
.clicker-block__wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    grid-gap: 15px;
    align-items: center;
}
.clicker-block__wrapper .clicker-block__card {
    grid-column: 1;
    grid-row: 1;
}
.clicker-block__wrapper .clicker-block__bricks {
    grid-column: 3;
    grid-row: 1;
}
.clicker-block__wrapper .clicker-block__switch {
    grid-column: 2;
    grid-row: 1;
}
.clicker-block__wrapper.active .clicker-block__card {
    grid-column: 3;
    grid-row: 1;
}
.clicker-block__wrapper.active .clicker-block__bricks {
    grid-column: 1;
    grid-row: 1;
}
.clicker-block__card {
    position: relative;
    width: 448px;
    height: 519px;
}

@media (max-width: 1920px) {
    .clicker-block__card {
        width: calc(330px + (448 - 330) * ((100vw - 922px) / (1920 - 922)));
        height: calc(374px + (519 - 374) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .clicker-block__card {
        width: calc(205px + (300 - 205) * ((100vw - 767px) / (922 - 767)));
        height: calc(240px + (339 - 240) * ((100vw - 767px) / (922 - 767)));
    }
}

@media (max-width: 767px) {
    .clicker-block__wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
    .clicker-block__card {
        width: 300px;
        height: 339px;
    }
}

.clicker-block__bricks {
    /* width: 480px; */
    width: 448px;
    height: 366px;
}

.clicker-block__bricks img {
    width: 100%;
    height: 100%;
}

@media(max-width: 1920px) {
    .clicker-block__bricks {
        /* width: calc(240px + (480 - 240) * ((100vw - 922px) / (1920 - 922))); */
        width: calc(330px + (448 - 330) * ((100vw - 922px) / (1920 - 922)));
        height: calc(183px + (366 - 183) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .clicker-block__bricks {
        /* width: 240px; */
        width: calc(205px + (300 - 205) * ((100vw - 767px) / (922 - 767)));
        height: calc(113px + (165 - 113) * ((100vw - 767px) / (922 - 767)));
    }
}

@media (max-width: 767px) {
    .clicker-block__bricks {
        display: none;
    }
}

.clicker-block__card img {
    width: 100%;
    height: 100%;
}

.clicker-block__pic--two {
    position: absolute;
    top: 0;
    transition: opacity .5s ease;
}

.cs-video__window--mt {
    margin-top: 150px;
    margin-bottom: 245px;
}

@media (max-width: 1920px) {
    .cs-video__window--mt {
        margin-top: calc(80px + (150 - 80) * ((100vw - 922px) / (1920 - 922)));
        margin-bottom: calc(115px + (245 - 115) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 922px) {
    .cs-video__window--mt {
        margin-top: 80px;
        margin-bottom: calc(80px + (115 - 80) * ((100vw - 414px) / (922 - 414)));
    }
}

.circle-braer-4 {
    position: absolute;
    top: 550px;
    left: -800px;
}

@media (max-width: 1920px) {
    .circle-braer-4 {
        left: calc(-640px + (-800 + 640) * ((100vw - 414px) / (1920 - 414)));
    }
}

.screen-page {
    margin-top: 245px;
    display: grid;
    grid-template-columns: 677px 414px;
    grid-template-rows: auto auto;
    grid-gap: 100px 105px;
    justify-content: center;
    height: 1100px;
}

@media (max-width: 1920px) {
    .screen-page {
        margin-top: calc(115px + (245 - 115) * ((100vw - 922px) / (1920 - 922)));
        grid-template-columns: calc(407px + (677 - 407) * ((100vw - 922px) / (1920 - 922))) calc(293px + (414 - 293) * ((100vw - 922px) / (1920 - 922)));
        height: calc(650px + (1100 - 650) * ((100vw - 922px) / (1920 - 922)));
        grid-gap: calc(50px + (100 - 50) * ((100vw - 922px) / (1920 - 922))) calc(27px + (105 - 27) * ((100vw - 922px) / (1920 - 922)));
    }
}

.screen-page__wrap:nth-child(1) {
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}

.screen-page__wrap:nth-child(2) {
    grid-column: 2;
}

.screen-page__text {
    font-weight: 400;
    font-size: 25px;
    line-height: 40px;
    color: #343434;
    grid-row: 1;
    grid-column: 2;
}

@media (max-width: 1920px) {
    .screen-page__text {
        font-size: calc(16px + (25 - 16) * ((100vw - 922px) / (1920 - 922)));
        line-height: calc(25px + (40 - 25) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .screen-page__text {
        font-size: 16px;
        line-height: 25px;
        padding: 0 calc(75px + (0 - 75) * ((100vw - 414px) / (922 - 414)));
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .screen-page__wrap:nth-child(1) {
        grid-column: 1;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .screen-page {
        margin-top: 80px;
        grid-template-columns: 280px 150px;
        grid-gap: 45px;
    }
}

.screen-page__wrap p {
    margin-bottom: 105px;
}

@media (max-width: 1920px) {
    .screen-page__wrap p {
        margin-bottom: calc(27px + (105 - 27) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .screen-page__wrap p {
        margin-bottom: 45px;
    }
}

.screen-page__wrap img {
    width: 100%;
    border: 6px solid #fff;
    border-radius: 15px;
}
.screen-page__wrap:nth-child(2) img {
    width: 73%;
}
.screen-page__wrap:last-child img {
    width: 80%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .screen-page__wrap:last-child img {
        width: 100%;
    }
}

.cs-slider {
    margin-top: 150px;
    margin-bottom: 140px;
    overflow: hidden;
}

@media (max-width: 1920px) {
    .cs-slider {
        margin-top: calc(80px + (150 - 80) * ((100vw - 922px) / (1920 - 922)));
        margin-bottom: calc(80px + (140 - 80) * ((100vw - 922px) / (1920 - 922)));
        ;
    }
}

@media (max-width: 767px) {
    .cs-slider {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}

.swiper-slide {
    width: 794px !important;
    margin-right: 80px;
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 1920px) {
    .swiper-slide {
        width: calc(397px + (794 - 397) * ((100vw - 922px) / (1920 - 922))) !important;
        margin-right: calc(30px + (80 - 30) * ((100vw - 922px) / (1920 - 922)));
        border-radius: calc(10px + (20 - 10) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 767px) {
    .swiper-slide {
        width: 95% !important;
        margin-right: 0;
        border-radius: 5px;
    }

    .swiper-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}

.swiper-slide img {
    width: 100%;
}

.cs-image--lt img {
    transform: translate(0px, 35px) scale(1);
}

.cs-blocks--mb {
    margin-bottom: 210px;
}

@media (max-width: 922px) {
    .cs-blocks--mb {
        margin-bottom: calc(55px + (210 - 55) * ((100vw - 414px) / (922 - 414)));
    }
}

.cs-blocks__items--tr .cs-blocks__item:nth-child(1) {
    transform: translateY(-130px);
}

@media (max-width: 767px) {
    .cs-blocks__items--tr .cs-blocks__item:nth-child(1) {
        transform: translateY(0);
    }
}

.cs-blocks__items--tr .cs-blocks__item img {
    transform: translateY(20px);
}

@media (max-width: 922px) {
    .cs-blocks--braer-table {
        padding-bottom: 700px;
    }
}

@media (max-width: 767px) {
    .cs-blocks--braer-table {
        padding-bottom: 450px;
    }
}

.do-you-want-the-same {
    padding: 0 0 35px;
}

@media (max-width: 1149px) {
    .do-you-want-the-same {
        padding: 170px 0 0;
    }
}

@media (max-width: 767px) {
    .do-you-want-the-same {
        padding: calc(0px + (170 - 0) * ((100vw - 414px) / (922 - 414)));
    }
}

.footer-form .do-you-want-the-same h2 {
    font-weight: 700;
    font-size: 45px;
    line-height: 56px;
    margin: 0 0 122px;
    color: #343434;
}

.footer-form .do-you-want-the-same .form-control {
    color: #343434;
}

.footer-form .do-you-want-the-same label {
    color: #CCC !important;
}

.footer-form .do-you-want-the-same .form-btn {
    color: #388AF3;
    border: 3px solid #388AF3;
}

.footer-form .do-you-want-the-same label {
    color: #CCC !important;
}

.footer-form .do-you-want-the-same .form-checkbox input::before {
    border: 1px solid #388AF3;
}

.footer-form .do-you-want-the-same .form-checkbox input::after {
    background: #388AF3;
}

.footer-form .form-checkbox input:checked::after {
    transform: scale(1) translate(-50%, -50%);
}

.footer-form .do-you-want-the-same .form-checkbox p {
    color: #6D6D6D !important;
}

.footer-form .do-you-want-the-same .form-checkbox p>a {
    color: #388AF3 !important;
}
.footer-form .do-you-want-the-same .form-btn {
    background-color: #fff;
}
@media (max-width: 767px) {
    .cases-sample__grid.swiper-wrapper {
        flex-direction: initial;
        gap: 0;
        align-items: flex-start;
    }
}

.cases-sample__item.swiper-slide {
    width: 587px !important;
}

@media screen and (max-width: 1920px) {
    .cases-sample__item.swiper-slide {
        width: calc(553px + (587 - 553) * ((100vw - 1536px) / (1920 - 1536))) !important;
    }
}

@media screen and (max-width: 1536px) {
    .cases-sample__item.swiper-slide {
        width: calc(472px + (553 - 472) * ((100vw - 1280px) / (1536 - 1280))) !important;
    }
}

@media screen and (max-width: 1280px) {
    .cases-sample__item.swiper-slide {
        width: calc(411px + (472 - 411) * ((100vw - 922px) / (1280 - 922))) !important;
    }
}

@media screen and (max-width: 922px) {
    .cases-sample__item.swiper-slide {
         width: calc(382px + (411 - 382) * ((100vw - 414px) / (922 - 414))) !important;
    }
}

@media screen and (max-width: 414px) {
    .cases-sample__item.swiper-slide {
         width: 100% !important;
    }
}

.cs-slider .swiper-wrapper {
    align-items: stretch;
}

.cs-slider .swiper-slide {
    height: auto;
}
.cs-slider .swiper-slide img {
    height: 100%;
    object-fit: cover;
}