Highlight section

<style>

.c1, .c2, .c3{
    position: relative;
}

.c1::before,
.c2::before,
.c3::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: red;
    visibility: hidden;
}


.c1.active::before,
.c2.active::before,
.c3.active::before{
    visibility: visible;
}
    
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hotspots = document.querySelectorAll('.elementor-repeater-item-c7c397a, .elementor-repeater-item-7f0abb1, .elementor-repeater-item-694f4b2');
        const columns = document.querySelectorAll('.c1, .c2, .c3');
        
        // Function to handle the active state
        function activateElement(index) {
            columns.forEach(column => column.classList.remove('active'));
            hotspots.forEach(hs => hs.classList.remove('active'));
            columns[index].classList.add('active');
            hotspots[index].classList.add('active');
        }

        // Add click event listeners to hotspots
        hotspots.forEach((hotspot, index) => {
            hotspot.addEventListener('click', function() {
                activateElement(index);
            });
        });

        // Add click event listeners to columns
        columns.forEach((column, index) => {
            column.addEventListener('click', function() {
                activateElement(index);
            });
        });
    });
</script>