#numbers {
    background: #FFE5E5;
    overflow: hidden;
    padding: 155px 0 100px;
    transform: translateY(-1.7px);
    position: relative;
}

#numbers::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    background: url(../assets/cloud.svg) center / contain no-repeat;
    width: 802px;
    height: 78px;
    pointer-events: none;
}

.numbers {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.numbers_head {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    max-width: 750px;
}

.numbers_title {
    color: #A50003;
    text-align: center;
    font-family: 'Shadow';
    font-size: 64px;
    line-height: 100%;
    letter-spacing: -0.64px;
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
}

.numbers_text {
    color: #720913;
    text-align: center;
    font-size: 22px;
    line-height: 140%;
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
}

#numbers.show .numbers_title {
    animation: bumpUp .7s cubic-bezier(.22, 1.4, .36, 1) forwards;
}

#numbers.show .numbers_text {
    animation: bumpUp .7s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: 0.2s;
}

.numbers_little_heart1,
.numbers_little_heart2,
.numbers_little_heart3,
.numbers_little_heart4,
.numbers_little_heart5,
.numbers_little_heart6 {
    position: absolute;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(2774%) hue-rotate(314deg) brightness(109%) contrast(102%);
    animation: float 4s ease-in-out infinite;
    will-change: transform;
}

.numbers_little_heart1 {
    width: 99px;
    height: 84px;
    animation-delay: 0s;
    animation-duration: 4s;
    top: 45px;
    right: 120px;
}

.numbers_little_heart2 {
    width: 45px;
    height: 38px;
    animation-delay: 0.8s;
    animation-duration: 5s;
    top: -25px;
    right: 190px;
}

.numbers_little_heart3 {
    width: 21px;
    height: 18px;
    animation-delay: 1.6s;
    animation-duration: 3.5s;
    top: -40px;
    right: 125px;
}

.numbers_little_heart4 {
    width: 99px;
    height: 84px;
    animation-delay: 0s;
    animation-duration: 4s;
    top: 435px;
    left: 45px;
}

.numbers_little_heart5 {
    width: 45px;
    height: 38px;
    animation-delay: 0.8s;
    animation-duration: 5s;
    top: 365px;
    left: 125px;
}

.numbers_little_heart6 {
    width: 21px;
    height: 18px;
    animation-delay: 1.6s;
    animation-duration: 3.5s;
    top: 335px;
    left: 45px;
}

.solich_box {
    position: absolute;
    max-width: 245px;
    top: 100px;
    left: 170px;
    display: flex;
    align-items: center;
    z-index: 3;
}

.solich_say {
    color: #121212;
    font-size: 16px;
    line-height: 110%;
    clip-path: path('M236 0C249.255 0 260 10.7452 260 24V44C260 57.2548 249.255 68 236 68H36C22.7452 68 12 57.2548 12 44V41.6602L1.5 35.5981C-0.5 34.4434 -0.5 31.5566 1.5 30.4019L12 24.3397V24C12 10.7452 22.7452 0 36 0H236Z');
    padding: 25px 17px 16px 39px;
    background-color: #FFF;
    width: 260px;
    height: 68px;
    right: -205px;
    position: absolute;
    top: 140px;
    animation: sayCycle 4s ease-in-out infinite;
    will-change: opacity;
}

@keyframes sayCycle {
    0% {
        opacity: 0;
    }

    11.5% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    61.5% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.numbers_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 265px 0 45px;
}

.number_ass {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 336px;
    height: 302px;
    clip-path: path('M277.098 13.4573C312.294 33.9699 337.057 75.6169 335.965 124.202C333.647 226.799 193.2 302.399 168 302.399C142.8 302.399 2.33632 226.799 0.034737 124.202C-1.05726 75.6169 23.7058 33.9867 58.9015 13.4573C91.8293 -5.71139 133.191 -5.829 168 22.4788C202.809 -5.829 244.171 -5.72819 277.098 13.4573Z');
}

.number_ass_digit {
    color: #44332F;
    text-align: center;
    font-family: 'Shadow';
    font-size: 52px;
    line-height: 100%;
    letter-spacing: -0.743px;
}

