/* ------------------------ Header Section ------------------------ */
    .loader-container{
        position: fixed;
        top:0; left: 0;
        height:100%;
        width: 100%;
        z-index: 10000;
        background:#f7f7f7;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader-container.active{
        display: none;
    }

    .loader-container img{
        height:10rem;
    }


    .loader {
        /* display: block; */
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #27ae60;
    --_m:
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
    }
    @keyframes l3 {to{transform: rotate(1turn)}}





    .header{
        text-transform: capitalize;

    }

    .header button{
        color: var(--black-text);
        font-size: 1.5rem;
        background-color: transparent;
    }
    .header .header-main{
        background:#fff;
        padding: .8rem 3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        width: 100%;
        gap: 3rem;
    }
    
    


    .header .header-main .main-logo-parent{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 24px;
        font-weight: bolder;
        color:var(--green);
        width:max-content;
    }

    .header .header-main .main-logo-image{
        border-radius: 500px;
        display: block;
        height: 40px;

    }

    .searchBox{
        width: 100%;
    }

    /* mobile*/
    .search-form{
        max-width:80%;
        height:3rem;
        border:var(--border);
        overflow: hidden;
        background:#fff;
        align-items: center;
        margin-top: 20px;
        border-radius: var(--round-radius);
        display:flex;
        padding: 0 1rem;
        margin: 0 auto;
        width: 100%;
    }


    .header-main .icons {
        flex-shrink: 0;
        display:grid;
        gap: 2rem;
        place-items: center;
        grid-auto-flow: column; /* Always flow horizontally */
        grid-auto-columns: 1fr; /* Equal width columns */
        height: 100%;
    }
    .header-main .icons a {
        
        height: 100%;
    }

    .header-main .icons #login-btn img {
    height: 100%;
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensures image scales properly */
}
    
    .header-main .icons form {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
}
    
    .header-main .icons #logout-btn {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.header-main .icons #logout-btn img {
    height: 100%;
    width: auto; /* Maintain aspect ratio */
    object-fit: contain;
}

    .search-form input{
        font-size: 1.1rem;
        padding:0 1.2rem;
        height:100%;
        width:100%;
        text-transform: none;
        color:var(--black-text);
        font-style: italic;
    }
    .search-form  button{
        font-size: 1.5rem;
        color:var(--black-text);
        background-color: transparent;

    }
    .search-form button:hover{
        color:var(--green);
    }
    .header .header-main .icons div,
    .header .header-main .icons a{
        font-size: 1.5rem;
        color:var(--black-text);
        cursor: pointer;
    }
    #logout-btn{
        font-size: 1.8rem;
        color:var(--black-text);
        cursor: pointer;

    }
    .header .header-main .icons div:hover,
    .header .header-main .icons a:hover, #logout-btn:hover{
        color:var(--green);
    }

    .cart-header-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5em;
        height: 1.5em;
        padding: 0 0.25em;
        background: red;
        color: white;
        border-radius: 999px;
        font-size: 1rem;
        font-weight: bold;
        line-height: 1;
    }


    .header .header-sub{
        background:var(--green);
    }
    
    .header .header-sub .navbar {
        display: flex;
        gap: 3rem;
        justify-content: center;
    }
    
    
    .header .header-sub a{
        white-space: nowrap;
        color:#fff;
        display: inline-block;
        padding:.5rem 1.5rem;
        font-size: 1.4rem;
    }
    .header .header-sub a.active {
        font-weight: bold;
        background-color: var(--dark-green);
    }

    .header .header-sub a:hover{
        background:var(--dark-green);
    }

    .header .header-sub.header-sub-fixed{
        top:100px;
        left:0;
        right:0;
        z-index: 1000;

    }


    #search-icon{
        /*display: none;*/
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: .7rem;
        font-size: 1.2rem;
        border-radius: 50%;
    }

    @media (max-width:1200px){

        .header .header-main{
            box-shadow: var(--box-shadow);
            position: relative;
        }
        .header .header-main .main-logo-image{
        height: 40px;
        }

   }

    @media (max-width:992px){
        
        .header .header-sub .navbar {
            /* display: flex; */
            gap: 1rem;
            /* justify-content: center; */
        }


        .header .header-main{
            box-shadow: var(--box-shadow);
            position: relative;
        }

        .header .header-main .main-logo-image{
            height: 36px !important;

        }
    }


    @media (max-width:768px){


        .header .header-sub {
            display: none;
        }

        .header .header-main {
            padding: 1rem;
        }

        .header .header-main .main-logo-image{
            height: 32px !important;
        }

        .main-logo-parent{
            font-size: 20px !important;
        }
        .header .header-main .cart-header-icon{
            display: none;
        }
    }




    @media (min-width:576px){
    .header .header-main #search-icon {
        display: none;
    }
    }
    @media (max-width:576px){

        #search-icon{
            display: block;
        }
        #id-search-form-in-header{
            display: none;
        }


    }