<!--Hero signup-->
<section class="position-relative bg-light">
    <!--Hero divider vector-->
    <svg class="position-absolute start-0 bottom-0 h-lg-30" preserveAspectRatio="none" width="100%"
      height="35%" viewBox="0 0 1296 220" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" clip-rule="evenodd"
        d="M1296 0H1241.56C1188.17 0 1080.35 0 971.477 21.9407C863.651 43.8814 755.826 87.7628 648
        110.296C540.174 132.237 432.349 132.237 323.477 128.086C215.651 124.528 107.826 117.412
        54.4362 113.854L3.71933e-05 110.296V220H54.4362C107.826 220 215.651 220 323.477 220C432.349
        220 540.174 220 648 220C755.826 220 863.651 220 971.477 220C1080.35 220 1188.17 220 1241.56
        220H1296V0Z"
      fill="white" />
    </svg>
 <div class="container col-xl-10 col-xxl-8 pt-12 pt-lg-14 pb-9">
  <div class="row align-items-center pb-lg-11">
    <div class="col-lg-7 text-center text-lg-start">
         <!--Hero heading-->
         <h1 class="display-2 mb-4">Vertically centered hero sign-up form</h1>
         <!--Hero subheading-->
         <p class="w-lg-90 lead">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum.
         </p>
    </div>
    <div class="col-11 mx-auto col-lg-4">
     <div class="position-relative pe-4 pt-4">
      <!--Signup form-->
      <form class="px-4 py-5 rounded-4 bg-white shadow-lg z-index-1 position-relative needs-validation"
      novalidate>
       <!--Input floating-->
         <div class="form-floating mb-3">
         <input type="email" class="form-control" required id="floatingInput" placeholder="name@example.com">
         <label for="floatingInput">Email address</label>
         <span class="invalid-feedback">Please enter a valid email address</span>
        </div>
        <!--Password floating-->
        <div class="form-floating mb-3">
        <input type="password" required class="form-control" id="floatingPassword"
          placeholder="Password">
          <label for="floatingPassword">Password</label>
          <span class="invalid-feedback">Enter the password</span>
         </div>
        <!--label-->
        <div class="mb-3 form-check">
         <input class="form-check-input me-1" id="terms" type="checkbox" value="">
         <label class="form-check-label small" for="terms">Subscribe to our
         newsletter</label>
        </div>
        <!--Submit button-->
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <!--Divider line-->
        <hr class="mt-4 mb-3">
        <!--Info text-->
        <small class="text-muted">By clicking Sign up, you agree to the terms & conditions of use.</small>
       </form>
     </div>
    </div>
   </div>
  </div>
 <!--/.content-->
</section>
<!--/Hero end-->