.btn-white {
    background-color: #FFFFFF;
    color: #D01B1B;
}

.cta {
    padding: 30px 0 35px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cta-image-overlay-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.cta-image-overlay-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.cta.bg-darkblue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0070B6;
    z-index: -3;
}

.cta.bg-darkblue::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,112,182,1) 0%, rgba(0,101,165,0.9) 79%);
    z-index: -1;
}

.cta.bg-darkblue .cta-content__wrapper .sub-heading {
    color: #95D2EC;
}

.cta.bg-darkblue  .cta-content__wrapper h2 {
    color: #FFFFFF;
}

.cta-content__wrapper p {
    padding: 0 0 20px;
}

.cta.bg-darkblue .cta-content__wrapper p {
    color: #FFFFFF;
}

.cta.bg-lightblue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E7F9FF;
    z-index: -3;
}

.cta.bg-lightblue::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(231,249,255,1) 34%, rgba(231,249,255,0.9023810207676821) 100%);
    z-index: -1;
}

.cta.bg-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D01B1B;
    z-index: -3;
}

.cta.bg-red::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(208,27,27,1) 37%, rgba(208,27,27,0.8575630935968137) 100%);
    z-index: -1;
}

.cta.bg-red .sub-heading {
    color: #FF3B3B;
}

.cta.bg-red h2 {
    color: #FFFFFF;
}

.cta.bg-red p {
    color: #FFFFFF;
}

.cta.bg-red .btn-white:hover {
    background: var(--darkblue);
    color: #fff;
}

@media(min-width: 768px) {
    .cta {
        padding: 42px 0 50px;
    }

    .cta-content__wrapper p {
        padding: 0 0 30px;
    }

    .cta-content__wrapper h2 {
        padding-bottom: 15px;
    }

    .cta-content__wrapper {
        padding: 0 1px;
    }

    .cta-image-overlay-left {
        width: 618px;
        left: -300px;
        object-position: right;
    }

    .cta-image-overlay-right {
        width: 618px;
        right: -300px;
    }

    .cta.bg-darkblue .cta-content__wrapper .sub-heading {
        color: #47ABD8;
    }
}

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

    .cta-image-overlay-left {
        width: 618px;
        left: 0;
        object-position: center;
    }

    .cta-image-overlay-right {
        width: 618px;
        right: 0;
    }

    .cta.bg-darkblue::after {
        background: radial-gradient(circle, rgba(0,112,182,1) 0%, rgba(0,88,143,0.71) 100%);
    }

    .cta-content__wrapper p {
        line-height: 1.875em;
    }

    .cta.bg-lightblue::after {
        background: radial-gradient(circle, rgba(231,249,255,1) 0%, rgba(202,239,255,0.71) 100%);
    }

    .cta.bg-red::after {
        background: radial-gradient(circle, rgba(208,27,27,1) 0%, rgba(177,18,18,0.71) 100%);
    }

    .cta-image-overlay-left::before {
        content: "";
        width: 100px;
        height: 100%;
        position: absolute;
        z-index: 5;
        top: 0;
        right: 0;
    }

    .cta.bg-darkblue .cta-image-overlay-left::before {
        background-image: linear-gradient(to right, var(--blue-to-fade), var(--blue) );
    }
    .cta.bg-red .cta-image-overlay-left::before {
        background-image: linear-gradient(to right, var(--red-to-fade), var(--red) );
    }
    .cta.bg-lightblue .cta-image-overlay-left::before {
        background-image: linear-gradient(to right, var(--lightblue-to-fade), var(--lightblue) );
    }

    .cta-image-overlay-right::before {
        content: "";
        width: 100px;
        height: 100%;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
    }

    .cta.bg-darkblue .cta-image-overlay-right::before {
        background-image: linear-gradient(to left, var(--blue-to-fade), var(--blue) );
    }
    .cta.bg-red .cta-image-overlay-right::before {
        background-image: linear-gradient(to left, var(--red-to-fade), var(--red) );
    }
    .cta.bg-lightblue .cta-image-overlay-right::before {
        background-image: linear-gradient(to left, var(--lightblue-to-fade), var(--lightblue) );
    }
}