/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #e6f2f8 !important; /* Lighter grey background */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 600px;
}

/* Login Container */
body .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* Makes sure this takes up available space */
    padding: 0 20px;
}

body .login-card {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff !important; /* White background for the card */
    border: 2px solid #4CAF50 !important; /* Green border */
}

/* Heading */
body .login-card h2 {
    text-align: center;
    color: #333333 !important; /* Dark text color */
}

/* Error Message */
body .login-card .error-message {
    color: red;
    text-align: center;
}

/* Form Input */
body .login-card input[type="text"],
body .login-card input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Button */
body .login-card button[type="submit"] {
    background-color: #4CAF50 !important; /* Green color */
    border: none !important;
    color: #fff !important;
    padding: 12px !important;
    width: 60% !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: block;           
    margin: auto;
}

body .login-card button[type="submit"]:hover {
    background-color: #45a049 !important; /* Darker green for hover effect */
}

/* Footer - Developed by text */
.developed-by {
    text-align: center;
    font-size: 0.9rem;
    color: #888;
    margin-top: 20px; /* Adds space between the login card and footer */
}
.text-center{
    color: #007b8f !important;;
}
.developed-by strong {
    color: #333;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    body .login-container {
        padding: 20px;
    }

    body .login-card {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    body .login-container {
        padding: 10px;
    }

    body .login-card {
        max-width: 100%;
        padding: 20px;
    }
}