.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  .montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }  
  .manrope {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }
  
body {font-family: "Manrope", "Poppins", Arial, sans-serif;padding-top: 80px;}
.header {background-color: #fff9f0;color: #fff;padding: 10px 20px;z-index: 1050;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.header .nav-link {color: #1552c3;font-weight: 500;transition: color 0.3s ease;}
.header .nav-link i {color: #d85a5a;}
.header .logo img { max-width:150px; height: auto;}
.header .user-info {color: #1552c3; font-size: 14px;display: inline-flex; align-items: center; font-size: 1rem; font-weight: 500;}
.header .user-info i {font-size: 30px;}
.collapse ul {border-radius: 5px;}
.banner {background: url(../images/bg.jpg) no-repeat right bottom #001D53; background-size: 500px 400px ; color: #fff; padding: 20px 0;}
.banner h1 { font-size: 2.5rem; font-weight: bold; font-family: "Manrope", sans-serif;}
.banner p {font-size: 1.2rem;}
.banner .banner-img {height: 420px; display: flex; align-items: center;}
.banner .banner-img img {object-fit: contain; max-height: 350px;}  
.banner .btn-learn-more {background: #ff9800; color: #ffffff; font-size: 20px; text-decoration: none; border-radius: 7px; box-sizing: border-box; padding: 10px 20px; margin-top: 20px; display: inline-block;}
.products {background-color: #ffffff;color: #000; padding: 40px 20px;}
.products h2 {font-size: 2rem;font-weight: bold; margin-bottom: 30px; font-family: "Manrope", sans-serif;}
.products h2 span {color: #1552c3;}
.products .row img { max-width: 100px;margin-bottom: 10px;}
.products .offer-products {transition: all .35s ease-in; padding: 20px; text-align: center;background: #d85a5a; box-sizing: border-box; border-radius: 12px; margin: 5px; border: 1px solid #d85a5a;}
.products .offer-products img {transition: all .35s ease-in; }
.products .offer-products:hover {background-color: #1552c3; box-sizing: border-box; border-radius: 12px; transform: scale(1.15); color: #fff;}
.products .offer-products:hover img {transform: scale(1.25) rotate(360deg);}
.products .offer-products p {font-size: 14px; margin-bottom: 0;transition: all .35s ease-in; }
.emi-calculator {background-color: #f1f1f1; padding: 40px 20px;}
.emi-calculator h2 {font-size: 2rem;font-weight: bold;margin-bottom: 20px; font-family: "Manrope", sans-serif;}
.emi-calculator .form-label {font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.emi-calculator .form-control {font-size: 20px; font-weight: bold; border: 1px solid #bfbfbf; border-bottom: 3px solid #bfbfbf;margin-bottom: 35px; height: 60px;}

.hero-section h1 {font-size: 2.5rem;}
.text-purple {color: #1552c3;}
.text-green {color: #d85a5a;}

.btn-learn-more {background: #ff9800; color: #ffffff; font-size: 20px; text-decoration: none; border-radius: 7px; box-sizing: border-box; padding: 10px 20px; margin-top: 20px; display: inline-block;}
.btn-learn-more:hover {background: #e28700; color: #ffffff;}
.btn-blue {background-color: #1552c3; color: #ffffff;}
.btn-blue:hover {background-color: #1149af; color: #ffffff;}

.card {border: none;border-radius: 8px;}
.card p {margin-bottom: 5px;}
.btn-outline-primary {border-radius: 20px;}
.filters-section .btn {margin-right: 0; padding: 7px 20px;}
#emiForm {margin-top: 1.5rem;}
#emiResult {}
#emiResult p {width: 100%; text-align: right; font-size: 16px; line-height: 40px; border-bottom: 1px solid #e1e1e1;margin-bottom: 5px;}
#emiResult p strong {float: left; font-size: 16px;}
#emiResult p:first-child strong {font-size: 16px;}
#emiResult p:first-child {font-size: 32px; font-weight: bold; margin-bottom: 16px;}
.partners {background-color: #fff;color: #000; padding: 40px 20px;}
.partners h2 {font-size: 2rem;font-weight: bold; text-align: left; font-family: "Manrope", sans-serif;}
.partners .owl-carousel1 img {border: 1px solid; border-radius: 7px;}
.card {transition: transform 0.3s ease-in-out;}
.card:hover {transform: scale(1.05);}
.subscribe form input {max-width: 400px;}
.choose-us {background-color: #673AB7;color: #fff;padding: 40px 20px;}
.choose-us h2 {font-size: 2rem;font-weight: bold; font-family: "Montserrat", sans-serif;}
.blogs {background-color: #d85a5a;color: #fff; padding: 40px 20px;}
.blogs h2 {font-size: 2rem;font-weight: bold; text-align: left; font-family: "Manrope", sans-serif;}
.blogs .card-title {font-weight: bold;}
.blogs .blog-viewmore {font-size: 24px; font-weight: bold; color:#ffffff;}
.subscribe {background-color: #FF9800;color: #fff;padding: 40px 20px;}
.subscribe h2 {font-size: 2rem; font-weight: bold;font-family: "Montserrat", sans-serif;}
.footer-logo {max-width: 100px;}
.footer h5 {font-size: 1.2rem;margin-bottom: 1rem;}
.footer ul li a {transition: color 0.3s ease-in-out;}
.footer ul li a:hover {color: #ffc107; /* Bootstrap warning color */}
.footer form .form-control {border-radius: 0.25rem;border: none;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.footer form .btn {border-radius: 0.25rem;font-weight: bold;}
.footer .footer-logo {max-width: 150px;}

/* EMI CALCUALTOR */
.sub-container { display: flex; width: 100%; gap: 50px; height: max-content; }
.header { width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; }
.header button { height: max-content; width: max-content; padding: 10px; border: none; background-color: transparent; font-size: 35px; color: #9088d2; }
.header button:hover { cursor: pointer; }
.view, .breakup { width: 50%; }
.details input { width: 100%; }
.detail { display: flex; justify-content: space-between; }
.footer { display: flex; justify-content: space-between; }
input[type="range"] { -webkit-appearance: none; margin: 10px 0; width: 100%; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #9088d2; border-radius: 10px; }
input[type="range"]::-webkit-slider-thumb { box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey; border: 5px solid #ffffff; height: 20px; width: 20px; border-radius: 50%; background: #9088d2; cursor: pointer; margin-top: -6px; -webkit-appearance: none; }
input[type="range"]:focus::-webkit-slider-runnable-track { background: #b3b3b3; }
input[type="range"]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: #9088d2; border-color: transparent; border-width: 16px 0; color: transparent; border-radius: 10px; }
input[type="range"]::-moz-range-thumb { box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey; border: 5px solid #ffffff; height: 20px; width: 20px; border-radius: 50%; background: #9088d2; cursor: pointer; margin-top: -6px; }
input[type="range"]::-ms-track { width: 100%; height: 6px; cursor: pointer; background: #9088d2; border-color: transparent; border-width: 16px 0; color: transparent; border-radius: 10px; }
input[type="range"]::-ms-fill-lower { background: #9088d2; border-radius: 5px; }
input[type="range"]::-ms-fill-upper { background: #9088d2; border-radius: 5px; }
input[type="range"]::-ms-thumb { box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey; border: 5px solid #ffffff; height: 20px; width: 20px; border-radius: 50%; background: #9088d2; cursor: pointer; margin-top: -6px; }
input[type="range"]:focus::-ms-fill-lower { background: #9088d2; }
input[type="range"]:focus::-ms-fill-upper { background: #9088d2; }
#price { color: #130f31; font-size: 25px; }
.loan-details { width: 90%; display: flex; justify-content: space-between; gap: 30px; }
#price-container { color: #9088d2; margin-top: 50px; }
#price-container::before { content: "Monthly Payable:"; font-size: 12px; display: block; }

.card-deatil-inner {text-align: right;}
.card-deatil-inner .small {color: #999999 !important; margin-top: 5px;font-size: 10px;}

section ul, section ol {margin: 0; padding: 0;}
.features-benefits ul li, .how-to-apply ul li, .eligibility ul li, .documents-required ul li, .pay-bill ul li, .pay-bill ul li, .tips-advice ul li, .balance-transfer ul li, .key_features ul li, .key_features ol li  {padding: 10px 15px; border-radius: 8px; border: 1px solid #f1f1f1; border-bottom: 3px solid #f1f1f1; list-style: none; margin-bottom: 5px; font-size: 14px; background-color: #fff;}


.blogs-details {background-color: #d85a5a; padding: 20px;}
.blog-detail {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-top: 50px;
  margin-bottom: 50px;
}
.blog-image {
  width: 100%;
  border-radius: 10px;
}
.blog-meta {
  color: #888;
  font-size: 0.9rem;
}
.blog-title {
  font-size: 2rem;
  margin-top: 20px;
}
.blog-content p {
  line-height: 1.6;
  margin-bottom: 20px;
}
.social-share a {
  margin-right: 10px;
}

/* Fancy Radio Buttons */
.fancy-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
    font-weight: 500;
}

.fancy-radio input {
    display: none; /* Hide the default radio button */
}

.fancy-radio span {
    background-color: #f8f9fa; /* Light background */
    border: 2px solid #1552c3; /* Border color (primary) */
    border-radius: 50px; /* Rounded corners */
    color: #1552c3;
    padding: 8px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.fancy-radio input:checked + span {
    background-color: #1552c3; /* Primary color when active */
    color: #ffffff;
    border-color: #1552c3;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

.fancy-radio span:hover {
    background-color: #e6f0ff; /* Light hover color */
    border-color: #1552c3;
}

/* Table Styles */
.table th, .table td {
    vertical-align: middle;
}

/* Accordion Styles */
.accordion-button {
    font-weight: 500;
}

.bg-light {
    background-color: #f9f9f9;
}

/* Balance Transfer Emphasis */
.balance-transfer strong {
    color: #0d6efd;
    font-weight: 600;
}

/* Tabs */
.nav-pills .nav-link {
    border: 1px solid #1552c3;
    border-radius: 20px;
    margin: 5px;
    color: #1552c3;
}

.nav-pills .nav-link.active {
    background-color: #1552c3;
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .fancy-radio span {
        padding: 6px 15px;
        font-size: 0.9rem;
    }
    .credit-card-list .btn {
        font-size: 0.9rem;
    }
    .card-deatil-inner {text-align: left;}
}


@media (max-width: 768px) {
    #emiChart {
        height: 200px !important;
    }
}

@media (max-width: 576px) {
    #emiChart {
        height: 150px !important;
    }
}
/* EMI CALCUALTOR - End */