/* ==========================================================================
   Finfly India — Black & Soft Silver-White Combo Theme
   Dark Sleek Canvas with Standout Soft Cool Silver-White Feature & Tool Cards
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Global Atmosphere (Rich Dark Navy / Black Background)
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-navy-950) !important;
  color: var(--color-text-on-dark-secondary) !important;
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-inverse) !important;
  font-family: var(--font-display);
}

p {
  color: var(--color-text-on-dark-secondary) !important;
}

.section {
  padding: 85px 0;
  background: var(--color-navy-950);
}

.section--alt {
  background: var(--color-navy-900) !important;
}

.section-heading,
.globalinner-heading,
.globalinner.heading {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto 48px !important;
  font-size: initial !important;
  font-weight: initial !important;
  line-height: initial !important;
  letter-spacing: initial !important;
}

.section-heading h2,
.globalinner-heading h2,
.globalinner.heading h2 {
  color: #FFFFFF !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.28 !important;
  margin: 0 0 14px 0 !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

.section-heading h2 span,
.globalinner-heading h2 span,
.globalinner-heading span,
.globalinner.heading span {
  background: linear-gradient(90deg, #928AFF, #39D9FF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.section-heading p,
.globalinner-heading p {
  color: #94A3B8 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.04em !important;
  font-weight: 400 !important;
  margin: 0 auto !important;
  max-width: 680px !important;
}

.section-eyebrow,
.eligibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(109, 99, 255, 0.1) !important;
  border: 1px solid rgba(146, 138, 255, 0.25) !important;
  color: #928AFF !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-eyebrow::before,
.eligibility-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #928AFF;
}

/* --------------------------------------------------------------------------
   2. Header & Navigation (Dark Frosted Glass)
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(7, 9, 30, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(244, 246, 255, 0.08) !important;
}

.logo {
  color: #FFFFFF !important;
}
.logo img {
  max-width: inherit;
  height: 70px;
  width: auto;
  object-fit: contain;
}

.nav-link {
  color: var(--color-text-on-dark-secondary) !important;
  font-weight: 600;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-teal-400) !important;
}

.products-mega-panel,
.dropdown-panel {
  background: #111432 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

.products-mega-panel::before {
  background: #111432 !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.products-mega-link strong {
  color: #FFFFFF !important;
}

.products-mega-link small {
  color: rgba(255, 255, 255, 0.45) !important;
}

.products-mega-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.dropdown-link {
  color: var(--color-text-on-dark-secondary) !important;
}

.dropdown-link:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* --------------------------------------------------------------------------
   3. Hero Section & Hero Calculator Box
   -------------------------------------------------------------------------- */
.hero,
.page-hero {
  background-image: url(../images/hero/hero-bg.png);
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-text-inverse) !important;
  padding: 85px 0 95px !important;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(7 9 30 / 84%) !important;
  pointer-events: none;
}

.page-hero::after {
  display: none !important;
}

.hero .container,
.page-hero .container {
  position: relative;
  z-index: 2;
}

