:root {
  --primary: #f96805;
  --primary-dark: #3730a3;
  --secondary: #3e8966;
  --orange: #f97316;
  --green: #52625d;
  --dark: #101828;
  --muted: #667085;
  --light: #f8fafc;
  --border: #e6eaf0;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
iframe {
    max-width: 100%;
}

.row {
    --bs-gutter-x: 1.5rem;
}

section,
footer,
nav {
    max-width: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* =========================
   TOPBAR
========================= */

.topbar {
    width: 100%;
    background: #111827;
    color: #d1d5db;
    font-size: 13px;
    padding: 9px 0;
}

.topbar > .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
}

.topbar-left,
.topbar-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.topbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-right {
    flex: 0 0 auto;
    margin-left: auto;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.topbar a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.topbar a:hover {
    color: #f59e0b;
}

.topbar-divider {
    margin: 0 12px;
    color: #6b7280;
    white-space: nowrap;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .topbar > .container {
        flex-wrap: wrap !important;
        row-gap: 6px;
    }

    .topbar-left,
    .topbar-right {
        width: 100%;
        justify-content: center;
    }

    .topbar-right {
        margin-left: 0;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 575px) {

    .topbar {
        font-size: 11px;
        padding: 8px 0;
    }

    .topbar > .container {
        flex-direction: column !important;
        gap: 6px;
    }

    .topbar-left,
    .topbar-right {
        width: 100%;
        justify-content: center;
    }

    .topbar-item {
        gap: 4px;
    }

    .topbar-divider {
        margin: 0 7px;
    }
}

/* =========================
   NAVBAR
========================= */

.navbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 25px rgba(16, 24, 40, 0.06);
    padding: 12px 0;
    min-height: 90px;
}


/* =========================
   LOGO
========================= */

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 30px;
    line-height: 1;
}

.navbar-brand img {
    width: 220px;
    height: auto;
    max-height: 75px;
    object-fit: contain;
    display: block;
}


/* =========================
   NAV LINKS
========================= */

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

.nav-link {
    color: #344054 !important;
    font-weight: 600;
    margin: 0 9px;
    padding: 10px 4px !important;
    font-size: 15px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--primary) !important;
}


/* ACTIVE LINK */

.nav-link.active {
    color: var(--primary) !important;
    font-weight: 700;
}


/* =========================
   DROPDOWN ARROWS
========================= */

.loan-arrow,
.more-arrow {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}


/* =========================
   CONTACT BUTTON
========================= */

.btn-primary-custom {
    font-size: 15px;
    font-weight: 700;
    padding: 14px 25px;
    border-radius: 14px;
    white-space: nowrap;
}


/* =========================
   NAVBAR TOGGLER
========================= */

.navbar-toggler {
    border: none;
    outline: none !important;
    box-shadow: none !important;
    font-size: 24px;
    color: #111827;
    padding: 5px 8px;
}


/* =========================
   LARGE SCREEN
========================= */

@media (min-width: 1200px) {

    .navbar {
        padding: 12px 0;
        min-height: 95px;
    }

    .navbar-brand img {
        width: 225px;
    }

    .nav-link {
        font-size: 15px;
        margin: 0 10px;
    }
}


/* =========================
   LAPTOP
========================= */

@media (max-width: 1199px) {

    .navbar-brand img {
        width: 195px;
    }

    .navbar-brand {
        margin-right: 15px;
    }

    .nav-link {
        font-size: 14px;
        margin: 0 5px;
    }

    .btn-primary-custom {
        font-size: 14px;
        padding: 12px 18px;
    }
}


/* =========================
   TABLET / MOBILE
========================= */

@media (max-width: 991px) {

    .navbar {
        padding: 10px 0;
        min-height: 75px;
    }

    .navbar-brand img {
        width: 190px;
    }

    .navbar-collapse {
        margin-top: 15px;
        padding: 10px 0;
    }

    .navbar-nav {
        align-items: flex-start;
    }

    .nav-link {
        font-size: 15px;
        margin: 2px 0;
        padding: 10px 0 !important;
    }

    .btn-primary-custom {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 575px) {

    .navbar {
        min-height: 70px;
        padding: 8px 0;
    }

    .navbar-brand img {
        width: 165px;
        max-height: 60px;
    }

    .navbar-toggler {
        font-size: 22px;
    }

    .nav-link {
        font-size: 14px;
    }

    .btn-primary-custom {
        width: 100%;
        text-align: center;
    }
}

.navbar-logo {
    width: 220px;
    height: auto;
    max-height: 75px;
    object-fit: contain;
}

.btn-primary-custom {
  background: var(--primary);
  border: none;
  color: white;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  transition: 0.3s;
}

.btn-primary-custom:hover {
  background: var(--secondary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(79, 70, 229, 0.25);
}

.btn-outline-custom {
  border: 1px solid #d0d5dd;
  color: var(--dark);
  padding: 12px 23px;
  border-radius: 12px;
  font-weight: 700;
  background: #fff;
}

.btn-outline-custom:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* HERO */
.hero {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(6, 182, 212, 0.28),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 90%,
      rgba(249, 115, 22, 0.18),
      transparent 28%
    ),
    linear-gradient(135deg, #eef2ff 0%, #f8fbff 55%, #ecfeff 100%);
}

.hero:before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -180px;
  top: -150px;
  background: rgba(79, 70, 229, 0.08);
  border-radius: 50%;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary);
  padding: 9px 15px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 7px 25px rgba(16, 24, 40, 0.08);
  margin-bottom: 20px;
}

.hero h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -3px;
  margin-bottom: 22px;
}

.gradient-text {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  color: #667085;
  font-size: 18px;
  line-height: 1.7;
  max-width: 620px;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 38px;
  margin-top: 42px;
  flex-wrap: wrap;
}

.hero-stat strong {
  font-size: 26px;
  font-weight: 800;
}

.hero-stat span {
  display: block;
  color: #667085;
  font-size: 13px;
}

