@keyframes slideEffect {
    0% { transform: translateX(0); }
    25% { transform: translateX(-25%); }
    50% { transform: translateX(-50%); }
    75% { transform: translateX(-75%); }
    100% { transform: translateX(-100%); }
}

/* Slider Container */
.slider-container {
    background: linear-gradient(135deg, #ffffff, #e6e6e6); /* Subtle gradient */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}

/* Hover Effect for Slider Container */
.slider-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Swiper Wrapper */
.swiper-wrapper {
    display: flex;
    animation: slideEffect 60s linear infinite;
    width: max-content; /* Adjust based on content size */
    gap: 20px; /* Spacing between images */
}

/* Pause Animation on Hover */
.slider-container:hover .swiper-wrapper {
    animation-play-state: paused; /* Pause the animation */
}

/* Image Styling */
.swiper-slide img {
    width: 100%; /* Make images flexible */
    max-width: 350px;
    height: auto; /* Keep aspect ratio */
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}

.swiper-slide img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Small Screens (Responsive Adjustments) */
@media (max-width: 768px) {
    .swiper-slide img {
        max-width: 250px; /* Reduce image size for smaller screens */
    }
}

@media (max-width: 576px) {
    .swiper-slide img {
        max-width: 200px; /* Further reduce for very small screens */
    }
}

@media (max-width: 375px) {
    .swiper-slide img {
        max-width: 1000px !important; /* Ensure proper fit for compact devices */
        max-height: auto;
    }

    .swiper-wrapper {
        gap: 5px; /* Reduce spacing between images */
    }

    .slider-container {
        padding: 5px; /* Compact padding for smaller viewports */
    }
}