slider image and faq

<style>
    /* ===============================
   SECTION WRAPPER
=================================*/
    .derma-section6 {
        background: #ffffff;
        padding: 20px 20px;
    }

    .derma-container6 {
        /* max-width: 1280px; */
        margin: auto;
        display: flex;
        align-items: center;
        gap: 60px;
        /* flex-wrap: wrap; */
    }

    /* ===============================
   IMAGE SLIDER
=================================*/
    .derma-slider6 {
        flex: 1 1 50%;
        position: relative;
        overflow: hidden;
    }

    .slider-wrapper6 {
        display: flex;
        transition: transform 0.6s ease;
    }

    .slide6 {
        min-width: 100%;
        text-align: center;
    }

    .slide6 img {
        max-width: 100%;
        height: auto;
        max-height: 500px;
        object-fit: contain;
    }

    /* Dots */
    .slider-dots6 {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .slider-dots6 span {
        width: 8px;
        height: 8px;
        border: 1px solid #000;
        border-radius: 50%;
        cursor: pointer;
    }

    .slider-dots6 .active {
        background: #000;
    }

    /* ===============================
   CONTENT AREA
=================================*/
    .derma-content6 {
        flex: 1 1 50%;
    }

    .derma-title6 {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 30px;
        line-height: 1.4;
        letter-spacing: normal;
        font-style: normal;
        color: #18191f;
        font-family: 'GTStandard-M';
    }

    .derma-title6 span {
        color: #8C30F5;
    }

    /* ===============================
   FAQ TOGGLE
=================================*/
    .faq-item6 {
        border-top: 1px solid #eee;
    }

    .faq-question6 {
        width: 100%;
        padding: 14px 0;
        background: none;
        border: none;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 500;
        color: #18191F;
        letter-spacing: 0.35px;
        line-height: 1.56 !important;
    }

    .faq-question6:hover {
        background-color: #ffffff;
        color: #18191F;
    }

    .faq-question6 span {
        font-size: 20px;
        transition: 0.3s;
    }

    .faq-answer6 {
        max-height: 0;
        overflow: hidden;
        transition: 0.4s ease;
        font-size: 14px;
        color: #777;
    }

    .faq-answer6 p {
        /* padding-bottom: 20px; */
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #969bab;
    }

    .assurance-text6 {
        margin-top: 68px;
        font-size: 12px;
        font-weight: 800;
        line-height: 18px;
        text-align: right;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "liga" off;
        color: #969bab;
    }

    .faq-answer6 p a {
        color: #18191f;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: #18191f59;
        transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
    }

    .faq-answer6 p a:hover {
        text-decoration-color: #18191f;
    }

    /* ===============================
   RESPONSIVE
=================================*/
    @media (max-width: 900px) {
        .derma-container6 {
            flex-direction: column;
        }

        .derma-section6 {
            background: #ffffff;
            padding: 20px 0px;
        }

        .derma-title6 {
            font-size: 18px;
            text-align: center;
            line-height: 1.5;
        }

        .assurance-text6 {
            display: none;
        }
    }
</style>

<section class="derma-section6">
    <div class="derma-container6">

        <!-- IMAGE SLIDER -->
        <div class="derma-slider6">
            <div class="slider-wrapper6" id="sliderWrapper">
                <div class="slide6">
                    <img src="https://www.clinikally.com/cdn/shop/files/2000x1512_Foaming_Face_Wash.jpg" alt="">
                </div>
                <div class="slide6">
                    <img src="https://www.clinikally.com/cdn/shop/files/BottomCollection_ReGrow_ed36d514-4506-43ef-9423-c9594ae7d129.jpg"
                        alt="">
                </div>
                <div class="slide6">
                    <img src="https://www.clinikally.com/cdn/shop/files/Clinikally_-_Banner_2000_x_1512_px_1.jpg"
                        alt="">
                </div>
            </div>

            <div class="slider-dots6" id="sliderDots">
                <span class="active"></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <!-- CONTENT -->
        <div class="derma-content6">
            <h2 class="derma-title6">
                <span>India’s one-stop</span> dermatology destination.
            </h2>

            <div class="faq-item6">
                <button class="faq-question6">
                    How does Dermatikally work?
                    <span>+</span>
                </button>
                <div class="faq-answer6">
                    <p>Backed by leading dermatologists and cutting-edge science, Dermatikally's digital health platform
                        is making personalised skincare accessible to all. We craft treatment plans that will work for
                        you, and deliver them at your doorstep. Start an <a
                            href="https://www.clinikally.com/products/video-consult-with-a-skin-hair-specialist"
                            title="Video Consult with a Skin & Hair Specialist">online visit</a> - and enjoy
                        all your skin and hair-related needs at your fingertips!</p>
                </div>
            </div>

            <div class="faq-item6">
                <button class="faq-question6">
                    Why is skin & hair care important?
                    <span>+</span>
                </button>
                <div class="faq-answer6">
                    <p>While a healthy skincare routine is must, dermatology products contain pharmaceutical-grade
                        ingredients that penetrate deep within the skin or scalp and act at cellular level. Since they
                        do not require a prescription, using these safe & tested <a
                            href="https://www.clinikally.com/collections/all" title="all">products</a> will greatly
                        enhance the look & feel of your skin or hair, while also treating underlying conditions.</p>
                </div>
            </div>

            <div class="faq-item6">
                <button class="faq-question6">
                    How do skincare products help?
                    <span>+</span>
                </button>
                <div class="faq-answer6">
                    <p>Dermatological products have therapeutic action capable of affecting the skin, hair & scalp
                        positively with medical-grade ingredients. They are effective for long-lasting results, without
                        giving you the uncomfortable, sticky feel of medicines or makeup on your skin.</p>
                </div>
            </div>

            <div class="assurance-text6">
                OUR ASSURANCE: ALL OUR PRODUCTS ARE OF TOP GRADE QUALITY
            </div>
        </div>

    </div>
</section>

<script>
    /* ===============================
       IMAGE SLIDER
    =================================*/
    const slider = document.getElementById("sliderWrapper");
    const dots = document.querySelectorAll("#sliderDots span");

    let currentIndex = 0;
    let totalSlides = dots.length;

    function updateSlider(index) {
        slider.style.transform = "translateX(-" + index * 100 + "%)";
        dots.forEach(dot => dot.classList.remove("active"));
        dots[index].classList.add("active");
    }

    dots.forEach((dot, index) => {
        dot.addEventListener("click", () => {
            currentIndex = index;
            updateSlider(currentIndex);
        });
    });

    /* Auto Slide */
    setInterval(() => {
        currentIndex = (currentIndex + 1) % totalSlides;
        updateSlider(currentIndex);
    }, 4000);

    /* ===============================
       FAQ TOGGLE
    =================================*/
    document.querySelectorAll(".faq-question6").forEach(btn => {
        btn.addEventListener("click", function () {
            const answer = this.nextElementSibling;
            const icon = this.querySelector("span");

            document.querySelectorAll(".faq-answer6").forEach(a => {
                if (a !== answer) a.style.maxHeight = null;
            });

            document.querySelectorAll(".faq-question6 span").forEach(i => {
                if (i !== icon) i.textContent = "+";
            });

            if (answer.style.maxHeight) {
                answer.style.maxHeight = null;
                icon.textContent = "+";
            } else {
                answer.style.maxHeight = answer.scrollHeight + "px";
                icon.textContent = "−";
            }
        });
    });
</script>