.procar{
    background-color: #ececec;
}
.procar h5{
    text-align: center;
    font-size:2.3rem;
    padding:40px 0px;
}
.propro{
    display: flex;
}
.product-card {
    background-color: #fff; /* White background for the card */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Padding inside the card */
    text-align: center; /* Center align text */
    width: 300px; /* Fixed width */
    
    margin: 20px; /* Margin around the card */
}

.product-card img {
    width:100%; /* Image takes full width of the card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Slightly rounded corners for the image */
}

.product-card h2 {
    font-size: 1.5rem; /* Title font size */
    margin: 10px 0; /* Margin around the title */
    color: #4b2e15; /* Earthy color */
}

.product-card p {
    font-size: 1rem; /* Paragraph font size */
    color: #333; /* Darker text color */
    margin: 5px 0; /* Margin around paragraphs */
}

.product-card .price {
    font-size: 1.2rem; /* Price font size */
    color: #e67e22; /* Price color */
    margin: 10px 0; /* Margin around price */
}


.product-card .buy-button {
    background-color: #4b2e15; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Cursor changes to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth background change */
    margin-top:40px;
}
 .propro .mh{
    margin-top:40px;
}
.product-card .buy-button:hover {
    background-color: #3a2410; /* Darker shade on hover */
}


/* Max-width Media Query for Mobile Devices */
@media (max-width: 414px) {
    .procar{
        padding-left:14px;
    }
    .propro{
        flex-direction: column;
    }
    .procar h5 {
        font-size: 1.8rem; /* Smaller font size for the title */
        padding: 20px 0; /* Reduced padding */
    }

    .product-card {
        width: 95%; /* Use 95% width for even smaller devices */
        margin: 5px 0; /* Further reduce margin */
        padding: 15px; /* Reduced padding inside the card */
    }

    .product-card h2 {
        font-size: 1.3rem; /* Smaller font size for titles */
    }

    .product-card p {
        font-size: 0.9rem; /* Smaller font size for paragraphs */
    }

    .product-card .buy-button {
        padding: 8px 16px; /* Reduced padding for buttons */
    }
}