function activatedStep(step) {
    let allStep = document.querySelectorAll('li');
    allStep.forEach((step) => {
        step.classList.remove('active');
        step.classList.remove('font-poppins-bold');
        step.classList.add('font-poppins-regular');
    });
    let stepId = document.getElementById(`text-step-${step}`);
    stepId.classList.add('active');
    stepId.classList.remove('font-poppins-regular');
    stepId.classList.add('font-poppins-bold');
}

let elementIDLi1 = document.querySelector("li[id='text-step-1']");
let elementIDLi2 = document.querySelector("li[id='text-step-2']");
let elementIDLi3 = document.querySelector("li[id='text-step-3']");
let elementBody1 = document.getElementById('body-content-1');
let elementBody2 = document.getElementById('body-content-2');
let elementBody3 = document.getElementById('body-content-3');

if (elementIDLi1) {
    elementIDLi1.addEventListener('click', function() {
        console.log('click');
        elementIDLi2.classList.remove('active');
        elementIDLi2.classList.remove('font-poppins-bold');
        elementIDLi2.classList.add('font-poppins-regular');

        elementIDLi3.classList.remove('active');
        elementIDLi3.classList.remove('font-poppins-bold');
        elementIDLi3.classList.add('font-poppins-regular');
        
        elementIDLi1.classList.add('active');
        elementIDLi1.classList.remove('font-poppins-regular');
        elementIDLi1.classList.add('font-poppins-bold');

        elementBody2.classList.add('hide');
        elementBody2.classList.remove('show-flex');

        elementBody3.classList.add('hide');
        elementBody3.classList.remove('show-flex');

        elementBody1.classList.add('show-flex');
        elementBody1.classList.remove('hide');
    });
}

if (elementIDLi2) {
    elementIDLi2.addEventListener('click', function() {
        console.log('click');
        elementIDLi1.classList.remove('active');
        elementIDLi1.classList.remove('font-poppins-bold');
        elementIDLi1.classList.add('font-poppins-regular');

        elementIDLi3.classList.remove('active');
        elementIDLi3.classList.remove('font-poppins-bold');
        elementIDLi3.classList.add('font-poppins-regular');

        elementIDLi2.classList.add('active');
        elementIDLi2.classList.remove('font-poppins-regular');
        elementIDLi2.classList.add('font-poppins-bold');

        elementBody1.classList.add('hide');
        elementBody1.classList.remove('show-flex');

        elementBody3.classList.add('hide');
        elementBody3.classList.remove('show=flex');

        elementBody2.classList.add('show-flex');
        elementBody2.classList.remove('hide');
    });
}

if (elementIDLi3) {
    elementIDLi3.addEventListener('click', function() {
        console.log('click');
        elementIDLi1.classList.remove('active');
        elementIDLi1.classList.remove('font-poppins-bold');
        elementIDLi1.classList.add('font-poppins-regular');

        elementIDLi2.classList.remove('active');
        elementIDLi2.classList.remove('font-poppins-bold');
        elementIDLi2.classList.add('font-poppins-regular');

        elementIDLi3.classList.add('active');
        elementIDLi3.classList.remove('font-poppins-regular');
        elementIDLi3.classList.add('font-poppins-bold');

        elementBody1.classList.add('hide');
        elementBody1.classList.remove('show-flex');

        elementBody2.classList.add('hide');
        elementBody2.classList.remove('show-flex');

        elementBody3.classList.add('show-flex');
        elementBody3.classList.remove('hide');
    });
}