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

form{
    display: flex;
    width: 100%;
    gap:35px;
}

.form-container-left{
    width: 100%;
}
.form-container-right{
    width: 100%;
}

.form-item{
    width: 100%;
    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{
    margin-top:40px;
}
.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;
}
.registration-type{
    margin-bottom:21px;
}
.participants-types{
    display: flex;
    gap:25px;
}
.participants-types input[type="radio"] {
    accent-color: var(--blue); /* Apply blue accent color when checked */
    display: none; /* Hide the default radio button for custom styling */
}

.participants-types label {
    position: relative;
    padding-left: 30px; /* Space for custom radio */
    cursor: pointer;
}

.participants-types label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #ccc; 
    border-radius: 50%;
    background-color: var(--white);
}

/* Style for checked radio button */
.participants-types input[type="radio"]:checked + label::before {
    background-color: var(--blue);
    border-color: var(--blue);
}
@media(max-width:767px){
    .form-main-container{
        padding: 90px 20px;
    }
    form{
        flex-direction: column;
        gap:5px;
    }
    
    .button-container{
        margin-top:25px;
    }
    .registration-type{
        margin-bottom:10px;
    }
}