.steps__row {
    display: flex;
}

.steps__main-title {
    text-align: center;
    margin-bottom: 16px;
}

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

.steps__body-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.steps__body svg{
    position: absolute;
    top: -350px;
    left: -450px;
    z-index: -1;
}

.steps__title {
    margin-bottom: 24px;
}

.steps__btn {
    margin-top: 24px;
    min-width: 219px;
    display: block;
    width: fit-content;
}
.steps__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    
}

.steps__items svg{
    position: absolute;
    top: -250px;
    left: -350px;
    z-index: -1;
}

.middle-decor {
    display: none;
}

.items-left svg {
    display: none;
}

.items-left .middle-decor {
    display: block;
}

.steps__items .middle-decor {
    top: -50px;
    left: 150px;
}

.steps__item {
    display: flex;
    align-items: center;
}
.steps__item-number {
    border-radius: 50%;
    background: #14151B;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 54px;
    flex-shrink: 0;
    height: 54px;
    margin-right: -27px;
    position: relative;
}
.steps__item-text {
    border-radius: 60px;
    padding: 14px 14px 14px 44px;
    background: #fff;
    color: #05060E;
    width: 100%;
}

.steps__item-text p{
    color: #05060E;
    margin: 0;
}

.steps__btn-dn {
    display: none;
}

.steps__image {
    position: relative;
}

.steps__body img{
    border-radius: 20px;
}

.showSteps {
    width: 46px;
    height: 46px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
}

.hideSteps {
    width: 46px;
    height: 46px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    transform: rotate(180deg);
}

.showSteps, .hideSteps {
    display: none;
}
.steps__body {
    max-height: fit-content;
}


@media screen and (min-width: 992px){
    .steps__row {
        gap: 128px;
        align-items: center;
    }

    .steps__body-wrap {
        flex-basis: 630px;
    }

    .steps__items {
        flex-basis: 522px;
    }

    .steps__row.items-left .steps__body {
        flex-basis: 522px;
    }

    .steps__row.items-left .steps__items {
        flex-basis: 630px;
    }

    .steps__row.items-left {
        flex-direction: row-reverse;
    }

    .steps__image {
        margin-top: 60px;
    }

    .std-block-padding .steps__title {
        font-size: 20px;
    }

    .steps__main-text {
        margin-bottom: 62px;
    }
}

@media screen and (max-width: 991.98px){
    .steps__row {
        gap: 24px;
        flex-direction: column;
    }

    .steps__btn {
        display: none;
    }

    .steps__btn-dn {
        display: flex;
    }

    .steps__item-text {
        padding: 14px;
        border-radius: 20px;
    }

    .steps__item-number {
        display: none;
    }

    .steps__btn {
        margin: 0;
    }

    .steps__image {
        margin-top: 24px;
    }

    .steps-animation .steps__item:not(:first-child) {
        display: none;
    }

    .steps-animation .showSteps {
        display: block;
    }

    .std-block-padding .steps__title {
        font-size: 18px;
    }
}

@media screen and (max-width: 440px){
    .steps__btn {
        width: 100%;
        
    }
}

.steps__item:first-child {
    opacity: 1!important;
}

#toggleSteps {
    display: none;
}

.steps-animation #toggleSteps {
    display: block;
}

/* Стиль для показу елементів */
.steps-animation .steps__item.show-step {
    display: flex;
}

body .steps-animation .steps__item.opacity-step {
    opacity: 1!important;
    transition: opacity 0.5s;
}

/* Стиль для приховування елементів */
body .steps-animation .hide-step {
    opacity: 0;
    transition: opacity 0.5s;
    display: flex; /* Залишити display flex для анімації */
}

body .hideSteps {
    display: none;
    position: relative;
    z-index: 3;
}

body .steps-animation .showSteps {
    position: relative;
    z-index: 3;
}

body .steps-animation.items-show .hideSteps {
    display: block;
}

body .steps-animation.items-show .showSteps {
    display: none;
}