/* ===========================
   Google Font
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


.emi-section{
    padding:80px 0;
    background:#f4f7fc;
}

.title-box{
    text-align:center;
    margin-bottom:50px;
}

.title-box h2{

    font-size:52px;
    font-weight:800;
    color:#0B2E63;
    margin-bottom:12px;

}

.title-box p{

    font-size:18px;
    color:#6c757d;
    max-width:700px;
    margin:auto;

}

/*Calculator Card*/
.calculator-card{

    background:#fff;

    border-radius:24px;

    padding:20px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:.4s;

}

.calculator-card:hover{

    transform:translateY(-4px);

}

.result-card{

    background:#fff;

    border-radius:24px;

    padding:20px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    /*height:100%;*/

}

.form-label{

    font-size:18px;

    font-weight:700;

    color:#1f2937;

}
.amount-box{

    width:220px;

}

.amount-box .input-group-text{

    background:#f5f7fb;

    border:1px solid #d9dee7;

    font-weight:700;

}

.amount-box input{

    border:1px solid #d9dee7;

    height:52px;

    font-size:18px;

    font-weight:600;

    text-align:right;

}

.amount-box input:focus{

    box-shadow:none;

    border-color:#0B57D0;

}
.tenure-input{

    width:90px;

    height:50px;

    margin-right:12px;

    text-align:center;

    font-weight:600;

}

.tenure-btn{

    width:55px;

    height:50px;

    margin-left:6px;

    border-radius:10px;

    font-weight:700;

}

.tenure-btn.active{

    background:#0B57D0;

    color:#fff;

}
.slider{

    margin-top:18px;

}

.slider::-webkit-slider-thumb{

    appearance:none;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#0B57D0;

    cursor:pointer;

    box-shadow:0 0 10px rgba(11,87,208,.4);

}

.slider::-webkit-slider-runnable-track{

    height:8px;

    background:#d8e4fb;

    border-radius:20px;

}
.emi-result{

    background:linear-gradient(135deg,#003B95,#0B57D0);

    padding:15px;

    border-radius:20px;

    color:#fff;

}

.emi-result small{

    font-size:17px;

    opacity:.9;

}

.emi-result h2{

    margin-top:10px;

    font-size:42px;

    font-weight:800;

}

.summary-box{

    background:#f5f8fd;

    border-radius:16px;

    padding:20px;

    text-align:center;

}

.summary-box small{

    color:#6b7280;

    display:block;

    margin-bottom:8px;

}

.summary-box h5{

    font-size:24px;

    font-weight:700;

    color:#0B2E63;

}
.chart-area{

    margin-top:20px;

    height:180px;

    position:relative;

}
/* ============================
      Animation
=============================*/

*{
    transition:.3s ease;
}

.calculator-card,
.result-card{
    overflow:hidden;
}

.calculator-card:hover,
.result-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#0B57D0;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#edf2f8;

}

input[type=number]{

    outline:none;

}

input[type=number]:focus{

    border-color:#0B57D0!important;

    box-shadow:0 0 0 .18rem rgba(13,110,253,.15)!important;

}

.slider{

    appearance:none;

    width:100%;

    height:8px;

    border-radius:20px;

    background:#dfe7f6;

    outline:none;

}

.slider::-webkit-slider-thumb{

    appearance:none;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#0B57D0;

    border:4px solid #fff;

    box-shadow:0 0 12px rgba(13,87,208,.45);

    cursor:pointer;

}

.slider::-moz-range-thumb{

    width:22px;

    height:22px;

    border-radius:50%;

    background:#0B57D0;

    cursor:pointer;

}
.tenure-btn{

    min-width:55px;

    border:none;

    font-weight:700;

}

.tenure-btn.active{

    background:#0B57D0;

    color:#fff;

}

.tenure-btn:hover{

    background:#0B57D0;

    color:#fff;

}
.emi-result{

    position:relative;

    overflow:hidden;

}

.emi-result::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    top:-60px;

    right:-60px;

}

.emi-result::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

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

    bottom:-35px;

    left:-35px;

}
.summary-box{

    transition:.35s;

    cursor:pointer;

}

.summary-box:hover{

    transform:translateY(-4px);

    background:#eef5ff;

}

@media(max-width:991px){

.title-box h2{

font-size:40px;

}

.calculator-card,
.result-card{

margin-top:20px;

}

}

@media(max-width:768px){

.emi-section{

padding:60px 0;

}

.title-box h2{

font-size:32px;

}

.title-box p{

font-size:15px;

}

.amount-box{

width:100%;

margin-top:12px;

}

.emi-result h2{

font-size:32px;

}

.summary-box{

margin-top:10px;

}

.chart-area{

height:160px;

}

.tenure-input{

width:80px;

}

}
.loading{

pointer-events:none;

opacity:.7;

}

.loading::after{

content:"";

position:absolute;

width:30px;

height:30px;

border-radius:50%;

border:3px solid #fff;

border-top:3px solid transparent;

animation:spin .8s linear infinite;

left:50%;

top:50%;

margin-left:-15px;

margin-top:-15px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


.chart-wrapper{

    width:100%;

    height:180px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.chart-wrapper canvas{

    max-width:320px;

    max-height:320px;

}