.stories-carousel {
max-width: 900px;
margin: 0 auto;
position: relative;
overflow: hidden;
}


.story-card {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, transform 0.6s ease;
}


.story-card.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}


.carousel-dots {
text-align: center;
margin-top: 40px;
}


.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
margin: 0 6px;
border: none;
}


.carousel-dot.active {
background: #4a7c59;
width: 28px;
border-radius: 6px;
}