﻿body {
    --off-white: #eaeaea;
    --light-grey: lightgrey;
    --lilac: #664265;
    --blue-dark: #001920;
    --blue-light: #e9f0f9;
    --blue: #004b5e;
}

/*#region - Text Block*/
.widget_text_block {
    margin-left: -60px;
    margin-right: -60px;
    width: calc(100% + 120px) !important;
}

    .widget_text_block .image.flex-image img {
        width: 100%;
    }

    .widget_text_block .text .manual_container_left {
        margin-left: 0 !important;
    }

.text_block {
    --padding: 70px;
    --margin: 60px;
    width: 100%;
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}


    .text_block .text {
        background: var(--light-grey);
    }

    .text_block.lilac .text,
    .text_block[data-color="lilac"] .text {
        background: var(--lilac);
    }

    .text_block.blue .text,
    .text_block[data-color="blue"] .text {
        background: var(--blue);
    }

    .text_block .text .manual_container_left {
        padding: var(--padding) 30px var(--padding) 30px;
    }

    .text_block .image {
        margin-top: -15px;
        margin-bottom: -15px;
        background-size: cover;
        background-position: center;
    }

    .text_block.style_2 .text,
    .text_block[data-style="two"] .text {
        z-index: 2;
    }

    .text_block.style_2 .image,
    .text_block[data-style="two"] .image {
        margin-left: -100px;
    }

    .text_block .image .text_block_image,
    .text_block .image .text_block_image p,
    .text_block .image .text_block_image p img {
        height: 100%;
    }

        .text_block .image .text_block_image p img {
            object-fit: cover;
            height: 100% !important;
            width: 100% !important;
        }

    .text_block + .text_block {
        margin-top: 100px;
    }
/*#endregion*/



/*#region Cards*/

.widget_cards .cards {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

    .widget_cards .cards .card {
        flex: 1 1 0px;
        padding: 15px;
    }

.widget_cards[data-color="offwhite"] .card {
    background: var(--off-white);
}

.widget_cards[data-color="warmgrey"] .card {
    background: var(--light-grey);
}

.widget_cards[data-color="gradient"] .card {
    background: linear-gradient(-35deg, var(--blue), var(--lilac));
}

.widget_cards[data-color="bluedark"] .card {
    background: var(--blue-dark);
}

.widget_cards[data-color="bluelight"] .card {
    background: var(--blue-light);
}

.widget_cards[data-dropshadow="true"] .card {
    box-shadow: rgba(0,0,0,0.1) 5px 5px 5px;
}

.widget_cards[data-borders="true"] .card {
    border-radius: 10px;
}

.widget_cards[data-amount="two"] .card.two,
.widget_cards[data-amount="three"] .card.two,
.widget_cards[data-amount="four"] .card.two {
    display: flex !important;
}

.widget_cards[data-amount="three"] .card.three,
.widget_cards[data-amount="four"] .card.three {
    display: flex !important;
}

.widget_cards[data-amount="four"] .card.four {
    display: flex !important;
}
/*#endregion*/



.flex {
    display: flex;
}

    .flex::before, .flex::after {
        content: none;
    }

    .flex.flex-wrap {
        flex-wrap: wrap;
    }

    .flex.center {
        justify-content: center;
        align-items: center;
    }

    .flex.space-between {
        justify-content: space-between;
    }

    .flex.justify-end {
        justify-content: end;
    }

    .flex.align-center {
        align-items: center;
    }

    .flex.align-end {
        align-items: end;
    }

    .flex.even_items .flex-item {
        flex: 1 1 0px;
    }

    .flex.col {
        flex-flow: column;
    }

    .flex.gap_1 {
        gap: 1em;
    }

    .flex.gap_2 {
        gap: 1em 2em;
    }

    .flex.wrap {
        flex-wrap: wrap;
    }

    .flex .grow {
        flex-grow: 1;
    }


    .flex > .form-group {
        margin-bottom: 0;
    }
.white_text,
.white_text h1,
.white_text h2,
.white_text h3,
.white_text h4,
.white_text h5,
.white_text h6,
.white_text p {
    color: #fff !important;
}

    .white_text a:not(.btn) {
        color: #fff;
    }

        .white_text a:not(.btn):hover {
            color: var(--yellow);
        }

    .white_text h1 span {
        color: var(--blue-light);
    }

    .white_text hr {
        height: 2px;
        background-color: #fff;
        border-radius: 50px;
    }