body{
    background-color: #FFFFFF;
}
.container{
  background-color: #FFFFFF; 
  color: #000A23;
  font-family: sans-serif; 
  margin: 0 auto;
  transform: scale(0.57);
  padding: 20px;
  width: 100%; 
}
.container h2{
  color: #000A23;  
  font-family: sans-serif;
  border: none;
  text-align: center;
  font-size: 40px;
}
.container p{
    font-size: 20px;
    font-family: sans-serif;
    color: #555;
    text-align: center;
    margin-bottom: 70px;
}
.forgot-password-form  input{
    border:  2px solid #ddd;
    height: 60px;
    width: 80%;
    margin-bottom: 230px;
    font-size: 20px;
    text-align: center;
    margin-left: 10%;
    border-radius: 10px;
}
.forgot-password-form  button{
    background-color: #000A23;
    color: #FFFFFF;
    border-radius: 30px;
    border: none;
    text-align: center;
    margin-left: 25%;
    height: 60px;
    width: 50%;
    font-size: 20px;
    font-family: sans-serif;
    box-shadow: 4px 6px 7px #000A23;
}
.forgot-password-form  button:hover{
    background-color: #FFA310;
    box-shadow: 4px 6px 8px grey;
}



@media (max-width: 767px) {
    body{
    width: 100%;
    margin: 0;
    padding: 0;
}
.container{
  margin: 0 auto;
  transform: scale(0.9);
  width: 100%;
  margin-left: -5%;  
  margin-top: 15%;
}
.container h2{
  font-size: 30px;
}
.container p{
    font-size: 16px;
}
.forgot-password-form  input{
    height: 60px;
    width: 80%;
    font-size: 15px;
}
.forgot-password-form  button{
    margin-left: 10%;
    height: 60px;
    width: 80%;
    font-size: 15px;
}

}