.footer {
    margin: 100px 296px 20px;

    .footer-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .flex {
            display: flex;
        }

        .logo {
            img {
                width: 432px;
            }
        }

        p {
            font-family: ClashDisplay-Regular;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #945833;
            width: 375px;
        }

        .socials {
            margin-top: 20px;
            display: flex;

            .social {
                margin-right: 25px;
                cursor: pointer;
                transition: 0.2s ease-in-out;

                &:hover {
                    filter: contrast(0.6);
                }
            }
        }

        .nawigacja {
            width: 150px;

            &:nth-child(1) {
                margin-right: 40px;
            }

            h2 {
                font-family: ClashDisplay-Medium;
                font-weight: 500;
                font-size: 18px;
                line-height: 24px;
                text-transform: uppercase;
                color: #F36214;
                margin: 0 0 10px 0;
            }

            p {
                font-family: ClashDisplay-Regular;
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #945833;
                margin: 0 0 7px 0;
                cursor: pointer;

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

    .line {
        margin: 25px 0 20px 0;
        border: 1px solid #945833;
    }

    .down {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            font-family: ClashDisplay-Regular;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #945833;
            margin: 0;
        }
    }

    /* === responsiveness === */
    /* Mobile */
    @media screen and (max-width: 768px) {
        margin: 50px 20px 20px;

        .footer-box {
            flex-direction: column;
            align-items: center;

            .flex {
                flex-direction: column;
                align-items: center;
            }

            .logo {
                text-align: center;

                img {
                    width: 250px;
                    margin-bottom: 20px;
                }
            }

            p {
                width: 100%;
                text-align: center;
                margin-bottom: 20px;
                font-size: 12px;
                line-height: 18px;
            }

            .socials {
                justify-content: center;
                margin: 10px 0;

                .social {
                    margin-right: 15px;
                }
            }

            .nawigacja {
                width: 100%;
                margin-bottom: 20px;
                text-align: center;

                &:nth-child(1) {
                    margin-right: 0;
                }
            }
        }

        .line {
            margin: 20px 0;
        }

        .down {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }
    }

    /* Tablets */
    @media screen and (min-width: 769px) and (max-width: 1024px) {
        margin: 80px 60px 20px;

        .footer-box {
            flex-wrap: wrap;
            justify-content: space-around;

            .flex {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 30px;
            }

            .logo {
                img {
                    width: 320px;
                }
            }

            p {
                width: 100%;
                max-width: 320px;
                font-size: 13px;
                line-height: 19px;
                margin-bottom: 20px;
            }

            .socials {
                margin-top: 10px;
                justify-content: flex-start;

                .social {
                    margin-right: 20px;
                }
            }

            .nawigacja {
                width: 140px;
                margin-bottom: 30px;

                &:nth-child(1) {
                    margin-right: 30px;
                }
            }
        }

        .line {
            margin: 25px 0 20px 0;
        }

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

    /* Monitors 2k and above */
    @media screen and (min-width: 2500px) {
        margin: 120px 400px 20px;

        .footer-box {
            .logo {
                img {
                    width: 500px;
                }
            }

            p {
                width: 400px;
                font-size: 16px;
                line-height: 22px;
            }

            .socials {
                .social {
                    margin-right: 30px;
                }
            }

            .nawigacja {
                width: 160px;

                &:nth-child(1) {
                    margin-right: 50px;
                }
            }
        }

        .down {
            p {
                font-size: 16px;
            }
        }
    }
}