@extends('users/layout')
@section('content')
<section>
	<div>
		<div class="background-holder overlay" style="background-image:url(template/assets/images/background-2.jpg);background-position: center bottom;">
		</div><!--/.background-holder-->
<div class="container">
 <div class="row pt-6" data-inertia='{"weight":1.5}'>
  <div class="col-md-8 px-md-0 color-white" data-zanim-timeline="{}" data-zanim-trigger="scroll">
   <div class="overflow-hidden">
	<h1 class="color-white fs-4 fs-md-5 mb-0 zopacity" data-zanim='{"delay":0}'>Contact</h1>
	<div class="nav zopacity" aria-label="breadcrumb" role="navigation" data-zanim='{"delay":0.1}'>
		<ol class="breadcrumb fs-1 pl-0 fw-700">
		<li class="breadcrumb-item">
			<a class="color-white" href="#">Accueil</a>
		</li>
		<li class="breadcrumb-item active" aria-current="page">Contact
		</li>
		</ol>
	</div>
	</div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>


 <section class="background-11">
 	<div class="container">
 		<div class="row align-items-stretch justify-content-center">
 			<div class="col-lg-4 mb-4 mb-lg-0">
 				<div class="h-100 px-5 py-4 background-white radius-secondary">
 					<h5 class="mb-3">Adresse
 					</h5>262 BKK, Bè-Klikamé Lomé –Togo,
                      05 BP 757 Lome-Togo,
 					<br>infos@cabinetsynergie.com
 					</div>
 				</div>
 					<div class="col-lg-4 mb-4 mb-lg-0">
 						<div class="h-100 px-5 py-4 background-white radius-secondary">
 							<h5 class="mb-3">Téléphone :</h5><br>(228) 93 05 53 53 <br/> (228) 96 05 53 53
 						</div>
 					</div>
 					<div class="col-lg-4">
 						<div class="h-100 px-5 py-4 background-white radius-secondary"><h5>Socials</h5>
 							<a class="d-inline-block mt-2" href="#">
 								<span class="fa fa-linkedin-square fs-2 mr-2 color-primary"></span>
 							</a>
 								<a class="d-inline-block mt-2" href="#">
 				                 <span class="fa fa-twitter-square fs-2 mx-2 color-primary"></span>
 				               </a>
 				                <a class="d-inline-block mt-2" href="#"><span class="fa fa-facebook-square fs-2 mx-2 color-primary"></span>
 				                 </a>
 				                 <a class="d-inline-block mt-2" href="#"><span class="fa fa-google-plus-square fs-2 ml-2 color-primary"></span>
 				                 </a>
 				                 </div>
 				    </div>

 				    <div class="col-12 mt-4">
 				    	<div class="background-white p-5 radius-secondary">
 				    		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.7206268680056!2d1.2039676147688427!3d6.168152695534334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1021599909435f8b%3A0x93b5810afc64c16a!2sCabinet%20SYNERGIE!5e0!3m2!1sfr!2stg!4v1640080691332!5m2!1sfr!2stg" width="1000" height="450" style="border:0;" allowfullscreen="" loading="lazy">
 				    		</iframe>
 				    	</div>
 				    </div>

 <div class="col-12 mt-4">
 	<div class="background-white p-5 h-100 radius-secondary">
 		<h5>Nous écrire</h5>
 		<form class="zform mt-3">
 			<div class="row">
 				<div class="col-12">
 					<input class="form-control" type="hidden" name="to" value="user@domain.extension">
 					<input class="form-control background-white" type="text" placeholder="Votre nom" required>
 				</div>
 				<div class="col-12 mt-4">
 					<input class="form-control background-white" type="email" placeholder="Email" required>
 				</div>
 				<div class="col-12 mt-4">
 					<textarea class="form-control background-white" rows="11" placeholder="Votre sujet" required>
 					</textarea>
 				</div>
 			<div class="col-12 mt-4">
 			     <div class="row"><div class="col-auto">
 						<button class="btn btn-md-lg btn-primary" type="Submit"> 
 							<span class="color-white fw-600" style="font-size: 18px; font-weight: bold;">Soumettre</span>
 						</button>
 					</div>
 				  <div class="col">
 					<div class="zform-feedback">
 					</div>
 				 </div>
 			    </div>
 			</div>
 		</div>
 	</form>
 </div>
 </div>

 </div><!--/.row-->
 </div><!--/.container-->
 </section>
 
@endsection