.slider-container {
                position: relative;
                width: 600px;
                overflow: hidden;
            }

            .slider {
                display: flex;
                transition: transform 0.5s ease-in-out;
            }

            .slide {
                min-width: 100%;
                text-align: center;
            }

            .slide img {
                width: 100%;
                height: auto;
            }

            .prev, .next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background-color: rgba(0, 0, 0, 0.5);
                color: white;
                border: none;
                padding: 10px 15px;
                cursor: pointer;
            }

            .prev {
                left: 0;
            }

            .next {
                right: 0;
            }

            .dots-container {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
            }

            .dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, 0.3);
                margin: 0 5px;
                cursor: pointer;
            }

            .dot.active {
                background-color: rgba(0, 0, 0, 0.8);
            }

            @media (max-width: 600px) {
                .slider-container {
                    width: 100%;
                }

                .prev, .next {
                    font-size: 1.2em;
                }
            }