body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
     /* font-style: normal; */
     font-size: 17px; 
     /* color: #626262;  */
}
 .mobile-overlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #000;
        color: #fff;
        z-index: 9999;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }
      .mobile-overlay.active {
        transform: translateX(0);
      }
      .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid #444;
        margin-bottom: 0;
      }
      .mobile-menu-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
        margin: 0;
      }
      .mobile-close-btn {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        line-height: 1;
      }
      .mobile-menu-panel {
        /* padding: 0 20px 20px 0px; */
        background: #000;
        box-sizing: border-box;
      }
      .mobile-submenu-toggle {
        position: relative;
        font-size: 1.1rem;
        padding: 14px 30px 14px 20px;
        border-bottom: 1px solid #444;
        cursor: pointer;
        color: #fff;
        text-transform: uppercase;
      }
      .mobile-submenu-toggle.has-submenu::after {
        content: "▸";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        font-size: 1.2rem;
      }
      .mobile-submenu-toggle.has-submenu.open::after {
        content: "▾";
      }
      .mobile-submenu {
        display: none;
        background: #fff;
        color: #000;
        margin: 0 -20px;
      }
      .mobile-submenu .menu-item {
        position: relative;
        padding: 14px 30px 14px 40px;
        border-bottom: 1px solid #eee;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.2s;
        text-transform: uppercase;
      }
      .mobile-submenu .menu-item.has-submenu::after {
        content: "▸";
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
      }
      /* .mobile-submenu .menu-item:hover{
        color:#84ba3f;
      } */
      a:hover,
      .menu-item:hover,
      .mobile-submenu-toggle:hover {
        color: #84ba3f;
      }
      .level2-header:hover .level2-title,
      .level2-header:hover .back-button {
        color: #84ba3f;
      }
      /* .mobile-submenu .menu-item.has-submenu.open::after {
        content: "▾";
      } */
      .level-2-panel {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 10000;
        transition: left 0.3s ease;
        padding: 0;
        box-sizing: border-box;
        overflow-y: auto;
      }
      .level-2-panel.active {
        left: 0;
      }
      .level-2-panel .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #444;
        background: #000;
        font-size: 18px;
      }
      .level-2-panel .panel-title {
        font-size: 17px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        text-transform: uppercase;
      }
      .level-2-panel .back-button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        font-weight: bold ;
      }
      .level-2-panel .menu-content {
        padding: 20px;
      }
      .level-2-panel .menu-item {
        padding: 14px 30px;
        /* border-bottom: 1px solid #444; */
        text-transform: uppercase;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.2s;
        color:#444;
        
      }
      .level-2-panel .menu-item:hover {
        color: #84ba3f;
      }
      .level-2-panel .menu-group-title {
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.1rem;
        color: #c0bfbf;
        text-transform: uppercase;
        padding-left: 30px;
       
      }

      .level-2-panel .menu-group-title {
        border-top: 1px solid #eee;
        padding-top: 20px;
      }

      .level-2-panel .menu-group-title.first-group {
        border-top: none;
        padding-top: 0;
      }

      

      .level2-header {
        cursor: pointer;
        transition: background 0.2s ease;
      }

     
    
      .mobile-overlay.active ~ .storefront-primary-navigation .handheld-navigation {
        display: none !important;
      }
      
  
      @media (min-width: 1025px) {
        .mobile-overlay {
          display: none !important;
        }
      }
      
      
      @media (max-width: 1024px) {
        .handheld-navigation {
          display: block;
        }
      }

      .menu-close {
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
        background: #000;
        padding: 14px 20px;
        cursor: pointer;
        text-align: right;
        border-bottom: 1px solid #444;

      }
      .handheld-navigation {
        display: none !important;
      }

      .level2-header {
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid #444;
        background: #000;
      }

      .level2-title {
        font-size: 18px;
        /* font-weight: bold; */
        color: #fff;
        text-transform: uppercase;
        /* padding-left: 20px; */
      }

      

      .back-button {
        font-size: 1rem;
        color: #0073aa;
        padding-right: 20px;
        cursor: pointer;
      }