
.support-hero {
    display: flex;
    flex-direction: column;
    background: linear-gradient(90deg, rgba(54, 72, 81, 0.90) 38.56%, rgba(48, 48, 48, 0.00) 80.66%), url("/assets/img/girl in library.png") lightgray 50% / cover no-repeat;
    /*width: 100vW;*/
    height: 400px;
    align-self: center;
    background-repeat: no-repeat;
    background-size: auto;
    /*background-attachment: fixed;*/
    background-position: 70%;
    align-items: center;
    justify-content: center;
}

.support-card {
    padding: 30px;
    width: 100%;
    min-width: 25%;
    margin: 0px;
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
    .four-cards{
       flex-wrap:wrap !important;
    }
    .four-cards .support-card{
        flex: 0 1 50% !important;
    }
}

#red-card {
    background-color: #FEE2E2;
}
#blue-card {
    background-color: #D3DDE8;
}
#yellow-card {
    background-color: #FEF3C7;
}
#green-card {
    background-color: #CEE3E0;
}

.more-programs {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    background-image: url("/assets/img/math-teacher-smiling.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    border-radius: 5px;
}

.program-content {
    padding: 80px 50px 0px 50px;
    color: white;
}

.ease-burden {
    margin: 100px auto 50px;
}

.ease-content {
    align-content: center;
    padding: 20px;
}

.spread-word {
    background-image: url("/assets/img/spread-word-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    border-radius: 5px;
}

.spread-word-content {
    padding: 7rem 50px 0px 50px;
}

@media only screen and (min-width: 1024px){
    .program-content {
        width: 50%;
    }
}

@media only screen and (max-width: 768px) {
    .more-programs {
        background-image: url("/assets/img/math-teacher-smiling.png");
        background-position: center;
        height: auto;
        border-radius: 0;
    }

    .program-content {
        padding: 80px 50px 30px 50px;
        width: 75%;
    }

    .ease-img {
        width: 50%;
    }

    .ease-content {
        width: 50%;
        padding: 20px;
    }

    .ease-burden {
        margin: 0px;
    }

    .spread-word {
        background-position: center;
        height: 480px;
        border-radius: 0px;
    }

    .spread-word-content {
        padding: 7rem 20px 0px;
    }

    .support-card {
        padding: 30px;
    }
}

@media (max-width: 600px) {
    .support-hero {
        background-image: url(/assets/img/library-girl-mobile.png);
        background-size: cover;
        height:600px !important;
        align-self: end;
        align-items: center;
        justify-content: end;
        padding-bottom: 40px;
    }

    .more-programs {
        background-image: url(/assets/img/math-teacher-smiling-mobile.png);
        height: 600px;
        background-position: top;
        align-content: end;
    }

    .program-content {
        padding: 30px 20px;
        width: 100%;
    }

    .ease-burden {
        flex-direction: column;
    }

    .ease-img {
        width: 100% !important;
    }

    .ease-content {
        width: 100% !important;
        padding: 0px;
    }

    .spread-word {
        background: var(--Gradient-Linear-Horizontal-02, linear-gradient(103deg, #EFF7FC 0%, #E3EFD2 100%));
        height: auto;
        margin-top: 30px;
    }

    .spread-word-content {
        padding: 30px;
        width: 100% !important;
    }
}