footer {
    .container {
        padding:    50px 0;
        border-top: 1px solid #F1F0EF;
        display:    flex;

        .footer-info {
            max-width:          410px;
            display:            flex;
            flex-direction:     column;
            justify-content:    space-between;
            padding-right:      25px;

            .main {
                font-size:      14px;
                font-style:     normal;
                font-weight:    600;
                line-height:    20px; /* 142.857% */
                color:          #7D89B0;
                padding-top:    20px;
            }
        }

        .footer-nav {
            display: flex;
            gap:     140px;

            .footer-list {
                & ul {
                    display:        flex;
                    flex-direction: column;
                    gap:            20px;

                    & li {
                        & a {
                            font-size:       14px;
                            font-style:      normal;
                            font-weight:     600;
                            line-height:     20px; /* 142.857% */
                            text-decoration: none;
                            color:           #2F1D49;
                        }
                    }
                }
            }
        }

        .contact {
            padding-left: 100px;

            .mail {
                display:     flex;
                align-items: center;
                gap:         4px;

                & svg {
                    width:  20px;
                    height: 20px;
                }

                & a {
                    font-size:       14px;
                    font-style:      normal;
                    font-weight:     400;
                    line-height:     20px; /* 142.857% */
                    color:           #2F1D49;
                    text-decoration: none;
                }
            }

            .socials {
                display:   flex;
                flex-wrap: wrap;
                gap:       20px;
                max-width: 68px;

                & a {
                    max-width: 24px;

                    & img {
                        width: 100%;
                    }
                }
            }
        }

        .footer-list {
            display:        flex;
            flex-direction: column;
            gap:            40px;

            & h6 {
                font-size:      14px;
                font-style:     normal;
                font-weight:    600;
                line-height:    20px; /* 142.857% */
                text-transform: uppercase;
                color:          #7D89B0;
            }
        }
    }
}

.sub-footer {
    .container {
        padding:    29px 0;
        border-top: 1px solid #F1F0EF;
        display:    flex;

        .info {
            width:         410px;
            font-size:     14px;
            font-style:    normal;
            font-weight:   400;
            line-height:   20px; /* 142.857% */
            color:         #2F1D49;
            padding-right: 25px;

            & a {
                color:           #2F1D49;
                font-weight:     600;
                text-decoration: none;
            }
        }

        .docs {
            display: flex;
            gap:     35px;

            & a {
                font-size:       14px;
                font-style:      normal;
                font-weight:     600;
                line-height:     20px; /* 142.857% */
                text-decoration: none;
                color:           #2F1D49;
            }
        }
    }
}

.lang-dropdown {
    max-width:   220px;
    position:    relative;
    cursor:      pointer;

    &:has(.show) {
        .selected {
            & span{
                &.arrow {
                    transform: rotate(-180deg);
                }
            }
        }
    }

    .selected {
        display:            flex;
        justify-content:    space-between;
        align-items:        center;
        padding:            9px 14px;
        background-color:   #FFF;
        border:             2px solid #D0D5DD;
        border-radius:      6px;

        .lang {
            display:     flex;
            align-items: center;
            gap:         6px;
        }

        & span {
            display:      flex;
            align-items:  center;
            transition:   0.3s;
            color:        #2F1D49;
        }
    }

    .options {
        position:           absolute;
        top:                calc(100% + 5px);
        left:               0;
        right:              0;
        padding:            9px 14px;
        background-color:   #FFF;
        border:             2px solid #D0D5DD;
        border-radius:      6px;
        box-shadow:         0 2px 5px rgba(0, 0, 0, 0.1);
        display:            none;
        z-index:            999;

        &.show {
            display: block;
        }

        & div {
            font-size:          12px;
            font-style:         normal;
            font-weight:        600;
            line-height:        18px;
            color:              #2F1D49;
            padding:            10px;
            background-color:   #fff;
            cursor:             pointer;

            &.active {
                border-radius:  10px;
                background:     #F2F4F7;
            }

            &:not(:last-child) {
                margin-bottom: 5px;
            }
        }
    }
}

.mobile-lang-dropdown {
    display: none;
}

@media screen and (max-width: 1024px) {
    footer {
        .container {
            width:  calc(100vw - 80px);

            .footer-info {
                max-width:     250px;
                padding-right: 20px;

                .main {
                    font-size:   12px;
                    line-height: 18px;
                }
            }

            .footer-nav {
                gap: 50px;

                .footer-list {
                    gap: 30px;

                    & ul {
                        & li {
                            & a {
                                font-size:   12px;
                                line-height: 18px;
                            }
                        }
                    }
                }
            }

            .contact {
                padding-left: 50px;
            }
        }
    }

    .sub-footer {
        .container {
            .docs {
                & a {
                    font-size:   12px;
                    line-height: 18px;
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    footer {
        .container {
            padding:        40px 0;
            flex-direction: column;

            .footer-info {
                max-width:      100%;
                padding:        0 0 40px 0;

                .main {
                    font-size:      14px;
                    line-height:    20px; /* 142.857% */
                    color:          #2F1D49;
                }
            }

            .footer-nav {
                flex-direction: column;
                gap:            40px;
                padding-bottom: 40px;

                .footer-list {
                    &:first-child {
                        & ul {
                            flex-direction: row;

                            & li {
                                &:last-child {
                                    display: none;
                                }
                            }
                        }
                    }

                    &:last-child {
                        & ul {
                            & li {
                                &:nth-child(2),
                                &:nth-last-child(-n + 2) {
                                    display: block;
                                }
                            }
                        }
                    }

                    & ul {
                        flex-direction: column;
                        gap:            20px;

                        & li {
                            & a {
                                font-size:       14px;
                                line-height:     20px; /* 142.857% */
                                text-transform:  none;
                                font-weight:     400;
                            }
                        }
                    }
                }
            }

            .contact {
                padding-left: 0;

                .socials {
                    max-width:   100%;
                    padding-top: 10px;
                }
            }

            .footer-list {
                gap: 20px;

                & h6 {
                    color: #2F1D49;
                }
            }
        }
    }

    .sub-footer {
        .container {
            padding:        40px 0 16px;
            border-top:     1px solid #F1F0EF;
            flex-direction: column-reverse;

            .info {
                width:   100%;
                padding: 40px 0 80px;

                & a {
                    font-weight:     600;
                    text-decoration: none;
                }
            }

            .docs {
                flex-direction: column;
                gap:            20px;
                padding-bottom: 40px;

                & a {
                    font-size:       14px;
                    line-height:     20px;
                    font-weight:     400;
                    text-transform:  none;
                }
            }
        }
    }

    .lang-dropdown {
        display: none;
    }

    .mobile-lang-dropdown {
        display:     block;
        max-width:   100%;
    }
}

@media screen and (max-width: 480px) {
    footer {
        .container {
            .footer-nav {
                .footer-list {
                    &:first-child {
                        & ul {
                            flex-wrap: wrap;
                        }
                    }
                }
            }
        }
    }
}
