/* Responsive Adjustments */

@media (max-width: 1023px) {
  .header-container {
    padding: var(--spacing-4) 0;
  }

  /* Mobile Menu Button */
  .mobile-menu-btn {
    display: block;
    padding: var(--spacing-2);
    font-size: var(--text-2xl);
    color: var(--color-text);
  }
}


@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }

  .nav-mobile {
    display: none;
  }
}

/* Typography scaling for smaller screens */
@media (max-width: 767px) {
  section {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }

  .card {
    padding: var(--spacing-4);
  }

  .project-content {
    padding: var(--spacing-4);
  }
}