.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(243, 233, 220, 0.95);
  z-index: 1000;
  
  .headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin-inline: auto;

    .logo {
      font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
      font-weight: 500;
      color: #1B4B33;
    }

    .navMenu {
      display: flex;
      gap: 2rem;

      .navItem {
        font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem);
        transition: color 0.3s ease;

        &:hover {
          color: #1B4B33;
        }
      }
    }

    .hamburger {
      display: none;
      cursor: pointer;
      width: 30px;
      height: 24px;
      position: relative;
      background: none;
      border: none;
      padding: 0;

      span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #1B4B33;
        border-radius: 2px;
        transition: all 0.3s ease;

        &:first-child {
          top: 0;
        }

        &:nth-child(2) {
          top: 50%;
          transform: translateY(-50%);
        }

        &:last-child {
          bottom: 0;
        }
      }

      &.active {
        span {
          &:first-child {
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
          }

          &:nth-child(2) {
            opacity: 0;
          }

          &:last-child {
            bottom: 50%;
            transform: translateY(50%) rotate(-45deg);
          }
        }
      }
    }
  }
}

.mobileMenu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(243, 233, 220, 0.98);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  &.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
  }

  .mobileNavMenu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;

    .navItem {
      font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
  }

  &.active .mobileNavMenu .navItem {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
}

@media (width < 768px) {
  .header {
    .headerContainer {
      padding: 1rem;

      .navMenu {
        display: none;
      }

      .hamburger {
        display: block;
        z-index: 1001;
      }
    }
  }
}