.logo-item {
display: inline-block;
margin: 10px 10px 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #f9f9f9;
text-align: center;
}
.logo-item img {
display: block;
margin-bottom: 10px;
max-height: 60px;
width: auto;
}
#logo-container {
margin-bottom: 15px;
}
.preview-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
} .client-slider-wrapper {
position: relative;
width: 100%;
padding: 20px 0;
margin: 20px 0;
}
.client-slider-wrapper::before,
.client-slider-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 15%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.client-slider-wrapper::before {
left: 0;
background: linear-gradient(to right, rgba(250, 250, 247, 1) 0%, rgba(250, 250, 247, 0) 100%);
}
.client-slider-wrapper::after {
right: 0;
background: linear-gradient(to left, rgba(250, 250, 247, 1) 0%, rgba(250, 250, 247, 0) 100%);
}
.client-slider-container {
overflow: hidden;
width: 100%;
background-color: transparent;
}
.client-slider {
position: relative;
}
.client-slider-track {
display: flex;
animation: scroll 60s linear infinite;
}
.client-slide {
flex-shrink: 0;
width: 160px;
margin: 0 30px;
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
max-width: 100%;
max-height: 100px;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
transform: scale(1.1);
}
.client-logo:hover {
transform: scale(1.15);
}
.client-slider-track:hover {
animation-play-state: paused;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-220px * var(--logo-count, 8)));
}
} @media (max-width: 768px) {
.client-slide {
width: 130px;
margin: 0 20px;
}
.client-logo {
max-height: 85px;
transform: scale(1.05);
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-170px * var(--logo-count, 8)));
}
}
.client-slider-wrapper::before,
.client-slider-wrapper::after {
width: 20%;
}
}