.carousel-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 600px;
      margin: auto;
    }

    .carousel-wrapper {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .carousel-wrapper img {
      width: 100%;
      height: auto;
      flex-shrink: 0;
      border-radius: 8px;
    }

    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
    }

    .carousel-arrow.left {
      left: 10px;
    }

    .carousel-arrow.right {
      right: 10px;
    }

    @media (max-width: 768px) {
      .carousel-arrow {
        padding: 6px 10px;
      }
    }