<!-- Menu Section for Other Templates ##HEADER 1## !-->
<div class="header-wrap1 sticky-header">
    <div class="container" id="topbar">
        <div class="row napas-header">
            <div class="col-xl-2 col-lg-2 col-md-2 col-sm-5 col-5 site-logo">
                <!-- Logo -->
                <?php
                $custom_logo_id = get_theme_mod('custom_logo');
                $logo_url = wp_get_attachment_image_src($custom_logo_id, 'full');
                if ($logo_url) {
                    echo '<a href="'. esc_url( home_url( '/' ) ).'"><img src="' . esc_url($logo_url[0]) . '" class="img-fluid logo" alt="' . get_bloginfo('name') . '"></a>';
                } else {
                    echo '<a href="'. esc_url( home_url( '/' ) ).'"><h1>' . get_bloginfo('name') . '</h1></a>';
                }
                ?>
            </div><!-- logo !-->
            <div class="col-xl-10 col-lg-10 col-md-10 col-sm-7 col-7 menu-section">
                <div class="row header-contacts">
                    <div class="col-12 contact-napas">
                        <a href="tel:(+256) 782451967" class="contact-item phone">
                            <i class="bi bi-telephone"></i>
                            <span>(+256) 782 451967</span>
                        </a>
                        <a href="mailto:info@passionsservicesltd.com" class="contact-item email">
                            <i class="bi bi-envelope"></i>
                            <span>info@passionsservicesltd.com</span>
                        </a>
                    </div>
                </div><!-- Top Menu !-->
                    <div class="row napas-menu">
                        <div class="col-lg-12 headerb">
                            <div class="napas-navbar">
                                <nav class="navbar main-menu navbar-expand-lg text-white">
                                <div class="container m-auto menu-wrap">
                                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                        <?php
                                        $menu = wp_nav_menu(array(
                                            'theme_location' => 'primary',
                                            'container' => false,
                                            'menu_class' => '',
                                            'fallback_cb' => '__return_false',
                                            'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                                            'depth' => 2,
                                            'walker' => new bootstrap_5_wp_nav_menu_walker()
                                        ));
                                        ?>
                                    </div>
                                </div>
                            </nav>
                            </div><!-- Desktop Menu !-->
                            <div class="col-3 d-md-none toggling-menu">
                            <div class="napas-toggle-menu">
                                <button class="btn btn-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                                    <i class="fas fa-align-justify fs-3 text-white"></i>
                                </button>
                            </div>
                            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                            <div class="offcanvas-header">
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                                <?php
                                wp_nav_menu(array(
                                    'theme_location' => 'primary',
                                    'container' => false,
                                    'menu_class' => '',
                                    'fallback_cb' => '__return_false',
                                    'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                                    'depth' => 2,
                                    'walker' => new bootstrap_5_wp_nav_menu_walker()
                                ));
                                ?>
                            </div><!-- offcanvas Body !-->
                        </div> <!-- Container !-->
                    </div><!-- Mobile Menu !-->
                        <div class="nav-search">
                            <a class=" p-1" data-bs-toggle="modal" data-bs-target="#searchModal">
                                    <i class="bi bi-search"></i>
                            </a>
                        </div><!-- modal-search !-->
                            <div class="header-button">
                                <a href="#" class="header-btn">GET QUOTE</a>
                        </div><!-- Header Button !-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Topbar !-->
</div><!-- Header wrap !-->

<!-- Modal -->
<div class="modal fade modal-search" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg bg-transparent">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-body bg-transparent">
        <form method="post" action="">
            <div class="input-group">
                <input id="ajax-search" class="form-control bg-tranparent rounded-0" type="search" placeholder="Search  Website here..." aria-label="Search">
                <button id="search-button" class="btn btn-search rounded-0" type="submit">Search</button>
            </div>
        </form>
        <div id="search-results"></div>
      </div>
    </div>
  </div>
</div>