.hero {
  background: linear-gradient(to right, #1f2937, royalblue);
  color: white;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.hero .md-button {
  background-color: royalblue;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 0.3rem;
  text-decoration: none;
  font-weight: bold;
}



/* --- Corrected Heading Styles --- */

/* 1. H1: Blue, Larger, Bolding, and a Bottom Border */
.md-typeset h1 {
  /* BOLDING: This ensures H1 is bold */
  font-weight: 800 !important;
  /* Font size and color remain */
  font-size: 2rem; 
  color: royalblue !important;
  
  /* ADD a bottom border */
  border-bottom: 1px solid royalblue;
  padding-bottom: 0.1em;
  /* REDUCE the space below the h1 */
  margin-bottom: 0.1em; /* You can adjust this value */
}

/* Add a new rule to adjust the space for paragraphs after an h1 */
.md-typeset h1 + p {
  margin-top: 0;
}

/* 2. H2: Blue and Bolding */
.md-typeset h2 {
  /* BOLDING: This ensures H2 is bold */
  font-weight: 800 !important;
  /* Color remains */
  color: royalblue !important;

    /* ADD a bottom border */
  border-bottom: 1px solid royalblue;
  padding-bottom: 0.1em;
  /* REDUCE the space below the h1 */
  margin-bottom: 0.1em; /* You can adjust this value */
}

/* 3. H3 through H6: Bolding (This rule is now redundant but kept for clarity) */
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 800 !important;
}