* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== First Carousel (12 slides) ===== */
.slider_hbanner {
  max-width: 900px;
  height: 400px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  background: #eee;
  position: relative;
}

.slides_hbanner {
  display: flex;
  width: 1200%; /* 12 slides */
  height: 100%;
  animation: slide_hbanner 48s linear infinite;
}

.slides_hbanner img {
  flex: 0 0 8.3333%; /* 1/12 */
  width: 100px;
  object-position: center;
  
}

.slider_hbanner:hover .slides_hbanner {
  animation-play-state: paused;
}

@keyframes slide_hbanner {
  0%, 5%       { transform: translateX(0%); }
  8%, 13%      { transform: translateX(-8.3333%); }
  16%, 21%     { transform: translateX(-16.6666%); }
  24%, 29%     { transform: translateX(-25%); }
  32%, 37%     { transform: translateX(-33.3333%); }
  40%, 45%     { transform: translateX(-41.6666%); }
  48%, 53%     { transform: translateX(-50%); }
  56%, 61%     { transform: translateX(-58.3333%); }
  64%, 69%     { transform: translateX(-66.6666%); }
  72%, 77%     { transform: translateX(-75%); }
  80%, 85%     { transform: translateX(-83.3333%); }
  88%, 100%    { transform: translateX(-91.6666%); }
}

/* ===== Second Carousel (15 slides) ===== */
.slider_hevent {
  width: 100%;             /* take full container width */
  max-width: 400px;        /* don’t exceed this size */
  aspect-ratio: 1 / 1;     /* force it to always be square */
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  background: #eee;
  position: relative;
}

.slides_hevent {
  display: flex;
  width: 1500%;            /* 15 slides */
  height: 100%;
  animation: slide_hevent 48s linear infinite;
}

.slides_hevent img {
  flex: 0 0 6.6667%;       /* 1/15 per image */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the square nicely */
}

.slider_hevent:hover .slides_hevent {
  animation-play-state: paused;
}

@keyframes slide_hevent {
  0%, 4%    { transform: translateX(0%); }
  6%, 10%   { transform: translateX(-6.6667%); }
  12%, 16%  { transform: translateX(-13.3333%); }
  18%, 22%  { transform: translateX(-20%); }
  24%, 28%  { transform: translateX(-26.6667%); }
  30%, 34%  { transform: translateX(-33.3333%); }
  36%, 40%  { transform: translateX(-40%); }
  42%, 46%  { transform: translateX(-46.6667%); }
  48%, 52%  { transform: translateX(-53.3333%); }
  54%, 58%  { transform: translateX(-60%); }
  60%, 64%  { transform: translateX(-66.6667%); }
  66%, 70%  { transform: translateX(-73.3333%); }
  72%, 76%  { transform: translateX(-80%); }
  78%, 82%  { transform: translateX(-86.6667%); }
  84%, 100% { transform: translateX(-93.3333%); }
}

body {
  font-family: Arial, sans-serif;
  background: #f8f9fa;
}

.carousel {
  max-width: 1000px;
  width: 100%;
  margin: 40px auto;
  overflow: hidden;
  background: white;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.carousel-item {
  min-width: 600px; /* same as carousel width */
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.carousel-item img {
  width: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

.carousel a {
  font-size: 15px;
  color: #007bff;
  text-decoration: none;
}

.carousel a:hover {
  text-decoration: underline;
}

/* Keyframes for continuous right-to-left scroll */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}