.wave-container {
  position: relative;
  width: 100%;
  height: 130px;
}
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(../images/wave.png);
  background-size: 1000px 100px;
  animation: wave-animate 4s ease-in-out infinite;
}
.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  background: url(../images/wave.png);
  background-position-x: 400px;
}
.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  background-position-x: 300px;
  background: url(../images/wave.png);
}
.wave#wave3 {
  z-index: 998;
  opacity: 0.2;
  background-position-x: 200px;
  background: url(../images/wave.png);
}
.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  background-position-x: 100px;
  background: url(../images/wave.png);
}

.wave#wave5 {
  z-index: 1000;
  opacity: 1;
  background-position-x: 400px;
}
.wave#wave6 {
  z-index: 999;
  opacity: 0.5;
  background-position-x: 300px;
}
.wave#wave7 {
  z-index: 998;
  opacity: 0.2;
  background-position-x: 200px;
}
.wave#wave8 {
  z-index: 999;
  opacity: 0.7;
  background-position-x: 100px;
}

.flip {
  transform: scaleY(-1);
}
.the-benefits {
  padding-bottom: 0;
}

@keyframes wave-animate {
  0% {
    transform: translatY(0px);
  }
  50% {
    transform: translateY(10px);
  }
}