/*================= header image part  ===============*/
#head-img img{
    width: 100vw;
    height: 980px;
    margin: 0px;
}

/*=================== Colletions-Part  =================*/
#collections{
width: 1300px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 150px;
}

#collections div{
 display: grid;
 grid-template-columns: repeat(3,1fr);
 grid-gap: 40px;
 margin-top: 20px;
}
.box{
position: relative;
width: 660px;
height: 660px;
display: flex;
justify-content: center;
align-items: center;
}
/* .box::before{
content: "";
background: url("//cdn.shopify.com/s/files/1/0571/9906/7323/collections/jeff-sheldon-Lj1S1_KD61k-unsplash_180x.jpg?v=1637929873 180w 180h") no-repeat center center/cover;
position: absolute;
top: 0px;
left: 0px;
width: 660px;
height: 660px;
z-index: -1;
} */
.box img{
position: absolute;
top: 0px;
left: 0px;
width: 660px;
height: 660px;
z-index: -1;
}
.box h1{
position: absolute;
width: 660px;
color: white;
}
.box:hover{
background-color: #000; 
opacity: 0.5;
color: black;

}

/*============== RIDING GEARS SECTION=============== */

#riding-gears{
margin-top: 190px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contents{
  padding: 90px;
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 20px;
 margin-top: 20px;
}

.item-boxs img{
width: 450px;
height: 450px;
}

.item-boxs button{
width: 160px;
height: 40px;
background-color: white;
margin-top: -50px;
}
.item-boxs button:hover{
background-color: rgb(214, 212, 212);
}

#view_all_btn,span{
background-color: rgb(80, 78, 78);
color: white;
width: 180px;
height: 50px;
margin: 120px 0px;
}

/* ==== Bottom Image Section ======  */
#bottom-img{
position: relative;
height:1000px;
display: flex;
justify-content: center;
align-items: center;
}
#bottom-img img{
position: absolute;
top: 0px;
left: 0px;
height: 1000px;
width: 100vw;
z-index: -1;
}
#bottom-img button,span{
background-color: gray;
padding: 15px 22px;
color: white;
}

/* ===== Footer Section ===== */
#home-Footer{
  /* margin-top: -750px; */
}