:root {
  --navy: #061134;
  --navy-deep: #1c2649;
  --blue: #00a2d1;
  --text-muted: #5f6373;
}

body {
  font-family: 'Inter', sans-serif;
  color: #191c1d;
  background-color: #f8f9fa;
}

.text-navy { color: var(--navy-deep); }
.bg-navy { background-color: var(--navy-deep); }
.text-bright-blue { color: var(--blue); }
.bg-bright-blue { background-color: var(--blue); }
.border-bright-blue { border-color: var(--blue); }
.text-primary-custom { color: var(--navy); }
.btn-primary-custom {
  background-color: var(--blue);
  border-color: var(--blue);
}
.bg-primary-custom {
  background-color: var(--navy-deep);
}
.btn-primary-custom:hover {
  background-color: #14244d;
  border-color: #14244d;
}
.navbar{
    background: rgba(255,255,255,0.9);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.loan-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.loan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(28, 38, 73, 0.12);
}

.navbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: 100vh;
  min-height: 760px;
}

.hero-carousel .carousel-item img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(6, 17, 52, 0.88) 0%, rgba(6, 17, 52, 0.35) 60%, rgba(6, 17, 52, 0.15) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: 5rem;
}

.hero-copy {
  max-width: 720px;
}

.about-card,
.stat-card {
  background: #fff;
}

.carousel-control-prev,
.carousel-control-next {
  z-index: 4;
}

@media (max-width: 991.98px) {
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: 720px;
    min-height: 720px;
  }

  .hero-content {
    padding-top: 4rem;
  }
}

@media (max-width: 575.98px) {
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: 650px;
    min-height: 650px;
  }

  .hero-content {
    padding-top: 3.5rem;
  }

  .hero-copy .display-4 {
    font-size: 2.35rem;
  }
}