section.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.slider-container {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar for IE/Edge */
}

.slider-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome/Safari */
}

.slider-track {
    display: flex;
    align-items: center;
    gap: 50px;
}


.slide-card {
    flex: 0 0 260px;
    /* Base slide width */
    scroll-snap-align: center;
    padding: 6px;

    border-radius: 18px;
    background-color: #dedbd6;
    transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    min-height: 145px;
    /* height: fit-content; */
    transition: .2s;
}

.slide-card div {
    border: 3px solid var(--secondary);
    background-color: #dedbd6;
    border-radius: 18px;
    height: 100%;
    padding: 15px;
}

.slide-card div .author {
    color: var(--primary);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background: var(--luxury-gold);
    color: var(--primary);
    border: none;
    width: 40px;
    height: 40px;

    cursor: pointer;
    font-size: 18px;
}

.slider-btn {
    transition: 0.3s;
}

.slider-btn:hover {
    width: 35px;
    height: 35px;
}

/* Adjust button placement for RTL context */
.slider-wrapper[dir="rtl"] .prev-btn {
    right: 0;
    border-radius: 0 10px 10px 0;
}

.slider-wrapper .next-btn img, .slider-wrapper .prev-btn img{
    width: 100%;
}
/* .slider-wrapper[dir="rtl"] .prev-btn img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 100%;
} */

.slider-wrapper[dir="rtl"] .next-btn {
    left: 0;
    border-radius: 10px 0 0 10px;
}

.slider-wrapper[dir="ltr"] .prev-btn {
    left: 0;
    border-radius: 10px 0 0 10px;
}


.slider-wrapper[dir="ltr"] .next-btn {
    right: 0;
    border-radius: 0 10px 10px 0;
}

.slider-wrapper[dir="ltr"] .next-btn img, .slider-wrapper[dir="rtl"] .prev-btn img  {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 100%;
}