.slider-section-a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    perspective: 1000px;
}

/* Slider and image styling */
.slider {
    width: 240px;
    height: 480px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.slider picture {
    position: absolute;
    width: 240px;
    height: 100%;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.slider picture img {
    width: 240px;
    height: 100%;
    object-fit: cover;
    box-shadow: 10px 10px 20px 0 rgba(94, 47, 59, 0.2);
}

.slider picture.active {
    opacity: 1;
    transform: translateX(0px) scale(1);
    z-index: 2;
}

.slider picture.left {
    opacity: 0.6;
    transform: translateX(-140px) scale(0.85);
    /* no rotation */
    z-index: 1;
}

.slider picture.right {
    opacity: 0.6;
    transform: translateX(140px) scale(0.85);
    /* no rotation */
    z-index: 1;
}

/* Navigation arrows styling using existing HTML structure */
.slider-nav {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.slider-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
    /* Adds space between the arrow buttons */
    align-items: center;
}

.slider-nav li {
    /* Center each list item */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style the buttons inside nav */
.slider-nav button {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #3c376f;
    padding: 20px 5px;
    /* Retaining your original padding if desired */
}

.slider-nav button span {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Hover effects for arrow movement */
.slider-nav .previous:hover span {
    transform: translateX(-10px) scale(1.2);
}

.slider-nav .next:hover span {
    transform: translateX(10px) scale(1.2);
}

.slider-nav button:focus,
.slider-nav button:active {
    outline: none !important;
    border: none !important;
}

/* Optional: Ensure focus-visible state doesn't show borders */
.slider-nav button:focus-visible {
    outline: none !important;
    border: none !important;
}


.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* Adjust spacing as needed */
    gap: 10px;
    /* Space between the dots */
}

.slider-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #bbd5f3;
    /* Inactive dot color */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-dots span.active {
    background-color: #1b73d8;
    /* Active dot color */
}

/* Fade-in animation for images */
@keyframes fadeImg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container-feature-section-slider {
        flex: 0 0 100% !important;;
        max-width: 100% !important;;
        padding: 20px;
    }

    .slider-section-a {
        padding: 20px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .slider {
        margin: 0 auto;
        /* This ensures horizontal centering */
        width: 240px;
        height: 480px;
    }

    .slider picture {
        opacity: 0;
        transform: scale(0.8);
    }

    .slider picture.active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }

    .slider picture.left,
    .slider picture.right {
        display: none;
        /* Hide side images */
    }

    .slider-nav {
        margin-top: 10px;
    }

    .slider-nav button {
        font-size: 1.5rem;
        padding: 10px;
    }

    .slider-dots {
        margin-top: 10px;
        gap: 6px;
    }

    .slider-dots span {
        width: 6px;
        height: 6px;
    }
}