header {
  position: relative;
  top: 3.5vw;
  width: 100%;
  margin-bottom: 2%;
  nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    ul {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      margin: 0;
      padding: 1.2rem 5rem;
      gap: 2rem;
      li img {
        width: 3.5rem;
        aspect-ratio: 16/9;
      }
      li a {
        font-weight: 400;
        text-decoration: none;
        transition: text-decoration 0.2s ease;
        font-family: "Poppins", sans-serif;
      }
      li {
        font-size: 0.95rem;
        flex: 1;
      }
      li:last-of-type img {
        width: 3rem;
      }
      a#contact-us {
        border: 0.06rem solid var(--color-orange);
        background-color: transparent;
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
        border-radius: 1rem;
        font-weight: 400;
        white-space: nowrap;
        transition: all 0.25s ease;
      }

      a#contact-us:hover {
        background-color: var(--color-orange);
        color: var(--color-cream);
      }
    }
  }
}
@media screen and (min-width: 768px) {
  header {
    width: 100%;
    margin-bottom: initial;
    padding: 0;
    nav {
      ul {
        padding: 1.2rem 10rem;
        margin: 0;
        gap: 3rem;

        /* Logo - stays on the left */
        li:nth-of-type(1) {
          flex: 0 0 auto;
          margin-right: auto;
          display: block;
        }

        /* About Us and Our Services - centered navigation */
        li:nth-of-type(2),
        li:nth-of-type(3) {
          flex: 0 0 auto;
          display: block;
        }

        /* Add extra gap after About Us */
        li:nth-of-type(2) {
          margin-right: 2rem;
        }

        /* Contact button - stays on the right */
        li:nth-of-type(4) {
          flex: 0 0 auto;
          margin-left: auto;
        }

        /* Hide hamburger on desktop */
        li:nth-of-type(5) {
          display: none;
        }

        li {
          font-size: 0.95rem;
        }

        li img {
          width: 3.5rem;
        }

        li a:not(#contact-us):hover {
          text-decoration: underline;
        }
      }
    }
  }
}