.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust for the size of the popup */
    width: 100%;
    max-width: 400px; /* Set a max width */
    height: auto; /* Allow height to adjust based on content */
    
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    z-index: 1000; /* On top of other elements */
}

.popup-content {
    background-color: #fff; /* White background */
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow */
    margin: 0 auto; /* Center horizontally */
}

.close-btn {
    background-color: #001f3f; /* Dark navy blue */
    color: white; /* Text color */
    padding: 15px 30px; /* Increased padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    margin-top: 10px; /* Space above the button */
    transition: background-color 0.3s; /* Transition for hover effect */
    width: 100%; /* Make the button take the full width */
    max-width: 400px; /* Set a max width for larger buttons */
    display: block; /* Ensure it behaves like a block element */
    text-align: center; /* Center text within the button */
}

.close-btn:hover {
    background-color: #ff851b; /* Orange color on hover */
}