How can we help?

<!-- Hero -->
<div class="bg-light">
  <div class="container content-space-2 content-space-lg-3">
    <div class="row justify-content-lg-between align-items-md-center">
      <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
        <div class="mb-3">
          <h1>How can we help?</h1>
        </div>

        <form>
          <!-- Input Card -->
          <div class="input-card mb-3">
            <div class="input-card-form">
              <label for="searchAnswersForm" class="form-label visually-hidden">Search for answers</label>
              <input type="text" class="form-control form-control-lg" id="searchAnswersForm" placeholder="Search for answers" aria-label="Search for answers">
            </div>
            <button type="button" class="btn btn-primary btn-lg">
              <i class="bi-search"></i>
            </button>
          </div>
          <!-- End Input Card -->
        </form>

        <!-- Links -->
        <div class="d-flex">
          <p class="text-nowrap">Popular help topics:</p>

          <ul class="list-inline ms-1 mb-0">
            <li class="list-inline-item"><a class="link" href="#">pricing,</a></li>
            <li class="list-inline-item"><a class="link" href="#">upgrade,</a></li>
            <li class="list-inline-item"><a class="link" href="#">hosting</a></li>
          </ul>
        </div>
        <!-- End Links -->
      </div>
      <!-- End Col -->

      <div class="col-md-6">
        <div class="ps-md-4">
          <img class="img-fluid" src="../assets/img/illustrations/chat-with-bg-colors.png" alt="Image Description">
        </div>
      </div>
      <!-- End Col -->
    </div>
    <!-- End Row -->
  </div>
</div>
<!-- End Hero -->