/* Desktop View */


/* Fix for slider fill color */
.income-slider {
    background: linear-gradient(to right,#2044d8 0%,#ddd 0% 100%);
    transition: background 0.3s;
}

/* Loader spinner animation fix */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.mtd-wrapper{
margin:auto;
border:1px solid #E6E6E6;
border-radius:20px;
overflow:hidden;
}

/* =========================
PROGRESS BAR
========================= */

.mtd-progress{
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
margin:40px 0;
padding:0 10px;
}

/* BASE LINE */
.progress-line{
position:absolute;
top:17px;
left:0;          /* will be controlled by JS */
width:0;         /* will be controlled by JS */
height:2px;
background:#ddd;
z-index:0;
border-radius:10px;
}

/* ACTIVE LINE */
.progress-line-active{
position:absolute;
top:18px;
left:0;
width:0;
height:2px;
background:#1f8f4a;
z-index:1;
border-radius:10px;
transition:all .4s ease;
}

/* STEP */
.progress-step{
position:relative;
z-index:2;
text-align:center;
flex:1;
}

/* CIRCLE */
.progress-step span{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background:#fff;
border:2px solid #ddd;
color:#999;
font-weight:600;
font-size:16px;
margin:auto;
transition:all .3s ease;
}

/* LABEL */
.progress-step p{
font-size:14px;
color:#666;
margin-top:8px;
font-family:'BRFirma-Medium', sans-serif;
}

/* ACTIVE STEP */
.progress-step.active span{
background:#EAA820;
color:#fff;
border: none;
}

.progress-step.active p{
color:#000;
font-weight:400;
}

/* COMPLETED STEP */
.progress-step.completed span{
background:#1f8f4a !important;
border: none;
color:#fff;
}

.progress-step.completed p{
color:#000;
font-weight:400;
}

/* FORM WRAPPER */

.mtd-form{
position:relative;
}

/* STEP */

.step{
position:absolute;
top:0;
left:0;
width:100%;
background:#eef2f7;
padding:40px;
border-radius:10px;
/* fade animation */
opacity:0;
visibility:hidden;
transform:scale(.98);
transition:
opacity .45s ease,
transform .45s ease,
visibility .45s ease;
}

/* ACTIVE STEP */

.step.active{
opacity:1;
visibility:visible;
position:relative;
transform:scale(1);
}

.result-text
{
text-align:center;
font-family:'BRFirma', sans-serif;
font-size:24px;
font-weight:400;
}

/* TEXT */

.step h3{
font-family:'BRFirma-Medium', sans-serif;
font-size:24px;
font-weight:500;
margin:0;
}

.step p{
font-family:'Hanken Grotesk', sans-serif;
font-size:18px;
font-weight:400;
margin:0;
}

/* CARD GRID */

.card-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin:40px 0 30px;
}

.card-row{
background:white;
border:1px solid #ddd;
padding:30px;
border-radius:20px;
flex-direction:column;
cursor:pointer;
display:flex;
gap:10px;
align-items:start;
transition:all .25s ease;
}

.card-row:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.06);
}

.card-row h4{
color:#0013C1;
font-size:18px;
font-weight:500;
font-family:'BRFirma-Medium', sans-serif;
margin:20px 0 0;
}

.cardh5{
color:#0013C1;
font-size:18px;
font-weight:500;
font-family:'BRFirma-Medium', sans-serif;
margin:30px 0 -30px;
}

.card-row p{
font-family:'Hanken Grotesk-Light', sans-serif;
font-size:16px;
font-weight:400;
line-height:20px;
}

.card-row input{
transform:scale(1.4);
}

.cardgrid4
{
grid-template-columns:repeat(4,1fr);
}

/* RANGE */

.income-range-wrapper{
margin-top:40px;
width:100%;
}

.range-labels{
display:flex;
justify-content:space-between;
font-family:'BRFirma-Medium', sans-serif;
font-size:18px;
}

