.slider-container {
            position: relative;
            max-width: 100%;
            overflow: hidden;
            margin: auto;
        }

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

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

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 30px;
            display: none;
        }

            .controls button {
                background-color: #03a84e;
                color: #fff;
                border: none;
                padding: 8px 14px;
                border-radius: 50%;
                font-size: 20px;
                cursor: pointer;
                height: 40px;
                width: 40px;
                line-height: 20px;
            }

        .dots {
            display: flex;
            gap: 8px;
        }

            .dots span {
                height: 10px;
                width: 10px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
                cursor: pointer;
            }

            .dots .active {
                background-color: #333;
            }