@extends('layouts.master')
@section('contactactive', 'active')
@section('content')

    <!-- start banner area -->
    <section class="inner-page banner" data-img="accueil_template/assets/images/inner/banner.png">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="content text-center">
                            <h2>contact</h2>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                  <li class="breadcrumb-item"><a href="{{url('/')}}">Accueil</a></li>
                                  <li class="breadcrumb-item active" aria-current="page">contact</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end banner area -->

    <!-- start contact area -->
    <section class="contact-page contact p-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="content wow fadeInLeft" data-wow-delay="0.3s" data-wow-duration="1s">
                        <h6>contactez nous</h6>
                        <h2>Nous répondons à vos préoccupations</h2>
                        <form action="#!">
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" placeholder="Votre nom complet*" required class="inputs">
                                </div>
                                <div class="col-md-6">
                                    <input type="email" placeholder="Votre email*" required class="inputs">
                                </div>
                                <div class="col-md-6">
                                    <input type="tel" placeholder="Votre téléphone*" required class="inputs">
                                </div>
                                <div class="col-md-6">
                                    <textarea class="form-control">
                                        
                                    </textarea>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit">Envoyer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-xl-5 offset-xl-1 col-lg-6">
                    <div class="content address wow fadeInRight" data-wow-delay="0.3s" data-wow-duration="1s">
                        <!-- <h3>Get Answers Advices</h3> -->
                        <ul>
                            <li class="d-flex">
                                <div class="icon">
                                    <i class="far fa-map"></i>
                                </div>
                                <div class="text">
                                    <h5>Adresse</h5>
                                    <p>Lome-Togo</p>
                                    <p>262 BKK, Bè-Klikamé, Lomé-TOGO</p>
                                </div>
                            </li>
                            <li class="d-flex">
                                <div class="icon">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <div class="text">
                                    <h5>phone</h5>
                                    <p>(+228) 96055353</p>
                                    <p>(+228) 93055353</p>
                                </div>
                            </li>
                            <li class="d-flex">
                                <div class="icon">
                                    <i class="far fa-envelope"></i>
                                </div>
                                <div class="text">
                                    <h5>E-mail</h5>
                                    <p>infos@logexit.com</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end contact area -->

    <!-- Map section start -->
    <section class="contact-page location">
        <div class="google-map-wrapper" data-zoom='11' style="justify-content: center; align-content:center; align-items: center; display: flex; text-align: center;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15866.882516316897!2d1.2061578!3d6.1681524!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x102159164274c651%3A0x4dd2ef089617f1f3!2zU29jacOpdMOpIExPR0VY!5e0!3m2!1sfr!2stg!4v1718899124398!5m2!1sfr!2stg" width="1020" height="450" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>    
    </section>
    <!-- Map section end -->
@endsection