/* HERO CARD */
.hero-card {
  background: #fff;
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 30px 70px rgba(31, 41, 55, 0.16);
  position: relative;
  z-index: 3;
  max-width: 420px;
  margin-left: auto;
}

.loan-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.loan-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #eef2ff;
  color: var(--primary);
  font-size: 21px;
}

.mini-label {
  font-size: 12px;
  color: #98a2b3;
  font-weight: 600;
}

.loan-amount {
  font-size: 38px;
  font-weight: 800;
  margin-top: 2px;
}

.progress {
  height: 8px;
  background: #eef2f6;
  border-radius: 20px;
}

.progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 20px;
}

.quick-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.quick-box {
  padding: 15px;
  border-radius: 15px;
  background: #f8fafc;
}

.quick-box small {
  display: block;
  color: #98a2b3;
}

.quick-box strong {
  font-size: 15px;
}

/* SECTION */
.section {
  padding: 40px 0;
}

.section-title {
  max-width: 700px;
  margin: auto;
  text-align: center;
}

.section-title .eyebrow {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}

.section-title h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
}

.section-title p {
  color: var(--muted);
  line-height: 1.7;
}

/* LOANS */
.loan-section {
  background: #f8fafc;
}

.loan-card {
  height: 100%;
  background: white;
  padding: 27px;
  border-radius: 22px;
  border: 1px solid #edf0f4;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}

.loan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.1);
}

.loan-card:after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.07);
}

.loan-card .icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 22px;
  margin-bottom: 22px;
}

.icon-purple {
  background: #eef2ff;
  color: #4f46e5;
}
.icon-orange {
  background: #fff7ed;
  color: #f97316;
}
.icon-green {
  background: #ecfdf3;
  color: #10b981;
}
.icon-cyan {
  background: #ecfeff;
  color: #0891b2;
}
.icon-pink {
  background: #fdf2f8;
  color: #db2777;
}
.icon-blue {
  background: #eff6ff;
  color: #2563eb;
}

.loan-card h4 {
  font-weight: 800;
}

.loan-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.loan-card .loan-link {
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
}

/* CALCULATOR */
.calculator {
  background: linear-gradient(135deg, #133606e6, var(--secondary));
  color: white;
  border-radius: 32px;
  padding: 45px;
  overflow: hidden;
  position: relative;
}

.calculator:before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(6, 182, 212, 0.14);
  border-radius: 50%;
  right: -100px;
  top: -100px;
}

.calculator label {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 8px;
}

.calculator input[type="range"] {
  accent-color: #818cf8;
}

.calc-value {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.result-box {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 30px;
  height: 100%;
}

.emi-number {
  font-size: 43px;
  font-weight: 800;
  margin: 8px 0 25px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.result-row strong {
  color: #fff;
}

/* WHY US */
.feature {
  display: flex;
  gap: 18px;
  margin-bottom: 28px;
}

.feature-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef2ff;
  color: var(--primary);
}

.feature h5 {
  font-weight: 800;
  margin-bottom: 5px;
}

.feature p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

.visual-card {
  min-height: 450px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(79, 70, 229, 0.9), rgba(6, 182, 212, 0.85)),
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1000&q=80")
      center/cover;
  position: relative;
  overflow: hidden;
}

.floating-card {
  position: absolute;
  background: white;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.floating-card.one {
  left: 30px;
  top: 35px;
}

.floating-card.two {
  right: 25px;
  bottom: 35px;
}

/* PROCESS */
.process {
  background: #f8fafc;
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.2);
}

.step h5 {
  font-weight: 800;
}

.step p {
  color: var(--muted);
  font-size: 14px;
}

/* CTA */
.cta {
  background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #06b6d4);
  color: white;
  border-radius: 32px;
  padding: 65px;
  position: relative;
  overflow: hidden;
}

.cta:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border: 50px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  right: -130px;
  top: -160px;
}

.cta h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
}

/* TESTIMONIAL */
.testimonial {
  border: 1px solid var(--border);
  padding: 25px;
  border-radius: 20px;
  background: #fff;
  height: 100%;
}

.stars {
  color: #f59e0b;
  margin-bottom: 15px;
}

.testimonial p {
  color: #475467;
  line-height: 1.7;
}

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.avatar {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #06b6d4);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}

/* FAQ */
.accordion-item {
  border: 1px solid var(--border) !important;
  margin-bottom: 12px;
  border-radius: 14px !important;
  overflow: hidden;
}

.accordion-button {
  font-weight: 700;
  padding: 20px;
}

.accordion-button:not(.collapsed) {
  color: var(--primary);
  background: #f5f3ff;
  box-shadow: none;
}

/* FOOTER */
footer {
  background: #101828;
  color: #98a2b3;
  padding: 70px 0 25px;
}

footer .brand {
  color: #fff;
  font-size: 27px;
  font-weight: 800;
}

footer h6 {
  color: #fff;
  font-weight: 800;
  margin-bottom: 20px;
}

footer a {
  color: #98a2b3;
  display: block;
  margin-bottom: 11px;
  font-size: 14px;
}

footer a:hover {
  color: #fff;
}

.social a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  margin-right: 5px;
  color: white;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 45px;
  padding-top: 22px;
  font-size: 13px;
}

@media (max-width: 991px) {
  .hero {
    padding: 80px 0;
  }

  .hero-card {
    margin: 45px auto 0;
  }

  .navbar-collapse {
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-top: 12px;
  }

  .calculator,
  .cta {
    padding: 30px 22px;
  }
}

@media (max-width: 575px) {
  .hero h1 {
    letter-spacing: -2px;
  }

  .hero-stats {
    gap: 22px;
  }

  .section {
    padding: 65px 0;
  }
}

/* =========================================
   LOANS MEGA DROPDOWN
========================================= */

.loan-menu {
  position: relative;
}

.loan-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Dynamic Arrow */
.loan-arrow {
  font-size: 10px;
  transition: transform 0.35s ease;
}

.loan-menu .nav-link[aria-expanded="true"] .loan-arrow {
  transform: rotate(180deg);
}

