*{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}       

/* Header Ends */
#container{
   display: grid;
   margin:auto;
   width: 90%;
   grid-template-columns: repeat(12,1fr);
   grid-template-rows: 500px 150px 120px 200px 650px 40px 420px 50px 40px 300px 50px 700px;
   gap: 20px;
   grid-template-areas: 
   "b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1 b1"
   "b2 b2 b2 b2 b2 b2 b2 b2 b2 b2 b2 b2"
   "br1 br1 br2 br2 br3 br3 br4 br4 br5 br5 br6 br6"
   "br7 br7 br8 br8 br9 br9 br10 br10 br11 br11 br12 br12 "
   "s1 s1 s1 s1 s2 s2 s2 s2 s3 s3 s3 s3 "
   "tN tN tN tN tN tN tN tN tN tN tN tN "
   "i1 i1 i1 i2 i2 i2 i3 i3 i3 i4 i4 i4"
   "sM sM sM sM sM sM sM sM sM sM sM sM"
   "cP cP cP cP cP cP cP cP cP cP cP cP"
   "dI dI dI dI dI dI dI dI dI dI dI dI"
   "vA vA vA vA vA vA vA vA vA vA vA vA"
   "in in in in in in in in in in in in";
}
.box1{
   grid-area: b1;
   margin-right: 40px ;
   margin-top: 20px ;
   
}
.box2{
   
   grid-area: b2;
   text-align: center;
  
}
.box2>h2{
   color: gray;
   font-weight: normal;
}
.brands1{
   grid-area: br1;
   
}
.brands2{
   grid-area: br2;
   
}
.brands3{
   grid-area: br3;
   
}
.brands4{
   grid-area: br4;
   
}
.brands5{
   grid-area: br5;
   
}
.brands6{
   grid-area: br6;
   
}
.brands7{
   grid-area: br7;
   
}
.brands8{
   grid-area: br8;
   
}
.brands9{
   grid-area: br9;
   
}
.brands10{
   grid-area: br10;
   
}
.brands11{
   grid-area: br11;
   
}
.brands12{
   grid-area: br12;
   
}
.brands1:hover ,.brands2 :hover ,.brands11:hover ,.brands3 :hover ,.brands4:hover ,.brands5 :hover ,.brands6:hover ,.brands7 :hover ,.brands8:hover ,.brands9 :hover ,.brands10:hover ,.brands11 :hover ,.brands12 :hover  {
  
      -ms-transform: scale(5); /* IE 9 */
      -webkit-transform: scale(7); /* Safari 3-8 */
      transform: scale(0.5); 
    
}
.sales1
{
   grid-area: s1;
   text-align: center;
color: #1C1C1C;
}
.sales3
{
grid-area: s3;
 text-align: center;
 color: #1C1C1C;
}
.sales2
{
grid-area: s2;
 text-align: center;
 color: #1C1C1C;
}
.sales1>a>button
{
   font-size: 16px;
   padding: 7px;
   background-color: white;
   border: 1px solid;
}
.sales2>a>button
{
   font-size: 16px;
   padding: 7px;
   background-color: white;
   border: 1px solid;
}
.sales3>a>button
{
   font-size: 16px;
   padding: 7px;
   background-color: white;
   border: 1px solid;
}
.sales1 > img:hover ,.sales2 > img:hover ,.sales3 > img:hover   {
-ms-transform: scale(0); /* IE 9 */
-webkit-transform: scale(7); /* Safari 3-8 */
transform: scale(0.95); 
}
.sales1>a>button:hover ,.sales2>a>button:hover ,.sales3>a>button:hover ,.shopMore>a>button:hover,.viewAll>a>button:hover{
   -ms-transform: scale(0); /* IE 9 */
   -webkit-transform: scale(7); /* Safari 3-8 */
   transform: scale(0.95); 
}


h4{
   margin-top: -10px;
}
.trendingNow{
   grid-area: tN;
   display: flex;
   
}
.trendStyle{
width: 42%;
height: 3%;
background-color: gray;
 margin-top: 30px;
}
.i1{
   grid-area: i1;
   text-align: center;   
}
.i2{
   grid-area: i2;   
   text-align: center; 
}
.i3{
   grid-area: i3;
   text-align: center;    
}
.i4{
   grid-area: i4;
   text-align: center;    
}
.i1> img:hover ,.i2 > img:hover ,.i3 > img:hover ,.i4 > img:hover   {
   -ms-transform: scale(0); /* IE 9 */
   -webkit-transform: scale(7); /* Safari 3-8 */
   transform: scale(0.95); 
   }
   .sales1>a>button:hover ,.sales2>a>button:hover ,.sales3>a>button:hover{
      -ms-transform: scale(0); /* IE 9 */
      -webkit-transform: scale(7); /* Safari 3-8 */
      transform: scale(0.95); 
   }
.shopMore
{
  grid-area: sM;
  text-align: center;
}
.shopMore>a>button
{
   background-color: white;
   border: 1px solid;
   padding: 10px;
   font-size: 18px;
}
.CommunityPost
{   display: flex;
   grid-area: cP;
   margin-top: 3px;
}
.dummyImg{
grid-area: dI ;
display: flex;
justify-content: space-evenly;
width: 100%;
margin-top: 30px;
}
.dummyImg :hover{
   -ms-transform: scale(0); /* IE 9 */
-webkit-transform: scale(7); /* Safari 3-8 */
transform: scale(0.95); 
}
.viewAll
{
  grid-area: vA;
  text-align: center;
}
.viewAll>a>button
{
   background-color: white;
   padding: 10px 20px 10px 20px;
   font-size: 18px;
   border: 1px solid;
}
.ins{
   grid-area: in;
   background-color: #F8F7F6;
   display: flex;
   margin-top: 30px;
}
.ins>div{
   text-align: center;
   width: 50%;
   line-height: 25px;
}
.ins>div>button{
   background-color: black;
   color: white;
   font-size: 20px;
   cursor: pointer;
   padding: 10px 15px 10px 15px;
   border: none;
}
 .ins>div :hover{
   -ms-transform: scale(0); /* IE 9 */
-webkit-transform: scale(7); /* Safari 3-8 */
transform: scale(0.95); 
}