/* File: /assets/css/style.css */
:root{
  --brand:#2f855a;           /* primary green */
  --brand-2:#1f6f4a;         /* dark green */
  --ink:#1b2733;
  --muted:#64748b;
  --cream:#f7f8f3;
  --ring: rgba(47,133,90,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color:var(--ink); background:var(--cream);
}

/* Subtle glass effect */
.bg-white\/80{ background:rgba(255,255,255,.8)!important; }
.backdrop-blur{ backdrop-filter:saturate(120%) blur(6px); }

/* Brand dot before logo */
.brand-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(145deg,var(--brand),#4caf50);margin-right:.5rem
}

/* HERO */
.hero{
  position:relative; overflow:hidden; border-radius:20px;
  background: radial-gradient(90% 70% at 5% 20%, #b7f7cf 0%, #e7ffe7 30%, #f6fff7 55%, #eefdf1 80%, #ecfff1 100%),
              linear-gradient(135deg, var(--brand), #6ad47f);
  color:#0b2918;
  box-shadow:0 8px 24px rgba(28,105,73,.15);
}
.hero .inner{ padding:48px 28px; }
.hero h1{ font-weight:800; letter-spacing:.3px; }
.hero .badge-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--brand-2); padding:.4rem .75rem; border-radius:999px;
  font-weight:600; border:1px solid rgba(0,0,0,.06);
}
.hero .cta .btn{ border-radius:12px; padding:.7rem 1rem; }
.hero-illustration{
  position:absolute; right:-40px; bottom:-40px; width:300px; opacity:.13;
  filter:contrast(1.05) saturate(1.1)
}

/* Feature cards row */
.features .card{
  border:0; border-radius:16px; padding:18px;
  background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.features .card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(16,24,40,.12);}
.features .bi{ font-size:1.35rem; color:var(--brand); }

/* Section headers */
.section-title{
  display:flex; align-items:center; gap:.6rem; margin-bottom:12px; font-weight:700;
}
.section-title .bar{ width:8px; height:22px; border-radius:6px; background:var(--brand); }

/* Blog list cards */
.list-card{
  border:0; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.08);
}
.list-card .thumb{ width:110px; height:78px; object-fit:cover; border-radius:12px; }
.list-card .meta{ color:var(--muted); font-size:.9rem; }

/* Quick tips */
.tips{ border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.08); padding:16px; }
.tips li{ margin:.6rem 0 }
.badge-soft{ background:rgba(47,133,90,.1); color:var(--brand-2); border:1px solid var(--ring); }

/* Footer */
footer{ background:#fff }

/* Utilities */
.round-16{ border-radius:16px }
.shadow-hero{ box-shadow:0 20px 60px rgba(28,105,73,.20) }
.hr-soft{ height:1px; background:rgba(0,0,0,.06); border:0; margin:18px 0 }

.card:hover {
  transform: translateY(-3px);
  transition: all 0.2s ease;
}

/* HERO watermark + click safety */
.hero { position: relative; }
.hero .inner { position: relative; z-index: 1; }

/* Watermark from CSS variable set on <section> */
.hero::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:42vw;               /* desktop responsive size */
  max-width:520px;
  aspect-ratio:1/1;
  background-image: var(--hero-watermark);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.08;              /* subtle watermark */
  filter: grayscale(100%) brightness(110%);
  pointer-events:none;      /* allow buttons to be clickable */
  z-index:0;
  transform: translate(8%, 12%);
}

/* Mobile: shift to center background */
@media (max-width: 991.98px){
  .hero::after{
    left:50%; right:auto; bottom:-8%;
    width:120%;
    max-width:none;
    transform: translate(-50%, 0);
    opacity:.06;
  }
}

/* Fix overlapping filter form on mobile view */
@media (max-width: 768px) {
  .directory-filters {
    position: static !important;
    margin-bottom: 1rem !important;
    z-index: 1 !important;
  }
  .directory-results {
    margin-top: 0 !important;
  }
}

/* ============================
   Part-1C – Directory CTA FINAL
   ============================ */

.directory-cta-section {
  background: #0C1A21 !important;      /* dark background */
  padding: 60px 0;
}

/* Heading + lead text white */
.directory-cta-section h2,
.directory-cta-section p.lead {
  color: #ffffff !important;
}

/* Card base inside this section only */
.directory-cta-section .directory-cta-card {
  border-radius: 1rem;
  border: 0;
  padding: 2px;
  background: transparent !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.directory-cta-section .directory-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

/* Inner bodies coloured separately */
.directory-cta-section .directory-cta-card.card-pink .card-body {
  background: #FFE9F0 !important;      /* soft pink */
  border-radius: 1rem;
  border: 1px solid #FFB8C9;
}

.directory-cta-section .directory-cta-card.card-blue .card-body {
  background: #E8F3FF !important;      /* soft blue */
  border-radius: 1rem;
  border: 1px solid #99C8FF;
}

/* WhatsApp pill (right-bottom) */
.whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #dff8e8;
  font-size: 0.8rem;
  font-weight: 600;
  color: #128c7e;
  white-space: nowrap;
}

.whatsapp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #25D366;
  display: inline-block;
  position: relative;
}

.whatsapp-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffffff;
}

/* Mobile lead text */
@media (max-width: 767.98px) {
  .directory-cta-section .lead {
    font-size: 0.95rem;
  }
}

.social-share-box {
    background:#ffffff;
    padding:20px 18px;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    max-width:720px;
    margin:25px auto;
    text-align:center;
}

.social-share-title {
    font-size:18px;
    font-weight:700;
    color:#123;
    margin-bottom:8px;
}

.social-share-msg {
    font-size:14px;
    color:#444;
    margin-bottom:18px;
}

.social-icons-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.social-icons-row a,
.social-icons-row button {
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    border:none;
    cursor:pointer;
}

.social-wa { background:#25D366; }
.social-fb { background:#1877F2; }
.social-tg { background:#0088CC; }
.social-copy { background:#444; }

.tip-card, .disease-card {
    border-radius: 18px;
    padding: 25px;
    background: linear-gradient(135deg, #eafaf1 0%, #ffffff 100%);
    border: 1px solid #d8efe2;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: all .3s ease;
}

.tip-card:hover, .disease-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.card-title-custom {
    font-weight: 800;
    font-size: 20px;
    color: #1b5e20;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title-custom i {
    font-size: 22px;
    color: #2e7d32;
}

.tip-card p, 
.disease-card p {
    font-size: 15px;
    color: #333;
    margin-bottom: 6px;
}

.disease-card ul {
    padding-left: 20px;
}

.disease-card ul li {
    margin-bottom: 5px;
    color: #333;
}

.read-more-link {
    font-weight: 600;
    color: #1b5e20 !important;
}