.header {
    width: 100%;
    z-index: 0;
    transition: all 500ms;
    background: #fff;
    z-index: 99
}

.header.sticky{
    box-shadow: rgba(85, 85, 85, 0.5) 0px 1px 2px 0px;
    z-index:9999;
}

.header.sticky .header-middle{
    padding:5px 0;
}

.header.sticky .categories{
    display:none;
}

.header .header-top{
    padding:5px 0 0 0;
}

.header .header-top img{
   height:20px;
}

.header .header-top a{
 font-family: var(--barlow);
  font-size: 14px;
}

.header ul{
    margin:0;
}

.header-top ul{
    display:inline-block;
}
.header-top ul li{
    float:left;
    padding:0 5px;
    position:relative;
    text-align:left;
    display:flex;
    align-items:center;
}

.header-top ul li span{
    margin-right:3px;
}

.header-middle {
    padding: 0px 0 5px 0;
}

.header-middle .bars{
    margin-right:10px;
    color:#065fd4;
    font-size:25px;
    display:none
}

.header .cart-control {
    position: relative;
    top: 15px;
    right: 9px;
}

.header .cart-control span.info{
     position: absolute;
    text-align: center;
    left: 40%;
    font-weight: 600;
    transform: translateX(-23%);
    top: 0px;
    min-width: 25px;
    color: #fff;
    font-family: var(--baralow-bold);
    color: #ff8900;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 2px;
}

.header .cart-control .text{
    font-family:var(--barlow-medium);
    line-height:0;
}

.header .cart-control img.icon{
    width:45px;
}

.header ul li.main-li{
    padding:10px;
    position:relative;
}

.header li.main-li > a {
    font-size: 14px;
    margin-right: 15px;
}

.header nav {
    z-index: 999;
    border-radius: 0;
    height: 450px;
    box-shadow: unset;
    padding: 0;
}

.header .nav-bars {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    border: 0;
    background: #fff;
    font-size: 28px;
    display: none;
}


.header .nav-content {
    height: 450px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.header nav .sub-ul {
    display: none;
    background: #fff;
    border-bottom: 1px solid #dedede;
    box-shadow: 1px 2px 2px 0 rgb(0 0 0 / 18%);
    padding: 25px 50px;
}

.header nav strong {
    display: block;
    margin-bottom: 15px;
    font-family: Barlow-Bold;
    font-weight: bold;
    font-size: 18px;
}


.header .main-link {
    display: block;
    padding: 10px;
    border-bottom: 1px dotted var(--default-border-color);
    position:relative;
    font-family:Barlow-Medium
}

.header .nav-item:hover{
    background:#000;
}

.header .nav-item:hover > .main-link {
    color: #fff;
}

.header nav .icon{
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
}

/***********************/


@media screen and (min-width:992px),screen and (min-device-width:992px) {

.header .header-bottom{
    background:var(--dark-color2);
    position:relative;
}

.header ul li.main-li{
    float:left;
    flex:none;
}

.header li.main-cat{
    width:300px;
    background:var(--danger-color)
}

.header li.main-li > a {
    color: #fff;
}

.header nav{
    position: absolute;
    top: 100%;
    width: 301.5px;
    left: -0.5px;
    height: 450px;
    padding: 0;
    border: 1px solid var(--default-border-color);
}


/* width */
.header .nav-content::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.header .nav-content::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
.header .nav-content::-webkit-scrollbar-thumb {
  background: var(--default-border-color); 
  border-radius: 10px;
}

/* Handle on hover */
.header nav > ul::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

.header nav .sub-ul {
    position: absolute;
    left: 98%;
    width: 768px;
    height: 450px;
    top: 0;
    background: #fff;
    overflow-y:auto
}

/* width */
.header nav .sub-ul::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.header nav .sub-ul::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* Handle */
.header nav .sub-ul::-webkit-scrollbar-thumb {
    background: var(--default-border-color);
    border-radius: 10px;
}

/* Handle on hover */
.header nav .sub-ul::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}
.header nav .sub-ul li{
    display: block;
    list-style: none;
    position: relative;
    margin: 10px 0 10px;
    padding-left: 30px;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.header nav li:hover > .sub-ul {
    display: block;
    border-left: 2px solid #000;
}

.header .mobil-menu{
    display:none;
}
}

@media screen and (max-width:992px),screen and (max-device-width:992px) {
 .header .main-ul {
    position: fixed;
    z-index: 999;
    width: 100%;
    max-width:295px;
    left: -100%;
    top: 35px;
    background: #fff;
    height: 100%;
    transition:all 500ms;
    box-shadow: 0 3px 14px 2px rgb(31 31 31 / 6%), 0 8px 10px 1px rgb(31 31 31 / 8%), 0 5px 5px -3px rgb(31 31 31 / 6%);
    padding:25px 0px;
}


 .header .main-ul.active{
     left:0;
     background:#fff;
     overflow-y:scroll;
 }

.header ul.main-ul li {
    float: none;
}

.header .nav-bars {
    display: block;
}

.header .shortcut {
    display: none
}

.header .top-contact {
    text-align: center;
}

.header .header-top {
    background: var(--danger-color);
    margin-bottom: 15px;
}

.header .header-top * {
    color: #fff
}

.header .cart-control {
    left: 15px;
    top: -5px;
    right: unset;
}

.header nav {
    display: block !important
}

.header nav .sub-ul {
    max-height:300px;
    overflow-y:auto;
    padding:10px;
    border:0;
    box-shadow:unset;
}

.header nav strong {
    display: none;
}

.header li.main-li > a {
    font-size: 16px;
}

.header li.divider h3{
   text-indent: 10px;
    min-height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    font-size: 22px;
    font-weight: 700;
    background: var(--light);
    font-family: 'Barlow-Bold';
    color: var(--gray);
}
}