   <!-- tp-offcanvas start -->
   <div class="tp-offcanvas">
      <div class="tp-offcanvas-header mb-30">
         <div class="tp-offcanvas-logo">
            <a href="/"><img data-width="108" src="<%= resolveUpload(site.logo) || '/assets/img/logo/logo.png' %>" alt="<%= site.site_name || 'RouteMate' %>"></a>
         </div>
         <div class="tp-offcanvas-close">
            <button class="tp-offcanvas-close-button"><i class="fal fa-times"></i></button>
         </div>
      </div>
      <div class="tp-header-search p-relative mb-30">
         <form action="/tours" method="get">
            <input class="tp-input" type="text" name="search" placeholder="Search tours">
            <button class="tp-header-search-btn" type="submit">
               <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.64267 10.7857C8.48288 10.7857 10.7853 8.48318 10.7853 5.64286C10.7853 2.80254 8.48288 0.5 5.64267 0.5C2.80245 0.5 0.5 2.80254 0.5 5.64286C0.5 8.48318 2.80245 10.7857 5.64267 10.7857Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M12.5 12.5L9.92871 9.92857" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
            </button>
         </form>
      </div>
      <div class="tp-offcanvas-menu mb-50">
         <nav>
            <ul>
               <% (headerMenus[0]?.items || []).forEach(function(item) { %>
                  <li class="<%= item.children && item.children.length ? 'has-dropdown' : '' %>">
                     <a href="<%= item.url %>"><%= item.label %></a>
                     <% if (item.children && item.children.length) { %>
                        <ul class="sub-menu">
                           <% item.children.forEach(function(child) { %>
                              <li><a href="<%= child.url %>"><%= child.label %></a></li>
                           <% }) %>
                        </ul>
                     <% } %>
                  </li>
               <% }) %>
            </ul>
         </nav>
      </div>
      <div class="tp-offcanvas-content mb-40">
         <h3 class="tp-offcanvas-title">Hello There!</h3>
         <p><%= site.footer_description || '' %></p>
      </div>
      <div class="tp-offcanvas-info mb-50">
         <h3 class="tp-offcanvas-title">Information</h3>
         <span><a href="tel:<%= site.phone %>"><%= site.phone %></a></span>
         <span><a href="mailto:<%= site.email %>"><%= site.email %></a></span>
         <span><a href="#"><%= site.address %></a></span>
      </div>
      <div class="tp-offcanvas-social">
         <h3 class="tp-offcanvas-title">Follow Us</h3>
         <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 class="body-overlay"></div>
   <!-- tp-offcanvas end -->
