.Main{
     background-color: white;
    grid-area: Main;
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(9, auto);
    /* justify-items: center; */
        background-color: white;
     
overflow: hidden;

}

.Main1Cover{
    background-color:#F5F5F4 ;
}

.Main1{
    width: 80%;
    height: 600px;
    background-color: #F5F5F4;
    display: grid;
    grid-template-columns: repeat(2,1fr) ;
    grid-template-columns: repeat(1,auto) ;
overflow: hidden;
   margin: auto;


}

.Main1D1{

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:1fr 1fr ;
display: flex;
height: 100%;
width: 100%;
overflow: hidden;
gap: 120px;
align-items: center;
padding: 60px 0px;
position: relative;
}




.Main1D1Left{
    /* background-color: pink; */
  width: 50%;
height: auto;
}

.Main1D1LeftBtn1{
    font-size:12px ;
    font-weight:400 ;
    line-height:12px ;
    color: white;
    background-color: rgb(14, 165, 233);
display: grid;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;

}

.Main1D1LeftBigText{
    font-size:48px ;
    font-weight:700 ;
    line-height: 58px;
    color: rgb(33, 31, 28);
    margin-top: 30px;
}

.Main1D1LeftSmallText{
    font-size:16px ;
    font-weight:300 ;
    line-height:24px ;
    color:rgb(97, 91, 81) ;
      margin-top: 20px;
}

.Main1D1LeftBtn2{
    font-size: 16px;
    font-weight:400 ;
    line-height: 24px;
    color:rgb(97, 91, 81) ;
border: 1px solid black;
  
      display: grid;
align-items: center;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;

}   



.Main1D1Right{
    top:0;
    right: 0;
     width: 50%;
/* background-color: gray; */
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows:1fr ;
   /* align-content:flex-end; */
 justify-items: flex-end;
 position: absolute;

}

.Main1D1RightPhoto{
    background: url("./FreshCartFurniture/slider-img-1.png");
    height: 40vw;
    width:40vw;
    background-size: 100% 100%;
    position: relative;
}

.Main1D1RightPriceBox{
    position: absolute;
    bottom: 24px;
    right: 153px;
    border: 1px solid hsl(0, 19%, 87%);
    background-color: white;
    padding: 15px;
}

.Main1D1RightPriceBoxHeading{
font-size: 20px ;
font-weight: 500;
line-height: 24px;
color:gb(33, 31, 28) ;
}

.Main1D1RightPriceBoxPriceNameBox{
display: grid;
grid-template-columns: repeat(2,auto);
gap: 10px;
}

.Main1D1RightPriceBoxPrice{
font-size: 14px;
font-weight:600 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
}

.Main1D1RightPriceBoxAddToCart{
font-size: 14px;
font-weight:400 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
}




.Main1D1RightOppositeBtn{
    position: absolute;
     bottom: -10px;
    right: 90px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    color: white;
    gap: 10px;
    
    /* background-color: black; */
}

.Main1D1RightOppositeBtnLeft{
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
 opacity: 0.2;


}
.Main1D1RightOppositeBtnRight{
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;

}


.Main1D1RightOppositeBtnLeft:hover{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}

.Main1D1RightOppositeBtnRight:hover{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}




.Main1D3{
    display: none;
}










.Main1D2{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows:auto ;
display: none;

/* background-color: red; */
height: 100%;
width: 100%;
overflow: hidden;
gap: 120px;
align-items: center;
padding: 60px 0px;

position: relative;
}

.Main1D1Left{
    /* background-color: pink; */
  

}

.Main1D2LeftBtn1{
    font-size:14px ;
    font-weight:700 ;
    line-height:21px ;
    color: rgb(33, 31, 28);

display: grid;
align-items: center;
/* justify-content: center; */
width: 100px;
height: 30px;
width: 50%;
}

.Main1D2LeftBigText{
    font-size:48px ;
    font-weight:700 ;
    line-height: 58px;
    color: rgb(33, 31, 28);
    margin-top: 30px;
}

.Main1D2LeftBigText span{
     font-size:48px ;
    font-weight:700 ;
    line-height: 58px;
    color: rgb(33, 31, 28);
    border-bottom: 4px solid #EAB308;
    margin-top: 30px;
}

.Main1D2LeftSmallText{
    font-size:16px ;
    font-weight:300 ;
    line-height:24px ;
    color:rgb(97, 91, 81) ;
      margin-top: 20px;
      width: 50%;
}

.Main1D2LeftBtn2GBox{
    width: 330px;
    display: grid;
    grid-template-columns: repeat(2,auto);
   
   
}

.Main1D2LeftBtn2{
    font-size: 16px;
    font-weight:400 ;
    line-height: 24px;
    color:white ;
background-color: #211F1C;
  
      display: grid;
align-items: center;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;

}   

.Main1D2LeftBtn3{
    font-size: 16px;
    font-weight:400 ;
    line-height: 24px;
    color:black ;
border: 1px solid black;
  
      display: grid;
align-items: center;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;

}   



.Main1D2Right{
    position: absolute;
    top: 0;
    right: 0;
/* background-color: gray; */
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows:1fr ;
   /* align-content:flex-end; */
 justify-items: flex-end;

}

