.zoom-image {
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.zoom-image:hover {
    transform: scale(10); /* Enlarges the image */
    z-index: 10; /* Brings the hovered image above other elements */
    border: 2px solid #ccc; /* Optional: Adds a border for emphasis */
}

.image-container {
    overflow: visible; /* Ensures zoomed images are not cropped by the parent */
}

/* Disable zoom effect specifically in the details panel */
.details-panel .zoom-image:hover {
    transform: none; /* Disable scaling */
    z-index: 1; /* Reset any z-index adjustment */
    border: none; /* Reset border effect */
}
