/* ======================================================
   PC-LINK LOGIN
====================================================== */

:root{

    --primary:#005BAA;
    --primary-dark:#00488A;

    --bg:#EEF3F8;

    --white:#FFFFFF;

    --text:#2C3E50;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--bg);

}

/* ===========================
        PAGE
=========================== */

.login-page{

    display:flex;
    min-height:100vh;

}

/* ===========================
        LEFT
=========================== */

.login-left{

    width:45%;

    background:linear-gradient(135deg,#005BAA,#003F78);

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:70px;

    position:relative;

    overflow:hidden;

}

.login-left::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(255,255,255,.05);

top:-180px;

left:-120px;

}

.login-left::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(255,255,255,.04);

bottom:-150px;

right:-120px;

}

.brand{

    margin-bottom:50px;

    animation:fadeUp .7s ease;

}


.logo-pclink{

    width:180px;

    display:block;

    margin-bottom:25px;

    filter:drop-shadow(0 12px 20px rgba(0,0,0,.20));

}


.brand h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:5px;

}

.brand p{

    opacity:.85;

    font-size:18px;

}

.brand-text h3{

    font-size:30px;

    margin-bottom:20px;

}

.brand-text p{

    font-size:17px;

    line-height:1.8;

    opacity:.9;

}

.feature-list{

    margin-top:50px;

}

.feature-list div{

    margin-bottom:18px;

    font-size:17px;

}

.feature-list i{

    margin-right:10px;

}

/* ===========================
        RIGHT
=========================== */

.login-right{

    width:55%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/* ===========================
        CARD
=========================== */

.login-card{

    width:420px;
    
    border-radius:18px;

    padding:45px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.4);

    -webkit-backdrop-filter:blur(20px);

}
<
.login-card h2{

    font-weight:700;

    margin-bottom:10px;

}

.form-control{

    height:48px;

    border-radius:10px;

}

.form-control:focus{

    border-color:#005BAA;

    box-shadow:none;

}

.input-group .btn{

    border-radius:0 10px 10px 0;

}

.btn-primary{

    background:#005BAA;

    border:none;

    height:50px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.btn-primary:hover{

    background:#00488A;

    transform:translateY(-2px);

}

/* ===========================
        VERSION
=========================== */

.version{

    text-align:center;

    margin-top:35px;

    color:#888;

    font-size:14px;

}

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

@media(max-width:992px){

.login-left{

display:none;

}

.login-right{

width:100%;

}

.login-card{

width:100%;

max-width:430px;

animation:fadeUp .8s ease;

}

/* ======================================================
   INPUT ANIMATION
====================================================== */

.input-group-text{

background:white;

border-right:none;

}

.input-group .form-control{

border-left:none;

}

.input-group:focus-within{

box-shadow:0 0 0 .18rem rgba(0,91,170,.15);

border-radius:10px;

}

}



@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:none;

}

}

.login-card{

animation:fadeUp .8s ease;

}

.brand{

animation:fadeUp .7s ease;

}

.feature-list{

animation:fadeUp .9s ease;

}