How to adjust the navigation dots of the slides widget of Elementor to text with CSS & JavaScript

<script>
document.addEventListener("DOMContentLoaded", function () {
    function activateSlideOnHover() {
        document.querySelectorAll(".elementor-swiper").forEach((sliderWidget) => {
            // Get the Swiper instance directly
            let swiperContainer = sliderWidget.querySelector(".swiper");
            let swiperInstance = swiperContainer?.swiper;

            if (!swiperInstance) {
                console.warn("Swiper instance not found, retrying...");
                setTimeout(activateSlideOnHover, 500); // Retry after 500ms
                return;
            }

            let dots = sliderWidget.querySelectorAll(".swiper-pagination-bullet");

            if (dots.length === 0) {
                console.warn("No pagination bullets found!");
                return;
            }

            dots.forEach((dot, index) => {
                dot.addEventListener("mouseenter", () => {
                    // Trigger the slide to the correct index when hovering over the dots
                    swiperInstance.slideTo(index);
                });
            });

            console.log("Hover effect attached to dots.");
        });
    }

    setTimeout(activateSlideOnHover, 1500); // Delay to ensure Elementor initializes Swiper
});
</script>

.swiper-pagination-bullet {
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 150px 0px;
    font-size: 3.5rem;
    color:#FCFCFC;
    font-family: "Boldonse", system-ui;
    font-weight: 900;
    font-style: normal;
}

.swiper-pagination-bullet:nth-child(1)::before { content: "Lights"; }
.swiper-pagination-bullet:nth-child(2)::before { content: "Visuals"; }
.swiper-pagination-bullet:nth-child(3)::before { content: "Hospitality Space"; }
.swiper-pagination-bullet:nth-child(4)::before { content: "Event & Congress"; }


.swiper-pagination-bullet {
    cursor: pointer;
    transition: transform 0.3s ease;
}