<!DOCTYPE html>
<html lang="fr">
<head>
<title>Contact</title>
    <?php include ('layouts/head.php');?>
    </head>
    <body>
    <?php $currentPage='contact';?>
        <section class="topbar plr-100 bg-black">
            <!-- Header area start -->
            <?php include ('layouts/header.php');?>
            <!-- Header area end -->
        </section>


        <!-- Navigation area start -->
        <div class="navbar-area">
            <!-- Menu For Mobile Device -->
            <?php include ('layouts/navbar_mobile.php');?>
            <!-- Menu For Desktop Device -->
            <?php include ('layouts/navbar_desktop.php');?>
        </div>
        <!-- Navigation area end -->

        <!-- Uni Banner Area Start -->
        <section class="uni-banner" style=" background-image:url('assets/images/banner/contactus.jpg');"> 
            <div class="container">
                <div class="uni-banner-text-area">
                    <!-- <h1>Contact</h1>
                    <ul>
                        <li><a href="index">Accueil</a></li>
                        <li>Nous contacter</li>
                    </ul> -->
                </div>
            </div>
        </section>
        <!-- uni Banner Area End -->

        <!-- Contact Card Area Start -->
        <section class="contcat-card-area pt-70 pb-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="contact-card">
                            <i class="fas fa-map-marker-alt"></i>

                            <h5>Adresse</h5>
                            <p><a href="https://goo.gl/maps/zZEtThmwqkPz2GTE7" target="_blank">19 Boulevard de la République
                                    <br>BP 9025 Dakar, Sénégal</a></p>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="contact-card">
                            <i class="fas fa-envelope"></i>
                            <h5>Email</h5>
                            <p><a href="mailto:contact@ordredesavocats.sn">contact@ordredesavocats.sn</a></p>
                            <!-- <p><a href="mailto:support@medzo.com">support@medzo.com</a></p> -->
                        </div>
                    </div>
                    <!-- <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="contact-card">
                            <i class="fas fa-phone-alt"></i>
                            <h5>Our Location</h5>
                            <p><a href="tel:+44587154756"> +44 587 154756</a></p>
                            <p><a href="tel:+44587154757"> +44 587 154757</a></p>
                        </div>
                    </div> -->
                </div>
            </div>
        </section>
        <!-- Contact Card Area End -->

        <!-- Contact Form area Start -->
        <section class="contact-form-area pb-100">
            <div class="container">
                <div class="default-section-title default-section-title-middle">
                    <h3>Nous joindre</h3>
                    <p>Remplissez ce formulaire si vous avez des questions, nous vous répondrons au plus vite.</p>
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="google-map pr-20">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15439.359968350154!2d-17.435478!3d14.6650203!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec1724a5a005a95%3A0x178788e324ec4e09!2sOrdre%20des%20Avocats%20du%20S%C3%A9n%C3%A9gal!5e0!3m2!1sen!2ssn!4v1714167130257!5m2!1sen!2ssn" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="contact-form-text-area">
                                <form id="contactForm">
                                    <div class="row align-items-center">
                                        <div class="col-md-6 col-sm-6 col-12">
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="Nom" id="name" required data-error="Entrez votre nom svp"> 
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-12">
                                            <div class="form-group">
                                                <input type="email" name="email" class="form-control" placeholder="Email" id="email" required data-error="Entrez votre Email svp "> 
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-12">
                                            <div class="form-group">
                                                <input type="text" name="phone_number" class="form-control" placeholder="Téléphone" id="phone_number" required data-error="Please enter your phone number">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-12">
                                            <div class="form-group">
                                                <input type="text" name="msg_subject" class="form-control" placeholder="Subjet" id="msg_subject" required data-error="SVP mettez votre message">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12 col-12">
                                            <div class="form-group">
                                                <textarea name="message" id="message" class="form-control" placeholder="Votre Message.." cols="30" rows="5" required data-error="SVP mettez votre message"></textarea>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input
                                                        name="gridCheck"
                                                        value="I agree to the terms and privacy policy."
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        id="gridCheck"
                                                        required
                                                    >
                                            
                                                    <label class="form-check-label" for="gridCheck">
                                                        J'accepte les <a href="#">termes d'utilisation</a> et <a href="#">politique de confidentialité</a>
                                                    </label>
                                                    <div class="help-block with-errors gridCheck-error"></div>
                                                </div>
                                            </div>
                                        </div>         
                                        <div class="col-md-12 col-sm-12 col-12">
                                            <button class="default-button" type="submit"><span>Envoyer Le Message</span></button>
                                            <div id="msgSubmit" class="h6 text-center hidden"></div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Contact Form Area End -->

        <!- <!-- Footer area start -->
         <?php include ('layouts/footer.php'); ?>
        <!-- Footer Area end -->

        <!-- popup area start -->
        <div class="popup">
            <div class="popup-content">
                <button class="close-btn" id="popup-close"><i class="fas fa-times"></i></button>
                <form>
                    <div class="input-group search-box">
                        <input type="text" class="form-control" placeholder="Search">
                        <button class="btn" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </form>
            </div>
        </div>
        <!-- popup area end -->
        
        <div class="go-top"><i class="fas fa-chevron-up"></i></div>
    
        <!-- Link of JS files -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery-ui.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/magnific-popup.min.js"></script>
        <script src="assets/js/TweenMax.js"></script>
        <script src="assets/js/nice-select.min.js"></script>
        <script src="assets/js/form-validator.min.js"></script>
        <script src="assets/js/contact-form-script.js"></script>
        <script src="assets/js/ajaxchimp.min.js"></script>
        <script src="assets/js/owl.carousel2.thumbs.min.js"></script>
        <script src="assets/js/appear.min.js"></script>
        <script src="assets/js/odometer.min.js"></script>
        <script src="assets/js/custom.js"></script>
    </body>
</html>