/* CSS Document */

 body {
            font-family: 'Poppins', sans-serif;
            background-color: #f3f4f6;
            background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            min-height: 100vh;
        }

        .login-card {
            background: white;
            padding: 3rem;
            border-radius: 20px;
            -webkit-box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            width: 100%;
            max-width: 450px;
            border: 1px solid rgba(0, 0, 0, 0.02);
        }

        .brand-logo {
            width: 60px;
            height: 60px;
            background: #EFF6FF;
            /* Soft Blue */
            color: #2563EB;
            border-radius: 12px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
        }

        .form-control {
            background-color: #F9FAFB;
            border: 1px solid #E5E7EB;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-size: 0.95rem;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .form-control:focus {
            background-color: #fff;
            border-color: #2563EB;
            -webkit-box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
                    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        }

        .btn-primary-modern {
            background-color: #111827;
            /* Dark modern black/gray */
            color: white;
            border: none;
            padding: 0.8rem;
            border-radius: 10px;
            font-weight: 500;
            width: 100%;
            -webkit-transition: -webkit-transform 0.1s;
            transition: -webkit-transform 0.1s;
            transition: transform 0.1s;
            transition: transform 0.1s, -webkit-transform 0.1s;
        }

        .btn-primary-modern:hover {
            background-color: #000;
            -webkit-transform: translateY(-1px);
                    transform: translateY(-1px);
            color: white;
        }

        .input-group-text {
            background: #F9FAFB;
            border: 1px solid #E5E7EB;
            border-right: none;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            color: #9CA3AF;
        }

        .form-control-icon {
            border-left: none;
        }

         @media (max-width: 992px) {
             .login-card{
                margin: 1rem;
            }
           
        }