.col2 .wrapper {
    display: grid;
    grid-template-areas: 
    'group1'
    'group2'
    'group3'
    ;
    padding: 3rem;
    height: 115%;
    width: 85%;
    background-color: rgba(255, 255, 255, 0.986);
    border-radius: 2rem;
    box-shadow: 0.2rem 0rem 4rem 0rem black;
    gap:2rem;
}
.col2 .wrapper .group1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #313640;
}
.col2 .wrapper .group1>p{
    font-size: var(--fs-sm);
    color: #313640;
    font-weight: 800;
}
.col2 .wrapper .group1 .google,
.col2 .wrapper .group1 .facebook{
    background-color: rgb(44, 90, 218);
    color: white;
    box-shadow: 0.3rem 0.3rem 1rem 0rem #1f20223d;
    padding-right: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    width: 73%;
    justify-content: space-between;
    font-size: 1.5rem;
}
.google .google-img,
.facebook .facebook-img {
    padding: .5rem;
    border: 2px solid white;
    background-color: rgb(255, 255, 255);
}
.google .google-img img,
.facebook .facebook-img img{
    width: 2.2rem;
}
.col2 .wrapper .group1 h1{
    color: #313640;
    margin: 1rem;
    font-size: var(--fs-sm);
}
/* group2 */
.wrapper .group2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.wrapper .group2>p{
    font-size: var(--fs-sm);
    color: #313640;
    font-weight: 800;
    margin-bottom: 1rem;
}
.wrapper .group2 .form{
    flex-direction: column;
}
.wrapper .group2 .form>div{
    width: 80%;
    margin: auto;
    border-bottom: 1px solid #313640;
    padding: 1.5rem;
}
.wrapper .group2 .form div:last-child{
    border-bottom: none;
    margin-top: 1rem;
}
.form input {
    border: none;
    outline: none;
    margin-left: 1rem;
    font-size: var(--fs-sm);
    color: #313640;
    width: 100%;
}
.form .checkbox input{
    width: 3em;
    margin-left: 0rem;
}
.form i {
    font-size: var(--fs-md);
}
.form .checkbox span{
    font-size: var(--fs-sm2);
    color: #313640;
}
.group2 .login-btn{
    width: 25%;
    margin: auto;
}
.group2 .login-btn .button1{
    color: white;
    width: 100%;
    padding-block: .7rem;
}
.wrapper .group3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.wrapper .group3 >a{
    font-size: var(--fs-sm2);
}
.wrapper .group3>P{
    font-size: var(--fs-sm);
    color: #313640;
}