@extends("Layouts.layout")
@section("title")
COALA SOLAR POWER
@endsection
@section("contant")
<div class="no-bottom no-top" id="content">

    <div id="top"></div>

    <section class="section-dark no-top no-bottom text-light jarallax relative v-center"
        data-video-src="mp4:assets/video/1.mp4">
        <div class="gradient-edge-top"></div>
        <div class="gradient-edge-bottom h-50"></div>
        <div class="sw-overlay op-6"></div>
        <div class="abs w-80 bottom-10 z-2 w-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-start">
                            <div class="col-lg-5">
                                <p class="wow fadeInUp">Passez à l'énergie solaire dès aujourd'hui pour bénéficier d'une
                                    énergie propre, de réelles économies durables, et contribuer à un avenir plus
                                    lumineux et respectueux de l'environnement, pour vous comme pour la planète.</p>
                            </div>
                            <h1 class="fs-150 text-uppercase fs-sm-10vw mb-4 lh-1 wow fadeInUp" data-wow-delay=".2s">un
                                avenir prometteur</h1>

                            <div class="d-flex align-items-center wow fadeInUp" data-wow-delay=".4s">
                                <a class="btn-main me-5" href="/get-quote">Commencez dès maintenant</a>
                                <div class="relative me-4">
                                    <img src="{{ asset('assets/images/testimonial/4.webp') }}"
                                        class="w-50px circle ms-min-10 wow fadeInRight" data-wow-delay=".4s" alt="">
                                    <img src="{{ asset('assets/images/testimonial/2.webp') }}"
                                        class="w-50px circle ms-min-10 wow fadeInRight" data-wow-delay=".6s" alt="">
                                    <img src="{{ asset('assets/images/testimonial/6.webp') }}"
                                        class="w-50px circle ms-min-10 wow fadeInRight" data-wow-delay=".8s" alt="">
                                </div>
                                <div class="fw-600 fs-14 lh-1-5 wow fadeInRight" data-wow-delay="1s"><span
                                        class="fs-16 fw-bold ">25k</span><br>clients satisfaits</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <h5 class="wow fadeInRight">À propos de nous</h5>
                </div>
                <div class="col-lg-9">
                    <h3 class="wow fadeInRight" data-wow-delay=".2s">
                        Passez à l'énergie solaire et faites des économies tout en préservant la planète. Notre équipe
                        d'experts propose des solutions énergétiques propres et fiables pour les particuliers et les
                        entreprises.
                        <span class="op-3">Adoptez une démarche écologique, réduisez vos factures et profitez dès
                            aujourd'hui de l'autonomie énergétique !</span>
                    </h3>

                    <div class="spacer-single"></div>

                    <div class="row g-4 gx-5">
                        <div class="col-md-3 col-sm-6">
                            <div class="de_count lh-1-6 wow fadeInRight" data-wow-delay=".2s">
                                <h3 class="fs-40 mb-0"><span class="timer" data-to="100" data-speed="3000">0</span>K+
                                </h3>
                                Panneaux solaires fabriqués
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="de_count lh-1-6 wow fadeInRight" data-wow-delay=".4s">
                                <h3 class="fs-40 mb-0"><span class="timer" data-to="20" data-speed="3000">0</span>MW+
                                </h3>
                                Production annuelle
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="de_count lh-1-6 wow fadeInRight" data-wow-delay=".6s">
                                <h3 class="fs-40 mb-0"><span class="timer" data-to="5" data-speed="3000">0</span>+</h3>
                                Années d'expertise
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="border-top">
        <div class="container">
            <div class="row gy-4 gx-5 align-items-center">
                <div class="col-lg-6">
                    <div class="relative">
                        <div class="relative overflow-hidden z-2 mb-5 rounded-1 mb-4 w-60 soft-shadow wow zoomIn"><img
                                src="{{ asset('assets/images/misc/p1.webp') }}" class="w-100 wow scaleIn" data-wow-duration="1s"
                                alt=""></div>

                        <div class="abs overflow-hidden top-0 end-0 mt-5 rounded-1 mb-4 w-60 wow zoomIn"
                            data-wow-delay=".2s"><img src="{{ asset('assets/images/misc/p2.webp') }}" class="w-100 wow scaleIn"
                                data-wow-duration="1s" alt="">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="subtitle id-color wow fadeInUp" data-wow-delay=".0s">L'énergie solaire au service d'un
                        avenir durable</div>
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">Produisez, économisez, protégez <span
                            class="op-3">L'énergie solaire, au cœur de votre avenir</span></h2>
                    <p class="wow fadeInUp" data-wow-delay=".4s">Transformez le soleil en énergie. COALA SOLAR POWER
                        conçoit des panneaux photovoltaïques fiables, économiques et respectueux de l'environnement.</p>

                    <div class="border-bottom mb-4"></div>

                    <ul class="ul-check fw-600 mb-4 wow fadeInUp" data-wow-delay=".6s">
                        <li>Des panneaux conçus pour une performance à long terme.</li>
                        <li>Un rendement élevé pour maximiser votre production d'énergie.</li>
                        <li>Des technologies innovantes.</li>
                        <li>Des solutions propres pour réduire votre empreinte carbone.</li>
                    </ul>

                    <a class="btn-main fx-slide wow fadeInUp" data-wow-delay=".9s" href="/get-quote"><span>Obtenir un
                            devis</span></a>

                </div>

            </div>

        </div>
    </section>

    <section class="section-dark p-0" aria-label="section">
        <div class="bg-color text-dark d-flex py-4 lh-1">
            <div class="de-marquee-list-2 wow fadeIn">
                <span class="fs-40 fw-600 mx-3">Fabrication de Panneaux Solaires</span>
                <span class="fs-40 fw-600 mx-3"><img src="{{ asset('assets/images/logo-icon-dark.webp') }}"
                        class="w-40px" alt=""></span>
                <span class="fs-40 fw-600 mx-3">Maintenance & SAV</span>
                <span class="fs-40 fw-600 mx-3"><img src="{{ asset('assets/images/logo-icon-dark.webp') }}"
                        class="w-40px" alt=""></span>
                <span class="fs-40 fw-600 mx-3">Vente de Composants Électriques</span>
                <span class="fs-40 fw-600 mx-3"><img src="{{ asset('assets/images/logo-icon-dark.webp') }}"
                        class="w-40px" alt=""></span>
                <span class="fs-40 fw-600 mx-3">Appareils & Équipements Numériques</span>
                <span class="fs-40 fw-600 mx-3"><img src="{{ asset('assets/images/logo-icon-dark.webp') }}"
                        class="w-40px" alt=""></span>
                <span class="fs-40 fw-600 mx-3">Solutions Énergétiques Sur Mesure</span>
                <span class="fs-40 fw-600 mx-3"><img src="{{ asset('assets/images/logo-icon-dark.webp') }}"
                        class="w-40px" alt=""></span>
            </div>
        </div>
    </section>


    <section class="bg-light">
        <div class="container">
            <div class="row g-4 justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="subtitle wow fadeInUp mb-3">CSP Services</div>
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">Produisez, économisez, protégez, <span
                            class="op-3">L'énergie solaire au cœur de votre avenir</span></h2>
                    <p class="lead mb-0 wow fadeInUp">Générez votre propre électricité et faites des économies, Optez
                        pour une
                        énergie propre et protégez la planète avec nos panneaux solaires </p>
                    <div class="spacer-single"></div>
                    <div class="spacer-half"></div>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-lg-4 col-sm-6">
                    <div class="hover">
                        <div class="relative overflow-hidden">
                            <a href="/shop" class="d-block hover">
                                <div class="relative overflow-hidden rounded-1">
                                    <img src="{{ asset('assets/images/services/5.webp') }}"
                                        class="w-100 hover-scale-1-2" alt="">
                                </div>
                            </a>
                            <div class="p-30 relative bg-white rounded-1 mx-4 mt-min-100">
                                <div class="abs top-0 end-0 mt-min-30 me-4 circle bg-color w-60px h-60px">
                                    <a href="/shop">
                                        <img src="{{ asset('assets/images/misc/up-right-arrow.webp') }}"
                                            class="w-60px p-20" alt="">
                                    </a>
                                </div>
                                <h4>Modules</h4>
                                <p class="mb-0">Fabrication des panneaux photovoltaïque haute performance, conçus pour
                                    garantir rendement, fiabilité et durabilité.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <div class="hover">
                        <div class="relative overflow-hidden">
                            <a href="/shop" class="d-block hover">
                                <div class="relative overflow-hidden rounded-1">
                                    <img src="{{ asset('assets/images/services/3.webp') }}"
                                        class="w-100 hover-scale-1-2" alt="">
                                </div>
                            </a>
                            <div class="p-30 relative bg-white rounded-1 mx-4 mt-min-100">
                                <div class="abs top-0 end-0 mt-min-30 me-4 circle bg-color w-60px h-60px">
                                    <a href="/shop">
                                        <img src="{{ asset('assets/images/misc/up-right-arrow.webp') }}"
                                            class="w-60px p-20" alt="">
                                    </a>
                                </div>
                                <h4>Composants électriques</h4>
                                <p class="mb-0">Une gamme complète des composants électriques pour les installations
                                    photovoltaïques.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <div class="hover">
                        <div class="relative overflow-hidden">
                            <a href="/shop" class="d-block hover">
                                <div class="relative overflow-hidden rounded-1">
                                    <img src="{{ asset('assets/images/services/4.webp') }}"
                                        class="w-100 hover-scale-1-2" alt="">
                                </div>
                            </a>
                            <div class="p-30 relative bg-white rounded-1 mx-4 mt-min-100">
                                <div class="abs top-0 end-0 mt-min-30 me-4 circle bg-color w-60px h-60px">
                                    <a href="/shop">
                                        <img src="{{ asset('assets/images/misc/up-right-arrow.webp') }}"
                                            class="w-60px p-20" alt="">
                                    </a>
                                </div>
                                <h4>Produits digitaux</h4>
                                <p class="mb-0">Diversité des produits digitaux adaptés à vos besoins.</p>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="text-center">
                    <a class="btn-main fx-slide" href="/shop"><span>Voir tous nos produits</span></a>
                </div>

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

    <section class="bg-dark text-light">
        <div class="container relative z-1">
            <div class="row g-4 gx-5 align-items-center">

                <div class="col-lg-6">
                    <div class="relative">
                        <div
                            class="bg-blur text-light text-center rounded-1 abs w-200px p-4 m-4 bottom-0 z-3 overflow-hidden wow zoomIn">
                            <h2 class="mb-0">325%</h2>
                            <p class="lh-1-5">Augmentation moyenne des panneaux solaires</p>
                        </div>
                        <div class="rounded-1 w-90 overflow-hidden wow zoomIn">
                            <img src="assets/images/misc/s4.webp" class="w-100 wow scaleIn" alt="">
                        </div>
                        <div class="rounded-1 w-50 abs mb-min-50 end-0 bottom-0 z-2 overflow-hidden shadow-soft wow zoomIn"
                            data-wow-delay=".2s">
                            <img src="assets/images/misc/s1.webp" class="w-100 wow scaleIn" data-wow-delay=".2s" alt="">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="subtitle id-color wow fadeInUp">Fiable et abordable</div>
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">Pourquoi Nous Choisir ?</h2>
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay=".0s">
                                    <h4>Fabrication maîtrisée</h4>
                                    <p class="mb-0">Nous fabriquons nos panneaux photovoltaïques selon des standards de
                                        qualité TUV.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay=".2s">
                                    <h4>Technologies avancées</h4>
                                    <p class="mb-0">Des produits développés avec des technologies innovantes pour
                                        garantir un rendement optimal.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay=".4s">
                                    <h4>Solutions compétitives</h4>
                                    <p class="mb-0">Des coûts optimisés grâce à une production maîtrisée, offrant un
                                        excellent rapport qualité / prix.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay=".6s">
                                    <h4>Contrôle qualité</h4>
                                    <p class="mb-0">Nous utilisons des machines modernes pour garantir l'efficacité du
                                        produit.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay=".8s">
                                    <h4>Production flexible et rapide</h4>
                                    <p class="mb-0">Une capacité de production adaptée à vos besoins avec des délais
                                        maîtrisés.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="h-100 rounded-1">
                                <div class="relative wow fadeInUp" data-wow-delay="1s">
                                    <h4>Équipements de pointe</h4>
                                    <p class="mb-0">Nous utilisons des machines modernes pour garantir l'efficacité du
                                        produit.</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="spacer-double"></div>

    </section>

    <section>
        <div class="container">
            <div class="row g-4 justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="subtitle wow fadeInUp mb-3">Nos projets solaires</div>
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">
                        Alimenter un avenir plus lumineux
                        <span class="op-3">grâce à l'énergie propre</span>
                    </h2>
                    <p class="lead mb-0 wow fadeInUp">
                        Découvrez nos dernières installations solaires — des toitures résidentielles aux systèmes
                        commerciaux —
                        chacune conçue pour offrir une efficacité maximale et une durabilité optimale.
                    </p>
                    <div class="spacer-single"></div>
                    <div class="spacer-half"></div>
                </div>
            </div>



            <div class="row g-4">
                <div class="col-lg-12 wow fadeInUp">
                    <div class="overflow-hidden rounded-1">
                        <div class="relative wow fadeIn">
                            <div class="owl-custom-nav menu-float" data-target="#project-single-carousel">
                                <a class="btn-next"></a>
                                <a class="btn-prev"></a>

                                <div id="project-single-carousel" class="owl-3-cols owl-carousel owl-theme">
                                    <div class="item">
                                        <a href="#">
                                            <div class="hover rounded-1 relative overflow-hidden text-light">
                                                <div class="abs p-40 top-0 z-3">
                                                    <img src="{{ asset('assets/images/misc/up-right-arrow-white.webp') }}"
                                                        class="w-10 mb-3 wow scaleIn" alt="">
                                                </div>
                                                <div class="abs p-40 bottom-0 z-3">
                                                    <h3>BrightHome Énergie</h3>
                                                    <p class="mb-0 hover-mh-60">Installation résidentielle</p>
                                                </div>

                                                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2">
                                                </div>
                                                <img src="{{ asset('assets/images/projects/1.webp') }}"
                                                    class="w-100 hover-scale-1-2" alt="">
                                                <div class="gradient-edge-bottom h-50"></div>
                                            </div>
                                        </a>
                                    </div>

                                    <div class="item">
                                        <a href="#">
                                            <div class="hover rounded-1 relative overflow-hidden text-light">
                                                <div class="abs p-40 top-0 z-3">
                                                    <img src="{{ asset('assets/images/misc/up-right-arrow-white.webp') }}"
                                                        class="w-10 mb-3 wow scaleIn" alt="">
                                                </div>
                                                <div class="abs p-40 bottom-0 z-3">
                                                    <h3>Supermarché GreenMart</h3>
                                                    <p class="mb-0 hover-mh-60">Mise à niveau des panneaux solaires</p>
                                                </div>

                                                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2">
                                                </div>
                                                <img src="{{ asset('assets/images/projects/2.webp') }}"
                                                    class="w-100 hover-scale-1-2" alt="">
                                                <div class="gradient-edge-bottom h-50"></div>
                                            </div>
                                        </a>
                                    </div>

                                    <div class="item">
                                        <a href="#">
                                            <div class="hover rounded-1 relative overflow-hidden text-light">
                                                <div class="abs p-40 top-0 z-3">
                                                    <img src="{{ asset('assets/images/misc/up-right-arrow-white.webp') }}"
                                                        class="w-10 mb-3 wow scaleIn" alt="">
                                                </div>
                                                <div class="abs p-40 bottom-0 z-3">
                                                    <h3>Initiative EcoSchool</h3>
                                                    <p class="mb-0 hover-mh-60">Conception de systèmes sur mesure</p>
                                                </div>

                                                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2">
                                                </div>
                                                <img src="{{ asset('assets/images/projects/3.webp') }}"
                                                    class="w-100 hover-scale-1-2" alt="">
                                                <div class="gradient-edge-bottom h-50"></div>
                                            </div>
                                        </a>
                                    </div>

                                    <div class="item">
                                        <a href="#">
                                            <div class="hover rounded-1 relative overflow-hidden text-light">
                                                <div class="abs p-40 top-0 z-3">
                                                    <img src="{{ asset('assets/images/misc/up-right-arrow-white.webp') }}"
                                                        class="w-10 mb-3 wow scaleIn" alt="">
                                                </div>
                                                <div class="abs p-40 bottom-0 z-3">
                                                    <h3>UrbanSolar 360</h3>
                                                    <p class="mb-0 hover-mh-60">Surveillance et rapport du système</p>
                                                </div>

                                                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2">
                                                </div>
                                                <img src="{{ asset('assets/images/projects/4.webp') }}"
                                                    class="w-100 hover-scale-1-2" alt="">
                                                <div class="gradient-edge-bottom h-50"></div>
                                            </div>
                                        </a>
                                    </div>



                                    <div class="item">
                                        <a href="#">
                                            <div class="hover rounded-1 relative overflow-hidden text-light">
                                                <div class="abs p-40 top-0 z-3">
                                                    <img src="{{ asset('assets/images/misc/up-right-arrow-white.webp') }}"
                                                        class="w-10 mb-3 wow scaleIn" alt="">
                                                </div>
                                                <div class="abs p-40 bottom-0 z-3">
                                                    <h3>SunSmart Office</h3>
                                                    <p class="mb-0 hover-mh-60">Stockage d'énergie solaire</p>
                                                </div>

                                                <div class="hover-op-05 bg-dark abs w-100 h-100 top-0 start-0 z-2">
                                                </div>
                                                <img src="{{ asset('assets/images/projects/6.webp') }}"
                                                    class="w-100 hover-scale-1-2" alt="">
                                                <div class="gradient-edge-bottom h-50"></div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-color no-top no-bottom overflow-hidden">
        <div class="container-fluid relative half-fluid">
            <div class="container">
                <div class="row">
                    <!-- Image -->
                    <div class="col-lg-6 position-lg-absolute left-half h-100">
                        <div class="image wow fadeInLeft"
                            data-bgimage="url({{ asset('assets/images/misc/s2.webp') }}) center"></div>
                    </div>
                    <!-- Text -->
                    <div class="col-lg-5 offset-lg-7">
                        <div class="me-lg-3">
                            <div class="py-5 my-5">
                                <div class="owl-single-dots owl-carousel owl-theme">
                                    <div class="item">
                                        <i class="icofont-quote-left text-dark fs-40 d-block mb-4 wow fadeInUp"></i>
                                        <h3 class="mb-4 wow fadeInUp">
                                            Grâce aux panneaux de CSP, notre usine bénéficie d'une énergie fiable et
                                            économique.
                                            Des modules de haute qualité, conformes aux normes TUV, et un service
                                            irréprochable.
                                        </h3>
                                        <span class="wow fadeInUp">Karim Benali — Directeur industriel</span>
                                    </div>

                                    <div class="item">
                                        <i class="icofont-quote-left text-dark fs-40 d-block mb-4 wow fadeInUp"></i>
                                        <h3 class="mb-4 wow fadeInUp">
                                            CSP nous a fourni l'ensemble des composants électriques nécessaires à notre
                                            installation
                                            photovoltaïque. Réactivité, qualité et prix compétitifs — un partenaire de
                                            confiance.
                                        </h3>
                                        <span class="wow fadeInUp">Sonia Mrad — Responsable technique</span>
                                    </div>

                                    <div class="item">
                                        <i class="icofont-quote-left text-dark fs-40 d-block mb-4 wow fadeInUp"></i>
                                        <h3 class="mb-4 wow fadeInUp">
                                            Les onduleurs et batteries fournis par CSP ont transformé notre système
                                            énergétique.
                                            Une autonomie réelle, des économies immédiates et un support technique
                                            disponible.
                                        </h3>
                                        <span class="wow fadeInUp">Mehdi Trabelsi — Ingénieur énergie</span>
                                    </div>

                                    <div class="item">
                                        <i class="icofont-quote-left text-dark fs-40 d-block mb-4 wow fadeInUp"></i>
                                        <h3 class="mb-4 wow fadeInUp">
                                            Nous avons équipé notre showroom avec les appareils numériques de CSP.
                                            Produits modernes,
                                            livraison rapide et une équipe toujours à l'écoute de nos besoins.
                                        </h3>
                                        <span class="wow fadeInUp">Nadia Sfar — Gérante commerciale</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <section class="p-0" aria-label="section">
        <div class="bg-dark d-flex py-4 lh-1">
            <div class="de-marquee-list-2 wow fadeIn">
                <span class="fs-40 fw-600 mx-3 id-color">Fabrication de Panneaux Solaires</span>
                <span class="fs-40 mx-3"><img src="{{ asset('assets/images/logo-icon.webp') }}" class="w-40px"
                        alt=""></span>
                <span class="fs-40 fw-600 mx-3 id-color">Maintenance & SAV</span>
                <span class="fs-40 mx-3"><img src="{{ asset('assets/images/logo-icon.webp') }}" class="w-40px"
                        alt=""></span>
                <span class="fs-40 fw-600 mx-3 id-color">Vente de Composants Électriques</span>
                <span class="fs-40 mx-3"><img src="{{ asset('assets/images/logo-icon.webp') }}" class="w-40px"
                        alt=""></span>
                <span class="fs-40 fw-600 mx-3 id-color">Appareils & Équipements Numériques</span>
                <span class="fs-40 mx-3"><img src="{{ asset('assets/images/logo-icon.webp') }}" class="w-40px"
                        alt=""></span>
                <span class="fs-40 fw-600 mx-3 id-color">Solutions Énergétiques Sur Mesure</span>
                <span class="fs-40 mx-3"><img src="{{ asset('assets/images/logo-icon.webp') }}" class="w-40px"
                        alt=""></span>
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-5">
                    <div class="subtitle id-color wow fadeInUp" data-wow-delay=".0s">Tout ce que vous devez savoir</div>
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">Questions fréquemment posées</h2>
                </div>


                <div class="col-lg-7">
                    <div class="accordion s2 wow fadeInUp">
                        <div class="accordion-section">
                            <div class="accordion-section-title" data-tab="#accordion-a1">
                                Comment fonctionne l'énergie solaire ?
                            </div>
                            <div class="accordion-section-content" id="accordion-a1">
                                Les panneaux solaires absorbent la lumière du soleil grâce à des cellules
                                photovoltaïques (PV),
                                qui la convertissent en électricité en courant continu (CC). Un onduleur transforme
                                ensuite ce courant en courant alternatif (CA),
                                utilisable pour alimenter votre maison ou votre entreprise.
                            </div>
                            <div class="accordion-section-title" data-tab="#accordion-a2">
                                Les panneaux solaires vont-ils réduire mes factures d'énergie ?
                            </div>
                            <div class="accordion-section-content" id="accordion-a2">
                                Oui. En produisant votre propre électricité, vous pouvez réduire considérablement, voire
                                éliminer,
                                vos factures mensuelles, en fonction de la taille de votre installation et de votre
                                consommation d'énergie.
                            </div>
                            <div class="accordion-section-title" data-tab="#accordion-a3">
                                Mon logement est-il adapté aux panneaux solaires ?
                            </div>
                            <div class="accordion-section-content" id="accordion-a3">
                                La plupart des logements le sont. Idéalement, vous aurez besoin d'un toit bien exposé au
                                soleil (peu d'ombre),
                                suffisamment d'espace pour installer les panneaux, et d'une structure en bon état. Nous
                                proposons une évaluation gratuite pour confirmer l'adaptabilité.
                            </div>
                            <div class="accordion-section-title" data-tab="#accordion-a4">
                                Quelle est la durée de vie d'un système solaire ?
                            </div>
                            <div class="accordion-section-content" id="accordion-a4">
                                Les panneaux solaires durent généralement 25 à 30 ans ou plus. Les onduleurs et les
                                batteries peuvent nécessiter un remplacement plus tôt,
                                mais la plupart des systèmes continuent de fonctionner efficacement avec un entretien
                                minimal.
                            </div>
                            <div class="accordion-section-title" data-tab="#accordion-a5">
                                Les panneaux solaires fonctionnent-ils par temps nuageux ?
                            </div>
                            <div class="accordion-section-content" id="accordion-a5">
                                Oui, les panneaux solaires produisent toujours de l'électricité même par temps nuageux,
                                mais avec une puissance réduite.
                                L'efficacité peut diminuer de 10 à 25 %, mais vous continuerez à produire de l'énergie.
                            </div>
                        </div>
                    </div>
                </div>

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

    <section aria-label="section" class="p-0">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a class="d-block hover popup-youtube" href="https://www.youtube.com/watch?v=C6rf51uHWJg">
                        <div class="relative overflow-hidden">
                            <div class="absolute start-0 w-100 abs-middle fs-36 text-white text-center z-2">
                                <div class="player circle wow scaleIn"><span></span></div>
                            </div>
                            <div class="absolute w-100 h-100 top-0 bg-dark hover-op-05"></div>
                            <img src="{{ asset('assets/images/background/w1.webp') }}" class="w-100 hover-scale-1-1"
                                alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-color py-5 pb-4">
        <div class="container relative z-1">
            <div class="row g-4 grid-divider sm-hide">
                <div class="col-lg-4 col-md-6 mb-sm-30 wow fadeIn fadeInRight" data-wow-delay=".2s">
                    <div class="d-flex justify-content-center">
                        <i class="fs-60 text-dark icon_phone"></i>
                        <div class="ms-3">
                            <h4 class="mb-0">Besoin de nos services ?</h4>
                            <p class="text-dark">Appelez : +216 76 623 524</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-sm-30 wow fadeIn fadeInRight" data-wow-delay=".4s">
                    <div class="d-flex justify-content-center">
                        <i class="fs-60 text-dark icon_clock"></i>
                        <div class="ms-3">
                            <h4 class="mb-0">Horaires d'ouverture</h4>
                            <p class="text-dark">Lun à Ven 08:00 - 17:00</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-sm-30 wow fadeIn fadeInRight" data-wow-delay=".6s">
                    <div class="d-flex justify-content-center">
                        <i class="fs-60 text-dark icon_mail"></i>
                        <div class="ms-3">
                            <h4 class="mb-0">Envoyez-nous un email</h4>
                            <p class="text-dark">csp@csp.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

</div>
@endsection