body {
    margin: 0;
    font-family: sans-serif;
}

a {
   text-decoration:none;
   color:#000;
}

.hero {
    /* Sizing */
    width: 100vw;
    height: 40vh;
    
    /* Flexbox stuff */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Text styles */
    text-align: center;
    color: white;
    
    /* Background styles */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('/Content/heo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: inherit;
}

.hero h1 {
    /* Text styles */
    font-size: 5em;
    
    /* Margins */
    margin-top: 0;
    margin-bottom: 0.5em;
}

.hero .btn {
    /* Positioning and sizing */
    display: block;
    width: 200px;
    
    /* Padding and margins */
    padding: 1em;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    
    /* Text styles */
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    
    /* Border styles */
    border: 3px solid white;
    border-radius: 20px;
    
    /* Background styles */
    background-color: rgba(147, 112, 219, 0.8);
}
.err{
    margin-top:20px;
    margin-bottom:20px;
    display:block;
}

input {
    width: 90%;
    height: 42px;
    display:block;
    padding: 0 15px;
    border: 1px solid #cecece;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    margin-bottom:30px
}
textarea {

    width: 90%;
    display:block;
    padding: 10px 15px;
    border: 1px solid #cecece;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}

h4{
    text-align:center;
        font-weight: bolder !important;
        color:white;
          font-family: 'Roboto', sans-serif;
          font-size:20px;
}



.sendBtn {
    border-style: solid;
    border-width: 1px;
    position: relative;
    -webkit-border-radius: 5px;
    background-color: #427836;
    border-color: #ffffff;
    color: white;
    transition: background-color 300ms ease-out;
    margin-top: 5px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 16px;
}

form{
    width:100%
}



.flex{
    display:flex;
    flex-direction:row;
    max-width:1360px;
    margin: 0 auto;
    padding:15px;
}

.child {
  flex: 1 0 20%; /* explanation below */
  margin: 5px;
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
  max-height:240px;
}

.card:hover {
  0px 10px 20px 9px rgba(0,0,0,0.2)
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}

.main-content 
{
     max-width:1060px;
    margin: 0 auto;
   
}

.child i {
    padding: 60px;
    font-size:80px;
    color:white;
    padding-bottom:0px;
}

h1{
    font-size:2.5rem;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 15px;
}
h3{
    font-family: 'Roboto', sans-serif;
    font-weight:normal;
}
.gr1{
    background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.gr2{
background: #f12711;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.gr3{
    background: #000046;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.gr4{
    background: #e96443;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #904e95, #e96443);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #904e95, #e96443); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.gr5{
    background: #8E2DE2;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

@media (max-width: 760px) {
 .flex{
     flex-direction:column;
 }

 .main-content {
     padding:15px;  
       margin:15px;
 }
    .child i {
           padding: 0px;
    padding-top: 30px;
    }

 .card{width:97%;

 }
    .child {
        flex: 1 0 100%; /* explanation below */
    }

    img{
            height: 250px;
    }
}