/* ============================================================
   FundiSwift — UI fixes (no hacky workarounds)
   ============================================================ */

/* ---------- 1. CENTER & CLARIFY SECTION HEADERS ---------- */
.section-padding .iq-title-box {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-padding .iq-title-box h3,
.section-padding .iq-title-box .line-count-1,
.section-padding .iq-title-box .highlighted-text,
.section-padding .iq-title-box .highlighted-text-swipe {
  text-align: center;
}
.section-padding > .container > div.d-flex.align-items-center.justify-content-between,
.section-padding > .container > div.d-flex.justify-content-between {
  justify-content: center !important;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.section-padding .iq-title-box.mb-0 { margin-bottom: 2rem !important; }

/* ---------- 2. DARK MODE FIXS ---------- */
[data-bs-theme=dark] .bg-light {
  background-color: #15162a !important;
  color: #EFF0F1 !important;
}
[data-bs-theme=dark] body.body-bg {
  background: linear-gradient(160deg, #1a2e1a 0%, #0f1f0f 100%) !important;
  color: #EFF0F1 !important;
}
[data-bs-theme=dark] .section-padding,
[data-bs-theme=dark] .our-service {
  background-color: transparent !important;
}
[data-bs-theme=dark] .authontication-forms,
[data-bs-theme=dark] .iq-login-form {
  background: linear-gradient(160deg, #1f2138 0%, #15162a 100%) !important;
  color: #EFF0F1 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme=dark] .iq-login-form .form-control,
[data-bs-theme=dark] .authontication-forms .form-control {
  background-color: #15162a !important;
  color: #EFF0F1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-bs-theme=dark] .iq-login-form .input-group-text {
  background-color: #1f2138 !important;
  color: #EFF0F1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-bs-theme=dark] .iq-login-form h3,
[data-bs-theme=dark] .iq-login-form label,
[data-bs-theme=dark] .iq-login-form .text-signup,
[data-bs-theme=dark] .iq-login-form a,
[data-bs-theme=dark] .iq-login-form p {
  color: #EFF0F1 !important;
}

/* ---------- 3. NAV CLOSE BUTTON FIX ---------- */
.navbar-toggler[aria-controls="navbar_main"] {
  cursor: pointer;
  z-index: 1050;
}
.btn-close[aria-label="Close"] {
  opacity: 1 !important;
  background-size: 1.2rem;
}

/* ---------- 4. CATEGORIES HOVER EFFECT ---------- */
.category-list .category-card:hover,
.fs-category-card:hover,
.category-card-inner:hover,
.category-page .category-item:hover,
.service-list-section .service-card:hover,
.list-item:hover,
[role="listitem"]:hover,
.category-tab-list li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(63, 207, 158, 0.2);
  transition: all 0.3s ease;
}
.category-list .category-card,
.fs-category-card,
.category-page .category-item,
.service-list-section .service-card {
  transition: all 0.3s ease;
}

/* ---------- 5. MOBILE RESPONSIVE POLISH ---------- */
@media (max-width: 991px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .section-padding { padding: 3rem 0 !important; }
  .iq-title-box h3 { font-size: 1.6rem !important; }
  .landing-header .navbar .navbar-toggler { display: block !important; }
  .landing-header .navbar-collapse { padding-top: 1rem; }
  .landing-header .navbar-nav .nav-item { padding: 0.5rem 0; }
}
@media (max-width: 767px) {
  .fs-hero-section { padding-top: 110px !important; text-align: center; }
  .fs-hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .fs-hero-left { text-align: center; }
  .fs-hero-left p { margin-left: auto; margin-right: auto; }
  .fs-hero-title { font-size: 2rem !important; }
  .fs-hero-buttons { justify-content: center; }
  .fs-hero-widget { max-width: 100% !important; margin-left: 0 !important; padding: 1.25rem; }
  .fs-hero-widget-score { font-size: 2.5rem !important; }
  .fs-hero-buttons .fs-btn-primary-green,
  .fs-hero-buttons .fs-btn-outline-green { min-width: 160px; text-align: center; }
  .section-padding { padding: 2.5rem 0 !important; }
  .iq-title-box h3 { font-size: 1.4rem !important; }
  .fs-why-grid,
  .fs-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
  .fs-category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
  .fs-category-card-inner { padding: 1.25rem 0.75rem !important; }
  .fs-why-card { padding: 1.5rem 1rem !important; }
  .fs-how-step { padding: 1rem 0.5rem !important; }
  .service-box-card { margin-bottom: 0.5rem; }
  .service-box-card .service-title { font-size: 1rem !important; }
  .service-box-card .iq-image::before { font-size: 0.55rem; padding: 0.25rem 0.5rem; top: 0.5rem; left: 0.5rem; }
  .landing-header .navbar-inner {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.75rem !important;
  }
  .landing-header .navbar-nav .nav-item { padding: 0.4rem 0; }
  .landing-header .navbar-nav .nav-link { min-height: 44px; line-height: 44px; padding: 0 0.75rem; }
  .footer-bottom .row { flex-direction: column; gap: 1rem; text-align: center; }
  .footer .footer-title { margin-bottom: 0.75rem; }
  .footer .footer-links li { margin-bottom: 0.4rem; }
}
@media (max-width: 480px) {
  .fs-why-grid,
  .fs-stats-grid,
  .fs-category-grid { grid-template-columns: 1fr !important; }
  .fs-hero-title { font-size: 1.5rem !important; }
  .fs-category-card-inner { padding: 1.25rem 0.75rem !important; }
  .fs-hero-buttons .fs-btn-primary-green,
  .fs-btn-outline-green { min-width: 140px; font-size: 0.9rem; padding: 0.7rem 1.2rem; }
  .fs-stat-number { font-size: 1.75rem !important; }
  .fs-testimonial-card { padding: 1.25rem !important; }
  .service-box-card .service-title { font-size: 0.9rem !important; }
}

/* ---------- 6. FONT SIZE CONSISTENCY ---------- */
.service-box-card .service-title,
.service-card .service-title,
.card-title,
.service-name,
.fs-service-title { font-size: 1rem !important; line-height: 1.4; }
.page-content h1, .content-area h1 { font-size: 2.5rem; }
.page-content h2, .content-area h2 { font-size: 2rem; }
.page-content h3, .content-area h3 { font-size: 1.5rem; }
.page-content h4, .content-area h4 { font-size: 1.2rem; }