.card {
      background: white;
      padding: 1.25rem;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
      margin-bottom: 1rem;
    }

    .card img {
      max-width: 200px;
      height: auto;
      margin-right: 10%;
    }

    .site-banner {
      width: 100%;
      background: #ffffff;      /* banner background color */
      color: white;             /* banner text color */
      padding: 1.2rem 0;        /* vertical spacing */
      text-align: center;       /* center banner text */
      font-size: 1.3rem;        /* banner text size */
      font-weight: 600;         /* thicker text */
    }

    .card h3 {
      font-size: clamp(1rem, 1.5vw, 1.5rem);;
    }

    .card p {
      font-size: clamp(0.9rem, 1.5vw, 1rem);;
    }

    @media (max-width: 768px) {
    .hero-bg {
            min-height: 250px;
        }
    }