/* ==========================================================================
   FINCON CAPITAL — Bootstrap 5 theme layer
   Loaded AFTER bootstrap.min.css. Overrides Bootstrap's CSS variables for
   brand colors/fonts/radius, then adds the small set of custom classes
   Bootstrap doesn't provide (gradients, icon circles, mega-menu, etc).
   ========================================================================== */

:root{
  /* Bootstrap theme overrides */
  --bs-primary: #0B2C56;
  --bs-primary-rgb: 11,44,86;
  --bs-secondary: #1E7FA6;
  --bs-secondary-rgb: 30,127,166;
  --bs-success: #3EA84E;
  --bs-success-rgb: 62,168,78;
  --bs-body-font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  --bs-body-color: #1E2A3A;
  --bs-body-bg: #ffffff;
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .9rem;
  --bs-border-radius-xl: 1.4rem;
  --bs-border-radius-2xl: 1.4rem;
  --bs-link-color: #1E7FA6;
  --bs-link-color-rgb: 30,127,166;
  --bs-link-hover-color: #0B2C56;
  --bs-link-hover-color-rgb: 11,44,86;

  /* Brand tokens used by custom classes below */
  --navy:#0B2C56; --navy-dark:#0A2647; --navy-darker:#071C38;
  --teal:#1E7FA6; --teal-light:#2FB6A3; --green:#3EA84E; --mint:#8FE3C7;
  --font-head:'Poppins','Segoe UI',system-ui,sans-serif;
  --grad-brand: linear-gradient(135deg, var(--navy) 0%, var(--teal) 55%, var(--teal-light) 100%);
  --grad-dark: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 60%, var(--teal) 130%);
  --grad-green: linear-gradient(135deg, var(--green) 0%, var(--teal-light) 100%);
}

body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4,h5,.navbar-brand,.btn{ font-family: var(--font-head); }
h1,h2,h3,h4,h5{ color: var(--navy); font-weight:700; }
a{ text-decoration:none; }
.fw-head{ font-family: var(--font-head); }

/* Section rhythm */
.section-pad{ padding: 88px 0; }
@media (max-width:768px){ .section-pad{ padding:56px 0; } }
.bg-off{ background: #F6F9FC; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--teal);
  background: rgba(30,127,166,.08); padding:6px 16px; border-radius:50rem;
  margin-bottom:16px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--green); }
