.steps {
display: flex;
justify-content: center;
gap: 50px;
margin-bottom: 30px;
}
.circle {
width: 80px;
height: 80px;
border: 3px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
transition: border 0.5s ease;
}
.active .circle {
border-color: #00aaff;
}
const texts = [
"Выберите автошколу",
"Запишитесь на курсы",
"Получите права через 2 месяца"
];
const steps = document.querySelectorAll(".step");
const textBlock = document.getElementById("stepText");
let current = 0;
function highlightStep() {
steps.forEach(step => step.classList.remove("active"));
steps[current].classList.add("active");
textBlock.textContent = texts[current];
current++;
if (current >= steps.length) current = 0;
setTimeout(highlightStep, 2500);
}
highlightStep();