/* Apply a font to the body. You can change this to whatever you like. */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    background: #f4f4f4; /* Light grey background */
}

/* Style for the form elements */
.contact-form {
    max-width: 600px; /* Set a max-width of the form */
    margin: 0 auto; /* Center the form in the middle of the page */
    padding: 20px;
    background: #fff; /* White background for the form */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* A subtle shadow around the form */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 97%; /* Make the form fields take up 100% of the parent's width */
    padding: 8px;
    margin-bottom: 20px; /* Add some space below the form fields */
    border: 1px solid #ddd; /* A light border around the inputs */
}

.contact-form textarea {
    height: 130px; /* Set a fixed height for the textarea */
}

/* Style for the submit button */
.contact-form input[type="submit"] {
    display: block; /* Make the button take up its own line */
    width: 100%;
    padding: 10px;
    background: #333; /* Dark background for the button */
    color: #fff; /* White text color */
    border: none;
    cursor: pointer; /* Cursor to indicate the button is clickable */
}

.contact-form input[type="submit"]:hover {
    background: #555; /* Darken the button slightly on hover */
}

/* Placeholder color */
.contact-form ::placeholder {
    color: #888; /* Light grey text */
}