.eyebrow-light{ color:#dff3ee; background: rgba(255,255,255,.12); }
.rule{ width:64px; height:4px; border-radius:2px; background: linear-gradient(90deg,var(--green),var(--teal-light)); margin:10px auto 0; }
.section-head{ max-width:680px; margin:0 auto 48px; }

/* Buttons — brand gradient variants layered on Bootstrap's .btn */
.btn{ font-weight:600; padding:.75rem 1.6rem; }
.btn-sm{ padding:.55rem 1.1rem; }
.btn-brand{ background: var(--grad-brand); border:none; color:#fff; box-shadow:0 8px 24px rgba(11,44,86,.18); }
.btn-brand:hover{ color:#fff; transform: translateY(-2px); box-shadow:0 14px 32px rgba(11,44,86,.24); }
.btn-brand-green{ background: var(--grad-green); border:none; color:#fff; }
.btn-brand-green:hover{ color:#fff; transform: translateY(-2px); }
.btn-outline-light:hover{ color:var(--navy); }
.btn-white{ background:#fff; color:var(--navy); border:none; }
.btn-white:hover{ background:#fff; color:var(--navy); opacity:.92; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.topbar{ background: var(--navy-darker); color:#cfe3ef; font-size:.8rem; }
.topbar a{ color:#cfe3ef; }

/* Dark navy header (same family as the footer) so the logo shows in full colour. */
.navbar.site-navbar{ background: var(--navy-dark); border-top:1px solid rgba(255,255,255,.06); box-shadow:0 2px 16px rgba(0,0,0,.25); }
.brand-mark{ width:46px; height:46px; flex-shrink:0; }
.brand-text{ line-height:1.1; }
.brand-text .name{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:#fff; }
.brand-text .name span{ color:var(--mint); }
.brand-text .tag{ font-size:.65rem; color:#a9c2d6; display:block; }

.navbar-nav .nav-link{ font-weight:600; color:#E3EEF6!important; padding:.9rem .9rem!important; position:relative; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{ color:var(--mint)!important; }
.site-navbar .navbar-toggler{ border-color: rgba(255,255,255,.3); }
.navbar-nav .nav-link.active::before{
  content:''; position:absolute; left:.9rem; right:.9rem; bottom:.4rem; height:2px;
  background: var(--grad-green); border-radius:2px;
}
.navbar-nav .nav-link.dropdown-toggle.active::before{ right:calc(.9rem + 1.1em); }
.mega-menu .dropdown-item.active{ background: rgba(30,127,166,.08); color: var(--teal); font-weight:600; }

.mega-menu{ min-width: 620px; max-width: calc(100vw - 32px); padding:1.25rem; border:none; box-shadow:0 20px 48px rgba(11,44,86,.18); border-radius: var(--bs-border-radius-lg); }
.mega-menu .mega-col-head{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); font-weight:700; margin-bottom:8px; }
.mega-menu .dropdown-item{ padding:.55rem .75rem; border-radius:.5rem; font-size:.88rem; }
.mega-menu .dropdown-item:hover{ background:#F6F9FC; color:var(--teal); }
@media (max-width:991.98px){
  .mega-menu{ min-width:auto; box-shadow:none; border:none; padding:.5rem 0 .5rem 1rem; background:transparent; }
  .mega-menu .mega-col-head{ color: var(--mint); }
  .mega-menu .dropdown-item{ color:#cfe3ef; }
  .mega-menu .dropdown-item:hover, .mega-menu .dropdown-item.active{ background: rgba(255,255,255,.08); color: var(--mint); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-section{ background: var(--grad-dark); color:#fff; position:relative; overflow:hidden; padding:90px 0 100px; }
.hero-section::before{
  content:''; position:absolute; inset:0; z-index:1;
  background-image: radial-gradient(circle at 85% 15%, rgba(47,182,163,.35), transparent 45%),
                     radial-gradient(circle at 10% 85%, rgba(62,168,78,.28), transparent 45%);
}
.hero-section::after{
  content:''; position:absolute; z-index:1; pointer-events:none;
  top:-90px; right:-90px; width:460px; height:460px;
  background-image:url('/images/mesh-triangles.svg'); background-size:cover;
  opacity:.55;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 72%);
}
.hero-section .container{ position:relative; z-index:2; }
@media (max-width:768px){ .hero-section::after{ width:300px; height:300px; top:-60px; right:-60px; } }
.hero-section h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.4rem); }
.hero-section h1 em{ font-style:normal; background:linear-gradient(90deg,#8FE3C7,#c9f27a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-section p.lead{ color:#cfe0ee; }

.hero-metrics{ display:flex; flex-wrap:wrap; gap:0; margin-top:48px; border-top:1px solid rgba(255,255,255,.15); padding-top:26px; }
.hero-metrics .metric{ flex:1; min-width:130px; }
.hero-metrics .metric b{ display:block; font-family:var(--font-head); font-size:1.55rem; color:#fff; }
.hero-metrics .metric span{ font-size:.76rem; color:#a9c2d6; text-transform:uppercase; letter-spacing:.03em; }

.hero-panel{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius: var(--bs-border-radius-xl); padding:28px; backdrop-filter: blur(6px); box-shadow:0 20px 48px rgba(0,0,0,.25); }
.hero-panel h3{ color:#fff; }
.hero-panel .form-label{ color:#c8dbe9; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.hero-panel .form-control, .hero-panel .form-select{ background:rgba(255,255,255,.95); border:none; }

/* Sub-page hero */
.page-hero{ background: var(--grad-dark); color:#fff; padding:64px 0 76px; position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; z-index:1; background-image: radial-gradient(circle at 90% 10%, rgba(47,182,163,.3), transparent 50%); }
.page-hero::after{
  content:''; position:absolute; z-index:1; pointer-events:none;
  bottom:-70px; right:-70px; width:320px; height:320px;
  background-image:url('/images/mesh-triangles.svg'); background-size:cover;
  opacity:.4;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 72%);
}
.page-hero .container{ position:relative; z-index:2; }
@media (max-width:768px){ .page-hero::after{ width:220px; height:220px; } }
.page-hero h1{ color:#fff; }
.page-hero p{ color:#cfe0ee; max-width:600px; }
.breadcrumb-light a, .breadcrumb-light span{ color:#a9c2d6; }
.breadcrumb-light a{ color:#dff3ee; }

/* ==========================================================================
   Cards / icons
   ========================================================================== */
.service-icon{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--grad-brand); box-shadow:0 8px 20px rgba(11,44,86,.18); }
.service-icon svg{ width:28px; height:28px; }
.card-service{ border:1px solid #E2E8F0; border-radius: var(--bs-border-radius-xl); transition:.25s; height:100%; }
.card-service:hover{ transform:translateY(-6px); box-shadow:0 20px 48px rgba(11,44,86,.14); border-color:transparent; }
.card-service .link-arrow{ font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--teal); }
.card-service .link-arrow::after{ content:'→'; margin-left:4px; transition:.2s; display:inline-block; }
.card-service:hover .link-arrow::after{ transform: translateX(4px); }

/* Process timeline — vertical (mobile) / horizontal (desktop) */
.timeline{ display:flex; flex-direction:column; list-style:none; padding:0; margin:0; }
.timeline-item{ position:relative; display:flex; gap:18px; padding-bottom:34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:23px; top:48px; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--teal-light), var(--teal));
}
.timeline-item:last-child::before{ display:none; }
.timeline-marker{
  width:48px; height:48px; border-radius:50%; background:#fff; color:var(--navy);
  border:2px solid var(--teal-light); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; flex-shrink:0; position:relative; z-index:2;
  box-shadow:0 4px 12px rgba(11,44,86,.1);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.timeline-card{
  background: var(--grad-brand); color:#fff; border-radius: var(--bs-border-radius-lg);
  padding:20px 24px; flex:1; box-shadow:0 10px 26px rgba(11,44,86,.16);
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
  background-size:160% 160%; background-position:0% 50%;
  cursor:default;
}
.timeline-card h3{ color:#fff; font-size:1rem; margin-bottom:4px; transition: transform .25s ease; }
.timeline-card p{ color:#e4f0fa; font-size:.86rem; margin-bottom:0; }

.timeline-item:hover .timeline-card{
  transform: translateY(-6px);
  box-shadow:0 20px 40px rgba(11,44,86,.28);
  background-position:100% 50%;
}
.timeline-item:hover .timeline-card h3{ transform: translateX(2px); }
.timeline-item:hover .timeline-marker{
  background: var(--grad-green); color:#fff; border-color: transparent;
  transform: scale(1.12);
}
@media (min-width:992px){
  .timeline-item:hover .timeline-card{ transform: translateY(-8px); }
}

@media (min-width:992px){
  .timeline{ flex-direction:row; align-items:flex-start; gap:8px; }
  .timeline-item{ flex-direction:column; align-items:center; text-align:center; flex:1; padding-bottom:0; gap:18px; }
  .timeline-item::before{
    left:50%; top:24px; bottom:auto; width:100%; height:2px; z-index:1;
    background: linear-gradient(90deg, var(--teal-light), var(--teal));
  }
  .timeline-item:last-child::before{ display:none; }
  .timeline-card{ width:100%; }
}

.values-band{ background: var(--grad-dark); color:#fff; border-radius: var(--bs-border-radius-xl); padding:44px 28px; }
.values-band .value-item{ text-align:center; }
.values-band .vicon{ width:50px; height:50px; margin:0 auto 12px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.values-band .vicon svg{ width:22px; height:22px; stroke:#8FE3C7; }
.values-band h4{ color:#fff; font-size:.95rem; }
.values-band p{ color:#b9cfe0; font-size:.82rem; margin-bottom:0; }
.values-band-light{ background:#F6F9FC; color:var(--text); border:1px solid #E2E8F0; }
.values-band-light .vicon{ background:rgba(30,127,166,.08); border-color:#E2E8F0; }
.values-band-light .vicon svg{ stroke: var(--teal); }
.values-band-light h4{ color:var(--navy); }
.values-band-light p{ color:#5A6B7B; }

.partner-tile{ border:1px solid #E2E8F0; border-radius: var(--bs-border-radius); padding:16px 12px; display:flex; align-items:center; justify-content:center; text-align:center; min-height:76px; font-family:var(--font-head); font-weight:600; font-size:.82rem; color:var(--navy); background:#fff; transition:.2s; height:100%; }
.partner-tile:hover{ border-color: var(--teal-light); box-shadow:0 4px 16px rgba(11,44,86,.08); transform: translateY(-2px); }

.testi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; }
.testi-stars{ color:#F5A623; letter-spacing:2px; }

.stat-box{ text-align:center; padding:26px 14px; background:#F6F9FC; border-radius: var(--bs-border-radius-lg); height:100%; }
.stat-box b{ display:block; font-family:var(--font-head); font-size:1.8rem; color:var(--navy); }
.stat-box span{ font-size:.8rem; color:#5A6B7B; text-transform:uppercase; letter-spacing:.03em; }
.placeholder-flag{ font-size:.65rem; color:var(--teal); display:block; margin-top:2px; }

.cta-band{ background: var(--grad-brand); border-radius: var(--bs-border-radius-xl); padding:52px 40px; color:#fff; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#e2f0ea; margin-bottom:0; }
.cta-band > *{ position:relative; z-index:2; }
.cta-band-dark{ background: var(--grad-dark); }
.cta-band-dark::after{
  content:''; position:absolute; z-index:1; pointer-events:none;
  top:-60px; right:-60px; width:260px; height:260px;
  background-image:url('/images/mesh-triangles.svg'); background-size:cover;
  opacity:.35;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,0) 70%);
}

.disclaimer-note{ background:rgba(30,127,166,.07); border:1px dashed var(--teal); border-radius: var(--bs-border-radius-sm); padding:14px 18px; font-size:.82rem; color:#5A6B7B; }
.disclaimer-note svg{ stroke:var(--teal); }
.disclaimer-strip{ background: var(--navy-darker); color:#a9c2d6; font-size:.78rem; text-align:center; padding:10px 16px; }
.disclaimer-strip a{ color:#8FE3C7; text-decoration:underline; }

.doc-item{ display:flex; gap:12px; align-items:center; padding:16px; background:#fff; border:1px solid #E2E8F0; border-radius: var(--bs-border-radius); height:100%; }
.doc-item svg{ stroke:var(--teal); flex-shrink:0; }
.doc-item span{ font-size:.9rem; font-weight:600; color:var(--navy); }

.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.95rem; }
.check-list svg{ width:20px; height:20px; stroke:var(--green); flex-shrink:0; margin-top:2px; }

.knowledge-card{ border:1px solid #E2E8F0; border-radius: var(--bs-border-radius-xl); transition:.2s; height:100%; }
.knowledge-card:hover{ box-shadow:0 16px 40px rgba(11,44,86,.12); transform: translateY(-4px); }
.knowledge-card .ktag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--teal); font-weight:700; }

.lender-section h3{ display:flex; align-items:center; gap:10px; }
.lender-section h3::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green); }

.bank-badge{ border:1px solid #E2E8F0; border-radius: var(--bs-border-radius-lg); padding:18px 12px; text-align:center; background:#fff; transition:.2s; height:100%; }
.bank-badge:hover{ border-color: var(--teal-light); box-shadow:0 8px 20px rgba(11,44,86,.1); transform: translateY(-3px); }
.bank-badge .mark{ width:46px; height:46px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-head); font-weight:700; font-size:.85rem; }
.bank-badge .bname{ font-size:.76rem; font-weight:600; color:var(--navy); line-height:1.25; display:block; }
.bank-badge .mark.c1{ background: linear-gradient(135deg,var(--navy),var(--teal)); }
.bank-badge .mark.c2{ background: linear-gradient(135deg,var(--teal),var(--teal-light)); }
.bank-badge .mark.c3{ background: linear-gradient(135deg,var(--teal-light),var(--green)); }
.bank-badge .mark.c4{ background: linear-gradient(135deg,var(--green),var(--teal)); }

.subnav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.subnav .btn{ font-size:.82rem; }

/* Accordion (FAQ) — theme the Bootstrap accordion */
.accordion-button{ font-family:var(--font-head); font-weight:600; color:var(--navy); }
.accordion-button:not(.collapsed){ background: rgba(30,127,166,.06); color:var(--navy); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(30,127,166,.15); }

/* EMI calculator */
.calc-card{ border:1px solid #E2E8F0; border-radius: var(--bs-border-radius-xl); box-shadow:0 10px 30px rgba(11,44,86,.08); }
.calc-result{ background: var(--grad-dark); color:#fff; border-radius: var(--bs-border-radius-xl); }
.calc-result h3{ color:#fff; }
.emi-amount{ font-family:var(--font-head); font-weight:800; font-size:2.5rem; color:#8FE3C7; }
.calc-breakdown{ border-top:1px solid rgba(255,255,255,.15); }
.calc-breakdown span{ color:#a9c2d6; }
.calc-breakdown b{ color:#fff; }
.form-range::-webkit-slider-thumb{ background: var(--teal); }
.form-range::-moz-range-thumb{ background: var(--teal); }

/* Compare table */
.table-compare th{ background:#F6F9FC; font-family:var(--font-head); color:var(--navy); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.table-compare td.hl{ color:var(--green); font-weight:600; }

/* Footer */
footer.site-footer{ background: var(--navy-darker); color:#a9c2d6; }
footer.site-footer h4{ color:#fff; font-family:var(--font-head); font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; }
footer.site-footer a{ color:#a9c2d6; }
footer.site-footer a:hover{ color:#8FE3C7; }
footer.site-footer .footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
footer.site-footer .footer-social a:hover{ background: var(--teal-light); border-color: var(--teal-light); }
footer.site-footer .footer-social svg{ width:16px; height:16px; stroke:#fff; }
footer.site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; }

/* WhatsApp float */
.whatsapp-float{ position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(0,0,0,.25); z-index:1030; transition:.2s; }
.whatsapp-float:hover{ transform: scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; fill:#fff; }

.form-status{ font-size:.85rem; margin-top:10px; display:none; }
.form-status.show{ display:block; }

/* Global page loader — shown until the page finishes loading, and again on navigation */
.page-loader{
  position:fixed; inset:0; z-index:2000; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  transition: opacity .35s ease, visibility .35s ease;
}
.page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.page-loader .loader-ring{
  width:54px; height:54px; border-radius:50%;
  border:5px solid rgba(11,44,86,.12);
  border-top-color: var(--teal);
  border-right-color: var(--green);
  animation: loader-spin .8s linear infinite;
}
.page-loader .loader-brand{ font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--navy); letter-spacing:.05em; }
.page-loader .loader-brand span{ color:var(--green); }
@keyframes loader-spin{ to{ transform: rotate(360deg); } }

/* 5-equal-column helper — Bootstrap's grid only ships 1..12, no native
   "one-fifth" column, and the values band / partner grid need 5 across. */
@media (min-width:768px){ .col-md-2-4{ flex:0 0 20%; max-width:20%; } }
@media (min-width:992px){ .col-lg-2-4{ flex:0 0 20%; max-width:20%; } }