form {
    background-color: #f8f9fa; /* Light background for the form */
    border: 1px solid #dee2e6; /* Subtle border for the form */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Internal padding for spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for a floating effect */
    max-width: 600px; /* Limit the form's width */
    margin: 20px auto; /* Center the form horizontally */
    font-family: 'Arial', sans-serif; /* Clean, readable font */
}

form h3 {
    text-align: center; /* Center the heading */
    color: #007bff; /* Accent color for the heading */
    font-weight: bold;
    margin-bottom: 20px;
}

form label {
    font-weight: bold; /* Emphasize labels */
    color: #495057; /* Subtle gray color for labels */
text-align: left; /* Align text to the left */
    display: block; /* Ensure the label spans the full width */
}

form input, form select, form textarea {
    width: 100%; /* Full width for input fields */
    padding: 10px; /* Internal padding for better usability */
    margin-bottom: 15px; /* Space between form elements */
    border: 1px solid #ced4da; /* Subtle border for inputs */
    border-radius: 5px; /* Rounded corners for inputs */
    font-size: 14px; /* Consistent font size */
    color: #495057; /* Input text color */
    background-color: #fff; /* White background for inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth focus effect */
}

form input:focus, form select:focus, form textarea:focus {
    border-color: #007bff; /* Highlighted border on focus */
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.25); /* Subtle glow effect */
    outline: none; /* Remove default outline */
}

form .form-check {
    margin-bottom: 20px; /* Space for checkboxes */
}

form .form-check-label {
    font-weight: normal; /* Lighter font for checkbox labels */
    color: #495057;
}

form button {
    width: 100%; /* Full-width button */
    padding: 12px; /* Comfortable button size */
    font-size: 16px; /* Slightly larger font for emphasis */
    font-weight: bold;
    color: #fff; /* White text */
    background-color: #007bff; /* Primary color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded button */
    cursor: pointer; /* Pointer cursor for buttons */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

form button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow on hover */
}

form button:active {
    background-color: #004085; /* Even darker on click */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow for pressed effect */
}
