.steps-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .steps-nav li {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust the space between list items as needed */
  }
  
  .step-number {
    width: 25px; /* Diameter of the circle */
    height: 25px; /* Diameter of the circle */
    border-radius: 50%; /* Rounds the corners into a circle */
    background-color: #f1f1f1; /* Your desired background color */
    color: var(--dark-color); /* Your desired number color */
    margin-right: 15px; /* Space between number and text */
    text-align: center; /* Aligns the number horizontally */
    font-weight: bold; /* Optional: makes the number bold */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  .how-we-work .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .how-nav  {
    border-right:2px solid #f1f1f1;
    padding: 3%;
    padding-right: 0;
  }
  
  .how-nav ul {
    list-style: none;
    padding: 0;
  }
  
  .how-btn {
    background: none;
    border: none;
    padding: .75em 1em;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease, border 0.3s ease;
    display: flex;
    align-items: center;
    color: var(--dark-color);
  }
  
  .how-btn.active {
    color: var(--highlight-color);
    display: flex;
  }
  
  .how-content {
    flex-basis: 40%; /* Adjust the width as needed */
    padding-left: 25px;
  }

  .how-content p {
   max-width: 500px;
  }

  .how-image {
    flex-basis: 25%; /* Adjust the width as needed */
  }
  .how-nav {
    flex-basis: 27%; /* Adjust the width as needed */
  }
  
  .how-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 6px;
  }
  
  @media (max-width: 1024px) {

    .how-nav {
        border: 0;
        padding: 0;
        max-width: 900px;
    }

    .how-nav ul {
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .how-content{
        padding: 60px 0;
    }
  }

  @media (max-width: 800px) {

    .how-nav {
        border: 0;
        padding: 0;
        max-width: 900px;
    }

    .how-nav ul {
        display:flex;
        flex-wrap: wrap;
        justify-content: start;
        flex-direction: column;
    }

    .how-content{
        padding: 60px 0;
    }
  }