
  .hero-banner {
    color: #ffffff; /* all text white by default */
  }

  /* H1 style */
  .hero-banner h1 {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff; /* white */
  }

  /* H2 style */
  .hero-banner h2 {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff; /* white */
  }

  /* H3 style */
  .hero-banner h3 {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff; /* white */
  }

  /* Paragraph style */
  .hero-banner p {
    font-size: 18px;
    color: #ffffff; /* white */
  }

  /* Button style */
  .hero-banner a.btn {
    font-size: 18px;
    color: #000;           /* text color inside button */
    background-color: blueviolet; /* yellow */
    border-radius: 6px;
    padding: 10px 24px;
    text-decoration: none;
    font-weight: 600;
  }

  .hero-banner a.btn:hover {
    background-color: blue; /* darker yellow */
    color: #fff; /* hover text white */
  }

