#carousel{
   
    /* margin-top: 100px; */
    height: 500px;
 }
 
 #carousel img{
     display: flex;
     
     width: 90%;
     height: 450px;
     margin: auto;
     margin-top: 30px;
 }
 
 #shopCat{

    border: 0px solid green;
    display: grid;
    grid-template-columns: repeat(6 , 1fr);
    /* gap: 10px; */
    margin-top: 30px;

    height: auto;


 }

 .shopcatcard{
   width: 80%;
   margin: auto;
 }

 #shopCat img{
width: 100%;
/* display: flex; */
margin-left: auto;
 }

 #carousel+h2{
    text-align: center;
    font-family: sans-serif;
    color: rgb(46,51,55);
    
 }

 #details{
    border: 0px solid black;
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;

 }

 #details>div{
    border: 0px solid yellow;
    margin: auto;
    text-align: center;
    color: rgb(91,50,51);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 10px ;
 }

 #details img{
   display: flex;
   margin: auto;
   border-radius: 140px;
    width: 60%;
    text-align: center;
    transition: 0.5s;
 }

 #details img:hover{
   width: 62%;
   
 }

 #details h2{
   font-family:'Times New Roman', Times, serif;
   font-size: 25px;
   font-weight:normal;
   
 }
 #details h3{
   font-family: sans-serif;
   font-size: 15px;
   font-weight: lighter;
 }

 #details p{
   line-height: 22px;
   font-size: 16px;
   font-family: sans-serif;

 }

 #details button{
   border: 1px solid rgb(50,50,51);
   font-weight: lighter;
   font-size: 16px;
   color: rgb(176,109,110);
   font-family: Georgia, 'Times New Roman', Times, serif;
   margin-top: 10px;
   height: 40px;
   background-color: transparent;
   width: 120px;
 }

 #details button:hover{
   cursor: pointer;
   background-color: thistle;
 }

 #shopCat+h2{
   text-align: center;
   margin-top: 25px;
   font-family: sans-serif;
   color: rgb(46,51,55);
 }


 


#box3{
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 20px;
border: 0px solid red;
width: 100%;
height: 250px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


#box3 img{

   width: 12%;
   opacity: 0.7;
   
}

#box3 img:hover{
   opacity: 1;
}

#box1{
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin-top: 10px;
   width: 100%;
   height: 50px;
   background-color:rgb(243,243,242) ;
}
#box3 img{
   display: grid;
   align-content: space-between;
   border: 0px solid blue;
   
}