.sec-about {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Fallback for browsers where background image loads late or fails. */
    background-color: #111111;
}

.sec-about::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.54) 100%);
}

.sec-about__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.sec-about .container {
    position: relative;
    z-index: 2;
}

/*///////////*/


.sec-about {
    padding: 0.625rem 0 ;
    height: auto;
}

.sec-about__bg {
    z-index: -1;
}

.sec-about__title {
    color: #ffffff;
    margin-bottom: 13.25rem;
}

.sec-about__sub-title {
    color: #ffffff;
    font-size: 1rem;
    line-height: 120%;
    margin-bottom: 2.5rem;
}

.bnf-slider {
    z-index: 1;
    position: relative;
}

.bnf-card {
    border: 0.0625rem solid rgba(255, 255, 255, 0.4);
    padding: 1.5625rem 1.25rem 1.25rem;
    background-color: #ffffff;
    color: #000000;
    width: 100%;
}

.bnf-card * {
    color: inherit;
}

.bnf-card__num {
    font-size: 6rem;
    font-weight: 400;
    line-height: 60%;
    position: relative;
    width: fit-content;
    margin-bottom: 3.4375rem;
}

.bnf-card__num sup {
    position: absolute;
    right: -1.5rem;
    top: -0.0625rem;
    font-size: 3.375rem;
}

.bnf-card__descr {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 0;
}

.sec-about__descr * {
    color: #ffffff !important;
}

.bnf-card p:not(.bnf-card__num) {
    font-size: 0.875rem;
}

.bnf-slider__cell {
    display: flex !important;
}

.swiper-slide.col-8 {
    width: 66.66666667%;
}

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

    .bnf-card {
        padding: 1.5625rem 1.875rem 1.25rem;
    }

    .swiper-slide.col-xl-4 {
        width: 33.33333333%;
    }

    .sec-about {
        padding: 1.25rem 0;

    }

    .w-xl-row {
        width: initial !important;
        --bs-gutter-x: 0.625rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-0.5 * var(--bs-gutter-x));
        margin-left: calc(-0.5 * var(--bs-gutter-x));
    }

    .sec-about__sub-title {
        font-size: 1.5rem;
    }


    .bnf-card__num {
        font-size: 8rem;
        margin-bottom: 4.25rem;
    }

    .bnf-card__num sup {
        font-size: 4rem;
    }

    .bnf-card__descr {
        font-size: 0.875rem;
    }

    .sec-about__descr p:not(.sec-about__sub-title) {
        font-size: 1rem;
    }

    .sec-about {
        min-height: 100vh !important;
    }

    .mob-css-slider__item {
        width: 33%;
    }

    .swiper-wrapper.row {
        width: initial;
    }
    .bnf-card__num {
        line-height: 92%;
    }
    .bnf-card__num sup {
        right: -1.875rem;
        top: 1.25rem;
    }
}

@media only screen and (max-width: 1200px) {

    .swiper-wrapper.row {
        margin: 0 !important;
        flex-wrap: initial;
    }

    .bnf-slider__cell {
        padding: 0 !important;
    }

}

/* === Entrance Animation === */
/* sec-about всегда ниже fold (после hero с min-height:100vh),
   поэтому opacity:0 до .sa-loaded на LCP не влияет. */

.sec-about .sa-anim {
    opacity: 0;
    transform: translateY(3rem);
    transition:
        opacity 1.1s ease-out,
        transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sec-about.sa-loaded .sa-anim {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .sec-about .sa-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}