.slider {
            width: 100%;
            height: 220px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border-radius: 10px;
            margin: 10px;
        }
        .slides {
            width: 400%;
            height: 100%;
            display: flex;
            animation: slide 16s infinite;
        }
        .slide {
            width: 25%;
            height: 100%;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @keyframes slide {
            0% { transform: translateX(0); }
            20% { transform: translateX(0); }
            25% { transform: translateX(-25%); }
            45% { transform: translateX(-25%); }
            50% { transform: translateX(-50%); }
            70% { transform: translateX(-50%); }
            75% { transform: translateX(-75%); }
            95% { transform: translateX(-75%); }
            100% { transform: translateX(0); }
        }