<!-- Hero -->
<div class="bg-light">
<div class="container content-space-2">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 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-5">
<img class="img-fluid" src="../assets/svg/illustrations/oc-looking-for-answers.svg" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Hero -->
