*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Lexend Deca";
}

:root{
    --Family:"Lexend Deca";
    --LightBrown:#211F1C;
}

.Container{
    width: 100%;
    height: auto;
    background-color: red;
    display: grid;
    grid-template-columns: repeat(1 ,minmax(100px,1fr));
    grid-template-rows: 40px 70px auto auto ;
    grid-template-areas:  "SliderAnimationTop"
                          "Nav"
                          "Main" 
                          "Footer" 
    ;

}

.SliderAnimationTop{
    grid-area: SliderAnimationTop;
    display: grid;
    grid-template-columns: 20px 550px 20px 100px;
    grid-template-rows: 40px 40px 40px 40px;
    grid-template-areas: "SliderAnimationTopLeftBtn SliderAnimationTopscrollingBtn SliderAnimationTopRight  SliderAnimationDeleteBtn";
   justify-content: center;
   align-items: center;
   background-color: var(--LightBrown);
   /* position: relative; */
}

.SliderAnimationTopLeftBtn{
grid-area: SliderAnimationTopLeftBtn;
background-color: white;
place-content: center;
border-radius: 50%;
color: black;

height: 20px;
animation: chnageBccLeft 12s infinite;


}

.SliderAnimationTopscrollingBtn{
grid-area: SliderAnimationTopscrollingBtn;
background-color: #211F1C;
color: white;
font-family: var(--Family);
display: grid;
grid-template-columns: repeat(3,550px);
grid-template-rows: repeat(1,40px);
overflow-x: hidden;
overflow-y: hidden;
}

.SliderAnimationTopscrollingBtn .LINE{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows:40px ;
place-content: center;
place-items: center;
  /* border: 1px solid white; */
  font-size: 14px;
  line-height: 36px;
  font-weight: 300;
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 animation: scrollingNow 12s infinite;
}

.SliderAnimationTopRight{
grid-area: SliderAnimationTopRight;
background-color: white;
place-content: center;
color: black;
border-radius: 50%;

height: 20px;
animation: chnageBccRight 12s infinite;
}

.SliderAnimationDeleteBtn{
grid-area: SliderAnimationDeleteBtn;
/* background-color: purple; */
color: white;
display: grid;
justify-content: flex-end;
position: absolute;
right: 100px;
}




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


.Main1D1RightPriceBoxAddToCart:hover .BBAddtoCart{
  animation: DecreaseWidth  linear 300ms forwards   ;
}
.Main1D2RightPriceBoxAddToCart:hover .BBAddtoCart{
  animation: DecreaseWidth  linear 300ms forwards   ;
}
.Main1D3RightPriceBoxAddToCart:hover .BBAddtoCart{
  animation: DecreaseWidth  linear 300ms forwards   ;
}