.footer {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

.footer__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.footer__left {
    display: flex;
    flex-direction: column;
    gap: 4.063rem;
}

.footer__logo {
    width: 14.063rem;
    height: 5.938rem;
}

.footer__subscribe {
    display: flex;
    align-items: center;
    border: 2px solid #FFF;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 80px;
    gap: 2.5rem;
    padding: 0.5rem 0.938rem;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.063rem;
    cursor: pointer;
    transition: 0.2s ease;
}

.footer__subscribe img {
    height: 2.938rem;
    width: 2.938rem;
}

.footer__subscribe:hover {
    border: 2px solid var(--color-accent);
}

.footer__actions {
    display: flex;
    gap: 1.875rem;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: uppercase;
}

.footer__nav a {
    transition: 0.2s ease;
}

.footer__nav a:hover {
    color: #FF6B01;
}

.footer__policy {
    text-transform: uppercase;
    font-size: 0.875rem;
    transition: 0.2s ease;
}

.footer__policy:hover {
    color: #FF6B01;
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

.footer__contacts-title {
    font-size: 1.563rem;
    font-weight: bold;
    text-transform: uppercase;
}

.footer__contacts-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.25rem;
}

.footer__contacts-socials {
    display: flex;
    gap: 0.938rem;
}

.footer__contacts-socials img {
    height: 3.125rem;
    width: 3.125rem;
    transition: 0.15s opacity;
}

.footer__contacts-socials img:hover {
    opacity: 0.75;
}

@media (max-width: 1024px) {
    .footer__logo {
        width: 18.022rem;
        height: 7.806rem;
    }

    .footer__left {
        gap: 7.461rem;
    }

    .footer__subscribe {
        font-size: 1.263rem;
        padding: 0.574rem 1.148rem;
        border-width: 1px;
    }

    .footer__subscribe img {
        height: 3.444rem;
        width: 3.444rem;
    }

    .footer__nav {
        font-size: 1.378rem;
    }

    .footer__policy {
        font-size: 1.148rem;
    }

    .footer__container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: stretch;
        justify-items: end;
    }

    .footer__actions {
        gap: 2.296rem;
    }

    .footer__links {
        gap: 0;
        justify-content: space-between;
    }

    .footer__contacts {
        gap: 0;
        justify-content: space-between;
    }

    .footer__contacts-title {
        font-size: 1.722rem;
    }

    .footer__contacts-list {
        gap: 2.296rem;
        font-size: 1.378rem;
    }

    .footer__contacts-socials img {
        height: 4.133rem;
        width: 4.133rem;
    }

    .quiz__main {
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .footer {
        position: relative;
        z-index: 1;
    }

    .footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35); 
        z-index: -1;
    }

    .footer__contacts-socials {
        margin-top: 2.5rem;
    }

    .footer__logo {
        width: 25.231rem;
        height: 10.928rem;
    }

    .footer__container {
        display: flex;
        flex-direction: column;
        gap: 3.214rem;
    }

    .footer__left {
        width: 100%;
        align-items: center;
        gap: 1.607rem;
    }

    .footer__subscribe {
        width: 100%;
        justify-content: space-between;
        font-size: 1.607rem;
        padding: 0.804rem 1.607rem;
    }

    .footer__subscribe img {
        height: 4.821rem;
        width: 4.821rem;
    }

    .footer__actions {
        justify-content: space-between;
    }

    .footer__links {
        gap: 1.607rem;
    }

    .footer__nav {
        gap: 1.125rem;
        font-size: 1.928rem;
    }

    .footer__policy {
        font-size: 1.607rem;
    }

    .footer__contacts-title {
        font-size: 2.411rem;
    }

    .footer__contacts-list {
        gap: 3.214rem;
        font-size: 1.928rem;
    }

    .footer__contacts-socials img {
        height: 6.107rem;
        width: 6.107rem;
    }
}