/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global styles */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: #f4f1ea; /* Light beige background */
    color: #333; /* Dark text for readability */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; /* Rajdhani looks good bold */
}

header {
    background-color: #1a1a1a; /* Dark grey / almost black */
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2em; /* Prominent logo size */
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px; /* Optional: adds a bit of spacing */
}
/* .logo img rule removed */

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #e67e22; /* Warm orange accent for hover */
}

main {
    /* Padding will be handled by sections */
}

.hero {
    background-color: #000; /* Fallback color, or if image has transparency */
    line-height: 0; /* Prevents extra space if img is inline-block and not reset */
    /* All other background-* and min-height properties removed */
}

.hero img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image and allow width: 100% */
}

/* Removed .hero h1 and .hero p styles as they are no longer used */

.contact-form-section {
    padding: 40px 20px;
    background-color: #ffffff;
    max-width: 600px;
    margin: 40px auto; /* Added top/bottom margin */
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.contact-form-section h2 {
    text-align: center;
    margin-bottom: 20px; /* Increased margin */
    color: #1a1a1a; /* Dark grey, matching new header */
    font-size: 2.2em; /* Slightly larger heading */
}

.contact-form-section p {
    text-align: center;
    margin-bottom: 30px;
    color: #555;
    font-size: 1.1em; /* Slightly larger paragraph */
}

footer {
    background-color: #1a1a1a; /* Dark grey / almost black */
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Contact form styles */
/* Removed styles for .form-row, .purpose-fieldset, .purpose-legend, .radio-option, .radio-input, .radio-label, .form-group */

/* Default label styling (applies to Purpose, Name, Email, Message labels) */
form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Styling for all text inputs, textarea, and select dropdown */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd; /* Softer border */
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff; /* Ensure background is white */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Specific styling for select to add custom arrow and remove default appearance */
form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px; /* Make space for the arrow */
}

/* Focus states for inputs, textarea, and select */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: #e67e22; /* Accent color border */
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15); /* Soft glow with accent color */
}

form textarea {
    min-height: 120px;
    resize: vertical;
}

form button {
    display: block; /* Make button block to center it */
    width: auto;
    margin: 0 auto; /* Center button */
    padding: 12px 30px; /* Adjusted padding */
    background-color: #e67e22; /* Warm orange accent */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #d35400; /* Darker orange for hover */
}

.privacy-message {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    margin-top: 0px; /* Adjusted to be directly after textarea */
    margin-bottom: 20px; /* Space before the button */
}

/* Cloudflare Turnstile widget styling removed as widget is no longer in use */

/* Responsive adjustments */
@media (max-width: 768px) {
    /* .hero img will naturally be responsive due to width: 100%, height: auto.
       No specific .hero adjustments for background-size/min-height needed anymore. */

    .contact-form-section h2 {
        font-size: 1.8em; /* Slightly smaller heading on mobile */
    }

    .contact-form-section p {
        font-size: 1em; /* Adjust paragraph font size on mobile */
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea,
    form select {
        font-size: 15px; /* Slightly smaller font in form fields on mobile */
    }
}

@media (max-width: 480px) {
    /* .hero img will naturally be responsive.
       No specific .hero adjustments for background-size/min-height needed anymore. */
     header {
        flex-direction: column;
        gap: 10px;
    }
    nav ul li {
        margin-right: 10px; /* Reduce nav item spacing */
        margin-left: 10px;
    }
}