/* ==========================================
   1. CLIENT LOGOS CONTINUOUS MARQUEE
   ========================================== */
.clients-container-box {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.marquee-container {
    display: flex;
    width: max-content;
    /* Continuous infinite scroll animation */
    animation: scrollMarquee 20s linear infinite;
}

/* Pause animation when user hovers */
.marquee-container:hover {
    animation-play-state: paused;
}

.client-item {
    flex: 0 0 auto;
    padding: 10px 25px;
    font-weight: 600;
    font-size: 18px;
    color: #444;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Scrolls by half the width (since content is duplicated) */
        transform: translateX(-50%);
    }
}

/* ==========================================
   2. RESPONSIVE REVIEW CARDS SLIDER
   ========================================== */
.review-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 15px;

    /* Remove scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.review-slider::-webkit-scrollbar {
    display: none;
}

.review-item {
    flex: 0 0 100%; /* Mobile */
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .review-item {
        flex: 0 0 calc(50% - 10px); /* Tablet */
    }
}

@media (min-width: 1024px) {
    .review-item {
        flex: 0 0 calc(33.333% - 14px); /* Desktop */
    }
}

/* Container styling */
.services-slider-container {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 15px;

    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.services-slider-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Track layout */
.services-slider-track {
    display: flex;
    gap: 25px;
    width: max-content;
}

/* Card Sizing per breakpoint */
.service-slide-card {
    /* Mobile Default: 1 slide visible */
    flex: 0 0 280px;
    box-sizing: border-box;
}

/* Tablet (>= 640px): 2 slides visible */
@media (min-width: 640px) {
    .service-slide-card {
        flex: 0 0 320px;
    }
}

/* Desktop (>= 1024px): 5 slides visible */
@media (min-width: 1024px) {
    .service-slide-card {
        flex: 0 0 260px;
    }
}