.home {
    --card-shift: 150px;
    background-color: var(--cl-secondary);
}

.home-hero {
    overflow-x: hidden;

    h1 {
        margin-bottom: 0;
    }

    #hero-subheading {
        margin-top: 0;
        letter-spacing: 0;
        font-size: 26px;
        text-align: left;
    }

    img {
        min-width: 100%;
        max-width: 800px;
        width: auto;
    }

    .content {
        margin-bottom: 4em;
    }   

    #hero-paragraph {
        margin-top: 1.5em;
    }
}

@media only screen and (width < 1000px) {
    .home-hero .content {
        text-align: center;
        margin-top: 0;

        #hero-subheading{
            text-align: center;
            margin-top: 1em;
            font-size: 18px;
        }
    }
}

.mission {
    overflow-x: hidden;

    h2 {
        text-align: center;
    }

    .content {
        margin-bottom: 5em;
    }
}

@media only screen and (width < 1000px) {
    .mission .content {
        margin-bottom: 0;
    }
}

.programs {
    text-align: center;
    padding-bottom: var(--card-shift);
}

@media only screen and (width < 1000px) {
    .programs .content{
        margin-top: 0;

        h2{
            margin-top: 0;
        }
    }
}

.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: calc(var(--card-shift) * -1 + 50px);

    > img {
        position: absolute;
        top: 0px;
    }
    
    .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1em;
    }
}
    
@media only screen and (width < 1000px) {
    .index-page {
        --card-shift: 0px;
    }

    .card-wrapper .content {
        flex-direction: column;
    }
}

.card {
    transform: translateY(calc(var(--card-shift) * -1));
    flex: 1;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.2), 0 6px 20px 0 rgba(160, 160, 160, 0.2);
    word-wrap: break-word;
    background-color: var(--cl-secondary);
    position: relative;
    max-width: 310px;
    overflow: hidden;
    padding: 0;

    .body {
        padding: 0 1em 2em;
        display: flex;
        flex-direction: column;

        h3 {
            margin-bottom: 0;
        }

        a.decorated {
            align-self: center;
            position: absolute;
            bottom: 1em;
        }
    }

}

.explore {
    text-align: center;

    .gallery {
        padding: 1em;
        margin-top: 1em;
        margin-bottom: 2em;
        display: grid;
        grid-template-areas: 
        "a b c c"
        "a d c c"
        "e e f g"
        "e e f h";

        gap: 10px;

        img {
            height: 100%;
            object-fit: cover;
        }

        :nth-child(1) {
            grid-area: a;
        }
        :nth-child(2) {
            grid-area: b;
        }
        :nth-child(3) {
            grid-area: c;
        }
        :nth-child(4) {
            grid-area: d;
        }
        :nth-child(5) {
            grid-area: e;
        }
        :nth-child(6) {
            grid-area: f;
        }
        :nth-child(7) {
            grid-area: g;
        }
        :nth-child(8) {
            grid-area: h;
        }
    }
}

@media only screen and (width < 1000px) {
    .explore {
        .gallery {
            
            grid-template-areas: 
            "a b"
            "a d"
            "c c"
            "c c"
            "f g"
            "f h"
            "e e"
            "e e";

            gap: 3px;
        }
    }
}

.testimonials {
    margin-top: 5em;
    margin-bottom: 5em;
    padding: 5em 0 7em 0;

    h2{
        text-align: center;
    }
}

@media only screen and (width < 1000px) {
    .testimonials .parentQuotes {
        flex-direction: column;
    }
}

.parentQuotes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;

    > div{
        max-width: 310px;
    }

    img {
        width: 2em;
    }
}
    
#middlepage-wave {
    width: calc(100% + 10px);
    margin: 0 -5px clamp(-9em, -6vw, -1em) -5px;
}