/* Mega Menu */
.loan-mega-menu {
  width: min(720px, 90vw);
  padding: 15px;
  margin-top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  border: 0;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 25px 70px rgba(20, 30, 60, 0.18),
    0 5px 20px rgba(20, 30, 60, 0.08);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

/* Bootstrap open state */
.loan-menu .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-5%) translateY(0);
}

/* Header */
.loan-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 4px 5px 18px;
  margin-bottom: 5px;

  border-bottom: 1px solid #edf0f5;
}

.loan-menu-header h5 {
  margin: 8px 0 3px;
  color: #172033;
  font-size: 19px;
  font-weight: 700;
}
.dropdown-toggle::after {
  content: none;
}
.loan-menu-header p {
  margin: 0;
  color: #7b8496;
  font-size: 13px;
}

.loan-menu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 5px 10px;
  border-radius: 50px;

  color: #087f5b;
  background: #e7f8f1;

  font-size: 11px;
  font-weight: 700;
}

.loan-header-icon {
  width:fit-content;
  height: fit-content;
  padding: 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  color: #fff;
  font-size: 15px;

  background: linear-gradient(135deg, var(--secondary), var(--secondary), var(--primary));

  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.25);
}

/* =========================================
   LOAN CARDS
========================================= */

.loan-card {
  position: relative;

  display: flex;
  align-items: center;
  gap: 13px;

  min-height: 86px;
  padding: 13px;

  border-radius: 15px;

  text-decoration: none !important;

  background: #f8f9fc;

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.loan-card::after {
  content: "";
  position: absolute;

  width: 70px;
  height: 70px;

  right: -25px;
  bottom: -25px;

  border-radius: 50%;

  background: currentColor;
  opacity: 0.06;

  transition: transform 0.3s ease;
}

.loan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 30, 60, 0.1);
}

.loan-card:hover::after {
  transform: scale(2.5);
}

/* Icons */
.loan-icon {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-size: 19px;

  transition: transform 0.3s ease;
}

.loan-card:hover .loan-icon {
  transform: scale(1.1) rotate(-5deg);
}

.loan-card h6 {
  margin: 0 0 2px;

  color: #20283a;
  font-size: 14px;
  font-weight: 700;
}

.loan-card p {
  margin: 0 0 5px;

  color: #8a92a3;
  font-size: 11px;
}

.loan-card span {
  color: #4c566a;
  font-size: 10px;
  font-weight: 700;
}

.loan-card span i {
  margin-left: 3px;
  transition: margin-left 0.2s ease;
}

.loan-card:hover span i {
  margin-left: 7px;
}

/* =========================================
   COLORS
========================================= */

.loan-blue {
  color: #4361ee;
}

.loan-blue .loan-icon {
  color: #4361ee;
  background: #e9edff;
}

.loan-purple {
  color: #7209b7;
}

.loan-purple .loan-icon {
  color: #7209b7;
  background: #f2e5ff;
}

.loan-green {
  color: #0ca678;
}

.loan-green .loan-icon {
  color: #0ca678;
  background: #e4f8f1;
}

.loan-orange {
  color: #f76707;
}

.loan-orange .loan-icon {
  color: #f76707;
  background: #fff0e3;
}

.loan-pink {
  color: #e64980;
}

.loan-pink .loan-icon {
  color: #e64980;
  background: #ffe8f0;
}

.loan-yellow {
  color: #d99a00;
}

.loan-yellow .loan-icon {
  color: #d99a00;
  background: #fff6d9;
}

/* =========================================
   FOOTER LINKS
========================================= */

.loan-menu-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-top: 17px;
  padding-top: 15px;

  border-top: 1px solid #edf0f5;
}

.loan-menu-footer a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px;

  border-radius: 11px;

  color: #252b3a;
  text-decoration: none;

  transition: background 0.2s ease;
}

.loan-menu-footer a:hover {
  background: #f5f7fb;
}

.loan-menu-footer > a > i {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #4361ee;
  background: #edf0ff;

  font-size: 14px;
}

.loan-menu-footer strong {
  display: block;
  font-size: 11px;
}

.loan-menu-footer small {
  display: block;
  margin-top: 2px;

  color: #8a92a3;
  font-size: 9px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .loan-mega-menu {
    position: absolute;

    width: calc(100vw - 25px);

    left: 12px;
    transform: translateY(10px);

    padding: 15px;

    max-height: 75vh;
    overflow-y: auto;
  }

  .loan-menu .dropdown-menu.show {
    transform: translateY(0);
  }

  .loan-menu-header {
    padding-bottom: 13px;
  }

  .loan-header-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .loan-menu-header h5 {
    font-size: 16px;
  }

  .loan-menu-footer {
    grid-template-columns: 1fr;
  }

  .loan-card {
    min-height: 75px;
  }
}

/* =====================================
   LOAN CAROUSEL
===================================== */

.loan-carousel-wrapper {
  width: 100%;
  max-width: 430px;
  margin: auto;
  position: relative;
}

.loan-carousel {
  width: 100%;
}

/* Important: make Owl items visible */
.loan-carousel .owl-stage-outer {
  overflow: hidden;
  border-radius: 28px;
}

.loan-slide {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
  border: 1px solid #eef0f4;
}

/* IMAGE */

.loan-image {
  height: 230px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.loan-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.loan-slide:hover .loan-image img {
  transform: scale(1.08);
}

.loan-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(0, 0, 0, 0.55));
}

/* BADGE */

.loan-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 5;

  background: rgba(255, 255, 255, 0.95);
  color: #111827;

  padding: 8px 13px;
  border-radius: 50px;

  font-size: 11px;
  font-weight: 800;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.loan-badge i {
  color: #4f46e5;
  margin-right: 5px;
}

/* CONTENT */

.loan-slide-content {
  padding: 28px;
  position: relative;
}

.loan-slide-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 17px;

  position: absolute;
  right: 22px;
  top: -29px;

  font-size: 21px;

  border: 4px solid #fff;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.loan-slide-icon.purple {
  background: #eef2ff;
  color: #4f46e5;
}

.loan-slide-icon.orange {
  background: #fff7ed;
  color: #f97316;
}

