.cta-banner {
    background-image: url('../gfx/image-hero-background/banner-bg-circle-sm.png');
    background-image: url('../gfx/image-hero-background/banner-bg-circle-sm.png'), linear-gradient(0deg,#fff 0%,#fbf7ef 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.cta-banner-image-wrapper {
    margin-inline: auto;
}

.cta-banner-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.cta-banner-text {
    padding-block: 50px;
    padding-inline: 20px;
}

    .cta-banner-text .tag {
        /*padding-bottom: 4px;*/
        font-size: 18px;
        font-family: 'IBM Plex Mono';
        line-height: 1.6;
        width: fit-content;
        text-wrap: balanced;
        display: inline-flex;
    }

        .cta-banner-text .tag span {
            display: block;
            height: 1em;
            width: 0.5em;
            margin-left: 5px;
        }


    .cta-banner-text .heading {
        padding-bottom: 20px;
        text-wrap: balance;
        font-family: 'Manrope';
        font-size: 42px;
        font-weight: 800;
        line-height: 1.45;
        margin-top: 15px;
    }

    .cta-banner-text .text {
        padding-bottom: 20px;
        font-size: 18px;
        font-family: 'Manrope';
        line-height: 1.6;
        text-wrap: pretty;
    }

.cta-banner-links {
    display: flex;
    flex-direction: column;
    padding-block: 6.5px;
    align-items: flex-start;
    row-gap: 20px;
}

.btn-ecit {
    padding-block: 3.5px;
    padding-inline: 22px;
    font-family: 'Manrope';
    font-weight: 600;
    font-size: 16px;
    border-radius: 0px;
    display: inline-flex;
    flex-direction: row;
    line-height: 1.6;
    align-items: center;
}


.btn-ecit-lightblue {
    background-color: #2377ba;
    color: #fff;
    border-color: #2377ba;
}

    .btn-ecit-lightblue.inverted {
        background-color: #fff;
        color: #2377ba;
        border-color: #2377ba;
    }

        .btn-ecit-lightblue.inverted:hover {
            background-color: #2377ba;
            color: #fff;
        }

    .btn-ecit-lightblue.first-button:first-child {
        background-color: #fff;
        color: #2377ba;
        border-color: #2377ba;
    }

        .btn-ecit-lightblue.first-button:first-child:hover {
            background-color: #2377ba;
            color: #fff;
        }

    .btn-ecit-lightblue.second-button:last-child {
        background-color: #fff;
        color: #2377ba;
        border-color: #2377ba;
    }

        .btn-ecit-lightblue.second-button:last-child:hover {
            background-color: #2377ba;
            color: #fff;
        }

.btn-ecit-green,
.btn-ecit-green:hover {
    background-color: #5bba7c;
    color: #fff;
    border-color: #5bba7c;
}

    .btn-ecit-green.inverted {
        background-color: #fff;
        color: #5bba7c;
        border-color: #5bba7c;
    }

        .btn-ecit-green.inverted:hover {
            background-color: #5bba7c;
            color: #fff;
        }

    .btn-ecit-green.first-button:first-child {
        background-color: #fff;
        color: #5bba7c;
        border-color: #5bba7c;
    }

        .btn-ecit-green.first-button:first-child:hover {
            background-color: #5bba7c;
            color: #fff;
        }

    .btn-ecit-green.second-button:last-child {
        background-color: #fff;
        color: #5bba7c;
        border-color: #5bba7c;
    }

        .btn-ecit-green.second-button:last-child:hover {
            background-color: #5bba7c;
            color: #fff;
        }

.btn-ecit-purple, btn-ecit-purple:hover {
    background-color: #3e417f;
    color: #F4EDDC;
    border-color: #3e417f;
}

    .btn-ecit-purple.inverted {
        background-color: #F4EDDC;
        color: #3e417f;
        border-color: #3e417f;
    }

        .btn-ecit-purple.inverted:hover {
            background-color: #3e417f;
            color: #F4EDDC;
        }

    .btn-ecit-purple.first-button:first-child {
        background-color: #F4EDDC;
        color: #3e417f;
        border-color: #3e417f;
    }

        .btn-ecit-purple.first-button:first-child:hover {
            background-color: #3e417f;
            color: #F4EDDC;
        }

    .btn-ecit-purple.second-button:last-child {
        background-color: #F4EDDC;
        color: #3e417f;
        border-color: #3e417f;
    }

        .btn-ecit-purple.second-button:last-child:hover {
            background-color: #3e417f;
            color: #F4EDDC;
        }

.btn-ecit-default:hover, .btn-ecit-default {
    background-color: #002c55;
    color: #fbf7ef;
    border-color: #002c55;
}

    .btn-ecit-default.inverted {
        background-color: #fbf7ef;
        color: #002c55;
        border-color: #002c55;
    }

        .btn-ecit-default.inverted:hover {
            background-color: #002c55;
            color: #fbf7ef;
        }

    .btn-ecit-default.first-button:first-child {
        background-color: #fbf7ef;
        color: #002c55;
        border-color: #002c55;
    }

        .btn-ecit-default.first-button:first-child:hover {
            background-color: #002c55;
            color: #fbf7ef;
        }

    .btn-ecit-default.second-button:last-child {
        background-color: #fbf7ef;
        color: #002c55;
        border-color: #002c55;
    }

        .btn-ecit-default.second-button:last-child:hover {
            background-color: #002c55;
            color: #fbf7ef;
        }

.btn-ecit span.material-symbols-outlined {
    font-size: 22px;
    font-weight: 600;
    line-height: inherit;
    margin-left: 12px;
    /*transition: margin-left .2s;*/
}

.btn-ecit:hover span.material-symbols-outlined {
    /*margin-left: 15px;*/
}

@media(min-width:768px) {
    .cta-banner {
        background: none;
    }

    .cta-banner-wrapper {
        background-image: url('../gfx/image-hero-background/banner-bg-circle-md.png');
        background-image: url('../gfx/image-hero-background/banner-bg-circle-md.png'), linear-gradient(0deg,#fff 0%,#fbf7ef 100%);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: 33% 1fr;
        padding-top: 75px;
    }

    .cta-banner-text {
        padding-inline: 70px 10px;
        padding-block: 0px;
        align-self: center;
        /*margin-block: 30px 40px;*/
    }

        .cta-banner-text .tag {
            font-size: 14px;
        }

        .cta-banner-text .heading {
            font-size: 32px;
            font-weight: 800;
            line-height: 1.3;
        }

        .cta-banner-text .text {
            font-size: 16px;
        }

        .cta-banner-text .cta-banner-links {
            flex-direction: row;
            padding-block: 20px 0px;
            align-items: flex-start;
            -moz-column-gap: 20px;
            -ms-column-gap: 20px;
            -webkit-column-gap: 20px;
            column-gap: 20px;
            /*margin-bottom: 133px;*/
        }
}

@media (min-width:1024px) {
    .cta-banner {
        background: none;
        position: relative;
        /*max-height: 550px;*/
    }

    .cta-banner-wrapper {
        background-image: url('../gfx/image-hero-background/banner-bg-circle.png');
        background-image: url('../gfx/image-hero-background/banner-bg-circle.png'), linear-gradient(0deg,#fff 0%,#fbf7ef 100%);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: 33.3% 1fr;
        /*grid-template-rows: minmax(0, 666.1px);*/
        grid-template-rows: minmax(0, calc(490px + 13cqh));
        /* grid-template-rows: minmax(0, 591.5px); */
        padding-top: 60px;
    }

    .cta-banner-wrapper--large {
        grid-template-rows: minmax(0, calc(572px + 13cqh));
    }

    .cta-banner-image-wrapper {
    }

    .banner-CTAGrid-Box-startbox {
        grid-column: 4;
    }

    .cta-banner-text {
        display: grid;
        grid-template-columns: subgrid;
        place-content: center;
        padding-inline: 68px;
        margin-block: 0px;
        margin-block: 10px 40px;
        height: fit-content;
        align-self: flex-start;
        margin-top: 15cqh;
    }

        .cta-banner-text .tag {
            font-size: 14px;
        }

        .cta-banner-text .heading {
            font-size: 32px;
            font-weight: 800;
            line-height: 1.3;
        }

        .cta-banner-text .text {
            font-size: 16px;
        }

        .cta-banner-text .cta-banner-links {
            flex-direction: row;
            padding-block: 20px 0px;
            align-items: flex-start;
            -moz-column-gap: 20px;
            -ms-column-gap: 20px;
            -webkit-column-gap: 20px;
            column-gap: 20px;
            /*margin-bottom: 133px;*/
        }
}

@media (min-width:1150px) {
    .cta-banner-text {
        margin-block: 0px;
        margin-top: 10cqh;
    }
}

@media (min-width: 2133px) {
    .cta-banner-text {
        margin-block: 0px;
        margin-top: 7.5cqh;
    }
}

@media (min-width: 2400px) {
    .cta-banner-text {
        margin-block: 0px;
        margin-top: 6cqh;
    }
}


.cta-banner-grid {
    --numberofboxes: 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1,1fr);
}

.banner-CTAGrid-Box {
    height: 90px;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    outline: solid 1px #daCfb6;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    padding-inline: 20px;
    column-gap: 15px;
    background-color: #fff;
}

    .banner-CTAGrid-Box.basis25 {
        flex-basis: 25%;
    }

    .banner-CTAGrid-Box.basis33 {
        flex-basis: 33%;
    }

    .banner-CTAGrid-Box.basis50 {
        flex-basis: 50%;
    }

    .banner-CTAGrid-Box.basis100 {
        flex-basis: 100%;
    }

    .banner-CTAGrid-Box:not(:first-of-type) {
        border-top: none;
    }

.banner-CTAGrid--icon_container {
    width: 40px;
    height: 40px;
}

.banner-CTAGrid-box_main-image, .banner-CTAGrid-box_hover-image {
    width: 100%;
}

.banner-CTAGrid-box_hover-image {
    display: none;
}

.banner-CTAGrid-Box:hover .banner-CTAGrid-box_main-image {
    display: none;
}

.banner-CTAGrid-Box:hover .banner-CTAGrid-box_hover-image {
    display: block;
}

.banner-CTAGrid-text {
    font-family: 'Manrope',sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

.banner-CTAGrid-link {
    margin-left: auto;
    font-family: 'Manrope',sans-serif;
    font-size: 0px;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    -moz-column-gap: 10px;
    -ms-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

    .banner-CTAGrid-link .material-symbols-outlined {
        font-size: 28px;
        font-weight: 800;
    }

@media (min-width:576px) {
    .cta-banner-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .cta-banner-grid:not(.compact)
        .banner-CTAGrid-Box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto;
            padding-inline: 20px;
            padding-block: 35px 40px;
            row-gap: 10px;
            /*border-top: 1px solid #daCfb6;*/
        }

    .banner-CTAGrid-Box:not(:first-of-type) {
        /*border-top: 1px solid #daCfb6;*/
    }

    .banner-CTAGrid--icon_container {
        width: 40px;
        height: 40px;
    }

    .banner-CTAGrid-text {
        font-size: 18px;
    }

    .cta-banner-grid:not(.compact) .banner-CTAGrid-link {
        font-size: 18px;
        margin-left: unset;
    }

    .banner-CTAGrid-link .material-symbols-outlined {
        font-size: 24px;
        font-weight: 400;
    }
}

@media (min-width:992px) {
    .cta-banner-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .cta-banner-grid {
        display: grid;
        grid-template-columns: repeat(var(--numberofboxes), 250px);
        margin-inline: auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%)
    }

        .cta-banner-grid.compact {
            grid-template-columns: repeat(var(--numberofboxes), 1fr);
            width: 100%;
        }

            .cta-banner-grid.compact:has(> :last-child:nth-child(7)) > *:first-child {
                grid-column: 2;
            }

    .banner-CTAGrid-Box {
        padding-block: 20px;
    }

    .banner-CTAGrid--icon_container {
        width: 35px;
        height: 35px;
    }

    .banner-CTAGrid-text {
        font-size: 16px;
        text-align: center;
    }

    .cta-banner-grid:not(.compact)
    .banner-CTAGrid-link {
        font-size: 16px;
        margin-left: unset;
    }

    .banner-CTAGrid-link .material-symbols-outlined {
        font-size: 22px;
        font-weight: 400;
    }
}

@media (min-width:1150px) {
    .cta-banner-grid {
        display: grid;
        grid-template-columns: repeat(var(--numberofboxes), 250px);
        margin-inline: auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%)
    }

        .cta-banner-grid.compact {
            grid-template-columns: repeat(var(--numberofboxes), 1fr);
            width: 100%;
        }

        .cta-banner-grid:not(.compact)
        .banner-CTAGrid-Box {
            max-height: 178px;
        }
}