.hero{
    height: 50vh;
    background-image: var(--hero_imgs);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 7rem;


}

.hero-containt{
    height: 100%;
    justify-content:flex-end;
    padding-left: 200px;
    
    }

.hero-containt span{
    color: var(--primary-clr);
}
    

.hero-containt h3{
    color: var(--white-clr);
     background: linear-gradient(
        60deg,
        #1a1a1a,   /* very dark gray */
        #333333,   /* dark gray */
        #4d4d4d,   /* medium-dark gray */
        #262626    /* another dark gray */
    );
    font-size: 1rem;    
    font-weight: 400;
    line-height: 2rem;
}
.hero-containt h1{
    color: var(--white-clr);
     background: linear-gradient(
        90deg,
        #1a1a1a,   /* very dark gray */
        #333333,   /* dark gray */
        #4d4d4d,   /* medium-dark gray */
        #262626    /* another dark gray */
    );
    font-size: 2rem;
    font-weight: 600;
    line-height: 3rem;
}
.hero-containt h4{
    color: var(--white-clr);
     background: linear-gradient(
        90deg,
        #1a1a1a,   /* very dark gray */
        #333333,   /* dark gray */
        #4d4d4d,   /* medium-dark gray */
        #262626    /* another dark gray */
    );
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 4rem;
}
.hero-containt button{
    
    background-color: var(--primary-clr);
        color: var(--white-clr);
    font-size: 1.1rem;
    font-weight: bold;
    padding: .6rem 1.2rem;
    text-transform: uppercase;
    border: dotted;
    border-radius: 50px;
 }

.hero-containt button:hover{
    cursor: pointer;
background-color: var(--light-black);
    transition: all .10s ease-in-out;

}

/*!--category--*/


.category-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:2.1rem;
    
}

.text_title{
text-align: center;
font-size: 1.5rem;
color: var(--light-black);
text-transform: uppercase;
font-weight: 500;
line-height: 2rem;
}
.title_line{
    background-color: var(--primary-clr);
    width: 10rem;
    height: .07rem;
    color: var(--primary-clr);
    margin: auto;

}
.category:nth-child(1) , .category:nth-child(4){
    grid-row: 1/3;
    height: 50vh;
}
.category:nth-child(2){
    grid-row: 1/2;
        height: 25vh;
}
.category:nth-child(3){
        height: 20vh;
}

.category{
    position: relative;
    overflow: hidden;
}
.category button{
color: var(--black-clr);
background-color: var(--white-clr);
border-radius: 20px;
padding: 5px 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .5s ease-in-out;
cursor: pointer;
font-weight: 500;
}
.category button:hover{
    background-color: var(--primary-clr);
    color: var(--white-clr);
}
.category:hover img{
    transform: scale(1.1);
}

.category::before{
    content:'';
    position: absolute;
    width: 0;
    height: 100%;
    background-color: var(--white-clr);
    opacity: 0.2;
    transition: all .8s ease-in-out;
}
.category:hover::before{
width: 200%;
}

/* sale data */

.sale::before{
    content: 'New';
    background-color: var(--tag-clr);
    position: relative;
    top: 1px;
    left:-90px;
    padding: 0.3rem 0.4rem;
z-index: 10;
color: var(--secondary-clr);
font-weight: bold;
    
}
.sales-img{
    height: 40vh;
    background-image:var(--sale_imgs);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

}
.sales-img_contents{
    text-transform: uppercase;
         background: linear-gradient(
        60deg,
        #1a1a1a,   /* very dark gray */
        #333333,   /* dark gray */
        #4d4d4d,   /* medium-dark gray */
        #262626    /* another dark gray */
    );
    position:absolute;
text-align: left;
top:20%;
left:25%;
color: white;
}
.sales-img_contents h3{
    font-size: .95rem;
font-weight: 500;
line-height: 1rem;
padding: 5px;
color: white;
}
.sales-img_contents h1{
    font-size: 1.2rem;
font-weight: 600;
line-height: 2rem;
padding: 10px;
color: var(--light-black);
color: white;
}

