@charset "utf-8";
/* CSS Document */

/* Wrapper to contain the marquee and add styling */
        .marquee-wrapper {
            width: 100%;
            max-width: 100%; /* Max width for the entire marquee display */
            margin: 20px auto;
            background-color: #ffffff;
            padding: 20px 0;
            /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            */border-radius: 8px;
        }

        /* Container that acts as the visible window for the marquee content */
        .marquee-container {
            overflow: hidden; /* This hides the content that scrolls out of view */
        }

        /* Container for the actual scrolling content (the duplicated logos) */
        .marquee-content {
            display: flex; /* Makes sure images are in a row */
            white-space: nowrap; /* Ensures images stay on a single line */
            width: max-content; /* Critical: This makes the div wide enough to contain all its children */
            /* This element will be wider than its parent (.marquee-container) due to its children */
            animation: scroll-left 40s linear infinite; /* Apply animation here */
            /* The animation duration (40s) can be adjusted to control speed */
        }

        /* Pause animation on hover for a better user experience */
        .marquee-content:hover {
            animation-play-state: paused;
        }

        /* Styling for individual logo images */
        .marquee-content img {
            height: 250px; /* Fixed height for logos */
            margin: 0 30px; /* Space between logos */
            flex-shrink: 0; /* Prevent logos from shrinking (important for flex containers) */
            object-fit: contain; /* Ensure the entire logo is visible within its dimensions */
            display: block; /* Remove extra space below image */
            opacity: 0.8; /* Slightly desaturate logos for a softer look */
            transition: opacity 0.3s ease; /* Smooth transition for hover effect */
			border-radius: 16px;
        }

        /* Full opacity on hover for logos */
        .marquee-content img:hover {
            opacity: 1;
        }

        /* Keyframe animation for continuous left scrolling */
        @keyframes scroll-left {
            0% {
                transform: translateX(0%); /* Start at original position */
            }
            100% {
                /* Move the content by exactly 50% of its own width.
                   Since .marquee-content contains two sets of logos, this moves one complete set out of view,
                   bringing the second set into position seamlessly. */
                transform: translateX(-50%);
            }
        }

        /* Responsive adjustments for smaller screens */
        @media screen and (max-width: 768px) {
            .marquee-content img {
                height: 250px; /* Smaller logos on tablets */
                margin: 0 20px;
            }
            .marquee-wrapper {
                padding: 15px 0;
            }
        }

        @media screen and (max-width: 480px) {
            .marquee-content img {
                height: 240px; /* Even smaller logos on mobile */
                margin: 0 15px;
            }
            .marquee-wrapper {
                padding: 10px 0;
            }
        }