/* Enhanced Styling for the Login Form */
.card {
    border-radius: 15px; /* Softer corners for a modern look */
    overflow: hidden;
    border: none;
}

.card-header {
    font-size: 2rem; /* Larger header font */
    font-weight: bold;
    background-image: linear-gradient(90deg, #FFC107, #FFEB3B); /* Gradient effect with darker on the left and lighter on the right */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-bottom: none;
}

.card-header h3 {
    margin: 0;
}

.card-body {
    padding: 2rem; /* Spacious padding for content */
    background-color: #f4f6f9; /* Subtle background */
}

.form-label {
    font-weight: bold;
    color: #495057;
    font-size: 1rem;
}

.form-control {
    border-radius: 10px; /* Rounded input fields */
    border: 1px solid #ced4da;
    padding: 0.75rem;
    font-size: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.form-control:focus {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.8);
    border-color: #007bff;
}

.btn-block {
    padding: 12px 0; /* Increased button height */
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 10px;
    border: none; /* Removes the border */
    background-image: linear-gradient(90deg, #FFC107, #FFEB3B); /* Gradient effect with darker on the left and lighter on the right */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-block:hover {
    background-image: linear-gradient(90deg, #0056b3, #003f7f);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.text-primary {
    color: #0056b3 !important;
    font-weight: bold;
    transition: color 0.3s ease;
}

.text-primary:hover {
    color: #003f7f !important;
    text-decoration: underline;
}

/* Floating Image for Login Page */
.floating-image {
    position: absolute;
    bottom: 288px;
    right: -189px;
    width: 500px;
    opacity: 1; /* Ensure full visibility */
    z-index: 1; /* Keep the image on top */
    transform: rotate(128deg); /* Rotate the image -45 degrees */
    opacity: 0.6; /* Add transparency effect */
}

.login-page-container {
    position: relative;
    background-color: transparent; /* Ensure transparency */
}