body {
    font-family: 'Franklin Gothic Medium', sans-serif;
    background-color: #a10827;
}

header {
    background-color: #d41212;
    color: white; /* Исправил, было dark-red */
    padding: 20px;
    border-radius: 20px 0 20px 0;
    text-align: center;
    opacity: 0.8;
}

button {
    background-color: #f04848;
    color: white;
    padding: 15px 32px;
    border: none;
    border-radius: 20px 0 20px 0;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #a04545;
    transform: scale(1.05);
}

/* Исправил селектор: добавил точку для класса */
.steps {
    background-color: #bf1134;
    color: white;
    padding: 20px;
    border-radius: 20px 0 20px 0;
    text-align: center;
    opacity: 0.8;
    margin-top: 20px;
}

footer {
    background-color: #e34666;
    color: white;
    padding: 20px;
    border-radius: 20px 0 20px 0;
    text-align: center;
    opacity: 0.8;
}

.steps img {
    width: 50px; /* Настрой размер, чтобы иконка не была слишком огромной */
    display: block;
    margin: 10px auto; /* Центрируем иконку */
    max-width: 100% /* шобы не вылезло за пределы */
}

/* Стиль для всех неактивных кнопок */
button:disabled {
    background-color: #611323; /* Серый цвет, чтобы показать, что кнопка не активна */
    cursor: not-allowed;        /* Курсор превращается в "запрещающий" знак */
    opacity: 0.5;              /* Делаем её чуть прозрачнее */
    transform: none;           /* Убираем анимацию увеличения при наведении */
}