:root{
  --background: hsl(210 20% 98%);
  --foreground: hsl(213 40% 15%);
  --card: #fff;
  --muted: hsl(210 20% 96%);
  /* --muted-foreground: hsl(215 16% 47%); */
  --primary: hsl(210 60% 25%);
  --primary-foreground: hsl(210 40% 98%);
  --secondary: hsl(168 80% 30%);
  --secondary-foreground: #fff;
  --accent: hsl(38 92% 50%);
  --accent-foreground: #fff;
  --destructive: hsl(0 84% 60%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(214 32% 91%);

    --gradient-hero: linear-gradient(135deg, hsl(210 60% 20%) 0%, hsl(210 50% 35%) 100%);
    --gradient-teal: linear-gradient(135deg, hsl(168 80% 30%) 0%, hsl(168 70% 45%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(38 90% 60%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 20% 98%) 100%);
    
  --shadow-soft: 0 4px 20px -2px hsl(210 60% 20% / 0.12);
  --shadow-card: 0 8px 30px -4px hsl(210 60% 20% / 0.12);
  --shadow-elevated: 0 20px 50px -10px hsl(210 60% 20% / 0.22);
}

html,body{height:100%;}
body{
  font-family:'Poppins', sans-serif;
  background: var(--background);
  color: var(--foreground);
}
h1,h2,h3,h4,.font-display{
  font-family:'Poppins', serif;
}
a{ color: inherit; }
.section-padding{ padding: 4.5rem 0; }
.bg-card{ background: var(--card); }
.bg-muted{ background: var(--muted); }
/* .text-muted{ color: var(--muted-foreground) !important; } */
.shadow-soft{ box-shadow: var(--shadow-soft); }
.shadow-card{ box-shadow: var(--shadow-card); }
.shadow-elevated{ box-shadow: var(--shadow-elevated); }

.bg-gradient-hero{ background: var(--gradient-hero); }
.bg-gradient-teal{ background: var(--gradient-teal); }
.bg-gradient-accent{ background: var(--gradient-accent); }

.navbar-blur{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar-brand-badge{
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--gradient-teal);
  display:flex; align-items:center; justify-content:center;
  color: var(--secondary-foreground);
}

.hero{
  position: relative;
  min-height: 75vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,40,70,0.92), rgba(10,40,70,0.55), rgba(10,40,70,0.05));
}
.hero .hero-content{ position:relative; padding: 5rem 0 4rem; color: var(--primary-foreground); }
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius: 999px;
  background: rgba(20, 160, 140, 0.18);
  border: 1px solid rgba(255,255,255,0.18);
}
.scheme-badge{
  display:inline-block;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(255, 189, 50, 0.22);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--accent);
  font-weight: 700;
  font-size: .9rem;
}

.card-hover{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.icon-bubble{
  width: 56px; height: 56px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient-teal);
  color: var(--secondary-foreground);
}
.icon-bubble.accent{ background: var(--gradient-accent); color: var(--accent-foreground); }
.icon-bubble.emergency{ background: var(--destructive); color: var(--destructive-foreground); }

.btn-teal{
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 0;
}
.btn-teal:hover{ filter: brightness(0.95); color: var(--secondary-foreground); }
.btn-hero{
  background: #F9B61D;
  color: hsl(210 60% 20%);
  border: 0;
  box-shadow: var(--shadow-card);
}
.btn-hero:hover{ filter: brightness(0.97); color: hsl(210 60% 20%); }
.btn-hero-outline{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.btn-hero-outline:hover{
  background: rgba(255,255,255,0.12);
  color:#fff;
}

.image-card{
  position:relative;
  border-radius: 1.25rem;
  background-color: grey;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  overflow:hidden;
  height: 240px !important;
}
.image-card:hover{
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.image-card img{ width:100%; height: 340px; object-fit: cover; }
.image-card .image-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,40,70,0.82), rgba(10,40,70,0.12));
}
.image-card .image-text{ position:absolute; left:0; bottom:0; padding: 1.25rem; color:#fff; }

.footer{
  background: var(--gradient-hero);
  color: var(--primary-foreground);
  

}
.footer a{ color: rgba(255,255,255,0.82); text-decoration: none; }
.footer a:hover{ color: var(--accent); }

/* FULL WIDTH FOOTER */
.footer {
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 60px 0;
  background: var(--gradient-hero);
  color: var(--primary-foreground);
}

/* remove bootstrap container restriction */
.footer .container,
.footer .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 40px;
  padding-right: 40px;
}


