.cta__wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.cta__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta__overlay {
    position: relative;
    z-index: 1;
    padding: 40px 33px;
}

.cta__overlay .btn-group {
    justify-content: center;
    gap: 10px;
}

.cta__overlay .btn-group .btn+.btn {
    margin: 0;
}

.cta__overlay h2 {
    margin: 0 0 5px;
}

.cta__overlay p {
    margin: 0 0 10px;
}

.cta__overlay p:last-child {
    margin-bottom: 0;
}

.cta .btn-outline {
    background: var(--color-white);
}

.cta--blue-overlay .cta__overlay {
    background: linear-gradient(180deg, rgba(1, 57, 122, 0.8) 0%, rgba(0, 7, 15, 0.8) 100%);
    color: var(--color-white);
}

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

.cta--blue-overlay .btn-secondary {
    background: var(--color-primary-med);
}

.cta--pattern .cta__wrapper {
    background: var(--color-offwhite);
}

.section-block.cta + .section-block.cta {
    padding-top: 0;
}

.cta--pattern .btn-phone {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.cta--blue-overlay .sub-heading p,
.cta--blue-overlay a:not(.btn) {
    color: var(--color-primary-light);
}

.cta__bg svg {
    height: inherit;
}

 @media(min-width: 768px) {
    .cta__overlay {
        padding: 70px 88px;
    }

    .cta__overlay h2 {
        margin: 0 0 15px;
    }

    .cta__overlay p {
        margin: 0 0 20px;
    }
}

@media(min-width: 1200px) {
    .cta__overlay {
        padding: 100px 88px;
    }

    .cta--blue-overlay a:not(.btn):hover {
        color: var(--color-secondary);
    }

    .cta--blue-overlay .btn-secondary:hover {
        background: var(--color-primary);
    }

    .cta--pattern .btn-phone:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }
}