.loan-slide-icon.green {
  background: #ecfdf3;
  color: #10b981;
}

.loan-slide-icon.cyan {
  background: #ecfeff;
  color: #0891b2;
}

.loan-slide-icon.gold {
  background: #fffbeb;
  color: #d97706;
}

/* TEXT */

.loan-slide-content .mini-label {
  color: #667085;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  margin-bottom: 5px;
}

.loan-slide-content h3 {
  font-family: "Manrope", sans-serif;
  font-size: 27px;
  font-weight: 800;
  margin-bottom: 10px;
}

.loan-slide-content p {
  color: #667085;
  font-size: 14px;
  line-height: 1.65;
  min-height: 70px;
  margin-bottom: 18px;
}

/* FEATURES */

.loan-highlights {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.loan-highlights span {
  padding: 7px 10px;
  border-radius: 50px;

  background: #f8fafc;
  border: 1px solid #eaecf0;

  color: #475467;

  font-size: 10px;
  font-weight: 700;
}

.loan-highlights i {
  color: #10b981;
  margin-right: 3px;
}

/* BUTTON */

.loan-slide .btn-primary-custom {
  display: block;
  width: 100%;
}

/* NAVIGATION */

.loan-carousel .owl-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.loan-carousel .owl-nav button {
  width: 42px;
  height: 42px;

  border-radius: 50% !important;

  background: #fff !important;
  color: #4f46e5 !important;

  margin: 0 !important;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);

  transition: all 0.25s ease;
}

.loan-carousel .owl-nav button:hover {
  background: #4f46e5 !important;
  color: #fff !important;
}

/* DOTS */

.loan-carousel .owl-dots {
  margin-top: 10px;
}

.loan-carousel .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  background: #cbd5e1 !important;
  transition: 0.3s;
}

.loan-carousel .owl-dot.active span {
  width: 25px !important;
  background: linear-gradient(90deg, #4f46e5, #06b6d4) !important;
}

/* MOBILE */

@media (max-width: 575px) {
  .loan-carousel-wrapper {
    max-width: 100%;
    padding: 0 5px;
  }

  .loan-image {
    height: 210px;
  }

  .loan-slide-content {
    padding: 24px;
  }
}

/* contact */

/* =========================================================
   HERO
========================================================= */

.contact-hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.18), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(6, 182, 212, 0.22), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.15), transparent 30%),
        linear-gradient(135deg, #eef2ff, #f8fafc);

    padding: 95px 0 125px;
}


/* Floating circles */

.contact-hero::before,
.contact-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: floatingCircle 6s ease-in-out infinite;
}

.contact-hero::before {
    width: 220px;
    height: 220px;
    background: rgba(79, 70, 229, 0.08);
    right: -70px;
    top: 30px;
}

.contact-hero::after {
    width: 150px;
    height: 150px;
    background: rgba(6, 182, 212, 0.10);
    left: -50px;
    bottom: 20px;
    animation-delay: 1.5s;
}

@keyframes floatingCircle {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(15deg);
    }
}


.eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;

    animation: fadeDown 0.8s ease both;
}


.contact-hero h1 {
    position: relative;
    z-index: 2;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 65px);
    font-weight: 800;
    letter-spacing: -2.5px;
    margin: 12px 0 20px;

    animation: fadeUp 0.9s ease both;
}


.gradient-text {
    background: linear-gradient(
        90deg,
        #4f46e5,
        #8b5cf6,
        #06b6d4,
        #4f46e5
    );

    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 4s linear infinite;
}


.contact-hero p {
    position: relative;
    z-index: 2;

    color: var(--muted);
    font-size: 18px;
    max-width: 650px;
    line-height: 1.7;

    animation: fadeUp 1.1s ease both;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

@keyframes iconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.3);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(79, 70, 229, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}


/* =========================================================
   CONTACT WRAPPER
========================================================= */

.contact-wrapper {
    margin-top: -65px;
    position: relative;
    z-index: 5;
    padding-bottom: 30px;
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-card {
    position: relative;
    overflow: hidden;

    background: #fff;
    border-radius: 28px;
    padding: 38px;

    box-shadow:
        0 25px 70px rgba(16, 24, 40, 0.10),
        0 5px 20px rgba(79, 70, 229, 0.05);

    border: 1px solid #edf0f5;

    animation: fadeUp 0.8s ease both;

    transition: 0.4s ease;
}


.contact-card::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(79, 70, 229, 0.08),
        rgba(6, 182, 212, 0.08)
    );
}


.contact-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 35px 80px rgba(16, 24, 40, 0.14),
        0 10px 30px rgba(79, 70, 229, 0.08);
}


.contact-card h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
}


/* =========================================================
   FORM
========================================================= */

.form-label {
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}


.form-control,
.form-select {
    border: 1px solid var(--border);
    padding: 14px 16px;
    border-radius: 12px;
    min-height: 50px;

    box-shadow: none !important;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}


.form-control:hover,
.form-select:hover {
    border-color: #a5b4fc;
}


.form-control:focus,
.form-select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(79, 70, 229, 0.10) !important;

    transform: translateY(-1px);
}


textarea.form-control {
    min-height: 130px;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.btn-primary-custom {
    position: relative;
    overflow: hidden;

    border: 0;

    color: white;

    padding: 14px 25px;

    border-radius: 14px;

    font-weight: 700;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            var(--secondary),
            var(--secondary)
        );

    background-size: 200% auto;

    transition: 0.4s ease;

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.25);
}


.btn-primary-custom:hover {
    color: white;

    background-position: right center;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(79, 70, 229, 0.35);
}


.btn-primary-custom i {
    transition: 0.3s ease;
}


.btn-primary-custom:hover i {
    transform: translateX(6px);
}


/* =========================================================
   INFO CARD
========================================================= */

.info-card {
    min-height: 100%;

    border-radius: 28px;
    padding: 38px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(11, 145, 67, 0.3),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(11, 145, 67, 0.3),
            transparent 30%
        ),
        linear-gradient(
            235deg,
            var(--secondary),
            var(--secondary),
            var(--light)
        );

    color: rgb(255, 255, 255);

    position: relative;
    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(49, 46, 129, 0.25);

    animation: fadeUp 1s ease both;
}


