@extends('layouts.master')
@section('content')

        <div class="wrapper">

            <!-- Section Started Inner -->
            <section class="section kf-started-inner">
                <div class="kf-parallax-bg js-parallax" style="background-image: url(template/images/history_inner_bg.jpg);"></div>
                <div class="container">

                    <h1 class="kf-h-title text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
                        Contactez-nous
                    </h1>

                </div>
            </section>

            <!-- Section Contacts Info -->
            <section class="section kf-contacts-info">
                <div class="container">

                    <div class="kf-contacts-items row">

                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 align-center">
                            <div class="kf-contacts-item element-anim-1 scroll-animate" data-animate="active">
                                <div class="image">
                                    <!--<img src="images/contact_icon1.png" alt="" />-->
                                    <i class="las la-map-marked-alt"></i>
                                </div>
                                <div class="desc">
                                    <h5 class="name">Localisation</h5>
                                    <ul>
                                        <li>AVEDJI LIMOUSINE <br>
                                        rue en face de la poste, Lome-Togo</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 align-center">
                            <div class="kf-contacts-item element-anim-1 scroll-animate" data-animate="active">
                                <div class="image">
                                    <i class="las la-envelope-open-text"></i>
                                </div>
                                <div class="desc">
                                    <h5 class="name">Adresse Email</h5>
                                    <ul>
                                        <li>luxotis01@gmail.com</li>            
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 align-center">
                            <div class="kf-contacts-item element-anim-1 scroll-animate" data-animate="active">
                                <div class="image">
                                    <!--<img src="images/contact_icon3.png" alt="" />-->
                                    <i class="las la-headset"></i>
                                </div>
                                <div class="desc">
                                    <h5 class="name">Téléphone</h5>
                                    <ul>
                                        <li onclick="window.location.href='tel:22870167374'" style="cursor: pointer;">(+228) 70167374</li>
                                        <li onclick="window.location.href='tel:22890269274'" style="cursor: pointer;">(+228) 90269274</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </section>

            <!-- Section Contacts Form -->
            <section class="section kf-contacts-form">
                <div class="container">

                    <div class="kf-reservation-form element-anim-1 scroll-animate" data-animate="active">

                        <div class="kf-titles align-center">
                            <div class="kf-subtitle">
                                Contactez-nous
                            </div>
                            <h3 class="kf-title">
                                Envoyez nous un message
                            </h3>
                        </div>

                        <form id="cform" method="post">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
                                    <div class="kf-field">
                                        <input type="text" name="name" placeholder="Votre nom" />
                                        <i class="far fa-user"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
                                    <div class="kf-field">
                                        <input type="email" name="email" placeholder="Votre Email" />
                                        <i class="fas fa-at"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
                                    <div class="kf-field">
                                        <input type="tel" name="tel" placeholder="Numéro de téléphone" />
                                        <i class="fas fa-mobile-alt"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="kf-field">
                                        <input type="text" name="subject" placeholder="Sujet" />
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="kf-field">
                                        <textarea name="message" placeholder="Votre message"></textarea>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="kf-bts">
                                        <a href="#" class="kf-btn">
                                            <span>Envoyer le message</span>
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="alert-success" style="display: none;">
                            <p>Merci pour votre message</p>
                        </div>

                    </div>

                </div>
            </section>

        </div>
@endsection