@import url('../../components/newsletter/main-newsletter.css');

footer#footer {
    background-color: var(--color-primary-500) !important;

    .footer-secction-top {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-block: 3rem;
        border-bottom: 1px solid var(--color-neutral-50);

        .footer-left {
            display: flex;
            flex-direction: column;
            gap: 37px;

            .logo img {
                width: 134px;
                height: 80px;
                object-fit: contain;
            }
        }


        .footer-right {
            flex: 1;
            display: flex;
            justify-content: center;
            width: 100%;
            gap: 96px;

            .item {
                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;
                    padding: 0;
                    margin: 0;
                    list-style: none;

                    li a {
                        font-family: var(--font-family-primary);
                        font-weight: 400;
                        font-size: 16px;
                        line-height: inherit;
                        letter-spacing: 0%;
                        vertical-align: middle;
                        text-decoration: none;
                        color: var(--color-neutral-50);
                    }

                    li.button-secondary {
                        width: auto;

                        a {
                            color: #000;

                            &:hover {
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }

        .social-networks {
            display: grid;
            align-items: center;
            gap: 18px;
            width: 100%;

            span {
                font-family: var(--font-family-primary);
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--color-neutral-50);
            }

            .share-links {
                display: flex;
                gap: 1rem;

                img {
                    width: 24px;
                    height: 24px;
                    object-fit: contain;
                }
            }
        }

    }

    .footer-bottom {
        display: grid;
        justify-items: center;
        gap: 2.5rem;
        padding: 2.5rem var(--padding);

        .footer-copyright {
            font-family: var(--font-family-primary);
            font-weight: 400;
            font-size: 14px;
            line-height: inherit;
            letter-spacing: 0%;
            text-align: center;
            vertical-align: middle;
            color: var(--color-neutral-50);
        }
    }
}

@media (max-width: 1096px) {
    footer#footer {
        .footer-secction-top {
            .footer-right {
                gap: 2rem;
            }
        }
    }
}

@media (max-width: 768px) {
    footer#footer {
        .footer-secction-top {
            flex-direction: column;
            gap: 24px;

            .footer-left {
                align-items: center;
            }

            .footer-right {
                flex-direction: column;
                gap: 2rem;
            }

            .social-networks {
                justify-content: center;
                margin-top: calc(40px - 24px);
            }
        }
    }
}