body{
    font-family: "Open Sans", sans-serif;
    margin: auto;
}
p{
    line-height: 1.8;
    font-weight: 500;
}
.mainhero{
     align-content: center;
     justify-content: center;
     padding: 300px;
       padding-bottom: 1px;
    padding-top: 10px;
}
.header{
     align-content: center;
     justify-content: center;
     padding: 300px;
       padding-bottom: 1px;
    padding-top: 80px;
}    

.hero{
display: flex;
          justify-content: space-between;
    padding: 326px;
    padding-bottom: 1px;
    padding-top: 40px
}
.box1, .box2, .box3 {
        padding: 53px;
    padding-bottom: 1px;
    padding-top: 20px;
}
.btn{
    padding:20px 61px;
    display:flex;
   border: 4px solid #00aef0;
        border-radius: 7px;
        font-family: "Open Sans", sans-serif;
    font-weight: 500;
font-size: 20px;
color:black;
text-decoration:none;
}
@media (max-width: 1212px) {
.mainhero{
    padding: 0px 55px;
}
.header{
    padding: 52px 130px 10px 55px;

}
.hero{
   display: flex;
    align-content: center;
 
         padding-top: 80px;
         padding: 0px;
}
}

@media (max-width: 575px) {
 .box1, .box2, .box3 {
    padding:30px;
}
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:10px;
}
.btn{
    font-size: 21px;
    padding: 23px 50px ;
}
.mainhero{
     padding: 20px;
}
.header{
    padding: 20px;
}
.header div{
    display: flex;
    justify-content: center;
}
}