.main-banner {
    padding: var(--header-height) 0 40px;
    position: relative
}

@media (min-width: 760px) {
    .main-banner {
        padding: var(--header-height) 0 60px
    }
}

@media (min-width: 1200px) {
    .main-banner {
        padding: var(--header-height) 0 80px
    }
}

.main-banner__blob {
    position: absolute;
    pointer-events: none;
    max-width: 65vw
}

.main-banner__blob--left {
    top: 0;
    left: 0
}

.main-banner__blob--right {
    top: 200px;
    right: 0
}

.main-banner__content {
    text-align: center;
    width: 100%;
    max-width: 824px;
    margin: 0 auto;
    padding-top: 40px
}

.main-banner__title {
    color: var(--black)
}

.main-banner__title b, .main-banner__title span, .main-banner__title strong {
    color: var(--primary)
}

.main-banner__text {
    color: var(--gray);
    margin-top: 16px
}

.main-banner__text p {
    margin-bottom: 0
}

.main-banner__text p:not(:first-of-type) {
    margin-top: 16px
}

.main-banner__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px
}

@media (min-width: 760px) {
    .main-banner__content {
        padding-top: 60px
    }

    .main-banner__btns {
        margin-top: 32px;
        gap: 16px 24px
    }
}

.main-banner__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.main-banner__image-col {
    margin: 47px auto 11px;
    width: 100%;
    max-width: 1036px;
    position: relative
}

@media (min-width: 760px) {
    .main-banner__image-col {
        margin-top: 60px;
        margin-bottom: 23px
    }
}

@media (min-width: 1200px) {
    .main-banner__content {
        padding-top: 80px
    }

    .main-banner__image-col {
        margin-bottom: 15px
    }
}

.main-banner__image-wrapper {
    position: relative;
    padding-bottom: 45.934%;
    width: 100%;
    margin: 0 auto;
    -webkit-box-shadow: 0 12px 40px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, .08)
}

@media (min-width: 760px) {
    .main-banner__image-wrapper {
        padding-bottom: 38.753%;
        max-width: calc(100% - 108px)
    }
}

@media (min-width: 1200px) {
    .main-banner__image-wrapper {
        padding-bottom: 36.584%;
        max-width: calc(100% - 212px)
    }
}

.main-banner__image-text {
    position: absolute;
    z-index: 1;
    border-radius: 100px;
    font-size: 7px;
    line-height: var(--lh-default);
    font-weight: var(--fw-normal);
    -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08)
}

.main-banner__image-percent {
    color: var(--gray);
    background-color: var(--orange-100);
    top: -5%;
    right: 25%;
    padding: 4px 12px
}

@media (min-width: 760px) {
    .main-banner__image-text {
        font-size: var(--text-size-14)
    }

    .main-banner__image-percent {
        top: 17%;
        right: 0;
        padding: 8px 24px
    }
}

.main-banner__image-time {
    color: var(--gray);
    background-color: var(--purple-100);
    bottom: -7%;
    left: 3%;
    padding: 6px 12px
}

@media (min-width: 760px) {
    .main-banner__image-time {
        bottom: -8%;
        left: 0;
        padding: 12px 24px
    }
}

@media (min-width: 1200px) {
    .main-banner__image-percent {
        top: 24%;
        right: 2.5%
    }

    .main-banner__image-time {
        bottom: -3.5%;
        left: 2%
    }
}

.why-aps {
    background-color: var(--primary-100);
    position: relative
}

.why-aps__blob {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%
}

.why-aps__blob--left {
    top: 0;
    left: 0
}

.why-aps__blob--right {
    top: 0;
    right: 0
}

.why-aps .custom-slider-arrows {
    margin-top: 40px
}

.why-aps__head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 40px
}

@media (min-width: 1200px) {
    .why-aps .custom-slider-arrows {
        position: absolute;
        top: -96px;
        left: auto;
        right: 0;
        margin-top: 0
    }

    .why-aps .custom-slider-arrow {
        position: relative;
        top: 0;
        left: auto;
        right: 0;
        margin: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .why-aps__head {
        text-align: left;
        margin-bottom: 48px;
        padding-right: 116px
    }
}

.why-aps__title {
    color: var(--black)
}

.why-aps__title b, .why-aps__title span, .why-aps__title strong {
    color: var(--primary)
}

.why-aps__description {
    margin-top: 8px;
    color: var(--gray)
}

.why-aps__slider {
    overflow: visible
}

.why-aps__slider-wrapper {
    position: relative;
    z-index: 1
}

.why-aps__card {
    max-width: 330px
}

@media (min-width: 760px) {
    .why-aps__card {
        max-width: 466px
    }
}

.main-banner__blob--right {
    top: 0
}

@media (min-width: 1200px) {
    .main-banner__content {
        max-width: 1036px;
        margin-top: 84.5px;
        margin-bottom: 84.5px
    }

    .main-banner__text {
        max-width: 824px;
        margin-right: auto;
        margin-left: auto
    }

    .numbers__grid {
        grid-template-areas:"a a c d" "b b e d" "b b e d"
    }
}

@media (max-width: 759.98px) {
    .numbers__card--a {
        padding-top: 24px;
        padding-bottom: 24px
    }
}

.numbers__card--b {
    background-color: #e7efff
}

.numbers__card--b .custom-scroll__bar {
    background-color: var(--blue)
}