/* Section styling */
#product1 {
    text-align: center;
    padding: 40px 20px;
    margin-left: 3%;
    margin-right: 3%;
}

#product1 .pro-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; 
    padding-top: 20px;
}
@media (max-width: 700px) {
    #product1 .pro-container {
        grid-template-columns: repeat(2, 1fr);
        
    }
    
}


/* Remove borders and padding around individual products */
#product1 .pro {
    position: relative;
    overflow: hidden;
    padding: 0; /* Reduce padding */
    margin: 0; /* Remove margin */
    
}

#product1 .pro img {
    width: 100%;
    height: 90%;
    object-fit: cover; /* Ensures images cover their container */
    display: block;
    /* Disable global blur-to-clear effect for cart images */
    filter: none !important;
    transition: none !important;
}

/* Optional hover effect for a more dynamic look */
#product1 .pro:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


.remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(216, 26, 26, 0.8); /* More opaque red background */
    border: none;
    border-radius: 30%; /* Keep it circular */
    padding: 8px; /* Increase padding for larger button */
    cursor: pointer;
    font-size: 30px; /* Increase font size */
    font-weight: bold; /* Make the "x" bold */
    color: white; /* White text for better contrast */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a slight shadow for depth */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition effects */
}

/* Hover effect to make it interactive */
.remove-btn:hover {
    background-color: #ff4d4d; /* Lighter red on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

@media (max-width: 500px) {

    #product1 .pro-container {
        gap: 5px; 
        padding-top: 20px;
        
    }

    #product1.section-p1 {
        padding: 10px 10px;
    }


}