*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body{
            font-family:'Poppins', sans-serif;
            min-height:100vh;
            background:linear-gradient(135deg,#dbeafe,#eef4ff);
            overflow-x:hidden;
            position:relative;
            /*padding:20px;*/
        }

        /* Background Circle */

        body::before{
            content:'';
            position:absolute;
            width:500px;
            height:500px;
            background:rgba(37,99,235,0.15);
            border-radius:50%;
            top:-220px;
            left:-150px;
        }

        body::after{
            content:'';
            position:absolute;
            width:450px;
            height:450px;
            background:rgba(37,99,235,0.12);
            border-radius:50%;
            bottom:-200px;
            right:-120px;
        }

        /* Wrapper */

        .login-wrapper{
            min-height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            position:relative;
            z-index:10;
        }

        /* Card */

        .login-card{
            width:100%;
            max-width:430px;
            background:#fff;
            border-radius:25px;
            padding:40px 35px;
            box-shadow:0 15px 40px rgba(0,0,0,0.12);
            border-top:5px solid #2563eb;
            animation:fadeIn 0.8s ease;
        }

        /* Logo */

        .logo-circle{
            width:90px;
            height:90px;
            margin:auto;
            border-radius:50%;
            background:linear-gradient(135deg,#2563eb,#1d4ed8);
            display:flex;
            justify-content:center;
            align-items:center;
            color:#fff;
            font-size:36px;
            margin-bottom:20px;
            box-shadow:0 10px 25px rgba(37,99,235,0.35);
        }

        /* Title */

        .brand-title{
            text-align:center;
            font-size:42px;
            font-weight:700;
            color:#111827;
            margin-bottom:10px;
        }

        .brand-title span{
            color:#2563eb;
        }

        .sub-text{
            text-align:center;
            color:#6b7280;
            margin-bottom:30px;
            font-size:16px;
        }

        /* Inputs */

        .input-group{
            margin-bottom:20px;
        }

        .form-control{
            height:55px;
            border:1px solid #dbe3f1;
            border-radius:14px 0 0 14px !important;
            padding-left:18px;
            font-size:15px;
            box-shadow:none !important;
        }

        .form-control:focus{
            border-color:#2563eb;
        }

        .input-group-text{
            width:55px;
            justify-content:center;
            background:#eff6ff;
            color:#2563eb;
            border:1px solid #dbe3f1;
            border-left:none;
            border-radius:0 14px 14px 0 !important;
            font-size:18px;
        }

        /* Button */

        .login-btn{
            height:55px;
            border:none;
            border-radius:14px;
            background:linear-gradient(135deg,#2563eb,#1d4ed8);
            color:#fff;
            font-size:18px;
            font-weight:600;
            transition:0.3s;
            box-shadow:0 10px 25px rgba(37,99,235,0.25);
        }

        .login-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 14px 30px rgba(37,99,235,0.35);
        }

        /* Animation */

        @keyframes fadeIn{

            from{
                opacity:0;
                transform:translateY(30px);
            }

            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        /* ================= RESPONSIVE ================= */

        @media(max-width:768px){

            .login-card{
                padding:30px 25px;
            }

            .brand-title{
                font-size:34px;
            }

            .sub-text{
                font-size:15px;
            }

            .logo-circle{
                width:75px;
                height:75px;
                font-size:30px;
            }

            .form-control{
                height:50px;
                font-size:14px;
            }

            .input-group-text{
                width:50px;
                font-size:16px;
            }

            .login-btn{
                height:50px;
                font-size:16px;
            }
        }

        /* Mobile */

        @media(max-width:480px){

            body{
                padding:12px;
            }

            .login-wrapper{
                align-items:center;
            }

            .login-card{
                padding:25px 18px;
                border-radius:18px;
            }

            .brand-title{
                font-size:28px;
            }

            .sub-text{
                font-size:14px;
                margin-bottom:25px;
            }

            .logo-circle{
                width:65px;
                height:65px;
                font-size:24px;
                margin-bottom:15px;
            }

            .form-control{
                height:46px;
                font-size:14px;
                padding-left:14px;
            }

            .input-group-text{
                width:46px;
                font-size:15px;
            }

            .login-btn{
                height:46px;
                font-size:15px;
            }

            body::before{
                width:220px;
                height:220px;
                top:-100px;
                left:-100px;
            }

            body::after{
                width:220px;
                height:220px;
                bottom:-100px;
                right:-100px;
            }
        }