.sales-img_contents h4{
font-size: 1rem;
font-weight: 500;
line-height: 1rem;
padding: 5px;
color: var(--light-black);
color: white;
}
.sales-img_contents button{
    margin-top: 1rem;
background-color: var(--primary-clr);
color: var(--white-clr);
cursor: pointer;
width: 10rem;
height: 3rem;
line-height: 3rem;
text-transform: uppercase;
font-size: .95rem;
font-weight: 500;
border-radius: 10px;
transition: all .5s ease-in-out;
border: 1px dashed var(--white-clr);
}

.sales-img_contents button:hover{
background-color: var(--light-black);
color: var(--white-clr);
}

.sale-card-container{
    text-align: center;
    justify-content: center;
    gap: 0.7rem;
    top:0;
    left: 0;
    background-color: var(--white-clr);
    border: 1px solid var(--secondary-clr);

    
}

.sale-card{
    border: 1px solid black;
    box-shadow: 1px 1px 14px 2px var(--light-black);
    transform: scale(0.8);
    
    
}
.sale-card:hover{

cursor: pointer;
border: 1px solid var(--primary-clr);
}
.sale-card:hover button{
display: block;
}
.sale_title{

margin-bottom: 1rem;
    text-align: center;
    font-size: 1rem;
    width: 300px;
    height: 30px;
    overflow: auto;
    text-transform: uppercase;
font-weight: bold;
    
}
.sale_desc{
 
margin-left:1rem;
    font-size: 1rem;
    line-height: 1rem;
    width: 400px;
    height: 60px;
    overflow: auto;
    text-align: left;

}
.best-sales_title{
    text-align: center;
    text-transform: uppercase;
font-size: 1.5rem;
font-weight: 500;

}
.sales-add-to-cart{
    display: block;
    width: 100%;
    height: 3rem;
    left: 0;
    right: 0;
    bottom: 3px;
    position: relative;
    cursor: pointer;
    background-color: var(--primary-clr);
    color: var(--white-clr);
    border-radius: 10px;
    text-transform: uppercase;
    display: none;
}
.sales-add-to-cart:hover{
background-color: var(--tag-clr);
    color: var(--white-clr);
 
}

.shipping_container{
    background-color: var(--secondary-clr);   
}
.shipping_card{
    text-align: center;
gap: 1rem;
}
.shipping_content{
margin-block: 1rem;

}


.shipping_title{
line-height: 3rem;
}
.shipping_icon{
    color: var(--primary-clr);
line-height: 2rem;

}


.shipping_desc{
    width: 20rem;
    height: 5rem;
line-height: 1.3rem;
    overflow: auto;
}
.latest_news_title{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--light-black);
    text-transform: uppercase;
    
}  

.img_size{
height: 7rem;
}

.blog_container{
    opacity: 0.7;
text-align: center;
justify-content: center;
gap: 1rem;

}

.blog_card{
height: 250px;   
width: 30%;    
border: 1px solid black;
margin-block: 1rem;
position: relative;

}



.blog_card::before{
    content: '';
    position: absolute;
    background-color: var(--black-clr);
    width: 0;
    height: 100%;
    top:0;
    left: 0;
    z-index: 3;
    opacity: 0.6;
    transition: all .5s ease-in-out;
    color: white;
}
.blog_card:hover::before{
    width: 100%;
    color: white;
}
.blog_contents{
    cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%,-50%);
margin: auto;
z-index: 4;
color: var(--secondary-clr);


}
.blog_contents a{
    text-decoration: underline;
    text-underline-offset: 7px;
    color: var(--black-clr);
}
.blog_main_title{
    height:10rem;
    overflow: auto;
}

.blog_card:hover .blog_contents,
.blog_card:hover .blog_contents a,
.blog_card:hover .blog_contents p{
  color: white !important;
}

