* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    
    font-weight: 600;
}
h1{
    font-weight: 500; 
}
h2 {
    margin-bottom: 24px;
    font-size: 26px;
    line-height: 36px;
}

:focus {
    outline: none;
    border: none;
}
html {
  scroll-behavior: smooth;
}

body {
    font-size: 16px;
    line-height: 26px;
    color: #222344;
    font-family: 'Poppins', sans-serif;
    background: #fefefe;
}

a {
    color: #1274a9;
}


.h3{
    color: #060606;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    display: block;
}

.home p {
    margin-bottom: 20px;
}

.row1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.maindiv {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.img-res {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.text-white{color: #f5f5f5;}

.transition {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.padding {
    padding: 70px 0;
}

.align-center{
    align-items: center;
}



.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.rounded {
    border-radius: 20px !important;
}

.pt-1 {
    padding-top: 20px;
}

.pt-2 {
    padding-top: 40px;
}

.pt-3 {
    padding-top: 60px;
}

.pb-1 {
    padding-bottom: 20px;
}

.pb-2 {
    padding-bottom: 40px;
}

.pb-3 {
    padding-bottom: 60px;
}

.mt-1 {
    margin-top: 20px;
}

.mt-2 {
    margin-top: 40px;
}

.mt-3 {
    margin-top: 60px;
}

.mb-1 {
    margin-bottom: 20px;
}

.mb-2 {
    margin-bottom: 40px;
}

.mb-3 {
    margin-bottom: 60px;
}

.two-div .col1 {
    width: 48%;
}

.four-div .col1 {
    width: 23%;
}

.three-div .col1 {
    width: 31%;
}

.inner-row {
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px
}
.theme-btn {
    padding: 15px 41px;
    border-radius: 8px;
    font-size: 18px;
    border: 0;
    outline: 0;
    color: #000;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    background: #facb1d;
    border: 1px solid #fdc700;
    display: inline-block;
}
.theme-btn.w {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.theme-btn.w:hover {
    background: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}

.theme-btn:hover {
    color: #fdc700;
    border: 1px solid #fdc700;
    background: none
}

.content-area p {
    margin-bottom: 0;
}





/*header*/
.header {
    padding-top: 7px;
    padding-bottom: 5px;
}

.home .header {
    position: relative;
    width: 100%;
    z-index: 9;
    background: #001830;
}

.header .row1 {
    justify-content: space-between;
    align-items: center;
}

.logo {
    max-width: 200px;
    width: 100%;
    padding-top: 5px;
}

.nav01 {
    width: 72%;
    display: flex;
    flex-wrap: wrap;
}

a.top_ph {
    width: 100%;
    text-align: right;
    color: #ff4266;
    font-size: 10px;
    letter-spacing: 2px;
}

.menu01 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.menu01>li>a {
    font-size: 15px;
    line-height: 25px;
    padding-bottom: 5px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border-bottom: 1px solid transparent;
    color: #ffffff;
    font-weight: 400;
    
}

.menu01 li:last-child {
    padding-right: 0
}

.menu01>li>a:hover {
    color: #facb1d;
}

.menu01 li {
    padding: 0 20px;
}

.menu01 li.apply-now {
    padding-left: 60px;
}

.menu01 li.apply-now a {
    background: #facb1d;
    padding: 10px 24px;
    border-radius: 0 0;
    font-size: 14px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border-bottom: 0;
    color: #000;
    border-radius: 5px;
    border: 1px solid #fdc700;
}

.menu01 li.apply-now a:hover {
    border: 1px solid #fdc700 !important;
    color: #fdc700;
    background: transparent;
    border-radius: 5px;
}

.icon1 {
    position: relative
}

.icon1:before {
    content: "\f078";
    font-family: FontAwesome;
    position: absolute;
    color: #fff;
    right: 0;
    top: 0;
    font-size: 10px
}

#menu-icon {
    color: #fff;
    font-size: 20px;
    line-height: 0;
    padding: 0;
    padding-top: 5px;
    background: transparent;
    margin-bottom: 30px
}
/*header ends*/



 
.four-div-flex {
    display: flex;
    justify-content: space-between;
}

.four-div-flex > div {
    padding: 5px 0;
}
.wrap {
    background: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e6e5e5;
    margin-bottom: 30px;
}

.list {
    padding-left: 30px;
}

.list.w li {
    color: #fff;
}
.list li {
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 26px;
    color: #444343;
}

.list li:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: #f5d11b;
    font-size: 18px;
    padding-right: .5em;
    position: absolute;
    top: 0px;
    left: -30px;
    content: "\f192";
}
.list li p:first-child>strong {
    
}
.list.w li p>strong {
    color: #fff;
}
.list li > p:first-child {
    margin-bottom: 6px;
}





/*footer*/

.footer {
    background: #000a14;
    padding-top: 50px;
    padding-bottom: 10px;
    color: #b0b0b0;
}
.footer .heading {
    font-weight: 500;
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 20px;
    color: #efefef;
}
.flist li {
    display: flex;
}
.flist li .icon {
    font-size: 30px;
    line-height: 40px;
    margin-right: 20px;
    color: #b0b0b0;
    position: relative;
    margin-top: -4px;
}
.flist li a {
    color: inherit;
}
.footer .social li {
    display: inline-block;
    margin-right: 5px;
}
.footer .social li a {
    color: #b0b0b0;
    font-size: 30px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.footer .social li a:hover {
    text-decoration: none;
    color: #fff;
}
.footer-nav {
    margin-bottom: 20px;
}
.footer .f-nav {
    display: flex;
    justify-content: center;
}
.footer .f-nav li {
    margin: 0 15px;
}
.footer .f-nav li a {
    color: inherit;
    font-weight: 500;
}
.copyright p {
    margin: 0;
    font-size: 14px;
}
.disclaimer {
    padding: 30px;
    border: 1px solid #273039;
    margin: 30px 0;
    border-radius: 15px;
}
.golden-text {
    color: #e3e3e3;
}
.disclaimer .h3 {
    color: #efefef;
    font-weight: 500;
    margin-bottom: 15px;
}



/*--table css starts---*/

table.newtable {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 20px; 
 font-size: 16px;
 line-height: 26px;
}

table.newtable caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {

}

table.newtable th,
table.newtable td {
  padding: .625em;
  text-align: center;
  border: 1px solid #175088;
}

table.newtable th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #001830;
  color: #fff;
}
.row.center-flex {
    justify-content: center;
    column-gap: 30px;
}

.new-grey-bx.icon-bx-display.md .icon img {
    width: 70px;
    height: 70px;
}
.img1 {
    width: 100px;
}
.single-p .img-bx {
    width: 100%;
    height: 230px;
    overflow: hidden;
}
.single-p .img-bx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-p {
    margin-bottom: 30px;
}
.btn-flex .theme-btn {
    margin: 6px;
}

@media screen and (max-width: 600px) {
  table.newtable {
    border: 0;
  }

  table.newtable caption {
    font-size: 1.3em;
  }
  
  table.newtable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.newtable tr {
    border-bottom: 1px solid #ae8851;
    display: block;
    margin-bottom: .625em;
  }
  table.newtable.center1 tr {
    background: #f6f6f6;
  }
  
  table.newtable td {
    border-bottom: 0;
    display: block;
    font-size: .8em;
    text-align: right;
  }
   table.newtable.center1 td {
    text-align: left;
   }
  
  table.newtable td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table.newtable.center1 td::before {
    width: 100%;
  }
  
  table.newtable td:last-child {
    border-bottom: 0;
  }
}
/*--table css ends*/





/*---calculator css starts-----*/
:root {
    --green: #ccab7c;
    --green-dark: #16a34a;
    --green-glow: rgba(74,222,128,0.18);
    --dark-bg: #0f1117;
    --panel-bg: #ededed;
    --card-bg: #e0dfdf;
    --border: rgba(255,255,255,0.08);
    --text-primary: #333333;
    --text-secondary: #8a8fa8;
    --text-muted: #555a72;
    --accent: #ccab7c;
    --accent2: #b69360;
    --orange: #fb923c;
    --radius: 16px;
    --radius-sm: 8px;
  }

  .calculator-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 60px;
  }

  .calc-title {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
  }

  .calc-title span {
    color: var(--accent);
    font-style: italic;
  }

  .calc-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-weight: 300;
  }

  .calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .donut-fill {
    stroke: #001830;
  }

  @media (max-width: 640px) {
    .calc-grid { grid-template-columns: 1fr; }
  }

  .left-panel {
    background: var(--panel-bg);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--border);
  }

  .field-group {
    margin-bottom: 2rem;
  }

  .field-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .field-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  .stepper {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .stepper:hover {
    border-color: rgba(74,222,128,0.3);
  }

  .step-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 48px;
    height: 54px;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 300;
    line-height: 1;
  }

  .step-btn:hover {
    background: rgba(74,222,128,0.1);
    color: var(--accent);
  }

  .step-btn:active {
    transform: scale(0.9);
  }

  .step-value {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 4px;
    line-height: 1;
  }

  .step-input {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    padding: 0 4px;
    height: 54px;
    width: 0;
    font-family: 'DM Sans', sans-serif;
    cursor: text;
  }

  .step-input:focus {
    color: var(--accent);
  }

  .step-input::selection {
    background: rgba(74,222,128,0.25);
  }

  .stepper:focus-within {
    border-color: rgba(74,222,128,0.5);
    box-shadow: 0 0 0 3px rgba(74,222,128,0.08);
  }

  .field-error {
    font-size: 0.7rem;
    color: #f87171;
    margin-top: 5px;
    min-height: 16px;
    padding-left: 2px;
  }

  .range-row {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
  }

  .monthly-display {
    background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(74,222,128,0.02));
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-align: center;
  }

  .monthly-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 0.35rem;
  }

  .monthly-amount {
    font-family: 'DM Serif Display', serif;
    font-size: 2.2rem;
    color: var(--text-primary);
    letter-spacing: -1px;
  }

  .monthly-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
  }

