.carousel-container {
      width: 100%;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .carousel {
      display: flex;
      width: max-content;
    }

    .carousel-item {
      width: 200px;  
      margin-right: 10px;
      text-align: center;
    }

    .carousel img {
      width: 100%;   
      height: 150px;  
      object-fit: cover;
    }

    .caption {
      margin-top: 8px;
      font-size: 14px;
      color: #333;
      background: #fff;
      padding: 5px;
      border-radius: 5px;
    }

    .scroll-left {
      animation: scrollLeft 20s linear infinite;
    }

    @keyframes scrollLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .scroll-right {
      animation: scrollRight 20s linear infinite;
    }

    @keyframes scrollRight {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0);
      }
    }