@extends('layouts.website.base')
@section('title', 'Contacto')
@section('content')
	<!-- ============================ Booking Title ================================== -->
	<section class="bg-cover position-relative" style="background:url(website/assets/img/bg-title.jpg)no-repeat;" data-overlay="5">
		<div class="container">
			<div class="row align-items-center justify-content-center">
				<div class="col-xl-7 col-lg-9 col-md-12">
					<div class="fpc-capstion text-center my-4">
						<div class="fpc-captions">
							<h1 class="xl-heading text-light">Contáctanos</h1>
							<p class="text-light">Nuestro equipo de expertos en viajes está comprometido a proporcionarte un servicio personalizado y de alta calidad en cada paso del camino. Desde la planificación meticulosa hasta la ejecución impecable del viaje</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- ============================ Booking Title ================================== -->
	<!-- ============================ Form Section ================================== -->
	<section>
		<div class="container">

			<div class="row justify-content-between g-4 mb-5">
				<div class="col-xl-4 col-lg-4 col-md-6">
					<div class="card p-4 rounded-4 border br-dashed text-center h-100">
						<div class="crds-icons d-inline-flex mx-auto mb-3 text-primary fs-2"><i class="fa-solid fa-briefcase"></i>
						</div>
						<div class="crds-desc">
							<h5>Escríbenos</h5>
							<p class="fs-6 text-md lh-2 mb-0">info@viajes360.com<br>soporte@viajes360.com</p>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-lg-4 col-md-6">
					<div class="card p-4 rounded-4 border br-dashed text-center h-100">
						<div class="crds-icons d-inline-flex mx-auto mb-3 text-primary fs-2"><i class="fa-solid fa-headset"></i>
						</div>
						<div class="crds-desc">
							<h5>Llámanos</h5>
							<p class="fs-6 text-md lh-2 mb-0">584128892233<br>14699610241</p>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-lg-4 col-md-6">
					<div class="card p-4 rounded-4 border br-dashed text-center h-100">
						<div class="crds-icons d-inline-flex mx-auto mb-3 text-primary fs-2"><i class="fa-solid fa-globe"></i>
						</div>
						<div class="crds-desc">
							<h5>Conecta con Nuestras Redes</h5>
							<ul class="list-inline mb-0">
								<li class="list-inline-item"> <a class="square--40 circle gray-simple color--facebook" href="https://www.facebook.com/profile.php?id=100057272326973&mibextid=ZbWKwL"><i class="fa-brands fa-facebook-f"></i></a> </li>
								<li class="list-inline-item"> <a class="square--40 circle gray-simple color--instagram" href="https://www.instagram.com/viajes360globe?igsh=MWZua3B6ajdtdnV0aw=="><i class="fa-brands fa-instagram"></i></a> </li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="row align-items-center justify-content-between g-4">
				<div class="col-xl-7 col-lg-7 col-md-12">
					<div class="contactForm gray-simple p-4 rounded-3">
						<form>
							<div class="row align-items-center">
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="touch-block d-flex flex-column mb-4">
										<h2>Contáctanos</h2>
									</div>
								</div>
								<div class="col-xl-6 col-lg-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Yu Nombre</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-xl-6 col-lg-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Email</label>
										<input type="email" class="form-control">
									</div>
								</div>
								<div class="col-xl-6 col-lg-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Teléfono</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-xl-6 col-lg-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Asunto</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group">
										<label class="form-label">Mensaje</label>
										<textarea class="form-control ht-120"></textarea>
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12">
									<div class="form-group mb-0">
										<button type="button" class="btn fw-medium btn-primary">Enviar<i class="fa-solid fa-paper-plane ms-2"></i></button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="col-xl-5 col-lg-5 col-md-12">
					<iframe class="full-width ht-100 grayscale rounded"
						src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-74.00425878428698!3d40.74076684379132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259bf5c1654f3%3A0xc80f9cfce5383d5d!2sGoogle!5e0!3m2!1sen!2sin!4v1586000412513!5m2!1sen!2sin"
						height="500" style="border:0;" aria-hidden="false" tabindex="0"></iframe>
				</div>
			</div>
		</div>
	</section>
	<!-- ============================ Form Section End ================================== -->
	<!-- ============================ Call To Action Start ================================== -->
	<div class="py-5 bg-primary">
		<div class="container">
			<div class="row align-items-center justify-content-between">
				<div class="col-xl-4 col-lg-4 col-md-6">
					<h4 class="text-light fw-bold lh-base m-0">Suscribete y Resive Nuestras Ofertas!</h4>
				</div>
				<div class="col-xl-5 col-lg-5 col-md-6">
					<div class="newsletter-forms mt-md-0 mt-4">
						<form>
							<div class="row align-items-center justify-content-between bg-white rounded-3 p-2 gx-0">

								<div class="col-xl-9 col-lg-8 col-md-8">
									<div class="form-group m-0">
										<input type="text" class="form-control bold ps-1 border-0" placeholder="Ingrese su Email">
									</div>
								</div>
								<div class="col-xl-3 col-lg-4 col-md-4">
									<div class="form-group m-0">
										<button type="button" class="btn btn-dark fw-medium full-width">Suscribirse</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- ============================ Call To Action Start ================================== -->
@endsection