/* Marquee container style */
.marquee {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap; /* Ensure text/image stays on a single line */
    width: 180px; /* Restrict the width to 380px */
    animation: marquee 100s linear infinite alternate; /* `alternate` for back-and-forth effect */
}

/* Pause animation on hover */
.marquee:hover {
    animation-play-state: paused;
}

/* Marquee keyframes animation */
@keyframes marquee {
    0% { transform: translateX(100%); } /* Start from the right */
    50% { transform: translateX(-100%); } /* Move to the left */
    100% { transform: translateX(100%); } /* Move back to the right */
}

/* Responsive Design */
@media (max-width: 180px) {
    .marquee {
        font-size: 14px; /* Adjust font size for smaller screens */
    }
}

/* Customizable Speed */
:root {
    --marquee-speed: 30s;
}

/* Apply the customizable speed to marquee */
.marquee {
    animation: marquee var(--marquee-speed) linear infinite alternate;
}

/* Styling for images inside the marquee */
.marquee img {
    margin-right: 20px;
    animation: resize-image 5s alternate infinite;
}

/* Optional: Define a custom resize-image animation */
@keyframes resize-image {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}