/* contact.css */
/* Contact form container styling */

#contact {
    background-color: darkseagreen;  /* contact section background-color */
    color: #923b3b;  /* text color */
    padding: 50px;  /* Add padding inside the contact container */
    border-radius: 10px;  /* Round the corners of the container */
    max-width: 600px;  /* Set the maximum width of the container */
    margin: 20px auto;  /* Center the container horizontally with a 20px top/bottom margin, left and right is auto (center) */
    text-align: center;  /* Center-align the text within the container */
    border: 3px dashed #923b3b;  /* Add a dashed border around the contact container */
    
}
ul{
    list-style-type: none;
}

/* Header styling inside the contact section */
#contact header h2 {
    font-size: 2em;  /* Set the font size of the heading */
    margin-bottom: 20px;  /* Add space below the heading */
}

/* Paragraph styling inside the contact section */
#contact header p {
    font-size: 1.2em;  /* Set the font size of the paragraph */
    margin-bottom: 30px;  /* Add space below the paragraph */
}

/* Styling for the contact form */
#contact-form {
    display: flex;  /* Use flexbox layout for the form */
    flex-direction: column;  /* Stack the form fields vertically */
    gap: 20px;  /* Add space between form elements */
    text-align: left;  /* Left-align the text inside form fields */
}

/* Styling for each form group (input field + label) */
.form-group {
    display: flex;  /* Use flexbox for the form group */
    flex-direction: column;  /* Stack label and input vertically */
}

/* Label styling for form fields */
label {
    font-size: 1em;  /* Set the font size of the labels */
    margin-bottom: 5px;  /* Add space below the label */
}

/* Styling for input fields and textareas */
input, textarea {
    padding: 10px;  /* Add padding inside the input fields */
    font-size: 1em;  /* Set the font size of the text inside the input fields */
    border-radius: 5px;  /* Round the corners of the input fields */
    border: 1px solid #923b3b;  /* Set a border color for input fields */
    width: 100%;  /* Make the input fields take up 100% of the container's width */
    margin-top: 5px;  /* Add space above the input fields */
}

/* Allow the textarea to resize vertically */
textarea {
    resize: vertical;  /* Enable vertical resizing of the textarea */
}

/* Styling for the submit button */
#contact button {
    background-color: #923b3b;  /* Set the background color of the button */
    color: white;  /* Set the text color of the button */
    font-size: 1.2em;  /* Set the font size of the button text */
    padding: 10px 20px;  /* Add padding inside the button */
    border: none;  /* Remove the default border */
    border-radius: 5px;  /* Round the corners of the button */
    cursor: pointer;  /* Change the cursor to a pointer when hovering over the button */
    transition: background-color 0.3s ease;  /* Smooth transition for background color change */
}

/* Hover effect for the button */
#contact button:hover {
    background-color: darkseagreen;  /* Change the background color when the button is hovered */
}

/* Media query for responsiveness */
@media (max-width: 768px) {
    /* Adjust padding for smaller screens */
    #contact {
        padding: 20px;  /* Reduce padding for mobile screens */
    
    }
}

.theme-button {
    border: 1px solid darkseagreen;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9em;
    background-color: #923b3b;  /* Set the background color of the button */
    color: white;  /* Set the text color of the button */
    border-radius: 5px;  /* Round the corners of the button */
    transition: background-color 0.3s ease;
  }