.cta {
    position: relative;
    padding: 70px 22px 320px;
    overflow: hidden;
}

.cta__bg {
    position: absolute;
    width: 1770px;
    max-width: unset;
}

@media (max-width: 767px) {
    .cta::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*
        background-color: rgba(255, 255, 255, 0.5);
        */
        pointer-events: none;
        z-index: 0;
    }
    .cta--dark-image.cta::after {
        background-color: rgba(0, 0, 0, 0.5);
    }
}


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

.cta__content p {
    font-size: 20px;
}

.cta__content h2 {
    margin: 0 0 10px;
    overflow: hidden;
}

.cta__content .btn {
    margin-top: 5px;
}

.cta--dark-image {
    color: #fff;
}

.cta--dark-image .cta__content h2 {
    color: #fff;
}

.cta--inner {
    padding: 70px 22px 269px;
}

.cta--inner .cta__bg-wrapper,
.cta--text-bottom .cta__bg-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.cta--inner .cta__bg-wrapper img,
.cta--text-bottom .cta__bg-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sparkle Animation */
.js-animation.full-width-image-text .cta__bg-wrapper.js-image-reveal,
.js-animation.cta--inner .cta__bg-wrapper.js-image-reveal,
.js-animation.cta--text-bottom .cta__bg-wrapper.js-image-reveal {
    position: absolute;
    overflow: hidden;
}

.js-animation.full-width-image-text .cta__bg-wrapper.js-image-reveal {
    height: 100%;
}

.cta--text-bottom {
    padding: 293px 22px 50px;
}

.cta--dark-image .btn-secondary {
    color: var(--white);
    background: transparent;
    border-color: var(--white);
}

.cta--dark-image .btn-secondary::before {
    color: var(--white);
}


@media(min-width: 768px) {
    .cta {
        padding: 61px 26px;
        margin: 80px auto;
        width: calc(100% - 104px);
        height: 421px;
    }

    .cta__bg {
        right: -175px;
        bottom: 0;
        width: 990px;
        min-width: calc(100% + 175px);
    }

    .cta__content p {
        font-size: 24px;
    }

    .cta__content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .cta__content .btn {
        width: max-content;
        margin-top: 30px;
    }

    .cta--inner .cta__content {
        max-width: 500px;
    }

    .cta--inner .cta__content .btn {
        margin-top: 15px;
    }

    .cta--inner {
        padding: 35px 26px;
    }

    .cta__content .btn+.btn {
        margin-left: 0;
    }

    .cta--text-bottom {
        padding: 128px 26px 40px;
        height: auto;
    }

    .cta--text-bottom .cta__content {
        max-width: 417px;
    }

    .cta--text-bottom .cta__content .btn {
        margin-top: 8px;
    }
}


@media(min-width: 1200px) {
    .cta {
        padding: 81px 50px;
        width: 90%;
        margin: 100px auto;
        height: 563px;
        max-width: 1027px;
    }

    .cta__content .btn {
        margin-top: 30px;
    }

    .cta__content p {
        font-size: 26px;
    }

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

    .cta__bg {
        right: -5px;
        width: 1010px;
        min-width: calc(100% + 175px);
    }

    .cta--inner .cta__content {
        max-width: unset;
    }

    .cta__content .btn-secondary {
        padding: 19px 40px 19px 75px;
        border: 1px solid var(--black);
        border-radius: var(--border-radius-md);
    }

    .cta--dark-image .cta__content .btn-secondary,
    .cta__content .btn-secondary-white {
        padding: 19px 40px 19px 75px;
        border: 1px solid var(--white);
        border-radius: var(--border-radius-md);
    }

    .cta__content .btn-secondary:before,
    .cta__content .btn-secondary-white:before {
        left: 38px;
        padding-bottom: 0;
    }

    .cta--inner .cta__content .btn {
        margin-top: 22px;
    }

    .cta--inner .cta__content {
        max-width: 425px;
    }

    .cta--text-bottom {
        padding: 320px 60px 100px;
        height: auto;
    }

    .cta--text-bottom .cta__content {
        max-width: 50%;
    }

    .cta--text-bottom .cta__content .btn {
        margin-top: 8px;
    }

    .cta--dark-image .cta__content .btn-secondary {
        color: var(--white);
        border-bottom: 1px solid var(--white);
    }
}

@media(min-width: 1800px) {
    .cta__bg {
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-width: unset;
    }

    .cta {
        padding: 100px 60px;
        width: 90%;
        height: 680px;
        margin: 175px auto;
        max-width: 1489px;
    }

    .cta__content p {
        font-size: 30px;
    }

    .cta__content .btn {
        margin-top: 10px;
    }

    .cta+.cta {
        margin-top: -75px;
    }

    .cta--inner .cta__content {
        max-width: unset;
    }

    .cta--text-bottom {
        padding: 323px 60px 100px;
        height: auto;
    }
}

.bg-black .tab-slider-for-content .btn-secondary::before,
.bg-black .tab-slider-for-content .btn-tertiary::before {
    color: var(--dark-green);
}

@media (max-width: 767px) {

    .cta--inner.custom-bg-cta .cta__bg, .cta--text-bottom .cta__bg {
        top: 85px;
        object-position: 85%;
    }

    .cta--inner.custom-bg-cta {
        background: #98b4c4;
    }

}