body 
{
    background : #f6f6f6;
}

.signupFrame1
{
    margin : 1rem auto;
    max-width : 550px;
    display : flex;
    flex-direction : column;
    align-items: center;
    justify-content : center;
}

.signup__Container
{
    width : 100%;
    margin : 3rem auto;
    padding : 3rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 1rem;
    border-radius : 10px;
}

.signup__Container h3 
{
    font-size : 2.3rem;
    font-weight : 700;
    color : #2d3c58;
    text-transform : capitalize;
}

form 
{
    width : 100%;
    margin : 1rem 0rem;
    padding : 1rem 0rem;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
}

.firstName, .email, .password, .re-password
{
    width : 100%;
    margin : 0.3rem auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

.firstName input, 
.email input, 
.password input, 
.re-password input 
{
    width: 60%;
    color : #2d3c58;
    border : 1px solid #d4dcff;
    padding : 0.5rem 1rem;
    outline : none;
    border-radius : 5px;
}

.terms
{
    width : 100%;
    margin : 1rem 0rem;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    gap : 0.5rem;
}

.signup__Btn
{
    width : 50%;
    margin : 1rem auto;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    background : #0774ff;
    border-radius : 5px;
    padding : 0.5rem 1rem;
    transition : all 0.3s ease;
}

.signup__Btn:hover 
{
    background : #ffc107;
}

.signup__Btn:hover a 
{
    color : #2d3c58;
}

.signup__Btn a 
{
    color : #fff;
    font-weight : 600;
    font-size : 1rem;
    text-transform : capitalize;
}

.signin
{
    width : 100%;
    margin : 1rem auto;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content: center;
}

.terms input 
{
    border : none;
    border-radius : 0rem;
}

.terms p 
{
    font-size : 0.9rem;
    font-weight : 400;
    color : #4c5671;
}

.terms a , 
.signin a 
{
    text-decoration: underline;
    text-underline-offset : 5px;
    transition : all 0.3s ease;
}

.terms a:hover , 
.signin a:hover 
{
    text-decoration : none;
    color : #0774ff;
}

footer 
{
    width : 100%;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    margin : 1rem auto;
}


/*===================== MEDIA QUERY FOR SMALLER DEVICES =========================*/
@media screen and (max-width : 425px)
{
    .signup__Container h3 {
        font-size: 2rem;
        line-height : 2.2rem;
    }

    .firstName input, .email input, .password input, .re-password input 
    {
        width: 100%;
    }

    .signup__Btn 
    {
        width: 100%;
    }

}