.number_ass_name {
    color: #44332fa3;
    text-align: center;
    font-size: 19.2px;
    line-height: 130%;
    max-width: 85%;
}

.number_one .number_ass {
    background: #F68593;
}

.number_two .number_ass {
    background: #A4BECB;
}

.number_three .number_ass {
    background: #FEA071;
}

.number_four .number_ass {
    background: #B6B5B5;
}

.number_item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 55px;
}

.number_count {
    color: #44332fa3;
    text-align: center;
    font-size: 24px;
    line-height: 100%;
    opacity: 0;
    transition: opacity .4s ease;
}

#numbers.show.count-visible .number_count {
    opacity: 1;
}

.number_body {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    cursor: pointer;
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
}

#numbers.show .number_one .number_body {
    animation: bumpUp .6s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: 0.6s;
}

#numbers.show .number_two .number_body {
    animation: bumpUp .6s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: 0.7s;
}

#numbers.show .number_three .number_body {
    animation: bumpUp .6s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: 0.8s;
}

#numbers.show .number_four .number_body {
    animation: bumpUp .6s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: 0.9s;
}

.number_body:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0.2s;
}

.number_body:hover:after {
    opacity: 1;
    transition-delay: 0s;
}

.number_one .number_body::after {
    bottom: -40px;
    height: 515px;
    background: url(../assets/rabit.png) center / contain no-repeat;
}

.number_two .number_body::after {
    bottom: -55px;
    height: 505px;
    left: -5px;
    background: url(../assets/gus.png) center / contain no-repeat;
}

.number_three .number_body::after {
    bottom: -15px;
    height: 440px;
    background: url(../assets/dog.png) center / contain no-repeat;
}

.number_four .number_body::after {
    bottom: -50px;
    left: 40px;
    height: 560px;
    background: url(../assets/kis.png) center / contain no-repeat;
}

.number_variant {
    position: absolute;
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
}

.number_variant.active {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}

.number_variant.exit {
    opacity: 0;
    transform: translateY(-40px);
    transition:
        transform .35s ease,
        opacity .2s ease;
}

.number_variant.enter {
    opacity: 0;
    transform: translateY(40px);
}

@keyframes bumpUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    70% {
        opacity: 1;
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 1600px) {

    .numbers_head {
        max-width: 560px;
    }

    .numbers_title {
        font-size: 48px;
        line-height: 100%;
        letter-spacing: -0.48px;
    }

    .solich_box {
        max-width: 205px;
        top: 30px;
        left: 125px;
    }

    .solich_say {
        transform: scale(0.8);
    }

    .numbers_little_heart4,
    .numbers_little_heart5,
    .numbers_little_heart6 {
        display: none;
    }

    .number_ass {
        width: 300px;
        height: 270px;
        clip-path: path('M247.409 12.0154C278.834 30.3303 300.944 67.5151 299.969 110.895C297.899 202.499 172.5 269.999 150 269.999C127.5 269.999 2.086 202.499 0.0310152 110.895C-0.943978 67.5151 21.1659 30.3453 52.5907 12.0154C81.9905 -5.09946 118.92 -5.20446 150 20.0704C181.08 -5.20446 218.01 -5.11446 247.409 12.0154Z');
    }

    .numbers_content {
        gap: 29px;
        padding: 174px 0 45px;
    }

    .number_item {
        gap: 38px;
    }

    #numbers {
        padding: 155px 0 270px;
    }

    #numbers::after {
        bottom: -7px;
        right: -2px;
        width: 600px;
        height: 65px;
    }

    .number_one .number_body::after {
        height: 465px;
    }

    .number_two .number_body::after {
        height: 460px;
    }

    .number_three .number_body::after {
        height: 398px;
    }

    .number_four .number_body::after {
        height: 500px;
    }

    .number_ass_digit {
        font-size: 36px;
        line-height: 100%;
        letter-spacing: -0.46px;
    }
}

