product.css

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
<<<<<<< HEAD
    background-image: url('bgimgs/p\ \(3\).jpg');
=======
    background-image: url('./bgimgs/p3.jpg');
>>>>>>> origin/main
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.products-container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
box-sizing: border-box;
padding-top: 7%;

}

.product {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
width: calc(33.33% - 20px);
height: 60vh;
box-sizing: border-box;
background-color:#fff;
backdrop-filter: blur(10px);
transition: transform 0.3s ease-in-out;
float: left;
margin-right: 20px;
border-radius: 10px;
color: #000;

}

.products-container .product:nth-child(3n+1) {
    animation: pulse 2s;
}

.product img {
max-width: 200px;
display: block;
margin: 0 auto;
aspect-ratio: 7/6;
object-fit: contain;
mix-blend-mode: darken;

}

.product h2 {
text-align: center;
margin-top: 10px;
}

.product p {
text-align: center;
margin-top: 5px;
font-size: 16px;
color: #333;
}

/* Animation on hover */
.product:hover {
transform: scale(1.05);
}

/* Clearfix for float elements */
.clearfix::after {
content: "";
display: table;
clear: both;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
.product {
    width: calc(50% - 20px);
<<<<<<< HEAD
    /* Adjust for smaller screens */
}
=======
    height: 45vh;
    margin-left: 3%;
}

.products-container {

padding-top: 20%;

}

>>>>>>> origin/main
}

@media screen and (max-width: 480px) {
.product {
    width: calc(100% - 20px);
<<<<<<< HEAD
    /* Full width for smaller screens */
=======
>>>>>>> origin/main
    margin-right: 0;
}
}