.container{
    
    margin: 30px auto;
    padding: 20px;
    max-width: 600px;
    background-color: var(--light-hover);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#submit{
    margin: 10px 0;
}
.tab-content{
    display: none;
}
.tab-content.active{
    display: block;
    
}

.togl-btns{
    padding: 10px 0px;
}
.togl-btns .btn{
    border-radius: 20px;
    border: 2px solid var(--red);
    color: var(--red);
}
.tab-btn.active{
    background-color: var(--red);
    color: var(--light);
}
.avatar-option {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s;
}
input[type="radio"]:checked + .avatar-option {
    border-color: #dc3545; /* Bootstrap Danger color */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.6);
}
input[type="checkbox"],
input[type="radio"] {
    appearance: none;  /* Remove the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    border: none;  /* Remove the border */
}
.form-control{
    background-color: var(--light);
}