/* Upniva homepage visual refresh (structure-preserving) */
:root {
  --uo-bg: #f8fafc;
  --uo-surface: #ffffff;
  --uo-text: #0f1b1d;
  --uo-muted: rgba(15, 27, 29, 0.7);
  --uo-border: rgba(5, 63, 68, 0.12);

  --uo-green: var(--dark-green, #053f44);
  --uo-gold: var(--dark-yellow, #f58f08);

  --uo-radius-sm: 12px;
  --uo-radius-md: 14px;
  --uo-radius-lg: 16px;
  --uo-radius-pill: 9999px;

  --uo-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
  --uo-shadow-md: 0 18px 48px rgba(15, 23, 42, 0.08);

  --uo-elevation-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
  --uo-elevation-md: 0 16px 44px rgba(15, 23, 42, 0.12);

  --uo-font-sans: "Plus Jakarta Sans", "Inter", Poppins, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --uo-font-display: "Plus Jakarta Sans", "Inter", "Roboto Condensed", Poppins,
    sans-serif;

  /* Spacing scale (use consistently across layouts) */
  --uo-space-xxl: 64px;
  --uo-space-xl: 48px;
  --uo-space-lg: 32px;
  --uo-space-md: 24px;
  --uo-space-sm: 16px;

  /* Typographic scale */
  --uo-font-size-xxl: 40px;
  --uo-font-size-xl: 34px;
  --uo-font-size-lg: 26px;
  --uo-font-size-md: 18px;
  --uo-font-size-sm: 14px;
}

html,
body {
  background: var(--uo-bg);
  font-family: var(--uo-font-sans) !important;
}

/* ---------------- Header + navigation (homepage only) ---------------- */
section.header.top-header.d-menu {
  background: rgba(248, 249, 251, 0.92);
  border-bottom: 1px solid rgba(5, 63, 68, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

section.header.top-header.d-menu.top-header-fixed {
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

section.header.top-header.d-menu nav.diwali {
  background: transparent !important;
}

section.header.top-header.d-menu .menu-container {
  padding-top: 12px;
  padding-bottom: 12px;
}

section.header.top-header.d-menu a,
section.header.top-header.d-menu .nav-link,
section.header.top-header.d-menu .call_btn-inner a {
  font-family: var(--uo-font-sans);
}

section.header.top-header.d-menu .call_btn-inner a {
  color: var(--uo-green) !important;
}

/* Search field polish (no layout change) */
section.header.top-header.d-menu .custome-search-form .form-control {
  border-radius: var(--uo-radius-pill);
  border: 1px solid rgba(5, 63, 68, 0.16);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(5, 63, 68, 0.04);
  font-weight: 600;
  color: var(--uo-text);
}

section.header.top-header.d-menu .custome-search-form .form-control:focus {
  border-color: rgba(5, 63, 68, 0.28);
  box-shadow: 0 0 0 4px rgba(5, 63, 68, 0.08);
}

section.header.top-header.d-menu .custome-search-form .btn {
  border-radius: var(--uo-radius-pill);
  border: 1px solid rgba(5, 63, 68, 0.16);
  background: #fff;
}

/* Product menu bar */
section.new-product-header {
  background: rgba(248, 249, 251, 0.92);
  border-bottom: 1px solid rgba(5, 63, 68, 0.08);
}

/* new-menu.css sets a dark bar; neutralize it on homepage */
nav.navBarContainer {
  background: transparent !important;
}

.navBarContainer.new-product-container {
  background: transparent !important;
}

.navBarContainer ul li a,
.navBarContainer ul li {
  font-family: var(--uo-font-sans);
}

.navBarContainer ul li a {
  color: var(--uo-green) !important;
  font-weight: 700;
  letter-spacing: 0.1px;
}

/* .navBarContainer li:hover a,
.navBarContainer ul li a:hover {
  background-color: rgba(5, 63, 68, 0.06) !important;
  color: var(--uo-green) !important;
  border-radius: var(--uo-radius-pill);
} */

/* Menu caret (was white for dark header) */
.navBarContainer a.hasSub_menu::after {
  border-left-color: var(--uo-green) !important;
  border-bottom-color: var(--uo-green) !important;
  opacity: 0.9;
}

.navBarContainer li:hover .megaMenu_container {
  /* border-radius: var(--uo-radius-lg); */
  box-shadow: var(--uo-shadow-md);
  border: 1px solid rgba(5, 63, 68, 0.12);
}

/* ---------------- Hero slider polish ---------------- */
section.home-slider {
  background: radial-gradient(1200px 500px at 18% -20%, rgba(5, 63, 68, 0.12), transparent 60%),
    radial-gradient(900px 420px at 82% 0%, rgba(245, 143, 8, 0.11), transparent 58%),
    var(--uo-bg);
}

section.home-slider .banner-img {
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.08));
}

section.home-slider .swiper-pagination-bullet {
  background: rgba(5, 63, 68, 0.22) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

section.home-slider .swiper-pagination-bullet-active {
  background: var(--uo-green) !important;
}

/* ---------------- Shared homepage typography ---------------- */
.rescent-title,
.offer-title,
.uo-numbers-title,
.uo-partnersTitle {
  font-family: var(--uo-font-display) !important;
  letter-spacing: -0.3px;
}

.rescent-title,
.offer-title {
  font-size: var(--uo-font-size-xl);
  line-height: 1.2;
  font-weight: 900;
  color: var(--uo-green);
}

.recent-subtitle,
.offer-subtitle {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.95;
}

.recent-subtitle,
.offer-subtitle,
.uo-numbers-sub,
.uo-partnersSub {
  font-family: var(--uo-font-sans) !important;
  color: var(--uo-muted) !important;
}

/* Section breathing room (structure preserved) */
section#referloanSpecificationSection,
section#newofferSection,
section#impactSection {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Better spacing without changing layout structure */
#referloanSpecificationSection .recent-row {
  gap: 24px;
}

/* Ensure consistent card system across homepage sections */
#referloanSpecificationSection .recent-product-card,
#newofferSection .bestOffercard,
#impactSection .uo-statBar,
#impactSection .uo-statItem,
#impactSection .uoPartnerCard {
  border-radius: 16px !important;
}

#referloanSpecificationSection .rescent-search-header,
#newofferSection .rescent-search-header {
  margin-bottom: 24px;
}

/* ---------------- Buttons ---------------- */
a.btn-reacnt,
button.btn-reacnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  min-height: 48px;
  border-radius: var(--uo-radius-pill);
  background: linear-gradient(135deg, var(--uo-green), #0a6b61);
  color: #fff !important;
  border: 1px solid rgba(5, 63, 68, 0.18);
  box-shadow: var(--uo-shadow-md);
  font-weight: 800;
  font-family: var(--uo-font-sans);
  letter-spacing: 0.2px;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

a.btn-reacnt:hover,
button.btn-reacnt:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: var(--uo-shadow-md);
}

/* Secondary (outline) where needed */
.btn-reacnt.btn-outline,
a.btn-reacnt.btn-outline {
  background: #fff !important;
  color: var(--uo-green) !important;
  border: 1px solid rgba(5, 63, 68, 0.18);
}

/* ---------------- Offers cards ---------------- */
#newofferSection .offer-row {
  row-gap: 24px;
}

