.flex-container {
    display: flex;
    align-items: stretch;
    max-width: 1140px;
    margin: auto;
    margin-top: 60px;
}
.flex-container:last-of-type {
    margin-bottom: 60px;
}
.flex-container > .content {
    flex-grow: 1;
}
.content.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}
.content > div {
    margin-top: 30px;
}
.text-content.centered {
    text-align: center;
}
.content > .text-content > .stripe {
    border-radius: 5px;
    content: "";
    width: 40px;
    height: 5px;
    background-color: var(--primary-color);
    display: inline-block;
}
.content > .text-content > .title {
    font-family: MontserratLight;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.3em;
    padding: 10px;
}
.content > .text-content > .text {
    font-family: MontserratExtraLight;
    font-size: 16px;
}
.text-content.light-text > .title, .text-content.light-text > .text {
    color: #fff;
}
.text-content.light-text > .stripe {
    background-color: #fff;
}
.content {
    padding: 0 20px;
}
.content.down {
    transform: translateY(40px);
}
.content.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content.column > div {
    margin-bottom: 40px;
}

/*
*
*   CARDS
*
*/
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cards-container > .card {
    margin-bottom: 60px;
}
.card {
    box-shadow: #ececec 0px 0px 15px;
    border-radius: 20px;
    overflow: hidden;
}
.card:hover {
   box-shadow: #cacaca 0px 0px 20px;
}
.card.no-shadow {
    box-shadow: none;
}
.card-body {
    background-color: #fff;
    padding: 40px;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
}
.card-body.centered {
    padding: 0 40px;
    justify-content: center;
}
.card-body div:not(:last-child) {
    margin-bottom: 15px;
}
.card-body > .card-image {
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
}
.card-body > .card-title {
    color: #888888;
    font-family: "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: 0.3px;
}
.card-body > .card-desc {
    font-size: 14px;
    font-family: MontserratLight;
    text-align: center;
}
.card.red {
    background-image: linear-gradient(to bottom right, #F9713D, #DB5A33);
}
.card.blue {
    background-image: linear-gradient(to bottom right, #37649B, #163562);
}
.card.red .card-body, .card.blue .card-body {
    background-color: transparent;
}
.card.red .card-title, .card.blue .card-title,
.card.red .card-desc, .card.blue .card-desc {
    color: #fff;
}
@media (max-width: 1024px) {
    .cards-container {
        justify-content: space-evenly;
    }
}
/*
*
*   BUTTON
*
*/
.msa-button:hover, .msa-button:focus {
    color: #FFFFFF;
    background-color: #271C49ED;
}
.msa-button {
    font-family: "Muli", Sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background-image: var(--main-background-image);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 100px 100px 100px 100px;
    transition: transform 400ms ease-out ;
}
.msa-button > a {
    color: #fff;
    display: inline-block;
    padding: 20px 10px 20px 15px;
    text-decoration: none;
}
.msa-button.light {
    background-color: transparent;
    border: 3px solid #fff;
}
.msa-button.light > a {
    color: #fff;
    text-decoration: none;
}
.msa-button.white {
    background-color: white;
    background-image: none;
    border: 3px solid #fff;
}
.msa-button.white > a {
    color: var(--secondary-color);
    text-decoration: none;
}
.msa-button:active, 
.msa-button:focus, 
.msa-button:hover {
    transform: scale(0.9);
}
/*
*
*   CONTACT BANNER
*
*/
.contact-banner{
    background-image: url(../images/Contact-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 372px;
    width: 100vw;
}
.contact-banner > .content {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}
.contact-banner > .content > div {
    flex: 1;
}
.contact-banner .title {
    color: #fff;
    font-size: 30px;
    font-family: MontserratBold;
}
.contact-banner .button {
    display: flex;
    justify-content: center;
}
@media (max-width: 768px) {
    .contact-banner .title {
        text-align: center;
    }
    .contact-banner > .content {
        flex-direction: column;
        align-items: center;
    }
}