.cta-btn {
    width: 100%;
    margin-top: 1.75rem;
    padding: 14px;
    background: #001830;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    display: block;
    text-align: center;
}

  .cta-btn:hover {
    background: var(--accent2);
    transform: translateY(-1px);
    /*box-shadow: 0 8px 24px rgba(74,222,128,0.25);*/
    box-shadow: 0 8px 24px rgb(115 90 54);
  }

  .cta-btn:active {
    transform: translateY(0);
  }

  .right-panel {
    background: var(--panel-bg);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .donut-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 1.5rem;
  }

  .donut-svg {
    width: 200px;
    height: 200px;
    transform: rotate(-90deg);
  }

  .donut-track {
    fill: none;
    stroke: rgb(71 71 71 / 25%);
    stroke-width: 16;
  }

  .donut-fill {
    fill: none;
    stroke: url(#arcGrad);
    stroke-width: 16;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .donut-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

  .donut-inner-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  .donut-inner-amount {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.5px;
  }

.donut-apr-badge {
    position: absolute;
    top: 14px;
    right: 10px;
    background: #facb1d;
    border: 1px solid rgb(204 171 124);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 0.7rem;
    color: #000;
    font-weight: 600;
}

  .donut-monthly-badge {
    position: absolute;
    bottom: 14px;
    left: 10px;
    text-align: left;
  }

  .donut-monthly-badge .badge-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .donut-monthly-badge .badge-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .stats-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
  }

  .stat-card:hover {
    border-color: rgba(74,222,128,0.2);
  }

  .stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.3rem;
  }

  .stat-value {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.3px;
  }

  .stat-from {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-style: italic;
    font-family: 'DM Serif Display', serif;
  }

  .stat-card.full-width {
    grid-column: 1 / -1;
  }

  .stat-card.accent-card {
    background: rgba(74,222,128,0.06);
    border-color: rgba(74,222,128,0.15);
  }

  .stat-card.accent-card .stat-value {
    color: var(--accent);
  }

  .divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
  }

  .apr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2px;
    margin-bottom: 1rem;
  }

  .apr-item {
    text-align: center;
  }

  .apr-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 2px;
  }

  .apr-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .apr-value.green { color: var(--accent); }

  .apr-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
  }

  .donut-fill {
    stroke: #001830;
  }