.hero-copy h1,
.page-hero h1 {
  color: #FFFFFF !important;
  font-size: clamp(32px, 4.5vw, 54px);
  line-height: 1.12;
  margin-top: 18px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.hero {
  padding-top: 85px !important;
  padding-bottom: 120px !important;
  position: relative !important;
  margin-bottom: 0 !important;
}

.hero-inner {
  align-items: center !important;
  gap: 56px !important;
}

.trusted-by {
  padding: 75px 0 85px !important;
  margin: 0 !important;
  background: #080A21 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

.trusted-by-label {
  color: #94A3B8 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 35px !important;
  text-align: center !important;
}

.financial-card-section {
  padding: 105px 0 95px !important;
}

.page-hero p {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 1.15rem;
  max-width: 650px;
  margin: 18px auto 0;
}

.hero-copy {
  text-align: left !important;
}

.hero-copy .hero-sub {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 1.15rem !important;
  text-align: left !important;
  margin: 14px 0 0 0 !important;
  max-width: 100% !important;
}

.hero-copy .hero-points {
  text-align: left !important;
  margin: 20px 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.hero-copy .hero-points li {
  color: var(--color-text-on-dark-secondary) !important;
  text-align: left !important;
  padding-left: 28px !important;
  position: relative !important;
}

.hero-stats {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hero-stats .stat-number {
  color: #FFFFFF !important;
}

.hero-stats .stat-label {
  color: var(--color-text-on-dark-secondary) !important;
}

/* Hero Quick Estimate Calculator Card (Soft Silver-White Box - 3-4 shades darker) */
.hero-calc,
#calculator {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.65), 0 0 30px rgba(232, 237, 245, 0.08) !important;
  padding: 32px;
  position: relative;
  z-index: 5;
}

.hero-calc {
  text-align: left !important;
}

.calc-glow {
  display: none !important;
}

.calc-header {
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.calc-heading {
  text-align: left !important;
  flex: 1 !important;
}

.calc-badge {
  background: #DCE5F2 !important;
  border: 1px solid #C4D2E5 !important;
  color: #1A56DB !important;
  font-weight: 700;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 0 10px 0 !important;
}

.calc-heading h3 {
  color: #0F172A !important;
  font-size: 26px;
  font-weight: 750;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
}

.calc-heading p {
  color: #475467 !important;
  text-align: left !important;
  margin: 0 0 14px 0 !important;
}

.calc-header-icon {
  background: #D8EADF !important;
  border: 1px solid #BFE0CB !important;
  color: #16A34A !important;
  border-radius: 12px;
  flex-shrink: 0 !important;
}

.calc-field {
  text-align: left !important;
}

.calc-field label {
  color: #1E293B !important;
  font-weight: 600;
  font-size: 13px;
  display: block !important;
  text-align: left !important;
  margin-bottom: 6px !important;
}

.calc-input input,
.calc-input select {
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}

.calc-input input:focus,
.calc-input select:focus {
  background: #F1F5F9 !important;
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
  color: #0F172A !important;
}

.calc-input input::placeholder {
  color: #64748B !important;
}

.calc-input-icon {
  color: #475467 !important;
}

.calc-select-icon {
  color: #475467 !important;
}

.calc-input select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

.calc-consent {
  color: #1E293B !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 18px 0 !important;
  cursor: pointer !important;
}

.calc-consent-text,
.calc-consent span {
  color: #1E293B !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  line-height: 1.6 !important;
}

.calc-checkmark {
  background: #DAE2EC !important;
  border: 1.5px solid #94A3B8 !important;
  border-radius: 4px !important;
}

.calc-checkbox input:checked + .calc-checkmark {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
}

.calc-checkbox input:checked + .calc-checkmark i {
  color: #FFFFFF !important;
  display: block !important;
}

/* Captcha inside Calculator Form */
#calculator .captcha-group,
.hero-calc .captcha-group,
.form-group.captcha-group {
  margin: 16px 0 !important;
}

#calculator .captcha-group label,
#calculator .captcha-group .form-label,
#calculator label[for^="captcha-"],
.hero-calc .captcha-group label,
.hero-calc .captcha-group .form-label,
.hero-calc label[for^="captcha-"] {
  color: #1E293B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

#calculator .captcha-group input,
#calculator .captcha-group .form-input,
.hero-calc .captcha-group input,
.hero-calc .captcha-group .form-input {
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#calculator .captcha-group input::placeholder,
#calculator .captcha-group .form-input::placeholder,
.hero-calc .captcha-group input::placeholder,
.hero-calc .captcha-group .form-input::placeholder,
.captcha-group input::placeholder,
.captcha-group .form-input::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

#calculator .captcha-group input:focus,
.hero-calc .captcha-group input:focus {
  background: #F1F5F9 !important;
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
  color: #0F172A !important;
}

#calculator .calc-footer {
  color: #475467 !important;
  text-align: left !important;
}

.calc-submit-content {
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.calc-submit-content strong,
.calc-submit-content small {
  display: block !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   4. "Find the Right Financial Product" — SOFT SILVER-WHITE BOXES (3-4 Shades Darker)
   -------------------------------------------------------------------------- */
.financial-card-section {
  background: var(--color-navy-950) !important;
}

.financial-card {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  box-shadow: 0 15px 45px -8px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  color: #0F172A !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.4s ease !important;
}

.financial-card::before {
  display: none !important;
}

.financial-card:hover {
  background: #F0F4FA !important;
  transform: translateY(-9px) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(59, 130, 246, 0.25) !important;
}

.financial-card .financial-card-orb {
  background: radial-gradient(circle, rgba(26, 86, 219, 0.08), transparent 70%) !important;
}

.financial-card:hover .financial-card-orb {
  background: radial-gradient(circle, rgba(5, 150, 105, 0.12), transparent 70%) !important;
}

.financial-card-top > span {
  color: #64748B !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.financial-card-icon {
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  color: #1A56DB !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(26, 86, 219, 0.08) !important;
}

.financial-card:hover .financial-card-icon {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  border-color: #1A56DB !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 8px 20px rgba(26, 86, 219, 0.3) !important;
}

.financial-card-content h3 {
  color: #0F172A !important;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.financial-card-content p {
  color: #334155 !important;
  font-size: 13.5px;
  line-height: 1.65;
}

.financial-card-bottom {
  border-top: 1px solid #CBD5E1 !important;
  color: #1A56DB !important;
  font-weight: 700;
  font-size: 12px;
}

.financial-card-bottom i {
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
  color: #1A56DB !important;
}

.financial-card:hover .financial-card-bottom i {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  border-color: #1A56DB !important;
  transform: translateX(4px) !important;
}

.financial-card-badge {
  background: linear-gradient(135deg, #1A56DB, #2563EB) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. "Smart Tools For Better Decisions" — SOFT SILVER-WHITE BOXES (3-4 Shades Darker)
   -------------------------------------------------------------------------- */
.calculator-section {
  background: var(--color-navy-950) !important;
}

.calculator-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 52px !important;
}

.calculator-card {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  padding: 28px !important;
  box-shadow: 0 15px 45px -8px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.4s ease !important;
}

.calculator-card::before {
  background: rgba(26, 86, 219, 0.08) !important;
}

.calculator-card:hover {
  background: #F0F4FA !important;
  transform: translateY(-9px) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(59, 130, 246, 0.25) !important;
}

.calculator-card .card-number {
  color: #64748B !important;
  font-size: 11px;
  font-weight: 750;
}

.calculator-icon {
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  border-radius: 14px !important;
  color: #1A56DB !important;
  font-size: 18px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 3px 10px rgba(26, 86, 219, 0.08) !important;
}

.calculator-icon i,
.calculator-icon svg {
  color: #1A56DB !important;
  stroke: #1A56DB !important;
}

.calculator-card:hover .calculator-icon {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
  transform: rotate(-5deg) scale(1.08) !important;
}

.calculator-card:hover .calculator-icon i,
.calculator-card:hover .calculator-icon svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.calculator-card .card-label {
  color: #1A56DB !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.calculator-card .card-content h3 {
  color: #0F172A !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.calculator-card .card-content p {
  color: #334155 !important;
  font-size: 13.5px;
  line-height: 1.65;
}

.calculator-card .card-action {
  border-top: 1px solid #CBD5E1 !important;
  color: #1A56DB !important;
  font-size: 12px;
  font-weight: 700;
}

.calculator-section .arrow {
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
  color: #1A56DB !important;
}

.calculator-card:hover .arrow {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
  transform: rotate(45deg);
}

.featured-card {
  border-color: #CBD5E1 !important;
}

.calculator-section .more-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

.calculator-section .more-btn:hover {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   6. Other Dark Sections & Components
   -------------------------------------------------------------------------- */
.howWorks {
  background: var(--color-navy-950) !important;
}

.howWorks__step {
  background: var(--color-navy-700) !important;
  border: 1px solid var(--color-border-on-dark) !important;
  color: #FFFFFF !important;
}

.debt-readiness-section {
  background: var(--color-navy-950) !important;
}

.debt-readiness-card {
  background: var(--color-navy-700) !important;
  border: 1px solid var(--color-border-on-dark) !important;
}

.debt-card-top h3 {
  color: #FFFFFF !important;
}

.debt-checklist li strong {
  color: #FFFFFF !important;
}

.debt-checklist li p {
  color: var(--color-text-on-dark-secondary) !important;
}

/* Accordion FAQ */
/* Universal FAQ Accordion Styling */
.accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

.accordion-item {
  background: #0F172A !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.accordion-item:hover,
.accordion-item.is-open {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.2) !important;
}

.accordion-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  gap: 16px !important;
  user-select: none !important;
}

.accordion-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #38BDF8 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg) !important;
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(26, 86, 219, 0.5) !important;
}

.accordion-panel {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
}

.accordion-item.is-open .accordion-panel {
  max-height: 1200px !important;
  opacity: 1 !important;
}

.accordion-panel-inner {
  padding: 0 22px 22px !important;
}

.accordion-panel-inner p {
  color: #94A3B8 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Final CTA Box & Footer (Dark Anchors)
   -------------------------------------------------------------------------- */
.final-cta {
  background: linear-gradient(135deg, #111432 0%, #07091E 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.final-cta h2 {
  color: #FFFFFF !important;
}

.final-cta p {
  color: var(--color-text-on-dark-secondary) !important;
}

.site-footer {
  background: #050614 !important;
  color: var(--color-text-on-dark-secondary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-brand {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-brand .logo {
  color: #FFFFFF !important;
}

.footer-brand p {
  color: var(--color-text-on-dark-secondary) !important;
}

.footer-col-title {
  color: #FFFFFF !important;
  font-weight: 700;
}

.footer-links a {
  color: var(--color-text-on-dark-secondary) !important;
}

.footer-links a:hover {
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   8. PERSONAL LOAN & INNER PRODUCT PAGES (Combo Theme Harmonization)
   -------------------------------------------------------------------------- */
/* Loan Overview Section */
.loanOverview {
  background: var(--color-navy-950) !important;
}

.loanOverview__wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 50px !important;
  align-items: center !important;
}

.loanOverview__highlight {
  background: rgba(26, 86, 219, 0.12) !important;
  border: 1px solid rgba(26, 86, 219, 0.3) !important;
  color: #39D9FF !important;
  border-radius: 12px !important;
  margin-top: 25px !important;
}

/* Loan Overview Details Box — Standout Soft Silver-White Card */
.loanOverview__details {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  box-shadow: 0 15px 45px -8px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  padding: 32px !important;
}

.loanOverview__detailsHead {
  border-bottom: 1px solid #CBD5E1 !important;
  padding-bottom: 16px !important;
}

.loanOverview__detailsHead span {
  color: #64748B !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.loanOverview__detailsHead h3 {
  color: #0F172A !important;
  font-size: 22px;
}

.loanOverview__detailsHead i {
  color: #1A56DB !important;
}

.loanOverview__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  border: none !important;
  margin-top: 20px !important;
}

.loanOverview__item {
  background: #DAE2EC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  min-height: auto !important;
}

.loanOverview__item:nth-child(odd) {
  border-right: 1px solid #CBD5E1 !important;
}

.loanOverview__item b {
  color: #1A56DB !important;
  font-weight: 800;
}

.loanOverview__item small {
  color: #64748B !important;
  font-size: 11px;
}

.loanOverview__item p {
  color: #0F172A !important;
  font-weight: 700;
}

/* Trust Metrics Section */
.trustMetrics {
  background: var(--color-navy-950) !important;
}

.trustMetrics__rail {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.trustMetrics__line {
  background: rgba(255, 255, 255, 0.1) !important;
}

.trustMetrics__dot {
  background: #111432 !important;
  border: 2px solid #1A56DB !important;
  color: #39D9FF !important;
  box-shadow: 0 0 15px rgba(26, 86, 219, 0.4) !important;
}

.trustMetrics__dot.green {
  border-color: #059669 !important;
  color: #35D6A5 !important;
}

.trustMetrics__dot.cyan {
  border-color: #0284C7 !important;
  color: #39D9FF !important;
}

.trustMetrics__dot.purple {
  border-color: #928AFF !important;
  color: #928AFF !important;
}

.trustMetrics__number {
  color: #FFFFFF !important;
  font-weight: 800;
}

.trustMetrics__label {
  color: var(--color-text-on-dark-secondary) !important;
}

.trustMetrics__index {
  color: #64748B !important;
}

/* "Why Apply Through Us?" Feature Cards — Soft Silver-White Standout Cards */
.whyChoose {
  background: var(--color-navy-950) !important;
}

.whyChoose__features {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  border: none !important;
  margin-top: 20px !important;
}

.whyChoose__feature {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.45) !important;
  min-height: 250px !important;
  padding: 26px !important;
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.whyChoose__feature:hover {
  background: #F0F4FA !important;
  transform: translateY(-7px) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 22px 55px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.25) !important;
}

.whyChoose__index {
  color: #64748B !important;
  font-weight: 750;
}

.whyChoose__icon {
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  color: #1A56DB !important;
  border-radius: 12px !important;
}

.whyChoose__icon.green {
  background: #D8EADF !important;
  border-color: #BFE0CB !important;
  color: #059669 !important;
}

.whyChoose__icon.cyan {
  background: #D5E8F3 !important;
  border-color: #B9DAEC !important;
  color: #0284C7 !important;
}

.whyChoose__content h3 {
  color: #0F172A !important;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}

.whyChoose__content p {
  color: #334155 !important;
  font-size: 13.5px;
  line-height: 1.6;
}

.whyChoose__arrow {
  color: #64748B !important;
}

.whyChoose__feature:hover .whyChoose__arrow {
  color: #1A56DB !important;
}

/* "How to Apply" Process Cards — Soft Silver-White Standout Cards */
.loan-process-section {
  background: var(--color-navy-950) !important;
}

.loan-process-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 25px !important;
}

.loan-process-card {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.45) !important;
  min-height: 240px !important;
  padding: 28px !important;
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.loan-process-card:hover {
  background: #F0F4FA !important;
  transform: translateY(-7px) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 22px 55px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.25) !important;
}

.loan-process-number {
  color: #64748B !important;
  font-weight: 750;
}

.loan-process-icon {
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  color: #1A56DB !important;
  border-radius: 12px !important;
}

.loan-process-content h3 {
  color: #0F172A !important;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}

.loan-process-content p {
  color: #334155 !important;
  font-size: 13.5px;
  line-height: 1.6;
}

.loan-process-arrow i,
.loan-process-check i {
  color: #1A56DB !important;
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
  border-radius: 50%;
  padding: 6px;
}

.loan-process-action {
  margin-top: 35px !important;
  display: flex !important;
  justify-content: center !important;
}

.loan-process-btn {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(26, 86, 219, 0.35) !important;
}

.loan-process-btn:hover {
  background: #1E429F !important;
  transform: translateY(-2px);
}

/* EMI Calculator Section — Premium Unified Soft Silver-White Card */
.loan-emi-section {
  background: var(--color-navy-950) !important;
}

.emi-calculator {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.55), 0 0 25px rgba(232, 237, 245, 0.05) !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  overflow: hidden !important;
  margin: 0 auto 52px auto !important;
  max-width: 1080px !important;
}

.emi-input-side {
  background: transparent !important;
  padding: 38px !important;
  border: none !important;
  box-shadow: none !important;
}

.emi-field {
  padding: 20px 0 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

.emi-field:first-child {
  padding-top: 0 !important;
}

.emi-field:last-child {
  border-bottom: none !important;
}

.emi-field-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.emi-field-head label {
  color: #0F172A !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
}

.emi-value,
.emi-value-tenure {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  background: #DAE2EC !important;
}

.emi-value span,
.emi-value-tenure span {
  color: #1A56DB !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.emi-value input,
.emi-value-tenure input {
  width: 100px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  text-align: right !important;
}

.emi-slider,
input[type="range"].emi-slider {
  width: 100% !important;
  height: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 999px !important;
  background: #CBD5E1 !important;
  outline: none !important;
  margin: 10px 0 !important;
  cursor: pointer !important;
}

input[type="range"].emi-slider::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #1A56DB !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.45) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}

input[type="range"].emi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}

.emi-range-labels {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
}

.emi-range-labels span {
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.emi-tabs {
  display: flex !important;
  gap: 4px !important;
  background: #DAE2EC !important;
  padding: 3px !important;
  border-radius: 8px !important;
  border: 1px solid #CBD5E1 !important;
}

.emi-tabs button {
  border: none !important;
  background: transparent !important;
  color: #475467 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.emi-tabs button.active {
  background: #1A56DB !important;
  color: #FFFFFF !important;
}

/* Result Side */
.emi-result-side {
  background: #F0F4FA !important;
  border-left: 1px solid #CBD5E1 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}

.emi-result-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.emi-result-label {
  display: block !important;
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

.emi-main-value {
  color: #1A56DB !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.emi-result-sub {
  color: #475467 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.emi-result-icon {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  color: #1A56DB !important;
  border-radius: 12px !important;
  font-size: 17px !important;
}

.emi-chart-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 10px 0 20px !important;
  padding: 14px 0 !important;
}

.emi-donut {
  position: relative !important;
  width: 135px !important;
  height: 135px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.emi-donut-inner {
  position: absolute !important;
  text-align: center !important;
}

.emi-donut-inner span {
  display: block !important;
  color: #64748B !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

.emi-donut-inner strong {
  display: block !important;
  color: #0F172A !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

.emi-legend {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.emi-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.legend-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.legend-dot.principal-dot {
  background: #1A56DB !important;
}

.legend-dot.interest-dot {
  background: #059669 !important;
}

.emi-legend-item p {
  color: #64748B !important;
  font-size: 11.5px !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

.emi-legend-item strong {
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.emi-summary {
  background: #DAE2EC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.emi-summary span {
  display: block !important;
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.emi-summary strong {
  color: #0F172A !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
}

.emi-total strong {
  color: #1A56DB !important;
}

.emi-apply-btn {
  width: 100% !important;
  background: #1A56DB !important;
  color: #FFFFFF !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(26, 86, 219, 0.35) !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.emi-apply-btn:hover {
  background: #1E429F !important;
  transform: translateY(-2px) !important;
}

.emi-schedule-head button {
  background: #DAE2EC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

.emi-table-head {
  background: #DAE2EC !important;
  border-bottom: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 700;
}

.emi-row {
  color: #334155 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

/* Loan Eligibility Section — Soft Silver-White Form Card */
.loan-eligibility-section {
  background: var(--color-navy-950) !important;
}

.loan-eligibility-wrap {
  display: grid !important;
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 50px !important;
  align-items: start !important;
}

.loan-eligibility-content h2 {
  color: #FFFFFF !important;
}

.loan-eligibility-content h3 {
  color: #FFFFFF !important;
  font-size: 18px;
  margin-top: 25px;
}

.eligibility-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.eligibility-item {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 64px !important;
}

.eligibility-item .eligibility-icon {
  background: #DAE4F2 !important;
  color: #1A56DB !important;
}

.eligibility-item span {
  color: #0F172A !important;
  font-weight: 700;
}

.loan-eligibility-form {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px -8px rgba(0, 0, 0, 0.55) !important;
  padding: 34px !important;
}

.eligibility-form-head h3 {
  color: #0F172A !important;
  font-size: 22px;
  font-weight: 750;
}

.eligibility-form-head span {
  color: #64748B !important;
}

.eligibility-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}

.eligibility-field.field-full {
  grid-column: 1 / -1 !important;
}

.eligibility-field label {
  color: #1E293B !important;
  font-weight: 600;
  font-size: 12.5px;
}

.eligibility-field input {
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.eligibility-field input:focus {
  background: #F1F5F9 !important;
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
  color: #0F172A !important;
}

.eligibility-consent {
  color: #1E293B !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  font-weight: 550 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 18px 0 !important;
}

.eligibility-consent a {
  color: #1A56DB !important;
  text-decoration: underline !important;
}

.eligibility-submit {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(26, 86, 219, 0.35) !important;
}

.eligibility-submit:hover {
  background: #1E429F !important;
}

/* Personal Loan FAQ Section */
.personalFaq {
  background: var(--color-navy-950) !important;
}

.personalFaq__item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}

.personalFaq__question {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 16px;
}

.personalFaq__question i {
  color: #39D9FF !important;
}

.personalFaq__item.active {
  border-color: rgba(57, 217, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.personalFaq__item.active .personalFaq__question i {
  color: #35D6A5 !important;
  transform: rotate(45deg);
}

.personalFaq__answer p {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 14px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8B. ELITE FINTECH PRODUCT PAGES MASTER DESIGN SYSTEM
   -------------------------------------------------------------------------- */

/* Section Atmospheric Background & Hierarchy */
.page-hero {
  position: relative !important;
  padding: 60px 0 70px !important;
  background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.10) 0%, transparent 45%),
              var(--color-navy-950) !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 3D Glassmorphic Hero Visual Product Badge */
.heroVisualBadge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 18px 8px 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  margin-bottom: 20px !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.heroVisualBadge:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45), 0 0 20px rgba(99, 102, 241, 0.25) !important;
}

.heroVisualBadge__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  color: #FFFFFF !important;
  position: relative !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;
}

.heroVisualBadge__icon.home {
  background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5) !important;
}

.heroVisualBadge__icon.business {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5) !important;
}

.heroVisualBadge__icon.lap {
  background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5) !important;
}

.heroVisualBadge__icon.car {
  background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;
}

.heroVisualBadge__icon.bike {
  background: linear-gradient(135deg, #10B981 0%, #047857 100%) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
}

.heroVisualBadge__icon.od {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5) !important;
}

.heroVisualBadge__icon.unsecured {
  background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%) !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5) !important;
}

.heroVisualBadge__icon.education {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5) !important;
}

.heroVisualBadge__icon.gold {
  background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%) !important;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.5) !important;
}

.heroVisualBadge__icon.las {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
}

.heroVisualBadge__icon.medical {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5) !important;
}

.heroVisualBadge__text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.heroVisualBadge__title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.heroVisualBadge__sub {
  font-size: 11.5px !important;
  color: #94A3B8 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.heroVisualBadge__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #38BDF8 !important;
  text-transform: uppercase !important;
  margin-left: 6px !important;
}

/* Micro Trust Strip under Hero points */
.heroMicroTrustStrip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 26px !important;
  flex-wrap: wrap !important;
}

.heroTrustPill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

.heroTrustPill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

.heroTrustPill i {
  color: #38BDF8 !important;
  font-size: 13px !important;
}

/* Global Heading Standardizer */
.section-heading,
.globalinner-heading,
.globalinner.heading {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto 48px !important;
  font-size: initial !important;
  font-weight: initial !important;
  line-height: initial !important;
  letter-spacing: initial !important;
}

.section-heading h2,
.globalinner-heading h2,
.globalinner.heading h2,
.globalinner.heading {
  color: #FFFFFF !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.28 !important;
  margin-bottom: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

.section-heading h2 span,
.globalinner-heading h2 span,
.globalinner-heading span,
.globalinner.heading span {
  background: linear-gradient(90deg, #928AFF, #39D9FF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.section-heading p,
.globalinner-heading p {
  color: #94A3B8 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.04em !important;
  font-weight: 400 !important;
  margin: 0 auto !important;
  max-width: 680px !important;
}

/* Hero 2-Column Product Layout */
.personalHeroGrid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 48px !important;
  align-items: center !important;
  text-align: left !important;
}

.personalHeroGrid h1,
.page-hero h1 {
  font-size: clamp(30px, 3.8vw, 46px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  color: #FFFFFF !important;
}

.personalHeroGrid h1 span,
.page-hero h1 span {
  background: linear-gradient(90deg, #928AFF, #39D9FF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.personalHeroGrid .heroCopy p,
.page-hero p {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.personalHeroGrid .hero-points {
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.personalHeroGrid .hero-points li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #E2E8F0 !important;
}

.personalHeroGrid .hero-points li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #059669 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.4) !important;
}



.personalHeroForm h3 {
  color: #0F172A !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
}

.personalHeroForm p {
  color: #475569 !important;
  font-size: 13px !important;
  margin: 0 0 20px !important;
}

.heroFormField {
  margin-bottom: 16px !important;
}

.heroFormField label {
  display: block !important;
  color: #1E293B !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-bottom: 7px !important;
}

.heroPhoneInputWrap {
  display: flex !important;
  align-items: center !important;
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.heroPhoneInputWrap:focus-within {
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.18) !important;
  background: #FFFFFF !important;
}

.heroPhonePrefix {
  padding: 0 14px !important;
  font-weight: 750 !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  border-right: 1px solid #CBD5E1 !important;
}

.heroPhoneInputWrap input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  outline: none !important;
}

.heroFormSelect {
  width: 100% !important;
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.heroFormSelect:focus {
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.18) !important;
  background: #FFFFFF !important;
}

.heroFormBtn {
  width: 100% !important;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 15px 22px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.4) !important;
  transition: all 0.25s ease !important;
  margin-top: 8px !important;
}

.heroFormBtn:hover {
  background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(29, 78, 216, 0.5) !important;
}

/* Hero Form Document Upload Field */
.heroDocField {
  margin-bottom: 14px !important;
}

.heroDocUploadLabel {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #DAE2EC !important;
  border: 1.5px dashed #94A3B8 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.heroDocUploadLabel:hover {
  border-color: #1A56DB !important;
  background: #E8EEF7 !important;
}

.heroDocUploadContent {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.heroDocUploadContent i {
  color: #1A56DB !important;
  font-size: 16px !important;
}

.heroDocBrowseBtn {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.heroDocInput {
  display: none !important;
}

.heroDocFileList {
  font-size: 11px !important;
  color: #1A56DB !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* 1. Top Reasons / Use-Cases Grid */
.topReasonsGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin-top: 15px !important;
}

.topReasonCard,
.reasonCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  padding: 26px 22px !important;
  box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.topReasonCard:hover,
.reasonCard:hover {
  background: #F0F4FA !important;
  transform: translateY(-6px) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.25) !important;
}

.reasonTop {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}

.reasonNum {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
}

.topReasonIcon,
.reasonIcon {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  color: #1A56DB !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  margin-bottom: 4px !important;
}

.topReasonCard:nth-child(2) .topReasonIcon,
.reasonCard:nth-child(2) .reasonIcon {
  background: #D8EADF !important;
  border-color: #BFE0CB !important;
  color: #059669 !important;
}

.topReasonCard:nth-child(3) .topReasonIcon,
.reasonCard:nth-child(3) .reasonIcon {
  background: #FDE8E8 !important;
  border-color: #F8B4B4 !important;
  color: #E02424 !important;
}

.topReasonCard:nth-child(4) .topReasonIcon,
.reasonCard:nth-child(4) .reasonIcon {
  background: #FEF08A !important;
  border-color: #FDE047 !important;
  color: #D97706 !important;
}

.topReasonCard h3,
.reasonCard h3 {
  color: #0F172A !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.topReasonCard p,
.reasonCard p {
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 2. Bank Rates Comparison Table */
.bankCategoryTabs,
.bankTabContainer {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}

.bankTabBtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-on-dark-secondary) !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.bankTabBtn.active,
.bankTabBtn:hover {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(26, 86, 219, 0.35) !important;
}

.bankTableCard,
.bankTableWrapper {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  box-shadow: 0 15px 45px -8px rgba(0, 0, 0, 0.5) !important;
  overflow-x: auto !important;
  padding: 14px 20px !important;
}

.bankTable,
.bankRateTable {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  min-width: 650px !important;
}

.bankTable thead th,
.bankRateTable thead th {
  padding: 14px 16px !important;
  color: #0F172A !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-bottom: 1.5px solid #CBD5E1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.bankTable tbody tr,
.bankRateTable tbody tr {
  border-bottom: 1px solid #CBD5E1 !important;
  transition: background 0.2s ease !important;
}

.bankTable tbody tr:last-child,
.bankRateTable tbody tr:last-child {
  border-bottom: none !important;
}

.bankTable tbody tr:hover,
.bankRateTable tbody tr:hover {
  background: #F0F4FA !important;
}

.bankTable td,
.bankRateTable td {
  padding: 14px 16px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}

.bankNameCell {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #0F172A !important;
  font-weight: 750 !important;
}

.bankNameCell strong {
  display: block !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
}

.bankNameCell small {
  display: block !important;
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.bankMiniLogo {
  max-width: 85px !important;
  max-height: 36px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
}

.rateHighlight,
.bankRateText {
  color: #1A56DB !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
}

/* Bank Table Apply Buttons */
a.tableApplyBtn,
a.bankApplyBtn,
.tableApplyBtn,
.bankApplyBtn {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 12px rgba(26, 86, 219, 0.35) !important;
  transition: all 0.2s ease !important;
}

a.tableApplyBtn *,
a.bankApplyBtn *,
.tableApplyBtn *,
.bankApplyBtn * {
  color: #FFFFFF !important;
}

a.tableApplyBtn:hover,
a.bankApplyBtn:hover,
.tableApplyBtn:hover,
.bankApplyBtn:hover {
  background: #1E40AF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.45) !important;
}

/* 3. Why Choose Finfly Grid */
.whyChooseGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}

.whyCard,
.whyChooseCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  padding: 26px 22px !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.whyCard:hover,
.whyChooseCard:hover {
  transform: translateY(-5px) !important;
  border-color: #1A56DB !important;
  box-shadow: 0 18px 45px -8px rgba(0, 0, 0, 0.55), 0 0 20px rgba(26, 86, 219, 0.2) !important;
}

.whyCardIcon,
.whyChooseIcon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  display: grid !important;
  place-items: center !important;
  color: #1A56DB !important;
  font-size: 20px !important;
  margin-bottom: 4px !important;
}

.whyCard h3,
.whyChooseCard h3 {
  color: #0F172A !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  margin: 0 !important;
}

.whyCard p,
.whyChooseCard p {
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 4. Process Section (3-Step by default, 4-Step when 4 steps present) */
.howWorks__process,
.howWorks__process--3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  position: relative !important;
  margin-top: 20px !important;
}

.howWorks__process:has(> .howWorks__step:nth-of-type(4)),
.howWorks__process--4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.howWorks__connector {
  display: none !important;
}

.howWorks__step {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.howWorks__step:hover {
  transform: translateY(-5px) !important;
  border-color: #1A56DB !important;
}

.howWorks__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.howWorks__status {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #1A56DB !important;
  background: #DAE4F2 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.howWorks__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  display: grid !important;
  place-items: center !important;
  color: #1A56DB !important;
  font-size: 18px !important;
  margin-bottom: 14px !important;
}

.howWorks__icon.green {
  background: #D8EADF !important;
  border-color: #BFE0CB !important;
  color: #059669 !important;
}

.howWorks__icon.cyan {
  background: #D5F3F8 !important;
  border-color: #AEE8F2 !important;
  color: #0891B2 !important;
}

.howWorks__icon.purple {
  background: #EDE9FE !important;
  border-color: #DDD6FE !important;
  color: #7C3AED !important;
}

.howWorks__step h3 {
  color: #0F172A !important;
  font-size: 16.5px !important;
  font-weight: 750 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.howWorks__step p {
  color: #475467 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

.howWorks__bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #CBD5E1 !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  width: 100% !important;
}

.howWorks__bottom span {
  color: #0F172A !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

.howWorks__bottom i {
  color: #1A56DB !important;
  font-size: 16px !important;
  opacity: 1 !important;
  transition: transform 0.2s ease !important;
}

.howWorks__step:hover .howWorks__bottom i {
  transform: translateX(4px) !important;
}

/* 5. Tabbed Eligibility & Documents Matrix */
.tabNavWrap,
.criteriaTabNav {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}

.eligTabBtn,
.criteriaTabBtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-on-dark-secondary) !important;
  padding: 11px 26px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.eligTabBtn.active,
.eligTabBtn:hover,
.criteriaTabBtn.active,
.criteriaTabBtn:hover {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(26, 86, 219, 0.35) !important;
}

.tabPane,
.criteriaTabPanel {
  display: none !important;
}

.tabPane.active,
.criteriaTabPanel.active {
  display: block !important;
}

.eligDocsGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 26px !important;
}

.eligCard,
.docsCard,
.criteriaCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 22px !important;
  padding: 28px !important;
  box-shadow: 0 15px 45px -8px rgba(0, 0, 0, 0.5) !important;
}

.cardBadge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #DAE4F2 !important;
  border: 1px solid #CBD5E1 !important;
  color: #1A56DB !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.eligCard h3,
.docsCard h3,
.criteriaCard h3 {
  color: #0F172A !important;
  font-size: 19px !important;
  font-weight: 750 !important;
  margin-bottom: 16px !important;
}

.criteriaList,
.docsList {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.criteriaList li,
.docsList li {
  padding: 10px 0 !important;
  border-bottom: 1px solid #CBD5E1 !important;
  font-size: 13px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}

.criteriaList li:last-child,
.docsList li:last-child {
  border-bottom: none !important;
}

.criteriaList li strong,
.docsList li strong {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* 6. Customer Reviews & Social Proof */
.reviewsGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 15px !important;
}

.reviewCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.reviewCard:hover {
  background: #F0F4FA !important;
  transform: translateY(-6px) !important;
  border-color: #3B82F6 !important;
}

.starsRow,
.reviewStars {
  color: #F59E0B !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  letter-spacing: 2px !important;
}

.reviewText {
  color: #334155 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  font-style: italic !important;
}

.reviewerInfo,
.reviewAuthor {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-top: 1px solid #CBD5E1 !important;
  padding-top: 14px !important;
}

.reviewerAvatar,
.authorAvatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #1A56DB !important;
  color: #FFFFFF !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.reviewerInfo strong,
.authorDetails strong {
  display: block !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
}

.reviewerInfo span,
.authorDetails small {
  display: block !important;
  color: #64748B !important;
  font-size: 11.5px !important;
}

/* 7. Final Call to Action Banner */
.final-cta-card {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 28px !important;
  padding: 50px 40px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(26, 86, 219, 0.15) !important;
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.final-cta-card h2 {
  font-size: clamp(26px, 3.2vw, 36px) !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
  font-weight: 800 !important;
}

.final-cta-card p {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}

/* --------------------------------------------------------------------------
   9. Responsive Grid Spacing (Tablet & Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .topReasonsGrid,
  .howWorks__process,
  .calculator-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .whyChooseGrid,
  .reviewsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 768px) {
  .personalHeroGrid,
  .eligDocsGrid,
  .topReasonsGrid,
  .howWorks__process,
  .calculator-grid,
  .whyChooseGrid,
  .reviewsGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 991px) {
  .personalHeroGrid,
  .loanOverview__wrap,
  .loan-eligibility-wrap,
  .emi-calculator,
  .criteriaTabPanel.active {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .topReasonsGrid,
  .reviewsGrid,
  .whyChoose__features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .loan-process-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .trustMetrics__rail {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .topReasonsGrid,
  .reviewsGrid,
  .whyChoose__features,
  .loanOverview__grid,
  .eligibility-list,
  .eligibility-form-grid,
  .trustMetrics__rail {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .personalHeroForm,
  .loanOverview__details,
  .loan-eligibility-form,
  .criteriaCard,
  .emi-input-side,
  .emi-result-side {
    padding: 20px !important;
  }
}
/* --------------------------------------------------------------------------
   10. BANK PARTNERS 2-LINE INFINITE MARQUEE (Ultra Smooth)
   -------------------------------------------------------------------------- */
@keyframes marqueeScrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeScrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.bank-partners-section {
  background: var(--color-navy-950) !important;
  overflow: hidden !important;
  padding: 85px 0 !important;
}

.bank-marquee-container {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 15px 0 !important;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important;
}

.bank-marquee-row {
  display: flex !important;
  width: max-content !important;
  overflow: hidden !important;
  user-select: none !important;
}

.bank-marquee-track {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: max-content !important;
  will-change: transform !important;
}

.bank-marquee-row.track-left .bank-marquee-track {
  animation: marqueeScrollLeft 55s linear infinite !important;
}

.bank-marquee-row.track-right .bank-marquee-track {
  animation: marqueeScrollRight 55s linear infinite !important;
}

.bank-marquee-row:hover .bank-marquee-track {
  animation-play-state: paused !important;
}

.bank-marquee-item {
  flex: 0 0 175px !important;
  height: 90px !important;
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.35s ease !important;
  cursor: pointer !important;
}

.bank-marquee-item:hover {
  background: #FFFFFF !important;
  border-color: #3B82F6 !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.65), 0 0 20px rgba(59, 130, 246, 0.35) !important;
}

.bank-marquee-item img {
  max-width: 130px !important;
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: contrast(1.05) !important;
  transition: transform 0.3s ease !important;
}

.bank-marquee-item:hover img {
  transform: scale(1.06) !important;
}

/* --------------------------------------------------------------------------
   11. FREE CREDIT SCORE FEATURE BANNER (Lead Magnet)
   -------------------------------------------------------------------------- */
.cibil-score-section {
  background: var(--color-navy-950) !important;
  padding: 80px 0 !important;
}

.cibilBannerCard {
  background: linear-gradient(135deg, #131B38 0%, #0D1326 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 28px !important;
  padding: 48px 56px !important;
  display: grid !important;
  grid-template-columns: 1.25fr 0.75fr !important;
  align-items: center !important;
  gap: 48px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 40px rgba(26, 86, 219, 0.15) !important;
}

.cibilBannerCard::before {
  content: "" !important;
  position: absolute !important;
  top: -100px !important;
  right: -100px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(26, 86, 219, 0.25), transparent 70%) !important;
  pointer-events: none !important;
}

.cibilBadge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #10B981 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
}

.cibilHeading {
  color: #FFFFFF !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

.cibilHeading span {
  color: #38BDF8 !important;
}

.cibilStrike {
  text-decoration: line-through !important;
  color: #94A3B8 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
}

.cibilSub {
  color: var(--color-text-on-dark-secondary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.cibilFeaturesList {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}

.cibilFeaturesList li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #E2E8F0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.cibilFeaturesList li i {
  color: #10B981 !important;
  font-size: 14px !important;
}

.cibilBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #1A56DB !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(26, 86, 219, 0.4) !important;
  transition: all 0.25s ease !important;
}

.cibilBtn:hover {
  background: #1E429F !important;
  transform: translateY(-2px) !important;
}

/* CIBIL Meter Visual Graphic */
.cibilMeterVisual {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 24px !important;
  padding: 30px !important;
  text-align: center !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
}

.meterArc {
  position: relative !important;
  width: 170px !important;
  height: 90px !important;
  margin: 0 auto 12px !important;
}

.meterScoreVal {
  font-size: 42px !important;
  font-weight: 900 !important;
  color: #059669 !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.meterScoreLabel {
  display: inline-block !important;
  background: #D1FAE5 !important;
  color: #065F46 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.meterRangeTrack {
  height: 8px !important;
  background: linear-gradient(90deg, #EF4444 0%, #F59E0B 40%, #10B981 80%) !important;
  border-radius: 999px !important;
  margin-bottom: 6px !important;
}

.meterRangeLabels {
  display: flex !important;
  justify-content: space-between !important;
  color: #64748B !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}


/* --------------------------------------------------------------------------
   12. INTERACTIVE SMART FINANCIAL TOOLS (Homepage Tabs)
   -------------------------------------------------------------------------- */
.home-calculator-section {
  background: var(--color-navy-950) !important;
  padding: 85px 0 !important;
}

.homeCalcTabNav {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}

.homeCalcTabBtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-on-dark-secondary) !important;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.homeCalcTabBtn.active,
.homeCalcTabBtn:hover {
  background: #1A56DB !important;
  border-color: #1A56DB !important;
  color: #FFFFFF !important;
}

.homeCalcPanel {
  display: none !important;
}

.homeCalcPanel.active {
  display: block !important;
}


/* --------------------------------------------------------------------------
   13. SECURITY, PRIVACY & RBI COMPLIANCE TRUST STRIP
   -------------------------------------------------------------------------- */
.security-badges-section {
  background: var(--color-navy-950) !important;
  padding: 40px 0 70px !important;
}

.securityGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.securityCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px !important;
  padding: 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.securityCard:hover {
  transform: translateY(-4px) !important;
  border-color: #1A56DB !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 0 20px rgba(26, 86, 219, 0.2) !important;
}

.securityIconBadge {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #DAE4F2 !important;
  border: 1.5px solid #C4D3E6 !important;
  display: grid !important;
  place-items: center !important;
  color: #1A56DB !important;
  font-size: 20px !important;
}

.securityCard h3 {
  color: #0F172A !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.securityCard p {
  color: #475467 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}


@media (max-width: 991px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .hero {
    padding-top: 50px !important;
    padding-bottom: 75px !important;
  }

  .hero-stats {
    margin-bottom: 25px !important;
  }

  .cibilBannerCard {
    grid-template-columns: 1fr !important;
    padding: 36px !important;
    gap: 32px !important;
  }

  .securityGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .hero-inner {
    gap: 36px !important;
  }

  .cibilBannerCard {
    padding: 24px !important;
  }

  .cibilHeading {
    font-size: 24px !important;
  }

  .cibilFeaturesList {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .securityGrid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   Universal Mobile, Tablet & Cross-Device Hardening (iOS, Android, Mac, Windows)
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100% !important;
  touch-action: manipulation;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Hero Badge & Micro Trust Pills Mobile Responsive */
@media (max-width: 768px) {
  .heroVisualBadge {
    padding: 6px 12px !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }
  
  .heroVisualBadge__title {
    font-size: 12px !important;
  }
  
  .heroVisualBadge__sub {
    font-size: 10px !important;
  }
  
  .heroVisualBadge__tag {
    display: none !important;
  }

  .heroMicroTrustStrip {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .heroTrustPill {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .globalinner-heading h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .globalinner-heading p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .page-hero h1 {
    font-size: clamp(26px, 6.5vw, 36px) !important;
    line-height: 1.25 !important;
  }

  .page-hero p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .personalHeroForm {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .heroFormField label {
    font-size: 12px !important;
  }

  .heroPhoneInputWrap {
    height: 48px !important;
  }

  .heroFormBtn {
    height: 48px !important;
    font-size: 14px !important;
  }

  /* Table Horizontal Scrolling */
  .bankTableWrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
  }

  .bankRateTable {
    min-width: 600px !important;
  }

  /* EMI Calculator Mobile */
  .emi-calculator {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .emi-input-side,
  .emi-result-side {
    padding: 20px 16px !important;
  }

  .emi-main-value {
    font-size: 26px !important;
  }

  .emi-chart-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Process Cards */
  .howWorks__connector {
    display: none !important;
  }

  .howWorks__step {
    padding: 22px 18px !important;
  }
}

/* Small Phone Screens (iPhone SE / Galaxy Fold - 320px to 420px) */
@media (max-width: 420px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .faqCategoryTabs,
  .blogCategoryFilter {
    gap: 6px !important;
  }

  .faqTabBtn,
  .blogTabBtn {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }

  .articleBody {
    padding: 22px 16px !important;
  }

  .articleCoverWrap {
    height: 240px !important;
  }
}

/* --------------------------------------------------------------------------
   10. Contact Page — Soft Silver-White / Grey Card Styling & Readable Dark Text
   -------------------------------------------------------------------------- */
.contactSection {
  background: var(--color-navy-950) !important;
}

.contactFormCard {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.55) !important;
  color: #0F172A !important;
  position: relative !important;
}

.contactFormCard:before {
  background: linear-gradient(90deg, #1A56DB, #06B6D4, #10B981) !important;
}

.contactFormHead .contactEyebrow {
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
  color: #1A56DB !important;
}

.contactFormHead .contactEyebrow:before {
  background: #1A56DB !important;
  box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.12), 0 0 12px rgba(26, 86, 219, 0.35) !important;
}

.contactFormHead h2 {
  color: #0F172A !important;
  font-weight: 750 !important;
}

.contactFormHead h2 span {
  color: #1A56DB !important;
}

.contactFormHead p {
  color: #475467 !important;
}

.contactField label {
  color: #1E293B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.contactField label small {
  color: #64748B !important;
}

.contactInput i {
  color: #64748B !important;
}

.contactInput:after {
  color: #64748B !important;
}

.contactInput input,
.contactInput select {
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}

.contactInput input:focus,
.contactInput select:focus {
  background: #FFFFFF !important;
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
  color: #0F172A !important;
}

.contactInput input::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

.contactInput select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

.contactUpload {
  background: #DAE2EC !important;
  border: 1.5px dashed #94A3B8 !important;
}

.contactUpload:hover {
  background: #F1F5F9 !important;
  border-color: #1A56DB !important;
}

.contactUploadIcon {
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
  color: #1A56DB !important;
}

.contactUploadText strong {
  color: #0F172A !important;
  font-weight: 700 !important;
}

.contactUploadText small {
  color: #64748B !important;
}

.contactBrowse {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1A56DB !important;
}

.contactConsent {
  color: #334155 !important;
}

.contactConsent span {
  color: #334155 !important;
  font-weight: 550 !important;
}

.contactConsent input {
  accent-color: #1A56DB !important;
}

.contactSubmit {
  background: linear-gradient(135deg, #1A56DB, #2563EB) !important;
  color: #FFFFFF !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 25px rgba(26, 86, 219, 0.3) !important;
}

.contactSubmit:hover {
  background: linear-gradient(135deg, #1545B0, #1D4ED8) !important;
  box-shadow: 0 14px 30px rgba(26, 86, 219, 0.4) !important;
}

/* Captcha inside Contact Form */
#contact-form .captcha-group {
  margin: 18px 0 !important;
}

#contact-form .captcha-group label,
#contact-form .captcha-group .form-label {
  color: #1E293B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

#contact-form .captcha-group input,
#contact-form .captcha-group .form-input {
  background: #DAE2EC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#contact-form .captcha-group input::placeholder,
#contact-form .captcha-group .form-input::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

#contact-form .captcha-group input:focus {
  background: #FFFFFF !important;
  border-color: #1A56DB !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
  color: #0F172A !important;
}

/* --------------------------------------------------------------------------
   Light Card & Legal Content High-Contrast Text Overrides
   -------------------------------------------------------------------------- */
.legal-card,
.lsp-compliance-card,
.grievance-block {
  background: #E8EDF5 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

.legal-card h1,
.legal-card h2,
.legal-card h3,
.legal-card h4,
.lsp-compliance-card h1,
.lsp-compliance-card h2,
.lsp-compliance-card h3,
.lsp-compliance-card h4,
.grievance-block h1,
.grievance-block h2,
.grievance-block h3,
.grievance-block h4 {
  color: #0F172A !important;
}

.legal-card p,
.legal-card li,
.lsp-compliance-card p,
.lsp-compliance-card li,
.grievance-block p,
.grievance-block li {
  color: #334155 !important;
}

.legal-card strong,
.lsp-compliance-card strong,
.grievance-block strong {
  color: #0F172A !important;
}

.legal-callout {
  background: #DAE4F2 !important;
  border-left: 4px solid #1A56DB !important;
  color: #1E293B !important;
}

.legal-callout strong,
.legal-callout b {
  color: #0F172A !important;
}

.legal-meta-strip {
  background: #DAE4F2 !important;
  color: #475467 !important;
}

.legal-meta-strip strong {
  color: #0F172A !important;
}

.grievance-box {
  background: #DAE4F2 !important;
  border: 1px solid #C4D3E6 !important;
}

.grievance-box h4,
.grievance-box h3 {
  color: #0F172A !important;
}

.grievance-row {
  border-bottom: 1px solid #CBD5E1 !important;
}

.grievance-label {
  color: #475467 !important;
}

.grievance-value {
  color: #0F172A !important;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp Button
   -------------------------------------------------------------------------- */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  z-index: 9999 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.floating-whatsapp i {
  color: #FFFFFF !important;
  font-size: 32px !important;
  line-height: 1 !important;
  transition: transform 0.3s ease !important;
}

.floating-whatsapp:hover {
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.floating-whatsapp:hover i {
  transform: rotate(12deg) scale(1.05) !important;
}

.whatsapp-pulse {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes waPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.25s ease;
  pointer-events: none;
}

.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #0F172A;
}

.floating-whatsapp:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .floating-whatsapp {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(20px + env(safe-area-inset-right, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
  }
  .floating-whatsapp i {
    font-size: 28px !important;
  }
  .whatsapp-tooltip {
    display: none !important;
  }
}