@media only screen and (max-width: 1300px) {
    #services {
        grid-template-columns: 1fr 1fr;
        margin-left: 30px;
        margin-right: 30px;
    }

    #hero .img {
        max-height: 400px;
    }
}


@media only screen and (max-width: 600px) {
    #services {
        grid-template-columns: 1fr;
        row-gap: 80px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #hero .heading {
        padding-left: 20px;
    }

    #hero .img {
        height: 1000px;
    }

    #services .bmx-container {
        flex-direction: column;
    }

    #services .service-groups {
        display: flex;
        flex-direction: row;
        overflow: scroll;
        margin-bottom: 15px;
    }

    #services .service-detail .active {
        grid-template-columns: 1fr;
    }
}