/* Basic Reset & Body Styling */ 
body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Open Sans', 'Roboto', sans-serif; 
    background-color: #f0f4e8; /* Light, earthy background */ 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; /* Align to top for longer forms */ 
    min-height: 100vh; 
    padding: 20px 10px; /* Add some padding around the form */ 
    box-sizing: border-box; 
} 
 
.form-container { 
    background-color: #ffffff; /* Clean white background for the form */ 
    border-radius: 12px; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); 
    padding: 30px 40px; 
    max-width: 900px; /* Max width for desktop */ 
    width: 100%; 
    box-sizing: border-box; 
} 
 
/* Header Styling */ 
.form-header { 
    text-align: center; 
    margin-bottom: 30px; 
    color: #333; 
} 
 
.form-header h1 { 
    color: #0056b3; /* A professional blue for main title */ 
    font-size: 2.2em; 
    margin-bottom: 5px; 
    font-weight: 700; 
} 
 
.form-header h2 { 
    color: #28a745; /* A green for secondary title, reflecting agriculture */ 
    font-size: 1.6em; 
    margin-top: 0; 
    margin-bottom: 10px; 
    font-weight: 600; 
} 
 
.form-header h3 { 
    color: #6c757d; /* Muted color for form title */ 
    font-size: 1.3em; 
    margin-top: 5px; 
    font-weight: 500; 
} 
 
/* Form Section & Grouping */ 
.form-section { 
    margin-bottom: 25px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */ 
    gap: 20px; /* Space between form groups */ 
} 
 
.form-section:last-of-type { 
    border-bottom: none; 
    margin-bottom: 0; 
    padding-bottom: 0; 
} 
 
.form-group { 
    flex: 1; /* Distribute space among groups */ 
    min-width: 280px; /* Minimum width before wrapping */ 
    margin-bottom: 15px; /* Space between groups when stacked */ 
} 
 
/* Row-like grouping for specific sections */ 
.group-row { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 20px; 
} 
 
.group-row > .form-group { 
    flex: 1; 
    min-width: calc(50% - 10px); /* Two columns on larger screens */ 
    margin-bottom: 0; /* Managed by parent gap */ 
} 
 
/* Labels */ 
label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: #34495e; /* Darker text for labels */ 
    font-size: 0.95em; 
} 
 
.required { 
    color: #dc3545; /* Red for required fields */ 
    font-weight: bold; 
} 
 
/* Input, Select, Textarea Styling */ 
input[type="text"], 
input[type="email"], 
input[type="tel"], 
select, 
textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid #dcdcdc; /* Light grey border */ 
    border-radius: 8px; 
    background-color: #fdfdfd; 
    font-size: 1em; 
    color: #495057; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); 
    transition: all 0.3s ease; 
    box-sizing: border-box; /* Include padding and border in the element's total width and height */ 
} 
 
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
select:focus, 
textarea:focus { 
    border-color: #8aa68e; /* Earthy green on focus */ 
    box-shadow: 0 0 0 3px rgba(138, 166, 142, 0.25); 
    outline: none; 
    background-color: #eaf1e5; /* Light green tint on focus */ 
} 
 
/* Specific styling for multi-input fields */ 
.complex-field input[type="text"] { 
    margin-bottom: 10px; /* Space between multiple inputs in a group */ 
} 
.complex-field input[type="text"]:last-child { 
    margin-bottom: 0; 
} 
 
/* Date fields specific layout */ 
.date-fields { 
    display: flex; 
    gap: 10px; 
} 
.date-fields select { 
    flex: 1; 
    min-width: unset; /* Override min-width for date selects */ 
} 
 
/* Textarea specific */ 
textarea { 
    resize: vertical; /* Allow vertical resizing only */ 
    min-height: 100px; /* Minimum height for textarea */ 
} 
 
/* File Upload */ 
.file-upload-group input[type="file"] { 
    border: 1px dashed #a8d58e; /* Dashed border for file input */ 
    padding: 10px; 
    background-color: #f7fcf5; 
    cursor: pointer; 
} 
.file-upload-group input[type="file"]:hover { 
    background-color: #eaf1e5; 
} 
 
/* Submit Button */ 
.form-submit { 
    text-align: center; 
    margin-top: 30px; 
} 
 
button[type="submit"] { 
    background-color: #4CAF50; /* Inviting green color */ 
    color: white; 
    padding: 15px 30px; 
    border: none; 
    border-radius: 8px; 
    font-size: 1.1em; 
    font-weight: 700; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); 
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; 
} 
 
button[type="submit"]:hover { 
    background-color: #45a049; /* Slightly darker green on hover */ 
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4); 
    transform: translateY(-2px); 
} 
 
button[type="submit"]:active { 
    background-color: #3e8e41; 
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3); 
    transform: translateY(0); 
} 
 
/* Responsive Design */ 
@media (max-width: 768px) { 
    .form-container { 
        padding: 20px; 
        max-width: 100%; 
        border-radius: 0; /* No border-radius on small screens for full width */ 
    } 
 
    .form-header h1 { 
        font-size: 1.8em; 
    } 
 
    .form-header h2 { 
        font-size: 1.3em; 
    } 
 
    .form-header h3 { 
        font-size: 1em; 
    } 
 
    .group-row { 
        flex-direction: column; /* Stack items vertically on small screens */ 
        gap: 0; 
    } 
 
    .group-row > .form-group { 
        min-width: 100%; /* Full width for form groups */ 
        margin-bottom: 15px; /* Reintroduce bottom margin */ 
    } 
 
    .form-group { 
        min-width: 100%; /* Ensure all form groups take full width */ 
    } 
 
    .date-fields { 
        flex-direction: column; 
        gap: 5px; 
    } 
 
    .date-fields select { 
        width: 100%; 
    } 
} 
 
@media (max-width: 480px) { 
    .form-container { 
        padding: 15px; 
    } 
    button[type="submit"] { 
        width: 100%; 
        padding: 12px 15px; 
        font-size: 1em; 
    } 
}