/* Viewport = the visible window */
.carousel {
  position: relative;
  overflow: hidden;     /* hides off-screen slides */
  width: 100%;
  max-width: 800px;     /* pick a size you like */
  margin: 1.5rem auto;
  border-radius: 30px;
}

/* Long strip that moves left/right */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Each slide must equal the viewport width */
.carousel-track img {
  flex: 0 0 100%;       /* <- the crucial line */
  width: 100%;
  height: auto;
  display: block;       /* removes baseline gap */
}

/* Buttons */
.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 999px;
  font-size: 18px;
}
.prev { left: 10px; }
.next { right: 10px; }
.carousel button:disabled { opacity: 0.4; cursor: default; }

.sidebar-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;   /* optional: circular melon */
  object-fit: cover;
  transition: transform 0.2s ease;
}

.sidebar-icon:hover {
  transform: scale(1.1) rotate(5deg);
}