#steps {
    background-color: #F7F7F7;
    margin-bottom: 60px;
}
#steps .container {
    --content-width: 1283px;
    position: relative;
    z-index: 3;
    padding-top: 50px;
    padding-bottom: 54px;
}

#steps .title {
    font-size: 46px;
    line-height: 1em;
}

#steps p {
    font-size: 16px;
    line-height: 24px;
}

#steps .subt {
    font-size: 30px;
    line-height: 1;
    margin-top: 19px;
    margin-bottom: 14px;
}

#steps .inner p {
    font-size: 22px;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 50px;
}
#steps ul {
    max-width: fit-content;
}
#steps ul li {
    position: relative;
    font-size: 16px;
    line-height: 20px
}
#steps ul li + li {
    margin-top: 11px;
}
#steps ul li:before {
    content: '';
    display: block;
    width: 13px;
    height: 11px;
    position: absolute;
    top: 1px;
    left: -20px;
    background-image: url('../../images/how-it-works/icon-checkmark.png');
    background-image: image-set(url('../../images/how-it-works/icon-checkmark.png') 1x, url('../../images/how-it-works/icon-checkmark@2x.png') 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

#steps .number {
    font-size: 50px;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--red);
    height: 85px;
    width: 85px;
    line-height: 85px;
    margin: 0 auto;
    position: relative;
}

#steps .number::after {
    content: '';
    position: absolute;
    background-image: url('../../images/how-it-works/steps-arrow.png');
    background-image: image-set(url('../../images/how-it-works/steps-arrow.png') 1x, url('../../images/how-it-works/steps-arrow@2x.png') 2x);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    width: min(314px, 22vw);
    height: 7px;
    top: 55%;
    left: 94px;
    transform: translateY(-50%);
}

#steps .swiper-slide:last-of-type .number:after {
    display: none;
}

#steps .button {
    margin-top: 40px;
    height: 38px;
    width: 192px;
    border-radius: 19px;
    line-height: 1;
    font-size: 1.25em;
}

#steps .swiper-button-prev {
    left: -7px;
}

#steps .swiper-button-next {
    right: -7px;
    transform: scale(-1);
}

#steps .swiper-button-next,
#steps .swiper-button-prev {
    background-image: url('../../images/how-it-works/swiper-arrow.png');
    background-image: image-set(url('../../images/how-it-works/swiper-arrow.png') 1x, url('../../images/how-it-works/swiper-arrow@2x.png') 2x);
    background-size: 8px 14px;
    background-position: center;
    background-repeat: no-repeat;
    width: 37.5px;
    height: 37.5px;
    border-radius: 50%;
    border: 1px solid var(--dark-gray);
    top: calc(50% + 39px);
}

#steps .swiper-button-next::after,
#steps .swiper-button-prev::after {
    display: none;
}

@media screen and (min-width: 992px) {

    #steps .swiper-button-prev,
    #steps .swiper-button-next {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    #steps .number::after {
        display: none;
    }
}

@media screen and (max-width: 567px) {
    #steps {
        padding-top: 0;
    }

    #steps .inner {
        margin-top: 0;
    }

    #steps .title {
        font-size: 36px;
        line-height: 1em;
        margin-bottom: 19px;
        margin-top: 0;
        text-transform: capitalize;
    }

    #steps p {
        font-size: 16px;
        line-height: 24px;
        margin: 10px auto 0 auto;
    }

    #steps p br {
        display: none;
    }

    #steps .number {
        margin-bottom: 29px;
    }

    #steps .swiper {
        margin-top: 43px;
    }

    #steps .desc {
        font-size: 14px;
        line-height: 19px;
    }

    #steps .swiper-cont {
        padding: 0 23px;
    }

    #steps .button {
        /*margin-top: 50px;*/
    }

    #steps .swiper-button-next,
    #steps .swiper-button-prev {
        width: 35px;
        height: 35px;
        top: 46px;
    }

    #steps .swiper-button-next {
        right: 0;
    }

    #steps .swiper-button-prev {
        left: 0;
    }
}