@extends('frontend.jpt.layout.mainlayout')
@section('content')
    <section class="cover-background top full-screen ipad-top-space-margin py-0 md-h-450px sm-h-450px"
        style="background-image:url({{ URL::asset('/assets/frontend/jpt/img/banner.jpg') }});">
        <div class="opacity-very-light bg-black"></div>
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-100">
                <div class="col-xl-10 col-lg-10 col-md-10 position-relative z-index-1 mt-4">
                    <div class="banner mb-25px pt-3 pb-3 mt-4 mt-md-0">
                        <h1 style="font-size: 20px;" class="text-white text-center ps-2 pe-2 fw-600 m-0 letter-spacing-4px">
                            JOURNÉES <span class="spec">PARAPHARMACEUTIQUES</span> DE TUNISIE</h1>
                        <p
                            class="pt-2 pb-2 ms-2 me-2 fw-600 fs-16 sm-w-95 text-white text-center letter-spacing-2px d-none d-md-block">
                            Dynamiser la chaîne de valeur parapharmaceutique :<br>
                            innovation, qualité et performance commerciale</p>

                        <div class="container">
                            <div class="row g-5 justify-content-center align-items-center h-100">
                                <div class="col-auto">
                                    <div class="text-white text-center m-0 letter-spacing-2px text-nowrap"
                                        style="font-size: 1.1em !important;"><i class="fa-solid fa-calendar-days icon-red"
                                            style="font-size: 1.5em;"></i>
                                        23
                                        & 24 Janvier
                                        2026
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="text-white text-center m-0 letter-spacing-2px text-nowrap"
                                        style="font-size: 1.1em !important;"><i class="fa-solid fa-location-dot icon-red"
                                            style="font-size: 1.5em;"></i>
                                        Palais des Congrès de Tunis</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div
                        class="row align-items-center justify-content-center h-100 z-index-2 position-relative mt-md-5 d-none d-md-flex">
                        <div class="col-md-10 col-lg-10 col-xl-6 text-center">
                            <div class="col d-flex justify-content-center countdown-style-01">
                                <div data-enddate="2026/01/23 9:00:00" class="countdown"></div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </section>


    <style>
        .carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 30px 0;
        }

        .carousel-track {
            display: flex;
            animation: scroll 40s linear infinite;
            width: max-content;
        }

        .carousel-track:hover {
            animation-play-state: paused;
        }

        .sponsor-logo {
            width: 171px;
            height: 71px;
            margin: 0 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 10px;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .sponsor-logo:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        }

        .sponsor-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .carousel-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .control-btn {
            background-color: #3498db;
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
        }

        .control-btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        .sponsor-count {
            display: inline-block;
            background-color: #2ecc71;
            color: white;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            margin-top: 20px;
            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
        }

        @media (max-width: 768px) {
            .sponsor-logo {
                margin: 0 15px;
            }

            .control-btn {
                width: 45px;
                height: 45px;
            }
        }
    </style>


    <section class="pt-4 pb-4" id="apropos">
        <div class="container">

            <div class="carousel-container">
                <div class="carousel-track" id="carouselTrack">
                    <!-- Les logos seront ajoutés dynamiquement par JavaScript -->
                </div>
            </div>

            {{-- <div class="sponsor-count">
                <i class="fas fa-users"></i> <span id="sponsorCount">0</span> Sponsors
            </div>

            <div class="carousel-controls">
                <button class="control-btn" id="pauseBtn" title="Pause">
                    <i class="fas fa-pause"></i>
                </button>
                <button class="control-btn" id="playBtn" title="Lecture">
                    <i class="fas fa-play"></i>
                </button>
                <button class="control-btn" id="slowBtn" title="Ralentir">
                    <i class="fas fa-tachometer-alt"></i>
                </button>
                <button class="control-btn" id="fastBtn" title="Accélérer">
                    <i class="fas fa-tachometer-alt-fast"></i>
                </button>
            </div> --}}

            <script>
                // Tableau des logos sponsors (remplacez par vos propres images)
                const sponsorLogos = [{
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/01 - 2M Pharma-100.jpg') }}",
                        name: "2M Pharma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/02 - Kilani-100.jpg') }}",
                        name: "Kilani"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/03 - SVR-100.jpg') }}",
                        name: "SVR"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/04 - TUNITALIA-100.jpg') }}",
                        name: "TUNITALIA"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/05 - GS Santé-100.jpg') }}",
                        name: "GS Santé"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/06 - New Medica-100.jpg') }}",
                        name: "New Medica"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/07 - Loreal-100.jpg') }}",
                        name: "L'oreal"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/08 - Cosmedis-100.jpg') }}",
                        name: "Cosmedis"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/09 - Dahlia-100.jpg') }}",
                        name: "Dahlia"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/10 - Daylong-100.jpg') }}",
                        name: "Daylong"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/10 - Emadis-100.jpg') }}",
                        name: "Emadis"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/11 - Pharma Chimique-100.jpg') }}",
                        name: "Pharma Chimique"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/12 - Phyteal-100.jpg') }}",
                        name: "Phyteal"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/14 - Opalia-100.jpg') }}",
                        name: "Opalia"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/15 - Roncey-100.jpg') }}",
                        name: "Roncey"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/16 - Alania - Bioderma-100.jpg') }}",
                        name: "Alania - Bioderma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/17 - GEI-100.jpg') }}",
                        name: "GEI"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/19 - Calino esthelle-100.jpg') }}",
                        name: "Calino esthelle"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/20 - Bioorient-100.jpg') }}",
                        name: "Bioorient"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/21 - Atlas-100.jpg') }}",
                        name: "Atlas"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/22 - Proderma-100.jpg') }}",
                        name: "Proderma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/23 - Health Pro-100.jpg') }}",
                        name: "Health Pro"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/24 - Bambini-100.jpg') }}",
                        name: "Bambini"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/25 - Vita Veine-100.jpg') }}",
                        name: "Vita Veine"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/26 - Pharmasinus-100.jpg') }}",
                        name: "Pharmasinus"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/27 - Pharmavision Esthelle-100.jpg') }}",
                        name: "Pharmavision Esthelle"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/28 - Attijari-100.jpg') }}",
                        name: "Attijari"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/29 - Hyacinth-100.jpg') }}",
                        name: "Hyacinth"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/31 - Stoderma-100.jpg') }}",
                        name: "Stoderma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/32 - Pharmatec-100.jpg') }}",
                        name: "Pharmatec"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/33 - Cure all-100.jpg') }}",
                        name: "Cure all"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/34 - eden life-100.jpg') }}",
                        name: "eden life"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/35 - sincer-100.jpg') }}",
                        name: "sincer"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/36 - poly pharma-100.jpg') }}",
                        name: "poly pharma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/37 - Oleocare-100.jpg') }}",
                        name: "Oleocare"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/38 - sentinel Data-100.jpg') }}",
                        name: "sentinel Data"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/39 - pure care-100.jpg') }}",
                        name: "pure care"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/40 - Moline-100.jpg') }}",
                        name: "Moline"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/41 - Therapia-100.jpg') }}",
                        name: "Therapia"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/42 - striderma-100.jpg') }}",
                        name: "striderma"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/43 - TWA voyage-100.jpg') }}",
                        name: "TWA voyage"
                    },
                    {
                        logo: "{{ URL::asset('/assets/frontend/jpt/sponsors/44 - Ftouh-100.jpg') }}",
                        name: "Ftouh"
                    }
                ];

                // Éléments DOM
                const carouselTrack = document.getElementById('carouselTrack');
                // const sponsorCount = document.getElementById('sponsorCount');
                // const pauseBtn = document.getElementById('pauseBtn');
                // const playBtn = document.getElementById('playBtn');
                // const slowBtn = document.getElementById('slowBtn');
                // const fastBtn = document.getElementById('fastBtn');

                // Variables pour l'animation
                let animationSpeed = 70; // en secondes
                let isPlaying = true;

                // Initialisation du carrousel
                function initCarousel() {
                    // Afficher le nombre de sponsors
                    //  sponsorCount.textContent = sponsorLogos.length;

                    // Créer les éléments logos et les dupliquer pour l'effet infini
                    // Première série de logos
                    sponsorLogos.forEach(sponsor => {
                        const logoElement = createLogoElement(sponsor);
                        carouselTrack.appendChild(logoElement);
                    });

                    // Dupliquer les logos pour l'effet infini
                    sponsorLogos.forEach(sponsor => {
                        const logoElement = createLogoElement(sponsor);
                        carouselTrack.appendChild(logoElement);
                    });

                    // Appliquer l'animation
                    updateAnimation();
                }

                // Créer un élément logo
                function createLogoElement(sponsor) {
                    const div = document.createElement('div');
                    div.className = 'sponsor-logo';

                    const img = document.createElement('img');
                    img.src = sponsor.logo;
                    img.alt = `Logo ${sponsor.name}`;
                    img.title = sponsor.name;

                    div.appendChild(img);
                    return div;
                }

                // Mettre à jour l'animation
                function updateAnimation() {
                    carouselTrack.style.animation = `scroll ${animationSpeed}s linear infinite`;
                    carouselTrack.style.animationPlayState = isPlaying ? 'running' : 'paused';
                }

                // Gestionnaires d'événements pour les boutons
                /*pauseBtn.addEventListener('click', () => {
                    isPlaying = false;
                    updateAnimation();
                });

                playBtn.addEventListener('click', () => {
                    isPlaying = true;
                    updateAnimation();
                });

                slowBtn.addEventListener('click', () => {
                    animationSpeed = 60;
                    updateAnimation();
                });

                fastBtn.addEventListener('click', () => {
                    animationSpeed = 20;
                    updateAnimation();
                });*/

                // Initialiser le carrousel au chargement
                window.addEventListener('DOMContentLoaded', initCarousel);
            </script>

            <div class="d-flex justify-content-center mb-4">
                <div class="row">
                    <div class="col-12 text-center col-md-auto mt-3 mb-3">
                        <a href="/programme"
                            class="btn btn-extra-large btn-rounded me-md-2 ls-0px btn-base-color no-hover-change text-nowrap">
                            <span>
                                <span class="btn-text">Découvrez le programme des journées</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Logos des organisateurs -->
            <div class="row justify-content-center mb-4">
                <div class="col-lg-4 col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="m-0">
                                <img src="{{ URL::asset('/assets/frontend/jpt/img/conect-logo.jpg') }}"
                                    alt="CONECT - Confédération des Entreprises Citoyennes de Tunisie" class="img-fluid"
                                    style="max-height: 80px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center p-4">
                            <div class="m-0">
                                <img src="{{ URL::asset('/assets/frontend/jpt/img/gpgpp-logo.jpg') }}"
                                    alt="GPGPP - Groupement Professionnel des Grossistes des Produits Parapharmaceutiques"
                                    class="img-fluid" style="max-height: 80px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Texte de présentation -->
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <p class="text-start mb-2">Le Groupement Professionnel des Grossistes des Produits Parapharmaceutiques,
                        relevant de l’organisation patronale CONECT, organise les Journées de la
                        Parapharmacie - JPT 2026, les vendredi 23 et samedi 24 janvier 2026, au Palais des
                        Congrès de Tunis, sous le thème :
                        <span class="text-green fw-600">« Le secteur de la parapharmacie : réalités et perspectives
                            »</span>.
                    </p>
                    <p class="text-start mb-2">Cette manifestation, dans sa première édition, constitue une plateforme
                        nationale
                        rassemblant l’ensemble des acteurs du secteur de la parapharmacie
                        professionnels, experts et structures concernées. Elle vise à améliorer la
                        performance du secteur, soutenir les chaînes de valeur et accroître sa rentabilité et
                        renforcer son rôle au sein des systèmes sanitaires et économiques.</p>
                </div>
            </div>

            <div class="row justify-content-center pt-4">
                <div class="col-lg-4 col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm overflow-hidden">
                        <div class="position-relative overflow-hidden" style="height: 100px;">
                            <div class="h-100 cover-background"
                                style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/1.jpg') }}); background-position: center;">
                            </div>
                            <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"></div>
                        </div>
                        <div class="card-body text-center">
                            <h5 class="text-green mb-4 fw-600">Objectifs</h5>
                            <div class="mb-3">
                                <span class="badge bg-light-green text-green">Impact & décisions</span>
                            </div>

                            <ul class="text-start ps-3">
                                {{-- <li>Clarifier le futur cadre légal des compléments alimentaires.</li> --}}
                                <li>Encadrer la vente en ligne & la publicité digitale.</li>
                                <li>Renforcer la confiance, la qualité & la conformité.</li>
                                <li>Créer une feuille de route sectorielle concrète.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm overflow-hidden">
                        <div class="position-relative overflow-hidden" style="height: 100px;">
                            <div class="h-100 cover-background"
                                style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/2.jpg') }}); background-position: center;">
                            </div>
                            <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"></div>
                        </div>
                        <div class="card-body text-center">
                            <h5 class="text-green mb-4 fw-600">Pour qui ?</h5>
                            <div class="mb-3">
                                <span class="badge bg-light-green text-green">Public cible</span>
                            </div>
                            <ul class="text-start ps-3">
                                <li>Pharmaciens</li>
                                <li>Gérants de Parapharmacies</li>
                                <li>Fabricants locaux</li>
                                <li>Distributeurs</li>
                                <li>Grossistes</li>
                                <li>Représentants des institutions</li>
                                <li>Experts du domaine</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm overflow-hidden">
                        <div class="position-relative overflow-hidden" style="height: 100px;">
                            <div class="h-100 cover-background"
                                style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/3.jpg') }}); background-position: center;">
                            </div>
                            <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"></div>
                        </div>
                        <div class="card-body text-center">
                            <h5 class="text-green mb-4 fw-600">Format</h5>
                            <div class="mb-3">
                                <span class="badge bg-light-green text-green">2 jours</span>
                            </div>
                            <ul class="text-start ps-3">
                                <li>Conférences Plénières</li>
                                <li>Symposiums</li>
                                <li>Panels réglementaires & économiques</li>
                                <li>Ateliers pratiques "métier"</li>
                                <li>Espace exposants & rendez-vous B2B</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-4 pb-4 bg-green">
        <div class="container">
            <div class="row justify-content-center g-0 counter-style-04">
                <h3 class="alt-font text-white fw-600 text-center mb-0">JPT 2026 en Chiffres</h3>
                <div class="col-lg-2 col-md-6 feature-box1 text-center mt-4">
                    <div class="feature-box1-content">
                        <h4 class="vertical-counter d-inline-flex text-white fw-700 ls-minus-2px mt-0 mb-0 ls-minus-1px"
                            data-to="1800"><i class="feather icon-feather-plus"></i>
                        </h4>
                        <p class="text-white mt-3 mb-0 fw-500 fs-17 lh-28">Visiteurs attendus</p>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 feature-box1 text-center mt-4">
                    <div class="feature-box1-content">
                        <h4 class="vertical-counter d-inline-flex text-white fw-700 ls-minus-2px mt-0 mb-0 ls-minus-1px"
                            data-to="20"><i class="feather icon-feather-plus"></i>
                        </h4>
                        <p class="text-white mt-3 mb-0 fw-500 fs-17 lh-28">Intervenants</p>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 feature-box1 text-center mt-4">
                    <div class="feature-box1-content">
                        <h4 class="vertical-counter d-inline-flex text-white fw-700 ls-minus-2px mt-0 mb-0 ls-minus-1px"
                            data-text="" data-to="50"><i class="feather icon-feather-plus"></i>
                        </h4>
                        <p class="text-white mt-3 mb-0 fw-500 fs-17 lh-28">Exposants</p>
                    </div>
                </div>
                <br>
                <br>
            </div>
        </div>
    </section>

    <section class="p-0 bg-very-light-gray overflow-hidden" id="themes">
        <div class="container-fluid p-0">
            <div class="row justify-content-center g-0">
                <div class="col-lg-6 p-4 xl-p-4 md-p-4 xs-pb-4 text-center text-lg-start">
                    <p class="mb-4">Des panels ciblés pour répondre aux enjeux immédiats et préparer les évolutions à
                        venir.</p>

                    {{-- <div class="mb-3">
                        <h6 class="text-green mb-2 fw-600">Compléments alimentaires</h6>
                        <span class="badge bg-light-green text-green">Réglementation</span>
                        <p class="text-start">Modernisation du cadre réglementaire, exigences de qualité, contrôle,
                            importation & promotion.
                        </p>
                    </div> --}}

                    <div class="mb-3">
                        <h6 class="text-green mb-2 fw-600">E-commerce parapharmaceutique</h6>
                        <span class="badge bg-light-green text-green">Digital</span>
                        <p class="text-start">Encadrement de la vente en ligne : traçabilité, responsabilité des acteurs,
                            lutte contre
                            contrefaçons.</p>
                    </div>

                    <div class="mb-3">
                        <h6 class="text-green mb-2 fw-600">Chaîne de valeur & terrain</h6>
                        <span class="badge bg-light-green text-green">Performance</span>
                        <p class="text-start">Coopération pharmacie–parapharmacie, rôle du grossiste, merchandising,
                            formation & rentabilité.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 md-h-450px xs-h-250px">
                    <div class="h-100 cover-background background-position-right"
                        style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/natural-cosmetics-desk.jpg') }})">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cover-background pt-5 pb-4"
        style="background-image: url({{ URL::asset('/assets/frontend/jpt/img/organisation-bg.jpg') }});"
        id="organisation">
        <div class="opacity-very-light bg-white"></div>
        <div class="container position-relative z-index-1">
            <h3 class="alt-font text-green fw-600 text-center mb-4">Comité d'Organisation</h3>

            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="text-center">
                        <ul class="list-unstyled">
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Amin ABID</h6>
                                <p class="text-green fw-600 mb-0">M.S.S</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Walid BOUSSARSAR</h6>
                                <p class="text-green fw-600 mb-0">BEST PARA</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Mourad GTAIET</h6>
                                <p class="text-green fw-600 mb-0">PARAGROS</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Ahmed OUADAY</h6>
                                <p class="text-green fw-600 mb-0">GREEN PHARMA</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Taoufik SOLTANI</h6>
                                <p class="text-green fw-600 mb-0">PHARMACHIMIQUE</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Riadh BELLAAJ</h6>
                                <p class="text-green fw-600 mb-0">COGEPA</p>
                            </li>
                            <li class="mb-3">
                                <h6 class="text-dark-gray fw-600 mb-1">Achraf CHOUAYAKH</h6>
                                <p class="text-green fw-600 mb-0">CHOUAYAKH PARAPHARM</p>
                            </li>
                            <li class="mb-0">
                                <h6 class="text-dark-gray fw-600 mb-1">Mohamed BOUGHANMI</h6>
                                <p class="text-green fw-600 mb-0">SALMA PARAPHARM</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection