@extends('layouts.site.main')

@section('content')

    <main class="main">

        <!-- Hero Section -->
        <section id="hero" class="hero section light-background">

            <div class="container">
                <div class="row gy-4">
                    <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center"
                         data-aos="zoom-out">
                        <h1>Ensemble donnons un coup de pousse à votre administration ou entreprise</h1>
                        <p>Avec des solutions de digitalisations sur mesure.</p>
                        <div class="d-flex">
                            <a href="#about" class="btn-get-started">Contactez-nous</a>
                            <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8"
                               class="glightbox btn-watch-video d-flex align-items-center"><i
                                    class="bi bi-play-circle"></i><span>Video de présentation</span></a>
                        </div>
                    </div>
                </div>
            </div>

        </section><!-- /Hero Section -->

        <!-- Featured Services Section -->
        <section id="featured-services" class="featured-services section">

            <div class="container">

                <div class="row gy-4">

                    <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-windows icon"></i></div>
                            <h4><a href="" class="stretched-link">WINDOWS</a></h4>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-apple icon"></i></div>
                            <h4><a href="" class="stretched-link">IOS</a></h4>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-browser-chrome icon"></i></div>
                            <h4><a href="" class="stretched-link">WEB</a></h4>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-android2 icon"></i></div>
                            <h4><a href="" class="stretched-link">ANDROID</a></h4>
                        </div>
                    </div><!-- End Service Item -->

                </div>

            </div>

        </section><!-- /Featured Services Section -->

        <!-- About Section -->
        <!-- <section id="about" class="about section">

            <div class="about-ht container">

                <div class="row gy-4">

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                        <h3>Optimisez vos projets avec des solutions de développement adaptées</h3>
                    </div>

                    <div class="col-lg-6 d-flex" data-aos="fade-up" data-aos-delay="200">
                        <p>
                            Nous offrons des solutions de développement
                            personnalisées pour application mobiles, logiciels, et
                            intégrations technologiques, avec un accompagnement
                            continu pour rester à la pointe de la technologie.
                        </p>
                    </div>
                </div>

            </div>

        </section> -->
        <!-- /About Section -->

        <!-- About Section -->
        <section id="about" class="about section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2><span>Simplifions votre processus</span> <span class="description-title">de production</span></h2>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="row gy-4">

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                        <div>
                            <img src="assets/img/about3.jpg" alt="" class="img-fluid">
                        </div>

                        <div class="about-content ps-0 ps-lg-3">
                            <p>
                                Une solution numérique centralisée est mise en place
                                pour automatiser les tâches répétitives et intégrer tous
                                les outils nécessaires en une seule plateforme. les informations
                                sont traitées automatiquement, réduisant le temps de traitement et
                                les erreurs humaines. Cette solution simplifie le flux de travail,
                                améliore la précision et permet de consacrer plus de temps à des tâches
                                plus importantes.
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="about-content ps-0 ps-lg-3">
                            <p>
                                Des tâches effectuées manuellement à travers
                                divers outils non intégrés, nécessitant des saisies et
                                des vérifications répétées. Ce processus est long et complexe, avec
                                des multiples étapes qui entraînent des erreurs fréquentes et une accumulation
                                de travail non terminé, augmentant ainsi la frustration et réduisant l'efficacité générale.
                            </p>
                        </div>

                        <div>
                            <img src="assets/img/about1.jpg" alt="" class="img-fluid">
                        </div>
                    </div>

                </div>

            </div>

        </section><!-- /About Section -->

        <!-- Faq Section -->
        <!-- <section id="faq" class="faq section">

            <div class="faq-ht container">

                <div class="row justify-content-center gy-4">

                    <div class="col-lg-10" data-aos="fade-up" data-aos-delay="100">

                        <div class="faq-container">

                            <div class="faq-item">
                                <div class="faq-content">
                                    <p>
                                        Les processus administratifs complexes et manuels
                                        entraînent des délais longs et une inefficacité opérationnelle.
                                    </p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <div class="faq-content">
                                    <p>
                                        Lees services et départements peinent à collaborer efficacement
                                        en raison du manque d'outils numériques adaptés.
                                    </p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <div class="faq-content">
                                    <p>
                                        Les processus et services ne sont pas suffisamment accessibles
                                        ou transparents pour le public.
                                    </p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <div class="faq-content">
                                    <p>
                                        Les administrations rencontrent des difficultés à adopter et intégrer
                                        les nouvelles technologies nécessaires pour moderniser leurs opérations.
                                    </p>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section> -->
        <!-- /Faq Section -->

        <!-- Services Section -->
        <!-- <section id="services" class="services section">

            
            <div class="container section-title gy-4" data-aos="fade-up">
                <h2>Faites le pas et découvrez comment
                nous pouvons vous accompagner</h2>
                <p>
                    Nous étudierons gratuitement votre projet
                </p>
                <a href="#contact" class="btn-bar" >Contactez-nous</a>
            </div>

        </section> -->
        <!-- /Services Section -->

        <!-- Testimonials Section -->
        <section id="challenges" class="challenges section dark-background container">

            <img src="assets/img/testimonials-bg3.jpg" class="testimonials-bg" alt="">

            <div class="container" data-aos="fade-up" data-aos-delay="100">
                    <div class="swiper-wrapper gy-4">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="testimonial-item">
                                    <h3>Comprendre vos enjeux</h3>
                                    <p>
                                        à mesure que votre entreprise se développe,
                                        une gestion efficace de vos équipes et de vos
                                        activités devient essentielle pour garantir le
                                        bon fonctionnement de votre organisation.
                                    </p>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="side-swiper">
                                    <ul>
                                        <li>Intégration des systèmes</li>
                                        <li>Sécurité des données</li>
                                        <li>Accessibilité et usabilité</li>
                                        <li>Optimisation des processus</li>
                                        <li>Transparence et responsabilité</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>

        </section><!-- /Testimonials Section -->

        <section class="vw-100 vh-100">
            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2> Nos solutions, vos bénéfices</h2>
            </div>
            <!-- End Section Title -->
            <div id="carouselExampleIndicators" class="carousel slide w-100 h-100 d-flex flex-row justify-content-center align-items-center">

                <div class="container my-5  w-100 h-100">
                    <div class="position-relative p-5 text-center bg-body rounded-5 w-100 h-100">
                        <div class="carousel-inner w-100 h-100">

                            <div class="carousel-item active w-100 h-100">
                                <div  class="w-auto h-100 text-light news card d-flex flex-row justify-content-center align-items-end" >
                                    <div class="card-body">
                                        <p><img src="assets/img/testimonials/6.png" alt=""></p>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <h3>Augmentation de l'Efficacité</h3>
                                                <p>
                                                    <span>
                                                        Automatisation des tâches répétitives
                                                        et simplification des processus, réduisant
                                                        les délais et augmentant la productivité.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Réduction des Coûts</h3>
                                                <p>
                                                    <span>
                                                        Diminution des dépenses opérationnelles
                                                        grâce à la réduction du besoin de paperasse,
                                                        d'erreurs humaines et de ressources manuelles.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Amélioration de la Précision</h3>
                                                <p>
                                                    <span>
                                                        Réduction des erreurs et des incohérences
                                                        par l'automatisation et la centralisation des données
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Accès et Analyse des Données</h3>
                                                <p>
                                                    <span>
                                                        Centralisation des informations permettant
                                                        une meilleure analyse, des prévisions plus
                                                        précises et une prise de décision éclairée.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Amélioration de la Collaboration</h3>
                                                <p>
                                                    <span>
                                                        Facilitation du travail en équipe avec des
                                                        outils de communication et de gestion de
                                                        projet intégrés.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Renforcement de la Sécurité</h3>
                                                <p>
                                                    <span>
                                                        Mise en place de mesures avancées pour
                                                        protéger les données sensibles contre les
                                                        violations et les cyberattaques.
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!--End of Carousel-Item 1-->

                            <div class="carousel-item w-100 h-100">
                                <div  class="w-auto h-100 text-light news card d-flex flex-row justify-content-center align-items-end">
                                    <div class="card-body">

                                        <p><img src="assets/img/testimonials/1.png" alt=""></p>
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <h3>Augmentation de l'Efficacité</h3>
                                                <p>
                                                    <span>
                                                        Automatisation des tâches répétitives
                                                        et simplification des processus, réduisant
                                                        les délais et augmentant la productivité.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Réduction des Coûts</h3>
                                                <p>
                                                    <span>
                                                        Diminution des dépenses opérationnelles
                                                        grâce à la réduction du besoin de paperasse,
                                                        d'erreurs humaines et de ressources manuelles.
                                                    </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Amélioration de la Précision</h3>
                                                <p>
                                            <span>
                                                Réduction des erreurs et des incohérences
                                                par l'automatisation et la centralisation des données
                                            </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Accès et Analyse des Données</h3>
                                                <p>
                                            <span>
                                                Centralisation des informations permettant
                                                une meilleure analyse, des prévisions plus
                                                précises et une prise de décision éclairée.
                                            </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Amélioration de la Collaboration</h3>
                                                <p>
                                            <span>
                                                Facilitation du travail en équipe avec des
                                                outils de communication et de gestion de
                                                projet intégrés.
                                            </span>
                                                </p>
                                            </div>
                                            <div class="col-lg-4">
                                                <h3>Renforcement de la Sécurité</h3>
                                                <p>
                                            <span>
                                                Mise en place de mesures avancées pour
                                                protéger les données sensibles contre les
                                                violations et les cyberattaques.
                                            </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!--End of Carousel-Item 2-->

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

                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                    <i class="bi bi-chevron-left text-bg-dark text-light py-2 px-2 rounded"></i>
                    <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>

                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                    <i class="bi bi-chevron-right text-bg-dark text-light py-2 px-2 rounded"></i>
                    <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>

            </div>
        </section>

        <!-- Portfolio Section -->
        <section id="portfolio" class="portfolio section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Découvrez notre métier</h2>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

                    <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">


                        <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
                            <img src="assets/img/masonry-portfolio/masonry-portfolio-10.jpg" class="img-fluid" alt="">
                            <div class="portfolio-info">
                                <h4>Développement de logiciel et application</h4>
                                <p>Nous développons des logiciels et des applications sur
                                messure en assurant la conception, la programmation, les tests et le déploiement
                                pour répondre précisément aux besoins des utilisateurs.</p>
                                <a href="portfolio-details.html" title="More Details" class="details-link">En savoir plus</a>
                            </div>
                        </div><!-- End Portfolio Item -->

                        <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
                            <img src="assets/img/masonry-portfolio/masonry-portfolio-11.jpg" class="img-fluid" alt="">
                            <div class="portfolio-info">
                                <h4>Infrastructure réseaux et cybersécurité</h4>
                                <p>Lorem ipsum, dolor sit</p>
                                <a href="portfolio-details.html" title="More Details" class="details-link">En savoir plus</a>
                            </div>
                        </div><!-- End Portfolio Item -->

                        <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
                            <img src="assets/img/masonry-portfolio/masonry-portfolio-12.jpg" class="img-fluid" alt="">
                            <div class="portfolio-info">
                                <h4>Services et formations</h4>
                                <p>Lorem ipsum, dolor sit</p>
                                <a href="portfolio-details.html" title="More Details" class="details-link">En savoir plus</a>
                            </div>
                        </div><!-- End Portfolio Item -->

                    </div><!-- End Portfolio Container -->

                </div>

            </div>

        </section><!-- /Portfolio Section -->

        <!-- Timeline 3 - Bootstrap Brain Component -->
        <section class="bsb-timeline-3 bg-light py-3 py-md-5 py-xl-8 section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Pourquoi, nous devons vous accompagner ?</h2>
            </div><!-- End Section Title -->

            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-10 col-md-12 col-xl-10 col-xxl-9">

                        <ul class="timeline">
                            <li class="timeline-item left">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <h2 class="card-title mb-3">Définition des Objectifs</h2>
                                                <p class="card-text m-0">
                                                    Identification claire des buts à atteindre et des résultats attendus.
                                                    Cela peut inclure la définition des exigences et des critères de succès.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item right">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <h2 class="card-title mb-3">Planification</h2>
                                                <p class="card-text m-0">
                                                    Elaboration d'un plan détaillé qui décrit les étapes à suivre, les ressources
                                                    nécessaires, les délais et les responsabilités des différents acteurs impliqués.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item left">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <h2 class="card-title mb-3">Collecte d'Informations</h2>
                                                <p class="card-text m-0">
                                                    Rassemblement des données, documents ou autres ressources nécessaires pour réaliser
                                                    les tâches prévues. Cela peut inclure la recherche, l'analyse et la vérification des
                                                    informations.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item right">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <h2 class="card-title mb-3">Exécution des Tâches</h2>
                                                <p class="card-text m-0">
                                                    Mise en œuvre des actions définies dans le plan.
                                                    Cette étape peut impliquer la coordination entre différents membres de l'équipe,
                                                    la réalisation de tâches spécifiques et la gestion des ressources.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item left">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <h2 class="card-title mb-3">Suivi et Contrôle</h2>
                                                <p class="card-text m-0">
                                                    Surveillance continue du processus pour s'assurer que les tâches sont réalisées
                                                    conformement au plan. Cela inclut la gestion des écarts, l'ajustement des actions si nécessaire
                                                    et la résolution des problèmes.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-item right">
                                <div class="timeline-body">
                                    <div class="timeline-content timeline-indicator">
                                        <div class="card border-0 shadow">
                                            <div class="card-body p-xl-4">
                                                <!-- <h5 class="card-subtitle text-secondary mb-1">2013</h5> -->
                                                <h2 class="card-title mb-3">Révision et Ajustements</h2>
                                                <p class="card-text m-0">
                                                    Evaluation de la progression et des résultats obtenus. Identification des améliorations possibles,
                                                    ajustement des processus et mise en œuvre des changements nécessaires.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

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

        <!-- Services Section -->
        <section id="services" class="services section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Zoom sur notre blog</h2>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="row gy-4">

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="service-item position-relative">
                            <div class="icon">
{{--                                <i class="bi bi-activity"></i>--}}
                                <img src="assets/img/blog/blog1.jpg" class="img-fluid" alt="">
                            </div>
                            <a href="#" class="stretched-link">
                                <h3>Comment assurer la sécurité informatique ?</h3>
                            </a>
                            <p>
                                Vous devez trouver un juste équilibre entre palier vos
                                vulnérabilités et le manque d'ergonomie des solutions de
                                sécurité drastiques. Un bon plan de sécurité... <a href="">En savoir plus</a>
                            </p>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="service-item position-relative">
                            <div class="icon">
{{--                                <i class="bi bi-broadcast"></i>--}}
                                <img src="assets/img/blog/blog2.jpg" class="img-fluid" alt="">
                            </div>
                            <a href="#" class="stretched-link">
                                <h3>Quels sont les avantages de la sécurité informatique ?</h3>
                            </a>
                            <p>
                                Cela passe par la protection de ses données personnelles, la vérification
                                des emails reçus (expéditeurs, contenu...), la création des mots de passe
                                solides... <a href="">En savoir plus</a>
                            </p>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                        <div class="service-item position-relative">
                            <div class="icon">
{{--                                <i class="bi bi-easel"></i>--}}
                                <img src="assets/img/blog/blog3.jpg" class="img-fluid" alt="">
                            </div>
                            <a href="#" class="stretched-link">
                                <h3>Comment assurer la sécurité des systèmes d'information ?</h3>
                            </a>
                            <p>
                                La première étape pour assurer la sécurité des systèmes d'informations
                                est d'établir un plan de sécurité informatique. Cela consiste à faire un audit... <a
                                    href="">En savoir plus</a>
                            </p>
                        </div>
                    </div><!-- End Service Item -->

                </div>

                <div class="container section-title" data-aos="fade-up">
                    <a href="#contact" class="btn-bar" >En savoir plus</a>
                </div>

            </div>

        </section><!-- /Services Section -->

        <!-- Team Section -->
        <section id="team" class="team section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Notre équipe</h2>
                <!-- <p><span>Nos têtes </span> <span class="description-title">d'affiche</span></p> -->
            </div><!-- End Section Title -->

            <div class="container">

                <div class="slider-92911">
                    <div class="owl-carousel slide-one-item">

                        <div class="d-md-flex testimony-29101 align-items-stretch">
                            <div class="image" style="background: no-repeat url('assets/img/team/team-6.png');"></div>
                            <div class="text">
                            <blockquote>
                                <div class="author">&mdash; Julia Smith</div>
                                <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, at! Atque totam obcaecati veniam eius vero, similique quibusdam! Sunt sequi, nemo. Quam consequuntur ipsum suscipit repellat molestiae laboriosam, incidunt!&rdquo;</p>
                            </blockquote>
                            </div>
                        </div>  <!-- .item -->

                        <div class="d-md-flex testimony-29101 align-items-stretch">
                            <div class="image" style="background: no-repeat url('assets/img/team/team-6.png');"></div>
                            <div class="text">
                            <blockquote>
                                <div class="author">&mdash; Julia Smith</div>
                                <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, at! Atque totam obcaecati veniam eius vero, similique quibusdam! Sunt sequi, nemo. Quam consequuntur ipsum suscipit repellat molestiae laboriosam, incidunt!&rdquo;</p>
                            </blockquote>
                            </div>
                        </div>  <!-- .item -->

                        <div class="d-md-flex testimony-29101 align-items-stretch">
                            <div class="image" style="background: no-repeat url('assets/img/team/team-6.png');"></div>
                            <div class="text">
                            <blockquote>
                                <div class="author">&mdash; Julia Smith</div>
                                <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, at! Atque totam obcaecati veniam eius vero, similique quibusdam! Sunt sequi, nemo. Quam consequuntur ipsum suscipit repellat molestiae laboriosam, incidunt!&rdquo;</p>
                            </blockquote>
                            </div>
                        </div>  <!-- .item -->
                            

                    </div>
                
                    <div class="my-5 text-center">
                        <ul class="thumbnail">
                            <li class="active"><a href="#"><img src="assets/img/team/team-6.png" alt="Image" class="img-fluid"></a></li>
                            <li><a href="#"><img src="assets/team/images/person_2_sm.jpg" alt="Image" class="img-fluid"></a></li>
                            <li><a href="#"><img src="assets/team/images/person_3_sm.jpg" alt="Image" class="img-fluid"></a></li>
                        </ul>
                    </div>
                </div>


            </div>


            <!-- <div class="container">

                <div class="row gy-4">

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
                        <div class="team-member">
                            <div class="member-img">
                                <img src="assets/img/team/team-1.jpg" class="img-fluid" alt="">
                                <div class="social">
                                    <a href=""><i class="bi bi-twitter-x"></i></a>
                                    <a href=""><i class="bi bi-facebook"></i></a>
                                    <a href=""><i class="bi bi-instagram"></i></a>
                                    <a href=""><i class="bi bi-linkedin"></i></a>
                                </div>
                            </div>
                            <div class="member-info">
                                <h4>De-gall Genifère Ewosso</h4>
                                <span>CTO</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div> -->

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

        <!-- Contact Section -->
        <section id="contact" class="contact section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Prendre un Rendez-vous</h2>
                <p><span class="description-title">Nous serons ravis de vous rencontrer pour discuter
                    de vos objectifs. Veuillez remplir le formulaire ci-dessous pour fixer un rendez-vous.
                    Nous avons hâte d'échanger avec vous.</span></p>
            </div><!-- End Section Title -->

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row gy-4">

                    <div class="col-lg-5">

                        <div class="info-wrap">
                            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
                                <i class="bi bi-geo-alt flex-shrink-0"></i>
                                <div>
                                    <h3>Address</h3>
                                    <p>110 rue Cheikh Ahmadou BAMBA MBACKE. (Rep. du GABON)</p>
                                    <p>859 rue VOULA Plateau des 15 ans, MOUNGALI. (Rep du CONGO)</p>
                                </div>
                            </div><!-- End Info Item -->

                            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                                <i class="bi bi-telephone flex-shrink-0"></i>
                                <div>
                                    <h3>Téléphone</h3>
                                    <p>(+241) 77 22 31 49 | 11 74 80 05</p>
                                    <p>(+242) 05 797 28 46</p>
                                </div>
                            </div><!-- End Info Item -->

                            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                                <i class="bi bi-envelope flex-shrink-0"></i>
                                <div>
                                    <h3>Email</h3>
                                    <p>contact@initialde.com</p>
                                    <p>initial@initialde.com</p>
                                </div>
                            </div><!-- End Info Item -->

                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2042523.7574995141!2d10.129516217918027!3d-0.919797598457258!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xdacbdc0b5671135%3A0x67e969f58d239270!2sINITIAL%20D%C3%A9veloppement!5e0!3m2!1sfr!2sga!4v1729011237336!5m2!1sfr!2sga"
                                frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen=""
                                loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up"
                              data-aos-delay="200">
                            <div class="row gy-4">

                                <div class="col-md-6">
                                    <label for="name-field" class="pb-2">Nom/Raison sociale</label>
                                    <input type="text" name="nom" id="name-field" class="form-control" required="">
                                </div>

                                <div class="col-md-6">
                                    <label for="email-field" class="pb-2">Email</label>
                                    <input type="email" class="form-control" name="email" id="email-field" required="">
                                </div>

                                <div class="col-md-12">
                                    <label for="subject-field" class="pb-2">Sujet</label>
                                    <input type="text" class="form-control" name="subject" id="subject-field"
                                           required="">
                                </div>

                                <div class="col-md-12">
                                    <label for="message-field" class="pb-2">Message</label>
                                    <textarea class="form-control" name="message" rows="10" id="message-field"
                                              required=""></textarea>
                                </div>

                                <div class="col-md-12">
                                    <label for="subject-field" class="pb-2">Joindre un fichier (Cahier des charges ou autre)</label>
                                    <input type="file" class="form-control" name="subject" id="subject-field"
                                           required="">
                                </div>

                                <div class="col-md-12 text-center">
                                    <div class="loading">Loading</div>
                                    <div class="error-message"></div>
                                    <div class="sent-message">Your message has been sent. Thank you!</div>

                                    <button type="submit">Envoyer</button>
                                </div>

                            </div>
                        </form>
                    </div><!-- End Contact Form -->

                </div>

            </div>

        </section><!-- /Contact Section -->

    </main>

@endsection