.custom-card {
    /* background-color: rgba(0, 0, 0, 0.65) !important; */
    background-color: rgba(0, 0, 0, 0.55) !important;
    /* background-color: transparent !important; */
}



/* Make hover effect apply to the entire card */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;  /* Optional: ensures that the image and button don't overflow */
    margin-left:2px;
}

.hover-button {
    position: absolute;
    top: 30%;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* transform: none; */
    display: none;  /* Hidden by default */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
}

.image-container:hover .hover-button {
    display: block;  /* Show button when hovering over the card */
}

/* Apply opacity transition for the image */
.hover_image {
    opacity: 0.5 !important;  /* Default opacity */
    transition: opacity 0.3s ease;
}

.image-container:hover .hover_image {
    opacity: 0.9 !important;  /* Increase opacity when hovering over the card */
}


/* Apply opacity effect to any other elements you want to change on hover */
.hover_image_faint {
    opacity: 1 !important;  /* Default opacity */
    transition: opacity 0.3s ease;
}

.image-container:hover .hover_image_faint {
    opacity: 0.7 !important;  /* Make faint elements more visible when hovering over the card */
}

/* Optional: if you want to make text bold or change styling on hover */
.image-container:hover .hover_image_faint,
.image-container:hover .hover_image {
    font-weight: bold;
}

/* .item {
    background-color: transparent !important;
} */


.butt-no-transform {
    cursor: default !important;
}
.butt-no-transform:active {
    transform: none !important;
}