:root {
    --main-family: 'Manrope', sans-serif;

    --white-color: #FFFFFF;
    --main-color: #F04378;
    --gray-1: #CBCBCB;
    --gray-2: #E9E9E9;
    --gray-3: #F5F5F5;
    --gray-4: #FAFAFB;
    --gray-black: #293540;
    --green: #55C577;
    --active-color: #F0437880;
    --orange: #F9A44F;
    --crimson: #FFEAF0;
    --red: #FF4F52;

    --radius-10: 10px;
    --radius-20: 20px;
    --radius-32: 32px;
    --radius-40: 40px;
    --radius-60: 60px;
    --container-padding: 70px;

    --container-width: 1200px;

    --section-padding-24: 60px;
    --section-padding-16: 60px;

    --c2-size: 64px;

    --h1-size: 48px;
    --h1-size-24: 48px;
    --h2-size: 40px;
    --h3-size: 30px;
    --h4-size: 24px;
    --h5-size: 22px;
    --h6-size: 20px;

    --p1-size: 14px;
    --p2-size: 16px;

    --fw700: 700;
    --fw600: 600;

    --scrollbarBg: var(--gray-2);
    --scrollbarThumb: var(--main-color);
    --scrollbarWidth: 4px;
    --scrollbarBorderRadius: 2px;
}

.text-section__text
{
    font-size: var(--h2-size);
    color: var(--gray-black);
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 60px;
}

.text-section__text span {
    color: var(--gray-1);
}

.text-section__text img {
    object-fit: contain;
    width: 36px;
    height: 36px;
    margin-bottom: -6px;
}

@media screen and (max-width: 1340px) {
    :root {
        --c2-size: 48px;
    }
}

@media screen and (max-width: 991px) {
    :root {
        --c2-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --radius-20: 16px;
        --radius-32: 24px;
        --radius-60: 40px;
        --container-width: 628px;

        --section-padding-24: 24px;
        --section-padding-16: 16px;

        --h1-size: 30px;
        --h1-size-24: 30px;
        --h2-size: 28px;
        --h3-size: 30px;
        --h4-size: 22px;
        --h5-size: 22px;
        --h6-size: 16px;

        --p2-size: 14px;
    }
}

@media screen and (max-width: 578px) {
    :root {
        --radius-60: 32px;
        --container-padding: 28px;

        --section-padding-16: 24px;

        --h1-size: 30px;
        --h1-size-24: 24px;
        --h2-size: 24px;
        --h3-size: 30px;
        --h4-size: 20px;
        --h5-size: 22px;
        --h6-size: 16px;
    }
}