/* static/myapp/css/footer.css */

.footer {
    background-color: transparent; /* Темний фон для футера */
    padding: 20px 0;
    text-align: center; /* Центруємо текст */
}

.footer__container {

    margin: 0 auto; /* Центруємо контейнер */
    padding: 0 20px; /* Відступи по боках */
}

.footer__logo {
    color: #000;
    font-size: 35px;
    align-self: stretch;
}

.footer__contacts {
    margin-top: 37px;
}

.footer__contacts p {
    color: #000;
    font-size: 24px;
    margin: 37px 0;
}

.footer__copyright p {
    color: #000;
    margin-top: 20px;
    font-size: 24px;
    opacity: 0.7; /* Трохи прозорий текст */
}

/* СТИЛІ ДЛЯ СОЦІАЛЬНИХ ІКОНОК */
.footer__social-icons {
    display: flex; /* Розміщуємо іконки в рядок */
    justify-content: center; /* Центруємо іконки по горизонталі */
    align-items: flex-end; /* Вирівнюємо іконки по нижньому краю */
    gap: 45px; /* Відстань між іконками */
    margin-bottom: 20px; /* Відступ знизу до копірайту */
    margin-top: 20px; /* Відступ зверху від контактів */
}

.footer__social-icons a {
    text-decoration: none; /* Прибираємо підкреслення з посилань */
    transition: transform 0.3s ease; /* Додаємо перехід для ефекту підняття */
}

.footer__social-icons a:hover {
    transform: translateY(-3px); /* Ефект підняття при наведенні */
}

/* Стилі для самих SVG-іконок */
.footer__social-icons svg {
    width: 45px; /* Задайте бажаний розмір для всіх іконок (прибираю з 45px на 30px, як типовий розмір) */
    height: 45px; /* Зберігаємо пропорції */
}


.footer__copyright {
    margin-top: 20px; /* Цей відступ може бути зайвим, якщо є margin-bottom на social-icons */
    font-size: 14px;
    opacity: 0.7; /* Трохи прозорий текст */
}