/* General Styling */
.client-list { 
    display: flex;
    overflow-x: auto; /* Enable horizontal scroll on large screens */
    white-space: nowrap; /* Prevent wrapping of items */
    background-color: #1abc9c;
    color: white;
    padding: 15px;
    margin-top: 30px;
    align-items: center;
    width: 100%; /* Make sure it uses the full width of its parent */
    box-sizing: border-box; /* Prevent padding from causing overflow */
    max-width: 100%; /* Prevent overflow beyond screen width */
}

/* Styling for client items (text) */
.client-list span {
    display: inline-block;
    margin-right: 50px;
    font-size: 1.5rem;
    animation: moveClients 20s linear infinite;
}

/* Media query for mobile screens (including iPad Air) */
@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden; /* Disable overflow on body/html */
    }

    .client-list {
        display: block; /* Stack items vertically */
        overflow-y: scroll; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
        height: 300px; /* Set height for scrollable container */
        padding: 10px 0; /* Adjust padding */
        margin-top: 20px; /* Add some space at the top */
        white-space: normal; /* Allow wrapping of items */
        max-width: 100%; /* Prevent horizontal overflow */
    }

    .client-list span {
        display: block; /* Ensure each item takes up its own line */
        font-size: 1.2rem; /* Adjust font size for mobile */
        margin-bottom: 15px; /* Add space between items vertically */
        margin-right: 0; /* Remove horizontal margin */
        text-align: center; /* Optional: Center text */
        animation: moveClientsVertical 10s linear infinite; /* Vertical scroll animation */
    }
}

/* Keyframe animation for scrolling from bottom to top on mobile */
@keyframes moveClientsVertical {
    from {
        transform: translateY(100%); /* Start from the bottom */
    }
    to {
        transform: translateY(-100%); /* Move to the top */
    }
}

/* For larger screens (above 768px) - Horizontal scrolling */
@media screen and (min-width: 769px) {
    .client-list {
        display: flex;
        overflow-x: auto; /* Horizontal scrolling */
        white-space: nowrap; /* Prevent wrapping */
        height: auto; /* Allow normal height */
        padding: 15px; /* Padding for larger screens */
        max-width: 100%; /* Ensure no overflow beyond screen width */
    }

    .client-list span {
        display: inline-block; /* Keep items in a row */
        margin-right: 50px; /* Adjust space between items */
        animation: moveClients 20s linear infinite; /* Horizontal scroll animation */
    }
}

/* Keyframe animation for horizontal scroll on large screens */
@keyframes moveClients {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}