description.css

#firstcard{
    height:auto;
    width:50%;
    margin-left: 50px;

}
#firstcard>div{
    height: auto;
    width:30%;
}
#firstcard>div>img{
    width:100%;

}
#secondcard{
    height:20%;
    width:70%;
    margin-left:-200px;
  
    margin-right: 20px;
}
#secondcard>img{
    width:100%
}
#thirdcard svg , #revieww svg{
    width:2%;
}
/* svg{
    width: 2%;
} */
#thirdcard{
    height:auto;
    width:50%;
    
}
#fourthcard{
    height:auto;
    width:20%;
    

}
#fourthcard>div{
    height: 100px;
    width:70%;
}
#fourthcard>div>img{
    width:100%;
}
#container1{
    display: flex;
    height:50%;
   
   
}
.exclamimg{
    width:10%;
}
#shades{
    display:inline-block;
    text-rendering: auto;
}
#timg{
    width:5%;
}
#registry{
    display: flex;
    gap:50px
}
#container2firstcard{
    height:auto;
    width:70%;
    border: 1px solid red;

}
#container2seccard{
    height:auto;
    width:40%;
    border: 1px solid green

}
#secondcontainer{
    height:auto;
    display: flex;
}
#conatiner{
    height:auto;
    width:100%;
}
#imgdiv{
display: flex;
width:80%;
gap:20px
}
#imgdiv>img{
    width:30%
    
    }
    #thirdcontainer{
        height:auto;
        width:100%;
    }
    .part2{
        display: flex;
    }
    .part2 img{
        width:80%;
    }
    #rat
    {
        display: flex;
        justify-content: space-between;
    }
    #rating{
        display: flex;
    }
    .recomm{
        width:35%;
        height: 100px;
        border:1px solid green;
       padding:0px 30px 0px 70px
    }
    .recomm svg{
        width:10%
    }
    .reviewss{
        display: flex;
        border:1px solid rgb(100, 100, 100);
        gap:50px;
    }
    .reviewss img{
        width:30%
    }
    #boxxx1{
        
        width:30%;
    }
    #boxxx2{
      
        width:70%;
    }
    #img3div{
        display: flex;
    }

    #img3div img{
        width:80%;
    }

/* #firstcard .img1{
  /* -webkit-transform:scaleX(-3) ;
  transform: scalex(-3); */
  /* margin: -100px 0px 0px -180px;
} */ 




  .img1{
    -webkit-transform:scaleX(-1) ;
    transform: scalex(-1); 
    z-index: -1;
  }
  #secondcard{
  
  
    transition: transform .2s;
  
 
  }
  
  #secondcard:hover {
   cursor: zoom-in;
   transform: scale(1.2);
  }
 
  .part3img img:hover{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    z-index: -1;
  }
  .part2img img:hover{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    z-index: -1;
  }
#shadesofcolor img{
    border-radius: 70%;
    width:5%;
    margin-top: 20px;
}
#basket{
    width:70%;
    height:50px
  }
  #Qty{
    margin-bottom: 20px;
  }
  .btnn{
height: 10%;
width:30%
  }