/* Adjusted media queries for improved responsiveness */

/* Medium screens - Tablets and small laptops (768px to 1024px) */
@media (max-width: 1024px) {
    .header {
      text-align: center;
      padding: 15px 0;
    }
  
    .nav-links {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
  
    .hero {
      height: auto;
      padding: 40px 20px;
    }
  
    .hero-content h2 {
      font-size: 2rem;
    }
  
    .hero-content p {
      font-size: 1.2rem;
    }
  
    .products-section .product-item {
      max-width: 48%; /* Allow for two columns */
    }
  
    .footer-container {
      justify-content: center;
      gap: 20px;
    }
  
    .footer-info, .footer-links, .footer-extra, .footer-social {
      min-width: 45%; /* Split into two columns */
    }
  }
  
  /* Small screens - Phones (481px to 767px) */
  @media (max-width: 768px) {
    .header {
      flex-direction: column;
    }
  
    .hero {
      height: auto;
      padding: 20px;
    }
  
    .hero-content h2 {
      font-size: 1.8rem; /* Adjusted for readability on small screens */
    }
  
    .hero-content p {
      font-size: 1rem;
    }
  
    .products-section .product-item {
      max-width: 100%; /* Stack items vertically */
      margin-bottom: 20px;
    }
  
    .footer-container {
      flex-direction: column;
      align-items: center;
    }
  
    .footer-info, .footer-links, .footer-extra, .footer-social {
      min-width: 100%; /* Make items stack */
      max-width: 100%;
    }
  }
  
  /* Very small screens - Phones 480px or smaller */
  @media (max-width: 480px) {
    body {
      font-size: 14px; /* Adjust base font size for readability */
    }
  
    .nav {
      display: none; /* Hide the navigation (recommend replacing with a hamburger menu) */
    }
  
    .hero-content h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }
  
    .hero-content p {
      font-size: 0.9rem;
    }
  
    .hero .btn-primary {
      padding: 8px 16px;
    }
  
    .footer h4 {
      font-size: 1rem;
    }
  
    .footer-container {
      text-align: center;
      gap: 15px;
    }
  
    .newsletter-form input {
      width: 100%; /* Input field spans full width */
      margin-bottom: 10px; /* Add spacing */
    }
  
    .newsletter-form button {
      width: 100%; /* Button spans full width */
    }
  }