/* Мерцание и увеличение для иконки телефона */
@keyframes blink {
    0% {
        opacity: 1;
        transform: scale(1.1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.header_img {
    animation: blink 3s infinite; /* Применение мерцания и увеличения к иконке */
}

/* Плавное появление номера телефона справа без бесконечности */
.header_phone-link {
    opacity: 0; /* Начальная прозрачность */
    transform: translateX(20px); /* Начальное смещение вправо и немного вниз */

    /* Анимация плавного появления */
    animation: fadeInRight 2s ease-out forwards;
}

@keyframes fadeInRight {
    to {
        opacity: 1; /* Конечная прозрачность */
        transform: translateX(0); /* Конечное смещение */
    }
}

/* Анимация плавного появления элементов меню без бесконечности */
.nav_item {
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(-20px); /* Начальное смещение вверх */

    /* Анимация плавного появления с разных сторон */
    animation: fadeInUp 2s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1; /* Конечная прозрачность */
        transform: translateY(0); /* Конечное смещение */
    }
}

/* Анимация появления левой части с левой стороны */
.hero_left {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 2s ease-out forwards;
}

/* Анимация появления правой части с картинками с правой стороны */
.hero_right {
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInRight 2s ease-out forwards;
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Дополнительная анимация для кнопки - увеличение и появление снизу */

/* Анимация увеличения и появления снизу */
@keyframes growAndFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Анимация уменьшения и возврата в исходное состояние */
@keyframes scaleAndReturn {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}


/* Анимация уменьшения и возврата в исходное состояние */
@keyframes scaleAndReturn {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}