/* Modal Background */
.inquiry-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark transparent overlay */
    overflow-y: auto; /* Ensures scrolling */
    -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on mobile */
}

/* Modal Content */
.inquiry-modal-content {
    background-color: #fff;
    margin: 5% auto; /* Adjusts margin for centering */
    padding: 20px;
    width: 90%; /* Uses most of the screen width on mobile */
    max-width: 600px; /* Limits size on desktops */
    position: relative;
    border-radius: 5px;
    overflow-y: auto; /* Allows scrolling inside modal */
    max-height: 90vh; /* Keeps it from going off-screen */
}

/* Shift content down */
div#inquiry-content {
    margin-top: 20px;
}

/* Close Button Styling */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ff4d4d; /* Red background */
    border: 2px solid #ff4d4d;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Create "X" using pseudo-element */
.close-modal::before {
    content: "\2715"; /* Unicode for "X" */
    font-size: 18px;
    color: white;
    font-weight: bold;
    display: block;
}

/* Hover effect */
.close-modal:hover {
    background-color: #fff;
    color: #ff4d4d;
    border-color: #ff4d4d;
}

.close-modal:hover::before {
    color: #ff4d4d;
}




/* Responsive Adjustments */
@media (max-width: 768px) {
    .inquiry-modal-content {
        width: 95%; /* Full width for better usability */
        max-height: 95vh; /* Prevents modal from overflowing on small screens */
        padding: 15px; /* Smaller padding */
    }
}
/* Make sure the Gravity Form inside the modal is scrollable */
.inquiry-modal-content form {
    max-height: 80vh; /* Prevents it from going beyond the screen */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
