Vertically centered hero sign-up form

    <!--::Start Hero Signup::-->
    <section class="position-relative bg-primary-subtle">
       <!--:Hero divider vector:-->
       <svg class="position-absolute start-0 bottom-0 h-lg-30" style="color: var(--bs-body-bg);" 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="currentColor" />
       </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">
                   <!--:Heading:-->
                   <h1 class="display-2 mb-4">Vertically centered hero sign-up form</h1>
                   <!--: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-body shadow-lg z-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>
                           <!--:Info text:-->
                           <small class="text-body-tertiary d-block pt-2">By clicking Sign up, you agree to the terms & conditions
                               of use.</small>
                       </form>
                   </div>
               </div>
           </div>
       </div>
   </section>
   <!--::/End Hero Signup::-->