
.main-container h1 {
    font-size: 32px;
    font-weight: 700;
}
.main-container {
 width: calc(100% - 100px);
 padding-top:100px;
    float:left;
}

.left-menu{
    float:left;
}

.main-container h4 {
    font-size: 16px;
    color: #666;
    margin:0 0 20px 0;
}


.single-option {
    overflow: hidden;
    margin:15px;
    cursor:pointer;
    border:1px solid #dcdcdc;
    padding:10px 0;
    background: linear-gradient(45deg, #eff0f8, #f8f8f8);
    transition: all 0.7s ease;
}

.single-option.active {
    overflow: hidden;
    margin:15px;
    cursor:pointer;
    border:1px solid #3748E5;
    padding:10px 0;
    transition: all 0.7s ease;
}

.onboarding-journey.steps-container {
    background: #fff;
    border: 1px solid #dddddd;
    border-radius:10px;
    overflow:hidden;
}




.onboarding-journey.steps-container h4{
    font-size: 30px;
    padding: 13px 15px;
    color: #fff;
    background: #0097dc;
    width: 100%;
    border-bottom: 1px solid #0097dc;
    font-family: 'Viga', Arial;
    overflow: hidden;
}

.onboarding-journey.steps-container h4 span {
   display:block;
   float: right; 
}

.option-left {
    float: left;
    padding: 10px 10px;
}

.option-left i{
    background:#fff;
    padding:10px;
}

.option-right{  
    padding:10px 15px 0 5px;    float:left;
}

.option-right h3{
font-size: 18px !important;
    margin: 7px 0 0 0;
}
.option-right h6{
    color:#717171;
    font-size:14px;
    margin:0;
}

.single-option.active .option-right h3,
.single-option.active .option-right h6{
    color:#3748E5;
    transition: all 0.7s ease;
}

.single-option.active .option-left i {
    transition: all 0.7s ease;
    background:#3748E5;
    color: #fff;
}

.single-option:hover *{
    color:#3471de;
}

.single-option .option-right h3 {
    font-family: Viga, Arial;
    font-weight: 300 !important;
}

button.gotonext,
a.gotonext {
 color: #fff;
    float: right;
    margin: 10px 15px;
    border: 0;
    font-size: 14px;
    padding: 10px 30px;
    border-radius: 5px;
    background: linear-gradient(36deg, #0097dc, #4b83e8);
    text-decoration: none;
}

button.gotonext:hover, a.gotonext:hover {
    background-color: #3c8dff; /* New background color on hover */
    color: #fff; /* New text color on hover */
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Optional: Adds a subtle box shadow on hover */
}

a.gotonext i{
    margin:0 0 0 5px
}


.single-step {
    display: none;
}
.current-step {
    display: block;
}


.single-option.half-col {
    width: 46%;
    float: left;
    margin:10px 2%;
}

.step-options{
    overflow:hidden;
}

.single-option.half-col .option-right {
width:calc(100% - 100px);
}
.single-option.half-col .option-left {
width:50px;
}


#step-5 label {
    display: block;
    font-weight:600;
}

#step-5 input[type="text"], #step-5 input[type="email"] {
    width:100%;
    padding:10px;
    background:#e7e7e7;
    border:1px solid #b7b7b7;
    margin:0 0 20px 0;
    display: block;
}

#step-5 input[type="submit"] {
    width:100%;
    padding:10px;
    background:#11a523;
    border:1px solid #11a523;
    font-family:"Viga", Arial;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:500;
    color:#fff;
    margin:23px 0 20px 0;
    display: block;
}