/* Header */
.header {
 padding: 15px 0 12px;
 position: relative;
 width: 100%;
 top: 0;
 left: 0;
 z-index: 99;
 background-color: #ffffff;
 transition: 0.2s all ease;
}

/*.header::before {
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffffbd;
  filter: blur(30px);
  }*/

  .header_wrapper {
    display: flex;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
  }

  .logo img {
    max-width: 140px;
  }

  /* Desktop menu */
  .nav {
    margin-left: auto;
  }

  .menu {
    list-style: none;
    display: flex;
    align-items: center;
  }

  .menu li {
    position: relative;  
  }

  .menu a {
   color: #000;
   text-decoration: none;
   padding: 12px 15px;
   font-size: 17px;
   font-weight: 600;
   line-height: 1;
   text-transform: capitalize;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   transition: 0.2s all;
 }



 .menu a:hover {
  color: var(--activecolor);
}

/*.menu>li>a {
  border-left: 1px solid #ccc;
}
*/
/*  .menu>li:last-child>a{
   border-left: none; 
  }
  */
  /*.menu>li:nth-last-of-type(2) > a {
   border-left: none;   
   }*/

 /*  .menu>li:first-child>a{
    border-left: none;
  }
  */

  .menu a.custom_btn {
    color: #fff;
    text-align: center;
    justify-content: center;
  }
  .arrow {
    font-size: 12px;
    margin-left: 6px;
    transition: transform 0.3s ease;
  }

  /* Submenu desktop */
  .submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #222;
    background: #8d5555;
    min-width: 160px;
    display: none;
  }

  .submenu .submenu {
    left: 100%;
    top: 0;
  }

  .has-submenu:hover > .submenu {
    display: block;
  }


/*  .has-submenu:hover > a .arrow {
    transform: rotate(90deg);
    }*/

    /* Mobile elements hidden on desktop */
    .menu-btn,
    .close-btn,
    .overlay {
      display: none;
    }


    .header.sticky {
      position: sticky;
      transition: 0.2s all ease;
      background: #ffffff;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }

    .header.sticky::before{
      opacity: 0;
    }


    /* ================= MOBILE ================= */


    @media (max-width: 1200px) {
      .menu a{padding: 12px 10px;font-size: 15px;}    
    }

    @media (max-width: 768px) {

      

      .menu-btn {
        display: block;
        margin-left: auto;
        font-size: 24px;
        cursor: pointer;
        color: var(--buttonColor3);
      }

      .nav {
        position: fixed;
        top: 0;
        left: -380px;
        width: 100%;
        max-width: 360px;
        height: 100%;
        background: #111;
        transition: 0.3s ease;
        z-index: 10;
        padding-top: 50px;
        height: 100%;
        overflow-x: scroll;
      }

      .nav.active {
        left: 0;
      }

      .menu {
        flex-direction: column;
        align-items: flex-start;
      }

      .submenu {
        position: static;
        display: none;
        background: #222;
      }

      .has-submenu.open > a .arrow {
        transform: rotate(90deg);
        color: #FF6D34;
      }

      li.has-submenu.open>a {color: #FF6D34;}

      .close-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 22px;
        color: #fff;
        cursor: pointer;
      }

      .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9;
      }

      .submenu {display: none;position: static;}
      .menu li.has-submenu.open ul.submenu a {padding-left: 28px;font-size: 16px;}
      .menu li:last-child>a{    justify-content: flex-start;}
      .menu li:last-child>a img{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(317deg) brightness(102%) contrast(103%);}
      /* Disable hover effects on mobile */

      .has-submenu:hover > .submenu {display: none;}

      .menu>li>a {border-left: none;}
      .menu a{padding: 15px;color: #fff;border-bottom: 1px solid #cccccc4a;}
      .menu li{width: 100%;}
      .menu a.custom_btn{border: none;min-width: auto;width: 120px;margin: 15px auto 15px;}

      .menu a:hover {color: #FF6D34;}

      .header_cart a{justify-content: flex-start;}
      .logo img {max-width: 100px;}
      .header{padding: 15px 0 10px;}




    }


    /* ================= DESKTOP ONLY ================= */


    @media (min-width: 769px) {

      .submenu {display: none;}
      .has-submenu:hover > .submenu {display: block;width: 230px;}      
      .has-submenu:hover > a .arrow {transform: rotate(90deg);}
      .menu li.has-submenu ul.submenu {background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);border-radius: 5px;}
      .has-submenu span.arrow {display: none;}

      .menu a:before {position: absolute; content: '';width: 1px;height: 35%;background: var(--header_menu_color3);left: 0;}    
      .menu li:first-child a:before {display: none;}
      .menu .has-submenu > .submenu a:before{display: none;}

      .submenu li a {font-size: 15px;line-height: normal;padding: 7px 10px;line-height: 1.3;}
      .submenu li a:hover{ transform: translateX(5px);}

      /*.menu> li:last-child a{color: var(--activecolor);}    */

    }