How to cut background image from bottom left and right - css

Question

I'm trying to recreate this background image

I have tried using clip-art on this image but I'm not able to get that shape.

.hero-section {
  height: 740px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.postimg.cc/RZxY1MMZ/hero-image.jpg") no-repeat top;
  background-size: cover;
  width: 100%;
  z-index: 5;
  clip-path: polygon(0% 0, 100% 0%, 50% 80%, 0 80%);
}

.hero-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

.hero-heading h1 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.hero-heading h1 svg {
  position: absolute;
  bottom: -10px;
  left: -35px;
  z-index: -1;
}

<section class="hero-section">
  <div class="hero-heading">
    <h1>
      H1 Impact Summary
      <!-- <img src="./assets/underline.svg" alt="Heading Image" /> -->
      <svg xmlns="http://www.w3.org/2000/svg" width="524.381" height="36.652" viewBox="0 0 524.381 36.652">
            <path
              id="Path_2986"
              data-name="Path 2986"
              d="M555.839,170.15c-10.4-2.281-89.638-2.05-95.272-2.8-4.522-.929,5.543-15.028,10.269-17.026,1.67-.714,3.457-.787,7.446-.338,6.3.816,89.608,1.647,89.608,1.647,1.02.472,4.577-.94,5.089-.383,1.686,1.3,136.62,3.018,148.109,3.236,6.971.133,1.3.855,9.566.715,17.59-.242,55.523,1.385,68.882.933a151.426,151.426,0,0,1,23.062.438c10.3.728,65.643,1.459,72.139.622,1.591-.236,2.752-.107,2.7.212-.008.066,38.866,1.286,39,1.539a3.42,3.42,0,0,0,2.536.314c2.086-.277,43.747-.427,44.238.52,1.554,2.7-6.188,13.8-11.5,16.416-5.447,2.8-31.9-1.172-53.966.042l-101.235-2.4-21.9.544c-2.3-1.015-12.31,1.137-17.769-.71-2.319-.738-19.526-1.278-23.47-.659-3.411.469-91.333-3.165-100.724-1.484C636.84,169.521,571.064,170.148,555.839,170.15Z"
              transform="translate(-461.969 -132.524) rotate(-1)"
              fill="#00a3e1"
            />
          </svg>
    </h1>
  </div>
</section>

My Code Sandbox

Or is there any other way to achieve this other than clip-art.

Please any help would be appreciated.