body {
  background: #f7f8fa;
  font-family: 'Inter', 'Poppins', Arial, sans-serif;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

header img {
  max-height: 48px;
}

header nav a {
  text-decoration: none;
  transition: color 0.2s;
}

header nav a:hover {
  color: #b01e42 !important;
}

.text-primary {
  color: #b01e42 !important;
}
.text-danger {
  color: #b01e42 !important;
}
.btn-primary {
  background: linear-gradient(90deg, #b01e42 70%, #d32f4b 100%);
  border: none;
}
.btn-primary:hover {
  background: #901835;
}
.text-purple {
  color: #6c3483 !important;
}
.bg-white {
  background: #fff !important;
}
.rounded-4 {
  border-radius: 1.5rem !important;
}
.shadow-sm {
  box-shadow: 0 2px 12px rgba(44,44,44,0.07) !important;
}
.form-label {
  font-weight: 500;
  color: #2c3e50;
}
.form-control, .form-select {
  border-radius: 0.7rem;
  border: 1.5px solid #d1d5db;
  font-size: 1rem;
  background: #f8f9fa;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
  border-color: #b01e42;
  box-shadow: 0 0 0 2px #b01e4222;
  background: #fff;
}
.btn-outline-secondary {
  border-radius: 0.7rem;
  font-weight: 500;
  color: #b01e42;
  border-color: #b01e42;
  background: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary.active {
  background: #b01e42;
  color: #fff;
}
blockquote {
  border-left: 4px solid #b01e42;
  padding-left: 1rem;
  font-size: 1.05rem;
}
@media (max-width: 991.98px) {
  .container {
    max-width: 100vw;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 767.98px) {
  .container {
    padding: 0 0.5rem;
  }
  .rounded-4 {
    border-radius: 1rem !important;
  }
  .shadow-sm {
    box-shadow: 0 1px 6px rgba(44,44,44,0.07) !important;
  }
  .p-4 {
    padding: 1.2rem !important;
  }
  .mb-4 {
    margin-bottom: 1.2rem !important;
  }
  .form-label {
    font-size: 0.98rem;
  }
}
@media (max-width: 575.98px) {
  header .container, main .container, footer .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .p-4 {
    padding: 0.7rem !important;
  }
  .rounded-4 {
    border-radius: 0.7rem !important;
  }
  .form-label {
    font-size: 0.95rem;
  }
  .btn {
    font-size: 1rem !important;
  }
}

/* Remove all side gaps for main content */
main.container {
  max-width: 100vw !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 991.98px) {
  main.container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 575.98px) {
  main.container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Remove side margin from the first row inside main */
main .row.g-4 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove side margin from columns */
main .col-lg-7, main .col-lg-5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove manual margin between columns */
main .row.g-4 > .col-lg-7,
main .row.g-4 > .col-lg-5 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Set a moderate gap between the two main columns */
main .row.g-4 {
  --bs-gutter-x: 28px !important;
}

@media (max-width: 991.98px) {
  main .row.g-4 {
    --bs-gutter-x: 16px !important;
  }
}
@media (max-width: 575.98px) {
  main .row.g-4 {
    --bs-gutter-x: 8px !important;
  }
}

/* Fix: Add a real gap between the two columns by increasing the gutter and removing the pseudo-element */
main .row.g-4::before {
  display: none !important;
}
main .row.g-4 {
  --bs-gutter-x: 48px !important; /* Large visible gap */
}
@media (max-width: 991.98px) {
  main .row.g-4 {
    --bs-gutter-x: 24px !important;
  }
}
@media (max-width: 575.98px) {
  main .row.g-4 {
    --bs-gutter-x: 12px !important;
  }
}

/* Force a visible gap between the two main columns using padding and a transparent border */
main .col-lg-7 {
  padding-right: 32px !important;
  border-right: 0 solid transparent;
}
main .col-lg-5 {
  padding-left: 32px !important;
  border-left: 0 solid transparent;
}

@media (max-width: 991.98px) {
  main .col-lg-7 {
    padding-right: 16px !important;
  }
  main .col-lg-5 {
    padding-left: 16px !important;
  }
}
@media (max-width: 575.98px) {
  main .col-lg-7 {
    padding-right: 6px !important;
  }
  main .col-lg-5 {
    padding-left: 6px !important;
  }
}

/* Remove all gutter overrides for this row to avoid conflicts */
main .row.g-4 {
  --bs-gutter-x: 0 !important;
}

/* === Find a Mortgage — dark-mode field text + radio pills === */

/* 1) Inputs/selects/textarea: white text in DARK MODE on this page only */
.theme-dark .main-content #mortgageForm :is(input.form-control,
                                            textarea.form-control,
                                            select.form-select) {
  color: #fff !important;
  background: #0b1324 !important;       /* dark field so white text is readable */
  border-color: #213250 !important;
}
.theme-dark .main-content #mortgageForm :is(input.form-control,
                                            textarea.form-control,
                                            select.form-select)::placeholder {
  color: #94a3b8 !important;
}

/* Keep nice focus ring in dark */
.theme-dark .main-content #mortgageForm :is(.form-control, .form-select):focus {
  border-color: #b01e42 !important;
  box-shadow: 0 0 0 0.25rem rgba(176, 30, 66, 0.25) !important;
}

/* 2) Radio-pill buttons (btn-check + label) — proper checked/active styling */
.main-content .btn-check:checked + .btn-outline-secondary,
.main-content .btn-check:active + .btn-outline-secondary,
.main-content .btn-outline-secondary.active,
.main-content .btn-outline-secondary:active {
  background: #b01e42 !important;
  color: #fff !important;
  border-color: #b01e42 !important;
}

/* Focus style for accessibility */
.main-content .btn-check:focus + .btn-outline-secondary,
.main-content .btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(176, 30, 66, 0.25) !important;
}

/* Default (unchecked) look — avoid stark white; use subtle tint */
.main-content .btn-outline-secondary {
  background: #fff;                 /* keep light in light-mode */
  color: #b01e42;
  border-color: #b01e42;
}

/* Dark-mode default (unchecked) look so they’re not white */
.theme-dark .main-content .btn-outline-secondary {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

/* Dark-mode checked state remains brand */
.theme-dark .main-content .btn-check:checked + .btn-outline-secondary {
  background: #b01e42 !important;
  border-color: #b01e42 !important;
  color: #fff !important;
}