/* Mobile specific styles for max-width 640px */
@media (max-width: 640px) and (max-height: 800px) {
  /* Reduce base font size */
  body {
    font-size: 14px;
  }

  /* Smaller headings */
  h1 {
    font-size: 1.75rem; /* ~28px */
  }
  h2 {
    font-size: 1.5rem; /* ~24px */
  }
  h3 {
    font-size: 1.25rem; /* ~20px */
  }
  h4 {
    font-size: 1.125rem; /* ~18px */
  }

  /* Reduce padding and margins globally */
  section, div, nav, main, footer {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Navbar adjustments */
  #navbar {
    height: 3.5rem; /* smaller navbar height */
  }
  #navbarLogo {
    height: 3rem !important;
  }
  #navbar-container {
    height: 3.5rem !important;
  }

  /* Buttons smaller */
  button, .button, .btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.875rem !important;
  }

  /* Hero section text smaller */
  .hero-content h1 {
    font-size: 2rem !important;
  }
  .hero-content .mt-10 {
    margin-top: 0.75rem !important;
  }

  /* Reduce spacing in feature cards */
  .feature-card {
    padding: 1rem !important;
  }
  .feature-card h3 {
    font-size: 1rem !important;
  }
  .feature-card p {
    font-size: 0.875rem !important;
  }

  /* Reduce modal sizes */
  .modal-content {
    max-width: 90% !important;
    padding: 1rem !important;
  }

  /* Footer text smaller */
  footer p, footer a {
    font-size: 0.75rem !important;
  }

  /* Images smaller */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reduce grid gaps */
  .grid {
    gap: 0.5rem !important;
  }

  /* Adjust margins for team section */
  #Founder .grid > div {
    margin-bottom: 1rem !important;
  }

  /* Mobile menu slide animation */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  #mobile-menu.open {
    max-height: 1000px; /* increased to show all menu items */
    transition: max-height 0.5s ease-in;
  }

  /* Add vertical spacing to mobile menu links */
  #mobile-menu .mobile-link {
    display: block;
    margin-bottom: 0.75rem;
  }

  /* Milestones section smaller */
  .highlights-horizontal {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
  .highlights-horizontal > div {
    padding: 0.75rem !important;
    max-width: 14rem !important;
  }
  .highlights-horizontal h3 {
    font-size: 1rem !important;
  }
}