
    <!-- Footer Start -->
    <section class="final-footer">
        <div class="container-fluid  text-light footer pt-5 mt-5 wow fadeIn" data-wow-delay="0.1s">
            <div class="container py-3">
                <div class="row g-5">

                    <div class="col-lg-3 col-md-6">
                        <!-- <h4 class="text-white mb-3">About Us</h4> -->
                        <a class="btn btn-link" href="<?php path() ?>">
                        <img src="<?php path(); ?>img/worcoz.png" alt="" style="width:150px;">
                        </a>
                        <p class="mt-3">Our mission is to provide more than just a workspace; we aim to cultivate a thriving ecosystem where ideas flourish and connections thrive.
                        </p>

                        <div class="d-flex pt-2"> 
                            <a class="btn btn-outline-light btn-social" style="background: #3b5998;" href="https://www.facebook.com/worcoz" target="_blank"><i class="fab fa-facebook-f"></i></a>
                            <a class="btn btn-outline-light btn-social" style="background: #833AB4;" href="https://www.instagram.com/worcoz/" target="_blank"><i class="fab fa-instagram"></i></a>
                            <a class="btn btn-outline-light btn-social" style="background: #0077b5;" href="https://www.linkedin.com/company/worcoz/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                            <!--<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>-->
                        </div>
                        
                    </div>


                    <div class="col-lg-3 col-5">
                        <h4 class="text-white mb-3">Quick Link</h4>
                        <a class="btn btn-link" href="<?php path() ?>">Home</a>
                        <a class="btn btn-link" href="about.php">About Us</a>
                        <!--<a class="btn btn-link" href="service-detail.php">Service</a>-->
                        <a class="btn btn-link" href="gallery.php">Gallery</a>
                        <a class="btn btn-link" href="contact.php">Contact Us</a>
                    </div>


                    <div class="col-lg-3 col-7">
                        <h4 class="text-white mb-3">Services</h4>
                        <?php 
                                    $statement = $pdo->prepare("SELECT * FROM `tbl_service` ORDER BY postion ASC
                                    ");
                                    $statement->execute();
                                    $result = $statement->fetchAll(PDO::FETCH_ASSOC);
                                    foreach ($result as $subcat_cat) {
                                    ?>
                        <a class="btn btn-link" href="<?php path(); ?>service/<?php echo $subcat_cat['slug']; ?>"><?php echo $subcat_cat['title']; ?></a>
                        <?php
                                    }
                        ?>
                    </div>



                    <div class="col-lg-3 col-md-6">
                        <h4 class="text-white mb-3">Contact</h4>
                        <p class="mb-2">  <a href="https://maps.app.goo.gl/hYdkvUuApKBTaxkQ8" style="color:white"> <i class="fa fa-map-marker-alt me-3"></i>A-24, First Floor, Sector 63, Noida, Uttar Pradesh 201301 </a> </p>
                        <p class="mb-2"> <a href="tel:+919667766613" style="color:white"> <i class="fa-solid fa-phone me-3" style="color: #ffffff;"></i>+91-9667766613 </a> </p>
                        <p class="mb-2"> <a href="mailto:info@worcoz.com" style="color:white"> <i class="fa fa-envelope me-3"></i>info@worcoz.com </a></p>

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

            <div class="container">
                <div class="copyright">
                    <div class="row">
                        <div class="col-md-12 text-center  mb-3 mb-md-0">
                            &copy; All Right Reserved.
                            Designed By <a class="border-bottom" href="https://wedigitalindia.com/" target="_blank">Wedigital India</a>
                        </div>

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

        </div>
    </section>
    <!-- Footer End -->



<!-- Button trigger modal -->

    <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contactModal">
        Open Contact Form
    </button> -->

    <!-- Modal start  -->
    <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-top-left-radius: 10px; border-top-right-radius: 10px">
                    <img src="<?php path(); ?>img/white.png" alt="" style="width:150px; margin-top: 10px;">
                    <h5 class="modal-title" id="contactModalLabel">Enquiry Form</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px">
                    <form id="contactForm" method="POST" action="form.php">

                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name-inquiry" required>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="email" name="email-inquiry" required>
                        </div>

                        <div class="mb-3">
                            <label for="phone" class="form-label">Contact Number</label>
                            <input type="text" class="form-control" id="phone" name="phone-inquiry" maxlength="10" required>
                        </div>

                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" name="message-inquiry" rows="3" required></textarea>
                        </div>

                        <button type="submit" name="submit-inquiry" class="btn btn-primary">Submit</button>
                        </form>
                </div>
            </div>
        </div>
    </div>
     <!-- Modal end =====  -->



 
     <!-- ===== number vallidation start ===== -->

     <script>
        function validateNumber(input) {
            const numberPattern = /^\d{0,10}$/;
            const value = input.value;

            if (!numberPattern.test(value)) {
                document.getElementById('error-message').textContent = "Only 10 digits are allowed.";
                input.value = value.slice(0, -1);
            } else if (value.length > 10) {
                document.getElementById('error-message').textContent = "Only 10 digits are allowed.";
                input.value = value.slice(0, 10);
            } else {
                document.getElementById('error-message').textContent = "";
            }
        }
    </script>
<!-- ===== number vallidation end ===== -->





    <!-- whatsapp icon starts here -->

    <!-- <a href="https://api.whatsapp.com/send?phone=+919667766613&text=Hey." class="whatsapp" target="_blank">
        Chat Now
    </a> -->


    <a href="https://api.whatsapp.com/send?phone=+919667766613&text=Hey." class="whatsapp-btn" target="_blank">
        <i class="fa-brands fa-whatsapp my-float"></i>
    </a>
    <!-- whatsapp icon starts here -->




    <!-- calling button starts here -->

    <!-- <a href="tel:+91-9667766613" class="call-now" target="_blank">
        Call Now
    </a> -->


    <section class="call-btn">
        <a class="telephone" href="tel:+91-9667766613"><i class="fa fa-phone"></i><span class="num"></span>
        </a>
    </section>
    <!-- calling button starts here -->


    <!-- Back to Top -->
    <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
    <!-- Back to Top -->


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="<?php path(); ?>lib/wow/wow.min.js"></script>
    <script src="<?php path(); ?>lib/easing/easing.min.js"></script>
    <script src="<?php path(); ?>lib/waypoints/waypoints.min.js"></script>
    <script src="<?php path(); ?>lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- ==== gallery ==== -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>


    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->

    
<!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <!-- Template Javascript -->
    <script src="<?php path(); ?>js/main.js"></script>
    
    <script>
    function checkInputPhoneValidation(element) {
  let phoneNumber = element.value.replace(/\D/g, ''); // Filter to numbers
  if (phoneNumber.length > 10) {
    phoneNumber = phoneNumber.substr(0, 10); // Keep only the first 10 digits
  }
  element.value = phoneNumber;

  // Display warning if the phone number is less than 10 characters
  const warningElement = element.parentNode.querySelector('span.warning');
  if (phoneNumber.length < 10 && phoneNumber.length > 0) {
    if (!warningElement) {
      const warning = document.createElement('span');
      warning.textContent = 'The phone number should consist of 10 digits.';
      warning.style.color = 'red';
      warning.classList.add('warning');
      element.parentNode.appendChild(warning);
    }
    element.removeAttribute('valid'); // Remove 'valid' attribute if not meeting rules
    // or can use: element.setAttribute('valid', 'false');
  } else if (phoneNumber.length < 10 && element.hasAttribute('required') && element.getAttribute('required').toLowerCase() !== 'false') {
    element.removeAttribute('valid');
    // or can use: element.setAttribute('valid', 'false');
  } else {
    if (warningElement) {
      warningElement.remove();
    }
    element.setAttribute('valid', 'true'); // Add 'valid' attribute if meeting rules
  }
}

function addInputPhoneValidation(element) {
  element.addEventListener('input', function () {
    checkInputPhoneValidation(this);
  });
}

/**
 * Querying all input fields with the 'phone' class
 * and associating an event listener with each of them.
 */
const phoneElements = document.querySelectorAll('input.phone');
phoneElements.forEach((phoneElement) => {
  addInputPhoneValidation(phoneElement);
  // Perform initial validation without triggering the input event
  checkInputPhoneValidation(phoneElement);
});

/**
 * Function to log the 'phoneElements' to the console
 * - JUST DEBUG FUNCTION
 */
function logPhoneElements() {
  document.querySelectorAll('input.phone').forEach((e) => console.log(e, `- Valid? ${isValidInputPhone(e)}`));
}

/**
 * Function to check if the input phone field is valid
 * - The input element to check
 * - True if valid, false otherwise
 */
function isValidInputPhone(element) {
  if (element.hasAttribute('required') && element.getAttribute('required').toLowerCase() !== 'false') {
    return element.value.length === 10 && Boolean(element.getAttribute('valid'));
  } else {
    return Boolean(element.getAttribute('valid'));
  }
}

/**
 * Submit function that checks if all input phone fields are valid
 */

</script>