.main-content-wrapper{
    min-height: 580px;
}
.main-content-wrapper .page-heading{
    margin: 20px auto;
    width: 100%;
    /* border: 1px solid black; */
}
.main-content-wrapper .page-heading h2{
    
    text-align: center;
}

.card-container{
    display: flex;
    gap: 1rem;
    justify-content:space-evenly;
    align-items:center;
    margin: 50px 10px;

}

.image-card{
    /* width: 380px; */
    /* height: auto; */
    /* background-color: #f4f4f4; */
    /* border: 1px solid black; */
    /* box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2); */


}
.login-form-card{
    /* width: 380px; */
    /* height: auto; */
    /* background-color: #f4f4f4; */
    /* border: 1px solid black; */
    /* box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2); */


}


.page-logo{
    width: 500px;
    height: 400px;
}

/* form style ----------------------------------------------------------------------------------------------------------- */

/*Main Component*/
#main-contant{
 /* min-height: 550px;    */
}
#login-box{
    
    /* display:grid;
    grid-template-columns:320px;
    justify-content:center; */
    /* min-height:500px; */
    
}

#login-box .login-div{
    font-family: sans-serif;
    width: 380px;
    /* min-height: 300px; */
    background: rgba(0,0,0,0.5);
    /*  */
    color: #fff;
    padding: 10px;
}

.avtar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    top: -50px;
    left: calc(50% - 50px);
    
}
.form-header{
    text-align: center;
    font-size: 25px;
    margin-top: -30px;
    margin-bottom: 20px;
    
}
.login-div .bold-text{
    margin: 0px;
    padding: 0px;
    font-weight: bold;
}
.login-div input{
    width: 100%;
    margin-bottom: 20px;
}

.login-div input[type="text"],input[type="password"]{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}
.login-div input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    /* background: #1c8adb; */
    background: var(--secondary-color);
    
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}
.login-div input[type="submit"]:hover{
    cursor: pointer;
    /* background: #39dc79; */
     background: var(--primary-light-color);
    color: #000;
}
.login-div a{
    text-decoration: none;
    font-size: 14px;
    color: #fff;
}
.login-div a:hover{
    color: #2EB7FA;
}
.login-form-footer{
    display: flex;
    justify-content: space-between;
}
.sign-up-para a{
    text-decoration: underline;
   
   
}


/* Responsive design */
@media (max-width:768px) {
    .card-container{
        flex-direction: column;
        justify-content: center;
       flex-direction: column-reverse;
       margin: 5px 1px;
    }
    
    .page-logo{
        display: none;
    width: 100%;
    height: 300px;
}
.login-form-card{
width: 100%;
margin-top: 50px;
}

#login-box .login-div{
    width: 100%;
    padding: 10px;
}
    
}