/* *{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   color: black;
}

html{
   font-size: 62.5%;
}

main{
   max-width: 1500px;
   width: 95%;
   margin: 30px auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin: auto;
}

main .card{
   max-width: 300px;
   flex: 1 1 210px;
   text-align: center;
   height: 420px;
   border: 1px solid lightgray;
   margin: 20px;
}

main .card .image{
   height: 50%;
   margin-bottom: 20px;
}

main .card .image img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

main .card .caption{
   padding-left: 1em;
   text-align: left;
   line-height: 3em;
   height: 25%;
}

main .card .caption p{
   font-size: 1.5rem;
}

del{
   text-decoration: line-through;
}

main .card .caption .rate{
   display: flex;
}

main .card .caption .rate i{
   color: gold;
   margin-left: 2px;
}

main .card a{
   width: 50%;
}

main .card button{
   border: 2px solid black;
   padding: 1em;
   width: 80%;
   cursor: pointer;
   margin-top: 2em;
   font-weight: bold;
   position: relative;
}

main .card button:before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 0;
   background-color: black;
   transition: all .5s;
   margin: 0;
}

main .card button::after{
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 0;
   background-color: black;
   transition: all .5s;
}

main .card button:hover::before{
   width: 30%;
}

main .card button:hover::after{
   width: 30%;
} */



/* styleproduct.css */

/* Main container */
/* .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
} */

/* Product card */
/* .card {
   border: 1px solid #ddd;
   border-radius: 8px;
   margin-bottom: 20px;
   overflow: hidden;
} */

/* Product image */
/* .image img {
   width: 100%;
   height: auto;
   display: block;
} */

/* Product details */
/* .caption {
   padding: 10px;
} */

/* Product name */
/* .name {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 5px;
} */

/* Product price */
/* .price {
   font-size: 16px;
   color: #333;
   margin-bottom: 10px;
} */

/* Add to cart button */
/* .add {
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 4px;
   padding: 10px 20px;
   cursor: pointer;
   transition: background-color 0.3s;
} */

/* .add:hover {
   background-color: #0056b3;
} */
/* styleproduct.css */

/* Main container */
/* styleproduct.css */

/* Main container */
/* styleproduct.css */

/* Main container */
/* styleproduct.css */

/* Main container */
/* styleproduct.css */

/* Main container */
/* styleproduct.css */

/* Container for product cards */
/* styleproduct.css */

/* Container for product cards */
.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   margin-top: 20px;
}

/* Individual product card */
.card {
   width: 300px;
   margin-bottom: 20px;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.card:hover {
   transform: translateY(-5px);
}

/* Product image */
/* .card .image img {
   width: 100%;
   height:  auto;
   border-radius: 5px;
} */

image {
   width: 200px;
   height: 200px;
   text-align: center;
   margin: 0 auto;
   display: block;

}

/* Product name */
.card .caption .name {
   margin-top: 10px;
   font-size: 16px;
   font-weight: bold;
}

/* Product price */
.card .caption .price {
   margin-top: 5px;
   font-size: 14px;
   color: #888;
}

/* Add to cart button */
.card .add {
   display: block;
   width: 100%;
   margin-top: 10px;
   padding: 8px 0;
   border: none;
   border-radius: 5px;
   background-color: #d3b29b;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.card .add:hover {
   background-color: #285c3e;
}

.rate {
   display: flex;
   align-items: center;
}

.rate i {
   color: gold;
   margin-right: 5px;
}