.header {
    background-color: #fff;
}

@media (min-width: 1024px) {
    .header {
        background-color: transparent;
    }
}

.logo svg path {
    fill: #000000;
}

.header__btn {
    color: #ffffff;
    background-color: #000000;
}

.lang__link {

}

@media (min-width: 1600px) {
    .lang__link {
        color: #ffffff;
    }
}

.header__btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 1600px) {
    .case {
        padding-bottom: 80px;
    }
}

.case__back {
    color: #000000;
}

.case__back svg path {
    stroke: #000000;
}

.case__info {
    background-color: rgba(255, 255, 255, 0.3);
}

.synergy-app__hero {
    margin-top: -500px;
    padding-top: 500px;
    margin-bottom: 32px;
    background-image: linear-gradient(109deg, #bcd161 0%, #fade60 39%, #f3a663 64%, #c64f80 100%);
    background-size: 400% 400%;
    animation: gradient 10s linear infinite;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .synergy-app__hero {
        margin-bottom: 40px;
    }
}

@media (min-width: 1600px) {
    .synergy-app__hero {
        /* margin-top: -108px; */
        margin-bottom: 60px;
        /* padding-top: 108px; */
    }
}

.hero__scene {
    position: relative;
    height: 450px;
    margin-left: -8px;
    margin-right: -8px;
}

@media (min-width: 575px) {
    .hero__scene {
        height: 750px;
    }
}

@media (min-width: 1024px) {
    .hero__scene {
        margin-left: -12px;
        margin-right: -12px;
    }
}

.hero__img {
    position: absolute;
    max-width: 250px;
    bottom: 0;
}

@media (min-width: 576px) {
    .hero__img {
        max-width: 380px;
    }
}

@media (min-width: 1280px) {
    .hero__img {
        max-width: initial;
    }
}

.hero__img:first-of-type {
    display: none;
}

@media (min-width: 1280px) {
    .hero__img:first-of-type {
        display: block;
        z-index: 1;
        left: -225px;
    }
}

.hero__img:nth-of-type(2) {
    z-index: 2;
    left: -50px;
}

@media (min-width: 1280px) {
    .hero__img:nth-of-type(2) {
        left: 140px;
    }
}

.hero__video {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 250px;
}

@media (min-width: 576px) {
    .hero__video {
        width: 418px;
    }
}

@media (min-width: 1280px) {
    .hero__video {
        width: 460px;
    }
}

.hero__video img {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
}

@media (min-width: 576px) {
    .hero__video img {
        top: -20px;
    }
}

.hero__video video {
    width: 230px;
    
}

@media (min-width: 576px) {
    .hero__video video {
        width: 365px;
    }
}

@media (min-width: 1280px) {
    .hero__video video {
        width: 405px;
    }
}

.hero__img:nth-of-type(4) {
    z-index: 2;
    right: -50px;
}

@media (min-width: 1280px) {
    .hero__img:nth-of-type(4) {
        right: 140px;
    }
}

.hero__img:last-of-type {
    display: none;
}

@media (min-width: 1280px) {
    .hero__img:last-of-type {
        display: block;
        z-index: 1;
        right: -225px;
    }
}

.synergy-app__info {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__info {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__info {
        padding: 60px 0;
    }
}

.info__text {
    width: calc(100% - 16px);
    margin: 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .info__text {
        width: calc(66.6666% - 24px);
        margin-left: auto;
        margin-right: 12px;
        font-size: 32px;
    }
}

@media (min-width: 1600px) {
    .info__text {
        font-size: 40px;
    }
}


.info__text span {
    background-image: linear-gradient(109deg, #bcd161 0%, #fade60 39%, #f3a663 64%, #c64f80 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient 10s linear infinite;
}

.synergy-app__scene {
    height: 700px;
    margin-top: -360px;
    margin-bottom: -40px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .synergy-app__scene {
        height: 1100px;
        margin-top: -300px;
        margin-bottom: -70px;
    }
}

@media (min-width: 1600px) {
    .synergy-app__scene {
        margin-top: -440px;
        margin-bottom: -50px;
    }
}

.scene__tel {
    position: absolute;
    max-width: 300px;
}

@media (min-width: 1600px) {
    .scene__tel {
        max-width: initial;
    }
}

.scene__decor {
    position: absolute;
    z-index: -1;
    top: calc(50% - 250px);
    left: calc(50% - 250px);
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background-image: linear-gradient(109deg, #bcd161 0%, #fade60 39%, #f3a663 64%, #c64f80 100%);
    background-size: 400% 400%;
    animation: gradient 10s linear infinite;
}


@media (min-width: 1600px) {
    .scene__decor {
        top: calc(50% - 320px);
        left: calc(50% - 320px);
        width: 640px;
        height: 640px;
    }
}

.scene__img {
   display: none;
}

@media (min-width: 1024px) {
    .scene__img {
        position: absolute;
        z-index: -1;
        display: block;
    }
}

.synergy-app__development {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__development {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__development {
        padding: 60px 0;
    }
}

.development__title {
    width: calc(100% - 16px);
    margin: 0 8px 24px;
}

@media (min-width: 1024px) {
    .development__title {
        width: calc(100% - 24px);
        margin: 0 12px 40px;
    }
}

.development__list {
    display: flex;
    flex-wrap: wrap;
}

.development__item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .development__item {
        flex-wrap: nowrap;
        align-items: center;
    }
}

@media (min-width: 1600px) {
    .development__item {
        margin-bottom: 40px;
    }
}

.development__item:last-of-type {
    margin-bottom: 0;
}

.development__info {
    width: calc(100% - 16px);
    margin: 0 8px 16px;
}

@media (min-width: 1024px) {
    .development__info {
        position: relative;
        width: calc(33.3333% - 24px);
        margin: 0 12px;
        padding-left: 48px;
    }
}

.development__num {
    font-size: 24px;
    font-weight: 700;
    -webkit-text-stroke: 0.5px #ff6e5b;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .development__num {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.development__caption {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .development__caption {
        margin-bottom: 16px;
        font-size: 24px;
    }
}

.development__text {
    margin: 0;
}

.development__media {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - 16px);
    margin-left: auto;
    margin-right: 8px;
}

@media (min-width: 1024px) {
    .development__media {
        width: calc(58.3333% - 24px);
        margin-right: 12px;
    }
}

.development__design {
    width: calc(33.333% - 8px);
    border-radius: 8px;
    overflow: hidden;
}

.development__design_1 {
    margin-top: 20px;
}

.development__design_2 {
    margin-top: 120px;
}

.development__design_3 {

}

.development__instrument {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(25% - 8px);
    height: 80px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.04);
}

@media (min-width: 576px) {
    .development__instrument {
        height: 120px;
    }
}

@media (min-width: 1280px) {
    .development__instrument {
        height: 160px;
    }
}

@media (min-width: 1600px) {
    .development__instrument {
        width: 180px;
        height: 180px;
    }
}

.development__instrument img {
    max-width: 90%;
}

@media (min-width: 1024px) {
    .development__instrument img {
        max-width: 100%;
    }
}


.development__instrument_1, .development__instrument_2, .development__instrument_3, .development__instrument_4 {
    margin-bottom: 24px;
}

.development__instrument_1, .development__instrument_3 {
    margin-top: 24px;
}

.development__instrument_4 {
    margin-top: 48px;
}

.development__instrument_5, .development__instrument_7 {
    margin-top: -24px;
}

.development__instrument_6 {
    margin-top: -48px;
}

.development__test {
    max-width: calc(50% - 10px);
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .development__test {
        max-width: 250px;
    }
}

@media (min-width: 1280px) {
    .development__test {
        max-width: 330px;
    }
}

.development__test_1 {

}

.development__test_1 video {
    width: 100%;
}

.development__test_2 {
    max-width: calc(40% - 8px);
}

@media (min-width: 1024px) {
    .development__test_2 {
        max-width: 250px;
    }
}

@media (min-width: 1280px) {
    .development__test_2 {
        max-width: 330px;
    }
}

.development__test_3 {
    max-width: calc(50% - 8px);
    margin-top: -23%;
    margin-left: auto;
}

@media (min-width: 1024px) {
    .development__test_3 {
        max-width: 300px;
        margin-top: -100px;
    }
}

@media (min-width: 1280px) {
    .development__test_3 {
        max-width: 450px;
        margin-top: -130px;
    }
}

.synergy-app__catalog {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__catalog {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__catalog {
        padding: 60px 0;
    }
}

.example__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
}

@media (min-width: 1024px) {
    .example__inner {
        margin-left: -12px;
        margin-right: -12px;
    }
}

.example__info {
    position: relative;
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
}

@media (min-width: 1024px) {
    .example__info {
        width: calc(50% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}

.example__text {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}

@media (min-width: 1024px) {
    .example__text {
        font-size: 20px;
    }
}

@media (min-width: 1600px) {
    .example__text {
        font-size: 24px;
    }
}

.example__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 16px 0;
}

@media (min-width: 1024px) {
    .example__media {
        width: calc(50% - 24px);
        margin: 0 12px;
        padding: 32px 0;
    }
}

.example__media img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 250px;
}

@media (min-width: 1024px) {
    .example__media img  {
        max-width: 350px;
    }
}

@media (min-width: 1600px) {
    .example__media img {
        max-width: 480px;
    }
}

.example__media video {
    max-width: 220px;
}

@media (min-width: 1024px) {
    .example__media video  {
        max-width: 310px;
        
    }
}

@media (min-width: 1600px) {
    .example__media video  {
        max-width: 420px;
    }
}

.catalog__info {

}

@media (min-width: 1024px) {
    .catalog__info {
        order: 2;
    }
}

.catalog__media {
    
}

@media (min-width: 1024px) {
    .catalog__media {
        order: 1;
    }
}

.synergy-app__order {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__order {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__order {
        padding: 60px 0;
    }
}

.order__info {
    padding-bottom: 100px;
}

@media (min-width: 1024px) {
    .order__info {
        padding-bottom: 0;
    }
}

.order__decor {
    position: absolute;
    z-index: 1;
    bottom: -20px;
    right: 20%;
    max-width: 210px;
}

@media (min-width: 1024px) {
    .order__decor {
        max-width: initial;
        bottom: -200px;
        right: -120px;
    }
}

@media (min-width: 1600px) {
    .order__decor {
        bottom: -300px;
    }
}

.order__arrow {
    position: absolute;
    bottom: -60px;
    right: 18%;
    max-width: 200px;
    z-index: 1;
}

@media (min-width: 1024px) {
    .order__arrow {
        max-width: initial;
        bottom: -270px;
        right: -150px;
    } 
}

@media (min-width: 1600px) {
    .order__arrow {
        bottom: -370px;
    }
}

.order__line {
    stroke-dasharray: 610;
    stroke-dashoffset: 610;
}

.order__line_1 {

}

.order__line_2 {

}

.order__line_3 {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
}

.order__line_4 {

}

.order__line_1.animation {
    animation: strokeSynergy 1s linear 0.2s forwards;
}

.order__line_2.animation {
    animation: strokeSynergy 1s linear 0.5s forwards;
}

.order__line_3.animation {
    animation: strokeSynergy 1s linear 0.8s forwards;
}

.order__line_4.animation {
    animation: strokeSynergy 0.5s linear 1.5s forwards;
}

@keyframes strokeSynergy {
    to {
        stroke-dashoffset: 0;
    }
}

.synergy-app__add {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__add {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__add {
        padding: 60px 0;
    }
}

.add__info {

}

@media (min-width: 1024px) {
    .add__info {
        order: 2;
    }
}

.add__media {
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .add__media {
        order: 1;
    }
}

.add__media img {
    position: static;
    transform: none;
}

.synergy-app__loyalty {
    padding: 32px 0;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .synergy-app__loyalty {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__loyalty {
        padding: 60px 0;
    }
}

.loyalty__inner {
    position: relative;
    padding-bottom: 150px;
}

@media (min-width: 1024px) {
    .loyalty__inner {
        padding-bottom: 200px;
    }
}

@media (min-width: 1280px) {
    .loyalty__inner {
        padding-bottom: 800px;
    }
}
@media (min-width: 1600px) {
    .loyalty__inner {
        padding-bottom: 1160px;
    }
}

.loyalty__info {
    
}

@media (min-width: 1024px) {
    .loyalty__info {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media (min-width: 1280px) {
    .loyalty__info {
        width: calc(50% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}

.loyalty__img {
    position: absolute;
    z-index: 1;
    max-width: 450px;
}

@media (max-width: 1535px) {
    .loyalty__img {
        max-width: 300px;
    }
}

@media (max-width: 1279px) {
    .loyalty__img {
        position: relative;
        transform: none !important;
    }
}

.loyalty__img_1 {
    margin: 16px 8px;
}

@media (min-width: 1280px) {
    .loyalty__img_1 {
        top: 0;
        right: 0;
        margin: 0;
    }
}

.loyalty__img_2 {
    margin: 16px 8px 16px auto;
}

@media (min-width: 576px) {
    .loyalty__img_2 {
        margin-right: 8px;
    }
}

@media (min-width: 924px) {
    .loyalty__img_2 {
        margin-right: auto;
    }
}

@media (min-width: 1280px) {
    .loyalty__img_2 {
        bottom: 100px;
        left: 0;
        margin: 0;
    }
}

@media (min-width: 1600px) {
    .loyalty__img_2 {
        left: -120px;
    }
}

.loyalty__img_3 {
    bottom: 0;
    left: 0;
}

@media (min-width: 576px) {
    .loyalty__img_3 {
        margin-right: 8px;
    }
}

@media (min-width: 1280px) {
    .loyalty__img_3 {
        left: calc(50% - 150px - 60px);
    }
}

@media (min-width: 1600px) {
    .loyalty__img_3 {
        left: calc(50% - 225px - 60px);
    }
}

.loyalty__decor {
    position: absolute;
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 1024px) {
    .loyalty__decor {
        width: 100%;
    } 
}

.loyalty__decor_1 {
    top: 0;
}

@media (min-width: 1600px) {
    .loyalty__decor_1 {
        top: 72px;
    }
}

.loyalty__decor_2 {
    top: 100px;
}

@media (min-width: 1600px) {
    .loyalty__decor_2 {
        top: 202px;
    }
}

.loyalty__decor_3 {
    top: 130px;
}

@media (min-width: 1600px) {
    .loyalty__decor_3 {
        top: 229px;
    }
}

.loyalty__line {
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
}

.loyalty__line_1.animation {
    animation: strokeSynergy 0.5s linear 1s forwards;
}

.loyalty__line_2.animation {
    animation: strokeSynergy 0.5s linear 1.5s forwards;
}

.loyalty__line_3.animation {
    animation: strokeSynergy 0.5s linear 2s forwards;
}

.loyalty__logo {
    position: absolute;
    bottom: 60px;
}

@media (min-width: 1280px) {
    .loyalty__logo {
        bottom: 180px;
    }
}

.loyalty__logo img {
    max-width: unset;
}

.synergy-app__dark {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__dark {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__dark {
        padding: 60px 0;
    }
}

.dark__wrap {
    padding: 64px 0;
    background-color: #000000;
}
@media (min-width: 1024px) {
    .dark__wrap {
        padding: 100px 0;
    }
}

@media (min-width: 1600px) {
    .dark__wrap {
        padding: 120px 0;
    }
}

.dark__title, .dark__text {
    color: #ffffff;
}

.dark__media {
    overflow: hidden;
}

.dark__media video {
    max-width: 300px;
}

@media (min-width: 1024px) {
    .dark__media video {
        max-width: 400px;
    }
}

@media (min-width: 1600px) {
    .dark__media video {
        max-width: 751.68px;
        margin-left: 64px;
    }
}

.synergy-app__voice {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__voice {
        padding: 40px 0;
    }
}

@media (min-width: 1280px) {
    .synergy-app__voice {
        padding-bottom: 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__voice {
        padding-top: 60px;
    }
}

.voice__inner {
    position: relative;
}

@media (min-width: 1280px) {
    .voice__inner {
        padding-bottom: 720px;
    }
}

@media (min-width: 1600px) {
    .voice__inner {
        padding-bottom: 1040px;
    }
}

.voice__info {
    padding-top: 120px;
}

@media (min-width: 1024px) {
    .voice__info {
        margin-left: 50%;
        padding-top: 0;
    }
}

.voice__img {
    position: absolute;
    z-index: 1;
    max-width: 450px;
}

@media (max-width: 1535px) {
    .voice__img {
        max-width: 300px;
    }
}

@media (max-width: 1279px) {
    .voice__img {
        position: relative;
        transform: none !important;
    }
}

.voice__img_1 {
    margin: 0 8px;
    padding: 16px 0;
}

@media (min-width: 1280px) {
    .voice__img_1 {
        top: 185px;
        left: -120px;
        margin: 0;
        padding: 0;
    }
}

.voice__img_2 {
    bottom: 0;
    left: 0;
    margin: 0 8px 0 auto;
    padding: 16px 0;
}

@media (min-width: 576px) {
    .voice__img_2 {
        margin-right: 8px;
    }
}

@media (min-width: 1024px) {
    .voice__img_2 {
        margin-right: auto;
    }
}

@media (min-width: 1280px) {
    .voice__img_2 {
        left: calc(50% - 150px - 60px);
        margin: 0;
        padding: 0;
    }
}

@media (min-width: 1600px) {
    .voice__img_2 {
        left: calc(50% - 225px - 60px);
    }
}

.voice__img_3 {
    bottom: 0;
    right: 0;
    margin: 0 8px;
    padding: 16px 0;
}

@media (min-width: 1024px) {
    .voice__img_3 {
        margin-right: 16px 12px;
    }
}

@media (min-width: 1280px) {
    .voice__img_3 {
        bottom: 100px;
        right: 0;
        margin: 0;
        padding: 0;
    }
}

.voice__icon {
    position: absolute;
    top: 0px;
    left: 0;
    width: 120px;
    height: 120px;
}

@media (min-width: 1024px)  {
    .voice__icon {
        left: -256px;
        width: 188px;
        height: 188px;
    }
}

.synergy-app__color {
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .synergy-app__color {
        padding: 40px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__color {
        padding: 60px 0;
    }
}

.color__inner {
    background-color: #C5D875;
    transition: background-color 0.5s ease-in-out;
}

.synergy-app__details {
    padding-top: 32px;
}

@media (min-width: 1024px) {
    .synergy-app__details {
        padding-top: 100px;
    }
}

@media (min-width: 1600px) {
    .synergy-app__details {
        padding-top: 120px;
    }
}

.details__info {

}

@media (min-width: 1024px) {
    .details__info {
        margin-top: -210px;
    }
}

.details__icon {
    width: 165px;
    height: fit-content;
    margin-bottom: 16px;
}

@media (min-width: 1024px) {
    .details__icon {
        width: 265px;
        margin-bottom: 24px;
    }
}

.details__media {
    padding-bottom: 0;
}

.details__media img {
    position: static;
    transform: none;
}

.synergy-app__check {
    padding: 64px 0;
}


@media (min-width: 1024px) {
    .synergy-app__check {
        padding: 100px 0;
    }
}

@media (min-width: 1600px) {
    .synergy-app__check {
        padding: 120px 0;
    }
}

.check__info {

}

@media (min-width: 1024px) {
    .check__info {
        order: 2;
    }
}

.check__media {
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .check__media {
        order: 1;
    }
}

.check__media img {
    position: static;
    transform: none;
}

.synergy-app__additional {
    padding-top: 32px;
    margin-bottom: 0 !important;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .synergy-app__additional {
        padding-top: 40px;
    }
}

@media (min-width: 1600px) {
    .synergy-app__additional {
        padding-top: 60px;
    }
}

.additional__info {
    width: 100%;
}

.additional__title {
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    text-align: center;
}

@media (min-width: 1024px) {
    .additional__title {
        width: 692px;
        margin-left: auto;
        margin-right: auto;
    }
}

.additional__media {
    margin: 0 auto;
    background-color: #ff6e5b;
    overflow: hidden;
}

@media (max-width: 767px) {
    .additional__media {
        max-width: 100%;
        height: 300px !important;
    }
}

@media (max-width: 575px) {
    .additional__media {
        height: 500px !important;
    }
}

.additional__img {
    transform: rotate(40deg);
    max-width: 1920px;
}

@media (max-width: 1280px) {
    .additional__img {
        max-width: 200% !important;
    }
}