@import '../mixins/mixins-master';
@import '../mixins/variables';
@import '../common';

footer {
    .wrapper {
        border-top: 1px solid rgba($black, 0.15);
        padding: 50px 20px;

        .logo {
            display: block;
            width: 200px;
            margin: 0 auto 50px;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .item {
            margin-bottom: 50px;

            .title {
                font-family: $raleway;
                font-weight: 600;
                text-align: center;
                color: #7B492E;
                font-size: 18px;
                line-height: 100%;
                margin-bottom: 15px;
            }

            .text {
                display: block;
                font-family: $raleway;
                font-weight: 600;
                text-align: center;
                color: #7B492E;
                font-size: 15px;
                line-height: 100%;
                margin-bottom: 10px;
                text-decoration: none;

                svg {
                    width: 15px;
                    height: 15px;
                }
            }
        }

        .footer-menu {
            margin-bottom: 50px;

            ul {
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 25px;

                li {
                    list-style: none;

                    &.current-menu-item {
                        a {
                            font-weight: 700;
                        }
                    }

                    a {
                        display: block;
                        text-decoration: none;
                        font-family: $raleway;
                        text-align: center;
                        color: #7B492E;
                        font-weight: 400;
                        font-size: 20px;
                        line-height: 100%;
                        letter-spacing: -2%;
                    }
                }
            }
        }

        .social {
            padding-bottom: 50px;

            .footer-social {
                ul {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: row;
                    gap: 30px;
                    justify-content: center;

                    li {
                        list-style: none;

                        a {
                            display: block;

                            svg {
                                width: 28px;
                                height: 28px;
                                fill: $black;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    footer {
        .wrapper {
            padding: get-vw(80px) get-vw(160px);
            display: flex;
            justify-content: space-between;
            gap: get-vw(50px);
            align-items: center;

            .logo {
                width: get-vw(245px);
                margin: 0;
            }

            .item {
                width: 15%;
                margin-bottom: 0;

                .title {
                    text-align: left;
                    font-size: get-vw(18px);
                    margin-bottom: get-vw(15px);
                }

                .text {
                    text-align: left;
                    font-size: get-vw(15px);
                    margin-bottom: get-vw(10px);

                    svg {
                        width: get-vw(15px);
                        height: get-vw(15px);
                    }
                }
            }

            .footer-menu {
                margin-bottom: 0;

                ul {
                    flex-direction: row;
                    gap: get-vw(70px);
                    justify-content: center;

                    li {
                        a {
                            font-size: get-vw(20px);
                        }
                    }
                }
            }

            .social {
                padding-bottom: 0;

                .footer-social {
                    ul {
                        gap: get-vw(30px);

                        li {
                            a {
                                svg {
                                    width: get-vw(30px);
                                    height: get-vw(30px);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}