body{
 font-family:"Tajawal";
  background:#fafafa;
}
.login-area{ 
position:absolute;
top:60%;
left:50%;
transform:translate(-50%,-50%);
direction:rtl;
text-align:right;

}    
#login{
background:#ffffff;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
border: none;
padding:20px 25px 30px;
}
form label{
 font-weight:bold;
 font-family:"Tajawal";
}
form input{
margin-bottom:20px;
}
form input:focus{
outline:none;
box-shadow:none
}
.btn-login{
  background: linear-gradient(90deg, #2563EB, #1D4ED8);
  border: none;
  border-radius: 12px;
  font-weight: 500;
  padding: 7px;
  width:100%;
  color:white;
  font-family:"Tajawal";
  font-size:24px
}
.back:hover{
text-decoration:none
}
#show{
display:none
}
.password{
 position: relative;
}
.show-password{
  position:absolute;
  top:9px;
  left:17px;
  cursor:pointer
}
@media (max-width:575px){
 .login-area{
    width:90%;
 }
}
@media (min-width:576px) and (max-width:768px){
 .login-area{
    width:90%;
 }
}