.slider-container{margin:20px auto;max-width:800px;position:relative;border:1px solid #ccc;padding:20px;border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .1);background-color:#f9f9f9}.slider{position:relative;overflow:hidden}.slides{position:relative}.slide{position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity 0.5s ease-in-out}.slide.active{opacity:1;z-index:1}.slide:not(.active){z-index:0}.navigation{text-align:center;margin-top:15px}.dot{display:inline-block;width:20px;height:20px;margin:0 5px;background-color:#ccc;border-radius:50%;cursor:pointer;transition:background-color 0.3s ease}.dot.active{background-color:#007bff}