/* ======================================================
   STEP 1 - PERSONAL INFORMATION
====================================================== */

.form-card{

    width:100%;
    max-width:620px;
    margin:0 auto;

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:2px;

    padding:36px 38px;

}

/* ====================================================== */

.sectionEli{

    margin-bottom:2rem;


}

.sectionEli:last-child{

    margin-bottom:0;

}

/* ====================================================== */

.section-title{

    font-size:1.2rem;

    font-weight:500;

    color:#444;

    margin:0 0 26px;

}

/* ====================================================== */

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:16px;

    row-gap:20px;

}

/* ====================================================== */

.form-group{

    display:flex;

    flex-direction:column;

}

/* ====================================================== */

.form-group label,

.question{

    font-size:12px;

    font-weight:600;

    color:#555;

    margin-bottom:8px;

}

/* ====================================================== */

.form-group span,

.question span{

    color:#ef6c00;

}

/* ====================================================== */

.form-group input,

.form-group select{

    width:100%;

    height:32px;

    border:1px solid #d7d7d7;

    border-radius:2px;

    background:#fff;

    padding:0 10px;

    font-size:12px;

    color:#444;

    outline:none;

    transition:.2s;

}

.form-group input::placeholder{

    color:#999;

}

.form-group input:focus,

.form-group select:focus{

    border-color:#0d47a1;

}

/* Hide every step by default */
.form-step {
    display: none;
    animation: fade .35s ease;
}

/* Show only the active step */
.form-step.active {
    display: block;
}
/* ====================================================== */

.radio-inline{

    display:flex;

    align-items:center;

    gap:28px;

    margin-top:2px;

}

.radio-inline label{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:12px;

    color:#555;

    cursor:pointer;

}

.radio-inline input{

    accent-color:#0d47a1;

}

/* ====================================================== */

.question-block{

    margin-bottom:24px;

}

.question-block:last-child{

    margin-bottom:0;

}

/* ====================================================== */

.radio-column{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:12px;

}

.radio-column label,
.radio-grid label,
.agreement-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#555;

    cursor:pointer;

}

.radio-column input{

    accent-color:#0d47a1;

}

/* ====================================================== */

.employment{

    width:220px;

    margin-bottom:28px;

}

/* ====================================================== */

.form-buttons{

    display:flex;

    justify-content:flex-end;

    margin-top:30px;

}

/* ====================================================== */

