:root {
    --tg-bg-top: 0px;
    --tg-bg-right: 1%;
    --tg-bg-size: 982px;
    --ph-bg-top: 278px;
    --ph-bg-right: 25%;
    --ph-bg-size: 610px;
    --ch-bg-top: 697px;
    --ch-bg-right: 22%;
    --ch-bg-size: 315px;
    --oh-bg-top: 681px;
    --oh-bg-right: 51%;
    --oh-bg-size: 393px;
    --ci-bg-top: 580px;
    --ci-bg-right: 52%;
    --ci-bg-size: 150px;
    --cv-bg-top: 328px;
    --cv-bg-right: -1%;
    --cv-bg-size: 280px;
    --kf-bg-top: 436px;
    --kf-bg-right: -1%;
    --kf-bg-size: 300px;
}

.telegram-bots-section {
    font-family: 'Segoe UI Light', sans-serif;
    background-image:
        url('../img/conv.webp'),
        url('../img/coff.webp'),
        url('../img/colorfulicons.webp'),
        url('../img/onehundred.webp'),
        url('../img/client-happines.webp'),
        url('../img/phone.webp'),
        url('../img/tgbot-xl.webp'),
        radial-gradient(ellipse at center, #47B14A0D, #47b14a00);
    ;
    background-repeat: no-repeat;
    background-position:
        top var(--cv-bg-top) right var(--cv-bg-right),
        top var(--kf-bg-top) right var(--kf-bg-right),
        top var(--ci-bg-top) right var(--ci-bg-right),
        top var(--oh-bg-top) right var(--oh-bg-right),
        top var(--ch-bg-top) right var(--ch-bg-right),
        top var(--ph-bg-top) right var(--ph-bg-right),
        top var(--tg-bg-top) right var(--tg-bg-right),
        bottom 0 left 0;
    background-size:
        var(--cv-bg-size),
        var(--kf-bg-size),
        var(--ci-bg-size),
        var(--oh-bg-size),
        var(--ch-bg-size),
        var(--ph-bg-size),
        var(--tg-bg-size),
        675px 532px;
}

    .telegram-bots-section__title {
        background-position: bottom 65px right -30px;
    }

@media (max-width: 1440px) {
    :root {
        --tg-bg-right: -56%;
        --ph-bg-right: 10%;
        --ch-bg-right: 9%;
        --oh-bg-right: 62%;
        --ci-bg-right: 55%;
    }
}

@media (max-width: 1390px) {
    :root {
        --tg-bg-size: 900px;
        --tg-bg-right: -48%;
        --tg-bg-top: 43px;
        --ph-bg-right: 2%;
        --ch-bg-right: 7%;
    }

    .telegram-bots-section {
        font-family: 'Segoe UI Light', sans-serif;
        background-image:
            url('../img/colorfulicons.webp'),
            url('../img/onehundred.webp'),
            url('../img/client-happines.webp'),
            url('../img/phone.webp'),
            url('../img/tgbot-xl.webp'),
            radial-gradient(ellipse at center, #47B14A0D, #47b14a00);
        background-repeat: no-repeat;
        background-position:
            top var(--ci-bg-top) right var(--ci-bg-right),
            top var(--oh-bg-top) right var(--oh-bg-right),
            top var(--ch-bg-top) right var(--ch-bg-right),
            top var(--ph-bg-top) right var(--ph-bg-right),
            top var(--tg-bg-top) right var(--tg-bg-right),
            bottom 0 left 0;
        background-size:
            var(--ci-bg-size),
            var(--oh-bg-size),
            var(--ch-bg-size),
            var(--ph-bg-size),
            var(--tg-bg-size),
            675px 532px;
    }

}

@media (max-width: 1310px) {
    :root {
        --tg-bg-right: -55%;
        --ph-bg-right: 0;
        --ch-bg-right: 11%;
        --ci-bg-right: 57%;
        --cv-bg-right: -1%;
        --kf-bg-right: -1%;
        --oh-bg-right: 62%;
    }
}

@media (max-width: 1295px) {
    :root {
        --tg-bg-size: 600px;
        --tg-bg-right: 0;
        --tg-bg-top: -60px;
        --ph-bg-top: 135px;
        --ph-bg-right: 20px;
        --ph-bg-size: 520px;
        --ci-bg-right: 45%;
        --ci-bg-top: 523px;
        --ch-bg-right: 0;
        --ch-bg-top: 487px;
        --cv-bg-right: -2%;
        --kf-bg-right: -1%;
        --oh-bg-right: 47%;
        --oh-bg-top: 618px;
    }

    .telegram-bots-section {
        padding-top: 80px;
        font-family: 'Segoe UI Light', sans-serif;
        background-image:
            url('../img/colorfulicons.webp'),
            url('../img/onehundred.webp'),
            url('../img/client-happines.webp'),
            url('../img/phone.webp'),
            url('../img/tgbot-md.webp'),
            radial-gradient(ellipse at center, #47B14A0D, #47b14a00);
        background-repeat: no-repeat;
        background-position:
            top var(--ci-bg-top) right var(--ci-bg-right),
            top var(--oh-bg-top) right var(--oh-bg-right),
            top var(--ch-bg-top) right var(--ch-bg-right),
            top var(--ph-bg-top) right var(--ph-bg-right),
            top var(--tg-bg-top) right var(--tg-bg-right),
            bottom 0 left 0;
        background-size:
            var(--ci-bg-size),
            var(--oh-bg-size),
            var(--ch-bg-size),
            var(--ph-bg-size),
            var(--tg-bg-size),
            675px 532px;
    }

    .telegram-bots-section__main-content {
        max-width: 600px;
    }

    .telegram-bots-section__title {

        background-position: bottom 65px right 50px;
    }
}

@media (max-width: 1070px) {
    :root {
        --tg-bg-size: 580px;
        --tg-bg-right: -20px;
        --tg-bg-top: -60px;
        --ph-bg-top: 135px;
        --ph-bg-right: -20px;
    }
}