<section id="section-projet" class="bg-primary text-white my-4">
    <div style="background: rgba(255,255,255, 0.05);">
        <div class="container py-3 py-md-5 position-relative" style="max-width: 800px;">
            <div class="row text-center text-sm-start">
                <div class="col-12 col-md-6">
                    <h3>Un projet RH ?</h3>
                    <hr>
                    <div class="d-flex flex-column flex-sm-row gap-3 justify-content-between">
                        <p>Xavier ou Arnaud,<br/>saurez-vous faire la<br/>différence ?</p>
                        <p>Peu importe, vous trouverez<br/>toujours le bon interlocuteur<br/>pour parler de vos projets !</p>
                    </div>
                    <div class="p-3 rounded-3 d-flex flex-column align-items-center align-items-sm-start" style="background: rgba(255,255,255,0.1);">
                        <div class="d-flex align-items-center gap-2"><i class="fa fa-envelope text-primary"></i> <a href="mailto:arnaud.bogillot@lcrh.fr">arnaud.bogillot@lcrh.fr</a></div>
                        <div class="d-flex align-items-center gap-2"><i class="fa fa-phone text-primary"></i> <a href="tel:+33674950429">06 74 95 04 29</a></div>
                        <div class="d-flex align-items-center gap-2"><i class="fa fa-map-marker text-primary"></i> <a target="_blank" href="https://goo.gl/maps/ZKxwkgVcvM8NYdPR8">60 Rue du Pensionnat 60003 LYON</a></div>
                    </div>
                </div>
            </div>
            <img alt="Contactez-nous pour votre projet RH" class="d-none d-md-block" style="position: absolute; right: 0; bottom: 0; height: 300px;" src="{{ asset('assets/images/project-footer.png') }}">
        </div>
    </div>
</section>

<style>
    footer ul {
        padding: 0;
        margin: 0;
    }

    footer ul li {
        list-style-type: none;
        padding: 0;
    }

    footer .footer-section-header {
        font-size: 1.25em;
        color: #dfdfdf;
        font-weight: 700;
    }

    @media(max-width: 1400px) {
        .pluma-container.container {
            padding: 0 !important;
            max-width: 100% !important;
        }
    }
</style>

<footer class="bg-primary text-light">
    <div class="container text-light py-2 d-flex flex-column align-items-center justify-content-center">
        <div>Réalisation - <a href="mailto:jeremy@pluma-dev.com">StackMod</a> 2023</div>
    </div>
</footer>
