<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
    <div class="container pt-4">
        <div class="py-5">
            <!-- start app download content -->
            <div class="bg-primary rounded-4">
                <div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
                    <img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
                    <div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
                        <div class="me-md-5">
                            <h4 class="text-white"><?php echo $downloadourapp; ?></h4>
                            <p class="mb-lg-0 text-white"><?php echo $downloadapptwo; ?></p>
                        </div>
                        <div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
                            <!-- start apple store button -->
                            <a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
                                <div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
                            </a>
                            <!-- end /. apple store button -->
                            <a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
                                <div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end /. app download content -->
        </div>
        <div class="border-top py-5">
            <div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
                <div class="border-end col-lg-4 col-md-7 col-sm-6">
                    <h5 class="fw-bold mb-4">Get In Touch</h5>
                    <div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
                    <div class="border rounded-4 p-4 mb-4">
                        <h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
                        <a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
                    </div>
                    <h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
                    <span>support@yogiboook.com</span>
                </div>
                <div class="border-end col-lg-4 col-md-5 col-sm-6">
                    <h5 class="fw-bold mb-4">Stay Connect</h5>
                    <div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
                    <div class="mt-4">
                        <a class="d-block fw-medium mb-1" href="#">
                            <i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
                        </a>
                        <a class="email-link d-block fw-medium" href="#">
                            <i class="fa-solid fa-envelope me-2"></i>
                            support@yogiboook.com
                        </a>
                    </div>
                </div>
                <div class="col-lg-4">
                    <h5 class="fw-bold mb-4">Get In Touch</h5>
                    <div class="newsletter position-relative mt-4">
                        <input type="email" class="form-control" placeholder="name@example.com">
                        <button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
                    </div>
                    <div class="border-top my-4"></div>
                    <h5 class="fw-bold mb-4">Follow the location</h5>
                    <!-- start social icon -->
                    <ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
                        <li>
                            <a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
                                <i class="fab fa-dribbble"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
                                <i class="fa-brands fa-whatsapp"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /. end social icon -->
                </div>
            </div>
        </div>
    </div>
    <div class="container border-top">
        <div class="align-items-center g-3 py-4 row">
            <div class="col-lg-auto">
                <!-- start footer nav -->
                <ul class="list-unstyled list-separator mb-2 footer-nav">
                    <li class="list-inline-item"><a href="#">Privacy</a></li>
                    <li class="list-inline-item"><a href="#">Sitemap</a></li>
                    <li class="list-inline-item"><a href="#">Cookies</a></li>
                </ul>
                <!-- end /. footer nav -->
            </div>
            <div class="col-lg order-md-first">
                <div class="align-items-center row">
                    <!-- start footer logo -->
                    <a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
                        <img src="assets/images/logo-white.png" alt="">
                    </a>
                    <!-- end /. footer logo -->
                    <!-- start text -->
                    <div class="col-sm-auto copy">© 2024 Yogiboook - All Rights Reserved- All Rights Reserved</div>
                    <!-- end /. text -->
                </div>
            </div>
        </div>
    </div>
</footer>