/* Specific styles for the login form */
.login-form {
    width: 100%; /* Make the form full width of its container */
    max-width: 300px; /* Limit the form width */
    margin: 20px auto; /* Center the form horizontally with space around it */
    padding: 20px;
    border: 1px solid #ccc; /* Light border around the form */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* Styling for form labels */
.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Styling for input fields */
.login-form input {
    width: 100%; /* Ensure input fields are full width */
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px; /* Rounded corners for inputs */
    border: 1px solid #ccc; /* Border around the inputs */
}

/* Styling for the login button */
.btn-login {
    width: 100%; /* Make the button take up full width */
    padding: 10px;
    background: #8bb32a; /* Initial button color */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Button hover effect */
.btn-login:hover {
    background: #45a049; /* Darker green on hover */
}

/* Ensure the form is centered in the page */
.page-heading {
    margin-bottom: 40px; /* Adjust space between the header and the form */
}

/* Responsive Form Layout */
@media (max-width: 767px) {
    .login-form {
        width: 90%; /* Make the form 90% width on mobile */
    }
}