.thubnail-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: block;
    transition: filter 0.3s ease;
}
.bg-image {
    overflow: hidden;
    border-radius: 0.25rem;
    /* Match the border radius of the image */
}

.hover-zoom img {
    transition: transform 0.3s ease, border-radius 0.3s ease;
    border-radius: 0.25rem;
    /* Ensure the border radius is set */
}

.hover-zoom:hover img {
    transform: scale(1.05);
    border-radius: 0.25rem;
    /* Maintain the border radius on hover */
}
/* Apply styles to the image wrapper */
/* Apply styles to the image wrapper */
.image-wrapper {
    position: relative;
    overflow: hidden;
    /* Ensure the image does not overflow the wrapper */
}

/* Style for the image */
.card-img {
    width: 100%;
    transition: transform 0.3s ease;
    /* Smooth transition for zoom effect */
}

/* Hover effect on the image */
.image-wrapper:hover .card-img {
    transform: scale(1.05);
    /* Slight zoom effect on hover */
}

/* Create the gray shadow effect at the bottom with a gradient */
.image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* Position it at the bottom of the image */
    left: 0;
    width: 100%;
    height: 20%;
    /* Only cover the bottom 20% of the image */
    background: linear-gradient(to top, rgba(169, 169, 169, 0.6), rgba(169, 169, 169, 0));
    /* Dark gray at bottom, fading upwards */
    box-shadow: 0 10px 30px rgba(169, 169, 169, 0.5);
    /* Soft gray shadow with spread */
    opacity: 0;
    /* Hide shadow initially */
    z-index: 0;
    /* Keep shadow below the button and image */
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition */
}

/* Show the shadow and spread effect when hovering over the image */
.image-wrapper:hover::after {
    opacity: 1;
    box-shadow: 0 15px 50px rgba(169, 169, 169, 0.7);
    /* Stronger gray shadow with more spread */
}

/* Ensure the button stays above the shadow */
.button-wrapper button {
    position: relative;
    z-index: 2;
    /* Button is above the shadow */
    background-color: #007bff;
    /* Primary color (blue) */
    border-color: #007bff;
    /* Match border color with primary color */
    color: white;
    /* Text color for the button */
}

/* Ensure the button's primary color stays on hover */
.button-wrapper button:hover {
    background-color: #007bff !important;
    /* Keep the blue background on hover */
    border-color: #007bff !important;
    /* Keep the blue border on hover */
    color: white;
    /* Ensure text stays white */
    box-shadow: none;
    /* Remove any additional box-shadow effects from the button */
}

/* Optional: Button active state */
.button-wrapper button:active {
    background-color: #0056b3;
    /* Darker blue on button press */
    border-color: #0056b3;
    /* Darker border on button press */
}