/* --- Media Queries for Responsiveness --- */

/* For screens smaller than 768px (typical tablets and mobiles) */
@media (max-width: 768px) {
    nav {
      flex-direction: column; /* Stack navigation items vertically */
      align-items: center; /* Center items horizontally */
      font-size: 1rem; /* Slightly smaller font size for navigation */
      margin-top: 1em; /* Reduce top margin */
      gap: 0.5em; /* Add some space between stacked nav items */
    }
  
    #navItems ul {
      flex-direction: column; /* Stack individual nav links vertically */
      align-items: center; /* Center individual nav links */
      width: 100%; /* Take full width */
      margin-top: 1em;
    }
  
    #navItems ul li {
      margin: 10px 0; /* Adjust vertical margin for stacked links */
    }
  
    #loginNavBtn {
      margin-top: 1.5em; /* Adjust margin for stacked button */
    }
  
    h1 {
      font-size: 2rem; /* Smaller heading for mobile */
    }
  
    .mid {
      margin-top: 3em; /* Reduce top margin for mid section */
      font-size: 1.2em; /* Smaller font size for mid section */
      padding: 0 1em; /* Add horizontal padding to prevent content from touching edges */
    }
  
    #btn span {
      padding: 0.6em 1em 0.6em 0.9em; /* Smaller padding for button text */
    }
  }
  
  /* For screens smaller than 480px (extra small mobiles) */
  @media (max-width: 480px) {
    h1 {
      font-size: 1.8rem; /* Even smaller heading for very small screens */
    }
  
    .mid {
      font-size: 1em; /* Even smaller font for mid section */
    }
    
    /* You might need more specific adjustments here depending on your content structure */
  }