/* Decorative circles */

.info-card::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -120px;
    top: -100px;

    border-radius: 50%;

    border: 35px solid rgba(255, 255, 255, 0.06);

    animation: floatingCircle 8s ease-in-out infinite;
}


.info-card::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    left: -90px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(6, 182, 212, 0.12);

    animation: floatingCircle 7s ease-in-out infinite reverse;
}


.info-card h3 {
    font-size: 30px;
    font-weight: 800;

    position: relative;
    z-index: 2;
}


.info-card > p {
    color: #dbeafe;

    line-height: 1.7;

    position: relative;
    z-index: 2;
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.contact-info {
    position: relative;
    z-index: 2;

    margin-top: 35px;
}


.contact-item {
    display: flex;
    gap: 15px;

    margin-bottom: 25px;

    padding: 12px;

    border-radius: 16px;

    transition: 0.3s ease;
}


.contact-item:hover {
    background: rgba(255, 255, 255, 0.08);

    transform: translateX(6px);
}


.contact-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: rgba(0, 0, 0, 0.4);

    color: #67e8f9;

    font-size: 19px;

    transition: 0.4s ease;
}


.contact-item:hover .contact-icon {
    transform: rotate(8deg) scale(1.1);

    background: rgba(255, 255, 255, 0.18);

    animation: pulseGlow 1.5s infinite;
}


.contact-item small {
    color: #a5b4fc;

    display: block;

    margin-bottom: 3px;
}


.contact-item strong {
    color: white;
}


/* =========================================================
   LOAN OPTIONS
========================================================= */

.loan-type-section {
    padding: 20px 0 30px;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(79, 70, 229, 0.06),
            transparent 25%
        ),
        #f8fafc;
}


.loan-option {
    position: relative;
    overflow: hidden;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 22px;

    padding: 28px;

    height: 100%;

    transition: 0.4s ease;

    box-shadow: 0 5px 20px rgba(16, 24, 40, 0.03);
}


/* Top gradient line */

.loan-option::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #8b5cf6,
            #06b6d4
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.4s ease;
}


.loan-option:hover::before {
    transform: scaleX(1);
}


.loan-option:hover {
    transform: translateY(-10px);

    border-color: #c7d2fe;

    box-shadow:
        0 20px 45px rgba(16, 24, 40, 0.10),
        0 8px 25px rgba(79, 70, 229, 0.08);
}


.loan-option i {
    display: inline-grid;

    place-items: center;

    width: 58px;
    height: 58px;

    color: white;

    font-size: 23px;

    margin-bottom: 18px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.25);

    transition: 0.4s ease;
}


.loan-option:hover i {
    transform: rotate(-8deg) scale(1.12);

    animation: iconFloat 1.5s ease-in-out infinite;
}


.loan-option:nth-child(2) .loan-option i {
    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #0891b2
        );
}


.loan-option:nth-child(3) .loan-option i {
    background:
        linear-gradient(
            135deg,
            #ec4899,
            #8b5cf6
        );
}


.loan-option h5 {
    font-weight: 800;

    transition: 0.3s ease;
}


.loan-option:hover h5 {
    color: var(--primary);
}


.loan-option p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   HELP SECTION
========================================================= */

.help-section {
    padding: 30px 0;

    background: white;
}


.help-box {
    position: relative;

    padding: 35px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border: 1px solid var(--border);

    height: 100%;

    transition: 0.4s ease;

    overflow: hidden;
}


.help-box::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -40px;
    bottom: -40px;

    border-radius: 50%;

    background: rgba(79, 70, 229, 0.06);

    transition: 0.4s ease;
}


.help-box:hover {
    transform: translateY(-8px);

    border-color: #c7d2fe;

    box-shadow:
        0 20px 45px rgba(16, 24, 40, 0.09);
}


.help-box:hover::after {
    transform: scale(2);
}


.help-box i {
    display: inline-grid;

    place-items: center;

    width: 55px;
    height: 55px;

    color: white;

    font-size: 23px;

    margin-bottom: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #06b6d4
        );

    transition: 0.4s ease;
}


.help-box:hover i {
    transform: rotate(10deg) scale(1.1);

    animation: iconFloat 1.5s infinite;
}


.help-box h5 {
    font-weight: 800;
}


.help-box p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.help-box a {
    position: relative;
    z-index: 2;

    text-decoration: none !important;

    transition: 0.3s ease;
}


.help-box a:hover {
    letter-spacing: 0.3px;
}


/* =========================================================
   MAP SECTION
========================================================= */

section.bg-light {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(6, 182, 212, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(79, 70, 229, 0.08),
            transparent 25%
        ),
        #f8fafc !important;
}


section.bg-light .card {
    transition: 0.4s ease;
}


section.bg-light .card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(16, 24, 40, 0.10) !important;
}


/* Location icon */

section.bg-light .bg-primary {
    background:
        linear-gradient(
            90deg,
            #c46022,
            #c46022,
            var(--secondary),
            var(--secondary)
        ) !important;

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.25);

    animation: pulseGlow 2.5s infinite;
}


/* Map */

section.bg-light iframe {
    transition: 0.5s ease;
}


section.bg-light .card:hover iframe {
    transform: scale(1.015);
}


/* =========================================================
   GET DIRECTIONS BUTTON
========================================================= */

section.bg-light .btn-primary {
    border: 0;

    background:
        linear-gradient(
            90deg,
            #c46022,
            var(--secondary),
            var(--secondary)
        );

    background-size: 200% auto;

    transition: 0.4s ease;

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.20);
}


section.bg-light .btn-primary:hover {
    background-position: right center;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(79, 70, 229, 0.30);
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.success-message {
    display: none;

    border-radius: 14px;

    border: 0;

    background: #ecfdf3;

    color: #027a48;

    animation: fadeUp 0.5s ease;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(79, 70, 229, 0.15),
            transparent 30%
        ),
        #101828;

    color: #98a2b3;

    padding: 65px 0 25px;
}


