.services-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    width: 100%;
    max-width: 900px;
    margin: 25px auto;
  }
  
  .service-btn {
    background: none;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease, border 0.3s ease;
    color: var(--dark-color);

  }
  
  .service-btn.active {
    color: var(--highlight-color);
  }
  
  .services-content {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
  }
  
  .service-image {
    width: 60%;
    animation: fadeIn 0.5s ease-in-out, slideIn .6s ease-in-out;
    /* Add styles for image container, like padding or margin if needed */
  }

  .service-image img {
    border-radius: 6px;
  }
  
  .service-description {
    width: 40%;
    padding: 0 3%;
    animation: fadeIn 0.5s ease-in-out 0.1s; 
    animation-fill-mode: backwards; /* Keeps the element in the start state of animation until it begins */
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideIn {
    from { transform: translateY(5px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  
 
  
  @media (max-width: 1024px) {
    .services-content {
      flex-direction: column;
    }

    .services-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
  
    .service-image, .service-description {
      width: 100%;
    }

    .service-image {
        max-width: 700px;
    }
  
    .service-description {
      padding: 7.5% 5%;
      max-width: 600px;
    
    }
  }

  @media (max-width: 800px) {
    .service-btn {
      flex-direction: column;
        padding: .75em 1em;

    }

  
    .service-description {
      padding: 7.5% 0;
      max-width: 600px;
    }
  }