.form-main-container{
    padding: 170px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.form-item{
    width: 500px;
    padding: 30px 25px;
    box-shadow: 0 0 10px rgba(83, 91, 107, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap:20px;
}

.button-container .btn-submit{
    background: var(--blue);
    color: var(--white);
    width: 100%;
    font-size:14px;
}

.group{
    display: flex;
    align-items: center;
    width: 100%;
}
.group i{
    font-size: 23px;
    position: absolute;
    margin-top: 1px;
    margin-left:3px;
    background: transparent;
    padding: 0 5px;
    color: var(--black);
    transition: color 0.3s;
}

.group input{
    padding-left:38px;
}
.group-container:focus-within label,
.group:focus-within i {
    color: var(--blue) !important; /* Change this to your desired color */
}


.group-item{
    display: flex;
    width: 100%;
}
.show-hide{
    display: flex;
    justify-content: center;
    margin-left:-30px;
}
.show-hide button{
    background: transparent;
    border: none;
    outline: none;
}

@media(max-width:767px){
    .form-main-container{
        padding: 90px 20px;
    }
}