/*---calculator css ends*/


/*--breadcumb--*/
.bread-cum a {
    color: #575757;
    font-size: 16px;
    line-height: 26px;
}

.bread-cum {
    background: #f8f8f8;
    padding: 10px 0;
}
.breadcrumb li {
    display: inline-block
}


/*=======New CSS=======*/

.banner {
    position: relative;
    width: 100%;
    background: url(../images/banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 80px 0 80px 0;
}
.banner.personal-banner {
    position: relative;
    width: 100%;
    background: url(../images/personal-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 80px 0 80px 0;
}
.banner h1 {
    color: #fff;
    font-size: 38px;
    line-height: 48px;
    margin-bottom: 20px;
}
.yellow {
    color: #facb1d;
}

.banner p{
    color: #ffffff;
}

.btn-container .theme-btn {
    margin-right: 10px;
}

.banner-below-features .feature-box {
    color: #fff;
    background: #001830;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #1c3956;
    margin-top: -60px;
    position: relative;
}

.banner-below-features .feature-box {
    color: #fff;
    background: #001830;
    padding: 30px;
    padding-bottom: 0px;
    border-radius: 20px;
    border: 1px solid #1c3956;
    margin-top: -60px;
    position: relative;
}
.banner-below-features .icon {
    width: 55px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background-color: #7f5a83;
    background-image: linear-gradient(211deg, #7e7a7e 0%, #0c2d44 74%);
    color: #facb1d;
}

.banner-below-features .text {
    width: 80%;
}

.loan-rates .icon {
    width: 55px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background-color: #001830;
    /*background-image: linear-gradient(211deg, #001830 0%, #39379d 74%);*/
    color: #facb1d;
}

.loan-rates .text {
    width: 90%;
}
.loan-rates .inner-row {
    margin-bottom: 0;
}
.loan-rates .h3 {
    font-size: 18px;
    line-height: 28px;
}

.banner-below-features span.h3 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 3px;
    font-weight: 500;
}
.banner-below-features .text p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
}
.banner-below-features .inner-row {
    align-items: center;
}
.intro{
    padding: 60px 0 60px 0;
}
.representative {
    padding-top: 30px;
}
.banner .btn-area {
    padding-top: 6px;
}


/*card css start*/
@layer reset, base, composition, features, utilities;

@import "https://cdn.jsdelivr.net/npm/kiso.css@latest/kiso.css" layer(reset);

@layer features {
  @scope (.scope.product-cards) to (.scope) {
    :scope {
      container: --scope / inline-size;
    }

    ._card-list {
      & > * {
        grid-row: span 5;
      }
    }

    ._card {
      --_accent: var(--product-card--accent, #c34a36);
      --_row-gap: 0.25rlh;
      --_padding: 16px;
      --_radius: 40px;
      --_accent-contrast: oklch(from var(--_accent) sign(0.7 - l) 0 0);
      --_inner-radius: calc(var(--_radius) - var(--_padding));
      --_category-radius: 16px;
      --_duration: 350ms;
      --_has-hocus-on: ;
      --_has-hocus-off: initial;

      display: block grid !important;
      reading-flow: grid-rows;
      grid-template-columns:
        [--full-start --heading-start]
        minmax(0, 1fr)
        [--heading-end --price-start]
        max-content
        [--price-end --full-end];
      grid-template-rows: subgrid;
      gap: var(--_row-gap) 1rem;
      padding: var(--_padding);
      border-radius: var(--_radius);
      box-shadow: 0 20px 40px -14px oklch(from black l c h / 25%);
      background-color: var(--card-background);
      color: var(--card-foreground);
      zoom: min(progress(100cqi, 0px, 320 / 16 * 1rem), 1);

      &:has(:any-link:hover) {
        @media (any-hover) {
          --_has-hocus-on: initial;
          --_has-hocus-off: ;
        }
      }

      &:has(:focus-visible) {
        --_has-hocus-on: initial;
        --_has-hocus-off: ;
      }

      & > * {
        grid-column: --full;
      }

      & > ._thumbnail-stack {
        grid-row: 1 / 2;
      }

      & > ._category {
        z-index: 1;
        grid-row: 1 / 2;
        place-self: start;
        max-inline-size: calc(
          100% - (var(--_category-radius) + var(--_inner-radius))
        );
      }

      & > ._heading {
        grid-column: --heading;
        align-self: center;
      }

      & > ._price {
        grid-column: --price;
        place-self: center end;
      }
    }

    ._thumbnail-stack {
      display: block grid;

      & > img {
        grid-area: 1 / 1;
        inline-size: 100%;
      }
    }

    img {
      aspect-ratio: 1;
      border-radius: var(--_inner-radius);
      filter: url(#svg-inset-shadow);

      @media (prefers-reduced-motion: no-preference) {
        transition-property: clip-path;
        transition-duration: var(--_duration);
        transition-timing-function: var(--_has-hocus-on, var(--ease-out-expo))
          var(--_has-hocus-off, var(--ease-in-expo));
      }

      :nth-child(1 of &) {
        filter: brightness(0.8) grayscale(1);
      }

      :nth-child(2 of &) {
        @media (any-hover) {
          clip-path: var(--_has-hocus-on, inset(0 round var(--_inner-radius)))
            var(--_has-hocus-off, inset(100% round var(--_inner-radius)));
        }
      }
    }

    ._heading {
      padding-block: calc(var(--_row-gap) * 2);
    }

    ._price {
      padding-block: 0.5em;
      padding-inline: 1em;
      border-radius: calc(infinity * 1px);
      background-color: var(--_accent);
      color: var(--_accent-contrast);
      font-variant-numeric: tabular-nums;
    }

    ._category {
      position: relative;
      align-content: center;
      min-block-size: calc(var(--_category-radius) * 2);
      padding-block: 1em;
      padding-inline: 1.5em;
      border-end-end-radius: var(--_category-radius);
      background-color: var(--card-background);
      filter: drop-shadow(6px 6px 3px oklch(from black l c h / 15%));

      &::before,
      &::after {
        content: "";
        position: absolute;
        block-size: var(--_category-radius);
        aspect-ratio: 1;
        mask-image: radial-gradient(
          circle at 100% 100%,
          transparent var(--_category-radius),
          red calc(var(--_category-radius) + 1px)
            /* ギザギザを防止するために 1px 加える */
        );
        background-color: inherit;
      }

      &::before {
        inset-block-start: 0;
        inset-inline-start: 100%;
      }

      &::after {
        inset-block-start: 100%;
        inset-inline-start: 0;
      }
    }

    ._tag-list {
      padding-block: calc(var(--_row-gap) * 2);
    }

    ._tag {
      padding-block: 0.5em;
      padding-inline: 1em;
      border-radius: calc(infinity * 1px);
      background-color: oklch(from var(--_accent) 90% 25% h);
      font-size: 0.75rem;
    }
  }

  @scope (.scope.purchase-button) to (.scope) {
    :scope {
      --_background: var(--purchase-button--background, var(--color-darker));
      --_backgorund-hocus: oklch(from var(--_background) 60% 60% h);
      --_foreground: var(--purchase-button--foreground, var(--color-lightest));
      --_foreground-hocus: oklch(
        from var(--_backgorund-hocus) sign(0.7 - l) 0 0
      );
      --_hocus-on: ;
      --_hocus-off: initial;

      display: block flex;
      justify-content: center;
      align-items: center;
      column-gap: 1ch;
      padding: 1em;
      border: 1px solid transparent; /* for Forced Colors Mode */
      border-radius: calc(infinity * 1px);
      background-color: var(--_hocus-on, var(--_backgorund-hocus))
        var(--_hocus-off, var(--_background));
      color: var(--_hocus-on, var(--_foreground-hocus))
        var(--_hocus-off, var(--_foreground));
      font-weight: bolder;
      transition-property: background-color, color;
      transition-duration: 300ms;

      

      &:any-link:hover {
        @media (any-hover) {
          --_hocus-on: initial;
          --_hocus-off: ;
        }
      }

      &:focus-visible {
        --_hocus-on: initial;
        --_hocus-off: ;
      }
    }
  }
}

@layer composition {
  .grid {
    --_c-fill-mode: var(--grid--fill-mode, auto-fit);
    --_c-row-gap: var(--grid--row-gap, 1.5rem);
    --_c-column-gap: var(--grid--column-gap, 1.5rem);
    --_c-column-max-count: var(--grid--column-max-count, 5);
    --_c-column-min-width: var(--grid--column-min-width, 20rem);
    --_c-column-width-calculated: calc(
      (100% - var(--_c-column-gap) * (var(--_c-column-max-count) - 1)) /
        var(--_c-column-max-count)
    );
    --_c-column-width: min(
      100%,
      max(var(--_c-column-min-width), var(--_c-column-width-calculated))
    );

    display: block grid;
    grid-template-columns: repeat(
      var(--_c-fill-mode),
      minmax(var(--_c-column-width), 1fr)
    );
    gap: var(--_c-row-gap) var(--_c-column-gap);
  }

  .cluster {
    --_c-main-alignment: var(--cluster--main-alignment, start);
    --_c-cross-alignment: var(--cluster--cross-alignment, center);
    --_c-gap: var(--cluster--gap, 1rem);

    display: block flex;
    flex-wrap: wrap;
    gap: var(--_c-gap);
    justify-content: var(--_c-main-alignment);
    align-items: var(--_c-cross-alignment);
  }
}

@layer utilities {
  .-fluid-text {
    --_fluid-text--min-width: var(--fluid-text--min-width, 375);
    --_fluid-text--max-width: var(--fluid-text--max-width, 1280);
    --_fluid-text--min-font-size: var(--fluid-text--min-font-size, 14);
    --_fluid-text--max-font-size: var(--fluid-text--max-font-size, 16);
    --_fluid-text--base-font-size: var(--fluid-text--base-font-size, 16);
    --_fluid-text--relative-unit: var(
      --fluid-text--relative-unit,
      100svi
    ); /* 100svi or 100cqi */
    --_fluid-text--slope: calc(
      (var(--_fluid-text--max-font-size) - var(--_fluid-text--min-font-size)) /
        (var(--_fluid-text--max-width) - var(--_fluid-text--min-width))
    );
    --_fluid-text--intercept: calc(
      var(--_fluid-text--min-font-size) - var(--_fluid-text--slope) *
        var(--_fluid-text--min-width)
    );
    --_fluid-text--font-size: clamp(
      var(--_fluid-text--min-font-size) / var(--_fluid-text--base-font-size) *
        1rem,
      var(--_fluid-text--slope) * var(--_fluid-text--relative-unit) +
        var(--_fluid-text--intercept) / var(--_fluid-text--base-font-size) *
        1rem,
      var(--_fluid-text--max-font-size) / var(--_fluid-text--base-font-size) *
        1rem
    );

    font-size: var(--_fluid-text--font-size);
  }

  .-trim-both {
    text-box: trim-both cap alphabetic;

    &:lang(ja) {
      text-box: trim-both text;
    }
  }

  .-line-clamp {
    --_limit: var(--line-clamp--limit, 3);

    display: -webkit-box;
    overflow-block: clip;
    -webkit-box-orient: block-axis;
    -webkit-line-clamp: var(--_limit);

    @supports not (overflow-block: clip) {
      overflow-y: clip;
    }
  }
}

@layer base {
  :root {
    --card-foreground: var(--color-darkest);
    --card-background: var(--color-lightest);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --_background: #fcfcfc;
    --_grid-color: #efefef;

    background-image: linear-gradient(var(--_grid-color) 2px, transparent 2px),
      linear-gradient(90deg, var(--_grid-color) 2px, transparent 2px),
      linear-gradient(var(--_grid-color) 1px, transparent 1px),
      linear-gradient(90deg, var(--_grid-color) 1px, var(--_background) 1px);
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    color: var(--color-darkest);
    font-family: Montserrat, sans-serif;
    line-height: 1.618;
  }

  

@property --color-darkest {
  syntax: "<color>";
  inherits: false;
  initial-value: #444;
}

@property --color-darker {
  syntax: "<color>";
  inherits: false;
  initial-value: #696969;
}

@property --color-dark {
  syntax: "<color>";
  inherits: false;
  initial-value: #999;
}

@property --color-light {
  syntax: "<color>";
  inherits: false;
  initial-value: #ccc;
}

@property --color-lighter {
  syntax: "<color>";
  inherits: false;
  initial-value: #ececec;
}

@property --color-lightest {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(from #ececec calc(l + 0.05) c h);
}

@property --icon-cart {
  syntax: "<url>";
  inherits: false;
  initial-value: url('data:image/svg+xml,<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" /></svg>');
}
}

._card {
    padding: 15px;
    padding-bottom: 0;
}
p.-trim-both {
    padding: 10px;
}
._heading {
    padding: 15px 0 0 0;
    margin-bottom: 6px;
    font-size: 20px;
}
.blue .purchase-button {
    background: #001830;
    padding: 10px 0;
    color: #fff;
}
.blue.yellow .purchase-button {
    background: #f5d11b;
    color: #000;
}

/*card css ends*/


.loan-solution {
    padding: 60px 0;
}
.blue-paper {
    background: #18253a;
    padding: 60px 0;
    position: relative;
    margin: 90px 0;
}
.blue-paper:before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    background: url(../images/paper.png) no-repeat;
    width: 100%;
    height: 70px;
    background-position: center;
}
.blue-paper:after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    background: url(../images/paper-b.png) no-repeat;
    width: 100%;
    height: 70px;
    rotate: 180deg;
    background-position: center;
}


/*---process css start----*/

.process-box{
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    box-shadow: 2px 2px 7px 0 #00000057;
}
.process-left:after{
        content: "";
    border-top: 15px solid #ffffff;
    border-bottom: 15px solid #ffffff;
    border-left: 15px solid #ffffff;
    border-right: 15px solid #ffffff;
    display: inline-grid;
    position: absolute;
    right: -15px;
    top: 42%;
    transform: rotate(45deg);
    box-shadow: 3px -2px 3px 0px #00000036;
    z-index: 1;
}
.process-right:after{
        content: "";
    border-top: 15px solid #ffffff00;
    border-bottom: 15px solid #ffffff;
    border-left: 15px solid #ffffff;
    border-right: 15px solid #ffffff00;
    display: inline-grid;
    position: absolute;
    left: -15px;
    top: 42%;
    transform: rotate(45deg);
    box-shadow: -1px 1px 3px 0px #0000001a;
    z-index: 1;
}
.process-step{
    background: #032c54;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    color: #fff;
    height: 100%;
    padding-top: 8px;
    position: relative;
    top: -26px;
    border-radius: 0px 0px 10px 10px;
    box-shadow: -6px 8px 0px 0px #00000014;
    min-height: 120px;
}
.process-point-right{
    background: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 8px solid #001830;
    box-shadow: 0 0 0px 4px #5c5c5c;
    margin: auto 0;
    position: absolute;
    bottom: 40px;
    left: -63px;
}
.process-point-right:before{
    content: "";
    height: 144px;
    width: 11px;
    background: #5c5c5c;
    display: inline-grid;
    transform: rotate(36deg);
    position: relative;
    left: -50px;
    top: -0px;
}
.process-point-left{
    background: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 8px solid #001830;
    box-shadow: 0 0 0px 4px #5c5c5c;
    margin: auto 0;
    position: absolute;
    bottom: 40px;
    right: -63px;
}
.process-point-left:before {
    content: "";
    height: 144px;
    width: 11px;
    background: #5c5c5c;
    display: inline-grid;
    transform: rotate(-38deg);
    position: relative;
    left: 50px;
    top: 0px;

}

.process-last:before{
    display: none;
}
.process-box p{
    z-index: 9;
}
.process-step p{
    font-size: 20px;
}
.process-step h2{
    font-size: 39px;
}
.process-step:after{
    content: "";
    border-top: 8px solid #04889800;
    border-bottom: 8px solid #000407;
    border-left: 8px solid #04889800;
    border-right: 8px solid #000407;
    display: inline-grid;
    position: absolute;
    left: -16px;
    top: 0;
}
.process-step:before{
    content: "";
    border-top: 8px solid #ff000000;
    border-bottom: 8px solid #000407;
    border-left: 8px solid #000407;
    border-right: 8px solid #ff000000;
    display: inline-grid;
    position: absolute;
    right: -16px;
    top: 0;
}
.process-line-l{
    background: #e7dfdf;
    height: 4px;
    position: absolute;
    width: 136px;
    right: -153px;
    top: 64px;
    z-index: 9;
}
.process-line-r{
    background: #e7dfdf;
    height: 4px;
    position: absolute;
    width: 136px;
    left: -153px;
    top: 63px;
    z-index: 9;
}

.work-process .process-box{
    min-height: 130px;
}
.process-point-left.last:before{
    display: none;
}

.step1 .process-point-right {
    bottom: 61px;
}
.step2 .process-point-left {
    bottom: 63px;
}
.step3 .process-point-right {
    bottom: 80px;
}
.step4 .process-point-left {
    bottom: 90px;
}
.step4 .process-line-r {
    top: 40px;
}
.step3 .process-line-l {
    top: 51px;
}
/*---process css ends----*/


/*--feedback css start--*/

.testimonial-inner {
    width: 500px;
    max-width: 100%;
    background: #ffca52;
    padding: 4em 3em;
    position: relative;
    &:after {
        content: "";
        border: 8px solid navy;
        border-radius: 50px;
        width: 85%;
        height: 120%;
        position: absolute;
        z-index: -1;
        left: 1.5em;
        top: -2em;
    }
    
    .quote {
        position: absolute;
        font-size: 3em;
        width: 40px;
        height: 40px;
        background: navy;
        color: #fff;
        text-align: center;
        line-height: 1.25;
        &.open {
            top: 0;
            left: 0;
        }
        &.close {
            bottom: 0;
            right: 0;
        }
    }
    p {
        width: 100%;
        display: inline-block;
        font-weight: 600;
        font-size: 16px;
        line-height: 26px;
        padding-top: 80px;
    }
    .source {
        width: 100%;
        height: 100%;
        position: relative;
        font-size: 13px;
        font-style: italic;
        text-align: right;
        span {
            display: inline-block;
            font-weight: bold;
            font-size: 1.15em;
            position: relative;
            margin-left: 1rem;
            text-align: right;
            &:before {
                content: "\2014";
                display: inline;
                margin-right: 5px;
            }
        }
    }
    .image {
        transform: rotate(-5deg);
        position: absolute;
        top: 0.5em;
        right: 1.5em;
        img {
            border: 10px solid #fff;
            margin: 0;
            padding: 0;
        }
        .clip {
            border: 2px solid #222;
            border-right: none;
            height: 75px;
            width: 20px;
            position: absolute;
            right: 15%;
            top: -15%;
            border-radius: 25px;
            &:before {
                content: "";
                position: absolute;
                top: -1px;
                right: 0;
                height: 10px;
                width: 16px;
                border: 2px solid #222;
                border-bottom: none;
                border-top-left-radius: 25px;
                border-top-right-radius: 25px;
                z-index: 99;
            }
            &:after {
                content: "";
                position: absolute;
                bottom: -1px;
                right: 0;
                height: 40px;
                width: 16px;
                border: 2px solid #222;
                border-top: none;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
                z-index: 99;
            }
        }
    }
}
   
.testimonial{
     background: #ffca52;
      position: relative;
    box-shadow: 0 2px 2px hsl(0deg 0% 0%/0.075), 0 3px 3px hsl(0deg 0% 0%/0.075),
        0 5px 5px hsl(0deg 0% 0%/0.075), 0 9px 9px hsl(0deg 0% 0%/0.075),
        0 17px 17px hsl(0deg 0% 0%/0.075);
}


.feedback .heading{
    margin-bottom: 60px;
}
.feedback.blue-paper {
    padding-bottom: 80px;

}
/*--feedback css ends--*/

.content-cta {
    padding: 40px 0 80px 0;
}
.theme-btn.on-white:hover {
    background: #001830;
    border-color: #001830;
    color: #fff;
}

.inner .two-div .col1 {
    width: 55%;
}

/*--breadcumb--*/
.bread-cum a {
    color: #575757;
    font-size: 16px;
    line-height: 26px;
}

.bread-cum {
    background: #e9ecef;
    padding: 10px 0;
}
.breadcrumb li {
    display: inline-block
}
.breadcrumb {
    margin: 0;
    padding: 0;
}

.icon-middle .icon-golden {
    background: #facb1d;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-middle .icon-golden i {
    font-size: 24px;
}
.inner-list-row li .icon {
    margin-right: 15px;
    font-size: 30px;
    color: #ccab7c;
}
.inner-list-row li {
    display: flex;
}

.inner-list-row li .icon i {
    background: #001830;
    color: #facb1d;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 24px;
}

.explore-section {
    padding-top: 30px;
    padding-bottom: 30px;
}


/*faq*/
.faq-area .accordion-container .accordion-title {
    position: relative;
    margin: 0;
    padding: 10px 36px 10px 20px;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    border-bottom: 2px solid #333;
}



.faq-area .accordion-container .accordion-title::after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: var(--black);
    font-size: 16px;
    line-height: 26px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    right: 0;
    content: "\f067";
}


.faq-area .accordion-container .accordion-title.open::after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    color: var(--black);
    font-size: 16px;
    line-height: 26px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    right: 0;
    content: "\f068";
}

