@font-face {
    font-family: 'Bounded';
    src: url('https://cdn.proffskills.ru/static/fonts/Bounded-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Bounded';
    src: url('https://cdn.proffskills.ru/static/fonts/Bounded-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

.banner p,
h6 {
    margin: 0;
}

.banner {
    background: linear-gradient(270.16deg, rgba(106, 48, 200, 1) 0%, rgba(39, 246, 236, 1) 100%);
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
}

.banner-content {
    padding: 17px 0 25px;
    display: flex;
    max-width: 1320px;
    position: relative;
    margin: 0 auto;
}

.banner-content-wrapper {
    display: flex;
    margin: 0 auto;
    align-items: center;
    gap: 30px;
}

.banner-text-wrapper {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.banner-title {
    font-family: 'Bounded';
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0;
}

.banner-button {
    font-family: 'Bounded';
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    border-radius: 10px;
    padding: 10px 30px;
    color: rgba(0, 0, 0, 1);
    border: none;
    cursor: pointer;
    margin: 0;
}

.present-box {
    position: absolute;
    bottom: -60px;
    right: 93px;
    width: 143px;
}

@media (max-width: 1199px) {
    .banner-content {
        padding: 11px 0;
        max-width: 980px;
    }

    .present-box {
        bottom: -45px;
        right: 10px;
        width: 108px;
    }

    .banner-title {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .banner-content {
        max-width: 760px;
        padding: 17px 0;
    }

    .present-box {
        right: -10px;
    }

    .banner-button {
        display: none;
    }
}

@media (max-width: 768px) {
    .banner-content {
        padding: 7px 0;
        max-width: 328px;
    }

    .banner-title {
        text-align: center;
        font-size: 14px;
    }

    .present-box {
        bottom: -20px;
        right: -70px;
        width: 78px;
    }
}

@media (max-width: 575px) {
    .present-box {
        bottom: -10px;
        right: -20px;
        width: 58px;
    }
}

@media (max-width: 375px) {
    .banner-content {
        padding: 9px 0;
        max-width: 290px;
    }

    .banner-title {
        font-size: 12px;
    }
}