<div class="mobile-mneu-container">
                <div class="left-part">
                    <?php the_custom_logo(); ?>
                </div>
                <div class="right-part">
                    <div class="btn-animation btngradienthov">
                        <a href="">
                            <span class="button-text">Get a Quote</span>
                        </a>
                    </div>
                    <div class="mobile-custome-menu">
                        <div id="clickBtn" class="clickBtn toggle-btn">
                            <div class="three-toggle">
                                <span class="short-line"></span>
                                <span class="large-line"></span>
                                <span class="short-line"></span>
                            </div>
                        </div>
                        <div class="bgoverly">
                            <div id="sideBar" class="sidebar">
                                <?php
                                 wp_nav_menu(array(
                                'menu' => 'Mobile Menu',
                                'menu_id' => '-1',
                                 ));
                                 ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


  .mobile-mneu-container {
    display: flex !important;
    justify-content: space-between;
    padding: 10px 20px;
  }

  .service-boxes {
    grid-template-columns: 50% 50%;
  }

  .desktop-menu {
    display: none;
  }

  footer .footer-heading {
    font-size: 36px;
  }

  div#clickBtn {
    cursor: pointer;
    position: relative;
    z-index: 9999;
    width: 28px;
  }

  .top_sect_menu {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
  }

  .mobile-logo {
    text-align: center;
  }

  .sub-menu strong {
    font-weight: 500;
  }

  .mobile-nav .col-md-3,
  .mobile-nav .col-md-2 {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .bgoverly {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 100%;
    height: 100%;
    background: #0000005e;
    z-index: 1000;
    transition: all 0.75s;
    top: 70px;
  }

  #sideBar.active,
  .bgoverly.active {
    left: 0 !important;
    transition: all 0.25s;
  }

  #sideBar {
    top: 70px;
    margin: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.75s;
    overflow: scroll;
    padding: 20px 19px;
  }

  .mobile-mneu-container .btn-animation.btngradienthov {
    margin-right: 12px;
  }

  .toggle-btn span {
    width: 24px;
    height: 4px;
    background: #000;
    margin: 6px 0;
    display: block;
    transition: 0.5s;
    border-radius: 10px;
  }

  .make-close img {
    width: 28px;
  }

  span.large-line {
    width: 28px;
    margin-left: -4px;
  }

  .three-toggle {
    margin-top: 11px;
  }

  .close {
    text-align: end;
    cursor: pointer;
  }

  .menu-mobile-menu-container ul {
    margin: 0;
    padding: 0;
  }

  .menu-mobile-menu-container li {
    list-style: none;
    margin-bottom: 5px;
    position: relative;
  }

  .menu-mobile-menu-container li a {
    text-decoration: none;
    color: #000;
    font-size: 15px;
    font-weight: 600;
  }

  .menu-mobile-menu-container li .sub-menu li a {
    color: #000;
    font-size: 15px;
    font-weight: 300;
  }

  .menu-mobile-menu-container li .sub-menu li {
    transition: 00.5s all;
    padding: 8px;
  }

  .menu-mobile-menu-container li .sub-menu li:hover {
    border-left: 15px solid #89d501;
    background: rgba(137, 213, 1, 0.1);
  }

  .mobile-contact {
    padding: 14px 46px;
    background-color: #ef6023;
    color: #fff;
    text-decoration: none;
    font-size: 23px;
    font-weight: 600;
    border-radius: 10px;
  }

  .mobile-bottom-sect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 70px;
  }

  .mobile-icons {
    display: flex;
    gap: 2px;
    justify-content: end;
  }

  .mobile-icons a {
    display: flex;
    background-color: #0f513e;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    border-radius: 100%;
    border: 4px solid white;
  }

  .mobile-nav {
    display: none;
  }

  .menu-item-has-children .sub-menu {
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 00.5s ease;
    padding-left: 1rem;
  }

  .menu-item-has-children {
    padding: 7px 0;
  }

  li#menu-item-345 {
    padding: 7px 0;
  }

  li#menu-item-346 {
    padding: 7px 0;
  }

  .menu-item-has-children.open .sub-menu {
    height: 100%;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    padding: 10px 0;
  }

  .menu-item-has-children::before {
    content: "";
    background-image: url("https://mmcgbl.com/wp-content/uploads/2024/11/arrow.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 1px;
    top: 11px;
    transform: rotate(90deg);
    transition: transform 00.5s ease;
    z-index: 9999;
  }

  .icon-box-content p {
    font-size: 13px;
  }

  .icon-box-content h3 {
    font-size: 19px;
  }

  .menu-item-has-children.open::before {
    transform: rotate(180deg);
  }



document.addEventListener("DOMContentLoaded", function () {
  const clickBtn = document.querySelector(".clickBtn");
  const sideBar = document.querySelector(".sidebar");
  const bgOverlay = document.querySelector(".bgoverly");
  const body = document.body;

  const openMenuHTML = `
    <div class="three-toggle">
      <span class="short-line"></span>
      <span class="large-line"></span>
      <span class="short-line"></span>
    </div>`;

  const closeMenuHTML = `
    <div class="make-close">
      <img src="https://mmcgbl.com/ai/wp-content/uploads/2025/07/closeX.webp" alt="close">
    </div>`;
  if (clickBtn && sideBar && bgOverlay) {
    clickBtn.addEventListener("click", function (e) {
      e.stopPropagation();
      const isSidebarOpen = sideBar.classList.contains("active");

      sideBar.classList.toggle("active");
      bgOverlay.classList.toggle("active");
      body.classList.toggle("sidebar-open");

      clickBtn.innerHTML = isSidebarOpen ? openMenuHTML : closeMenuHTML;
    });
  }
  document.addEventListener('click', function(e) {
    if (!sideBar.contains(e.target) && e.target !== clickBtn) {
      sideBar.classList.remove("active");
      bgOverlay.classList.remove("active");
      body.classList.remove("sidebar-open");
      clickBtn.innerHTML = openMenuHTML;
    }
  });
  const menuItems = document.querySelectorAll(".menu-item-has-children");
  menuItems.forEach((item) => {
    const subMenu = item.querySelector(".sub-menu");
    const link = item.querySelector("a");
    if (!subMenu) return;
    item.addEventListener("click", function (event) {
      if (event.target !== link && !link.contains(event.target)) {
        return;
      }
      if (link && (!link.getAttribute("href") || link.getAttribute("href") === "#")) {
        event.preventDefault();
      }

      const isOpen = item.classList.contains("open");
      menuItems.forEach((otherItem) => {
        if (otherItem !== item) {
          otherItem.classList.remove("open");
          const otherSubMenu = otherItem.querySelector(".sub-menu");
          otherSubMenu?.classList.remove("open");
        }
      });
      item.classList.toggle("open", !isOpen);
      subMenu.classList.toggle("open", !isOpen);
    });
    subMenu.addEventListener("click", function(event) {
      event.stopPropagation();
    });
  });
});