@media (max-width: 550px) {
     * {
       padding: 0;
       margin: 0;
     }

  body {
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
  }


  .wrapper {
    background-color:  hsl(0, 0%, 98%);
    height: 100%;
  }


  .container {
    width: 100%;
    text-align: center;
  }

  .container h1 {
    width: 80%;
    margin-left: 10%;
    padding-top: 20%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
  }

  .container h2 {
    width: 80%;
    margin-left: 10%;
    padding-top: 2%;
    color: hsl(234, 12%, 34%);
    font-weight: 600;
    font-size: 1.9rem;
  }

  .container p {
    width: 80%;
    margin-left: 10%;
    padding-top: 5%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
    font-size: 1.2rem;
  }

  .section-1 {
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
    background-color: white;
    border-top: 3px solid  hsl(180, 62%, 55%);
    border-radius: 10px;
    box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
  }

  .section-1 h1 {
    width: 80%;
    padding-top: 5%;
    padding-left: 10%;
    font-size: 1.6rem;
    color: hsl(234, 12%, 34%);
  }
  .section-1 p {
    width: 80%;
    padding-left: 10%;
    padding-top: 2%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
    font-size: 1.1rem;
  }

  .section-1 img {
    width: 20%;
    margin-left: 70%;
    margin-top: 13%;
    margin-bottom: 7%;
  }


  .section-2 {
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
    background-color: white;
    border-top: 3px solid hsl(0, 78%, 62%);
    border-radius: 10px;
    box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
  }

  .section-2 h1 {
    width: 80%;
    padding-top: 5%;
    padding-left: 10%;
    font-size: 1.6rem;
    color: hsl(234, 12%, 34%);
  }
  .section-2 p {
    width: 80%;
    padding-left: 10%;
    padding-top: 2%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
    font-size: 1.1rem;
  }

  .section-2 img {
    width: 20%;
    margin-left: 70%;
    margin-top: 13%;
    margin-bottom: 7%;
  }


  .section-3 {
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
    background-color: white;
    border-top: 3px solid hsl(34, 97%, 64%);
    border-radius: 10px;
    box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
  }

  .section-3 h1 {
    width: 80%;
    padding-top: 5%;
    padding-left: 10%;
    font-size: 1.6rem;
    color: hsl(234, 12%, 34%);
  }
  .section-3 p {
    width: 80%;
    padding-left: 10%;
    padding-top: 2%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
    font-size: 1.1rem;
  }

  .section-3 img {
    width: 20%;
    margin-left: 70%;
    margin-top: 13%;
    margin-bottom: 7%;
  }


  .section-4 {
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
    background-color: white;
    border-top: 3px solid  hsl(212, 86%, 64%);
    border-radius: 10px;
    box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
  }

  .section-4 h1 {
    width: 80%;
    padding-top: 5%;
    padding-left: 10%;
    font-size: 1.6rem;
    color: hsl(234, 12%, 34%);
  }
  .section-4 p {
    width: 80%;
    padding-left: 10%;
    padding-top: 2%;
    color: hsl(229, 6%, 66%);
    font-weight: 200;
    font-size: 1.1rem;
  }

  .section-4 img {
    width: 20%;
    margin-left: 70%;
    margin-top: 13%;
    margin-bottom: 7%;
  }

  footer {
    width: 80%;
    margin-left: 10%;
    text-align: center;
    color:  hsl(234, 12%, 34%);
    font-size: 1rem;
    padding-top: 10%;
    padding-bottom: 5%;
  }

  footer a {
    color: hsl(234, 12%, 34%);
    text-decoration: none;
  }

}