footer .brand {
    color: white;

    font-size: 27px;

    font-weight: 800;
}


footer h6 {
    color: white;

    font-weight: 800;

    margin-bottom: 20px;
}


footer a {
    color: #98a2b3;

    display: block;

    margin-bottom: 11px;

    font-size: 14px;

    transition: 0.3s ease;
}


footer a:hover {
    color: #67e8f9;

    transform: translateX(4px);
}


.social a {
    display: inline-grid;

    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(79, 70, 229, 0.25),
            rgba(6, 182, 212, 0.15)
        );

    color: white;

    margin-right: 5px;

    transition: 0.3s ease;
}


.social a:hover {
    transform: translateY(-5px) rotate(5deg);

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #06b6d4
        );

    box-shadow:
        0 10px 25px rgba(6, 182, 212, 0.20);
}


.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    padding-top: 22px;

    margin-top: 40px;

    font-size: 13px;
}


/* =========================================================
   NAVBAR ACTIVE
========================================================= */

.navbar .navbar-nav .nav-link.active {
    color: var(--primary) !important;
    font-weight: bolder! important;
}


.navbar .navbar-nav .nav-link.active::after {
    width: 100% !important;
}


.navbar .navbar-nav .dropdown > .nav-link.active {
    color: var(--primary) !important;
    font-weight: bolder;
}


.loan-content a {
    transition: 0.25s ease;
}


.loan-content a:hover {
    color: black !important;

    font-weight: 700;

    text-decoration: underline !important;

    transform: translateX(4px);
}


/* =========================================================
   SCROLL REVEAL HELPER
========================================================= */

.animate-card {
    opacity: 0;
    transform: translateY(30px);

    animation: fadeUp 0.8s ease forwards;
}


.animate-card:nth-child(2) {
    animation-delay: 0.15s;
}


.animate-card:nth-child(3) {
    animation-delay: 0.3s;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .navbar-collapse {
        background: white;

        padding: 20px;

        margin-top: 12px;

        border-radius: 15px;

        box-shadow:
            0 15px 40px rgba(16, 24, 40, 0.08);
    }


    .contact-wrapper {
        margin-top: -40px;
    }


    .info-card {
        min-height: auto;
    }
}


@media (max-width: 575px) {

    .contact-hero {
        padding: 70px 0 100px;
    }


    .contact-hero h1 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }


    .contact-hero p {
        font-size: 16px;
    }


    .contact-card,
    .info-card {
        padding: 25px;
    }


    .loan-option,
    .help-box {
        padding: 25px;
    }


    .contact-wrapper {
        margin-top: -30px;
    }
}

/* why choose us */

.rb-partner-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(13, 110, 253, 0.1),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(111, 66, 193, 0.1),
      transparent 30%
    ),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f7f5ff 100%);
} /* Decorative Shapes */
.rb-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.rb-shape-1 {
  width: 220px;
  height: 220px;
  background: rgba(13, 110, 253, 0.06);
  top: -100px;
  left: -100px;
}
.rb-shape-2 {
  width: 300px;
  height: 300px;
  background: rgba(111, 66, 193, 0.05);
  right: -150px;
  bottom: -150px;
} /* Tag */
.rb-partner-tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 50px;
  background: rgba(13, 110, 253, 0.09);
  color: #0d6efd;
  font-size: 14px;
  font-weight: 600;
} /* Heading */
.rb-partner-title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.1;
  font-weight: 800;
  color: #172033;
}
.rb-partner-title span {
  background: linear-gradient(90deg , #ab3315, #069008);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} /* Paragraph */
.rb-partner-text {
  max-width: 650px;
  color: #687386;
  line-height: 1.8;
  font-size: 16px;
} /* Mini Benefits */
.rb-mini-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.rb-mini-benefit:hover {
  transform: translateY(-5px);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(30, 50, 90, 0.1);
}
.rb-mini-benefit h6 {
  margin: 0;
  font-size: 14px;
  color: #202633;
}
.rb-mini-benefit p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #8a94a6;
} /* Colorful Icons */
.rb-mini-icon,
.rb-floating-icon,
.rb-stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.rb-mini-icon {
  width: 45px;
  height: 45px;
}
.icon-blue {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.12);
}
.icon-purple {
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.12);
}
.icon-orange {
  color: #fd7e14;
  background: rgba(253, 126, 20, 0.13);
}
.icon-green {
  color: #198754;
  background: rgba(25, 135, 84, 0.12);
} /* Buttons */
.rb-partner-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, var(--primary), #258236);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
  transition: all 0.3s ease;
}
.rb-partner-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(13, 110, 253, 0.35);
}
.rb-learn-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 15px;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  color: #566174;
  font-weight: 600;
  transition: 0.3s;
}
.rb-learn-btn:hover {
  color: #0d6efd;
} /* Image */
.rb-image-wrapper {
  position: relative;
  padding: 20px;
}
.rb-partner-image {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: 35px;
  display: block;
  box-shadow: 0 25px 60px rgba(31, 45, 70, 0.16);
} /* Image Circle */
.rb-image-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  right: -10px;
  top: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--orange));
  color: #fff;
  font-size: 28px;
  box-shadow: 0 15px 30px rgba(13, 110, 253, 0.25);
} /* Floating Cards */
.rb-floating-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(30, 40, 70, 0.15);
  animation: rbFloat 3s ease-in-out infinite;
}
.rb-card-top {
  top: 80px;
  left: -5px;
}
.rb-card-bottom {
  bottom: 55px;
  right: -5px;
  animation-delay: 1s;
}
.rb-floating-icon {
  width: 45px;
  height: 45px;
}
.rb-floating-card strong {
  display: block;
  font-size: 13px;
  color: #202633;
}
.rb-floating-card small {
  display: block;
  margin-top: 3px;
  color: #8a94a6;
  font-size: 11px;
}
@keyframes rbFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
} /* Stats */
.rb-stats-box {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
  padding: 25px 10px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 50px rgba(30, 45, 70, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.rb-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 20px;
  border-right: 1px solid #e9edf3;
}
.rb-stat:last-child {
  border-right: none;
}
.rb-stat-icon {
  width: 55px;
  height: 55px;
  border-radius: 16px;
  font-size: 20px;
}
.rb-stat h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: #172033;
}
.rb-stat p {
  margin: 3px 0 0;
  color: #7d8798;
  font-size: 13px;
} /* Responsive */
@media (max-width: 991px) {
  .rb-partner-section {
    padding: 70px 0;
  }
  .rb-image-wrapper {
    margin-top: 20px;
  }
  .rb-stats-box {
    grid-template-columns: repeat(2, 1fr);
  }
  .rb-stat:nth-child(2) {
    border-right: none;
  }
  .rb-stat:nth-child(-n + 2) {
    border-bottom: 1px solid #e9edf3;
  }
}
@media (max-width: 575px) {
  .rb-partner-section {
    padding: 55px 0;
  }
  .rb-partner-title {
    font-size: 38px;
  }
  .rb-image-wrapper {
    padding: 10px;
  }
  .rb-partner-image {
    min-height: 300px;
    border-radius: 25px;
  }
  .rb-floating-card {
    padding: 10px 12px;
  }
  .rb-card-top {
    left: -5px;
    top: 50px;
  }
  .rb-card-bottom {
    right: -5px;
    bottom: 30px;
  }
  .rb-image-circle {
    width: 60px;
    height: 60px;
    font-size: 20px;
    right: -5px;
  }
  .rb-stats-box {
    grid-template-columns: 1fr;
  }
  .rb-stat {
    border-right: none !important;
    border-bottom: 1px solid #e9edf3;
  }
  .rb-stat:last-child {
    border-bottom: none;
  }
  .rb-learn-btn {
    margin-left: 5px;
  }
}


