.mainContent{
    display: flex;
    flex-direction:column; /* so that the screen shots are below the description */
    padding: 0; /* remove the padding set by site.css */
    margin-top:100px; /* the nav bar is fixed so the form scrolls under it. make sure there's a bit of buffer between the top of the form and the bottom of the nav bar. */

  }

@media (min-width: 768px) { /* when on a destop/tablet device */
    .mainContent {
        margin-top:180px; /* a bit more distance from the top on desktop */ 
    }
}


  
.heroDescription{
    display: flex;
    flex-direction: column; /* vertically arrange the child controls */
    align-items: center; /* horizontally center the child controls */
    min-width: 350px;
}

.welcome{ 
    font-size:40px;
    font-weight: 700;
}

.btn-get-started {
    font-weight: 600;
    font-size: larger;
    line-height:2;
    padding-left: .95rem;
    padding-right: .95rem;
}


.GreyText {
    color: var(--color-grey);
    font-size: 13px;
}

/* sits to under the hero description */
.heroImage{
    margin-top:30px;
    display:flex;
    justify-content:center;
}
    .heroImage img {
        width: 75vw;
    }