@section('content')

    <main class="main">
        <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('web.index')}}">{{config('global.raisonsociale')}}</a></li>
                    <li class="breadcrumb-item"><a href="{{route('web.shop')}}">Contact</a></li>
                </ol>
            </div><!-- End .container -->
        </nav><!-- End .breadcrumb-nav -->

        <div class="page-content pb-0 mt-3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-2 mb-lg-0">
                        <h2 class="title mb-1">Contact & Informations</h2><!-- End .title mb-2 -->
                        <p class="mb-3">Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
                        <div class="row">
                            <div class="col-sm-7">
                                <div class="contact-info">
                                    <h3>Bureau</h3>

                                    <ul class="contact-list">
                                        <li>
                                            <i class="icon-map-marker"></i>
                                            70 Cité Rafeha 2000, AV 25 Rue 6176
                                        </li>
                                        <li>
                                            <i class="icon-phone"></i>
                                            <a href="tel:#">+92 423 567</a>
                                        </li>
                                        <li>
                                            <i class="icon-envelope"></i>
                                            <a href="mailto:#">info@tatfi-tn.com</a>
                                        </li>
                                    </ul><!-- End .contact-list -->
                                </div><!-- End .contact-info -->
                            </div><!-- End .col-sm-7 -->

                            <div class="col-sm-5">
                                <div class="contact-info">
                                    <h3>Bureau</h3>

                                    <ul class="contact-list">
                                        <li>
                                            <i class="icon-clock-o"></i>
                                            <span class="text-dark">Lundi-Samdi</span> <br>11:00-19:00
                                        </li>
                                        <li>
                                            <i class="icon-calendar"></i>
                                            <span class="text-dark">Dimanche</span> <br>11:00-16:00
                                        </li>
                                    </ul><!-- End .contact-list -->
                                </div><!-- End .contact-info -->
                            </div><!-- End .col-sm-5 -->
                        </div><!-- End .row -->
                    </div><!-- End .col-lg-6 -->
                    <div class="col-lg-6">
                        <h2 class="title mb-1">Avez vous des questions?</h2><!-- End .title mb-2 -->
                        <p class="mb-2">N'hésitez pas de nous contacter</p>

                        <form action="#" class="contact-form mb-3" id="mail_form">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="cname" class="sr-only">Name</label>
                                    <input type="text" class="form-control" id="cname" placeholder="Name *" required>
                                </div><!-- End .col-sm-6 -->

                                <div class="col-sm-6">
                                    <label for="cemail" class="sr-only">Email</label>
                                    <input type="email" class="form-control" id="cemail" placeholder="Email *" required>
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .row -->

                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="cphone" class="sr-only">Phone</label>
                                    <input type="tel" class="form-control" id="cphone" placeholder="Phone">
                                </div><!-- End .col-sm-6 -->

                                <div class="col-sm-6">
                                    <label for="csubject" class="sr-only">Subject</label>
                                    <input type="text" class="form-control" id="csubject" placeholder="Subject">
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .row -->

                            <label for="cmessage" class="sr-only">Message</label>
                            <textarea class="form-control" cols="30" rows="4" id="cmessage" required placeholder="Message *"></textarea>

                            <button type="submit" class="btn btn-outline-primary-2 btn-minwidth-sm">
                                <span>Envoyer</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>
                        </form><!-- End .contact-form -->
                    </div><!-- End .col-lg-6 -->
                </div><!-- End .row -->

                <hr class="mt-4 mb-5">

                <div class="stores mb-4 mb-lg-5">
                    <h2 class="title text-center mb-3">Centre de formation</h2><!-- End .title text-center mb-2 -->

                    <div class="row justify-content-center">
                        <div class="col-lg-6">
                            <div class="store">
                                <div class="row">
                                    <div class="col-sm-5 col-xl-6">
                                        <figure class="store-media mb-2 mb-lg-0">
                                            <img src="{{asset('assets/website/assets/images/stores/img-2.jpg')}}" alt="image">
                                        </figure><!-- End .store-media -->
                                    </div><!-- End .col-xl-6 -->
                                    <div class="col-sm-7 col-xl-6">
                                        <div class="store-content">
                                            <h3 class="store-title">Centre de formation théorique</h3><!-- End .store-title -->
                                            <address>05 Rue Jardin el Menzah 3015, Tunisie </address>
                                            <div><a href="tel:#">+216 56 525 990</a></div>

                                            <h4 class="store-subtitle">Horaire:</h4><!-- End .store-subtitle -->
                                            <ul class="contact-list">
                                                <li>
                                                    <i class="icon-clock-o"></i>
                                                    <span class="text-dark">Lundi-Samdi</span> <br>11:00-19:00
                                                </li>
                                                <li>
                                                    <i class="icon-clock-o"></i>
                                                    <span class="text-dark">Dimanche</span> <br>11:00-16:00
                                                </li>
                                            </ul><!-- End .contact-list -->


                                            <a href="#" class="btn btn-link" target="_blank"><span>Iténéraire</span><i class="icon-long-arrow-right"></i></a>
                                        </div><!-- End .store-content -->
                                    </div><!-- End .col-xl-6 -->
                                </div><!-- End .row -->
                            </div><!-- End .store -->
                        </div><!-- End .col-lg-6 -->


                    </div><!-- End .row -->
                </div><!-- End .stores -->
            </div><!-- End .container -->
            <div id="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12776.113894938302!2d10.1874751!3d36.8178376!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2cc23c867fc90805!2sEspace%20Tunis!5e0!3m2!1sfr!2stn!4v1670937990236!5m2!1sfr!2stn" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div><!-- End #map -->
        </div><!-- End .page-content -->
    </main><!-- End .main -->
@stop
@include('website2.layouts.header')
@include('website2.layouts.topbar')
@include('website2.layouts.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->


<link href="{{asset('assets/website/assets/css/plugins/nouislider/nouislider.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/website/assets/css/plugins/magnific-popup/magnific-popup.css')}}" rel="stylesheet" type="text/css"/>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')


@include('website2.layouts.end')