/* General Body and Typography Styles */
body {
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif; /* Modern, readable font stack */
    line-height: 1.6;
    margin: 0; /* Reset default body margin */
    padding: 20px; /* Add some padding around the content */
    background-color: #f8f9fa; /* Lighter background for a fresh feel */
    color: #343a40; /* Darker text for readability */
    display: flex; /* Use flexbox to easily center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure body takes full viewport height */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Main Container for the Page Content */
.container {
    max-width: 800px;
    width: 100%; /* Ensure it takes full width up to max-width */
    background: #ffffff;
    padding: 40px; /* Increased padding for more breathing room */
    border-radius: 12px; /* Softer rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* More subtle, deeper shadow */
    box-sizing: border-box;
}

/* Headings Styles */
h1, h2 {
    color: #2c3e50; /* A strong, professional blue-grey */
    text-align: center;
    margin-bottom: 30px; /* More space below headings */
    font-weight: 600; /* Slightly bolder for emphasis */
}

h2 {
    margin-top: 40px; /* Extra space above the "Send Us Your Query" heading */
    font-size: 1.8em; /* Slightly larger for prominence */
}

/* Paragraph Text Styles */
p {
    margin-bottom: 20px; /* Consistent spacing for paragraphs */
    font-size: 1.05em; /* Slightly larger text for better readability */
}

/* Contact Information Box Styling */
.contact-info {
    background-color: #e3f2fd; /* A light, calming blue */
    border-left: 6px solid #1976d2; /* A deeper, more prominent blue for the border */
    padding: 20px;
    margin-top: 35px; /* More space above the info box */
    margin-bottom: 35px; /* More space below the info box */
    border-radius: 8px; /* Slightly more rounded */
}

.contact-info p {
    margin: 8px 0; /* Adjust internal paragraph spacing */
    font-size: 1.1em; /* Make contact info stand out a bit */
}

.contact-info strong {
    color: #1976d2; /* Match strong text with border color */
}

.contact-info a {
    color: #1976d2; /* Consistent link color */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.contact-info a:hover {
    text-decoration: underline;
    color: #1565c0; /* Darker blue on hover */
}

/* Form Styling */
form {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Increased gap between form elements */
    margin-top: 30px;
    padding: 30px;
    border: 1px solid #e0e0e0; /* Lighter, more subtle border */
    border-radius: 10px; /* Rounded corners for the form box */
    background-color: #fdfdfd; /* Very light background for the form */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
}

label {
    font-weight: 600; /* Bolder label text */
    margin-bottom: 5px;
    color: #555; /* Softer color for labels */
    font-size: 0.95em; /* Slightly smaller for form labels */
}

input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 12px 15px; /* More generous padding */
    border: 1px solid #cccccc; /* Clearer border for input fields */
    border-radius: 6px; /* Rounded input fields */
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for focus */
    background-color: #ffffff; /* White background for inputs */
}

input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #1976d2; /* Highlight border on focus */
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); /* Soft glow on focus */
    outline: none; /* Remove default outline */
}

textarea {
    resize: vertical; /* Allow only vertical resizing */
    min-height: 120px; /* More space for query */
}

/* Submit Button Styling */
button[type="submit"] {
    background-color: #1976d2; /* Strong primary blue */
    color: white;
    padding: 14px 25px; /* Larger, more inviting button */
    border: none;
    border-radius: 8px; /* Rounded button */
    cursor: pointer;
    font-size: 1.15em; /* Larger font for call to action */
    font-weight: 700; /* Extra bold for impact */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    letter-spacing: 0.5px; /* A little spacing for style */
    align-self: center; /* Center the button within the flex container */
    width: auto; /* Allow button to size based on content */
    min-width: 180px; /* Ensure a decent minimum width */
}

button[type="submit"]:hover {
    background-color: #1565c0; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

button[type="submit"]:active {
    transform: translateY(0); /* Return to original position on click */
    background-color: #1256a0; /* Even darker on active */
}

/* Form Message (Success/Error) Styling */
.message {
    text-align: center;
    margin-top: 15px; /* Space above message */
    padding: 12px;
    border-radius: 6px;
    font-weight: 600; /* Bolder message text */
    font-size: 0.95em;
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade in/out */
}

.message.visible { /* Add this class via JS when message needs to be shown */
    opacity: 1;
    visibility: visible;
}

.message.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

/* Footer-like paragraph style */
.container > p:last-of-type {
    margin-top: 40px; /* More space above the closing remark */
    text-align: center;
    font-size: 0.85em; /* Slightly smaller */
    color: #888; /* Softer color for less emphasis */
}