<!-- Hero Section -->
<div class="position-relative overflow-hidden space-top-md-3">
<div class="container position-relative space-top-3 space-bottom-2 space-bottom-md-3 space-bottom-xl-5">
<div class="row position-relative mt-md-n5">
<div class="col-md-8 mb-7 mb-md-0">
<!-- Title -->
<div class="w-md-75 mb-7">
<h1 class="display-4">Discover a place you'll
<span class="text-primary text-highlight-warning">
<span class="js-text-animation"
data-hs-typed-options='{
"strings": ["love to live", "enjoy living"],
"typeSpeed": 90,
"loop": true,
"backSpeed": 30,
"backDelay": 2500
}'></span>
</span>
</h1>
</div>
<!-- End Title -->
<!-- Card -->
<div class="card p-2 mb-3">
<!-- Input Group -->
<div class="form-row">
<div class="col-sm mb-2 mb-sm-0">
<div class="input-group input-group-merge input-group-borderless">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" class="form-control" name="buyAddress" placeholder="Enter location" aria-label="Enter location">
</div>
</div>
<div class="col-sm-auto">
<button type="button" class="btn btn-block btn-primary px-5">Search</button>
</div>
</div>
<!-- End Input Group -->
</div>
<!-- End Card -->
<small class="form-text">Search through over 125,000 listings</small>
</div>
</div>
<!-- End Row -->
<div class="col-md-6 position-md-absolute top-0 right-0">
<img class="img-fluid" src="../../assets/img/900x900/img20.jpg" alt="Image Description">
<figure class="max-w-15rem w-100 position-absolute bottom-0 right-0 z-index-n1">
<div class="mb-n7 mr-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
</div>
</div>
<div class="col-md-10 position-absolute top-0 left-0 z-index-n1 gradient-y-three-sm-primary h-100" style="background-size: calc(1000px + (100vw - 1000px) / 2);"></div>
</div>
<!-- End Hero Section -->
