/* Responsive Styles */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .hero-content h1 {
    font-size: 3.5rem;
  }
  
  .hero-buttons {
    flex-direction: row;
  }
  
  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .products-grid-type {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

 
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-6);
  }
  
  .navbar-logo img {
    height: 5rem;
  }
  
  .hero-content h1 {
    font-size: 4rem;
  }
  
  .section-header h2 {
    font-size: 3rem;
  }
  
  .about-content {
    flex-direction: row;
  }
  
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid  {
    grid-template-columns: repeat(2, 1fr);
  }
  .products-grid-type {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .navbar .container {
    padding: 0 var(--spacing-8);
  }
  
  .hero-content h1 {
    font-size: 4.5rem;
  }
  
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .products-grid-type {
    grid-template-columns: repeat(3, 1fr);
  }

 
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--spacing-8);
  }
  
  .hero-content h1 {
    font-size: 5rem;
  }
}

/* Show/hide elements based on screen size */
@media (max-width: 767.98px) {
  .navbar-nav {
    display: none;
  }
  
  .navbar-toggle {
    display: block;
  }
  .bag-icon {
    margin-top: 200px;
  }
}

@media (max-width: 768px) {
  .carousel-track {
    flex-wrap: wrap; /* Allow wrapping for two rows */
    animation: none; /* Disable animation for better layout */
    justify-content: center; /* Center items */
  }

  .linear-carousel {
    width: 100%;
  }

  .client-item {
    flex: 0 0 calc(50% - 2rem); /* Two items per row */
    margin-bottom: 1rem;
  }

  .logo-container {
    height: 100px;
  }

  .client-logo {
    max-height: 60px;
  }
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}