.slider-container {
 max-width: 600px;
 width: 100%;
 background-color: white;
 border-radius: 8px;
 overflow: hidden;
}

.slider-wrapper {
 position: relative;
 width: 100%;
 padding-bottom: 60vh;
}

.slider-inner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 transition: transform 0.5s ease-in-out;
}

.slide {
 min-width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: stretch;
 background-color: #e0e0e0;
 gap: 8px;
 padding: 24px 0;
}

.slide img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 border-radius: 0;
 border: 0;
}

.slide p {
}

.slide-number {
 position: absolute;
 top: 10px;
 right: 10px;
 background-color: rgba(0, 0, 0, 0.6);
 color: white;
 padding: 5px 10px;
 border-radius: 4px;
 font-size: 14px;
 z-index: 10;
}

.controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 20px;
 background-color: #f9f9f9;
}

button {
 background-color: #007bff;
 color: white;
 border: none;
 padding: 8px 16px;
 border-radius: 4px;
 cursor: pointer;
 font-size: 14px;
 transition: background-color 0.3s;
}

button:hover {
 background-color: #0056b3;
}

button:active {
 transform: scale(0.98);
}

.dots {
 display: flex;
 gap: 8px;
 justify-content: center;
 flex: 1;
}

.dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: #ccc;
 cursor: pointer;
 transition: background-color 0.3s;
}

.dot.active {
 background-color: #007bff;
}