/* =========================================================
   LOAN ENQUIRY POPUP
========================================================= */

#loanEnquiryModal .modal-content {
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);

    animation: popupZoom 0.4s ease;
}


@keyframes popupZoom {

    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* LEFT PANEL */

.popup-left {

    position: relative;

    overflow: hidden;

    background: radial-gradient(circle at 90% 10%, rgba(11, 145, 67, 0.3), transparent 25%), radial-gradient(circle at 10% 90%, rgba(11, 145, 67, 0.3), transparent 30%), linear-gradient(135deg, var(--secondary), var(--secondary), var(--secondary));

}


/* Decorative circle */

.popup-left::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 35px solid rgba(255,255,255,0.08);

    right: -80px;
    top: -70px;

    animation: popupFloat 5s ease-in-out infinite;

}


.popup-left::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    left: -60px;
    bottom: -50px;

    animation: popupFloat 6s ease-in-out infinite reverse;

}


@keyframes popupFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* BADGE */

.popup-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(255,255,255,0.13);

    border: 1px solid rgba(255,255,255,0.15);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* FEATURES */

.popup-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 14px;

}


.popup-feature i {

    color: var(--primary);

    font-size: 17px;

}


/* FORM */

#loanEnquiryModal .form-control,
#loanEnquiryModal .form-select {

    min-height: 50px;

    border-radius: 12px;

    border: 1px solid #e4e7ec;

    padding: 12px 15px;

    transition: .3s ease;

}


#loanEnquiryModal .form-control:focus,
#loanEnquiryModal .form-select:focus {

    border-color: #4f46e5;

    box-shadow:
        0 0 0 4px rgba(79,70,229,.10);

}


/* CLOSE BUTTON */

#loanEnquiryModal .btn-close {

    opacity: .6;

    transition: .3s ease;

}


#loanEnquiryModal .btn-close:hover {

    opacity: 1;

    transform: rotate(90deg);

}


/* MOBILE */

@media (max-width: 767px) {

    #loanEnquiryModal .popup-left {

        display: none;

    }

    #loanEnquiryModal .modal-dialog {

        margin: 15px;

    }
  }

    /* =========================================================
   LOAN ENQUIRY POPUP
========================================================= */

#loanEnquiryModal .modal-content {
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);

    animation: popupZoom 0.4s ease;
}


@keyframes popupZoom {

    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* LEFT PANEL */

.popup-left {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(6, 182, 212, 0.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(139, 92, 246, 0.35),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5,
            #0891b2
        );

}


/* Decorative circle */

.popup-left::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 35px solid rgba(255,255,255,0.08);

    right: -80px;
    top: -70px;

    animation: popupFloat 5s ease-in-out infinite;

}


.popup-left::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    left: -60px;
    bottom: -50px;

    animation: popupFloat 6s ease-in-out infinite reverse;

}


@keyframes popupFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* BADGE */

.popup-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(255,255,255,0.13);

    border: 1px solid rgba(255,255,255,0.15);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* FEATURES */

.popup-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 14px;

}


.popup-feature i {

    color: #67e8f9;

    font-size: 17px;

}


/* FORM */

#loanEnquiryModal .form-control,
#loanEnquiryModal .form-select {

    min-height: 50px;

    border-radius: 12px;

    border: 1px solid #e4e7ec;

    padding: 12px 15px;

    transition: .3s ease;

}


#loanEnquiryModal .form-control:focus,
#loanEnquiryModal .form-select:focus {

    border-color: #4f46e5;

    box-shadow:
        0 0 0 4px rgba(79,70,229,.10);

}


/* CLOSE BUTTON */

#loanEnquiryModal .btn-close {

    opacity: .6;

    transition: .3s ease;

}


#loanEnquiryModal .btn-close:hover {

    opacity: 1;

    transform: rotate(90deg);

}


/* MOBILE */

@media (max-width: 767px) {

    #loanEnquiryModal .popup-left {

        display: none;

    }

    #loanEnquiryModal .modal-dialog {

        margin: 15px;

    }

}

/* pop up */

/* =========================================================
   LOAN ENQUIRY POPUP
========================================================= */

#loanEnquiryModal .modal-content {
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);

    animation: popupZoom 0.4s ease;
}


