Im having trouble having a svg overlay take up 100% width, but modifying the height so it aligns where i need it to so the curve is visible over the video see screenshot. What is the best way to overlay a SVG to make it align and display properly, Thanks.

https://codepen.io/JamesTsetsekas/pen/BaggxJq

<style>
  .video-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: -1;
  }

  .vimeo-wrapper {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    overflow: hidden;
    position: relative;
  }

  .vimeo-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center;
    z-index: 2 !important;
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 1 !important;
    opacity: 22% !important;
  }

  .text-section {
    padding: 20px;
    text-align: center;
  }

  .text-content {
    max-width: 800px;
    margin: 0 auto;
    font-weight: 600;
  }

  .text-content p {
    font-size: 48px;
    letter-spacing: -2px;
    line-height: 50pt;
    color: #020202;
  }

  .learn-more-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #f7cd46;
    color: black;
    text-decoration: none;
  }

  .svg-overlay {
    position: absolute;
    top: 173px;
    left: 0;
    width: 100%;
    height: 200%;
    /* Adjust the height as needed */
    z-index: 3;
    object-fit: cover;
  }

  .services {
    margin-top: 20px;
    font-size: 54pt;
    /* Adjusted value */
    font-weight: 600;
    /* Semibold */
    color: white;
  }

  .down-arrow {
    position: absolute;
    bottom: 70px !important;
    /* Adjusted value */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
</style>

<section class="video-section">
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/1008961063?background=1&autoplay=1&loop=1&byline=0&title=0"
      webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="video-overlay"></div>
    <div class="text-overlay">
      <h1>Creativity for</h1>
      <h1>the complete</h1>
      <h1>brand</h1>
      <h1>experience.</h1>
      <div class="services">
        Advertising | Branding | Digital | Social | Events
      </div>
    </div>
  </div>
  <div class="svg-overlay">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2678" version="1.1">
      <path
        d="M 0 64.159 L 0 128.317 6.250 122.384 C 43.706 86.827, 103.466 43.808, 162 10.266 C 171.075 5.066, 178.688 0.629, 178.917 0.406 C 179.146 0.183, 138.983 0, 89.667 0 L 0 0 0 64.159 M 1825.083 0.406 C 1825.313 0.629, 1832.925 5.066, 1842 10.266 C 1898.402 42.587, 1949.025 78.621, 1991.750 116.862 L 2000 124.246 2000 62.123 L 2000 0 1912.333 0 C 1864.117 0, 1824.854 0.183, 1825.083 0.406 M -0 1353.282 L -0 1944.001 1000.250 1943.750 L 2000.500 1943.500 2000.601 1352.500 C 2000.656 1027.450, 2000.514 762.735, 2000.285 764.244 C 1999.245 771.098, 1941.602 817.213, 1897.711 846.306 C 1705.220 973.894, 1431.636 1055.271, 1134 1073.470 C 1085.850 1076.415, 1056.710 1077.249, 1002 1077.249 C 947.290 1077.249, 918.150 1076.415, 870 1073.470 C 572.426 1055.275, 298.778 973.891, 106.383 846.368 C 69.328 821.807, 28.086 789.742, 5.750 768.127 L -0 762.563 -0 1353.282 M 0.497 1353.500 C 0.497 1678.550, 0.611 1811.376, 0.750 1648.668 C 0.889 1485.960, 0.889 1220.010, 0.750 1057.668 C 0.611 895.326, 0.497 1028.450, 0.497 1353.500"
        stroke="none" fill="#fffcfc" fill-rule="evenodd" />
    </svg>
  </div>
</section>

<section class="text-section">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehen.</p>
    <a href="#" class="learn-more-btn">Learn More</a>
  </div>
</section>

I tried setting width: 100% & height: 200% on .svg-overlay aswell as preserveAspectRatio=”none” attribute on the SVG