/* FOOTER */

.site-footer {
    background-color: var(--color-footer);
    font-size: 1rem;
    padding-top: 2rem;
}

footer.site-footer a,
footer.site-footer a:hover,
footer.site-footer a:visited,
footer.site-footer a:focus,
footer.site-footer {
    color: var(--color-white-dirty);
}

.dark-mode footer.site-footer a,
.dark-mode footer.site-footer a:visited,
.dark-mode footer.site-footer a:focus,
.dark-mode footer.site-footer {
    color: var(--color-gray);
}

.dark-mode footer.site-footer a:hover {
    color: var(--color-gray-dark);
}

.site-footer .widget-title {
    color: var(--color-gray);
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.site-footer .footer-about {
    margin: 0 0 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.site-footer .social-icon {
    height: 1.5rem;
    filter: brightness(1);
}

.site-footer ul {
    padding: 0;
    margin: 0;
    text-align: left;
}

.site-footer li {
    list-style: none;
    margin-bottom: 0.5rem;
}

.site-info {
    font-size: 0.75rem;
    font-weight: 400;
    padding: 2rem 0 4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    color: var(--color-gray-light);
}

.dark-mode .site-info {
    color: var(--color-gray);
}

.site-footer .site-info a,
.site-footer .site-info a:visited,
.site-footer .site-info a:hover,
.site-footer .site-info a:focus {
    color: var(--color-gray-light);
}


.dark-mode .site-footer .site-info a,
.dark-mode .site-footer .site-info a:visited,
.dark-mode .site-footer .site-info a:hover,
.dark-mode .site-footer .site-info a:focus {
    color: var(--color-gray);
}

.site-info>div {
    flex: 0 1 50%
}


.site-info>div:last-of-type {
    text-align: right;
}


.footer-contacts__phone,
.footer-contacts__email {
    flex: 1 1 24rem;
}

.footer-contact-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 0.0625rem solid var(--color-gray);
    border-radius: 0.25rem;
}

.footer-contact-link.button-hover::after {
    background-color: rgba(255, 255, 255, 0.075);
}

.footer-contact-link span {
    font-size: 1.5rem;
    font-weight: 600;
}

.footer-contact-link .bx {
    font-size: 3rem;
    transform: rotate(-45deg);
}

.footer-contact-link.button-hover:hover::after {
    transform: scale(12) translate3d(0, 0, 0);
}

.footer-widgets-wrapper {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.footer-widgets-wrapper>div {
    flex: 0 1 24rem;
}

.site-footer li.menu-item {
    justify-content: flex-start;
}

.footer-menu li.menu-item>a {
    color: var(--color-white-dirty)
}

.dark-mode .footer-menu li.menu-item>a,
.dark-mode .footer-menu li.menu-item>a:visited {
    color: var(--color-gray)
}

.footer-menu li.menu-item>a:hover {
    color: var(--color-white);
}

.dark-mode .footer-menu li.menu-item>a:hover {
    color: var(--color-black)
}


@media screen and (max-width: 768px) {
    .footer-container {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .footer-widgets-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .footer-contact-link span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .footer-widgets-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-contact-link span {
        font-size: 1rem;
        text-wrap: wrap;
        hyphens: manual;
    }
}