.cta {
    background-color: var(--Color_Hoffer_Red);
    overflow: hidden;
    padding: 112px 15px;
    position: relative
}

.cta:before {
    background: linear-gradient(71.9deg, hsla(0, 3%, 7%, .3) -17.43%, hsla(0, 3%, 7%, .8) 90.94%);
    left: 0;
    top: 0;
    width: 100%
}

.cta:after,
.cta:before {
    content: "";
    display: block;
    height: 100%;
    position: absolute
}

.cta:after {
    background-image: url(../../images/red-angle-bg-shape.png);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    right: 0;
    width: 41.68%;
    z-index: 2
}

.cta__content {
    position: relative;
    z-index: 3
}

.cta__content__inner {
    color: var(--Color_White);
    display: flex;
    flex-direction: column;
    max-width: 35%;
    row-gap: 32px;
    text-align: center
}

.cta__content__inner .heading {
    color: var(--Color_White);
    font-family: var(--Font_Lato_Bold);
    margin: 0
}

.cta__content__inner .btn {
    margin: 8px auto 0;
    max-width: -moz-max-content;
    max-width: max-content;
    padding: 0
}

.cta__content__inner .btn .text {
    padding: 18px 40px;
    text-align: center
}

@media (max-width:1440px) {
    .cta {
        padding: 80px 15px
    }

    .cta__content__inner {
        max-width: 60%;
        row-gap: 30px
    }
}

@media (max-width:991px) {
    .cta__content__inner {
        max-width: 80%;
        row-gap: 20px
    }
}

@media (max-width:767px) {
    .cta {
        padding: 60px 15px
    }

    .cta__content__inner .btn {
        font-size: 20px
    }

    .cta__content__inner .btn .text {
        padding: 15px 40px
    }
}

@media (max-width:575px) {
    .cta {
        padding: 35px 15px 40px
    }

    .cta__content__inner {
        grid-row: 10px;
        max-width: 100%
    }

    .cta__content__inner .btn {
        margin: 0;
        max-width: none
    }

    .cta__content__inner .description {
        margin-bottom: 10px
    }
}