/* Renamed from .logo-slider-container */
        .greycrust-c1 {
            /* Define the visible window for the logos */
            width: 100%;
            overflow: hidden;
            padding: 30px 0;
            position: relative;
            background-color: #ffffff;
        }

        /* Renamed from .logo-slider-track */
        .greycrust-c2 {
            /* Flexbox layout to align logos horizontally */
            display: flex;
            white-space: nowrap;
            /* Initial animation setup: runs the 'slide' animation infinitely */
            animation: slide 30s linear infinite;
        }

        /* Renamed from .logo-item */
        .greycrust-c3 {
            /* Make sure each logo takes up the space it needs */
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px; /* Base height */
            padding: 0 20px; /* Spacing between logos */
            width: 150px; /* Base width */
        }

        .greycrust-c3 img {
            /* Styling for the actual logo images */
            max-width: 100%;
            max-height: 100%;
            opacity: 1; /* Muted opacity like the image */
            transition: opacity 0.3s;
        }

        .greycrust-c3 img:hover {
            opacity: 1; /* Full opacity on hover */
        }

        /* --- Keyframes for the Infinite Slide Animation --- */
        @keyframes slide {
            100% {
                transform: translateX(-50%);
            }
        }

        /* Pause animation on hover - uses the new track class */
        .greycrust-c2:hover {
            animation-play-state: paused;
        }

        /* --- Responsive Design: 6 Media Queries (Uses new classes) --- */

        /* 1. Extra Large Screens */
        @media (min-width: 1600px) {
            .greycrust-c2 {
                animation-duration: 45s;
            }
            .greycrust-c3 {
                width: 250px;
                height: 220px;
            }
        }

        /* 2. Large Screens */
        @media (min-width: 1200px) and (max-width: 1599px) {
            .greycrust-c2 {
                animation-duration: 35s;
            }
            .greycrust-c3 {
                width: 280px;
                height: 280px;
            }
        }

        /* 3. Medium Screens */
        @media (min-width: 992px) and (max-width: 1199px) {
            .greycrust-c2 {
                animation-duration: 30s;
            }
            .greycrust-c3 {
                width: 180px;
                height: 170px;
            }
        }

        /* 4. Small Screens (Tablets - Landscape) */
        @media (min-width: 768px) and (max-width: 991px) {
            .greycrust-c2 {
                animation-duration: 25s;
            }
            .greycrust-c3 {
                width: 150px;
                height: 150px;
                padding: 0 15px;
            }
        }

        /* 5. Extra Small Screens (Large Phones - Landscape) */
        @media (min-width: 576px) and (max-width: 767px) {
            .greycrust-c2 {
                animation-duration: 20s;
            }
            .greycrust-c3 {
                width: 120px;
                height: 120px;
                padding: 0 10px;
            }
        }

        /* 6. Mobile Devices (Portrait) */
        @media (max-width: 575px) {
            .greycrust-c1 {
                padding: 20px 0;
            }
            .greycrust-c2 {
                animation-duration: 15s;
            }
            .greycrust-c3 {
                width: 150px;
                height: 150px;
                padding: 0 5px;
            }
        }