.login-wrapper {
  padding-block: 3rem;
  display: flex;

  gap: 5rem;
}


.login-wrapper figure{
    width: calc((100% - 5rem) / 2);
}
.login-wrapper figure img{
    width: 100%;
    height: auto;
}

.login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   margin-right: 5rem;
       width: calc((100% - 5rem) / 2);

}


.login-form form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* border: 2px solid red; */
    width: 100%;
    padding: 1rem; 
    box-shadow: 1px 1px 5px (--border-color), -1px -1px 5px (--border-color) ;
    width: 100%;
    
}
.form-heading{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-form form h3{
    font-size: 1.5rem;
    font-weight: 600;
}
.login-form form P{
    color: var(--content-color);
}
.login-form form fieldset{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: none;
    position: relative;
    /* border: 2px solid red; */
}
.login-form fieldset input{
    padding-inline-start: 2rem;
    /* border: 2px solid red; */
    width: 100%;
}
 .inp{
    padding: .5rem;
    padding-inline-start: 1rem;
    border: 1px solid var(--black-color);
    border-radius: .3rem;
    transition: all ease-in-out .3s;
    
}
.inp::placeholder{
    color: var(--content-color);
}
.login-form .forgot-section{
    display: flex;
    justify-content: flex-end;
}
.login-form .forgot-section a{
    text-decoration: none;
    color: var(--primary-color);
   /* margin-left: 12rem; */
}
.login-form #fa_eye{
    position: absolute;
    right: .5rem;
    bottom: .6rem;
}
#fa_envelope ,#fa_key, #fa_user{
    position: absolute;
    left: .5rem;
    bottom: .6rem;
}
label{
/* border: 2px solid red; */
    font-weight: bold;
    color: var(--black-color);
}
.login-form .form-btn{
width: 100%;
font-size: 1rem;
}

/* SIGNUP-CSS */
.have-account{
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
    gap: .5rem;
    padding-top: 1rem;
}
.have-account a{
    text-decoration: none;
    color: var(--primary-color);
}
.login-form .or{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* margin-top: 2rem; */

}
.login-form .or hr{
    width: 10rem;
    height: .5px;
    background-color: rgb(193, 190, 190);
    border: none;
}

@media (max-width: 768px) {
/* LOGIN-FORM */
.login-form{

       width: 100%;

}
.login-wrapper figure{
    display: none;

}
.login-wrapper {
    gap: 0rem;
}
}