/* Apply Outfit font globally */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

/* Apply the font to the entire form */
#nf-form-1-cont,
.ninja-forms-field,
input[type="submit"],
.nf-field-label {
    font-family: 'Outfit', sans-serif !important;
}

/* Styling the form container */
#nf-form-1-cont {
    background-color: #f9f9f9 !important; /* Light background for form */
    border-radius: 10px !important; /* Rounded corners */
    padding: 20px !important; /* Reduced padding for smaller form */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    max-width: 100% !important; /* Adjust to full width of the container */
    width: 100% !important; /* Ensure the form is responsive */
    margin: 0 auto !important; /* Center form */
    box-sizing: border-box; /* Ensures proper spacing within the container */
}

/* Form title */
#nf-form-title-1 {
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #333 !important;
    margin-bottom: 10px !important; /* Reduced space below title */
}

/* Label styles */
.nf-field-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 5px !important; /* Reduced space between label and input */
    display: block !important;
}

/* Input and textarea fields */
.ninja-forms-field {
    width: 100% !important; /* Full width */
    padding: 10px !important; /* Reduced padding */
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    font-size: 15px !important; /* Slightly smaller font size */
    margin-bottom: 10px !important; /* Reduced margin between fields */
    background-color: #fff !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    line-height: 1.4 !important; /* Slightly reduced line height */
}

/* Focus effect on inputs and textareas */
.ninja-forms-field:focus {
    border-color: #899476 !important; /* Highlight border */
    box-shadow: 0 0 5px rgba(108, 99, 255, 0.4) !important; /* Subtle shadow on focus */
    outline: none !important;
}

/* Submit button */
input[type="submit"] {
    background-color: #899476 !important; /* Purple background */
    color: white !important;
    font-size: 15px !important; /* Reduced font size */
    padding: 10px 15px !important; /* Reduced button padding */
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    width: 100% !important; /* Full width for button */
}

/* Hover effect on submit button */
input[type="submit"]:hover {
    background-color: #424d2d !important; /* Darker purple on hover */
}

/* Error messages */
.nf-error-wrap {
    color: red !important;
    font-size: 14px !important;
    margin-top: 3px !important; /* Reduced margin for error messages */
}

/* Optional: Styling the form container for mobile responsiveness */
@media (max-width: 768px) {
    #nf-form-1-cont {
        padding: 15px !important; /* Less padding on smaller screens */
    }
    .ninja-forms-field {
        font-size: 14px !important; /* Slightly smaller font size */
    }
    input[type="submit"] {
        padding: 8px 12px !important; /* Smaller button */
    }
}

/* Remove the "Fields marked with an * are required" message */
#nf-form-1-cont .nf-before-form-content .nf-form-fields-required {
    display: none !important;
}

/* Adjust line spacing to 4px */
.ninja-forms-field,
.nf-field-label {
    margin-bottom: 4px !important; /* Further reduced bottom spacing */
}