footer {
    .footer-wrapper {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: $gap-24;
        @include media-query(1024px){
            flex-wrap: wrap;
            row-gap: $gap-48;
        }

        .logo-block {
            width: clamp(25%, 29.167vw, 720px);
            @include media-query(1024px){
                width: 80%;
            }
            .ft-logo{
                @include media-query(490px){
                    width: 55%;
                }
            }
            p{
                width: 21.563vw;
                @include media-query(1024px){
                    width: 70%;
                }
                @include media-query(490px){
                    width: 100%;
                }
            }
        }

        .link-block {
            width: clamp(23%, 19.036vw, 650px);
            @include media-query(1024px){
                width: 32%;
            }
            @include media-query(490px){
                width: 66%;
            }
            &.popular{
                @include media-query(490px){
                    width: 60%;
                }
            }
            &.quick-links{
                @include media-query(820px){
                    width: 29%;
                }
                @include media-query(490px){
                    width: 30%;
                }
            }
            &.contact-block{
                @include media-query(820px){
                    width: 34%;
                }
                @include media-query(490px){
                    width: 66%;
                }
            }

            .footer-list {
                .free-label {
                    padding: 4px 12px;
                    border-radius: $br-32;
                    background: $accent-2;
                    color: $accent-1;
                }

                li {
                    a {
                        color: $lightest-gray;
                        transition: $transition;
                        font-weight: 400;
                    }

                    &:hover {
                        a {
                            color: $accent-2;
                            transition: $transition;
                        }
                    }
                }
                .subtitle{
                    font-size: 16px;
                }
            }

            form {
                position: relative;

                input {
                    &.form-input {
                        padding: 18.65px 16px;
                        padding-left: 48px;
                        border-radius: $br-8;
                        border: 1px solid $lightest-gray;
                        background: transparent;
                        font-family: $font-primary;
                        font-size: clamp(17px, 0.938vw, 22px);
                        font-weight: 400;
                        line-height: 140%;
                        letter-spacing: 0.32px;
                        position: relative;
                        color: $white;
                        box-shadow: none;
                        width: 100%;

                        font-family: $font-primary;
                        font-size: 14px; /* 14px */
                        font-style: normal;
                        font-weight: 400;
                        line-height: 120%; 

                        @include media-query(430px) {
                            padding-right: 54px;
                        }

                        &:focus {
                            box-shadow: none;
                            outline: 0;
                            color: $white !important;
                            background: transparent;
                        }

                        &::placeholder {
                            color: $lightest-gray;
                            opacity: 1;
                        }
                    }
                }

                .submit-arrow {
                    position: absolute;
                    right: 16px;
                    top: 13px;
                    background: transparent;
                    border: 0;
                    svg{
                        path{
                            transition: $transition;
                        }
                        &:hover{
                            path{
                                fill: $accent-2;
                                transition: $transition;
                            }
                        }
                    }
                }
                .mailBox{
                    position: absolute;
                    left: 16px;
                    top: 18px;
                }
            }
        }
    }
    .bottom-bar{
        @include media-query(490px){
            line-height: 220%;
        }
    }
}