@media screen and (max-width:800px) {
 /*hero container */
     .hero{
    margin-top: 5rem;
}

.hero-containt{

    padding-left: 10px;
    
    }

.hero-containt span{
    color: var(--primary-clr);
    font-size: 1rem;
}
    

.hero-containt h3{
    
    font-size: 0.8rem;    
    font-weight: 400;
    line-height: 2rem;
}
.hero-containt h1{
        font-size: 1rem;
    font-weight: 500;
    line-height: 3rem;
}
.hero-containt h4{
    
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 2rem;
}
.hero-containt button{
    
        font-size: 0.7rem;
    font-weight: bold;
    padding: .2rem 0.6rem;
    }
/*category container */

.category-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:0.9rem;
    
}

.text_title{
text-align: center;
font-size: 1rem;
color: var(--light-black);
text-transform: uppercase;
font-weight: 500;
line-height: 1.6rem;
}
.title_line{
    background-color: var(--primary-clr);
    width: 10rem;
    height: .07rem;
    color: var(--primary-clr);
    margin: auto;

}



.category button{
color: var(--black-clr);
background-color: var(--white-clr);
border-radius: 10px;
padding: 3px 3px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .5s ease-in-out;
cursor: pointer;
font-weight: 400;
font-size:0.6rem;
    
}

.sales-img_contents{
    text-transform: uppercase;
         background: linear-gradient(
        60deg,
        #1a1a1a,   /* very dark gray */
        #333333,   /* dark gray */
        #4d4d4d,   /* medium-dark gray */
        #262626    /* another dark gray */
    );
    position:absolute;
text-align: left;
top:5%;
left:10%;
color: white;
}
.sales-img_contents h3{
    font-size: .7rem;
font-weight: 400;
line-height: .7rem;
padding: 5px;
color: white;
}
.sales-img_contents h1{
    font-size: .9rem;
font-weight: 500;
line-height: .9rem;
padding: 10px;
color: var(--light-black);
color: white;
}

.sales-img_contents h4{
font-size: .9rem;
font-weight: 400;
line-height: .9rem;
padding: 10px;
color: var(--light-black);
color: white;
}
.sales-img_contents button{
    margin-top: 1rem;
background-color: var(--primary-clr);
color: var(--white-clr);
cursor: pointer;
width: 6rem;
height: 2rem;
line-height: .8rem;
text-transform: uppercase;
font-size: .8rem;
font-weight: 500;
border-radius: 10px;
transition: all .5s ease-in-out;
border: 1px dashed var(--white-clr);
}

/*sales container */
.sale-card-container{
    text-align: center;
    justify-content: center;
    gap: 0.7rem;
    top:0;
    left: 0;
    background-color: var(--white-clr);
    border: 1px solid var(--secondary-clr);
max-width: 100%;    
}

.sale-card{
    border: 1px solid black;
    box-shadow: 1px 1px 14px 2px var(--light-black);
    transform: scale(0.8);
max-width: 100%;
    
    
}   

.sale_title{

margin-bottom: 1rem;
    text-align: center;
    font-size: 1rem;
    width: 300px;
    height: 30px;
    overflow: auto;
    text-transform: uppercase;
font-weight: bold;
    
}
.sale_desc{
 
margin-left:1rem;
    font-size: 1rem;
    line-height: 1rem;
    width: 300px;
    height: 60px;
    overflow: auto;
    text-align: left;

}

.blog_container{
    opacity: 0.7;
text-align: center;
justify-content: center;
gap: 1rem;

}

.blog_card{
height: 150px;   
width: 100%;    
border: 1px solid black;
margin-block: 1rem;
position: relative;

}


.blog_contents{
    cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%,-50%);
margin: auto;
z-index: 4;
color: var(--secondary-clr);


}
.blog_contents a{
    text-decoration: underline;
    text-underline-offset: 7px;
    color: var(--black-clr);
    font-size: 0.7rem;
    font-weight: bold;
    
}
.blog_main_title{
    height:4rem;
    overflow: auto;
}







}