@extends('website.layouts.app')
@section('content')
<section class="contact_banner">
	<div class="innerbanner_text">
		<div class="container">
			<h1 class="mb-2">Contact Us</h1>
			<p>We has only one goal to create memorable moment for our <br class="d-xl-block d-none">travellers. “People forget years and remember moments.</p>
		</div>
	</div>
</section>
<section class="contact">
	<div class="container">
		<div class="row gx-lg-5 gy-5">
			<div class="col-lg-4 col-12">
				<div class="row gy-4">
					<div class="col-lg-12 col-md-4 col-12">
						<div class="contact_address h-100 bg-white p-3 rounded-2 d-flex align-items-center">
							<img class="img-fluid trs me-3" src="images/contact_call.svg" alt="contact">
							<a class="trs" href="tel:+97444321132">(+974) 4432 1132</a>
						</div>
					</div>
					<div class="col-lg-12 col-md-4 col-12">
						<div class="contact_address h-100 bg-white p-3 rounded-2 d-flex align-items-center">
							<img class="img-fluid trs me-3" src="images/contact_call.svg" alt="contact">
							<a class="trs" href="tel:+97444327732">(+974) 4432 7732</a>
						</div>
					</div>
					<div class="col-lg-12 col-md-4 col-12">
						<div class="contact_address h-100 bg-white p-3 rounded-2 d-flex align-items-center">
							<img class="img-fluid trs me-3" src="images/contact_mail.svg" alt="contact">
							<a href="mailto:info@oitctravels.com" class="trs">info@oitctravels.com</a>
						</div>
					</div>
					<div class="col-lg-12 col-md-6 col-12">
						<div class="contact_address h-100 bg-white p-3 rounded-2 d-flex align-items-center">
							<img class="img-fluid trs me-3" src="images/contact_map.svg" alt="contact">
							<h4>
								P O Box 4844, Salwa Road<br>
								Al Ghanem Al Jadeed<br>
								Doha, Qatar
							</h4>
						</div>
					</div>
					<div class="col-lg-12 col-md-6 col-12">
						<div class="contact_address h-100 bg-white p-3 rounded-2 d-flex align-items-center">
							<img class="img-fluid trs me-3" src="images/contact_map.svg" alt="contact">
							<h4>
								Dar Salam Branch<br>
								Abu Hamour<br>
								Doha, Qatar
							</h4>
						</div>
					</div>
				</div>
				<h3 class="w-100 float-start mt-5 mb-3 text-lg-start text-center">Follow Us On</h3>
				<div class="w-100 float-start social_media d-flex align-items-center justify-content-lg-start justify-content-center">
					<a class="trs fb" href="javascript:void(0)" title="Facebook" target="_blank"><i class="fa-brands fa-facebook-f trs"></i></a>
					<a class="trs im" href="javascript:void(0)" title="Instagram" target="_blank"><i class="fa-brands fa-instagram trs"></i></a>
					<a class="trs tx" href="javascript:void(0)" title="Twitter" target="_blank"><i class="fa-brands fa-x-twitter trs"></i></a>
					<a class="trs in" href="javascript:void(0)" title="Linkedin" target="_blank"><i class="fa-brands fa-linkedin-in trs"></i></a>
					<a class="trs sc" href="javascript:void(0)" title="YouTube" target="_blank"><i class="fa-brands fa-snapchat trs"></i></a>
				</div>
			</div>
			<div class="col-lg-8 col-12">
				<div class="w-100 float-start bg-white p-4 rounded-2">
					<h2 class="mb-3">Send Message</h2>
					<p class="text-md-start mb-4">Lorem ipsum is placeholder text commonly used in the graphic print, and <br class="d-xl-block d-none">publishing industries for previewing layouts and visual mockups.</p>
					<form class="w-100 float-start" role="form">
						<div class="row gx-md-4 gy-4">
							<div class="col-md-6 col-12">
								<div class="form-floating">
									<input class="form-control rounded-3" id="contact_name" name="contact_name" type="text" placeholder="Your Name">
									<label for="contact_name">Your Name *</label>
								</div>
							</div>
							<div class="col-md-6 col-12">
								<div class="form-floating">
									<input class="form-control rounded-3" id="contact_phone" name="contact_phone" type="number" placeholder="Phone Number">
									<label for="contact_phone">Phone Number *</label>
								</div>
							</div>
							<div class="col-md-6 col-12">
								<div class="form-floating">
									<input class="form-control rounded-3" id="contact_email" name="contact_email" type="email" placeholder="Email">
									<label for="contact_email">Email *</label>
								</div>
							</div>
							<div class="col-md-6 col-12">
								<div class="form-floating">
									<input class="form-control rounded-3" id="contact_subject" name="contact_subject" type="text" placeholder="Subject">
									<label for="contact_subject">Subject</label>
								</div>
							</div>
							<div class="col-12">
								<div class="form-floating">
									<textarea class="form-control rounded-3" id="contact_message" name="contact_message" rows="4" placeholder="Message"></textarea>
									<label for="contact_message">Message</label>
								</div>
							</div>
							<div class="w-100 text-center">
								<button class="send_btn trs mt-2" type="submit">Submit</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="contact_map text-center">
	<div class="container">
		<h2 class="mb-3">Find Us On Map</h2>
		<p class="mb-5">Lorem ipsum is placeholder text commonly used in the graphic print, and <br class="d-xl-block d-none">publishing industries for previewing layouts and visual mockups.</p>
		<iframe class="float-start rounded-3" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14436.13198364629!2d51.4485752!3d25.2358136!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45d0a0fc0d8517%3A0x4dc488d69a1df594!2sOITC%20Travel%20%26%20Tourism!5e0!3m2!1sen!2sin!4v1715330796499!5m2!1sen!2sin" allowfullscreen="" width="100%" height="400" frameborder="0"></iframe>
	</div>
</section>
@endsection