#newofferSection .bestOffercard {
  cursor: pointer;
}

#newofferSection .bestOffercard a {
  display: block;
  text-decoration: none;
  color: inherit;
}

#newofferSection .bestOffercard {
  border-radius: var(--uo-radius-lg);
  background: var(--uo-surface);
  border: 1px solid rgba(5, 63, 68, 0.1);
  box-shadow: var(--uo-shadow-sm);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

#newofferSection .bestOffercard:hover {
  transform: translateY(-6px);
  box-shadow: var(--uo-shadow-md);
  border-color: rgba(5, 63, 68, 0.18);
}

#newofferSection .bestOffercardinner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 300ms ease;
}

#newofferSection .bestOffercard:hover .bestOffercardinner img {
  transform: scale(1.03);
}

/* ---------------- Upniva In Numbers (impact section) ---------------- */

#impactSection .specification-header {
  text-align: center;
  margin-bottom: 32px;
}

#impactSection .uo-numbers-title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  color: #0b2a3b;
}

#impactSection .uo-numbers-underline {
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: #ff9f00;
  margin: 10px auto 18px;
}

#impactSection .uo-numbers-sub {
  font-size: 16px;
  font-weight: 600;
  color: rgba(15, 27, 29, 0.72);
  max-width: 720px;
  margin: 0 auto 32px;
}

#impactSection .uo-statBarWrap {
  max-width: 1120px;
  margin: 0 auto 18px;
  padding: 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 44px rgba(10, 45, 80, 0.12);
  backdrop-filter: blur(20px);
}

#impactSection .uo-statBar {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 18px;
  padding: 0;
  background: transparent;
}

#impactSection .uo-statItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(223, 229, 244, 0.75);
  box-shadow: 0 18px 32px rgba(10, 45, 80, 0.08);
  text-align: center;
}

#impactSection .uo-statIcon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 137, 255, 0.14);
  border: 1px solid rgba(0, 137, 255, 0.3);
  box-shadow: 0 12px 18px rgba(10, 45, 80, 0.1);
}

#impactSection .uo-statValue {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #0b2a3b;
}

#impactSection .uo-statLabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 27, 29, 0.7);
}

/* ---------------- Mobile guardrails ---------------- */
@media (max-width: 992px) {
  section.header.top-header.d-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  section#referloanSpecificationSection,
  section#newofferSection,
  section#impactSection {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .rescent-title,
  .offer-title {
    font-size: 26px;
  }

  #referloanSpecificationSection .recent-row {
    gap: 16px;
  }

  a.btn-reacnt:hover,
  button.btn-reacnt:hover,
  #newofferSection .bestOffercard:hover {
    transform: none;
  }
}