Move svg with container

I'm doing a restyling of my website.
I have an animated wave in svg and I want to move it under the container of the section. Now it's fixed to a position, you can see it here.

This is my html:

<section id="hero">

    <div class="container">
      <div class="row">
        <div class="col-lg-7 pt-5 pt-lg-0 order-2 order-lg-1 d-flex align-items-center">
          <div data-aos="zoom-out">
            <h1>Pixels of possibilities</h1>
            <h2>I'm a <span class="typed" data-typed-items="Designer, Instagram filter creator, 3D modeler, Photographer"></span></h2>
            
            <div class="text-center text-lg-left">
              <a href="#about" class="btn-get-started scrollto">Get Started</a> 
            </div> 
            
            <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <-- SPACING FOR TESTING -->
          </div>
          
        </div>
        <div class="col-lg-5 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="300">
          <img src="assets/img/hero-img.png" class="img-fluid animated" alt="">
        </div>
      </div>
    </div>

    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
      <defs>
        <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
      </defs>
      <g class="wave1">
        <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
      </g>
      <g class="wave2">
        <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
      </g>
      <g class="wave3">
        <use xlink:href="#wave-path" x="50" y="9" fill="#f3f5fa">
      </g>
    </svg>

  </section><!-- End Hero -->

And here the css:

#hero {
  width: 100%;
  height: 80vh;
  background: url("../img/hero-bg.jpg");
  position: relative;
  padding: 120px 0 0 0;
}

.hero-waves {
  display: block;
  margin-top: 60px;
  width: 100%;
  height: 60px;
  z-index: 5;
  position: relative;
}

All I want is the svg that follows the container, at the bottom of if. What am I doing wrong?