<div class="menu-section">
	    <div class="container"><div class="row justify-content-between">
	        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-3 col-3 align-self-center">
	            <!-- 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( '/' ) ).'" class=" ps-3"><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-9 col-9 align-self-center">
	            <div class="row">
	                <div class="d-none d-md-block col-md-12  text-white">
	                    <?php
    					$menu = wp_nav_menu(array(
    						'theme_location' => 'top-menu', // Adjust to your registered menu location
    						//'container' => 'nav',
    						'container_class' => 'topmenu',
    					));
    					?>
	                </div>
	            </div><!-- Top Menu !-->
	            <div class="row">
	                <div class="col-xl-10 col-lg-9 col-md-9 col-sm-8 d-none d-sm-block align-self-center">
        	            <!-- menu !-->
        	            <nav class="navbar main-menu navbar-expand-lg bg-body-tertiary">
                          <div class="container-fluid">
            
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                              <?php
                				$menu = wp_nav_menu(array(
                					'theme_location' => 'primary',
                					'container' => false,
                					'menu_class' => 'menu',
                					'fallback_cb' => '__return_false',
                					'items_wrap' => '<ul id="%1$s" class="navbar-nav header-menu-item me-auto mb-2 mb-lg-0 %2$s">%3$s</ul>',
                					//'depth' => 4,
                					'walker' => new Custom_Nav_Walker()
                						));						
                				?>
                            </div>
                          </div>
                        </nav>
        	        </div><!-- Menu !-->
        	        
        	        <div class="col-3 d-sm-none align-self-center">
                        <button class="btn btn-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                          <i class="bi bi-list fs-1 text-white"></i>
                        </button>
                        
                        <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>
        	        </div><!-- Mobile Menu !-->
        	        <div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-5 align-self-center">
        	            <div class="row">
        	                <div class="col-3 search align-self-center">
        	                    
        	                    <button type="button" class="btn btn-transparent p-1" data-bs-toggle="modal" data-bs-target="#searchModal">
                                    <i class="bi bi-search text-white"></i>
                                </button>
        	                </div><!-- search btn !-->
        	                <div class="col-9 donate-btn"><a href="#" class="btn btn-info">DONATE</a></div><!-- Donate btn !-->
        	            </div>
        	        </div><!-- Search & Donate !-->
	            </div>
	        </div><!-- Menu area !-->
	    </div></div><!-- container & Row !-->
	</div><!-- menu section !-->
	
	<!-- 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 UNNGOF 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>