.floating-ctas{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1050;
}
.floating-btn{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  color:#fff;
  text-decoration:none;
  box-shadow: var(--shadow-card);
}
.floating-btn .label{ display:none; }
@media (min-width: 576px){
  .floating-btn .label{ display:inline; }
}
.floating-btn.whatsapp{ background:#25D366; }
.floating-btn.whatsapp:hover{ background:#20BD5A; }
.floating-btn.emergency{ background: var(--destructive); }
.pulse{
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,59,0.35); }
  70%{ transform: scale(1.02); box-shadow: 0 0 0 18px rgba(255,59,59,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}
/* Buttons */
.btn {
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  padding: 0.75rem 1.5rem !important;
}

.btn-lg {
  padding: 1rem 2rem !important;
  font-size: 1.25rem !important;
}

.btn-teal {
  background: var(--gradient-teal) !important;
  color: white !important;
  border: none !important;
}

.btn-teal:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-elevated) !important;
  color: white !important;
}

.btn-hero {
  background:#f9b61d!important;
  color: hsl(var(--primary)) !important;
  border: none !important;
  box-shadow: var(--shadow-card) !important;
}

.btn-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-elevated) !important;
  color: hsl(var(--primary)) !important;
}

.btn-hero-outline {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

.btn-primary {
  background: var(--gradient-hero) !important;
  color: white !important;
  border: none !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-elevated) !important;
  color: white !important;
}
/* Card overrides */
.card {
  border: 0.5px solid rgba(128, 128, 128, 0.468) !important;
  border-radius: 10px !important;
  background: var(--gradient-card) !important;
  transition: all 0.3s ease-out !important;
  overflow: hidden !important;
}

.card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-elevated) !important;
}

.card-body {
  padding: 1.5rem !important;
}

.bg-card {
  background: var(--gradient-card) !important;
}


.text-muted {
  color: hsl(var(--muted-foreground)) !important;
}
.card{
  background: rgba(255,255,255,0.10) !important; 
  border: 1px solid rgba(255,255,255,0.14);
}

.hero .hero-content {
  position: relative;
  padding:  0rem !important;
  color: var(--primary-foreground);
}
.accepted-schemes .scheme-card {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))!important;
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #fff !important;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.ratio-4x3 {
  --bs-aspect-ratio: 45%;
}
/* ===== CTA ===== */
.cta-section {
  padding: 60px 0;
}

.cta-box {
  background: linear-gradient(135deg, #15395b, #244c77);
  border-radius: 20px;
  padding: 45px 20px;
}
/* common button style */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 22px;
  border-radius: 10px;

  font-weight: 600;
  font-size: 15px;

  text-decoration: none !important;
  color: #fff !important;

  transition: 0.25s ease;
}
/* WhatsApp green override */
.btn-success {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #1ebe5d !important;
  border-color: #1ebe5d !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-outline-grey {
  border: 1px solid #d1d5db;
  color: #374151;
  background: transparent;
}

.btn-outline-grey:hover {
  background: #F5A61D;
  border-color: #F5A61D;
  color: #fff;
}
p.text-muted.small.mb-0 {
  color: grey !important;
}
.nav-link:hover {
  background-color: #e5e7eb; /* grey */
  border-radius: 6px;
}

/* active page highlight */
.nav-link.active {
  background-color: #194066; /* navy */
  color: #fff !important;
  border-radius: 8px !important;

}