*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:#f4f7fc;

}

.container{

    display:flex;
    min-height:100vh;

}

.left{

    flex:1;

}

.left img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.right{

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#fff;

}

.login-box{

    width:380px;

}

.login-box h2{

    font-size:34px;
    color:#333;
    margin-bottom:10px;

}

.login-box p{

    color:#777;
    margin-bottom:35px;

}

.input-group{

    position:relative;
    margin-bottom:20px;

}

.input-group i{

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#999;

}

.input-group input{

    width:100%;
    padding:16px 18px 16px 50px;

    border:none;

    background:#f5f5f5;

    border-radius:50px;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.input-group input:focus{

    background:#ececec;

}

.options{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:25px 0;

    font-size:14px;

}

.options a{

    text-decoration:none;

    color:#4b70ff;

}

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:50px;

    background:#4b70ff;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#3559dc;

}

.register{

    margin-top:30px;

    text-align:center;

    color:#777;

}

.register a{

    color:#4b70ff;

    text-decoration:none;

    font-weight:600;

}

@media(max-width:900px){

    .container{

        flex-direction:column;

    }

    .left{

        height:280px;

    }

    .right{

        padding:40px 20px;

    }

    .login-box{

        width:100%;

        max-width:400px;

    }

}