*{
  margin: 0;
  padding: 0;
  list-style:none;
  text-decoration: none;
  border:none;
  outline:0;
  box-sizing:border-box;
}
html,body{
  width: 100%;
  height: 100%;
}
body{
  font-family: 'Muli',sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color: #F9F9FB;
  text-align: center;
  padding-top:60px;
  position: relative;
}
body > h3{
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 600;
  color:rgb(73, 77, 85);
}
body > p{
  color:rgb(97, 102, 112);
  font-size: 14px;
  margin-bottom: 50px;
}
ul{
  width:948px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-right: -15px;
  margin-left: -15px;
}
ul li{
  width: 270px;
  min-width:270px;
  height: 215px;
  background-color: #fff;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 22px;
  border-top:3px solid black;
  display:flex;
  justify-content:center;
  align-items:center;
}
ul li a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
ul li:hover{
  background-color: #daf4f7;
}
ul li a .img{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
  font-size: 50px;
}
ul li a h3{
  color:rgb(73, 77, 85);
  margin-bottom: 15px;
}
ul li a p{
  color:rgb(97, 102, 112);
  font-size: 14px;
}
ul li:nth-child(1){
  border-top:3px solid #1cbac9;
}
ul li:nth-child(2){
  border-top:3px solid #1cbac9;
}
ul li:nth-child(3){
  border-top:3px solid #1cbac9;
}
ul li:nth-child(4){
  border-top:3px solid #1cbac9;
}
ul li:nth-child(5){
  border-top:3px solid #1cbac9;
}
ul li:nth-child(6){
  border-top:3px solid #1cbac9;
}

ul li:nth-child(1):hover h3{
  color:#e03f1c;
}
ul li:nth-child(2):hover h3{
  color:#e03f1c;
}
ul li:nth-child(3):hover h3{
  color: #e03f1c;
}
ul li:nth-child(4):hover h3{
  color: #e03f1c;
}
ul li:nth-child(5):hover h3{
  color: #e03f1c;
}
ul li:nth-child(6):hover h3{
  color:#e03f1c;
}


ul li:nth-child(1) a .img{
  color:#1cbac9;
}
ul li:nth-child(2) a .img{
  color: #1cbac9;
}
ul li:nth-child(3) a .img{
  color: #1cbac9;
}
ul li:nth-child(4) a .img{
 color: #1cbac9;
}
ul li:nth-child(5) a .img{
  color:#1cbac9;
}
ul li:nth-child(6) a .img{
  color: #1cbac9;
}

footer{
  margin-top: auto;
  width: 100%;
  height: 50px;
  background-color: #1cbac9;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
}
footer a{
  color:#ff7f00;
}

@media (max-width:960px){
  ul{
    width:700px;
  }
}

@media (max-width:660px){
  ul{
    width:300px;
  }
}





img {
max-width: 100%;
height:auto;
box-sizing:border-box;
display:block;
}