{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}
{% block head %}
    <title>Sidebar 07</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('assets/sidebare/css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css" integrity="sha512-cHxvm20nkjOUySu7jdwiUxgGy11vuVPE9YeK89geLMLMMEOcKFyS2i+8wo0FOwyQO/bL8Bvq1KMsqK4bbOsPnA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock %}
{% block stylesheets %}
    <style>
        /*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

        body {
            min-height: 100vh;
            background: #fafafa;
        }


        .social-link {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            border-radius: 50%;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .social-link:hover,
        .social-link:focus {
            background: #ddd;
            text-decoration: none;
            color: #555;
        }

        .progress {
            height: 10px;
        }
        #content{
            float: left;
            display: inline-block;
            width: 70%;
        }
        #menuCandidat{
            float: left;
            display: inline-block;
            margin-left: 2%;
            width: 27%;
        }
        .bg-nav{
            background-color: #0082C3;
        }
        .logo {
            overflow: hidden;
            padding: 16px 30px 12px 30px;
            background: #FFE728;
        }

        .logo h1 {
            font-size: 15px;
            padding: 0;
            line-height: 1;
            font-weight: 700;
            font-family: "Poppins", sans-serif;
        }

        .logo h1 a,
        .logo h1 a:hover {
            color: #000000;
            text-decoration: none;
        }

        .logo img {
            padding: 0;
            margin: 0;
            max-height: 40px;
        }
        .btn-logout{
            font-size: 10px;
            background-color: #FF3C33;
            color: white;
        }
        th{
            width: 80%;
        }
        body{margin-top:20px;}
        .p-15px {
            padding: 15px;
        }
        .border-color-gray {
            border-color: #f2f3fa;
        }
        .border-all-1 {
            border: 1px solid;
        }
        .hover-top {
            position: relative;
            top: 0;
        }
        .m-15px-tb {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .overlay-link {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border: 0;
        }
        .border-radius-50 {
            border-radius: 50%;
        }
        .icon-50 {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 21px;
        }
        .white-color {
            color: #ffffff;
        }
        .theme-bg {
            background-color: #0050d8;
        }
        .icon-50 i.number {
            font-style: normal;
        }
        .icon-50 i {
            line-height: 50px;
        }
        .p-20px-l {
            padding-left: 20px;
        }
        .p-10px-lr {
            padding-left: 10px;
            padding-right: 10px;
        }
        .p-0px-tb {
            padding-top: 0px;
            padding-bottom: 0px;
        }
        .border-radius-15 {
            border-radius: 15px;
        }
        .white-color {
            color: #ffffff;
        }
        .theme2nd-bg {
            background-color: #53d267;
        }
        .m-0px {
            margin: 0px;
        }
        .font-small {
            font-size: .75rem;
            line-height: 1rem;
        }

        .green-bg-alt {
            background-color: rgba(17, 226, 121, 0.1);
        }

        .green-bg {
            background-color: #11e279;
        }

        .green-after:after {
            background-color: #11e279;
        }

        .green-before:before {
            background-color: #11e279;
        }

        .green-color-alt {
            color: rgba(17, 226, 121, 0.65);
        }

        .green-color {
            color: #11e279;
        }

        .blue-bg-alt {
            background-color: rgba(21, 178, 236, 0.1);
        }

        .blue-bg {
            background-color: #15b2ec;
        }

        .blue-after:after {
            background-color: #15b2ec;
        }

        .blue-before:before {
            background-color: #15b2ec;
        }

        .blue-color-alt {
            color: rgba(21, 178, 236, 0.65);
        }

        .blue-color {
            color: #15b2ec;
        }

        .pink-bg-alt {
            background-color: rgba(241, 38, 153, 0.1);
        }

        .pink-bg {
            background-color: #f12699;
        }

        .pink-after:after {
            background-color: #f12699;
        }

        .pink-before:before {
            background-color: #f12699;
        }

        .pink-color-alt {
            color: rgba(241, 38, 153, 0.65);
        }

        .pink-color {
            color: #f12699;
        }

        .body-bg-alt {
            background-color: rgba(113, 128, 150, 0.1);
        }

        .body-bg {
            background-color: #718096;
        }

        .body-after:after {
            background-color: #718096;
        }

        .body-before:before {
            background-color: #718096;
        }

        .body-color-alt {
            color: rgba(113, 128, 150, 0.65);
        }

        .body-color {
            color: #718096;
        }

        .white-color-light {
            color: rgba(255, 255, 255, 0.65);
        }

        .bg-transparent {
            background-color: transparent;
        }

        .theme-g-bg {
            background: linear-gradient(to right, #0050d8, #002a72);
        }

        .dark-g-bg {
            background: linear-gradient(50deg, #273444 0, #272b44 100%);
        }
        .yellow-bg {
            background-color: #ffbe3d;
        }
        .border-radius-50 {
            border-radius: 50%;
        }
        .icon-50 {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 21px;
        }

        .box-shadow-only-hover:hover {
            box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.1);
        }
        .border-color-gray {
            border-color: #f2f3fa !important;
        }
        .border-all-1 {
            border: 1px solid;
        }
        h4{
            color: #0082C3;
        }
        .btn-voir-offre{
            background-color: #0082C3;
            color: white;
            border: none;
        }
    </style>
{% endblock %}

{% block body %}
        <section id="hero" class="d-flex align-items-center">
            <div class="container text-center position-relative" data-aos="fade-in" data-aos-delay="200">
                <h1>Chez <span style="color: #0082C3">DECATHLON</span>, nous partageons tous la même passion: <span style="color: #0082C3">Le sport !</span></h1>
                <h2 style="color: #FFE728">Notre sens, rendre les bienfaits du sport accessible au plus grand nombre.</h2>
                <a href="#about" class="btn-get-started scrollto">Commencer</a>
            </div>
        </section>
        <main id="main">
            <section id="clients" class="clients">
                <div class="container">

                    <div class="row">

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="100">
                            <img src="{{ asset('assets/img/clients/kipsta.png') }}" class="img-fluid" alt="">
                        </div>

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="200">
                            <img src="{{ asset('assets/img/clients/TARMAK.png') }}" class="img-fluid" alt="">
                        </div>

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="300">
                            <img src="{{ asset('assets/img/clients/ALLSIX.png') }}" class="img-fluid" alt="">
                        </div>

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="400">
                            <img src="{{ asset('assets/img/clients/OLAIAN.png') }}" class="img-fluid" alt="">
                        </div>

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="500">
                            <img src="{{ asset('assets/img/clients/ARTENGO.png') }}" class="img-fluid" alt="">
                        </div>

                        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center" data-aos="zoom-in" data-aos-delay="600">
                            <img src="{{ asset('assets/img/clients/APTONIA.png') }}" class="img-fluid" alt="">
                        </div>

                    </div>

                </div>
            </section>
            <section id="about" class="about">
                <div class="container">

                    <div class="row content">
                        <div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
                            <h2>A propos de Decathlon</h2>
                            <h3>Decathlon Sénégal à fond la forme !!!</h3>
                        </div>
                        <div class="col-lg-6 pt-4 pt-lg-0" data-aos="fade-left" data-aos-delay="200">
                            <p>
                                Décathlon, c’est une enseigne et des marques innovantes pour le plaisir de tous les sportifs. Nous sommes 70 000 collaborateurs dans le monde à vivre au quotidien notre sens commun qui est de rendre accessibles au plus grand nombre le plaisir et les bienfaits du sport. Nous plaçons l’innovation au cœur de nos activités : de la recherche à la vente, en passant par la conception, le design, la production et la logistique. Les équipes de nos marques Passion mettent en effet toute leur énergie pour concevoir des produits techniques, beaux et simples, toujours aux prix les plus bas possible. Ces produits s’adressent à tous les passionnés, du débutant au sportif confirmé, et sont disponibles en exclusivité chez Decathlon.

                                Dans tous les pays où nous sommes présents, nous partageons une culture d’entreprise forte et unique renforcée par nos deux valeurs qui sont la vitalité et la responsabilité. Chez Décathlon Sénégal, nous sommes une équipe jeune de sportifs passionnants et passionés qui se lèvent chaque jour pour favoriser la démocratisation du sport.
                            </p>

                        </div>
                    </div>

                </div>
            </section>
            <section id="counts" class="counts">
                <div class="container">

                    <div class="row counters">

                        <div class="col-lg-3 col-6 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="4" data-purecounter-duration="1" class="purecounter"></span>
                            <p>Magasins</p>
                        </div>

                        <div class="col-lg-3 col-6 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="+80" data-purecounter-duration="1" class="purecounter"></span>
                            <p>Collaborateurs</p>
                        </div>

                        <div class="col-lg-3 col-6 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="36" data-purecounter-duration="1" class="purecounter"></span>
                            <p>Sports</p>
                        </div>

                        <div class="col-lg-3 col-6 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="7" data-purecounter-duration="1" class="purecounter"></span>
                            <p>Métiers</p>
                        </div>

                    </div>

                </div>
            </section><!-- End Counts Section -->
            <!-- ======= Why Us Section ======= -->
            <section id="why-us" class="why-us">
                <div class="container">

                    <div class="row">
                        <div class="col-lg-4 d-flex align-items-stretch" data-aos="fade-right">
                            <div class="content">
                                <h3>Nos Valeurs à DECATHLON !</h3>
                                <p>
                                    Rendre durablement le plaisir et les bienfaits de la pratique du sport accessible au plus grand nombre.
                                </p>
                                <hr>
                            </div>
                        </div>
                        <div class="col-lg-8 d-flex align-items-stretch">
                            <div class="icon-boxes d-flex flex-column justify-content-center">
                                <div class="row">
                                    <div class="col-xl-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
                                        <div class="icon-box mt-4 mt-xl-0">
                                            <i class="bx bx-receipt"></i>
                                            <h4 style="text-align: center">VITALITE</h4>
                                            <h5>Corporis voluptates sit</h5>
                                            <p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="200">
                                        <div class="icon-box mt-4 mt-xl-0">
                                            <i class="bx bx-cube-alt"></i>
                                            <h4 style="text-align: center">RESPONSABILITE</h4>
                                            <h5>Ullamco laboris ladore pan</h5>
                                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="300">
                                        <div class="icon-box mt-4 mt-xl-0">
                                            <i class="bx bx-images"></i>
                                            <h4 style="text-align: center">GENEROSITE</h4>
                                            <h5>Labore consequatur</h5>
                                            <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="300">
                                        <div class="icon-box mt-4 mt-xl-0">
                                            <i class="bx bx-images"></i>
                                            <h4 style="text-align: center">AUTHENTICITE</h4>
                                            <h5>Labore consequatur</h5>
                                            <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- End .content-->
                        </div>
                    </div>

                </div>
            </section><!-- End Why Us Section -->
            <!-- ======= Cta Section ======= -->
            <section id="cta" class="cta">
                <div class="container">

                    <div class="text-center" data-aos="zoom-in">
                        <h3>Call To Action</h3>
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <a class="cta-btn" href="#">Call To Action</a>
                    </div>

                </div>
            </section><!-- End Cta Section -->
            <!-- ======= Services Section ======= -->
            <section id="services" class="services section-bg">
                <div class="container">

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="section-title" data-aos="fade-right">
                                <h2>Nos Services</h2>
                                <p>Magnam dolores commodi suscipit nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-md-6 d-flex align-items-stretch">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="100">
                                        <div class="icon"><img style="height: 25px; width: 25px;" src="assets/img/hero-bg.jpg" alt=""></div>
                                        <h4><a href="">Logistique</a></h4>
                                        <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
                                    </div>
                                </div>

                                <div class="col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="200">
                                        <div class="icon"><i class="bx bx-file"></i></div>
                                        <h4><a href="">Informatique</a></h4>
                                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
                                    </div>
                                </div>

                                <div class="col-md-6 d-flex align-items-stretch mt-4">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="300">
                                        <div class="icon"><i class="bx bx-tachometer"></i></div>
                                        <h4><a href="">Communication</a></h4>
                                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
                                    </div>
                                </div>

                                <div class="col-md-6 d-flex align-items-stretch mt-4">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="400">
                                        <div class="icon"><i class="bx bx-world"></i></div>
                                        <h4><a href="">Digital / Ecommerce</a></h4>
                                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
                                    </div>
                                </div>
                                <div class="col-md-6 d-flex align-items-stretch mt-4">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="400">
                                        <div class="icon"><i class="bx bx-world"></i></div>
                                        <h4><a href="">Finance</a></h4>
                                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
                                    </div>
                                </div>
                                <div class="col-md-6 d-flex align-items-stretch mt-4">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="400">
                                        <div class="icon"><i class="bx bx-world"></i></div>
                                        <h4><a href="">Commerce / Métier magasin</a></h4>
                                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
                                    </div>
                                </div>
                                <div class="col-md-6 d-flex align-items-stretch mt-4">
                                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="400">
                                        <div class="icon"><i class="bx bx-world"></i></div>
                                        <h4><a href="">Service Juridique</a></h4>
                                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </section><!-- End Services Section -->
            <!-- ======= Offres d'emplois Section ======= -->
            <section id="offresemploi" class="testimonials section-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="section-title" data-aos="fade-right">
                                <h2>Liste Offres d'emploi</h2>
                                <p>Magnam dolores commodi suscipit uisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
                            </div>
                        </div>
                        <div class="col-lg-10" data-aos="fade-up" data-aos-delay="100">
                            <div class="container">
                                <div class="row pb-5">
                                    {% for offreEmploi in offres_emploi %}
                                        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0 mt-3">
                                            <!-- Card-->
                                            <div class="card shadow-sm border-0 rounded">
                                                <div class="card-body p-0"><img src="{{ offreEmploi.image }}" alt="" class="w-100 card-img-top img-thumbnail">
                                                    <div class="p-4">
                                                        <p class="mb-0" style="font-size: 13px; color: #0082C3;">{{ offreEmploi.titre }}</p>
                                                        <small class="small text-muted">Service: {{ offreEmploi.service.nom }}</small><br>
                                                        <a href="{{ path('acces_job_offline', {'id': offreEmploi.id})}}"><button class="btn-voir-offre" href="{{ path('acces_job_offline', {'id': offreEmploi.id})}}">Voir Offre Emploi</button></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- ======= Connexion Section ======= -->
            <section id="testimonials" class="testimonials section-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="section-title" data-aos="fade-right">
                                <h2>Se Connecter <br> ou S'Inscrire</h2>
                                <p>Magnam dolores commodi suscipit uisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
                            </div>
                        </div>
                        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                            <div class="row">
                                <div class="mx-auto formulaire">
                                    <div class="mt-3 mb-3 styleBarreTitle mx-auto">
                                        Me Connecter à Mon Espace Candidat
                                    </div>
                                    <form method="post" action="{{ path('app_login_home') }}">
                                        {% if error %}
                                            <div class="alert alert-danger">Informations de connexion incorrectes</div>
                                        {% endif %}

                                        {% if app.user %}
                                            <div class="mb-3">
                                                Vous êtes connecté(e) comme {{ app.user.userIdentifier }}
                                                <a class="btn btn-logout" href="{{ path('app_logout') }}">Me déconnecter</a>
                                            </div>
                                        {% endif %}
                                        <label for="inputEmail">Email</label>
                                        <input type="email" value="{{ last_username }}" placeholder="Entrez votre email" name="email" id="inputEmail" class="form-control" autocomplete="email" autofocus>
                                        <div class="spanValidation" id="spanEmail"></div>
                                        <hr>
                                        <label for="inputPassword">Mot de passe</label>
                                        <input type="password" placeholder="Entrez votre password" name="password" id="inputPassword" class="form-control" autocomplete="current-password">
                                        <div class="spanValidation" id="spanPassword"></div>
                                        <hr>
                                        <input type="hidden" name="_csrf_token"
                                               value="{{ csrf_token('authenticate') }}">
                                        <button class="btn btn-primary mb-2"
                                                type="submit"
                                                onclick="verifierFormulaireConnexion()">
                                            Me Connecter
                                        </button>
                                    </form>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-5 px-4" data-aos="fade-up" data-aos-delay="100">
                            <div class="row">
                                <div class="mx-auto formulaire">
                                    <div class="mt-3 mb-3 styleBarreTitle mx-auto">
                                        S'incrire pour pouvoir Postuler
                                    </div>
                                    {{ form_start(registrationForm) }}
                                    <div class="row">
                                        <div class="col-lg-6">
                                            {{ form_row(registrationForm.email) }}
                                        </div>
                                        <div class="col-lg-6">
                                            {{ form_row(registrationForm.plainPassword, {
                                                label: 'Password'
                                            }) }}
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            {{ form_row(registrationForm.prenom) }}
                                        </div>
                                        <div class="col-lg-6">
                                            {{ form_row(registrationForm.nom) }}
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row mb-2">
                                        <div class="col-lg-12">
                                            {{ form_row(registrationForm.Inscription) }}
                                        </div>
                                    </div>
                                    {{ form_end(registrationForm) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ======= Team Section ======= -->

            <section id="team" class="team">
                <div class="container">

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="section-title" data-aos="fade-right">
                                <h2>Team</h2>
                                <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem.</p>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="row">

                                <div class="col-lg-6">
                                    <div class="member" data-aos="zoom-in" data-aos-delay="100">
                                        <div class="pic"><img src="assets/img/team/team-1.jpg" class="img-fluid" alt=""></div>
                                        <div class="member-info">
                                            <h4>Walter White</h4>
                                            <span>Chief Executive Officer</span>
                                            <p>Explicabo voluptatem mollitia et repellat qui dolorum quasi</p>
                                            <div class="social">
                                                <a href=""><i class="ri-twitter-fill"></i></a>
                                                <a href=""><i class="ri-facebook-fill"></i></a>
                                                <a href=""><i class="ri-instagram-fill"></i></a>
                                                <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 mt-4 mt-lg-0">
                                    <div class="member" data-aos="zoom-in" data-aos-delay="200">
                                        <div class="pic"><img src="assets/img/team/team-2.jpg" class="img-fluid" alt=""></div>
                                        <div class="member-info">
                                            <h4>Sarah Jhonson</h4>
                                            <span>Product Manager</span>
                                            <p>Aut maiores voluptates amet et quis praesentium qui senda para</p>
                                            <div class="social">
                                                <a href=""><i class="ri-twitter-fill"></i></a>
                                                <a href=""><i class="ri-facebook-fill"></i></a>
                                                <a href=""><i class="ri-instagram-fill"></i></a>
                                                <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 mt-4">
                                    <div class="member" data-aos="zoom-in" data-aos-delay="300">
                                        <div class="pic"><img src="assets/img/team/team-3.jpg" class="img-fluid" alt=""></div>
                                        <div class="member-info">
                                            <h4>William Anderson</h4>
                                            <span>CTO</span>
                                            <p>Quisquam facilis cum velit laborum corrupti fuga rerum quia</p>
                                            <div class="social">
                                                <a href=""><i class="ri-twitter-fill"></i></a>
                                                <a href=""><i class="ri-facebook-fill"></i></a>
                                                <a href=""><i class="ri-instagram-fill"></i></a>
                                                <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 mt-4">
                                    <div class="member" data-aos="zoom-in" data-aos-delay="400">
                                        <div class="pic"><img src="assets/img/team/team-4.jpg" class="img-fluid" alt=""></div>
                                        <div class="member-info">
                                            <h4>Amanda Jepson</h4>
                                            <span>Accountant</span>
                                            <p>Dolorum tempora officiis odit laborum officiis et et accusamus</p>
                                            <div class="social">
                                                <a href=""><i class="ri-twitter-fill"></i></a>
                                                <a href=""><i class="ri-facebook-fill"></i></a>
                                                <a href=""><i class="ri-instagram-fill"></i></a>
                                                <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </section><!-- End Team Section -->

            <!-- ======= Contact Section ======= -->
            <section id="contact" class="contact">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4" data-aos="fade-right">
                            <div class="section-title">
                                <h2>Contact</h2>
                                <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
                            </div>
                        </div>

                        <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
                            <iframe style="border:0; width: 100%; height: 270px;" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=S%C3%A9n%C3%A9gal,%20Dakar,%20Yoff+(Decathlon%20S%C3%A9n%C3%A9gal)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed" frameborder="0" allowfullscreen></iframe>
                            <div class="info mt-4">
                                <i class="bi bi-geo-alt"></i>
                                <h4>Location:</h4>
                                <p>SENEGAL, DAKAR, YOFF</p>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mt-4">
                                    <div class="info">
                                        <i class="bi bi-envelope"></i>
                                        <h4>Email:</h4>
                                        <p>contactsenegal@decathlon.com</p>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="info w-100 mt-4">
                                        <i class="bi bi-phone"></i>
                                        <h4>Call:</h4>
                                        <p>+22 33 859 13 93</p>
                                    </div>
                                </div>
                            </div>

                            <form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
                                    </div>
                                    <div class="col-md-6 form-group mt-3 mt-md-0">
                                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
                                    </div>
                                </div>
                                <div class="form-group mt-3">
                                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
                                </div>
                                <div class="form-group mt-3">
                                    <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
                                </div>
                                <div class="my-3">
                                    <div class="loading">Loading</div>
                                    <div class="error-message"></div>
                                    <div class="sent-message">Your message has been sent. Thank you!</div>
                                </div>
                                <div class="text-center"><button type="submit">Send Message</button></div>
                            </form>
                        </div>
                    </div>

                </div>
            </section><!-- End Contact Section -->
        </main>
{% endblock %}