.income-slider{
-webkit-appearance:none;
appearance:none;
width:100%;
height:6px;
border-radius:12px;
outline:none;
background:linear-gradient(to right,#2044d8 0%,#ddd 0%);
margin-top:40px;
}

.income-slider::-webkit-slider-thumb{
-webkit-appearance:none;
width:20px;
height:20px;
border-radius:50%;
background:#2044d8;
cursor:pointer;
margin-top:-7px;
}

.income-slider::-moz-range-thumb{
width:20px;
height:20px;
border-radius:50%;
background:#2044d8;
cursor:pointer;
border:none;
}

.income-value{
margin-top:15px;
font-weight:bold;
font-size:20px;
font-family:'BRFirma-Medium', sans-serif;
}

/* BUTTONS */

.card-btn{
text-align:right;
}

.nav-buttons{
display:flex;
justify-content:space-between;
margin-top:20px;
}

.prev{
display:inline-flex;
gap:8px;
align-items:center;
font-size: 18px;
font-family: 'Hanken Grotesk-Light', sans-serif;
padding: 14px 30px;
border:none;
background:#fff;
color: #000;
border-radius:30px;
cursor:pointer;
font-weight: 300;
}

.prev:hover
{
 background:#fff;
 color:#000;
}

.prev::before
{
content:"";
width:12px;
height:12px;
background:url("../images/back.svg") no-repeat center;
background-size:contain;
display:inline-block;

}

.next
{
display:inline-flex;
gap:8px;
align-items:center;
font-size: 18px;
font-family: 'Hanken Grotesk-Light', sans-serif;
padding: 14px 30px;
border:none;
background:#0013C1;
color:white;
border-radius:30px;
cursor:pointer;
font-weight: 300;
}
.next:hover
{
background:
linear-gradient(135deg, #000486 0%, #0013C1 50%, #2C80EE 100%),
radial-gradient(circle at top right, rgba(255,255,255,0.6), transparent 50%) !important;
}

.next::after
{
content:"";
width:12px;
height:12px;
background:url("../images/next.svg") no-repeat center;
background-size:contain;
display:inline-block;   
}


.submit{
display:inline-flex;
align-items:center;
gap:8px;
font-size: 18px;
font-family: 'Hanken Grotesk-Light', sans-serif;
padding: 14px 30px;
border:none;
background:#0013C1;
color:white;
border-radius:30px;
cursor:pointer;
font-weight: 300;
}

.submit::after{
content:"";
width:12px;
height:12px;
background:url("../images/next.svg") no-repeat center;
background-size:contain;
display:inline-block;
}

.submit:hover{
background:
linear-gradient(135deg, #000486 0%, #0013C1 50%, #2C80EE 100%),
radial-gradient(circle at top right, rgba(255,255,255,0.6), transparent 50%) !important;
}

.mtd-result-modal{
position:fixed;
inset:0;
display:none;
z-index:999999;
}

.mtd-result-modal.open{
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.mtd-result-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,0.48);
}

.mtd-result-card{
position:relative;
z-index:2;
width:min(940px, 100%);
background:#eef2f7;
border:1px solid #E6E6E6;
border-radius:20px;
padding:40px 36px;
box-shadow:0 18px 45px rgba(0,0,0,0.25);
text-align:center;
}

.mtd-modal-close{
position:absolute;
top:20px;
left:20px;
width:56px;
height:56px;
border:none;
border-radius:8px;
font-size:30px;
line-height:1;
cursor:pointer;
background:transparent;
color:#111;
box-shadow:none;
}

 .mtd-modal-close {
    color: #000 !important;
    background-color: transparent !important;
    border-color:  transparent !important;
    }

.mtd-result-card .result-text{
margin:16px 0 0;
padding-right:0;
text-align:center;
font-size:28px;
line-height:1.2;
font-weight:600;
}

.mtd-result-message{
margin-top:5px !important;
font-family:'Hanken Grotesk', sans-serif;
font-size:18px !important;
line-height:1.3;
font-weight:500;
}

.mtd-result-summary{
margin-top:18px;
padding:24px 26px;
border-radius:14px;
background:#fff;
border:1px solid #ddd;
text-align:left;
}

.mtd-result-summary p{
margin:0 !important;
font-size:18px !important;
line-height:1.4 !important;
font-family:'Hanken Grotesk', sans-serif;
display:flex;
justify-content:space-between;
gap:12px;
}

.mtd-result-summary p + p{
margin-top:8px !important;
}

.mtd-result-note{
margin-top:20px !important;
padding: 0 80px !important;
font-size:16px !important;
line-height:1.3 !important;
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mtd-cta, .mtd-explore-btn {
    display: inline-block;
    margin: 24px auto 0 auto;
    padding: 12px 32px;
    background: #0013C1;
    color: #fff !important;
    border-radius: 30px;
    font-size: 18px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    box-shadow: 0 2px 8px rgba(44,128,238,0.08);
    min-width: 220px;
    text-align: center;
    cursor: pointer;
}
.mtd-cta:hover, .mtd-explore-btn:hover {
    background: #2C80EE;
    color: #fff !important;
}
}

.mtd-result-icon{
width:78px;
height:78px;
margin:0 auto;
}

.mtd-result-positive .mtd-result-icon{
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8f62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7L9 18l-5-5'/%3E%3C/svg%3E")
center/78px 78px no-repeat;
}

.mtd-result-negative .mtd-result-icon{
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db5454' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")
center/78px 78px no-repeat;
}

.mtd-result-positive .mtd-result-message,
.mtd-result-positive .result-text{
color:#0e8f62;
}

.mtd-result-negative .mtd-result-message,
.mtd-result-negative .result-text{
color:#db5454;
}

.mtd-contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:12px;
font-size:18px;
font-family:'Hanken Grotesk-Light', sans-serif;
padding:8px 20px;
border:none;
background:#0013C1;
color:#fff;
border-radius:30px;
text-decoration:none;
font-weight:300;
text-decoration: none !important;
}

.mtd-contact-btn:hover{
color:#fff;
background:
linear-gradient(135deg, #000486 0%, #0013C1 50%, #2C80EE 100%),
radial-gradient(circle at top right, rgba(255,255,255,0.6), transparent 50%) !important;
}

.mtd-explore-btn
{
    
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:12px;
font-size:18px;
font-family:'Hanken Grotesk-Light', sans-serif;
padding:8px 20px;
border:none;
background:#EAA820;
color:#fff;
border-radius:30px;
text-decoration:none;
font-weight:300;
text-decoration: none !important;
}
.mtd-explore-btn:hover{
    background:#0013C1;
color:#fff;
}

income-value-text1
{
    font-size:400 !important;
}

/* 2nd step new section css */

.card-grid1
{
    background-color: #fff;
     border-radius:20px;
   
}
.cardnew
{
   background-color: #fff;
 padding: 30px 30px !important;
 margin-top:50px;
 border-radius:30px !important;
}
/* ITEM */
.income-box1 {
  
    border-right: 1px solid #ddd;
    text-align: left;
    flex-shrink: 0;
        background: transparent;
        border-radius:0px;
        display: flex;
        align-items: left;
        justify-content: left;
        flex-direction: column;
        padding: 0 20px 0 0px;
      
}


.incomebox3{
 
        padding: 0 20px 0 40px !important;
        border-right: 1px solid #ddd !important;
      
}

.incomebox4 {
 
 border-right: 0 solid #ddd !important;
border:none !important;
  padding: 0 20px 0 40px !important;
      
}

/* IMAGE + TITLE */
.income-img1 {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    margin-bottom:10px;
}

.income-img1 img
{
width:22px !important;
}

/* TEXT */
.income-box1 h3 {
    font-size: 18px !important;
    font-family: 'Hanken Grotesk', sans-serif;
    color: #000;
    font-weight: 400;
    padding-top: 2px;
}

.highlight1 {
    color: #0013C1;
    font-size: 22px !important;
    margin: -10px 0 0 !important;
}

.inp1 {
    font-size: 16px !important;
    margin-top: 0px !important;
    line-height: 22px;
}

.income-value-text
{
    font-size:18px !important;
     font-family: 'Hanken Grotesk', sans-serif;
    color: #000;
    font-weight: 600 !important;
}

body.mtd-modal-open{
overflow:hidden;
}

@media (max-width: 600px)
{
.mtd-progress
{
    padding:0;
}
.progress-line{
top:12px;
}

.progress-line-active{
top:12px;
}
.progress-step span
{
    font-size: 16px;
    width:25px;
    height:25px;
}
.progress-step p
{
     font-size: 12px;
}
.step
{
    padding: 40px 10px !important;
}
.step h3 
{
    font-size: 22px;
}
.step p
{
    font-size: 12px !important;
   line-height: 15px !important;
   margin-top:0px !important;
}
.card-grid
{
 grid-template-columns: repeat(2, 1fr);
 gap:5px !important;
}
.card-row
{
 padding: 20px 10px !important;
 border: 1px solid rgba(234, 168, 32, 0.4);
}
.card-row h4
{
 margin: 20px 0 0 0;
 font-size:14px !important;
 line-height:16px !important;
}
.card-row input {
 transform: scale(1.1);
}
.card-row p 
{
 font-size: 16px;
 line-height: 22px;
 margin-top: 0px;
}

.next
{
padding: 10px 30px;
font-size: 16px;
}
.next::after 
{
 width: 12px;
 height: 12px;
}
.card-btn 
{
text-align:  center;
}
.prev
{
padding: 10px 30px;
font-size: 16px;
}
.prev::after 
{
 width: 12px;
 height: 12px;
}

.income-slider
{
margin-top: 0px !important;
}
.cardh5
{
 margin: 10px 0 -16px 0;
}
.submit 
{
padding: 10px 30px;
font-size: 16px;
}
.submit::after 
{
  width: 12px;
  height: 12px;
}
.step p 
{
 font-size: 16px;
 line-height: 22px;
}
.range-labels 
{
font-size: 14px;
}
.result-text
{
font-size:16px;
}
.mtd-result-card{
padding:22px 14px;
margin: 20px !important;
}

.mtd-result-summary p{
font-size:20px !important;
flex-direction:column;
gap:2px;
}
.mtd-result-note{
font-size:18px !important;
padding: 0 20px !important;
}
.mtd-contact-btn{
font-size:16px !important;
padding:10px 20px !important;
}
.mtd-result-card .result-text{
font-size:22px;
}
.mtd-modal-close{
width:44px;
height:44px;
font-size:24px;
top:14px;
left:14px;
}
/* 2nd step new section css */

/* ITEM */

.card-grid1
{
    display:flex;
   flex-direction: column;
     margin: 10px 0 20px;
}
.income-box1 {
  
    padding: 20px 0px 0px; 
    border:none !important;
}

/* IMAGE + TITLE */
.income-img1 {
    margin-bottom:10px;
}
.income-img1 img
{
width:18px !important;
}
/* TEXT */
.income-box1 h3 {
    font-size: 14px !important;
}

.highlight1 {
    color: #0013C1;
    font-size: 14px !important;
    margin: 0 0 10px;
}

.inp1 {
    font-size: 12px !important;
    margin-top: 10px !important;
    line-height: 16px !important;
}

.mtd-result-modal.open {
        padding: 0;
        align-items: flex-start;
    }
    .mtd-result-card {
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        padding: 12px 0 24px 0;
        border-radius: 0;
        box-shadow: none;
    }
    .mtd-result-summary {
        padding: 20px;
        font-size: 14px !important;
        margin: 0 20px !important;
    }
    .mtd-result-summary p {
        font-size: 13px !important;
        flex-direction: column;
        gap: 1px;
    }
    .mtd-result-message {
        font-size: 16px !important;
    }
    .mtd-result-note {
        font-size: 12px !important;
        padding:0 20px !important;
    }
    .mtd-cta, .mtd-explore-btn {
        font-size: 15px;
        padding: 8px 8px;
        min-width: 120px;
        margin: 16px auto 0 auto;
    }
    .mtd-modal-close {
        width: 32px;
        height: 32px;
        font-size: 24px !important;
        top: 6px;
        left: 6px;
    }
    
    .mtd-explore-btn
    {
         padding: 8px 15px;
    }
    
    .income-value-text
{
    font-size:16px !important;
     font-family: 'Hanken Grotesk', sans-serif;
    color: #000;
    font-weight: 600 !important;
}

.incomebox3{
 
padding: 20px 20px 0 0px !important;
      
}

.incomebox4 {

 padding: 20px 20px 0 0px !important;
      
}

.cardnew {
    padding: 30px 25px 15px !important;
}
}

@media (min-width: 600px) and (max-width: 1200px)
{
.card-grid
{
grid-template-columns: repeat(2, 1fr);
}
.card-row
{
 padding: 20px 20px 30px;
}
.step 
{
padding: 40px 30px;
}
.card-row h4
{
 margin: 15px 0 0 0;
 line-height: 27px;
}
.step p 
{
 font-size: 14px;
 line-height: 18px;
}
.progress-step span
{
    width: 40px;
    height: 40px;
    font-size: 20px;
}
.cardh5
{
    margin: 20px 0 -25px 0;
}
.result-text
{
font-size:20px;
}
.card-row input {
 transform: scale(1);
}
/* 2nd step new section css */
.card-grid1
{
   grid-template-columns: repeat(3, 1fr); 
}
/* ITEM */
.income-box1 {
  
    padding: 20px 20px 20px 0 !important; 
}
.incomebox3
{
      padding: 20px 20px 20px 20px !important;
}

.incomebox4
{
  padding: 20px 20px 20px 20px !important;
}

/* IMAGE + TITLE */
.income-img1 {
    margin-bottom:10px;
}
.income-img1 img
{
width:18px !important;
}
/* TEXT */
.income-box1 h3 {
    font-size: 20px !important;
}

.highlight1 {
    color: #0013C1;
    font-size: 18px !important;
    margin: 8px 5px 10px;
}

.inp1 {
    font-size: 14px !important;
    margin-top: 8px !important;
    line-height: 15px !important;
}
}