@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
body {
  margin: 0;
  padding: 0; 
  font-family: 'Poppins', sans-serif;
} 
.bg{
  background:url(../images/login.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height:100vh;
}
.bg::before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width:25%;
  height:100%;
  background:#000;
  opacity: 0.4;
}
.form{
  position:absolute;
  top:50%;
  left:25%;
  transform:translate(-50%,-50%);
  width:350px;
  min-height: 400px;
  background:#8097d557;
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
  padding:50px;
  box-sizing: border-box;
  border-radius: 12px;
}
.form h4{
  color:#f0e9e9;
  margin:0 0 40px;
  padding:0;
}
.form .input-box{
  position:relative;
  margin:20px 0;
}
.form .input-box input,select{
  width:100%;
  font-size: 16px;
  border:none;
  border-bottom:2px solid #777;
  outline:none;
  padding:10px;
  padding-left:30px;
  box-sizing: border-box;
  font-weight: 700;
  color:#777;
}
.form .input-box input:focus,
.form .input-box input:valid{
  border-bottom-color:#5656db;
}
.form .input-box .fa{
  position:absolute;
  top:8px;
  left:5px;
  font-size: 18px;
  color:#777;
}
.form .input-box input[type="submit"]{
  border:none;
  cursor: pointer;
  background:#5656db;
  color:#fff;
  font-weight: bold;
  transition:0.5s;
  border-radius: 8px;
}
.form .input-box input[type="submit"]:hover,
.form a:hover{
  background:#3030ce;
}
.form a{
  text-decoration: none;
  color:#777;
  margin-top:20px;
  font-weight: bold;
  display: inline-block;
  transition:0.5s;
}

@media (max-width:767px){
  .bg::before{
    width:100%;
  }
  .form{
    left:50%;
  }
}