<section class="container flex flex-col text-light no-border gap-10 md:gap-20 lg:gap-40 py-10 md:py-20">
    <div class="relative overflow-hidden flex flex-col gap-6 md:gap-15 bg-primary rounded-30 px-5 md:px-20 py-10 md:py-15 md:pb-20" data-aos="fade-up" data-aos-duration="400">
        <h2 class="bordered border-b-3 border-light w-fit">Notre intervention repose sur :</h2>

        <div class="block w-full md:w-1/2 items-center gap-15 border-b-0 md:border-b-3 pb-5 border-light" data-aos="fade-up">
            <h3 class="mb-2 w-fit md:mb-0 italic md:border-b-0 border-b-2 border-light/50" data-aos="fade-right" data-aos-delay="400">Un diagnostic personnalisé de votre process actuel</h3>
        </div>

        <div class="block w-full md:w-1/2 items-center gap-15 border-b-0 md:border-b-3 pb-5 border-light" data-aos="fade-up">
            <h3 class="mb-2 w-fit md:mb-0 italic md:border-b-0 border-b-2 border-light/50" data-aos="fade-right" data-aos-delay="400">Des ateliers collaboratifs avec vos équipes</h3>
        </div>

        <div class="block  w-full md:w-1/2 items-center gap-15 border-b-0 md:border-b-3 pb-5 border-light" data-aos="fade-up">
            <h3 class="mb-2 w-fit md:mb-0 italic md:border-b-0 border-b-2 border-light/50" data-aos="fade-right" data-aos-delay="400">Des recommandations concrètes, hiérarchisées et actionnables</h3>
         </div>

        <div class="block  w-full md:w-1/2 items-center gap-15 border-b-0 md:border-b-3 pb-5 border-light" data-aos="fade-up">
            <h3 class="mb-2 w-fit md:mb-0 italic md:border-b-0 border-b-2 border-light/50" data-aos="fade-right" data-aos-delay="400">Une mise en œuvre accompagnée ou en autonomie, selon vos besoins</h3>
        </div>
        <img class="absolute hidden md:block md:w-60 lg:w-100 xl:w-120" style="bottom: -40px; right: -40px;" src="{{ asset('images/logos/logo-light.svg') }}" />
    </div>
</section>

<section class="py-20 bg-light-dark">
    <div class="container flex flex-col gap-20 text-dark">
        <h2 class="text-black text-center">Nous intervenons auprès</h2>
        <div class="flex flex-col md:flex-row justify-center gap-10 md:gap-20">
            <div class="text-center flex flex-col items-center">
                <div class="flex items-center justify-center p-3 bg-primary rounded-full w-25 r1-1">
                    <i data-aos="zoom-in" class="text-light-dark size-16 icon-[ph--buildings]"></i>
                </div>
                <hr class="separator" data-aos="zoom-in">
                <p data-aos="fade-up" class="italic text-xl">De structures souhaitant professionnaliser leur process de recrutement</p>
            </div>

            <div class="text-center flex flex-col items-center">
                <div class="flex items-center justify-center p-3 bg-primary rounded-full w-25 r1-1">
                    <i data-aos="zoom-in" data-aos-delay="100" class="text-light-dark size-16 icon-[ri--team-line]"></i>
                </div>
                <hr class="separator" data-aos="zoom-in" data-aos-delay="100">
                <p data-aos="fade-up" data-aos-delay="100" class="italic text-xl">D’équipes RH souhaitant optimiser leurs pratiques</p>
            </div>

            <div class="text-center flex flex-col items-center">
                <div class="flex items-center justify-center p-3 bg-primary rounded-full w-25 r1-1">
                    <i data-aos="zoom-in" data-aos-delay="200" class="text-light-dark size-16 icon-[hugeicons--manager]"></i>
                </div>
                <hr class="separator" data-aos="zoom-in" data-aos-delay="200">
                <p data-aos="fade-up" data-aos-delay="200" class="italic text-xl">De dirigeants ou managers opérationnels impliqués dans les recrutements</p>
            </div>
        </div>
    </div>
</section>
