:root{

--primary:#2563eb;
--secondary:#16a34a;
--light:#f8fbff;
--border:#dbe7ff;
--text:#1f2937;
--radius:18px;
--shadow:0 15px 40px rgba(0,0,0,.08);

}

body{

background:#f4f8fd;

font-family:Poppins,sans-serif;

color:var(--text);

}

.loanBanner{

background:linear-gradient(90deg,#0d47c9,#0b63ff);

padding:60px 0;

color:#fff;

}

.bannerContent{

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

}

.bannerContent h1{

font-size:46px;

font-weight:700;

margin-bottom:15px;

}

.bannerFeatures{

display:flex;

gap:25px;

}

.feature{

background:rgba(255,255,255,.12);

padding:20px;

border-radius:15px;

backdrop-filter:blur(8px);

text-align:center;

min-width:140px;

}

.feature i{

font-size:30px;

display:block;

margin-bottom:10px;

}

/* .wizardSection{

margin-top:-50px;

padding-bottom:80px;

} */

.wizardCard{

background:#fff;

border-radius:25px;

box-shadow:var(--shadow);

padding:40px;

}

.wizardProgress{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

/* margin-bottom:40px; */

}

.progressLine{

position:absolute;

left:8%;

right:12%;

height:4px;

background:#e5e7eb;

top:20px;

}

.progressActive{

position:absolute;

left:8%;

width:0%;

height:4px;

background:var(--primary);

top:20px;

transition:.4s;

}

.step{

position:relative;

z-index:2;

text-align:center;

width:25%;

}

.step span{

width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

background:#e5e7eb;

border-radius:50%;

margin:auto;

font-weight:700;

transition:.3s;

}

.step.active span{

background:var(--primary);

color:#fff;

}

.step p{

margin-top:10px;

font-weight:600;

}

/* .wizardBody{

display:grid;

grid-template-columns:280px 1fr;

gap:35px;

} */

.wizardSidebar{

display:flex;

flex-direction:column;

gap:20px;

}

.stepCard{

background:#f8fbff;

padding:25px;

border-radius:18px;

border:1px solid #edf2ff;

transition:.3s;

}

.stepCard.active{

background:#edf4ff;

border-color:#2563eb;

}

.stepCard .icon{

width:70px;

height:70px;

background:#dbeafe;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:15px;

}

.stepCard i{

font-size:34px;

color:#2563eb;

}

.miniProgress{

height:5px;

background:#dbeafe;

border-radius:10px;

margin-top:18px;

overflow:hidden;

}

.miniProgress::after{

content:"";

display:block;

width:30%;

height:100%;

background:#2563eb;

}

/* .wizardContent{

background:#fff;

border:1px solid #edf2ff;

border-radius:20px;

padding:40px;

min-height:550px;

} */

.wizardStep{

display:none;

animation:fade .4s;

}

.wizardStep.active{

display:block;

}

.placeholder{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

height:450px;

}

.placeholder h2{

font-size:45px;

margin-bottom:20px;

}

@keyframes fade{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@media(max-width:992px){

.bannerContent{

flex-direction:column;

text-align:center;

}

.bannerFeatures{

flex-wrap:wrap;

justify-content:center;

}

.wizardBody{

grid-template-columns:1fr;

}

.wizardSidebar{

display:none;

}

.wizardCard{

padding:20px;

}

}

@media(max-width:576px){

.loanBanner{

padding:40px 0;

}

.bannerContent h1{

font-size:32px;

}

.step p{

font-size:12px;

}

.step span{

width:42px;

height:42px;

}

.wizardContent{

padding:0px;

}

}

.step-title h3{

font-size:30px;

font-weight:700;

margin-bottom:5px;

}

.step-title p{

color:#64748b;

margin-bottom:35px;

}

.form-label{

font-weight:600;

margin-bottom:8px;

}

.form-label span{

color:red;

}

.wizard-input{

height:55px;

border-radius:12px;

}

.radioGroup{

display:flex;

gap:35px;

margin-top:10px;

}

.radioGroup label{

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

font-weight:500;

}

.error{

color:#dc2626;

font-size:13px;

display:block;

margin-top:6px;

}

.wizardFooter{

display:flex;

justify-content:flex-end;

margin-top:45px;

}

.nextBtn{

padding:14px 35px;

border-radius:12px;

font-weight:600;

}

.wizardFooter{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:40px;

}

.form-select {
    border-radius: 4px;
    padding-left: 35px;
}

.alert{

border-radius:12px;

}

.reviewCard{

border:1px solid #eef3ff;

padding:25px;

border-radius:16px;

margin-bottom:20px;

}

.reviewCard h5{

font-size:18px;

margin-bottom:20px;

font-weight:700;

}

.reviewRow{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #f1f1f1;

}

.reviewRow:last-child{

border:none;

}

.reviewLabel{

font-weight:600;

color:#64748b;

}

.reviewValue{

font-weight:600;

}

.editStep{

cursor:pointer;

color:#2563eb;

font-weight:600;

}

.captchaCard{

background:#f8fbff;

padding:25px;

border-radius:15px;

}

.captchaBox{

display:flex;

align-items:center;

gap:15px;

margin-top:15px;

}

.loader{

display:inline-flex;

align-items:center;

gap:8px;

}


.successScreen{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

min-height:500px;

text-align:center;

}

.successIcon{

width:100px;

height:100px;

background:#22c55e;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.successIcon i{

font-size:55px;

color:#fff;

}

.successScreen h2{

font-size:38px;

margin-bottom:15px;

}

.wizardFade{
    animation: wizardFade .35s ease;
}

@keyframes wizardFade{

    from{
        opacity:0;
        transform:translateX(25px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.ri-spin{
    animation: spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


.questionCard{

max-width:650px;

margin:auto;

padding:80px 30px;

text-align:center;

}

.questionCard h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

}

.questionCard p{

font-size:18px;

color:#6b7280;

}

.sidebarHeader{

padding-bottom:25px;

margin-bottom:25px;

border-bottom:1px solid #eee;

}

.sidebarHeader h3{

font-size:24px;

font-weight:700;

}

.sidebarHeader p{

font-size:14px;

color:#64748b;

margin-top:8px;

}

.individual-step{

max-width:650px;
/* 
margin:auto;

padding:50px 20px; */

}

.step-number{

display:inline-block;

padding:8px 18px;

background:#EEF4FF;

color:#2563eb;

border-radius:50px;

font-size:14px;

font-weight:600;

/* margin-bottom:30px; */

}

.question-title{

font-size:42px;

font-weight:700;

margin-bottom:15px;

line-height:1.2;

}

.question-subtitle{

font-size:18px;

color:#6B7280;

margin-bottom:45px;

}

.question-input:not(:last-child){

margin-bottom:20px;

}

.question-input input{

height:65px;

font-size:22px;

border-radius:4px;

padding:20px;

border:2px solid #E5E7EB;

transition:.3s;
padding-left:30px;

}


.step-action{

display:flex;

justify-content:flex-end;
gap: 10px;
margin-bottom:24px;
flex-direction: column;

}

.btn-next{

padding:16px 40px;

font-size:18px;

border-radius:12px;

}

.error{

display:block;

margin-top:10px;

font-size:14px;

color:#DC2626;

}

.mobile-field{

display:flex;

align-items:center;

border:2px solid #E5E7EB;

border-radius:4px;

overflow:hidden;

transition:.3s;
padding-left:15px;

}

.mobile-field:focus-within{

border-color:#2563EB;

box-shadow:0 0 0 5px rgba(37,99,235,.08);

}

.country-code {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    height: 40px;
    border-right: 1px solid #E5E7EB;
}

.mobile-field input{

border:none;

box-shadow:none !important;

padding-left:20px;

}

.privacy-note{

margin-top:18px;

font-size:15px;

color:#64748B;

display:flex;

align-items:center;

gap:8px;

}

.privacy-note i{

color:#22C55E;

font-size:18px;

}
.salary-input{

display:flex;

align-items:center;

border:2px solid #E5E7EB;

border-radius:4px;

overflow:hidden;

transition:.3s;

}

.salary-input:focus-within{

border-color:#2563EB;

box-shadow:0 0 0 5px rgba(37,99,235,.08);

}

.salary-input .currency {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    background: #F8FAFC;
    height: 40px;
    border-right: 1px solid #E5E7EB;
}

.salary-input input{

border:none;

height:65px;

font-size:24px;

box-shadow:none !important;

}

.optionCards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.optionCard{

cursor:pointer;

}

.optionCard input{

display:none;

}

.optionContent{

padding:22px;

border:2px solid #E5E7EB;

border-radius:14px;

display:flex;

align-items:start;

gap:15px;

transition:.3s;

font-size:18px;

font-weight:600;

}
.select_content span{
    font-size:14px;
    font-weight:600;
}

.option-description {
    font-size: 12px;
    font-weight: 400;
}

.optionCard input:checked + .optionContent{

border-color:#2563EB;

background:#EEF4FF;

}

.optionContent i{

font-size:28px;

color:#2563EB;

}

.callSource{

display:flex;

gap:25px;

margin-top:12px;

}

.callSource label{

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

font-weight:500;

}

.callSource input{

width:18px;

height:18px;

}