
<style>
    .onlymobile{
    display: none;
}
.onlydesk{
    display: block;
}
.spinner {
position: absolute;

top: 32px; /* Adjust position */
margin-left: -78px !important;
object-fit: contain;
animation: spin 1s linear infinite; /* Faster rotation */
z-index: 1000;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ogunlogo {
width: 17%; /* or auto or a fixed width */
height: auto;
}


/* Show only on screens 768px or less (typical mobile width) */
@media (max-width: 768px) {
.main-header-two__logo_right {
position: absolute;
right: 20px;
bottom: -55px;

}
.ogunlogo {
width: 25%; /* or auto or a fixed width */
height: auto;
}


.spinner {
top: 30px; /* Adjust position */
margin-left: -78px !important;

}

.main-header-two__logo {
position: absolute;
left: 25px;
bottom: -57px;

}
.onlymobile{
    display: block;
    top:-100px;
    padding-top:0px;
}
.onlydesk{
    display: none;
}

}

@media (min-width: 992px) {
  /* Desktop-specific styles go here */
  .main-menu__list {
    justify-content: center;
    letter-spacing: 1px;
  }
}


/* Default style: full width or original size */

.main-menu-two__wrapper-inner {
display: flex;
justify-content: center;  /* This centers everything horizontally */
align-items: center;
/* Optional spacing between left and right sections */
}

.main-menu-two__left,
.main-menu-two__right {
flex: none; /* Prevent stretching */
}

.main-menu-two__main-menu-box {
display: flex;
justify-content: center;
width: 100%;
}

/* Font Awesome for the search icon */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
 float:right;
}

#search-box {
  border: none;
  border-bottom: 2px solid #aab0bd;
  outline: none;
  font-size: 14px;
  width: 300px;
  transition: width 0.4s ease;
  height: 25px;
  border-radius: 5px;
  padding: 5px;
}

#search-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  font-size: 20px;
  color:rgb(251, 251, 251);
}

.underline {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #aab0bd;
  width: 300px;
  transition: width 0.4s ease;
}

/* Expand on focus */
#search-box:focus {
  width: 400px;
}

/* Also animate the underline */
#search-box:focus + .underline {
  width: 40px;
}

.main-menu .main-menu__list > li > ul,
.main-menu .main-menu__list > li > ul > li > ul {
  width: 300px !important; /* Set to desired width */
}



 </style>

 

 <header class="main-header-two">
            <div class="main-header-two__inner">
                <div class="main-header-two__top">
                    <div class="container">
                        <div class="main-header-two__top-inner">
                            <div class="main-header-two__logo">
                                <a href=""><img src="assets/images/logommmm.png" width="60%" alt=""></a>
                            </div>
                            <div class="main-header-two__top-left">
                                <ul class="list-unstyled main-header-two__contact-list">
                                    <li>
                                        <div class="icon">
                                            <i class="icon-email"></i>
                                        </div>
                                        <div class="text">
                                            <p><a href="mailto:investment@ogunstate.gov.ng">investment@ogunstate.gov.ng</a></p>
                                        </div>
                                    </li>

                                     <li>
                                        <div class="icon">
                                            <i class="icon-pin"></i>
                                        </div>
                                        <div class="text">
                                            <p>4th Floor, OPIC House, Isheri, Ogun State.</p>
                                        </div>
                                    </li>

                                    <li style="float: right !important;">
                                        
                                         <div class="search-container">
                                            <input type="text" id="search-box" placeholder="Search" />
                                            <span class="underline"></span>
                                            <button id="search-btn">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </div>
                                    </li>
                                    <li>
                                      
                                    </li>
                                </ul>
                            </div>
                            

                            <div class="main-header-two__logo_right">
                                <a href=""><img src="assets/images/oguninvestmmm.png" alt=""></a>
                                 <img class="spinner" src="assets/images/spinlogommm.png" alt="Spinning Logo" width="30%" >
                            </div>

                        </div>
                    </div>
                </div>
                <div class="main-header-two__bottom">
                    <nav class="main-menu main-menu-two">
                        <div class="main-menu-two__wrapper">
                            <div class="container">
                                <div class="main-menu-two__wrapper-inner">
                                    <div class="main-menu-two__left">
                                        <div class="main-menu-two__main-menu-box">
                                            <a href="#" class="mobile-nav__toggler"><i class="fa fa-bars"></i></a>
                                            <ul class="main-menu__list">
                                                
                                                <li>
                                                    <a href="index.php">Home</a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#">About Us</a>
                                                    <ul class="shadow-box">
                                                        <li><a href="#">Who We Are</a>
                                                        </li>
                                                        <li><a href="#">Our Services</a>
                                                        </li>
                                                        <li><a href="#">Key Partners</a>
                                                        </li>
                                                        <li><a href="#">Success Stories</a></li>
                                                        <li><a href="#">About Ogun State</a>
                                                        </li>
                                                        <li><a href="#">Why Invest in Ogun State</a>
                                                        </li>
                                                       
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#">Investment Sectors</a>
                                                    <ul class="shadow-box">
                                                        <li><a href="#">Agriculture</a></li>
                                                        <li><a href="#">Manufacturing</a></li>
                                                        <li><a href="#">Infrastructure</a>
                                                        </li>
                                                        <li><a href="#">Solid Minerals</a></li>
                                                         <li><a href="#">Transportation & Logistics</a></li>
                                                          <li><a href="#">Energy</a></li>
                                                           <li><a href="#">ICT</a></li>
                                                            <li><a href="#">Tourism</a></li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#">Resources</a>
                                                    
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#">Ministries & Processes</a>
                                                    <ul class="shadow-box">
                                                        <li><a href="#">Collaboration With Ministries</a></li>
                                                        <li><a href="#">Lands And Urban</a></li>
                                                        <li><a href="#">Commerce And Industry</a></li>
                                                        <li><a href="#">Process Illustration</a></li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#">Media</a>
                                                    <ul class="shadow-box">
                                                        <li><a href="#">Latest News</a></li>
                                                        <li><a href="#">Upcoming Events</a></li>
                                                        <li><a href="#">Press Releases</a></li>
                                                        <li><a href="#">Media Gallery</a></li>
                                                        <li><a href="#">Infographics</a></li>
                                                    </ul>
                                                </li>
                                                 <li class="dropdown">
                                                    <a href="#">Contact Us</a>
                                                    
                                                </li>
                                               
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="main-menu-two__right">
                                        <div class="main-menu-two__search-cart-btn-box">
                                            
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

         <div class="stricky-header stricked-menu main-menu main-menu-two">
            <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
        </div><!-- /.stricky-header -->

        <script>
  const searchBox = document.getElementById('search-box');
  const searchContainer = document.querySelector('.search-container');

  searchBox.addEventListener('input', function () {
    if (searchBox.value.trim() !== "") {
      searchContainer.classList.add('active');
    } else {
      searchContainer.classList.remove('active');
    }
  });
</script>
