@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Switzer", sans-serif !important;
}
body {
    font-family: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.login-container{
    display: flex;
}
.login-image{
    width: 45%;
}
.login-image {
    position: relative;      /* Makes this act like parent */
       /* Shrinks to image size */
}

.main-image {
    display: block;
    width: 100%;
}

.logo {
    position: absolute;
    top: 20px;     /* Change position as needed */
    left: 20px;    /* Change position as needed */
    height: 71px;
    width: 100px;
    cursor:pointer;
}
.signup-form{
    width: 55%;
    background: rgba(248, 243, 235, 0.34);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.signup-form h2{
    color:rgba(27, 27, 27, 1);
font-family: Switzer;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 30px;
}
.signup-form .name input{
    width: 174.956px;
height: 50.868px;
border-radius: 6px;
border: 0.771px solid rgba(218, 192, 153, 0.34);
background: #FFF;
}
.signup-form input{
    width: 373.805px;
height: 50.868px;
border-radius: 6px;
border: 0.771px solid rgba(218, 192, 153, 0.34);
background: #FFF;
}
.form-group.phone-group label {
    width: auto;
    white-space: nowrap;
}
 
.signup-form .name{
    display: flex;
    gap: 23px;
}
.signup-form label {
    color: #000;
font-family: Switzer !important;
font-size: 12.332px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 1.48px;
opacity: 0.5;
width: 132px;
height: 17px;
}
.sign-up{
    width: 374px;
height: 58px;
border-radius: 6px;
background: #301B0D;
}
.sign-up span{
    color: #FFF;
font-family: Switzer;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.3px;
}
.form-group.phone-group{
    margin-bottom: 30px;
}
.form-group{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.signup-form input{
    padding: 12px;
    font-size: 16px;
    font-family: Switzer;
}




@media (max-width: 768px) {
  .signup-form{
    width: 100% ;
    height: 100vh;
    background: rgba(248, 243, 235, 0.34);
    
}
.login-image{
    display: none;
}
.signup-form .name{
    display: flex;
    gap: 10px;
    
}
.signup-form .name input{
    width: 165px;
height: 45.868px;
border-radius: 6px;
border: 0.771px solid rgba(218, 192, 153, 0.34);
background: #FFF;
}

.signup-form input{
    width: 340.805px;
height: 45.868px;
border-radius: 6px;
border: 0.771px solid rgba(218, 192, 153, 0.34);
background: #FFF;
}
.signup-form input{
    padding: 12px;
    font-size: 16px;
    font-family: Switzer;
}
.signup{
    width: 340px;
height: 45px;
border-radius: 6px;
background: #301B0D;
margin-bottom: 40px;
}
.sign-up{
    width: 340px;
height: 45px;
border-radius: 6px;
background: #301B0D;
}
.sign-up span{
    color: #FFF;
font-family: Switzer;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.3px;
}

}
@media (min-height: 1200px) {
    .signup-form{
      width: 100%;
      height: 100vh;
    }
    .login-image{
        display: none;
    }
}