@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
      font-family: "Inter", sans-serif;
      
}
/* for development css start here */
.border{
    border: 1px solid black;
}
/* development css end here  */
:root{
    --primary-color: #0362B3;
    --green-color: #87b541;
    --white: #FFF;
    --text-color: #333333;
    --border-color: #E5E7EB;
    --background-color: #F8F9FA;
}


/* commom css for all start here */
.container{
    max-width: 1400px;
    margin: 0 auto;
}
.flex{
    display: flex;
}
.flex-1{
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.flex-3{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-4{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}
.w-100{
    width: 100%;
}
.g-5{
    gap: 5px;
}
.g-10{
    gap: 10px;
}
.p-5{
    padding: 5px;
}
.p-15{
    padding: 15px;
}
.p-10{
    padding: 10px;
}
.h-40{
    height: 40px;
}
.btn-updated{
    text-decoration: none;
    font-size: 17px;
}
.user-btn{
      background-color: var(--primary-color);
    color: var(--white);
    font-size: 10px;
    border-radius: 5px;
    padding: 0 10px;
}
.user-btn-2{
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 10px;
    border-radius: 5px;
    padding: 0 10px;
}

.flex-between{
    justify-content:space-evenly;
}
/* commom css for all end here */

/* header styling start here */
.top-header-container{
    background-color: #f7f7f7;
}
.main-header-section{
    background-color: var(--primary-color);
}
.search-bar-section{
    width: 50%;
}
.product-search-form{
    border: 2px solid  var(--primary-color);
    border-radius: 5px;
    width: 100%;
    input{
        width: 91%;
        height: 40px;
        border: none;
        outline: none;
        padding: 10px;
    }
    button{
        height: 40px;
        width: 5%;
        background-color:  var(--primary-color);
        border: none;
        outline: none;
        color: var(--white);
         font-size: 14px;
        
    }
}
.all-search-section{
    background-color: var(--primary-color);
    width: 5%;
    color: var(--white);
    font-size: 12px;
    position: relative;
    i{
        font-size: 10px;
    }
   
}
.more-cat-list{
    background-color: var(--primary-color);
   
    color: var(--white);
    font-size: 12px;
    position: relative;
    i{
        font-size: 10px;
    }
   
}
.all-search-cat{
    position: absolute;
    top: 45px;
    left: -75px;
    background-color: var(--primary-color);
    width: 200px;
    z-index: 9999;
    max-height:0;
    overflow:hidden;
    transform:translateY(-1px);
    transition:
        max-height .4s ease,
        opacity .3s ease,
        transform .3s ease;
    ul{
        list-style: none;
         li{
            padding: 7px 20px;
            border-bottom: 1px solid #ffffff38;
             a{
                text-decoration: none;
                color: var(--white);
             }
        }
    }
}

.all-search-cat ul li:hover{
    background-color:  var(--white);
}
.all-search-cat ul li:hover a{
     color: var(--primary-color);
}

.all-search-section:hover .all-search-cat{
   max-height:445px;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.header-icon-section{
        gap: 20px;
}
.header-icon{
    height: 40px;
}
.view-cart-btn{
    position: relative;
}
.counting-section{
    position: absolute;
    top: 0;
    right: 0;
}
.view-btn{
    border: 1px solid  var(--primary-color);
    border-radius: 5px;
    position: relative;
}
.viewcart-btn{
    color: var(--primary-color);
}
.cart-item{
    position: absolute;
    top: -4px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    color: var(--white);
    font-size: 13px;
    background-color: var(--primary-color);
    border: none;
    a{
         color: var(--white);
         text-decoration: none;
         font-size: 12px;
    }
}
.main-list-section{
    li{
        a{
            color: var(--white);
            text-decoration: none;
            font-size: 13px;
        }
    }
}
.all-cat{
    padding: 15px 44px;
}
.all-cat:hover {
    background-color:var(--green-color);
}

.more-cat-list{
    background-color: var(--green-color);   

    border-bottom: none;
       
        margin-left: 55px;
}
.more-cat-section{
    position: absolute;
    top: 52px;
    left:-23px;
    background-color: var(--primary-color);
    width:200px;
    z-index: 9999;
    max-height:0px;
    overflow:hidden;
    transform:translateY(-1px);
    transition:
        max-height .5s ease,
        opacity .3s ease,
        transform .3s ease;
    ul{
        list-style: none;
         li{
            padding: 10px 20px;
            border-bottom: 1px solid #ffffff38;
             a{
                text-decoration: none;
                color: var(--white);
             }
        }
    }
}
.more-cat-list:hover .more-cat-section{
   max-height:445px;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.more-cat-list ul li:hover{
    background-color:  var(--green-color);

}

.more-cat-list ul li:hover a{
     color: var(--white);
}
.cart-counter{
    font-size: 12px;
}

/* header styling end here */