.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* dark transparent bg */
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* Modal Content Box */
.modal-content {
   background:#283957;
    padding: 25px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-in-out;
}

/* Smooth entry animation */
@keyframes slideIn {
    from {transform: translateY(-50px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

/* Input fields */

.message_name input,
.message textarea {
    width: 100%;
    padding: 12px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 10px;
    resize: none;
    font-family: 'Segoe UI', sans-serif;
}
.message textarea {
    height:100px;
}
.message_name:focus, .message:focus {
    border-color: #3cb371;
    outline: none;
    background-color: #ffffff;
}

/* Submit Buttons */
.buttonSubmit {
    background-color: ##817fa8;;
    color: white;
    padding: 5px 20px;
    margin: 10px 5px 0 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.buttonSubmit:hover {
    background-color: #2e8b57;
}

/* Table Style for comments */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 600px) {
    .modal-content {
        padding: 15px;
    }

    .buttonSubmit {
        width: 100%;
        margin-top: 10px;
    }
}