.faq-area .accordion-container {
    width: 100%;
    margin: 0 auto
}

.faq-area .accordion-content {
    padding: 15px;
    padding-left: 25px;
    font-size: 18px;
    line-height: 28px;
    border-radius: 0;
    padding-bottom: 0;
}


/*.faq-area .holder:not(:first-of-type) .accordion-content{display: none;}*/
.faq-area .holder .accordion-content{display: none;}

.faq {padding: 30px 0 50px 0;     margin-top: 40px;}
/*faq*/

.tan {
    background: #f1f1f1;
}
.inner .sub {
    margin-bottom: 10px;
    color: #facb1d;
    font-style: italic;
}
.gap-t{padding-top: 40px;}
.gap-b{padding-bottom: 40px;}
.gap-b-2{padding-bottom: 20px;}

.icon-golden {
    width: 60px;
    height: 60px;
    background: #facb1d;
    border-radius: 50%;
    margin: 0 auto 15px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}     
.icon-golden i {
    font-size: 26px;
} 

.wrap .h3 a {
    color: #18253a;
}

.inner-list-row li .icon {
    margin-right: 15px;
    font-size: 30px;
    color: #001830;
}
.inner-list-row li {
    display: flex;
}
.banner.sm.personal-banner{
    background-position: center top;
}
.highlight {
    padding: 30px 30px 10px 30px;
    border: 1px solid #ddd;
    border-radius: 30px;
    margin-bottom: 30px;
    background: #f1f1f1;
}

.question {
    display: flex;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 20px;
}

.question .icon {
    color: #001830;
    font-size: 30px;
    line-height: 40px;
    margin-right: 15px;
}

.question.last{border: 0;}


/*apply from*/

.input-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.input-group .form-group {
    width: 49%;
    box-shadow: unset
}

.input-group .form-group .form-control {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #97a0ba;
    outline: 0;
    margin-bottom: 0;
    box-shadow: unset;
    width: 100%;
    padding: 8px;
}

.input-group .form-group ::-webkit-input-placeholder {
    color: #8892b0
}

.input-group .form-group ::placeholder {
    color: #8892b0
}

.input-group .form-group label {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    display: block;
}

.select-group .form-group {
    width: 32%
}

.select-group .form-group select {
    color: #8892b0;
    outline: 0
}

.input-single .form-group {
    width: 100%;
    font-weight: 700
}



.apply-form {
    background: #f1f1f1;
    padding: 30px;
    border-radius: 5px;
    max-width: 800px;
    margin: 0 auto;
}

.label-sec {
    margin-bottom: 5px;
}

/*apply end*/