<!-- =======================
Main banner START -->
<section class="position-relative py-8 py-lg-9" style="background-image:url(assets/images/bg/20.jpg); background-position: center left; background-size: cover;">
<!-- Background dark overlay -->
<div class="bg-overlay bg-dark opacity-8"></div>
<div class="container z-index-9 position-relative">
<div class="row py-sm-5">
<!-- Title -->
<div class="col-xl-8 m-auto text-center">
<h6 class="text-white fw-normal mb-3">Discover & Connect With Great Places Around The World</h6>
<h1 class="display-4 text-white mb-0">Let's Discover
<span class="position-relative z-index-9 d-block">London
<!-- SVG START -->
<span class="position-absolute top-50 start-50 translate-middle z-index-n1 d-none d-md-block mt-4">
<svg width="390.5px" height="21.5px" viewBox="0 0 445.5 21.5">
<path class="fill-primary opacity-7" d="M409.9,2.6c-9.7-0.6-19.5-1-29.2-1.5c-3.2-0.2-6.4-0.2-9.7-0.3c-7-0.2-14-0.4-20.9-0.5 c-3.9-0.1-7.8-0.2-11.7-0.3c-1.1,0-2.3,0-3.4,0c-2.5,0-5.1,0-7.6,0c-11.5,0-23,0-34.5,0c-2.7,0-5.5,0.1-8.2,0.1 c-6.8,0.1-13.6,0.2-20.3,0.3c-7.7,0.1-15.3,0.1-23,0.3c-12.4,0.3-24.8,0.6-37.1,0.9c-7.2,0.2-14.3,0.3-21.5,0.6 c-12.3,0.5-24.7,1-37,1.5c-6.7,0.3-13.5,0.5-20.2,0.9C112.7,5.3,99.9,6,87.1,6.7C80.3,7.1,73.5,7.4,66.7,8 C54,9.1,41.3,10.1,28.5,11.2c-2.7,0.2-5.5,0.5-8.2,0.7c-5.5,0.5-11,1.2-16.4,1.8c-0.3,0-0.7,0.1-1,0.1c-0.7,0.2-1.2,0.5-1.7,1 C0.4,15.6,0,16.6,0,17.6c0,1,0.4,2,1.1,2.7c0.7,0.7,1.8,1.2,2.7,1.1c6.6-0.7,13.2-1.5,19.8-2.1c6.1-0.5,12.3-1,18.4-1.6 c6.7-0.6,13.4-1.1,20.1-1.7c2.7-0.2,5.4-0.5,8.1-0.7c10.4-0.6,20.9-1.1,31.3-1.7c6.5-0.4,13-0.7,19.5-1.1c2.7-0.1,5.4-0.3,8.1-0.4 c10.3-0.4,20.7-0.8,31-1.2c6.3-0.2,12.5-0.5,18.8-0.7c2.1-0.1,4.2-0.2,6.3-0.2c11.2-0.3,22.3-0.5,33.5-0.8 c6.2-0.1,12.5-0.3,18.7-0.4c2.2-0.1,4.4-0.1,6.7-0.1c11.5-0.1,23-0.2,34.6-0.4c7.2-0.1,14.4-0.1,21.6-0.1c12.2,0,24.5,0.1,36.7,0.1 c2.4,0,4.8,0.1,7.2,0.2c6.8,0.2,13.5,0.4,20.3,0.6c5.1,0.2,10.1,0.3,15.2,0.4c3.6,0.1,7.2,0.4,10.8,0.6c10.6,0.6,21.1,1.2,31.7,1.8 c2.7,0.2,5.4,0.4,8,0.6c2.9,0.2,5.8,0.4,8.6,0.7c0.4,0.1,0.9,0.2,1.3,0.3c1.1,0.2,2.2,0.2,3.2-0.4c0.9-0.5,1.6-1.5,1.9-2.5 c0.6-2.2-0.7-4.5-2.9-5.2c-1.9-0.5-3.9-0.7-5.9-0.9c-1.4-0.1-2.7-0.3-4.1-0.4c-2.6-0.3-5.2-0.4-7.9-0.6 C419.7,3.1,414.8,2.9,409.9,2.6z"/>
</svg>
</span>
<!-- SVG END -->
</span>
</h1>
</div>
<!-- Search START -->
<div class="col-xl-10 mx-auto">
<div class="bg-blur bg-white bg-opacity-10 border border-light border-opacity-25 rounded-3 p-4 mt-5">
<!-- Form START -->
<form class="row g-3 justify-content-center align-items-center">
<div class="col-lg-5">
<!-- Input -->
<div class="form-input-dropdown position-relative">
<input class="form-control form-control-lg me-1 ps-5" type="text" data-bs-toggle="dropdown" placeholder="What are you looking for..">
<!-- dropdown button -->
<ul class="dropdown-menu input-dropdown shadow rounded-0 rounded-bottom w-100">
<li><a class="dropdown-item" href="#"><i class="bi bi-building fa-fw text-primary me-2"></i>Hotels</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-egg-fried fa-fw text-primary me-2"></i>Restaurants</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-airplane fa-fw text-primary me-2"></i>Flights</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-cup-straw fa-fw text-primary me-2"></i>Bars</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-tv fa-fw text-primary me-2"></i>Arts & Entertainment</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-car-front fa-fw text-primary me-2"></i>Automotive</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-kiss fa-fw text-primary me-2"></i>Beauty & Spa</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-fire fa-fw text-primary me-2"></i>Nightlife</a></li>
</ul>
<!-- Icon -->
<span class="position-absolute top-50 start-0 translate-middle ps-5"><i class="bi bi-search fs-5"></i></span>
</div>
</div>
<div class="col-lg-5">
<!-- Choices -->
<div class="form-mix-icon-input form-size-lg">
<select class="form-select js-choice" data-search-enabled="true">
<option value="">Search hotel</option>
<option>San Jacinto, USA</option>
<option>North Dakota, Canada</option>
<option>West Virginia, Paris</option>
</select>
<!-- Icons -->
<span class="position-absolute top-50 start-0 translate-middle ps-5"><i class="bi bi-geo-alt fs-5"></i></span>
<a href="#" class="h6 mb-0 position-absolute top-50 end-0 translate-middle pe-1">
<i class="fa-solid fa-crosshairs"></i>
</a>
</div>
</div>
<div class="col-lg-2 d-grid">
<!-- Search -->
<a class="btn btn-lg btn-primary mb-0" href="#">Search</a>
</div>
</form>
<!-- Form END -->
</div>
</div>
<!-- Search END -->
</div> <!-- Row END -->
</div>
</section>
<!-- =======================
Main banner END -->