/* .contact-grid {

} */

.contact-box {
    text-align: center;
    padding: 0;
}

.contact-image {
    max-width: 100%;
    max-height: auto;
}

.box-yellow-orange {
    /* background-color: rgb(224, 199, 98); */
    background-image: linear-gradient(to bottom, rgb(224, 199, 98), rgb(240, 137, 97))
}

/* .box-orange {
    background-color: rgb(240, 137, 97);
} */

.box-green-blue {
    background-image: linear-gradient(to bottom, rgb(150, 195, 134), rgb(145, 197, 210))
}

/* .box-blue {
    background-color: rgb(145, 197, 210);
} */

.box-pink-purple {
    background-image: linear-gradient(to bottom, rgb(239, 124, 123), rgb(202, 167, 238))
    /* background-color: rgb(239, 124, 123); */
}

/* .box-purple {
    background-color: rgb(202, 167, 238);
} */

@media only screen and (min-width: 768px) {
    .box-yellow-orange {
        background-image: linear-gradient(to right, rgb(224, 199, 98), rgb(240, 137, 97))
    }
    .box-green-blue {
        background-image: linear-gradient(to right, rgb(150, 195, 134), rgb(145, 197, 210))
    }
    .box-pink-purple {
        background-image: linear-gradient(to right, rgb(239, 124, 123), rgb(202, 167, 238))
    }
}

/* contacts */

.contacts-container {
    padding: 50px 100px;
}

@media only screen and (min-width: 1100px) {
    .contacts-container {
        padding: 50px 200px;
    }
}

.contacts-header {
    color: rgb(31, 31, 31);
    padding: 15px 30px;
    font-weight: 700;
}

.contacts-subheader {
    font-weight: 700;
}

.contacts-text {
    padding: 15px 30px;
    font-size: 18px;
    letter-spacing: 1px;
    color: rgb(31, 31, 31);
}

.special-events-office-header {
    background-color: rgb(207, 236, 253);
}

.facility-location-header {
    background-color: rgb(242, 219, 252);
}

.volunteer-info-header {
    background-color: rgb(253, 241, 205);
}

.program-staff-header {
    background-color: rgb(218, 237, 214);
}


@media (max-width: 768px) {
    .contacts-container {
        padding: 50px 30px;
    }
}