Ready to take off?

<!-- =======================
Main Banner START -->
<section class="py-0">
	<div class="container">
		<!-- Background image -->
		<div class="rounded-3 p-3 p-sm-5" style="background-image: url(assets/images/bg/01.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
			<!-- Banner title -->
			<div class="row"> 
				<div class="col-md-10 mx-auto text-center"> 
					<h1 class="text-dark display-3 pt-sm-5 my-5">Ready to take off?</h1>
				</div>
			</div>

			<!-- Booking from START -->
			<form class="bg-mode position-relative px-3 px-sm-4 pt-4 mb-4 mb-sm-0">

				<!-- Svg decoration -->
				<figure class="position-absolute top-0 start-0 h-100 ms-n2 ms-sm-n1">
					<svg class="h-100" viewBox="0 0 12.9 324" style="enable-background:new 0 0 12.9 324;">
						<path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
					</svg>
				</figure>

				<!-- Svg decoration -->
				<figure class="position-absolute top-0 end-0 h-100 rotate-180 me-n2 me-sm-n1">
					<svg class="h-100" viewBox="0 0 21 324" style="enable-background:new 0 0 21 324;">
						<path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
					</svg>
				</figure>

				<div class="row g-4">

					<!-- Nav tabs START -->
					<div class="col-lg-6">
						<ul class="nav nav-pills nav-pills-dark" id="pills-tab" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link mb-0 active" id="pills-one-way-tab" data-bs-toggle="pill" data-bs-target="#pills-one-way" type="button" role="tab" aria-selected="true">One Way</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link mb-0" id="pills-round-trip-tab" data-bs-toggle="pill" data-bs-target="#pills-round-trip" type="button" role="tab" aria-selected="false">Round Trip</button>
							</li>
						</ul>
					</div>
					<!-- Nav tabs END -->

					<!-- Ticket class -->
					<div class="col-lg-3 ms-auto">
						<div class="form-control-bg-light form-fs-md">
							<select class="form-select js-choice">
								<option value="">Select Class</option>
								<option>Economy</option>
								<option>Premium Economy</option>
								<option>Business</option>
								<option>First Class</option>
							</select>
						</div>	
					</div>

					<!-- Ticket Travelers -->
					<div class="col-lg-3 ms-auto">
						<div class="form-control-bg-light form-fs-md">
							<select class="form-select js-choice">
								<option value="">Select Travelers</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
							</select>
						</div>	
					</div>

					<!-- Tab content START -->
					<div class="tab-content mt-4" id="pills-tabContent">
						<!-- One way tab START -->
						<div class="tab-pane fade show active" id="pills-one-way" role="tabpanel" aria-labelledby="pills-one-way-tab">
							<div class="row g-4">
								<!-- Leaving From -->
								<div class="col-md-6 col-lg-4 position-relative">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<!-- Input field -->
										<label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
										<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>

									<!-- Auto fill button -->
									<div class="btn-flip-icon mt-3 mt-md-0">
										<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
								</div>
								</div>

								<!-- Going To -->
								<div class="col-md-6 col-lg-4">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<!-- Input field -->
										<label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
										<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>

								<!-- Departure -->
								<div class="col-lg-4">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
									</div>
								</div>

								<div class="col-12 text-end pt-0">
									<a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
								</div>
							</div>
						</div>
						<!-- One way tab END -->

						<!-- Round way tab END -->
						<div class="tab-pane fade" id="pills-round-trip" role="tabpanel" aria-labelledby="pills-round-trip-tab">
							<div class="row g-4">

								<!-- Leaving From -->
								<div class="col-md-6 col-xl-3 position-relative">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<!-- Input field -->
										<label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
										<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>
									
									<!-- Auto fill button -->
									<div class="btn-flip-icon mt-3 mt-md-0">
										<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
									</div>
								</div>

								<!-- Going To -->
								<div class="col-md-6 col-xl-3">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<!-- Input field -->
										<label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
										<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>

								<!-- Departure -->
								<div class="col-md-6 col-xl-3">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
									</div>
								</div>

								<!-- Return -->
								<div class="col-md-6 col-xl-3">
									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Return</label>
										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
									</div>
								</div>

								<div class="col-12 text-end pt-0">
									<a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
								</div>
							</div>
						</div>
						<!-- Round way tab END -->
					</div>
					<!-- Tab content END -->
				</div>
			</form>
			<!-- Booking from END -->
		</div>
	</div>
</section>
<!-- =======================
Main Banner END -->
									
								

Copy-paste the stylesheet <link> into your <head> to load the CSS.

										
<link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">
											

Copy-paste the following <script> near the end of your pages under Vendors to enable it.

										
<script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
<script src="assets/vendor/choices/js/choices.min.js"></script>