#popup {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 700px;  /* Adjusted for better alignment */
    max-width: 500px;
    background-color: #f7f7f7;
    padding: 20px;
    z-index: 9999;
    border-radius: 8px;
}

.image-container {
    text-align: center;
    margin-bottom: 10px;
}

.popup-image {
    width: 100%;  /* Set width to 100% */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image doesn't stretch */
}

#closePopup {
    position: absolute;
    top: 5px;       /* Adjust top positioning */
    right: 5px;     /* Adjust right positioning */
    font-size: 24px; /* Increase font size */
    font-weight: bold;  /* Make the cross thicker */
    border: none;
    background: #fff;  /* White background to make it more prominent */
    color: black;
    cursor: pointer;
    padding: 10px;  /* Increased padding around the close icon */
    border-radius: 50%;  /* Circular button */
    width: 40px;    /* Increased width of the close button */
    height: 40px;   /* Increased height of the close button */
    display: flex;
    justify-content: center;  /* Center the cross inside the button */
    align-items: center;      /* Center the cross inside the button */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);  /* Add subtle shadow */
    transition: background-color 0.3s ease, transform 0.2s ease;  /* Smooth transition */
}

#closePopup:hover {
    background-color: #f1f1f1;  /* Light gray background on hover */
    transform: scale(1.1);        /* Slightly enlarge on hover for effect */
}

#closePopup:focus {
    outline: none;               /* Remove focus outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Blue focus ring */
}