<footer>
   <div class="w3ls-footer-grids pt-sm-4 pt-3">
      <div class="container py-xl-5 py-lg-3">
         <div class="row">
            <div class="col-md-6 w3l-footer">
               <h2 class="mb-sm-3 mb-2">
                  <a href="<?= ROOT ?>" class="text-white font-italic font-weight-bold">
                     <!-- <span>Nadeem </span>Travels -->
                     <img src="<?= ROOT ?>images/product/logo.png" style="width:160px" alt="best taxi service in raipur">
                  </a>
               </h2>
               <p>Filled with the most unique and fascinating destinations, Raipur Chhattisgarh is a state that is home to stunning greenery but a mix of diverse and talented people.</p>
            </div>
            <div class="col-md-4 w3l-footer my-md-0 my-4">
               <h3 class="mb-sm-3 mb-2 text-white">Address</h3>
               <ul class="list-unstyled">
                  <li>
                     <i class="fas fa-location-arrow float-left"></i>
                     <p class="ml-4">Near Naaz Radio, Byron Bazar Raipur, Chhattisgarh 492001</p>
                     <div class="clearfix"></div>
                  </li>
                  <li class="my-3">
                     <i class="fas fa-phone float-left"></i>
                     <p class="ml-4">Ph: +91-8959807555, 9827552963</p>
                     <div class="clearfix"></div>
                  </li>
                  <li>
                     <i class="far fa-envelope-open float-left"></i>
                     <a href="#" class="ml-3">Naddu.khan.111@gmail.com</a>
                     <div class="clearfix"></div>
                  </li>
               </ul>
               <div class="top-social-agile">
                  <ul class="top-right-info">
                     <li>
                        <a style="font-size: 23px;" href="https://www.facebook.com/nadeemtravelsnt/" target="_blank">
                           <i style="color:#fff;" class="fab fa-facebook-f"></i>
                        </a>
                     </li>
                     <li class="mx-3">
                        <a style="font-size: 23px;" href="https://www.instagram.com/nadeemtravelsnt/" target="_blank">
                           <i style="color:#fff;" class="fab fa-instagram"></i>
                        </a>
                     </li>
                     <li>
                        <a style="font-size: 23px;" href="https://www.linkedin.com/in/nadeemtravels/" target="_blank">
                           <i style="color:#fff;" class="fab fa-linkedin"></i>
                        </a>
                     </li>
                     <li class="ml-3">
                        <a style="font-size: 23px;" href="https://twitter.com/nadeemtravelsnt" target="_blank">
                           <i style="color:#fff;" class="fab fa-twitter"></i>
                        </a>
                     </li>
                     <li class="ml-3">
                        <a style="font-size: 23px;" href="https://www.youtube.com/@nadeemtravels" target="_blank">
                           <i style="color:#fff;" class="fab fa-youtube"></i>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
            <div class="col-md-2 w3l-footer">
               <h3 class="mb-sm-3 mb-2 text-white">Quick Links</h3>
               <div class="nav-w3-l">
                  <ul class="list-unstyled">
                     <li>
                        <a href="<?= ROOT ?>index">Home</a>
                     </li>
                     <li class="mt-2">
                        <a href="<?= ROOT ?>about">About Us</a>
                     </li>
                     <li class="mt-2">
                        <a href="<?= ROOT ?>taxi-service-in-raipur">Service</a>
                     </li>
                     <li class="mt-2">
                        <a href="<?= ROOT ?>gallery">Gallery</a>
                     </li>
                     <li class="mt-2">
                        <a href="<?= ROOT ?>contact">Contact Us</a>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="border-top mt-5 pt-lg-4 pt-3 pb-lg-0 pb-3 text-center">
            <p class="copy-right-grids mt-lg-1">© 2023 Nadeem Travels All Rights Reserved. Designed by <a href="https://webquickindia.com" target="_blank">Webquick India Pvt Ltd</a>
            </p>
         </div>
      </div>
   </div>
