.cta-section {
    position: relative;
    z-index: 1;
}

.bg-white + .cta-section {
    background-color: var(--color-white);
}

.bg-light-blue + .cta-section {
    background-color: var(--color-blue-100);
}

.bg-navy + .cta-section {
    background-color: var(--color-navy-900);
}

.bg-rainbow + .cta-section {
    background: var(--color-rainbow-gradient);
}

.cta-section__inner {
    padding-top: var(--section-margins);
    padding-bottom: var(--section-margins);
    border-radius: 3.125rem 3.125rem 0 0;
    overflow: hidden;
}

.cta-section__inner:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 3.125rem 3.125rem 0 0;
    background: linear-gradient(357.66deg, var(--color-navy-900) 11.71%, var(--color-blue-500) 158.36%);
}

.cta-section__content {
    margin: 0 auto;
    position: relative;
    z-index: 2;
    max-width: 72.625rem;
}

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

.cta-section__content :where(.sub-heading, .subheading) {
    color: var(--color-blue-300);
}

.cta-section__content a:not(.btn) {
    color: var(--color-green-500);
}

.cta__pattern {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 3.125rem 3.125rem 0 0;
    overflow: hidden;
    object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
    .cta-section__content a:not(.btn):hover {
        color: var(--color-blue-300);
    }
}

@media (min-width: 768px) {
    .cta-section__inner {
        border-radius: 6.250rem 6.250rem 0 0;
    }

    .cta-section__inner:before {
        border-radius: 6.250rem 6.250rem 0 0;
    }

    .cta__pattern {
        border-radius: 6.250rem 6.250rem 0 0;
    }
}

@media (min-width: 1600px) {
    .cta-section__inner {
        padding-bottom: 10.9375rem;
    }

    .cta__pattern {
        max-height: 26.25rem;
    }
}