body {
   font-family: Arial, sans-serif;
   background-color: #f2f2f2;
 }

 #login .container {
   display: flex;
   max-width: 950px;
   margin: auto auto;
 }
 #login .container h1{
  font-size: 1.5em;
  margin-bottom: 1.4em;
 }
 #login .box {
   flex: 1;
   margin: 0 10px;
   padding: 2em;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 #login .box2 {
   height: 130px;
   flex: 1;
   margin: 0 10px;
   padding: 20px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 #login h2 {
   text-align: left;
   color: #333;
   margin-bottom: 20px;
 }

 #login label {
   display: block;
   margin-bottom: 10px;
   font-weight: 600;
   font-size: 14px;
   color: #555;
 }

 #login input[type="email"],
 #login input[type="password"] {
   width: 100%;
   padding: 13.5px 15px;
   margin-bottom: 35px;
   border: 1px solid rgb(129, 129, 129);
   border-radius: 4px;
   box-sizing: border-box;
 }
 #login #pbox{
  display: flex;
 }
 #login #pbox span{
  font-size: 12px;
  font-weight: 550;
  margin-left: -12%;
  margin-top: 4%;
  cursor: pointer;
 }
 #login .forgot-password {
   text-align: left;
   margin-bottom: 10px;
   margin-top: -10px;
 }

 #login .forgot-password button {
   border: none;
   background-color: white;
   text-decoration: underline;
   font-size: 16px;
   color: #555;
 }

 #login .Signin-buttons button {
   background-color: rgb(46, 51, 55);
   color: #fff;
   font-size: 14px;
   padding: 15px 20px;
   border: none;
   border-radius: none;
   width: 100%;
   margin-top: 0px;
   margin-bottom: 10px;
 }


 #login .login-buttons {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   gap: 4%
 }

 #login .login-buttons button {
   padding: 5px;
   border: 1px solid black;
   border-radius: none;
   font-size: 16px;
   display: flex;
   align-items: center;
   background-color: #fff;
   width: 48%;
   gap: 10px;
   font-size: 15px;
 }

 #login .icon{
  width: 17%;
  margin-left: 20%;
 }
 #login .facebook .icon{
  width: 15%;
 }
 #login .icon>img{
  width: 100%;
 }

 #login .nav {
   background-color: white;
   padding-left: 5em;
   margin-bottom: 3.5%;
 }
 #login .nav img{
  width: 15%;
  margin: 0;
 }
 #login .register-button button {
   background-color: rgb(46, 51, 55);
   color: #fff;
   font-size: 14px;
   padding: 15px 20px;
   border: none;
   border-radius: none;
   cursor: pointer;
   width: 100%;
   margin-top: 0px;
 }

 @media (max-width: 768px) {
   #login .container {
     flex-direction: column;
     max-width: 400px;
     padding: 0;
   }

   #login .box {
     margin: 10px auto;
     width: 100%;
   }
   #login .box2 {
    width: 106%;
    margin: auto;
   }
   #login .nav{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
   }
   #login .nav img{
    width: 25%;
    margin: 0;
   }
 }