.Main1D2RightPhoto{
    background: url("./FreshCartFurniture/slider-img-2.png");
    height: 40vw;
    width:40vw;
    background-size: 100% 100%;
    position: relative;
}

.Main1D2RightPriceBox{
    position: absolute;
    bottom: 24px;
    right: 153px;
    border: 1px solid hsl(0, 19%, 87%);
    background-color: white;
    padding: 15px;
}

.Main1D2RightPriceBoxHeading{
font-size: 20px ;
font-weight: 500;
line-height: 24px;
color:gb(33, 31, 28) ;
}

.Main1D2RightPriceBoxPriceNameBox{
display: grid;
grid-template-columns: repeat(2,auto);
gap: 10px;
}

.Main1D2RightPriceBoxPrice{
font-size: 14px;
font-weight:600 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
}

.Main1D2RightPriceBoxAddToCart{
font-size: 14px;
font-weight:400 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
}


.Main1D2RightOppositeBtn{
    position: absolute;
    bottom: -40px;
    right: 220px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    color: white;
    gap: 10px;
    /* background-color: black; */
}

.Main1D2RightOppositeBtnLeft{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
}

.Main1D2RightOppositeBtnRight{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
}






.Main1D3{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows:auto ;
display: none;
/* background-color: red; */
height: 100%;
width: 100%;
overflow: hidden;
gap: 120px;
align-items: center;
padding: 60px 0px;
position: relative;
}

.Main1D1Left{
    /* background-color: pink; */
  width: 50%;
  

}

.Main1D3LeftBtn1{
    font-size:14px ;
    font-weight:700 ;
    line-height:21px ;
    color: rgb(33, 31, 28);

display: grid;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;

}

.Main1D3LeftBigText{
    font-size:48px ;
    font-weight:700 ;
    line-height: 58px;
    color: rgb(33, 31, 28);
    margin-top: 30px;
    width: 500px;
}

.Main1D3LeftBigText span{
     font-size:48px ;
    font-weight:700 ;
    line-height: 58px;
    color: rgb(33, 31, 28);
    border-bottom: 4px solid #EAB308;
    margin-top: 30px;
}

.Main1D3LeftSmallText{
    font-size:16px ;
    font-weight:300 ;
    line-height:24px ;
    color:rgb(97, 91, 81) ;
      margin-top: 20px;

      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 10px;
            width: 50%;

}

.Main1D3LeftSmallTextLine2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 5px;
}

.Main1D3LeftBtn2GBox{
    width: 330px;
    display: grid;
    grid-template-columns: repeat(2,auto);
   
   
}

.Main1D3LeftBtn2{
    font-size: 16px;
    font-weight:400 ;
    line-height: 24px;
    color:white ;
background-color: #211F1C;
  
      display: grid;
align-items: center;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;

}   

.Main1D3LeftBtn3{
    font-size: 16px;
    font-weight:400 ;
    line-height: 24px;
    color:black ;
border: 1px solid black;
  
      display: grid;
align-items: center;
justify-content: center;
width: 150px;
height: 40px;
margin-top: 20px;

}   



.Main1D3Right{
/* background-color: gray; */
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows:1fr ;
   /* align-content:flex-end; */
 justify-items: flex-end;
 position: absolute;
 top: 0;
 right: 0;

}

.Main1D3RightPhoto{
    background: url("./FreshCartFurniture/slider-img-3.png");
    height: 40vw;
    width:40vw;
    background-size: 100% 100%;
    position: relative;
}

.Main1D3RightPriceBox{
    position: absolute;
    bottom: 24px;
    right: 153px;
    border: 1px solid hsl(0, 19%, 87%);
    background-color: white;
    padding: 15px;
}

.Main1D3RightPriceBoxHeading{
font-size: 20px ;
font-weight: 500;
line-height: 24px;
color:gb(33, 31, 28) ;
}

.Main1D3RightPriceBoxPriceNameBox{
display: grid;
grid-template-columns: repeat(2,auto);
gap: 10px;
}

.Main1D3RightPriceBoxPrice{
font-size: 14px;
font-weight:600 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
}

.Main1D3RightPriceBoxAddToCart{
font-size: 14px;
font-weight:400 ;
line-height: 21px;
color:rgb(33, 31, 28) ;
position: relative;
/* background-color: red */
}




.Main1D3RightOppositeBtn{
    position: absolute;
    bottom: -40px;
    right: 220px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    color: white;
    gap: 10px;
    /* background-color: black; */
}

.Main1D3RightOppositeBtnLeft{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
}

.Main1D3RightOppositeBtnRight{
background-color:  #211F1C;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
}




.cirleAniation{
width: 100px;
height: 110px;
/* background-color: green; */
position: relative;
display: grid;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
left: 50%;
top: 95%;
}

.circleRounded{

  
    
    background-color:transparent;
  animation: Rotated 8s linear infinite;
transform-origin: 50% 50%;

z-index: 2;
/* display: none; */
}

.ChairRouded{
   position: absolute;
   left:7px;
   top:11px;    
    z-index: 12;
   /* display: none; */
   
}




.Main1D2LeftBtn3:hover{
    background-color:  #211F1C;
color: white;
cursor: pointer;
}