@keyframes popupZoom {

    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* LEFT PANEL */

.popup-left {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(6, 182, 212, 0.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(139, 92, 246, 0.35),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5,
            #0891b2
        );

}


/* Decorative circle */

.popup-left::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 35px solid rgba(255,255,255,0.08);

    right: -80px;
    top: -70px;

    animation: popupFloat 5s ease-in-out infinite;

}


.popup-left::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    left: -60px;
    bottom: -50px;

    animation: popupFloat 6s ease-in-out infinite reverse;

}


@keyframes popupFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* BADGE */

.popup-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(255,255,255,0.13);

    border: 1px solid rgba(255,255,255,0.15);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* FEATURES */

.popup-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 14px;

}


.popup-feature i {

    color: #67e8f9;

    font-size: 17px;

}


/* FORM */

#loanEnquiryModal .form-control,
#loanEnquiryModal .form-select {

    min-height: 50px;

    border-radius: 12px;

    border: 1px solid #e4e7ec;

    padding: 12px 15px;

    transition: .3s ease;

}


#loanEnquiryModal .form-control:focus,
#loanEnquiryModal .form-select:focus {

    border-color: #4f46e5;

    box-shadow:
        0 0 0 4px rgba(79,70,229,.10);

}


/* CLOSE BUTTON */

#loanEnquiryModal .btn-close {

    opacity: .6;

    transition: .3s ease;

}


#loanEnquiryModal .btn-close:hover {

    opacity: 1;

    transform: rotate(90deg);

}


/* MOBILE */

@media (max-width: 767px) {

    #loanEnquiryModal .popup-left {

        display: none;

    }

    #loanEnquiryModal .modal-dialog {

        margin: 15px;

    }

}

/* =========================================================
   MORE MENU
========================================================= */

.more-menu {
    position: relative;
}


/* =========================================================
   DROPDOWN
========================================================= */

.more-dropdown {
    width: 390px;
    max-width: calc(100vw - 30px);

    padding: 0;
    margin-top: 16px;

    border: none;
    border-radius: 20px;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(18, 36, 75, 0.18);
}

/* Tablets */
@media (max-width: 991px) {
    .more-dropdown {
        width: 360px;
        max-width: calc(100vw - 30px);
        margin-top: 8px;
        border-radius: 16px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .more-dropdown {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);

        margin-top: 6px;
        border-radius: 14px;

        box-shadow:
            0 12px 35px rgba(18, 36, 75, 0.15);
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .more-dropdown {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        border-radius: 12px;
    }
}


/* =========================================================
   HEADER
========================================================= */

.more-menu-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 23px 24px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #eef4ff
        );

    border-bottom: 1px solid #e8edf7;

}


.more-label {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #3264bd;

}


.more-label i {

    margin-right: 5px;

}


.more-menu-header h5 {

    margin: 5px 0 4px;

    font-size: 18px;

    font-weight: 800;

    color: #172554;

}


.more-menu-header p {

    margin: 0;

    font-size: 11px;

    color: #7d879b;

}


/* Header icon */

.more-header-icon {

    width: 55px;

    height: 55px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: #245bb2;

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(30, 60, 120, .10);

}


/* =========================================================
   MENU ITEMS
========================================================= */

.more-items {

    padding: 12px;

}


/* Item */

.more-item {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px;

    margin-bottom: 5px;

    text-decoration: none;

    border-radius: 14px;

    border: 1px solid transparent;

    transition: all .25s ease;

}


.more-item:last-child {

    margin-bottom: 0;

}


/* =========================================================
   ICONS
========================================================= */

.more-icon {

    min-width: 48px;

    width: 48px;

    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    transition: all .25s ease;

}


.more-item:hover .more-icon {

    transform:
        scale(1.08)
        rotate(-4deg);

}


/* Blue */

.more-blue {

    background: #eaf2ff;

    color: #1261d8;

}


/* Green */

.more-green {

    background: #e9f9f0;

    color: #159957;

}


/* Orange */

.more-orange {

    background: #fff1e4;

    color: #ef7918;

}


/* Purple */

.more-purple {

    background: #f1eaff;

    color: #7041c5;

}


/* =========================================================
   TEXT
========================================================= */

.more-item-content {

    min-width: 0;

}


.more-item-content h6 {

    margin: 0 0 3px;

    font-size: 14px;

    font-weight: 750;

    color: #1c2945;

}


.more-item-content p {

    margin: 0;

    font-size: 10.5px;

    color: #8992a5;

}


/* =========================================================
   ARROW
========================================================= */

.more-item-arrow {

    margin-left: auto;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #a2aabb;

    font-size: 10px;

    transition: all .25s ease;

}


.more-item:hover .more-item-arrow {

    background: #e9f1ff;

    color: #2462bd;

    transform: translateX(3px);

}

/* =========================
   TRUST SECTION
========================= */

.more-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    border-top: 1px solid #e8eef7;
}

.more-trust-logo {
    width: 58px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(18, 36, 75, 0.08);
    flex-shrink: 0;
}

.more-trust-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.more-trust-content {
    flex: 1;
}

.more-trust-content strong {
    display: block;
    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}

.more-trust-content span {
    display: block;
    color: #718096;
    font-size: 11px;
    line-height: 1.4;
}

.more-trust-check {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a05d;
    font-size: 22px;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 991px) {
    .more-trust {
        padding: 14px;
    }

    .more-trust-content strong {
        font-size: 12px;
    }

    .more-trust-content span {
        font-size: 10px;
    }
}


/* =========================================================
   ARROW
========================================================= */

.more-arrow {

    font-size: 9px;

    margin-left: 4px;

    transition: transform .25s ease;

}


.more-menu.show .more-arrow {
    transform: rotate(180deg);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .more-dropdown {

        width: 100%;

        margin-top: 5px;

        border-radius: 15px;

        box-shadow: none;

        border: 1px solid #edf0f6;

    }


    .more-menu-header {

        padding: 18px;

    }


    .more-items {

        padding: 10px;

    }


    .more-bottom {

        margin: 0 10px 10px;

    }

}