/* стили первой секции */

.sectinoOne {
    box-sizing: border-box;
    position: relative;
    height: 580px;
    margin: 0 auto;
    max-width: 1293px;
    width: 100%;
}

.sectinoOne * {
    font-family: "Ony One";
    font-weight: 400;
    letter-spacing: -2%;
    font-size: 29.3px;
    line-height: 100%;
}

.sectinoOne .front,
.sectinoOne .back {
    line-height: 100%;
}

.sectinoOne .front {
    z-index: 2;
    opacity: 0;
    /*color: red;*/
}

.sectinoOne .back {
    z-index: 0;
}

.sectinoOne .section {
    z-index: 1;
    position: absolute;
    /*height: 643.46px;*/
    height: 100%;
}

.sectinoOne .hiddenImg {
    opacity: 0;
}

.sectinoOne .hoverBackText {
    color: #000;
}

.sectinoOne p,
.sectinoOne h2 {
    margin: 0;
    cursor: default;
    width: 866px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #313332;
    transform: translate(-50%, -50%);
}

/* Сохраняем внешний вид */
.sectinoOne .front button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: default;
}

.sectinoOne #img-section-2 {
    width: 100%;
    position: relative;
    transition: opacity 0.8s ease;
}

.sectinoOne #img-section-2-1 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.sectinoOne #img-section-2-4 {
    position: absolute;
    top: 70px;
    left: 193px;
}

.sectinoOne #img-section-2-5 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 146px;
}

.sectinoOne #img-section-2-2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.sectinoOne #img-section-2-3 {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.sectinoOne #img-section-1 {
    width: fit-content;
    position: absolute;
    left: 49.5%;
    transition: opacity 0.8s ease;
    transform: translateX(-49.5%);
}

.sectinoOne #img-section-3 {
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 0.8s ease;
}

.sectinoOne #img-section-3 img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sectinoOne #img-section-1 img {
    height: 100%;
}

.sectinoOne .sectionBack {
    height: 100%;
}

/*@media (max-width: 1366px) {*/

/*    .sectinoOne {*/
/*        box-sizing: border-box;*/
/*        height: fit-content;*/
/*        width: 100%;*/
/*        margin: 16px auto 50px auto;*/
/*    }*/

/*    .sectinoOne p,*/
/*    .sectinoOne h1 {*/
/*        box-sizing: border-box;*/
/*        margin: 0 auto;*/
/*        width: 96%;*/
/*        padding: 0 18px;*/
/*        font-size: 16px;*/
/*        position: static;*/
/*        transform: none;*/
/*    }*/

/*.sectinoOne .sectionBack {*/
/*    display: none;*/
/*}*/
/*}*/

@media (max-width: 900px) {
    .sectinoOne {
        height: 430px;
    }


    .sectinoOne * {
        font-size: 20px;
    }

    .sectinoOne p,
    .sectinoOne h2 {
        width: 100%;
        max-width: 600px;
    }

    .sectinoOne .sectionBack img {
        transform: scale(.8);
    }

    .sectinoOne #img-section-3 img {
        width: 120px;
    }

    .sectinoOne #img-section-2 {
        /*opacity: 1 !important;  !!!! УБРАТЬ !!!! */
        width: 100%;
        position: relative;
        transition: opacity 0.8s ease;
    }

    .sectinoOne #img-section-2-1 {
        width: 110px;
    }

    .sectinoOne #img-section-2-4 {
        left: 113px;
        width: 160px;
    }

    .sectinoOne #img-section-2-5 {
        right: 100px;
        width: 160px;
    }

    .sectinoOne #img-section-2-2 {
        width: 130px;
    }

    .sectinoOne #img-section-2-3 {
        width: 100px;
    }
}

@media (max-width: 600px) {
    .sectinoOne {
        padding: 0 16px;
        height: auto;
        max-width: 380px;
    }

    .sectinoOne * {
        font-size: 16px;
    }

    .sectinoOne .sectionBack {
        display: none;
    }

    .sectinoOne p,
    .sectinoOne h2 {
        transform: none;
        position: relative;
        /* Можно оставить relative или сделать static */
        left: 0;
        top: 0;
        margin: 32px auto;
    }

    .sectinoOne .front {
        display: none;
    }
}

/* ============= */
/* секция с меню */
/* ============= */

