<header class="main-header header-style-one outer-box-position"> 
    <!-- Header Top -->
   
    <!-- Header Top -->
    
    <div class="header-lower"> 
      <!-- Main box -->
      <div class="main-box">
        <div class="logo-box">
          <div class="logo"><a href="index.php"><img src="images/logo.png" class="logy" alt="Logo" title="Com Legal Associates"></a></div>
        </div>
        
        <!--Nav Box-->
        <div class="nav-outer">
          <nav class="nav main-menu">
            <ul class="navigation">
              <li> <a href="home.php">Home</a>
               
              </li>
              <!-- <li><a href="about.php">About us</a></li> -->

              <li class="dropdown"> <a href="about.php">About us</a>
                <ul>
                  <li><a href="whychoose.php">Why Choose Us?</a></li>
                  <!-- <li><a href="update_news.php">News Updates</a></li> -->
                </ul>
              </li>

              <li><a href="service.php">Services</a></li>
              <!-- <li><a href="team.php">Team</a></li> -->
              <li class="dropdown"> <a href="#">Insights</a>
                <ul>
                  <li><a href="blog.php">Blogs</a></li>
                  <li><a href="update_news.php">News Updates</a></li>
                </ul>
              </li>
              <li><a href="contact.php">Contact us</a></li>
            
         
            </ul>
          </nav>
          <div class="mobile-nav-toggler"> <span class="icon fa-sharp far fa-bars"></span> </div>
        </div>
        
        <!-- Outer Box -->
        <div class="outer-box"> 

    <!-- Search Button (Opens Popup) -->
<button class="ui-btn search-btn"> <i class="icon fal fa-search"></i> </button>

<!-- Search Popup -->
<div class="search-popup" id="searchPopup">
    <span class="search-back-drop"></span>
    <button class="close-search"><span class="fa fa-times"></span></button>
    <div class="search-inner">
        <form id="searchForm">
            <div class="form-group">
                <input type="search" id="searchQuery" name="searchQuery" placeholder="Search..." required>
                <button type="submit"><i class="fa fa-search"></i></button>
            </div>
        </form>

        <!-- Search Results Section -->
        <div class="row" id="searchResults"></div>
    </div>
</div>

