/* Блок социальных сетей */
.contact-line {
    display: flex;
    justify-content: space-between; /* Расстовляет элементы на равные расстояния, прижимая крайний левый к левой стороне, а крайний правый к правой */
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.social-icons { 
    display: flex;
    align-items: center;
    gap: 24px;
}

.social-icons__icon > img {
    display: block;  /* Убирает отступы снизу */
}

.social-icons__icon:nth-child(1):hover > img {
    content: url('../img/icons/vk-hover.svg');
}

.social-icons__icon:nth-child(2):hover > img {
    content: url('../img/icons/telega-hover.svg');
}

.social-icons__icon:nth-child(3):hover > img {
    content: url('../img/icons/watsapp-hover.svg');
}

.social-icons__icon:nth-child(4):hover > img {
    content: url('../img/icons/book-hover.svg');
}

/* Блок дозвона по телефону */
.phone-link {
    display: inline-flex; /* Элементы в одну строку */
    align-items: center; /* Выравнивание по вертикали по центру */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
    gap: 8px; /* Отступ между иконкой и текстом (опционально) */
    padding-top: 5px;
}

.phone-link img {
    display: block; /* Убирает лишний отступ снизу у картинки */
}

.phone-link:hover > img {
    content: url('../img/icons/phone-hover.svg');
}

#text-phone-in-header {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #003C09;  
}

#text-phone-in-header:hover {
    color: #00a017ff;  
}

/* Блок логотипа */
.header-logo-and-text {
    text-align: center; /* Центрирует весь текст и изображение */
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}

.header-logo-and-text img {
    display: block; /* Убирает лишний отступ снизу у картинки */
    margin: 0 auto; /* Центрирует изображение */
}

#text-company-name {
    color: #003C09;  
}

/* --------------- НАСТРОЙКИ АДАПТИВНОСТИ --------------- */

/* Планшеты и маленькие экраны */
@media (max-width: 780px) {
    .contact-line {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 5px;
        padding-top: 5px;
        gap: 5px;
    }
}