/* Card Hover Effect */
.card-hover {
    position: relative; /* Position relative for overlay positioning */
    overflow: hidden; /* Ensure overlay doesn't exceed card boundaries */
    transition: transform 0.3s ease; /* Smooth transition for transform */
    cursor: pointer; /* Change cursor to pointer */
}

.card-hover:hover .card-img-top {
    opacity: 0.5; /* Slightly fade the image on hover */
}

.card-hover:hover::before {
    content: ""; /* Add an empty content for the pseudo-element */
    position: absolute; /* Position it absolutely within the card */
    top: 0; /* Cover the top */
    left: 0; /* Cover the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
    transition: background-color 0.3s ease; /* Smooth transition for overlay color */
}

/* Optional: Add a shadow effect on hover */
.card-hover:hover {
    transform: scale(1.05); /* Slightly scale up the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Add a subtle shadow */
}