.wave-wrapper {
    width: 250vw;
    height: 250vw;
    position: absolute;
    left: 62%;
    top: 40vh;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-image: linear-gradient(to top, #accbee00 0%, #accbee00 0%);
    overflow: visible;
}
@media (max-width: 540px) {
    .wave-wrapper {
        width: 350vw;
        height: 350vw;
        top: 109vh;
    }
}
@media (max-height: 600px) and (max-width: 767px) {
    .wave-wrapper {
        top: 120vh;
        width: 400vw;
        height: 450vw;
    }
}
@media (min-width: 768px) {
    .wave-wrapper {
        top: 80vh;
        left: 44%;
    }
}
@media (min-width: 1025px) {
    .wave-wrapper {
        width: 200vw;
        height: 250vw;
        top: 18vh;
        left: 30%;
    }
}
@media (min-width: 1900px) {
    .wave-wrapper {
        top: -18vh;
    }
}
.wave {
    width: 100%;
    height: 100%;
    position: absolute;
    /* top: 80%;
    left: 19%; */
    margin-left: -500px;
    margin-top: -700px;
    border-radius: 45%;
    /* border-top-left-radius: 40%;
    border-top-right-radius: 35%;
    border-bottom-left-radius: 35%;
    border-bottom-right-radius: 40%;
    border-radius: 100%; */
    background: transparent;
    border: 4px dotted rgba(0, 0, 0, 0.3);
    /* border-top: 5px dotted black; */
    /* animation: wave 35s infinite linear; */
}
.wave-1 {
    top: 79%;
    left: -5%;
    animation: wave 100s infinite linear;
}

.wave-2 {
    top: 77.1%;
    left: -8%;
    animation: wave1 202s infinite linear;
}

.wave-3 {
    top: 77.9%;
    left: -6%;
    animation: wave1 150s infinite linear;
}

.wave-4 {
    top: 78%;
    left: 23.1%;
    animation: wave 258s infinite linear;
}

.wave-5 {
    top: 78.2%;
    left: 23.2%;
    animation: wave 400s infinite linear;
}
.wave-6 {
    top: 78.9%;
    left: 23.3%;
    animation: wave 202s infinite linear;
}

.wave-7 {
    top: 78%;
    left: 13.1%;
    animation: wave1 125s infinite linear;
}

.wave-8 {
    top: 70.2%;
    left: 13.2%;
    animation: wave1 180s infinite linear;
}
.wave-9 {
    top: 74.9%;
    left: 13.3%;
    animation: wave1 90s infinite linear;
}

.wave-10 {
    top: 75%;
    left: -10%;
    animation: wave 220s infinite linear;
}

.wave-11 {
    top: 75.2%;
    left: -10%;
    animation: wave 189s infinite linear;
}

.wave-12 {
    top: 75.9%;
    left: 2%;
    animation: wave 156s infinite linear;
}

.wave-13 {
    top: 79.2%;
    left: -5%;
    animation: wave 121s infinite linear;
}
.wave-14 {
    top: 78%;
    left: -5%;
    animation: wave 50s infinite linear;
}

/* 

  .wave-4 {
    top: 75.4%;
    left: 14.4%;
    animation: wave 45s infinite linear;
  }

  .wave-5 {
    top: 75.2%;
    left: 14.2%;
    animation: wave 45s infinite linear;
  }

  .wave-6 {
    top: 75.4%;
    left: 14.4%;
    animation: wave 35s infinite linear;
  } 
  .wave-7 {
    top: 75.2%;
    left: 14.2%;
    animation: wave 35s infinite linear;
  }

  .wave-8 {
    top: 75.4%;
    left: 14.4%;
    animation: wave 40s infinite linear;
  }  */

@keyframes wave {
    from {
        transform: rotate(0deg);
    }
    from {
        transform: rotate(-360deg);
    }
}
@keyframes wave1 {
    from {
        transform: rotate(0deg);
    }
    from {
        transform: rotate(360deg);
    }
}