.btn4-container {
    max-width: 1332px;
    margin: 20px auto;
    height: min(42.3vw, 550px);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

.btn4-grid {
    display: grid;
    gap: clamp(10px, 4vh, 80px);
    z-index: 100;
}

.btn4 {
    color: black;
    letter-spacing: 0%;
    line-height: 100%;
    /*font-size: clamp(16px, 2.2vh, 40px);*/
    /*font-size: 24px;*/
    font-size: min(24px, 2.04vw);
    text-decoration: none;
    font-family: "Ony One";
    font-weight: 500;
    transition: color 0.4s ease-in-out;
}

.btn4-group1,
.btn4-group2,
.btn4-group3,
.btn4-group4,
.btn4-group5 {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(100% - 32px);
    max-width: 1300px;
    margin: 0 auto;
    transition: opacity 0.75s ease-in-out;
}

/*.btn4-group1{*/
/*    opacity: 0*/
/*}*/

.btn4-group1 .btn4-photo1 {
    position: absolute;
    /*height: 65%;*/
    width: 18.3%;
    aspect-ratio: 210 / 315;
}

.btn4-group1 .btn4-photo2 {
    position: absolute;
    left: 20.5%;
    top: min(47.5%, 20.1vw);
    /*height: 42%;*/
    width: 10.6%;
    aspect-ratio: 151 / 252;
}

.btn4-group1 .btn4-photo3 {
    position: absolute;
    right: 25.5%;
    top: max(255px, min(58%, 24.53vw));
    /*height: 42%;*/
    width: 11.8%;
    aspect-ratio: 152 / 227;
}

.btn4-group1 .btn4-photo4 {
    position: absolute;
    right: 0;
    top: 12.5%;
    /*height: 57.5%;*/
    width: 24.46%;
    aspect-ratio: 268 / 266;
}

.btn4-group2 {
    opacity: 0;
}

.btn4-group2 .btn4-photo1 {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 15%;
    height: 55%;
    aspect-ratio: 270 / 280;
}

.btn4-group2 .btn4-grey1 {
    position: absolute;
    z-index: 1;
    left: 5%;
    top: 55%;
    height: 33%;
    aspect-ratio: 250 / 175;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group2 .btn4-photo2 {
    position: absolute;
    z-index: 2;
    left: 11%;
    top: 25%;
    height: 42.5%;
    aspect-ratio: 248 / 215;
}

.btn4-group2 .btn4-photo3 {
    position: absolute;
    z-index: 3;
    right: 7%;
    top: 30%;
    height: 75%;
    aspect-ratio: 284 / 425;
}

.btn4-group2 .btn4-photo4 {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 7.5%;
    height: 75%;
    aspect-ratio: 325 / 433;
}

.btn4-group3 {
    opacity: 0;
}

.btn4-group3 .btn4-photo1 {
    position: absolute;
    z-index: 3;
    left: 4.45%;
    top: 34%;
    height: 48.5%;
    aspect-ratio: 213 / 267;
}

.btn4-group3 .btn4-grey1 {
    position: absolute;
    z-index: 2;
    left: 9%;
    top: 54%;
    height: 34%;
    aspect-ratio: 267 / 187;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group3 .btn4-photo2 {
    position: absolute;
    z-index: 1;
    left: 9%;
    top: 16%;
    height: 57%;
    aspect-ratio: 235 / 313;
}

.btn4-group3 .btn4-photo3 {
    position: absolute;
    z-index: 3;
    right: 5%;
    top: 22%;
    height: 62%;
    aspect-ratio: 320 / 340;
}

.btn4-group3 .btn4-grey2 {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 15%;
    height: 36%;
    aspect-ratio: 282 / 197;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group4 {
    opacity: 0;
}

.btn4-group4 .btn4-photo1 {
    position: absolute;
    z-index: 1;
    left: 1.9%;
    top: 10.7%;
    height: 61.2%;
    aspect-ratio: 289 / 336;
}

.btn4-group4 .btn4-grey1 {
    position: absolute;
    z-index: 2;
    left: 3.5%;
    top: 52%;
    height: 36%;
    aspect-ratio: 281 / 197;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group4 .btn4-photo2 {
    position: absolute;
    z-index: 3;
    left: 14%;
    top: 20%;
    height: 57%;
    aspect-ratio: 223 / 312;
}

.btn4-group4 .btn4-photo3 {
    position: absolute;
    z-index: 3;
    right: 6.5%;
    top: 15%;
    height: 62%;
    aspect-ratio: 320 / 340;
}

.btn4-group4 .btn4-grey2 {
    position: absolute;
    z-index: 2;
    right: 2%;
    top: 7%;
    height: 35.8%;
    aspect-ratio: 282 / 197;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group5 {
    opacity: 0;
}

.btn4-group5 .btn4-photo1 {
    position: absolute;
    z-index: 1;
    left: 1.92%;
    top: 10.6%;
    height: 60%;
    aspect-ratio: 289 / 336;
}

.btn4-group5 .btn4-photo2 {
    position: absolute;
    z-index: 3;
    left: 9.5%;
    top: 31.5%;
    height: 66.5%;
    aspect-ratio: 249 / 332;
}

.btn4-group5 .btn4-photo3 {
    position: absolute;
    z-index: 3;
    right: 12%;
    top: 25%;
    height: 45%;
    aspect-ratio: 199 / 247;
}

.btn4-group5 .btn4-grey1 {
    position: absolute;
    z-index: 2;
    right: 4.5%;
    top: 47%;
    height: 32.7%;
    aspect-ratio: 257 / 180;

    background-color: #C4C4C4;
    opacity: 0.8;
}

.btn4-group5 .btn4-photo4 {
    position: absolute;
    z-index: 1;
    right: 2.5%;
    top: 4%;
    height: 60.7%;
    aspect-ratio: 250 / 334;
}

@media (hover: hover) {
    .btn4:hover {
        color: #AD83FF;
    }

    .btn4-grid:has(.btn4:hover) .btn4:not(:hover) {
        color: #D9D9D9;
    }
}

@media (min-width: 600px) and (hover: hover) {
    .btn4-container:has(.btn4:hover) .btn4-group1 {
        opacity: 0;
    }

    .btn4-container:has(.btn4-first:hover) .btn4-group2 {
        opacity: 1.0;
    }

    .btn4-container:has(.btn4-second:hover) .btn4-group3 {
        opacity: 1.0;
    }

    .btn4-container:has(.btn4-third:hover) .btn4-group4 {
        opacity: 1.0;
    }

    .btn4-container:has(.btn4-fourth:hover) .btn4-group5 {
        opacity: 1.0;
    }
}

@media (max-width: 1000px) {
    .btn4-container {
        height: 57vw;
    }

    .btn4-grid {
        gap: 40px;
    }

    .btn4 {
        /*font-size: 18px;*/
        font-size: clamp(14px, 2.41vw, 24px);
    }

    .btn4-group1 {
        opacity: 1;
        /* УБРАТЬ УБРАТЬ УБРАТЬ*/
    }

    .btn4-group1 .btn4-photo1 {
        width: 15.5%;
        top: 10%;
    }

    .btn4-group1 .btn4-photo2 {
        left: 16.5%;
        top: 42%;
        width: 11.3%;
        aspect-ratio: 2/3
    }

    .btn4-group1 .btn4-photo3 {
        width: 15.5%;
        top: 55%;
    }

    .btn4-group1 .btn4-photo4 {
        top: 6%;
        width: 28%;
    }

    .btn4-group2 .btn4-photo1 {
        top: 27%;
        height: 34%;
    }

    .btn4-group2 .btn4-grey1 {
        left: 4%;
        top: 50%;
        height: 21.8%;
        aspect-ratio: 128 / 93;
    }

    .btn4-group2 .btn4-photo2 {
        left: 9%;
        top: 34%;
        height: 26.7%;
        aspect-ratio: 128 / 110;
    }

    .btn4-group2 .btn4-photo3 {
        top: 27%;
        height: 53%;
        aspect-ratio: 146 / 218;
    }

    .btn4-group2 .btn4-photo4 {
        top: 11.5%;
        height: 54%;
        aspect-ratio: 167 / 222;
    }

    .btn4-group3 .btn4-photo1 {
        top: 37%;
        left: 0;
        height: 39.3%;
    }

    .btn4-group3 .btn4-grey1 {
        height: 27.4%;
        left: 4.5%;
        aspect-ratio: 163 / 113;
    }

    .btn4-group3 .btn4-photo2 {
        left: 4.5%;
        top: 22%;
        height: 46%;
        aspect-ratio: 143 / 190;
    }

    .btn4-group3 .btn4-photo3 {
        top: 32%;
        height: 43%;
    }

    .btn4-group3 .btn4-grey2 {
        top: 28%;
        height: 24.75%;
        aspect-ratio: 147 / 102;
    }


    .btn4-group4 .btn4-photo1 {
        left: 0;
        top: 19%;
        height: 45%;
        aspect-ratio: 182 / 212;
    }

    .btn4-group4 .btn4-grey1 {
        left: 2%;
        top: 51%;
        height: 22%;
        aspect-ratio: 177 / 124;

        background-color: #C4C4C4;
        opacity: 0.8;
    }

    .btn4-group4 .btn4-photo2 {
        left: 11%;
        top: 25%;
        height: 43%;
    }

    .btn4-group4 .btn4-photo3 {
        right: 4%;
        top: 15%;
        height: 44%;
    }

    .btn4-group4 .btn4-grey2 {
        /*top: 25%;*/
        height: 47.8%;
        aspect-ratio: 151 / 197;
    }


    .btn4-group5 .btn4-photo1 {
        left: 0;
        height: 39%;
        aspect-ratio: 134 / 179;
    }

    .btn4-group5 .btn4-photo2 {
        left: 4.5%;
        top: 23.5%;
        height: 44.5%;
    }

    .btn4-group5 .btn4-photo3 {
        z-index: 3;
        right: 9.5%;
        height: 39%;
    }

    .btn4-group5 .btn4-grey1 {
        right: 2%;
        height: 25.7%;
    }

    .btn4-group5 .btn4-photo4 {
        right: 0;
        top: 10%;
        height: 51.7%;
    }
}

.btn4-photo1-mobile {
    display: none;
}

@media (max-width: 600px) {
    .btn4-photo1-mobile {
        display: block;
        aspect-ratio: 2/3;
        width: 101px;
    }

    /* .btn4 {
        /*background-color: rgba(66, 34, 35, 0.7);*/
    /*color: white;*/
    /*padding: 15px;*/
    /*border-radius: 22.5px;*/
    /* } */

    .btn4-container {
        gap: 16px;
        height: 170px;
        margin-bottom: 32px;
    }

    .btn4-grid {
        gap: 16px;
        width: 155px;
    }

    .btn4-grid a {
        font-size: 16px;
    }

    .btn4-group1,
    .btn4-group2,
    .btn4-group3,
    .btn4-group4,
    .btn4-group5 {
        display: none;
    }
}

/* >*.*<  >*.*<  >*.*<  >*.*<  >*.*<  >*.*< */
/* >*.*<  КАРУСЕЛЬ РЕЗУЛЬТАТЫ РАБОТЫ  =^.^= */
/* =^.^=  =^.^=  =^.^=  =^.^=  =^.^=  =^.^= */

.section_results_work {
    width: 100%;
    min-height: 300px;
    color: #313332;
    font-family: Ony One;
    margin: 80px auto 48px;
}

.section_results_work h2 {
    text-align: center;
    margin-bottom: 24px;
}

@media (min-width: 1000px) {

    .section_results_work {
        margin-bottom: 150px;
    }

    .section_results_work h2 {
        margin-bottom: 48px;
    }
}

.results_slider {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    cursor: grab;
    user-select: none;
    /* Запрещаем выделение текста внутри слайдера при драге */
    -webkit-user-select: none;
}


.results_slider:active {
    cursor: grabbing;
}

.results_slider_line {
    display: flex;
}

.slide {
    /*border: 1px solid red;*/
    height: 348px;
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-align: start;
}

.slide span {
    color: #D9D9D9;
    display: block;
    font-weight: 500;
    line-height: 95%;
}

.slide p {
    font-weight: 400;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: 0.04em;
    text-align: left;
}

/*.slide.st1,*/
/*.slide.st1_1,*/
/*.slide.st1_2,*/
/*.slide.st1_3 {*/
/*    width: 437px;*/
/*}*/

.slide.st2 {
    width: 492px;
}

.slide.st3_1 {
    width: 400px;
}

.slide.st3_1 p {
    margin-left: 50px;
    width: 70%;
}

.slide.st3_1 .num {
    margin-top: 60px;
    margin-left: 50px;
    font-size: 164px;
    line-height: 95%;
}

.slide.st3_1 .dim {
    margin-top: 10px;
    font-size: 60px;
    line-height: 95%;
    text-align: right;
}

.slide.st3_2 {
    width: 500px;
}

.slide.st3_2 .dim {
    font-size: 60px;
    line-height: 95%;
    position: relative;
    top: -3px;
    left: -3px;
}


.slide.st3_2 .num {
    margin-left: 76px;
    font-size: 119px;
    line-height: 95%;
}

.slide.st3_2 p {
    margin-left: 150px;
    margin-top: 40px;
    width: 65%;
}


.slide.st3_3 {
    width: 500px;
}

.slide.st3_3 p {
    margin-left: 20px;
    width: 30%;
    margin-top: 0;
}

.slide.st3_3 .dim {
    font-size: 60px;
    line-height: 95%;
    margin-left: 47px;
    margin-top: 57px;
}


.slide.st3_3 .num {
    margin-left: 47px;
    margin-top: 13px;
    font-size: 209px;
    line-height: 95%;
}




.slide.st2 p {
    margin-left: 90px;
    width: 62%;
    margin-top: -10px;
}

.slide.st2 .num {
    font-size: 209px;
    line-height: 95%;
    position: relative;
    bottom: 26px;
    left: -18px;
}

.slide.st2.shorter {
    width: 307px;
}

.slide.st2.shorter p {
    text-align: right;
}

.slide.st1.shorter {
    width: 403px;
}

.slide.st1.shorter p {
    width: 100%;
}

.slide.st1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
}

.slide.st1 p {
    margin: 0;
    margin-left: 30px;
    width: 55%;
}

.slide.st1:last-of-type p {
    margin: 0;
    margin-left: 67px;
    width: 60%;
}

.slide.st1 .num {
    font-size: 209px;
    line-height: 95%;
    position: relative;
    top: 40px;
    left: -6px;
}


.ml75 {
    margin-left: 75px !important;
}


.slide.st1_1 {
    --width: 437px;
    --p-width: 90%;
    --num-top: -28px;
    --num-left: -24px;
    --text-margin-left: 87px;
}

.slide.st1_2 {
    --width: 307px;
    --p-width: 90%;
    --num-top: 150px;
    --num-left: -24px;
    --p-top: 0;
    --text-margin-left: 95px;
}

.slide.st1_3 {
    --width: 437px;
    --p-width: 90%;
    --num-top: -28px;
    --num-left: -24px;
    --text-margin-left: 93px;
}

.slide.st1_4 {
    --width: 445px;
    --p-width: 70%;
    --num-top: 150px;
    --num-left: -24px;
    --p-top: 0;
    --text-margin-left: 95px;
}

.slide.st1_1 .num,
.slide.st1_2 .num,
.slide.st1_3 .num,
.slide.st1_4 .num {
    font-size: 209px;
    position: relative;
    top: var(--num-top, 0);
    left: var(--num-left, 0);
    width: var(--width, 0);
}

.slide.st1_1 p,
.slide.st1_2 p,
.slide.st1_3 p,
.slide.st1_4 p {
    width: var(--p-width);
    margin-top: var(--p-top, 0);
    margin-left: var(--text-margin-left);
}


/* 
.slide.st1_1 .num {
    font-size: 209px;
    text-align: right;
    position: relative;
    top: 64px;
    left: 36px;
}


.slide.st1_1 p {
    margin-top: 66px;
}

.slide.st1_2 .num {
    font-size: 209px;
    text-align: right;
    position: relative;
    top: 44px;
    left: 34px;
}

.slide.st1_2 p {
    margin-top: 86px;
}

.slide.st1_3 .num {
    font-size: 209px;
    text-align: right;
    position: relative;
    top: 24px;
    left: 34px;
}

.slide.st1_3 p {
    margin-top: 106px;
} */


@media(max-width: 600px) {

    .section_results_work {
        margin: 48px 0;
        min-height: 0;
    }

    .section_results_work h2 {
        font-size: 18px;
        line-height: 115%;
        margin-bottom: 24px;
    }

    .results_slider_line {
        gap: 24px;
    }

    .slide {
        height: auto;
    }

    .slide p {
        font-size: 16px;
        letter-spacing: 0;
    }

    .ml75 {
        margin-left: 60px !important;
    }

    .slide span {
        font-size: 128px;
    }

    .slide.st1,
    .slide.st1_1,
    .slide.st1_2,
    .slide.st1_3,
    .slide.st2 {
        width: auto;
        padding: 0;
    }

    .slide.st1_1 p,
    .slide.st1_2 p,
    .slide.st1_3 p {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }

    .slide.st1_1 {
        width: 205px;
    }

    .slide.st1_2 {
        width: 191px;
    }

    .tar {
        text-align: left;
    }

    .slide.st1_3 {
        width: 264px;
    }

    .slide.st1_3.mobile_w150 {
        width: 150px;
    }

    .slide.st1_1 .num,
    .slide.st1_2 .num,
    .slide.st1_3 .num,
    .slide.st3_3 .num,
    .slide.st1_4 .num {
        text-align: left;
        top: 0;
        left: 0;
        font-size: 128px;
    }

    .slide.st3_1 {
        width: 328px;
        padding-left: 45px;
    }

    .slide.st3_1 p {
        margin-left: 0;
        margin-top: 0;
        width: 95%;
        text-align: left;
    }

    .slide.st3_1 .num {
        margin: 0;
        text-align: right;
        font-size: 96px;
        position: relative;
        top: -30px;
        left: -20px;
    }

    .slide.st3_1 .dim {
        margin: 0;
        text-align: right;
        font-size: 60px;
        position: relative;
        top: -30px;
        left: -20px;
    }

    .slide.st3_2 {
        width: 400px;
        margin-right: 24px;
    }

    .slide.st3_2 .dim {
        font-size: 60px;
        line-height: 95%;
        position: relative;
        top: -3px;
        left: -3px;
    }


    .slide.st3_2 .num {
        margin-left: 150px;
        font-size: 96px;
    }

    .slide.st3_2 p {
        margin-top: 10px;
        margin-left: 70px;
        width: 70%;
    }

    .slide.st3_3 {
        width: 400px;
    }

    .slide.st3_3 p {
        margin: 0 0 8px 0;
    }

    .slide.st3_3 .dim {
        margin-left: 0;
        margin-top: 0;
    }

    .slide.st3_3 .num {
        margin-left: 0;
        margin-top: 0;
    }

    .fz18 {
        font-size: 18px !important;
    }

    .w266 {
        width: 266px !important;
    }

    .slide.st2 {
        width: 303px;
    }

    .slide.st2.w273 {
        width: 273px;
    }

    .slide.st1.w224 {
        width: 224px;
    }

    .slide.st1.w224 p {
        width: 100%;
    }

    .tar {
        text-align: right !important;
    }

    .slide.st2 p {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .slide.st2 .num {
        font-size: 128px;
        bottom: 0;
        left: 0;
    }

    .slide.st1 {
        width: 290px;
        display: block;
    }

    .slide.st1 p {
        margin: 0;
        width: 75%;
    }

    .slide.st1:last-of-type p {
        margin-left: 0;
    }

    .slide.st1 .num {
        font-size: 128px;
        position: relative;
        top: 0;
        left: 0;
    }

    .slide.st1.shorter {
        width: 282px;
    }

    .slide.st1_4 {
        --width: 320px;
        --p-width: 70%;
        --num-top: 0;
        --num-left: 0;
        --p-top: 0;
        --text-margin-left: 0;
    }

    .slide.st1_4 p {
        margin: 0;
    }


    .results_slider_line .st1:nth-child(2 of .st1) p {
        margin-left: 20%;
    }

    .results_slider_line .st1:nth-child(4 of .st1) {
        width: 270px;
    }

    .results_slider_line .st1:nth-child(4 of .st1) p {
        text-align: right !important;
        width: 100%;
    }
}


/* =========================================== */
/* === СТИЛИ СЛАЙДЕРА ГЛАВНОЙ ИУ ============= */
/* =========================================== */

:root {
    --base-timing-wins-animation: .7s;
}

.wins_gallery {
    padding: 0 16px;
}

.wins_slider_wrapper {
    position: relative;
    height: 600px;
    max-width: 1400px;
    margin: 0 auto;
}

.wins_slider_left_btn,
.wins_slider_right_btn {
    padding: 0;
    border: 0;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 20;
}

.wins_slider_left_btn {
    left: 0;
}

.wins_slider_right_btn {
    right: 0;
}

.wins_slider {
    width: 100%;
}

.wins_slider_line {
    display: flex;
    width: 100%;
    gap: 10px;
    position: relative;
}

.wins_slide {
    display: flex;
    max-width: calc(100% - 217px*2 - 32px*2);
    gap: 24px;
    /*border: 1px solid red;*/
    transition: opacity var(--base-timing-wins-animation) ease;
}

.wins_slide_text {
    font-family: ONY One, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 115%;
    display: none;
}

.wins_slide.current_slide .wins_slide_text {
    display: block;
    align-self: flex-start;
}


.wins_slide .wins_slide_image {
    height: 300px;
    /* max-width: 217px;
    height: 100vw;
    width: 100vw; */
    aspect-ratio: 2 / 3;
}

.wins_slide .wins_slide_image img {
    /*настройки для всех img дефолтные. Для текущего слайда - ниже*/
    /* max-height: 300px;
    max-width: 217px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    transition: opacity var(--base-timing-wins-animation) ease, transform var(--base-timing-wins-animation) ease;
}


/* === состояния слайдера === */

.wins_slide.used_slide,
.wins_slide.fresh_slide {
    position: absolute;
    pointer-events: none;
    top: 50px;
}

.wins_slide.used_slide {
    left: 0;
}

.wins_slide.fresh_slide {
    right: 0;
}

/* Второй слайд имеет особое положение */
.wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) {
    right: 250px;
    top: 300px;
}

/* Used-слайды после второго уезжают чуть левее */
/* .wins_slider_line .used_slide:nth-child(n+3 of .wins_slide) {
    left: -50px;
} */

/* третий и далее слайды пройденные имеют бОльшую картинку*/
/* .wins_slider_line .used_slide:nth-child(n+3 of .wins_slide) .wins_slide_image {
    max-width: 280px;
} */


.wins_slide.current_slide {
    width: 65vw;
    position: relative;
    left: 250px;
    z-index: 10;
    pointer-events: auto;
}

.wins_slider_line .current_slide:nth-child(1 of .wins_slide) {
    margin-left: 0;
    /*z-index: 21;*/
}


/* .wins_slider_line .current_slide:nth-child(n+4 of .wins_slide) {
    left: 330px;
    max-width: 55%;
} */

.wins_slider_line .wins_slide:last-child {
    max-width: 62%;
}


.wins_slider_line .current_slide:first-of-type {
    left: 0;
}

.wins_slider_line .current_slide .wins_slide_image {
    height: 600px;
}

/* === Сдвиг первого слайда на 100px правее, когда текущий - последний === */
/* .wins_slide.fresh_slide.is-wrap-offset {
    transform: translateX(100px);
} */

/* === Невидимые слайды (все, что вне "окна видимости") === */
.wins_slide.is_hidden {
    opacity: 0;
    pointer-events: none;
}

/* =========================================== */
/* === АНИМАЦИИ СЛАЙДЕРА ГЛАВНОЙ ИУ ========== */
/* =========================================== */

/* === призрак старого текста === */
.wins_slide_text.wins_text_ghost {
    display: block;
    position: absolute;
    margin: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--base-timing-wins-animation) ease;
}

.wins_text_ghost.is_fading {
    opacity: 0;
}

/* === призрак старой картинки === */
img.wins_img_ghost {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    opacity: 1;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    transition: opacity var(--base-timing-wins-animation) ease;
}

img.wins_img_ghost.is_fading {
    opacity: 0;
}

/* === новый текст === */
.wins_slide.anim-text-in .wins_slide_text {
    animation: textInRight var(--base-timing-wins-animation) ease both;
}

/* === картинка через opacity (для 2→3 вперёд и 3→2 назад) === */
.wins_slide.anim-img-fade-in .wins_slide_image img {
    animation: imgFadeIn var(--base-timing-wins-animation) ease both;
}

.wins_slide.anim-img-fade-out .wins_slide_image img {
    animation: imgFadeOut var(--base-timing-wins-animation) ease both;
}

@keyframes imgFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes imgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes textInRight {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================== */
/* === 1200–1400: резиновое текстовое поле === */
/* =========================================== */

@media (min-width: 1200px) and (max-width: 1400px) {
    .wins_slide.current_slide {
        /* ширина от контейнера: левый отступ + зона fresh справа, чтобы не пересекаться */
        width: calc(100% - 250px - 217px);
    }

    .wins_slide.current_slide .wins_slide_text {
        flex: 1 1 auto;
        /* текст тянется/сжимается по доступному месту */
        min-width: 0;
        /* разрешаем сжиматься меньше ширины контента */
    }

    .wins_slide.current_slide .wins_slide_image {
        flex-shrink: 1;
        /* картинка держит размер, резиновится только текст */
    }

    /* опционально: чуть ниже картинка — больше воздуха у текста */
    /* .wins_slider_line .current_slide .wins_slide_image img {
        width: 30vw;
    } */
}

/* =========================================== */
/* === ПЛАНШЕТЫ ============================== */
/* =========================================== */

@media (max-width: 1199px) {
    .wins_slider_wrapper {
        height: auto;
    }

    /* НИКАКИХ фейдов: всё мгновенно, работает только FLIP (scale/translate) */
    .wins_slide {
        transition: none;
        max-width: none;
    }

    .wins_slide:nth-of-type(n+2) .wins_slide_text {
        padding-right: 3vw;
    }

    /* .wins_slide.anim-img-fade-in .wins_slide_image img,
    .wins_slide.anim-img-fade-out .wins_slide_image img,
    .wins_slide.anim-text-in .wins_slide_text {
        animation: none;
    } */

    .wins_text_ghost {
        display: none !important;
    }

    /* 2-й слайд — в обычной правой позиции, без десктопной "серединной" */
    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) {
        right: 0;
        top: 20vw;
    }

    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) .wins_slide_image {
        height: 24.1vw;
    }

    /* не оттягиваем used влево и не увеличиваем их */
    .wins_slider_line .used_slide:nth-child(n+3 of .wins_slide) {
        left: 0;
    }

    .wins_slider_line .used_slide:nth-child(n of .wins_slide) .wins_slide_image {
        max-width: 18vw;
    }

    /* текущий: со 2-го и далее — вся ширина минус левая зона */
    .wins_slide.current_slide {
        width: calc(100% - 24vw);
        left: 20vw;
    }

    .wins_slider_line .current_slide:nth-child(n+4 of .wins_slide) {
        left: 20vw;
        max-width: none;
    }

    /* первый текущий — как на ПК: без элементов слева, справа только следующий */
    .wins_slider_line .current_slide:first-of-type {
        left: 0;
        width: 76vw;
    }



    .wins_slider_line .current_slide .wins_slide_image {
        max-height: 49vw;
        /* width: 100vw;
        max-width: 45vw;
        width: auto; */
    }

    .wins_slide.current_slide .wins_slide_text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .wins_slide.is_hidden {
        opacity: 0;
        pointer-events: none;
        /* animation: imgFadeOut var(--base-timing-wins-animation) ease both; */
    }
}

@media (max-width: 800px) {

    .wins_slide.current_slide {
        width: calc(100% - 28vw);
        left: 20vw;
    }

    .wins_slider_line .current_slide .wins_slide_image {
        height: 33.4vw;
        max-height: none;
    }

    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) {
        top: 7vw;
    }

    .wins_slider_line .used_slide .wins_slide_image,
    .wins_slider_line .fresh_slide .wins_slide_image {
        height: 24.2vw;
    }
}

/* ======================================== */
/* ===== СТИЛИ МОБИЛЬНОЙ ВЕРСИИ =========== */
/* ======================================== */

/* Кастомная пагинация */
.wins_slider_wrapper .paginator {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    gap: 6px;
    margin: 10px auto 20px;
    justify-content: center;
    display: none;
}


.wins_slider_wrapper .paginator_dot {
    width: max(.7vw, 10px);
    height: max(.7vw, 10px);
    background-color: #ECECEC;
    opacity: 1;
    transition: all 0.3s;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.wins_slider_wrapper .paginator_dot.active {
    background-color: #AD83FF;
    /* Цвет активной точки */
}

@media(max-width: 600px) {

    .wins_text_ghost,
    .wins_img_ghost {
        display: none !important;
    }

    .wins_slider_wrapper .paginator {
        display: flex;
    }

    .wins_slider_wrapper {
        height: auto;
        padding-bottom: 48px;
        /* место под точки */
    }

    .wins_slider_left_btn,
    .wins_slider_right_btn {
        display: none;
    }

    .wins_slider_line {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        /* отдельный слой: Safari на iOS не перерисовывает ленту кусками при прокрутке страницы */
        transform: translateZ(0);
    }

    .wins_slider_line::-webkit-scrollbar {
        display: none;
    }

    /* пустое место после последнего слайда: без него крайний правый слайд
       не может встать к левому краю, и прокрутка по кругу на нём не срабатывает */
    .wins_slider_line::after {
        content: "";
        flex: 0 0 calc(18% - 16px);
    }

    .wins_slider_line .wins_slide,
    .wins_slider_line .wins_slide.used_slide,
    .wins_slider_line .wins_slide.fresh_slide,
    .wins_slider_line .wins_slide.current_slide,
    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide),
    .wins_slider_line .used_slide:nth-child(n+3 of .wins_slide),
    .wins_slider_line .current_slide:first-of-type,
    .wins_slider_line .wins_slide:last-child,
    .wins_slider_line .current_slide:nth-child(1 of .wins_slide),
    .wins_slider_line .current_slide:nth-child(n+4 of .wins_slide) {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        margin: 0;
        width: auto;
        max-width: none;
        flex: 0 0 82%;
        /* 82% + peek следующего*/
        /* сбрасывает десктопные трансформации и выносит слайд на отдельный слой (против мигания в iOS Safari) */
        transform: translateZ(0);
        backface-visibility: hidden;
        opacity: 1;
        pointer-events: auto;
        z-index: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        /* не перескакивать через слайд при свайпе */
    }

    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) img {
        max-width: none;
    }

    .wins_slide.is_hidden {
        opacity: 1;
    }

    .wins_slide .wins_slide_image {
        flex-shrink: 0;
    }

    .wins_slide .wins_slide_image,
    .wins_slider_line .current_slide .wins_slide_image,
    .wins_slider_line .used_slide .wins_slide_image,
    .wins_slider_line .fresh_slide .wins_slide_image,
    .wins_slider_line .fresh_slide:nth-child(2 of .wins_slide) .wins_slide_image {
        height: 201px;
    }

    /* текст виден у всех слайдов */
    .wins_slide_text,
    .wins_slide.current_slide .wins_slide_text {
        display: block;
        align-self: flex-start;
        font-size: 16px;
    }

    /* НИКАКИХ фейдов/анимаций/призраков */
    .wins_slide,
    .wins_slide .wins_slide_image img,
    .wins_slide_text {
        transition: none;
        animation: none;
    }

    .wins_text_ghost,
    .wins_img_ghost {
        display: none !important;
    }
}

/* ------------------------------------------- */
/* ------ СТИЛИ для призыва к донату --------- */
/* ------------------------------------------- */

section.appeal_to_help {
    width: 100%;
    margin-top: 120px;
}

.appeal_to_help_wrapper {
    width: 100%;
    padding: 16px;
}

.appeal_to_help_grid {
    width: 100%;
    max-width: 1033px;
    display: grid;
    grid-template-columns: 35fr 65fr;
    column-gap: 36px;

    grid-template-areas:
        "ath-madam ath-right";

    margin: 0 auto;
}

.ath_madam {
    grid-area: ath-madam;
}

.ath_madam img {
    width: 100%;
    height: 100%;
    min-width: 350px;
    max-height: 508px;
    object-fit: contain;
}

.ath_right {
    grid-area: ath-right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ath_problem {
    grid-area: ath-problem;
}

.ath_problem h2 {
    font-family: ONY One;
    font-weight: 500;
    font-size: 24px;
    line-height: 115%;
    letter-spacing: 1%;
}

.ath_text {
    grid-area: ath-text;
}

.ath_text p {
    font-family: ONY One;
    font-weight: 400;
    font-size: 18px;
    line-height: 115%;
    letter-spacing: 0%;

}

.ath_appeal {
    grid-area: ath-appeal;
}

.ath_appeal p {
    font-family: ONY One;
    font-weight: 500;
    font-size: 24px;
    line-height: 115%;
    letter-spacing: 1%;
}

.ath_button {
    grid-area: ath-button;
    width: 195px;
    height: 48.5px;
}

.ath_button a {
    width: 100%;
    height: 100%;
    background-color: #AD83FF;
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: "Ony One";
    font-weight: 400;
}

@media (max-width: 900px) {
    section.appeal_to_help {
        margin-top: 24px;
    }

    .appeal_to_help_grid {
        grid-template-columns: 28fr 72fr;
        grid-template-areas:
            "ath-madam ath-problem"
            "ath-madam ath-text"
            "ath-appeal ath-appeal"
            "ath-button ath-button";
    }

    .ath_right {
        display: contents;
    }

    .ath_problem h2 {
        margin: 0;
    }

    .ath_text p {
        margin: 0;
    }

    .ath_madam img {
        min-width: 200px;
        max-height: 100000px;
    }

    .ath_appeal p {
        text-align: center;
    }

    .ath_button {
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    section.appeal_to_help {
        margin-top: 20px;
    }

    .appeal_to_help_grid {
        /*grid-template-columns: 1fr 2fr;*/
        grid-template-areas:
            "ath-madam ath-problem"
            "ath-text ath-text"
            "ath-appeal ath-appeal"
            "ath-button ath-button";
        gap: 6px;
    }

    .ath_madam img {
        max-width: 103px;
        min-width: 0;
        max-height: 100000px;
    }

    .ath_problem {
        display: flex;
        align-items: center;
    }

    .ath_problem h2 {
        font-size: 18px;
        margin: 0;
    }

    .ath_text p {
        font-size: 16px;
    }

    .ath_appeal p {
        font-size: 18px;
        width: 240px;
        margin: 0 auto 12px;
    }



    .ath_button {
        margin: 0 auto;
    }
}

/* ================================= */
/* ===== стили формы на главной ==== */
/* ================================= */

.section-form {
    box-sizing: border-box;
    /*padding: 0 16px;*/
    width: 100%;
    max-width: 570px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px auto 0;
}

.section-form h2 {
    font-size: 24px;
    margin-bottom: 0;
}

.section-form__description {
    text-align: center;
    font-size: 18px;
    line-height: 114.9%;
}

.section-form form input[type="text"],
.section-form form input[type="email"] {
    width: 100%;
    height: 51px;
    font-size: 18px;
    font-family: Ony One;
    padding-left: 20px;
    background-color: #F2F2F2;
    border: none;
    box-sizing: border-box;
}

.section-form form input[type="text"]::placeholder,
.section-form form input[type="email"]::placeholder {
    font-size: 18px;
    font-family: Ony One;
    color: #656973;
}

.section-form form .inputs-block {
    margin: 0 5.5px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 381px;
    margin: 0 auto;
}

.section-form form button {
    width: 192px;
    height: 60px;
    background-color: #422223;
    color: #fff;
    border: none;
    font-size: 18px;
    margin: 0 auto;
    font-weight: 500;
    font-family: Ony One;
}

.section-form form button:hover {
    background-color: #2D1011;
}

.section-form form button:active {
    background-color: #422223;
}

.section-form form .submit-components {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    gap: 16px;
}

.section-form form .submit-components:first-child {
    margin: 0 auto;
}

.section-form form .submit-components button {
    cursor: pointer;
}

.section-form form .line-form-component {
    display: flex;
    gap: 8px;
    align-items: center;
}

.section-form form .line-form-component label {
    font-size: 16px;
    white-space: pre-line;
    line-height: 114.9%;
    font-family: Ony One;
}

.section-form form .line-form-component label a {
    font-size: 16px;
    white-space: pre-line;
    line-height: 114.9%;
}

.section-form form .line-form-component input[type="checkbox"] {
    /*margin: 0;*/
    /*height: 24px;*/
    /*width: 24px;*/
    /*appearance: none;*/
    /*position: relative;*/
    /*background-color: #F2F2F2;*/
    /*cursor: pointer;*/

    appearance: none;
    width: 24px;
    height: auto;
    aspect-ratio: 1;
    flex: 0 0 auto;
    background-color: #F2F2F2;
    cursor: pointer;
    position: relative;
    place-content: center;
    margin-left: 0;
}

.section-form form .line-form-component input[type="checkbox"]:checked {
    background-color: var(--violet);
    background-image: url(/wp-content/themes/greenshift-child/assets/icons/check.svg);
    background-position: center;
    background-repeat: no-repeat;
}

/*.line-form-component input[type="checkbox"]:checked::after {*/
/*    content: "\2714";*/
/*    position: absolute;*/
/*    font-size: 24px;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -53%);*/
/*    overflow: hidden;*/
/*}*/

/* SEO + accessibility */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


@media (max-width: 600px) {

    .section-form form .line-form-component label,
    .line-form-component label a {
        font-size: 14px;
    }

    .section-form {
        padding: 0 16px;
    }

    .section-form h2 {
        font-size: 18px;
    }

    .section-form p {
        font-size: 16px;
    }

    .section-form form input[type="text"]::placeholder,
    .section-form form input[type="email"]::placeholder,
    .section-form form input[type="text"],
    .section-form form input[type="email"] {
        font-size: 16px;
    }

    .section-form form button {
        font-size: 16px;
    }

    .submit-components form .line-form-component:last-of-type label {
        line-height: 140%;
    }
    
    /* сбрасываем планшетное max-width: 18vw у used-слайда — иначе на телефоне его картинка сжата вдвое.
       Правило должно стоять ПОСЛЕ планшетного блока */
    .wins_slider_line .wins_slide:nth-child(n of .wins_slide) .wins_slide_image {
        max-width: none;
    }
}