.rotating-logo {
    transform: rotate(-30deg); /* Начальное положение (-30 градусов) */
    animation: rotate-to-0 1.5s forwards; /* Анимация до 0 градусов */
}

@keyframes rotate-to-0 {
    from {
        transform: rotate(-30deg); /* Начальный угол */
    }
    to {
        transform: rotate(0deg); /* Конечный угол */
    }
}

.fade-in-element {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

 .fade-in-left {
     opacity: 0;
     transform: translateX(-50px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-bottom {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-top {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-element.visible, .fade-in-left.visible, .fade-in-right.visible, .fade-in-bottom.visible, .fade-in-top.visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}