* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container {
    background-color: #ffffff;
    display: flex;
    width: 1000px;
    max-width: 100%;
    min-height: 450px;
   
    margin-left: 20px;
    margin-right: 20px;
}
.container-1 {
    padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f2f2;
  width: 50%;
    
}
.signin {
font-size: 32px;
}
.social-icons {
    display: flex;
    flex-direction: row;
    width: 40px;
   height: 40px;
   gap: 10px;
  justify-content: center;
 margin: 15px;
}
.f-icon {
    border: 1px solid rgb(221, 224, 227);
    border-radius: 50%;
    padding: 5px;
}
.g-icon {
    border: 1px solid #d9dde0;
    border-radius: 50%;
    padding: 5px;
}
.in-icon {
    border: 1px solid #d9dde0;
    border-radius: 50%;
    padding: 5px;
}
span {
    color: #7d7d7d;
    margin-bottom: 6px;
}
form {
    width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  align-items: center;
}
input {
      display: flex;
    width: 250px;
    height: 30px;
   
}
.forgot-pass {
  color: #333333;
  font-size: 13px;
  text-decoration: none;
  margin-top: 5px;
  text-align: center;
}
.forgot-pass:hover {
    color: #5a5656;
    text-decoration: underline #070707;
}
.btn-signin {
  background-color: #e45137; 
  display: flex;
  border: none;
  border-radius: 20px;
  width: 130px;
  height: 32px; 
  color: #ffffff;
  font-weight: bold;
  font-size: 10px;
 margin: auto;
 align-items: center;
 justify-content: center;
}
.btn-signin:hover {
    color: #ece7e7;
    background-color: #e93d1f;
}
.container-2 {
      padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #e45137;
  width: 50%; 
}
.container-2 > h2 {
    color: #ffffffe4;
    margin-bottom: 25px;
    font-size: 32px;
    font-weight: 700
}
.container-2 > p {
      color: #f7f4f4bf;
      margin-bottom: 25px;
      text-align: center;
}
.btn-signup {
   background-color: transparent; 
  border: 1px solid #ffffffa8;
  border-radius: 20px;
  width: 130px;
  height: 32px; 
  color: #ffffff;
  font-weight: bold;
  font-size: 10px;
}
.fb-body {
    background-color: #e8ebee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fb-page {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.left {
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.logo {
    color: #1877f2;
    font-size: 56px;
 margin-bottom: 6px;   
}
.text {
    color: #333338;
    font-size: 24px;
    font-weight: 430;
}
.right {
    display: flex;
    flex-direction: column;
    min-width: 35%;
}
.card {
    max-width: 700px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.box {
    width: 100%;
    height: 50px;
    border: 1px solid #dddfe2;
}
.btn-blue {
    background-color: #1877f2;
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 550;
}
.btn-blue:hover {
    background-color: #125dbf;
    color: #d2cdcd;
}
.forgot {
    text-decoration: none;
    color: #1877f2;
}
.forgot:hover {
    color: #125dbf;
    font-weight: 600;
    text-decoration: underline;
}
.btn-green {
    background-color: #42b72a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  width: 180px;
  height: 45px;
}
.btn-green:hover{
    background-color: #278f12;
    color: #d5d0d0;
}
.fb-signin-1 {
 text-decoration: none;
 font-size: 28px;
 color: #1877f2;
 font-weight: 560;
background-color: #e85a40;
border-radius: 20px;
padding: 13px 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.fb-signin-1:hover {
    background-color: #e24a2f;
    color: #0d52ad;

}
.signin-2 {
 text-decoration: none;
 font-size: 28px;
 color:  #e85a40;
 font-weight: 560;
 background-color: #1877f2;
 border-radius: 20px;
 padding: 16px 50px;
 margin-top: 30px;
}
.signin-2:hover {
    background-color: #0d52ad;
    color: #e24a2f;
}