/* Make sure the container doesn't have any unexpected background */
.image-box {
    position: relative;
    display: inline-block;
    width: 100%;                /* Makes it responsive to the parent container */
    height: 0;                  /* Start with no height */
    padding-bottom: 56.25%;      /* Aspect ratio (16:9 in this case) */
    background-color: transparent; /* Ensure no background is applied */
}

/* This will make the image fill the box */
.img-cover-level {
    position: absolute;        /* Take image out of normal document flow */
    top: 0;
    left: 0;
    width: 100%;                /* Make the image fill the entire container */
    height: 100%;               /* Stretch the image to fill vertically */
    object-fit: cover;          /* Ensure image maintains aspect ratio without distortion */
    border: none;               /* Remove border from input element */
}

/* Styling for the overlay button */
.overlay-button-buy-now {
    position: absolute;
    top: 50%;                    /* Center the button vertically */
    left: 50%;                   /* Center the button horizontally */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    padding: 12px 25px;
    background-color: red; /* Dark semi-transparent background */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;                  /* Initially hidden */
    visibility: hidden;         /* Button not visible initially */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1;                 /* Ensure the button is above the image */
}
.overlay-button-access-level {
    position: absolute;
    top: 50%;                    /* Center the button vertically */
    left: 50%;                   /* Center the button horizontally */
    transform: translate(-50%, -50%); /* Fine-tune centering */
    padding: 12px 25px;
    background-color: green; /* Dark semi-transparent background */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;                  /* Initially hidden */
    visibility: hidden;         /* Button not visible initially */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1;                 /* Ensure the button is above the image */
}

/* Show the button on hover */
.image-box:hover .overlay-button-buy-now {
    opacity: 1;                 /* Show the button */
    visibility: visible;        /* Make button visible */
}

.image-box:hover .overlay-button-access-level {
    opacity: 1;                 /* Show the button */
    visibility: visible;        /* Make button visible */
}