.slider-wrapper {
    width: 1100px;
    overflow: hidden; /* to hide the images outside the viewport */
    position: relative;
}

.bodyp {
  font-family: Futura-Medium; 
}

.slider-wrapper::before, .slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;  /* Adjust this width to control the fade effect's size */
    pointer-events: none; /* Ensures that the gradient doesn't interfere with any mouse events like clicking */
    z-index: 10;
}

.slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}



/* Responsive adjustments */
@media (max-width: 1100px) {
    .slider-wrapper {
        width: 100%;
    }

    .circle-image {
        width: calc(100% / 13 - 15px);  /* 13 is roughly the number of images that would fit in 1100px width */
        height: auto;
    }
}

.slider-inner {
    white-space: nowrap;
    animation: slide 100s linear infinite;
}

.circle-image {
    width: 85px;
    height: 85px;
    display: inline-block;
    margin-right:15px;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-7735px); /* 91 images * 85px - (1100px/85px images) * 85px */
    }
}