.cta-bar {
    position: relative;
}

.cta-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.cta-overlay {
    padding: 58px 0;
    position: relative;
    z-index: 1;
    background: rgb(100,6,22);
    background: linear-gradient(90deg, rgba(100,6,22,0.9472163865546218) 11%, rgba(122,34,49,0.8463760504201681) 61%, rgba(124,35,50,0.7455357142857143) 100%);
}

.cta-bar__content :where(h2,h3,h4,h5,h6,p,li) {
    color: var(--color-white);
}

.cta-bar__content ul li::before {
    background: var(--color-white);
}

.cta-bar__content a:not(.btn) {
    color: var(--color-white);
    border-color: var(--color-white);
}

.cta-bar__content p:last-child {
    padding-bottom: 0;
}

@media(min-width: 768px) {
    .cta-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 1048px;
        margin: 0 auto;
    }

    .cta-right {
        width: 232px;
        padding-left: 12px;
    }

    .cta-left {
        width: calc(100% - 232px);
        padding-right: 39px;
    }

    .cta-image-main {
        width: 184px;
        height: 156px;
        position: relative;
    }

    .cta-image-main img {
        border-radius: 4px;
        position: relative;
    }

    .cta h2 {
        padding-right: 10px;
    }

    .cta p {
        padding: 0 21px 16px 0;
    }

    .cta-image-main:before {
        content: "";
        position: absolute;
        width: calc(100% + 24px);
        height: calc(100% + 24px);
        top: -12px;
        left: -12px;
        border-radius: 4px;
        box-shadow: 0 0 30px rgba(46,0,8,0.15);
        background-color: var(--color-white);
    }

    .cta-image-main:after {
        content: "\e925";
        position: absolute;
        right: -60px;
        bottom: -102px;
        color: #C6922A;
        font-family: 'cit-icon' !important;
        font-size: 153px;
        font-weight: 400;
    }

    .cta-overlay {
        padding: 78px 0;
    }    
}


@media(min-width: 1200px) {
    .cta-image-main {
        width: 268px;
        height: 228px;
    }

    .cta-left {
        width: calc(100% - 292px);
        padding-right: 0;
    }

    .cta-right {
        width: 232px;
        padding-left: 12px;
    }

    .cta-overlay {
        padding: 96px 0;
    }

    .cta-image-main:after {
        right: -78px;
        bottom: -139px;
        font-size: 214px;
    }

    .cta-bar__content a:not(.btn):hover {
        color: var(--color-gold);
        border-color: var(--color-gold);
    }
}

.cta-vector {
    background-color: var(--color-red);
    padding: 57px 0 90px;
    color: var(--color-white);
    position: relative;
}

.cta-vector h2,
.cta-vector h6 {
    color: var(--color-white);
}

.cta-vector-bg {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 17px;
}

.cta-vector-bg-left {
    width: 65px;
    left: 23px;
    position: absolute;
    bottom: 0;
}

.cta-vector-bg-right {
    width: 171px;
    right: 0;
    bottom: 0;
    position: absolute;
}

.cta-vector:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 18px;
    background-color: #2E0008;
    bottom: 0;
}


@media(min-width: 768px) {
    .cta-vector-bg-left {
        width: 90px;
        left: 52px;
    }

    .cta-vector-bg-right {
        width: 328px;
    }

    .cta-vector {
        padding: 75px 0 100px;
    }
}

@media(min-width: 1200px) {
    .cta-vector-wrapper {
        position: relative;
    }

    .cta-vector-bg-right {
        width: 328px;
    }

    .cta-vector-bg-left {
        width: 124px;
        left: 179px;
    }

    .cta-vector {
        padding: 95px 0 100px;
    }

    .cta-vector-wrapper {
        position: relative;
        max-width: 1048px;
        margin: 0 auto;
    }

    .cta-vector-btn {
        position: absolute;
        right: 0;
        top: 44px;
    }

    .cta-vector h2 {
        padding-right: 215px;
    }
}