.Main1D1LeftBtn2:hover{
    background-color:  #211F1C;
color: white;
cursor: pointer;
}





















.Main2{
    width: 100%;
    height: auto;
    background-color: white;
    display: grid;
    grid-template-columns:auto ;
    grid-template-rows:auto auto auto;
justify-items: center;
    
}





.Main2TopTier{
width: 80%;
height: auto;
/* background-color: green; */


display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(1,200px);
margin-top: 30px;
margin-bottom: 70px;

}

.Main2TopTierLeft{
/* background-color: red; */
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;

align-items: flex-end;
}

.Main2TopTierLeft .Main2TopTierLeftdata{
    display: grid;
    gap: 10px;
}

.Main2TopTierLeftBigText{
    font-size: 32px ;
    font-weight: 500;
    line-height:38px ;
    color: rgb(33, 31, 28);
}

.Main2TopTierLeftSmallText{
    font-size:16px ;
    font-weight: 300;
    line-height:24px ;
    color: rgb(97, 91, 81);
}

.Main2TopTierRight{
/* background-color: yellow; */
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
align-items: flex-end;
justify-content: flex-end;
}

.Main2TopTierRightdata{
    display: grid;
column-gap: 15px;
    grid-template-columns: auto auto;
    /* border: 1px solid black; */
    grid-template-rows: auto auto;

}

.Main2TopTierRightLeftArrow{
    border: 1px solid black;
    border-radius: 50%;
    color: gray;
}

.ViewAllBorder{
    width: 0px;
    height: 2px ;
    background-color: black;
}

.Main2TopTierRightTextBtn:hover .ViewAllBorder{
    /* background-color: green; */
     animation: DecreaseWidthViewAll  linear 300ms forwards   ;
}

.Main2TopTier   Rightdata:hover .Main2TopTierRightLeftArrow{
    background-color: black;
    color: white;
}

.Main2MiddleTier{
width: 100%;
height: auto;
background-color: blue;

display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
margin-bottom: 89px;
}

.Main2MiddleTierItemsTier1{
    width: 100vw;
    height: auto;
    background-color: white;
    display: grid;
    grid-template-columns:repeat(8,15vw) ;
    grid-template-rows: 350px;
    gap: 17px;
    overflow:hidden;
    padding: 0px 20px;
}

