.marquee-text {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.marquee-text.fade::before,
.marquee-text.fade::after {
    width: 20%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
    content: '';
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
}

.marquee-text.fade::after {
    left: unset;
    right: 0; 
    background: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}

@media screen and (min-width: 768px) {
    .marquee-text.fade::before,
    .marquee-text.fade::after {
        width: 10%;	
    }
}

.marquee-text .swiper-wrapper {
    display: flex;
    align-items: center;
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    height: 100%;
}

.marquee-text .swiper-slide {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.marquee-text .text-style {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding: 0 20px;
    line-height: 1.2;
}