Life Is Adventure Make The Best Of It

<!-- =======================
Main Banner START -->
<section class="pt-0">
	<div class="container position-relative">
		<!-- Bg image -->
		<div class="rounded-3 p-4 p-sm-5" style="background-image: url(assets/images/bg/02.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
			<!-- Banner title -->
			<div class="row justify-content-between pt-0 pb-5"> 
				<div class="col-md-7 col-lg-8 col-xxl-7 pb-5 mb-0 mb-lg-5"> 
					<h1 class="text-white">Life Is Adventure Make The Best Of It</h1>
					<p class="text-white mb-0">Planning for a trip? we will organize your best trip with the best destination and within the best budgets!</p>
				</div>

				<!-- Produce item START -->
				<div class="col-md-5 col-lg-4 col-xl-3 mb-3 mb-sm-0">
					<div class="card shadow p-2 pb-0">
						<!-- Offer badge -->
						<div class="position-absolute top-0 start-0 mt-n3 ms-n3 z-index-9">
							<img src="assets/images/element/05.svg" class="position-relative h-70px" alt="">
							<span class="h5 text-white position-absolute top-50 start-50 translate-middle">40%</span>
						</div>

						<div class="rounded-3 overflow-hidden position-relative">
							<!-- Image -->
							<img src="assets/images/category/tour/05.jpg" class="card-img" alt="">
							<!-- Overlay -->
							<div class="bg-overlay bg-dark opacity-4"></div>
							
							<!-- Hover element -->
							<div class="card-img-overlay d-flex">
								<h6 class="text-white fw-normal mt-auto mb-0">5 Days / 4 Nights</h6>
							</div>
						</div>
						<!-- Card body -->
						<div class="card-body px-2">
							<!-- Badge and Rating -->
							<div class="d-flex justify-content-between align-items-center mb-2">
								<a href="#" class="badge bg-primary bg-opacity-10 text-primary">Adventure</a>
								<!-- Rating -->
								<h6 class="fw-light m-0"><i class="fa-solid fa-star text-warning me-2"></i>4.5</h6>
							</div>

							<!-- Title -->
							<h6 class="card-title"><a href="#">Maldives Sightseeing & Adventure Tour</a></h6>
							
							<!-- Badge and Price -->
							<div class="d-flex justify-content-between align-items-center mb-0">
								<!-- Price -->
								<h6 class="text-success mb-0">$385 <span class="fw-light">/person</span></h6>
								<span class="text-decoration-line-through mb-0 text-reset">$682</span>
							</div>
						</div>
					</div>
				</div>
				<!-- Produce item END -->
			</div>
		</div>

		<!-- Search START -->
		<div class="row mt-n7">
			<div class="col-11 mx-auto">				
				<!-- Booking from START -->
				<form class="bg-mode shadow rounded-3 p-4">
					<div class="row g-4 align-items-center">

						<div class="col-xl-10">
							<div class="row g-4">
								<!-- Location -->
								<div class="col-md-6 col-lg-4">
									<label class="h6 fw-normal mb-0"><i class="bi bi-geo-alt text-primary me-1"></i>Location</label>
									<!-- Input field -->
									<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
										<select class="form-select js-choice" data-search-enabled="true">
											<option value="">Select location</option>
											<option>San Jacinto, USA</option>
											<option>North Dakota, Canada</option>
											<option>West Virginia, Paris</option>
										</select>
									</div>
								</div>

								<!-- Check in -->
								<div class="col-md-6 col-lg-4">
									<label class="h6 fw-normal mb-0"><i class="bi bi-calendar text-primary me-1"></i>Date</label>
									<!-- Input field -->
									<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
										<input type="text" class="form-control flatpickr py-2" data-date-format="d M Y" placeholder="Choose a date">
									</div>
								</div>

								<!-- Guest -->
								<div class="col-md-6 col-lg-4">
									<label class="h6 fw-normal mb-0"><i class="fa-solid fa-person-skating text-primary me-1"></i>Tour type</label>
									<!-- Input field -->
									<div class="form-border-bottom form-control-transparent form-fs-lg mt-2">
										<select class="form-select js-choice" data-search-enabled="true">
											<option value="">Select type</option>
											<option>Adventure</option>
											<option>Beach</option>
											<option>Desert</option>
											<option>History</option>
										</select>
									</div>
								</div>
							</div>
						</div>

						<!-- Button -->
						<div class="col-xl-2">
							<div class="d-grid">
								<a href="#" class="btn btn-lg btn-dark mb-0">Take a Tour</a>
							</div>
						</div>
					</div>
				</form>
				<!-- Booking from END -->
			</div>
		</div>
		<!-- Search END -->

	</div>
</section>
<!-- =======================
Main Banner END -->