</footer>
<!-- //footer -->
<!-- Js files -->
<!-- JavaScript -->
<script src="<?= ROOT ?>js/jquery-2.2.3.min.js"></script>
<!-- Default-JavaScript-File -->
<!-- banner slider -->
<script src="<?= ROOT ?>js/responsiveslides.min.js"></script>
<script>
   $(function() {
      $("#slider4").responsiveSlides({
         auto: true,
         pager: true,
         nav: true,
         speed: 1000,
         namespace: "callbacks",
         before: function() {
            $('.events').append("<li>before event fired.</li>");
         },
         after: function() {
            $('.events').append("<li>after event fired.</li>");
         }
      });
   });
</script>
<!-- //banner slider -->
<!-- fixed navigation -->
<script src="<?= ROOT ?>js/fixed-nav.js"></script>
<!-- //fixed navigation -->
<!-- smooth scrolling -->
<!-- <script src="js/SmoothScroll.min.js"></script> -->
<!-- move-top -->
<script src="<?= ROOT ?>js/move-top.js"></script>
<!-- easing -->
<script src="<?= ROOT ?>js/easing.js"></script>
<!--  necessary snippets for few javascript files -->
<script src="<?= ROOT ?>js/medic.js"></script>
<script src="<?= ROOT ?>js/bootstrap.js"></script>
</body>

</html>
<script>
   let modalId = $('#image-gallery');

   $(document)
      .ready(function() {

         loadGallery(true, 'a.thumbnail');


         function disableButtons(counter_max, counter_current) {
            $('#show-previous-image, #show-next-image')
               .show();
            if (counter_max === counter_current) {
               $('#show-next-image')
                  .hide();
            } else if (counter_current === 1) {
               $('#show-previous-image')
                  .hide();
            }
         }

         /**
          *
          * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
          * @param setClickAttr  Sets the attribute for the click handler.
          */

         function loadGallery(setIDs, setClickAttr) {
            let current_image,
               selector,
               counter = 0;

            $('#show-next-image, #show-previous-image')
               .click(function() {
                  if ($(this)
                     .attr('id') === 'show-previous-image') {
                     current_image--;
                  } else {
                     current_image++;
                  }

                  selector = $('[data-image-id="' + current_image + '"]');
                  updateGallery(selector);
               });

            function updateGallery(selector) {
               let $sel = selector;
               current_image = $sel.data('image-id');
               $('#image-gallery-title')
                  .text($sel.data('title'));
               $('#image-gallery-image')
                  .attr('src', $sel.data('image'));
               disableButtons(counter, $sel.data('image-id'));
            }

            if (setIDs == true) {
               $('[data-image-id]')
                  .each(function() {
                     counter++;
                     $(this)
                        .attr('data-image-id', counter);
                  });
            }
            $(setClickAttr)
               .on('click', function() {
                  updateGallery($(this));
               });
         }
      });
   $(document)
      .keydown(function(e) {
         switch (e.which) {
            case 37:
               if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
                  $('#show-previous-image')
                     .click();
               }
               break;

            case 39:
               if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
                  $('#show-next-image')
                     .click();
               }
               break;

            default:
               return;
         }
         e.preventDefault();
      });
</script>
<script>
   const phoneInput = document.getElementById('mobile');
   phoneInput?.addEventListener('input', () => {
      let value = phoneInput.value;
      value = value.replace(/[^0-9 ()+\-]/g, '');
      let trailingSpace = value.endsWith(' ') ? ' ' : '';
      value = value.trimStart().replace(/\s+/g, ' ') + trailingSpace;
      let sanitized = '';
      let openCount = 0;
      for (let char of value) {
         if (char === '(') {
            if (openCount === 0) {
               sanitized += char;
               openCount++;
            }
         } else if (char === ')') {
            if (openCount > 0) {
               sanitized += char;
               openCount--;
            }
         } else {
            sanitized += char;
         }
      }
      phoneInput.value = sanitized;
      console.log(sanitized);
   });
</script>