body {
background-color: #f6f9fd !important;
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
display: flex;
overflow: hidden; 
justify-content: center;
align-items: center;
margin: 0;
}

/* Login background image positioning */
.login-bg {
position: absolute;
left: 3%;
top: 12%;
}

.login-bg img {
width: 85%;
}

/* Card styling with gradient border */
.card {
border: 5px solid;
border-image: linear-gradient(45deg, #ff4ec4, #6a5af9, #00c2ff, #00ff9c, #ffdd57) 1;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
animation: fadeInUp 0.6s ease;
max-width: 500px;
width: 100%;
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

/* Card body */
.card-body {
background-color: #ffffff;
border-radius: 10px;
padding: 30px;
}

/* Headings */
h4.text-muted {
color: #1a237e !important;
font-weight: 600;
}

/* Input fields */
input[type="text"], input[type="password"] {
height: auto !important;
}

.form-control {
border-radius: 0.25rem;
}

/* Username field with orange border */
input[name="username"] {
border: 2px solid #ff9800;
border-radius: 10px;
padding: 10px;
transition: box-shadow 0.3s ease;
}

input[name="username"]:focus {
box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
outline: none;
}

/* Password field with gradient border */
input[name="password"] {
border: 2px solid transparent;
border-radius: 10px;
padding: 10px;
background-image: linear-gradient(#fff, #fff),
                    linear-gradient(to right, #ff4ec4, #ff9800, #4caf50, #2196f3);
background-origin: border-box;
background-clip: padding-box, border-box;
transition: box-shadow 0.3s ease;
}

input[name="password"]:focus {
box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
outline: none;
}

/* Gradient login button */
.btn-primary {
background: linear-gradient(to right, #ff4ec4, #ff9800, #4caf50, #2196f3) !important;
border: none !important;
border-radius: 25px;
padding: 10px 20px;
font-weight: bold;
color: #fff !important;
transition: background 0.3s ease;
}

.btn-primary:hover {
background: linear-gradient(to right, #2196f3, #4caf50, #ff9800, #ff4ec4) !important;
}

/* Footer link */
.foo-text {
color: #0636f7;
font-weight: 500;
text-decoration: none;
}

.foo-text:hover {
color: #2196f3;
text-decoration: underline;
}

/* Placeholder styling */
::placeholder {
color: #999;
font-style: italic;
}

.text-muted {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    background: linear-gradient(45deg, #071bf8, #dd2476, #1fa2ff);

    -webkit-background-clip: text; /* Chrome, Safari */
    background-clip: text;         /* Standard property */

    -webkit-text-fill-color: transparent;

    transition: all 0.3s ease;
}

.text-muted i {
    margin-right: 5px;
}

.text-muted:hover {
    text-decoration: underline;
    transform: scale(1.05);
}

/* General responsive adjustments */
@media (max-width: 576px) {
/* Reduce heading spacing */
.text-center.mt-5.mb-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 1.2rem; /* smaller heading size */
}

/* Card should fit neatly */
.card {
    max-width: 100%;      /* allow full width */
}

/* Card body padding */
.card-body {
    padding: 20px;
}

/* Inputs full width */
.form-control {
    width: 100%;
    font-size: 0.95rem;   /* slightly smaller text */
}

/* Login button full width */
.btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
}

/* Footer text smaller */
.foo-text {
    font-size: 0.85rem;
}
.auth-logo img {
    height: 38px;   /* smaller logo height */
}}