/* Основной стиль для заголовка */
#site-header.scrolled {
    position: fixed; /* Заголовок фиксируется */
    top: 0; /* Закрепляем в верхней части экрана */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон */
    height: 60px; /* Сжатая высота */
    padding: 5px 20px; /* Уменьшенный отступ */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Более выраженная тень */
    transition: all 0.3s ease; /* Обеспечиваем плавный переход */
}

/* Внутренние элементы заголовка */
#site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
}

/* Сжатый стиль при прокрутке */
#site-header.scrolled {
    position: sticky;
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный */
    height: 60px; /* Сжатая высота */
    padding: 5px 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Более выраженная тень */
}

/* Логотип */
#site-logo img {
    height: 50px;
    transition: transform 0.3s ease;
    transform: scale(1);
}

#site-header.scrolled #site-logo img {
    height: 40px; /* Уменьшаем логотип */
    transform: scale(0.8);
}

#site-logo {
    width: 150px; /* Задайте подходящее значение для ширины логотипа */
    display: flex;
    align-items: center; /* Выравнивание логотипа по центру */
}

@media (max-width: 768px) {
    #site-header {
        height: 60px;
    }

    #site-header.scrolled {
        height: 50px; /* Еще меньше для мобильных */
        padding: 5px 15px;
    }

    #site-logo img {
        height: 40px;
    }

    #site-header.scrolled #site-logo img {
        height: 35px;
        transform: scale(0.9);
    }
}