.footer {
    padding: 88rem 0 45rem;
    background-color: var(--color-primary);
}

.footer-container {
    margin: 0 var(--side-gap);
}

.footer-bottom,
.footer-socials {
    margin-top: 108rem;
}

.footer-top-left {
    grid-column: 1/7;
}

.footer-top-right {
    grid-column: 9/13;
}

.footer-bottom-left {
    grid-column: 1/7;
    color: var(--color-white);
}

.footer-bottom-right {
    grid-column: 9/13;
}

.footer-logo {
    width: 90rem;
    display: block;
    margin-bottom: 40rem;
    position: relative;
    cursor: pointer;
}

.footer-slogan,
.footer-menu-title {
    color: var(--color-white);
}

.footer-link {
    color: var(--color-secondary);
}

.footer-link:hover {
    color: var(--color-white);
}

.footer-ul,
.footer-socials-buttons {
    margin-top: 30rem;
}

.footer-ul li {
    margin-top: 15rem;
}

.footer-socials-buttons {
    display: flex;
    gap: 10rem;
}

.footer-social-btn {
    width: 50rem;
    height: 50rem;
    border-radius: var(--radius-xsm);
    background-color: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.footer-social-btn:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

@media (max-width: 834px) {
    .footer-bottom,
    .footer-socials {
        margin-top: 40rem;
    }
}

@media (max-width: 500px) {
    .footer-top-left,
    .footer-top-right,
    .footer-bottom-left,
    .footer-bottom-right {
        grid-column: 1/13;
    }

    .footer-bottom-left {
        grid-row: 2;
    }

    .footer-bottom-right {
        grid-row: 1;
    }

    .footer-top-right,
    .footer-bottom-left {
        margin-top: 30rem;
    }
}