#carousel {
  scrollbar-width: none; 
  -ms-overflow-style: none;  /* IE and Edge */
}

#carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

@media (max-width: 1024px) {
  #carousel {
    overflow-x: auto; /* Enable scrolling on small screens */
    gap: 1rem; /* Adjust gap if needed */
    scroll-snap-type: x mandatory; /* Optional: makes it snap like carousel */
  }

  .carousel-card {
    flex: 0 0 80%; /* Show 1 card mostly on smaller screens */
    scroll-snap-align: start; /* Optional for snap effect */
  }
}

@media (max-width: 768px) {
  .carousel-card {
    flex: 0 0 90%; /* Even bigger card on very small screens */
  }
}