@media (min-width: 551px) {

  * {
    padding: 0;
    margin: 0;
  }

body {
 padding: 0;
 margin: 0;
 font-size: 15px;
 font-family: 'Poppins', sans-serif;
}


.wrapper {
 background-color:  hsl(0, 0%, 98%);
}


.box {
  width: 80%;
  margin-left: 10%;
  display: flex;
}

.container {
 width: 100%;
 text-align: center;
}

.container h1 {
 width: 50%;
 margin-left: 25%;
 padding-top: 5%;
 color: hsl(229, 6%, 66%);
 font-weight: 200;
}

.container h2 {
 width: 50%;
 margin-left: 25%;
 color: hsl(234, 12%, 34%);
 font-weight: 600;
 font-size: 1.9rem;
}

.container p {
 width: 40%;
 margin-left: 30%;
 color: hsl(229, 6%, 66%);
 font-weight: 200;
 font-size: 1rem;
}

.section-1 {
  width: 25%;
  background-color: white;
  border-top: 3px solid  hsl(180, 62%, 55%);
  border-radius: 10px;
  box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
position: absolute;
left:10%;
top: 80%;
}

.section-1 h1 {
  width: 80%;
  padding-top: 5%;
  padding-left: 10%;
  font-size: 1.4rem;
  color: hsl(234, 12%, 34%);
}
.section-1 p {
  width: 80%;
  padding-left: 10%;
  padding-top: 2%;
  color: hsl(229, 6%, 66%);
  font-weight: 200;
  font-size: 0.9rem;
}

.section-1 img {
  width: 20%;
  margin-left: 70%;
  margin-top: 11%;
  margin-bottom: 5%;
}


.section-2 {
  width: 25%;
  background-color: white;
  border-top: 3px solid hsl(0, 78%, 62%);
  border-radius: 10px;
  box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
position: absolute;
top: 50%;
left:  37.5%;
}

.section-2 h1 {
  width: 80%;
  padding-top: 5%;
  padding-left: 10%;
  font-size: 1.4rem;
  color: hsl(234, 12%, 34%);
}
.section-2 p {
  width: 80%;
  padding-left: 10%;
  padding-top: 2%;
  color: hsl(229, 6%, 66%);
  font-weight: 200;
  font-size: 0.9rem;
}

.section-2 img {
  width: 20%;
  margin-left: 70%;
  margin-top: 11%;
  margin-bottom: 5%;
}


.section-3 {
  width: 25%;
  background-color: white;
  border-top: 3px solid hsl(34, 97%, 64%);
  border-radius: 10px;
  box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
position: absolute;
top: 105%;
left: 37.5%;
}

.section-3 h1 {
  width: 80%;
  padding-top: 5%;
  padding-left: 10%;
  font-size: 1.4rem;
  color: hsl(234, 12%, 34%);
}
.section-3 p {
  width: 80%;
  padding-left: 10%;
  padding-top: 2%;
  color: hsl(229, 6%, 66%);
  font-weight: 200;
  font-size: 0.9rem;
}

.section-3 img {
  width: 20%;
  margin-left: 70%;
  margin-top: 11%;
  margin-bottom: 5%;
}


.section-4 {
  width: 25%;
  background-color: white;
  border-top: 3px solid  hsl(212, 86%, 64%);
  border-radius: 10px;
  box-shadow: -webkit-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
-moz-box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
box-shadow: 0px 6px 12px -2px rgba(23,23,23,1);
position: absolute;
left: 65%;
top: 80%;

}
.section-4 h1 {
  width: 80%;
  padding-top: 5%;
  padding-left: 10%;
  font-size: 1.4rem;
  color: hsl(234, 12%, 34%);
}
.section-4 p {
  width: 80%;
  padding-left: 10%;
  padding-top: 2%;
  color: hsl(229, 6%, 66%);
  font-weight: 200;
  font-size: 0.9rem;
}

.section-4 img {
  width: 20%;
  margin-left: 70%;
  margin-top: 11%;
  margin-bottom: 5%;
}

footer {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  color:  hsl(234, 12%, 34%);
  font-size: 1.3rem;
  padding-top: 53%;
  padding-bottom: 3%;
  position: relative;
}

footer a {
  color: hsl(234, 12%, 34%);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}




}