.Main2MiddleTierItemsTier1Box1{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box2{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box3{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box4{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box5{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box6{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box7{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}

.Main2MiddleTierItemsTier1Box8{
 
    background-color: white;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: auto ;
gap: 16px;
    grid-template-rows: 60% 35%;

}









.Main2MiddleTierItemsTier1Box1IMG{
background-color: white;
background: url("./FreshCartFurniture/product-img-1.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG2{
background-color: white;
background: url("./FreshCartFurniture/product-img-2.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG3{
background-color: white;
background: url("./FreshCartFurniture/product-img-3.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG4{
background-color: white;
background: url("./FreshCartFurniture/product-img-4.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG5{
background-color: white;
background: url("./FreshCartFurniture/product-img-5.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG6{
background-color: white;
background: url("./FreshCartFurniture/product-img-6.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG7{
background-color: white;
background: url("./FreshCartFurniture/product-img-7.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}

.Main2MiddleTierItemsTier1Box1IMG8{
background-color: white;
background: url("./FreshCartFurniture/product-img-8.jpg");
background-size: 100% 100%;
display: grid;
justify-content:flex-end ;
align-content: flex-end;
grid-template-columns: 70%;
grid-template-rows: 30px;
}




.Main2MiddleTierItemsTier1Box1:hover .Main2MiddleTierItemsTier1Box1IMG{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-1.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box2:hover .Main2MiddleTierItemsTier1Box1IMG2{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-2.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box3:hover .Main2MiddleTierItemsTier1Box1IMG3{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-3.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box4:hover .Main2MiddleTierItemsTier1Box1IMG4{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-4.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box5:hover .Main2MiddleTierItemsTier1Box1IMG5{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-5.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box6:hover .Main2MiddleTierItemsTier1Box1IMG6{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-6.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box7:hover .Main2MiddleTierItemsTier1Box1IMG7{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-7.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}

.Main2MiddleTierItemsTier1Box8:hover .Main2MiddleTierItemsTier1Box1IMG8{
    background-color: white;
background: url("./FreshCartFurniture/product-img-hover-9.jpg");
background-size: 100% 100%;
transition: 500ms linear ;

}























.Main2MiddleTierItemsTier1Box1:hover .EyeAddBox{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box2:hover .EyeAddBox2{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box3:hover .EyeAddBox3{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box4:hover .EyeAddBox4{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box5:hover .EyeAddBox5{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box6:hover .EyeAddBox6{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box7:hover .EyeAddBox7{
animation: OPEYEBOX 200ms linear forwards;

}

.Main2MiddleTierItemsTier1Box8:hover .EyeAddBox8{
animation: OPEYEBOX 200ms linear forwards;

}





.Main2MiddleTierItemsTier1Box1:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box2:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom2{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box3:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom3{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box4:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom4{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box5:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom5{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box6:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom6{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box7:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom7{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}

.Main2MiddleTierItemsTier1Box8:hover .Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom8{
width: 0px;
height: 3px;
animation: Main2BorderBottom 300ms linear forwards;
}




.EyeAddBox{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox2{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox3{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox4{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox5{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox6{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox7{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}

.EyeAddBox8{
    background-color: pink;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3px;
opacity: 0;
}




.EyeBox{
    background-color: #1C1A18;
    color:white;
    display: grid;
    grid-template-columns: auto;
  place-content: center;
}

.AddBox{
    background-color: #1C1A18;
    color:white;
    display: grid;
    grid-template-columns: repeat(2,auto);
    align-items: center;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}











.Main2MiddleTierItemsTier1Box1Content{
background-color: white;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(4,1fr);
}

.Main2MiddleTierItemsTier1Box1ContentLine1{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
  
    /* gap: 100px; */
}

.Main2MiddleTierItemsTier1Box1ContentLine1Brand{
    background-color: white;
    font-size:14px ;
    font-weight:500 ;
    line-height:21px ;
    color: rgb(97, 91, 81);
}

.Main2MiddleTierItemsTier1Box1ContentLine1Rating{
    background-color: white;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(1,auto);
    justify-items: flex-end;
}


.Main2MiddleTierItemsTier1Box1ContentLine1RatingRating i{
    color: #eab308;
}

.Main2MiddleTierItemsTier1Box1ContentLine4{
    display: grid;
   grid-template-columns: 10px;
   grid-template-columns: repeat(4,20px);
}

.Main2MiddleTierItemsTier1Box1ContentLine4Box2{
color: #16A34A;
}

.Main2MiddleTierItemsTier1Box1ContentLine4Box3{
color: #DC2626;
position: relative;
}

.Main2MiddleTierItemsTier1Box1ContentLine4Box3BB{
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
}

.Main2MiddleTierItemsTier1Box1ContentLine4Box4{
color: #0EA5E9;
}

.Main2MiddleTierItemsTier1Box1ContentLine3TwoLines{
    display: grid;
    grid-template-columns: repeat(2,60px);
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom2{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom3{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom4{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom5{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom6{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom7{
    width: 0px;
    height: 3px;
    background-color: black;
}

.Main2MiddleTierItemsTier1Box1ContentLine2BorderBottom8{
    width: 0px;
    height: 3px;
    background-color: black;
}




.BoxBlack{
    color: black;
}
.BoxGreen{
    color: #16A34A;
}
.BoxRed{
    color: #DC2626;
}
.BoxSkyBlue{
    color: #0EA5E9;
}

.Main2DownTier{
width: 100%;
height: auto;
/* background-color: pink; */
display: grid;
grid-template-columns:100%;
grid-template-rows: auto;
padding: 0px 10px 0px 200px;
margin-bottom: 100px;
}

.boxeshhhss{
    display: grid;
    grid-template-columns: 80% 9%;
    /* background-color: green; */
    align-items: center;
    gap: 10px;
}

.Main2DownTierLeftLine{
    width: 100%;
    height: 5px;
    background-color: #BFBFBF;
    display: grid;
    grid-template-columns: repeat(1,1fr);
}

.LineAniWali{
    width: 30%;
    background-color: black;
    
}

.ch{
    background-color: green;
}

.AddWidth{
    animation:AddWidth 1s linear forwards ;
}

.AddWidth2{
    animation:AddWidth2 1s linear forwards ;
}

.AddWidthLeftBtn{
    animation:AddWidthLeftBtn 1s linear forwards ;
}

.AddWidthLeftBtn2{
    animation:AddWidthLeftBtn2 1s linear forwards ;
}



.Main2DownTierRightCirCles{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}


.Main2DownTierLeft{
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 50%;
display: grid;
place-items: center;
}

.Main2DownTierRight{
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 50%;
display: grid;
place-items: center;
}

.Main2DownTierLeftLine{
    /* border: 1px solid black; */
}

 /* .AnimationLeft{
    animation: TRLeft linear 3s ;
} */




.fixedTranslteLeft1{
    animation: TRLeft linear 1s forwards ;
}
.fixedTranslteLeft2{
     animation: TRLeft2 linear 1s forwards ;
}


 

.fixedTranslteRight1{
    animation: TRRight1 linear 1s forwards ;
}
.fixedTranslteRight2{
     animation: TRRight2 linear 1s forwards ;
} 
     
.Main3{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
background-color: white;
margin-bottom: 100px;
overflow: hidden;
}

.scrollPage{
  
height: 160px;
display: grid;

grid-template-columns: repeat(10,auto);
overflow: hidden;

}


.scrollPageBox1{
    display: grid;
    grid-template-columns:2200px;
    
animation: tranX 30s linear infinite;
font-size: 128px;
line-height: 154px;
color: rgb(33, 31, 28);
font-weight: 700;
}












.Main4{
    width: 110%;
    height: 110vh;
    background-color: white;
    background: url("./FreshCartFurniture/shop-the-look-img-big.jpg");

    background-size: 100% 100%;
    position: relative;
    background-position: left;
}

.Main4Circle1{
    width: 40px;
    height: 40px;
    background-color: white;
    
    top: 100px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    
}

.Main4Main1box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 165px;
    top: 488px;
}


.BoredBox{
  height: 60px;
  width: 60px;
  border: 10px solid #ffffff17;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  position: relative;

  border-radius: 50%;
  animation: ExpandBorder 2s linear infinite forwards;
  
}



.Main4Circle2{
    width: 40px;
    height: 40px;
    background-color: white;
    
    top: 100px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    
}

.Main4Main2box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 273px;
    top: 159px;
}


.BoredBox{
  height: 60px;
  width: 60px;
  border: 10px solid #ffffff17;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  position: relative;

  border-radius: 50%;
  animation: ExpandBorder 2s linear infinite forwards;
  
}



.Main4Circle3{
    width: 40px;
    height: 40px;
    background-color: white;
    
    top: 100px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    
}

.Main4Main3box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    align-items: center;
    justify-content: center;
      position: absolute;
    left: 800px;
    top: 50px;
}


.BoredBox{
  height: 60px;
  width: 60px;
  border: 10px solid #ffffff17;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  position: relative;

  border-radius: 50%;
  animation: ExpandBorder 2s linear infinite forwards;
  
}


.Main4Circle4{
    width: 40px;
    height: 40px;
    background-color: white;
    
    top: 100px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    
}

.Main4Main4box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1028px;
    top:500px;
}


.BoredBox{
  height: 60px;
  width: 60px;
  /* border: 10px solid #ffffff17; */
  background-color:#ffffff17 ;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  position: relative;

  border-radius: 50%;
  animation: ExpandBorder 2s linear infinite forwards;
  
}


.Main4Circle5{
    width: 40px;
    height: 40px;
    background-color: white;
    
    top: 100px;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    
}

.Main4Main5box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1243px;
    top: 155px;
}


.BoredBox{
  height: 60px;
  width: 60px;
  border: 10px solid #ffffff17;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  animation: ExpandBorder 2s linear infinite forwards;
}






@keyframes ExpandBorder {
0%{
height: 60px;
  width: 60px;
}
50%{
height: 70px;
  width: 70px;
}
100%{
height: 60px;
  width: 60px;
}
}


.Main4Circle1:hover{
    background-color:rgba(255, 255, 255, 0.87) ;
}


.Main4Circle2:hover{
    background-color:rgba(255, 255, 255, 0.87) ;
}


.Main4Circle3:hover{
    background-color:rgba(255, 255, 255, 0.87) ;
}


.Main4Circle4:hover{
    background-color:rgba(255, 255, 255, 0.87) ;
}


.Main4Circle5:hover{
    background-color:rgba(255, 255, 255, 0.87) ;
}



.Main4Main1boxclickBox{
    position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    right: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
}

.Main4Main1boxclickBox1{
    position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    right: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
    opacity: 0;
}


.Main4Main1boxclickBox2{
    position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    left: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
        opacity: 0;

        /* display: none; */

}
.Main4Main1boxclickBox3{
   position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    right: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
        opacity: 0;


}
.Main4Main1boxclickBox4{
  position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    left: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
        opacity: 0;

        /* display: none; */

}
.Main4Main1boxclickBox5{
    position: absolute;
    width: 250px;
    height: 90px;
    background-color: white;
    left: -230px;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(1,1fr);
    justify-content: center;
    align-items: center;
        opacity: 0;

        /* display: none; */

}




.leftright0box{
  font-size: 30px;
    color: white;
    position: absolute;
    left:-20px;
}

.leftright0box1{
  font-size: 30px;
    color: white;
    position: absolute;
    right:-20px;
}





.Main4Main1boxclickBoxMainBox1{
    width: 85%;
    height: 70%;
/* background-color: red; */
display: grid;
grid-template-columns: 1fr 2.3fr;
grid-template-rows: repeat(1,auto);
margin: auto;
gap: 15px;

}

.Main4Main1boxclickBoxMainBox2{
    width: 85%;
    height: 70%;
/* background-color: red; */
display: grid;
grid-template-columns: 1fr 2.3fr;
grid-template-rows: repeat(1,auto);
margin: auto;
gap: 15px;

}

.Main4Main1boxclickBoxMainBox3{
    width: 85%;
    height: 70%;
/* background-color: red; */
display: grid;
grid-template-columns: 1fr 2.3fr;
grid-template-rows: repeat(1,auto);
margin: auto;
gap: 15px;

}

.Main4Main1boxclickBoxMainBox4{
    width: 85%;
    height: 70%;
/* background-color: red; */
display: grid;
grid-template-columns: 1fr 2.3fr;
grid-template-rows: repeat(1,auto);
margin: auto;
gap: 15px;

}

.Main4Main1boxclickBoxMainBox5{
    width: 85%;
    height: 70%;
/* background-color: red; */
display: grid;
grid-template-columns: 1fr 2.3fr;
grid-template-rows: repeat(1,auto);
margin: auto;
gap: 15px;

}




.Box1{
    background: url("./FreshCartFurniture/shop-room-1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.Box2{
    /* background-color: gray; */
    display: grid;

}

.Box2SmallData{
   font-size: 14px;
    display: grid;
  
    grid-template-columns: repeat(2,auto);
    grid-template-rows: repeat(2,auto);
    /* background-color: pink; */
   
}

.Box2BigData{
    /* background-color: green; */
}









.Main5{
    height: 100vh;
width: 80%;
   background-color: white;
   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows:auto auto;
   margin: auto;
}


.Main5Box1{
    background-color: white;
display: grid;
grid-template-columns: repeat(2,1fr);
}

.Main5Box1Left{
display: grid;
align-items: flex-end;
font-size: 32px;
line-height: 38px;
font-weight: 500;
color: rgb(33, 31, 28);
}

.Main5Box1Right{
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-content: flex-end;
justify-content: flex-end;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgb(33, 31, 28);
gap: 10px;
background-color: white;
}

.Main5Box1Rightarrow{
border: 1px solid black;
display: grid;   
place-content: center;
width: 20px; 
height: 20px;
border-radius: 50%;
color: gray;
}

.Main5Box1Rightarrow:hover{
    background-color: black;
}

.Main5Box1RightViewAll{
    position: relative;
}

.Main5Box1RightViewAllboreder{
position: absolute;
width: 0%;
height: 2px ;
background-color: black;

}

.Main5Box1RightViewAll:hover .Main5Box1RightViewAllboreder{
animation: Main5Box1RightViewAllboreder 200ms linear forwards ;
}

@keyframes Main5Box1RightViewAllboreder {
    0%{
      width: 0%;
height: 2px ;  
    }
    100%{
        width: 100%;
height: 2px ;
    }
}

.Main5Box2{
    /* background-color: green; */
    display: grid;
    grid-template-columns: repeat(5,18%);
    justify-content: space-between;
    height: 60%;
margin-top: 60px;
}

.Main5Box2Box1Box1{
  
   background-color: #ECEBE9;
   border: 1px solid white;
 

   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows: repeat(1,auto);
   align-items: center;
   justify-content: center;
}
.Main5Box2Box1Box2{
  
   background-color: #ECEBE9;
   border: 1px solid white;
 

   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows: repeat(1,auto);
   align-items: center;
   justify-content: center;
}
.Main5Box2Box1Box3{
  
   background-color: #ECEBE9;
   border: 1px solid white;
 

   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows: repeat(1,auto);
   align-items: center;
   justify-content: center;
}
.Main5Box2Box1Box4{
  
   background-color: #ECEBE9;
   border: 1px solid white;
 

   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows: repeat(1,auto);
   align-items: center;
   justify-content: center;
}
.Main5Box2Box1Box5{
  
   background-color: #ECEBE9;
   border: 1px solid white;
 

   display: grid;
   grid-template-columns: repeat(1,auto);
   grid-template-rows: repeat(1,auto);
   align-items: center;
   justify-content: center;
}








.Main5Box2Box1Box1IMG{
  background: url("./FreshCartFurniture/product-img-1.jpg");
   width: 150px;
   height: 170px;
   background-size: 100% 100%;
}
.Main5Box2Box1Box2IMG{
  background: url("./FreshCartFurniture/product-img-2.jpg");
   width: 150px;
   height: 170px;
   background-size: 100% 100%;
}
.Main5Box2Box1Box3IMG{
  background: url("./FreshCartFurniture/product-img-10.jpg");
   width: 150px;
   height: 170px;
   background-size: 100% 100%;
}
.Main5Box2Box1Box4IMG{
  background: url("./FreshCartFurniture/product-img-7.jpg");
   width: 150px;
   height: 170px;
   background-size: 100% 100%;
}
.Main5Box2Box1Box5IMG{
  background: url("./FreshCartFurniture/product-img-8.jpg");
   width: 150px;
   height: 170px;
   background-size: 100% 100%;
}









.Main5Box2Box1Box1Content{
    color: black;
     width: 150px;
     /* background-color: pink; */
     display: grid;
     justify-content: center;
          grid-template-columns: repeat(2,auto);

}
.Main5Box2Box1Box2Content{
    color: black;
     width: 150px;
     /* background-color: pink; */
     display: grid;
     justify-content: center;
          grid-template-columns: repeat(2,auto);

}
.Main5Box2Box1Box3Content{
    color: black;
     width: 150px;
     /* background-color: pink; */
     display: grid;
     justify-content: center;
          grid-template-columns: repeat(2,auto);

}
.Main5Box2Box1Box4Content{
    color: black;
     width: 150px;
     /* background-color: pink; */
     display: grid;
     grid-template-columns: repeat(2,auto);
     justify-content: center;
}
.Main5Box2Box1Box5Content{
    color: black;
     width: 150px;
     /* background-color: pink; */
     display: grid;
     justify-content: center;
          grid-template-columns: repeat(2,auto);

}

.Main5Box2Box1Box1ContentArrow{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
   
    margin-left: 10px;
    border: 1px solid black;
    border-radius: 50%;
    /* background-color: white; */
    color: black;
   font-size: 12px;
   transform: translateX(0);
    opacity: 0; 
     transition: transform 100ms ease,
      opacity 100ms ease;
}

.Main5Box2Box1Box1ContentData{
    transform: translateX(0);
transition:tranform 100ms ease ;
}


.Main5Box2Box1Box1ContentArrow:hover{
    background-color: black;
    color: white;
}

.Main5Box2Box1Box1:hover .Main5Box2Box1Box1ContentArrow{
  transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main5Box2Box1Box1:hover .Main5Box2Box1Box1ContentData{
   transform: translateX(-10px);
   

}




.Main5Box2Box1Box2:hover .Main5Box2Box1Box1ContentArrow{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main5Box2Box1Box2:hover .Main5Box2Box1Box1ContentData{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}



.Main5Box2Box1Box3:hover .Main5Box2Box1Box1ContentArrow{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main5Box2Box1Box3:hover .Main5Box2Box1Box1ContentData{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}



.Main5Box2Box1Box4:hover .Main5Box2Box1Box1ContentArrow{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main5Box2Box1Box4:hover .Main5Box2Box1Box1ContentData{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}



.Main5Box2Box1Box5:hover .Main5Box2Box1Box1ContentArrow{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main5Box2Box1Box5:hover .Main5Box2Box1Box1ContentData{
   transform: translateX(-10px);
   transition: 100ms ;
opacity: 1;
}

.Main6Cover{
    width: 100%;
    height: 100vh;
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(1,80%);
    grid-template-rows: repeat(1,100%);
    justify-content: center;
       margin-bottom: 100px;
       /* overflow: hidden; */

}

.Main6{
    /* background-color: pink; */
    grid-template-columns: auto;
    display: grid;
grid-template-columns: repeat(1,100%);
grid-template-rows: 15% 85%;
}


.Main6Container1{
    /* background-color: green; */
    font-size: 32px;
    line-height: 38px;
    font-weight: 500;
    color: rgb(33, 31, 28);
}

.Main6Container2{
    /* background-color: gray; */
 
   display: grid;
   grid-template-columns: 50% 50%;

}

.Main6Container2Box1{
    /* background-color: purple; */
    background: url("./FreshCartFurniture/shop-room-1.jpg");
    background-size: 100% 100%;
    position: relative;
    /* overflow: hidden; */
}

.Main6Container2Box2{
   display: grid;
grid-template-columns: repeat(1,65%);
grid-template-rows: repeat(1,100%);
/* overflow: hidden; */
/* background-color: red; */
justify-content: space-around;
}

.Main6Container2Box2Img{
    background: url("./FreshCartFurniture/shop-room-1.jpg");
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-color: pink;

}

.Main6Container2Box2Content{
    /* background-color: green; */
    display: grid;
    grid-template-columns: repeat(1,auto);
    grid-template-rows: 20% 28% 30%;
}




.Main6Container2Box2ContentLine1{
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(2,auto);
    align-items: center;
  
}

.Main6Container2Box2ContentLine1Left{
    /* background-color: purple; */
  font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: rgb(97, 91, 81);
}

.Main6Container2Box2ContentLine1Right{
    /* background-color: orange; */
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-self: end;
}

.Main6Container2Box2ContentLine1RightRating{
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: rgb(97, 91, 81);
}

.Main6Container2Box2ContentLine1RightStar{
    color: #EAB308;
}

.Main6Container2Box2ContentLine2{
    /* background-color: blue; */
}






.Main6Container2Box2ContentArrow{
    /* background-color: pink; */
    display: grid;
    grid-template-columns: repeat(2,auto);
}

.Main6Container2Box2ContentArrowLeft{
border: 1px solid  black;
width:35px;
height:35px;
border-radius: 50%;
display: grid;
align-items: center;
justify-content: center;
font-size: 20px;
justify-self: flex-end;
margin-right: 5px;
/* background-color: white; */
}

.Main6Container2Box2ContentArrowRight{
    border: 1px solid  black;
    width:35px;
    height:35px;
border-radius: 50%;
display: grid;
align-items: center;
justify-content: center;
font-size: 20px;
margin-left: 5px;
/* background-color: white; */
}




.Main6Container2Box1Circlle1{
background-color:white ;
width: 35px;
height: 35px;
border-radius: 50%;
display: grid;
align-items:center;
justify-content:center;


}



.Main6Container2Box1Circlle1Cover{
background-color: rgba(255, 255, 255, 0.212);
width:35px;
height:35px;
display: grid;
align-items: center;
justify-content: center;

border-radius:50%;
animation: BroadBoreder linear 4s infinite  ;

}

@keyframes BroadBoreder {
    0%{
      width:65px;
height:65px;
    }
    50%{
   width:50px;
height:50px;
    }
    100%{
     width:65px;
height:65px;
    }
}

.CoverCoverCover1{
    /* background-color: pink; */
width: 70px;
    height: 70px;
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;

  
}







.Main6Container2Box1Circlle2{
background-color:white ;
width: 35px;
height: 35px;
border-radius: 50%;
display: grid;
align-items:center;
justify-content:center;


}

/* .Main6Container2Box1Circlle2:hover{
    background-color: black;
    color: white;
} */



.Main6Container2Box1Circlle2Cover{
background-color: rgba(255, 255, 255, 0.212);
width:35px;
height:35px;
display: grid;
align-items: center;
justify-content: center;

border-radius:50%;
animation: BroadBoreder linear 4s infinite  ;

}

@keyframes BroadBoreder {
    0%{
      width:65px;
height:65px;
    }
    50%{
   width:50px;
height:50px;
    }
    100%{
     width:65px;
height:65px;
    }
}

.CoverCoverCover2{
    /* background-color: green; */
    width: 70px;
    height: 70px;
    display: grid;
    align-items: center;
    justify-content: center;

}

.FullCirAndDetBox1{
    width: 340px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-content: space-between;
    align-items: center;
    position: absolute;
        top: 230px;
    left: 300px;
}   



.FullCirAndDetBox2{
    width: 130px;
    height: 100px;
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 230px;
    left:120px;
}   

.FullWidth{
    width: 340px;
}

.DetailBox1{
    width: 260px;
    height: 80px;
    background-color: white;
    /* border: 1px solid black; */
    position: absolute;
    right: 21px;
    display: grid;
justify-content: center;
    align-content: center;
    grid-template-columns: 25% 65%;
    grid-template-rows: 80%;
}

.DetailBox2{
    width: 260px;
    height: 80px;
    background-color: white;
    /* border: 1px solid black; */
    position: absolute;
    right: 21px;
    display: grid;
justify-content: center;
    align-content: center;
    grid-template-columns: 25% 65%;
    grid-template-rows: 80%;
}

.DetailBox2Arrow{
font-size: 20px;
top: 40%;
position: absolute;
left: -13px;
color: white;
}

.DetailBox2ImgBox{
    /* background-color: red; */
   background: url("./FreshCartFurniture/shop-room-1.jpg");
   background-size: 100% 100%;

}

.DetailBox2Detail{
    /* background-color: blue; */
    display: grid;
    grid-template-columns: repeat(1,auto);
    padding-left: 10px;
}

.DetailBox2DetailLine1{
    display: grid;
/* background-color: red; */
align-items: center;

}

.DetailBox2DetailLine2{
display: grid;
grid-template-columns: repeat(2,auto);
/* background-color: blue; */
align-items: center;

}

.DetailBox2DetailLine2Line1{

}

.DetailBox2DetailLine2Line2{

}

.displayNone{

    display: none;
}

.Main6Container2Container1{
     display: grid;
    grid-template-columns: 100% ;
    grid-template-rows: 60% 40%;
    justify-content: space-around;
    /* background-color: pink; */
    /* animation: SliderSmallImg 3s infinite ; */
    /* overflow: hidden; */

}



/* @keyframes SliderSmallImg {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0);
    }
}  */



.AllBoxes{
    display: grid;
    grid-template-columns: repeat(2,100%);
    grid-template-rows: repeat(2,100%);
overflow: hidden;
    /* background-color: gray; */
    gap: 100px;
}

.disabledLeft,.disabledRight{
    opacity: 0.2;
}
















.Main7Cover{
    width: 100%;
    height: 90vh;
    background-color: #211F1C;
    display: grid;

   grid-template-columns: repeat(1,40%);
   grid-template-rows: repeat(1,70%);
   align-content: center;
   justify-content: center;
}

.Main7{
  
    /* background-color: gray; */
display: grid;
grid-template-columns: repeat(1,auto);
grid-template-rows: 70% 20% 10%;

}

.Main7Boxes{
/* background-color: red; */
display: grid;
justify-items: center;
/* animation: Ani3Box 15s infinite ; */

}

.Main7BoxesContent{
font-size: 32px;
line-height: 48px;
color: white;
font-weight: 300;
text-align: center;
}

.Main7BoxesProfiles{
display: grid;
justify-items: center;
grid-template-columns: 100px ;

/* background-color: purple; */
}

.Main7BoxesProfilesImg{
    width: 50px;
    height: 50px;
background: url("./FreshCartFurniture/avatar-13.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.Main7BoxesProfilesImg2{
    width: 50px;
    height: 50px;
background: url("./FreshCartFurniture/avatar-14.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.Main7BoxesProfilesImg3{
    width: 50px;
    height: 50px;
background: url("./FreshCartFurniture/avatar-15.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.Main7BoxesProfilesName{
font-size: 16px;
line-height: 16px;
color: white;
font-weight: 300;
}

.Main7Arrows{
/* background-color: blue; */
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
gap: 30px;
}

.Main7ArrowsLeft{
border: 1px solid white;
color: white;
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 20px;
justify-content: center;
align-items: center;
/* background-color: pink; */
}

.Main7ArrowsDots{
    display: grid;
    grid-template-columns: repeat(3,auto);
    justify-content: center;
align-content: start;
gap: 5px;
/* background-color: red; */
}

.Main7ArrowsDots1{
    color: white;
}

.Main7ArrowsDots2{
    color: rgba(255, 255, 255, 0.349);

}

.Main7ArrowsDots3{
    color: rgba(255, 255, 255, 0.349);

}



.Main7ArrowsRight{
border: 1px solid white;

color: white;
width: 40px;
height: 40px;
display: grid;

border-radius: 50%;
font-size: 20px;
justify-content: center;
align-items: center;
/* background-color: green; */
}

.AllBoxesMain7{
    /* background-color: red; */
display: grid;
justify-items: center;
grid-template-columns: repeat(3,100%);
overflow: hidden;
}

/* @keyframes Ani3Box {
    0%{
        transform: translate(0);
    }

    50%{
        transform: translateX(-100%);
    }
    
     75%{
        transform: translateX(-200%);
    }

     100%{
        transform: translateX(0);
    }
} */