/* Navigation bar styles */
    nav {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    nav a {
      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border-radius: var(--border-radius);
      transition: var(--transition);
      position: relative;
    }
    nav a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 50%;
      background-color: var(--primary-color);
      transition: var(--transition);
      transform: translateX(-50%);
    }
    nav a:hover {
      color: var(--primary-color);
    }
    nav a:hover::after {
      width: 80%;
    }
    nav a.active {
      color: var(--primary-color);
    }
    nav a.active::after {
      width: 80%;
    }
    @media (max-width: 768px) {
      nav {
        gap: 0.75rem;
      }
      nav a {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
      }
    }