.image-card {
    position: relative; /* Allows positioning of the content on top of the image */
    width: 100%; /* Adjust this to fit your layout */
    height: 200px; /* Set a height for the card */
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fits the container with minimal distortion */
}

.card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: white; /* Sets text color to white to be visible on the black hover background */
    opacity: 0; /* Initially hides the content for a nice reveal effect */
    transition: opacity 0.3s ease-in-out;
}

.card-link {
    display: block; /* Ensures the link fills its parent */
    text-decoration: none;
}

.card-link h2, .card-link p { 
    color: white;
    background-color: transparent; /* Initially transparent */
}

.image-card:hover .card-content {
    opacity: 1;
    background-color: #3fb8f0 ; /* Changes background to black on hover */
}

.card-link h2, .card-link p {
    background-color: inherit; /* Inherit background color from parent */
    padding: 0 5px; /* Adds a bit of padding around the text */
    cursor:pointer;
}

.card-link:hover {
    text-decoration: none; /* Prevents underline on hover */
}