[data-wave] {
  position: relative;
}

[data-wave="top"]:before {
    content: "";
    width: 100%;
    height: 350px;
    position: absolute;
    z-index: 1;
    top: -285px;
    left: 0px;
    background-color: var(--background-color);
    mask-repeat: no-repeat; /* Prevents the image from repeating */
    mask-size: 100% 100%; 
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1728" height="216" viewBox="0 0 1728 216" fill="none"><path d="M50.967 39.0872C178.576 79.1075 269.307 103.361 369.425 123.994C485.079 147.903 567.17 157.079 663.59 156.907C767.751 156.581 849.247 146.619 975.477 118.381C1026.36 107.001 1085.42 92.537 1210.98 60.6204C1335.56 28.9719 1412.64 11.9599 1460.41 5.79116C1545.32 -5.35859 1631.91 0.676071 1713.39 23.3779L1728.58 27.5159L1732.19 210.222L1735.92 243.044L866.834 259.021L-2.11885 274.999L-5.85459 222.407C-7.88531 110.909 -9.43708 19.9295 -9.32213 20.0445C-9.07308 20.1594 17.9775 28.7612 50.967 39.0872Z" fill="%238E26F6"/></svg>');
  }

  [data-wave="top"] > * {
    position: relative;
    z-index: 2;
  }


  @media screen and (max-width: 1700px) {
    [data-wave="top"]:before {
        height: 225px;
        top: -200px;
    }
  }

@media screen and (max-width: 1400px) {
    [data-wave="top"]:before {
        height: 225px;
        top: -195px;
    }
  }

@media screen and (max-width: 1100px) {
    [data-wave="top"]:before {
        height: 190px;
        top: -170px;
    }
  }

@media screen and (max-width: 991px) {
    [data-wave="top"]:before {
        height: 145px;
        top: -140px;
         mask-size: 110% 100%; 
    }
}

@media screen and (max-width: 768px) {
    [data-wave="top"]:before {
        height: 145px;
        top: -140px;
    }
}

@media screen and (max-width: 730px) {
    [data-wave="top"]:before {
        height: 145px;
        top: -120px;
    }
}


@media screen and (max-width: 600px) {
    [data-wave="top"]:before {
        height: 153px;
        top: -141px;
        mask-size: 180% 101%;
    }
}

@media screen and (max-width: 500px) {
    [data-wave="top"]:before {
        height: 130px;
        top: -90px;
        mask-size: 100% 100%;
    }
}