.next-btn{

    padding: 1rem;

    background:#0d47a1;

    color:#fff;

    border:none;

    font-size:11px;

    font-weight:600;

    letter-spacing:.3px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.next-btn:hover{

    background:#0a3c8a;

}

.application{

    padding:70px 0 90px;

    background:#fff;

}

.application .container{

    width: min(1180px, 92%);
    margin: auto;

}
.wizcontainer{

    max-width:700px;

    margin:auto;

}



.wizard{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin:auto;

    margin-top: 1rem;

    margin-bottom: 1rem;

    max-width: 50%;

}

.wizard-line{

    position:absolute;

    top:16px;

    left:90px;

    right:90px;

    height:2px;

    background:#d9d9d9;

}

.wizard-circle{

    width:32px;

    height:32px;

    border-radius:50%;

    border:2px solid #d8d8d8;

    background:#fff;

    margin:auto;

}

.step.active .wizard-circle{

    background:#0d47a1;

    border-color:#0d47a1;

}

.step.active .wizard-circle::after{

    content:"";

    width:10px;

    height:10px;

    background:#fff;

    border-radius:50%;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.step span{

    display:block;

    margin-top:14px;

    font-size:11px;

    font-weight:700;

    text-align:center;

    letter-spacing:.2px;

}

.form-card{

    /* width:640px; */

    margin:auto;

    border:1px solid #e6e6e6;

    background:#fff;

    padding:38px;

}

.secure{

    margin-top:28px;

    text-align:center;

    font-size:12px;

    color:#999;

}

/* ======================================================
PROPERTY INFORMATION
====================================================== */

.property-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px 18px;

    margin-top:26px;

}

/* Currency Input */

.currency-field{

    position:relative;

}

.currency-icon{

    position:absolute;

    left:12px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    border:1px solid #bdbdbd;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:9px;

    color:#777;

    background:#fff;

}

.currency-field input{

    width:100%;

    height:32px;

    padding-left:38px;

}

/* Buttons */

.form-buttons.between{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:34px;

}

.prev-btn{

    width:92px;

    height:40px;

    background:#fff;

    border:1px solid #d4d4d4;

    color:#444;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.prev-btn:hover{

    background:#f8f8f8;

}

@media (max-width:992px){

    .property-grid{

        gap:18px;

    }

}

@media (max-width:768px){

    .property-grid{

        grid-template-columns:1fr;

    }

    .form-buttons.between{

        flex-direction:column-reverse;

        gap:15px;

    }

    .prev-btn,
    .next-btn{

        width:100%;

    }

}

@media (max-width:480px){

    .currency-field input{

        padding-left:36px;

    }

    .currency-icon{

        left:10px;

    }

}









/* ==========================================
TABLET
========================================== */

@media (max-width:992px){

    .application-section{
        padding:60px 20px;
    }

    .application-container{
        max-width:100%;
    }

    .wizard{
        margin-bottom:35px;
    }

    .wizard-step{
        flex:1;
    }

    .wizard-progress{
        left:75px;
        right:75px;
    }

    #applicationForm{

        width:100%;

        max-width:650px;

        padding:35px;

    }

    .form-card{
        padding:0;
        border:none;
    }

    .form-grid{

        grid-template-columns:1fr 1fr;

        gap:18px;

    }

    .section-title{

        font-size:22px;

    }

}

/* ==========================================
PHONE
========================================== */

@media (max-width:768px){

    .application-section{

        padding:50px 15px;

    }

    #applicationForm{

        width:100%;

        padding:25px;

    }

    .wizard{

        margin-bottom:30px;

    }

    .wizard-progress{

        left:45px;

        right:45px;

    }

    .wizard-step span{

        font-size:10px;

        line-height:1.4;

    }

    .wizard-circle{

        width:28px;

        height:28px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .employment{

        width:100%;

    }

    .radio-inline{

        flex-wrap:wrap;

        gap:18px;

    }

    .form-buttons{

        justify-content:center;

    }

    .next-btn{

        width:100%;

        max-width:260px;

    }

}

/* ==========================================
SMALL PHONE
========================================== */

@media (max-width:480px){

    .application-section{

        padding:40px 12px;

    }

    #applicationForm{

        padding:20px;

    }

    .wizard-progress{

        left:30px;

        right:30px;

    }

    .wizard-step span{

        font-size:9px;

    }

    .wizard-circle{

        width:24px;

        height:24px;

    }

    .section-title{

        font-size:20px;

    }

    .form-group label,

    .question{

        font-size:11px;

    }

    .form-group input,

    .form-group select{

        height:38px;

        font-size:13px;

    }

    .radio-inline{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .radio-column{

        gap:10px;

    }

    .next-btn{

        width:100%;

        font-size:11px;
        margin-bottom: 1rem;

    }

    .application-security{

        font-size:11px;

        line-height:1.5;

    }

}


/*==========================================
RADIO GRID
==========================================*/

.radio-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px 40px;

    margin-top:18px;

}

/* .radio-grid label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    font-size:14px;

} */

/*==========================================
AGREEMENTS
==========================================*/

.agreement-group{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:10px;

}

.agreement-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:14px;

    line-height:1.6;

}

.agreement-item a{

    color:#0b4ea2;

    text-decoration:none;

    font-weight:500;

}

.agreement-item a:hover{

    text-decoration:underline;

}

@media (max-width:768px){

    .radio-grid{

        grid-template-columns:1fr;

        gap:12px;

    }

    .agreement-item{

        font-size:13px;

    }

}