Search Form Layouts

              
                <!-- Hero -->
                <div class="bg-primary-dark overflow-hidden">
                  <div class="container position-relative content-space-1">
                    <div class="w-lg-75 mx-lg-auto">
                      <!-- Input Card -->
                      <div class="input-card">
                        <div class="input-card-form">
                          <input type="text" class="form-control" placeholder="Search for answers" aria-label="Search for answers">
                        </div>
                        <button type="button" class="btn btn-primary btn-icon">
                          <i class="bi-search"></i>
                        </button>
                      </div>
                      <!-- End Input Card -->
                    </div>

                    <!-- Background Shapes -->
                    <div class="position-absolute" style="top: -6rem; left: -6rem;">
                      <img src="../assets/svg/components/shape-1-soft-light.svg" alt="SVG" width="500" style="width: 12rem;">
                    </div>
                    <div class="position-absolute" style="bottom: -6rem; right: -7rem;">
                      <img src="../assets/svg/components/shape-7-soft-light.svg" alt="SVG" width="250">
                    </div>
                    <!-- End Background Shapes -->
                  </div>
                </div>
                <!-- End Hero -->