@media (max-width: 1400px) {

    .numbers_title {
        font-size: 38px;
        line-height: 100%;
        letter-spacing: -0.38px;
    }

    .numbers_head {
        max-width: 440px;
    }

    .numbers_text {
        font-size: 18px;
        line-height: 140%;
    }

    #numbers {
        padding: 100px 0 97px;
    }

    .solich_box {
        max-width: 165px;
        top: 18px;
        left: 85px;
    }

    .solich_say {
        right: -195px;
        top: 95px;
        transform: scale(0.7);
        font-size: 19px;
    }

    .numbers_little_heart1,
    .numbers_little_heart2,
    .numbers_little_heart3 {
        display: none;
    }

    .number_ass {
        width: 208px;
        height: 188px;
        clip-path: path('M172.182 8.36202C194.052 21.1081 209.439 46.9865 208.761 77.1761C207.32 140.927 120.05 187.903 104.391 187.903C88.7325 187.903 1.45173 140.927 0.0215847 77.1761C-0.656953 46.9865 14.7302 21.1185 36.6 8.36202C57.0605 -3.54892 82.7614 -3.62199 104.391 13.9678C126.021 -3.62199 151.722 -3.55936 172.182 8.36202Z');
    }

    .numbers_content {
        gap: 20px;
        padding: 110px 0 45px;
    }

    .number_one .number_body::after {
        height: 342px;
    }

    .number_two .number_body::after {
        height: 322px;
        bottom: -40px;
    }

    .number_three .number_body::after {
        height: 280px;
    }

    .number_four .number_body::after {
        height: 405px;
        bottom: -75px;
        left: 25px;
    }

    .number_ass_name {
        font-size: 14px;
    }

    .number_count {
        font-size: 18px;
        line-height: 100%;
    }

    .number_item {
        gap: 32px;
    }

    #numbers::after {
        bottom: -3px;
        right: -2px;
        width: 402px;
        height: 38px;
    }
}

@media (max-width: 1000px) {
    .numbers_title {
        font-size: 30px;
        line-height: 110%;
        letter-spacing: -0.3px;
        max-width: 350px;
    }

    .numbers_text {
        font-size: 16px;
        line-height: 140%;
    }

    .number_ass {
        width: 157px;
        height: 141px;
        clip-path: path('M129.754 6.30152C146.235 15.9068 157.831 35.4084 157.319 58.159C156.234 106.201 90.4679 141.601 78.6678 141.601C66.8677 141.601 1.09401 106.201 0.016266 58.159C-0.495071 35.4084 11.1005 15.9147 27.5813 6.30152C43.0001 -2.67442 62.368 -2.72949 78.6678 10.526C94.9677 -2.72949 114.336 -2.68229 129.754 6.30152Z');
    }

    .numbers_content {
        gap: 32px;
        padding: 100px 0 45px;
    }

    .number_two .number_body::after {
        height: 241px;
        bottom: -30px;
        left: 0;
    }

    .number_three .number_body::after {
        height: 217px;
    }

    .number_one .number_body::after {
        height: 249px;
        bottom: -25px;
    }

    .number_four .number_body::after {
        height: 380px;
        bottom: -90px;
        left: -21px;
        transform: scaleX(-1);
    }

    .solich_box {
        max-width: 95px;
        top: 0;
        left: 75px;
    }

    .solich_say {
        right: -180px;
        top: 40px;
        transform: scale(0.5);
        font-size: 19px;
    }

    .number_ass_digit {
        font-size: 22px;
        line-height: 100%;
        letter-spacing: -0.24px;
    }

    .number_ass_name {
        font-size: 12px;
    }

    .number_count {
        font-size: 12px;
        line-height: 100%;
    }

    .number_item {
        gap: 10px;
    }
}

@media (max-width: 775px) {
    .numbers_content {
        gap: 100px 32px;
        padding: 100px 0 45px;
        max-width: 365px;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    #numbers {
        padding: 108px 0 70px;
    }

    .solich_box {
        max-width: 88px;
        top: -35px;
        left: 75px;
    }

    #numbers::after {
        bottom: -1px;
        right: 0px;
        width: 280px;
        height: 26px;
    }
}