<?php
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<section id="proprety-search" class="bg-blue-800 relative overflow-hidden bg-cover bg-center-0 bg-no-repeat bg-fixed" style="background-image: url(<?php echo esc_url( plugin_dir_url( __FILE__ ) . '../../assets/img/hero.jpg' ); ?>);">
	<div class="bg-black opacity-40 absolute top-1/2 left-1/2 w-full h-full -translate-y-1/2 -translate-x-1/2 z-0"></div>
	<div class="relative lg:py-[14rem] md:py-[8rem] py-[4rem] text-center px-5 z-10">
		<h1 class="text-4xl text-white my-0">Search Title</h1>
		<p class="text-white">sub title</p>
		<div class="inline-block bg-white py-8 px-8 py-5 mt-4 rounded-xl min-w-[60%]">
			
			<form action="#" class="flex flex-wrap gap-0 justify-center">

				<div class="relative w-full sm:w-1/2 md:w-1/5">
					<div class="px-1 py-1 md:py-0">
						<input type="text" id="ipp-search_input" class="!block !appearance-none !cursor-type h-12 !bg-gray-100 !border !border-solid !border-gray-300 !text-sm !text-gray-700 py-2 px-4 !rounded-md !w-full !box-border" value="" placeholder="Enter Keywords"/>
					</div>
				</div>

				<div class="relative w-full sm:w-1/2 md:w-1/5">
					<div class="px-1 py-1 md:py-0">
						<select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
							<option>Property Type</option>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<!-- Down arrow icon -->
						<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
							<svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
							<path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
							</svg>
						</div>
					</div>
				</div>

				<div class="relative w-full sm:w-1/2 md:w-1/5">
					<div class="px-1 py-1 md:py-0">
						<select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
							<option>Location</option>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<!-- Down arrow icon -->
						<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
							<svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
							<path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
							</svg>
						</div>
					</div>
				</div>

				<div class="relative w-full sm:w-1/2 md:w-1/5">
					<div class="px-1 py-1 md:py-0">
						<select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
							<option>Amenities</option>
							<option>Option 1</option>
							<option>Option 2</option>
							<option>Option 3</option>
						</select>
						<!-- Down arrow icon -->
						<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
							<svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
							<path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
							</svg>
						</div>
					</div>
				</div>

				<div class="relative w-full md:w-1/5">
					<div class="px-1 py-1 md:py-0">
						<input type="submit" value="Search" id="ipp-search_submit" class="ipp-primary-button block h-12 appearance-none cursor-pointer border-solid !text-sm rounded-md w-full box-border transition-all">
					</div>
				</div>
			</form>
		</div>
	</div>
</section>