/* Custom styling for Forgot Password Page */
body {
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: #fff;
    font-family: 'Arial', sans-serif;
}

.card {
    background-color: #ffffff;
    border-radius: 15px;
}

.card-title {
    font-weight: bold;
    color: #2575fc;
}

.btn-primary {
    background: linear-gradient(90deg, #2575fc, #6a11cb);
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.4s ease;
    background-size: 200% 200%;
    animation: gradientAnimation 3s infinite;
}

.btn-primary:hover {
    background-position: right center; /* Smoothly animate to a new position */
    box-shadow: 0px 4px 15px rgba(37, 117, 252, 0.6);
    transform: scale(1.05); /* Slightly enlarge the button */
}

input:focus {
    border-color: #2575fc;
    box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
}

.alert {
    font-size: 0.9rem;
    border-radius: 5px;
}

a {
    color: #2575fc;
}

a:hover {
    text-decoration: underline;
}

/* Keyframes for gradient animation */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}