.hero {
    background-image:  url(../images/hero_3.png);
    /* width: 50vh; */
    height: 20vh;
    background-size: cover;
    padding-top: 30vh;
    padding-bottom: 40vh;
}

section h1 {
    font-size: 3rem;
    margin-bottom: 25px;
}

section p {
    line-height: 0.5;
}

.inspire {
    background-image:  url(../images/shovel_2.png);
    height: 20vh;
    background-size: cover;
    padding-top: 20vh;
    padding-bottom: 40vh;
}

.inspire p {
    line-height: 1;
}

.contactForm {
    background-image:  url(../images/pots_3.png);
    height: 30vh;
    background-size: cover;
    padding-top: 10vh;
    padding-bottom: 40vh;
}

.shopHero {
    /* background-color: rgb(206, 248, 190); */
    background-image:  url(../images/store_hero_2.png);
    height: 40vh;
    background-size: cover;
    padding-top: 10vh;
    padding-bottom: 40vh;
}

.shopHero h1 {
    padding-top: 12vh;
}
/* .shopSection img {
    background-color: corn;
    height: 30vh;
    background-size: cover;
    padding-top: 10vh;
    padding-bottom: 40vh;
} */

.card-body p {
    line-height: 1.5;
}

    /* Custom */ 
    @media only screen and (min-width : 320px) {
        #heroSection{
            background-color:red; 
        }
    }

    /* really Small Devices */ 
    @media only screen and (min-width : 480px) {
        #heroSection{
            background-color:white; 
        }       
    }
    

    /* Small Devices*/
    @media only screen and (min-width : 768px) {
        #heroSection{
            background-color:green;
        }
        
        #inspireSection {
            background-image: linear-gradient(rgba(102,51,0.0.5),rgba(153,102,51,0.2)), url(../images/shovel_2.png);
        }
    }

    /* Medium Devices */
    @media only screen and (min-width : 1000px) {
        #heroSection{
            background-color:blue; 
        }
    }

    /* Big Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        #heroSection{
            background-color:black;
        }
    }