@extends('website.layouts.app')
@section('content')
<!--************************************* Signature Packages *************************************-->
<section class="package_banner">
	<div class="innerbanner_text">
		<div class="container">
			<h1 class="mb-2">Signature Packages</h1>
			<p class="mb-5">Dive into our irresistible offers and make every journey a celebration of affordability and adventure. Explore <br class="d-xl-block d-none">more, spend less, and let the deals guide your next unforgettable escape!</p>
			<form class="package_search input-group" role="form">
				<input type="text" class="form-control border-0 px-4" placeholder="Search Packages...">
				<button class="btn ms-1 trs" type="submit">Search</button>
			</form>
		</div>
	</div>
</section>
<section class="signature_packages">
	<div class="container">
		<nav class="d-lg-flex justify-content-between align-items-center text-lg-start text-center mb-5">
			<div class="nav nav-tabs border-0 align-items-center justify-content-lg-start justify-content-center" id="nav-tab" role="tablist">
				<button class="nav-link position-relative border-0 pt-2 p-0 mx-2 mb-2 active" id="all_packages_tab" data-bs-toggle="tab" data-bs-target="#all_packages_nav" type="button" role="tab" aria-controls="all_packages_nav" aria-selected="true">All Packages</button>
				<button class="nav-link position-relative border-0 pt-2 p-0 mx-2 mb-2" id="best_sellers_tab" data-bs-toggle="tab" data-bs-target="#best_sellers_nav" type="button" role="tab" aria-controls="best_sellers_nav" aria-selected="false">Best Sellers</button>
				<button class="nav-link position-relative border-0 pt-2 p-0 mx-2 mb-2" id="latest_packages_tab" data-bs-toggle="tab" data-bs-target="#latest_packages_nav" type="button" role="tab" aria-controls="latest_packages_nav" aria-selected="false">Latest Packages</button>
			</div>
			<div class="d-flex justify-content-center mt-lg-0 mt-4">
				<div class="dropdown me-4">
					<button type="button" class="btn border border-1 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Category <i class="fa-solid fa-chevron-down"></i></button>
					<div class="dropdown-menu p-3 package_category">
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_category" id="package_category2">
							<label class="form-check-label" for="package_category2">Hotel&nbsp;Packages</label>
						</div>
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_category" id="package_category3">
							<label class="form-check-label" for="package_category3">Sleeping&nbsp;Bags</label>
						</div>
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_category" id="package_category4">
							<label class="form-check-label" for="package_category4">Trekking</label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" name="package_category" id="package_category5">
							<label class="form-check-label" for="package_category5">Uncategorized</label>
						</div>
					</div>
				</div>
				<div class="dropdown">
					<button type="button" class="btn border border-1 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Filter <i class="fa-solid fa-chevron-down"></i></button>
					<div class="dropdown-menu p-3 package_filter">
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_filter" id="package_filter2">
							<label class="form-check-label" for="package_filter2">Sort&nbsp;by&nbsp;Popularity</label>
						</div>
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_filter" id="package_filter3">
							<label class="form-check-label" for="package_filter3">Sort&nbsp;by&nbsp;Average&nbsp;Rating</label>
						</div>
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_filter" id="package_filter4">
							<label class="form-check-label" for="package_filter4">Sort&nbsp;by&nbsp;Newness</label>
						</div>
						<div class="form-check mb-3">
							<input class="form-check-input" type="radio" name="package_filter" id="package_filter5">
							<label class="form-check-label" for="package_filter5">Sort&nbsp;by&nbsp;Price:&nbsp;Low&nbsp;to&nbsp;High</label>
						</div>
						<div class="form-check">
							<input class="form-check-input" type="radio" name="package_filter" id="package_filter6">
							<label class="form-check-label" for="package_filter6">Sort&nbsp;by&nbsp;Price:&nbsp;High&nbsp;to&nbsp;Low</label>
						</div>
					</div>
				</div>
			</div>
		</nav>
		<div class="tab-content" id="nav-tabContent">
			<div class="tab-pane fade show active" id="all_packages_nav" role="tabpanel" aria-labelledby="all_packages_tab" tabindex="0">
				<div class="row gx-lg-5 gy-4">
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_01.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Azerbaijan</h4>
								<h3 class="text-lg-start text-center mb-2">Azerbaijan Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_02.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Georgia</h4>
								<h3 class="text-lg-start text-center mb-2">Georgia Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_03.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Qatar, Doha</h4>
								<h3 class="text-lg-start text-center mb-2">In-bound Tourism</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="best_sellers_nav" role="tabpanel" aria-labelledby="best_sellers_tab" tabindex="0">
				<div class="row gx-lg-5 gy-4">
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_01.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Azerbaijan</h4>
								<h3 class="text-lg-start text-center mb-2">Azerbaijan Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_02.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Georgia</h4>
								<h3 class="text-lg-start text-center mb-2">Georgia Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_03.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Qatar, Doha</h4>
								<h3 class="text-lg-start text-center mb-2">In-bound Tourism</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="latest_packages_nav" role="tabpanel" aria-labelledby="latest_packages_tab" tabindex="0">
				<div class="row gx-lg-5 gy-4">
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_01.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Azerbaijan</h4>
								<h3 class="text-lg-start text-center mb-2">Azerbaijan Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_02.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Georgia</h4>
								<h3 class="text-lg-start text-center mb-2">Georgia Tour Package</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-12 signature_package_section position-relative overflow-hidden">
						<a class="w-100 float-start border rounded-2 shine_ani" href="package-details.html">
							<img class="img-fluid rounded-2" src="images/destinations_03.webp" alt="Signature Packages">
							<div class="w-100 float-start p-3">
								<h4 class="d-flex align-items-baseline justify-content-md-start justify-content-center mb-2"><img class="img-fluid me-1" src="images/destination_map.svg" alt="Signature Packages">Qatar, Doha</h4>
								<h3 class="text-lg-start text-center mb-2">In-bound Tourism</h3>
								<h5 class="d-flex justify-content-md-start justify-content-center"><img class="img-fluid me-1" src="images/destination_time.svg" alt="Signature Packages">3 Nights 4 Days</h5>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="text-center mt-5">
			<button type="button" class="btn send_btn trs">Load More</button>
		</div>
	</div>
</section>
@endsection