<script>
// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
    
    // Open search popup when clicking the search button
    document.querySelector(".search-btn").addEventListener("click", function(event) {
        event.preventDefault();
        document.getElementById("searchPopup").style.display = "block";
    });

    // Close search popup when clicking the close button
    document.querySelector(".close-search").addEventListener("click", function() {
        document.getElementById("searchPopup").style.display = "none";
        document.getElementById("searchResults").innerHTML = ""; // Clear results
    });

    // Close popup if user clicks outside the search box
    document.querySelector(".search-back-drop").addEventListener("click", function() {
        document.getElementById("searchPopup").style.display = "none";
        document.getElementById("searchResults").innerHTML = ""; // Clear results
    });

    // Handle AJAX search
    document.getElementById("searchForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Prevent page reload

        let query = document.getElementById("searchQuery").value;

        fetch("search.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: "searchQuery=" + encodeURIComponent(query)
        })
        .then(response => response.text())
        .then(data => {
            document.getElementById("searchResults").innerHTML = data; // Show results
        })
        .catch(error => console.error("Error:", error));
    });

});
</script>

        <!-- <button class="ui-btn search-btn"> <i class="icon fal fa-search"></i> </button> -->
        <!-- <button class="ui-btn search-btn"> <i class="icon fal fa-search"></i> </button> -->
          <div class="divider"></div>
          
          <!-- Header Search -->
          <!-- <button class="ui-btn cart-btn"> <i class="icon fal fa-shopping-cart"></i> <span class="count">0</span> </button> -->
          
          <!-- Btn Box -->
          <div class="btn-box ml-70 me-5 call-btn"> 
            <!-- Info Btn --> 
            <a href="tel:+91 98106 97834"> <i class="icon fal fa-phone"></i> <strong>+91 98106 97834</strong> </a>
          </div>
          
          <!-- Button -->
          <div class="btn-box"> <a href="tel:+91 9810697834" class="theme-btn btn-style-one"><span class="btn-title">Get in Touch</span></a> </div>
          
          <!-- Mobile Nav toggler -->
          <div class="mobile-nav-toggler"><span class="icon fa-sharp far fa-bars"></span></div>
        </div>
      </div>
    </div>
    
    <!-- Mobile Menu  -->
    <div class="mobile-menu">
      <div class="menu-backdrop"></div>
      <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
      <nav class="menu-box">
        <div class="upper-box">
          <div class="nav-logo"><a href="index.php"><img src="images/logo.png" alt=""></a></div>
          <div class="close-btn"><i class="icon fa fa-times"></i></div>
        </div>
        <ul class="navigation clearfix">
          <!--Keep This Empty / Menu will come through Javascript-->
        </ul>
        <ul class="contact-list-one">
          <li> <i class="icon far fa-phone-flip"></i> <span class="title">Call Now</span>
            <div class="text"><a href="tel:+91 98106 97834">+91 98106 97834</a></div>
          </li>
          <li> <i class="icon far fa-envelope"></i> <span class="title">Send Email</span>
            <div class="text"><a href="mailto: comlegalassociates@gmail.com"><span class="__cf_email__" data-cfemail="7b3a0d14181a0f1e3b1f14161a121555181416">comlegalassociates@gmail.com</span></a></div>
          </li>
          <li> <i class="icon far fa-location-dot"></i> <span class="title">Address</span>
            <div class="text">1st Floor, Plot No. 15, Service Centre, <br />Vasundhara Enclave, Delhi 110096</div>
          </li>
        </ul>
    
      </nav>
    </div>
    <!-- End Mobile Menu --> 
    
    <!-- Header Search -->
    <!-- <div class="search-popup"> <span class="search-back-drop"></span>
      <button class="close-search"><span class="fa fa-times"></span></button>
      <div class="search-inner">
        <form method="post" action="https://html.kodesolution.com/2024/avocate-html/index.html">
          <div class="form-group">
            <input type="search" name="search-field" value="" placeholder="Search..." required="">
            <button type="submit"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </div>
    </div> -->
    <!-- End Header Search --> 
    
    <!-- Sticky Header  -->
    <div class="sticky-header">
      <div class="auto-container">
        <div class="inner-container"> 
          <!--Logo-->
          <div class="logo"> <a href="index.php"><img src="images/logo.png" class="logy" alt=""></a> </div>
          
          <!--Right Col-->
          <div class="nav-outer"> 
            <!-- Main Menu -->
            <nav class="main-menu">
              <div class="navbar-collapse show collapse clearfix">
                <ul class="navigation clearfix">
                  <!--Keep This Empty / Menu will come through Javascript-->
                </ul>
              </div>
            </nav>
            <!-- Main Menu End--> 
            
            <!--Mobile Navigation Toggler-->
            <div class="mobile-nav-toggler"><span class="icon fa-sharp far fa-bars"></span></div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Sticky Menu --> 
  </header>


  <div class="search-popup">
    <span class="search-back-drop"></span>
    <button class="close-search"><span class="fa fa-times"></span></button>
    <div class="search-inner">
        <form id="searchForm">
            <div class="form-group">
                <input type="search" id="searchQuery" name="searchQuery" placeholder="Search..." required>
                <button type="submit"><i class="fa fa-search"></i></button>
            </div>
        </form>

        <!-- Search Results -->
        <div id="searchResults"></div>
    </div>
</div>

<script>
// Open search popup
document.querySelector(".search-btn").addEventListener("click", function() {
    document.querySelector(".search-popup").style.display = "block";
});

// Close search popup
document.querySelector(".close-search").addEventListener("click", function() {
    document.querySelector(".search-popup").style.display = "none";
    document.getElementById("searchResults").innerHTML = ""; // Clear results
});

// Handle search submission via AJAX
document.getElementById("searchForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent form reload

    let query = document.getElementById("searchQuery").value;

    fetch("search.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: "searchQuery=" + encodeURIComponent(query)
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("searchResults").innerHTML = data; // Display results inside popup
    })
    .catch(error => console.error("Error:", error));
});
</script>


<style>
  .search-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    padding: 50px;
}

.search-inner {
    background: #fff;
    padding: 20px;
    max-width: 500px;
    margin: auto;
    border-radius: 10px;
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.search-result-item h3 a {
    text-decoration: none;
    color: #007BFF;
    font-size: 16px;
}

.search-result-item p {
    color: #666;
    font-size: 14px;
}

.close-search {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

</style>