:root{
      --brand-deep: #2f4f2f;
      --brand-mid: #3d5c3d;
      --bg-soft: #f4f8f4;
      --accent: #83b76e;
    }

.menu-icon {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
}

.hero-about {
  background: url('../images/image.png') center/cover no-repeat;
  height: 50vh;
  position: relative;
}

.hero-about::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
}

.hero-about .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-about {
    height: 50vh;
  }
}


/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    right: -100%;
    background: #1a1a1a;
    flex-direction: column;
    width: 200px;
    padding: 15px;
    gap: 15px;
    transition: 0.3s ease;
  }

  .nav-links.active {
    right: 0;
  }

  .menu-icon {
    display: block;
  }
}

    .page-hero {
      background: linear-gradient(120deg, #eaf4ea 0%, #f9fdf9 100%);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }
    .hero-card {
      background: white;
      border-radius: 18px;
      box-shadow: 0 20px 40px rgba(28, 70, 40, 0.08);
      overflow: hidden;
    }
    .hero-img {
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .hero-title { color:var(--brand-deep); }

    /* Wave divider */
    .wave-divider {
      display:block;
      width:100%;
      margin-top: -2px;
    }

    /* Process steps */
    .step-box {
      background: white;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 6px 18px rgba(30,60,30,0.06);
    }
    .step-num {
      width:48px;
      height:48px;
      border-radius:50%;
      display:inline-grid;
      place-items:center;
      background:linear-gradient(180deg,var(--accent), #5da44b);
      color:white;
      font-weight:700;
      margin-right:12px;
      box-shadow: 0 6px 12px rgba(100,160,80,0.12);
    }

    /* Benefits list */
    .benefit {
      display:flex; gap:12px; align-items:flex-start;
    }
    .benefit .bi { font-size:1.25rem; color:var(--accent); }

    /* Doctor card */
    .doctor-card { border-radius:12px; background:linear-gradient(180deg,#fff,#f7fbf7); padding:18px; box-shadow: 0 8px 24px rgba(20,50,20,0.06); }

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .page-hero { padding:40px 0; }
    }