/* Carousel CSS for the carousel component used in the website. 
It defines the layout, styling, and behavior of the carousel, 
including the buttons and wrapper. */

.carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 1rem;
  transition: transform 0.2s ease;
}

.carousel-btn:hover {
  transform: scale(1.2);
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}