.custom-color {
      color: #7034ac;
  }

  .colored-border {
      border-bottom: 2px solid #c3e19a;
      /* You can adjust the width and style as needed */
      color: #c3e19a;
      /* This will change the text color to match the border */
      /* Other styles */
  }

  .hero {
      position: relative;
      /* Needed for pseudo-elements */
  }

  /* Curved lines on both sides */
  .hero::before,
  .hero::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 10px;
      /* Adjust as needed */
      height: 2px;
      background-color: #7034ac;
      /* Change this to your desired color */
      border-radius: 50%;
      /* Makes the lines curved */
  }

  /* Top curved line */
  .hero::before {
      left: -15px;
      /* Adjust to position it correctly */
      transform: translateY(-10%);
  }

  /* Bottom curved line */
  .hero::after {
      right: -15px;
      /* Adjust to position it correctly */
      transform: translateY(10%);
  }

  /* Horizontal bars */
  .hero::before,
  .hero::after {
      width: 300px;
  }


  /* CSS for mobile view */
  @media only screen and (max-width: 768px) {

      /* Adjust the width of the curved lines */
      .hero::before,
      .hero::after {
          width: 50px;
          /* Adjust width for smaller screens */
      }
  }