   <footer>
      <div class="tp-footer-area z-index-2 pt-30 p-relative" data-bg-color="#fff3ed">
         <div class="container">
            <div class="tp-footer-widget-wrap pt-110 pb-65">
               <div class="row">
                  <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-6 col-sm-6">
                     <div class="tp-footer-widget tp-footer-col-1 mb-30">
                        <div class="tp-footer-logo mb-20">
                           <a href="/">
                              <img width="112" src="<%= resolveUpload(site.logo) || '/assets/img/logo/logo.png' %>" alt="<%= site.site_name || 'RouteMate' %>">
                           </a>
                        </div>
                        <p class="tp-footer-dec"><%= site.footer_description || '' %></p>
                        <div class="tp-footer-social">
                           <a href="<%= site.social_facebook || '#' %>"><i class="fab fa-facebook-f"></i></a>
                           <a href="<%= site.social_twitter || '#' %>"><i class="fab fa-twitter"></i></a>
                           <a href="<%= site.social_instagram || '#' %>"><i class="fab fa-instagram"></i></a>
                           <a href="<%= site.social_youtube || '#' %>"><i class="fab fa-youtube"></i></a>
                        </div>
                     </div>
                  </div>

                  <% footerMenus.forEach(function(menu) { %>
                     <div class="col-xxl-2 col-xl-2 col-lg-4 col-md-6 col-sm-6">
                        <div class="tp-footer-widget mb-30">
                           <h3 class="tp-footer-widget-title fw-600 mb-15"><%= menu.title %></h3>
                           <div class="tp-footer-widget-menu">
                              <ul>
                                 <% menu.items.forEach(function(item) { %>
                                    <li><a href="<%= item.url %>"><%= item.label %></a></li>
                                 <% }) %>
                              </ul>
                           </div>
                        </div>
                     </div>
                  <% }) %>

                  <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-6 col-sm-6">
                     <div class="tp-footer-widget tp-footer-col-5 mb-30">
                        <h3 class="tp-footer-widget-title fw-600 mb-15">Contact</h3>
                        <div class="tp-footer-contact">
                           <a href="https://www.google.com/maps" target="_blank" class="location mb-20 d-inline-block"><%= site.address || '' %></a>
                           <span class="support d-block mb-10">Supporter :</span>
                           <a href="mailto:<%= site.email %>" class="phone"><%= site.email %></a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="tp-copyright-area pt-25 pb-15">
            <div class="container">
               <div class="row">
                  <div class="col-lg-12">
                     <div class="tp-copyright-text text-center">
                        <p class="tp-ff-inter mb-5"><%= (site.copyright_text || '{year} RouteMate © All rights reserved').replace('{year}', new Date().getFullYear()) %></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </footer>
