/* General Styles */
    body {
        background: linear-gradient(135deg, #f0f4f8 0%, #d9e4f5 100%);
    }

    /* Login Form */
    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .card-body {
        padding: 2rem;
    }
    .form-label {
        font-weight: 500;
    }
    .form-control {
        border-radius: 10px;
        border-color: #ced4da;
    }
    .form-control:focus {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        border-color: #007bff;
    }
    .btn-dark {
        background: linear-gradient(90deg, #343a40, #6c757d);
        border: none;
        border-radius: 10px;
        padding: 10px;
        font-weight: 500;
    }
    .btn-dark:hover {
        background: linear-gradient(90deg, #23272b, #495057);
        color: #fff;
    }
    .btn-google, .btn-facebook {
        border-radius: 10px;
        padding: 10px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .btn-google {
        background-color: #ffffff;
        color: #333;
        border: 1px solid #ccc;
    }
    .btn-google:hover {
        background-color: #ffffff;
        border-color: #4285F4;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .btn-google:hover .fab,
    .btn-google:hover span {
        background: linear-gradient(90deg, #4285F4, #DB4437, #F4B400, #0F9D58);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        transition: all 0.3s ease;
    }
    .btn-facebook {
        background-color: #3b5998;
        color: #ffffff;
    }
    .btn-facebook:hover {
        background-color: #3b5998;
        color: #ffffff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .btn-google .fab, .btn-facebook .fab {
        font-size: 1.2rem;
        transition: transform 0.3s ease, font-size 0.3s ease;
    }
    .btn-google:hover .fab {
        transform: scale(1.2);
        font-size: 1.5rem;
    }
    .btn-facebook:hover .fab {
        transform: scale(1.2);
        font-size: 1.5rem;
    }
    .text-dark:hover {
        color: #007bff !important;
    }

    /* Password Toggle */
    .password-toggle {
        position: absolute;
        right: 10px;
        top: 70%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
    }
    .password-toggle:hover {
        color: #007bff;
    }

    /* Alert */
    .alert {
        border-left: 4px solid #dc3545;
        border-radius: 5px;
        padding: 10px;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .card {
        animation: fadeIn 0.5s ease-in-out;
    }