.toppage {
    background-image: url(../img/hero-bg.jpg) top center;
  }

  .containerstep {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Center aligns the button */
  }

  h1,
  h2 {
    color: #d63447;
  }

  .step {
    position: relative;
    margin-bottom: 25px;
    background: #e9ecef;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    /* Ensures the icon stays within the step box */
    text-align: left;
    /* Keeps step text aligned to the left */
  }

  .step-number {
    background: #d63447;
    color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
  }

  .step-content {
    display: inline-block;
    color: black;
    vertical-align: top;
    width: calc(100% - 60px);
    /* Adjusted to leave space for the icon */
  }

  .highlight,
  a {
    color: #d63447;
    font-weight: bold;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  .action-button {
    background: #d63447;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: block;
    /* Makes the button a block element */
    margin: 10px auto;
    /* Centers the button horizontally */
    width: fit-content;
    /* Ensures the width is just enough for the content */
  }

  .action-button:hover {
    background: #af2b3e;
  }

  .icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #d63447;
  }