.footer-area {
    position: relative;
    z-index: 1;
    background-color: $footer;
    padding-top: 70px;

    .footer-widget {
        position: relative;
        z-index: 1;

        .widget-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .single-twit {
            position: relative;
            z-index: 1;
            margin-bottom: 15px;

            &:last-child {
                margin-bottom: 0;
            }

            p {
                margin-bottom: 0;

                i {
                    color: $primary;
                }

                span {
                    color: $white;
                }
            }
        }

        .footer-social-area {
            position: relative;
            z-index: 1;
            margin-top: 20px;

            a {
                display: inline-block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: $primary;
                text-align: center;
                line-height: 40px;
                color: $white;
                font-size: 16px;
                margin-right: 5px;

                &:last-child {
                    margin-right: 0;
                }

                &.facebook {
                    background-color: #597dca;
                }

                &.twitter {
                    background-color: #1da1f2;
                }

                &.google-plus {
                    background-color: #db4437;
                }

                &.instagram {
                    background-color: #a67c52;
                }

                &.linkedin {
                    background-color: #3b5998;
                }

                &:hover,
                &:focus {
                    background-color: $primary;
                }

            }
        }

        .contact-address {
            position: relative;
            z-index: 1;

            p {
                margin-bottom: 0;
            }
        }

        .footer-nl-area {
            position: relative;
            z-index: 1;
            margin-top: 30px;

            form {
                position: relative;
                z-index: 1;

                input {
                    width: 100%;
                    height: 40px;
                    background-color: #303334;
                    border-radius: 0;
                    padding: 0 15px;
                    border: none;
                }

                button {
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    background-color: $primary;
                    color: $white;
                    z-index: 10;
                    top: 0;
                    right: 0;
                    border: none;
                    cursor: pointer;
                    @include transition-duration(500ms);

                    &:hover,
                    &:focus {
                        background-color: $dark;
                        color: $white;
                    }
                }
            }
        }
    }

    .copywrite-area {
        position: relative;
        z-index: 1;
        padding: 10px 0;
        background-color: #0a0a0a;

        .copywrite-text {
            font-size: 14px;
            margin-bottom: 0;
            font-weight: 400;
            color: $text;

            @media #{$breakpoint-md} {
                font-size: 12px;
            }

            @media #{$breakpoint-xs} {
                font-size: 12px;
            }

            a {
                color: $white;
                font-size: 14px;
                font-weight: 400;

                @media #{$breakpoint-md} {
                    font-size: 12px;
                }

                @media #{$breakpoint-xs} {
                    font-size: 12px;
                }

                &:hover,
                &:focus {
                    color: $hover;
                }
            }
        }

        .footer-nav {
            position: relative;
            z-index: 1;

            ul {
                @include display-flex(flex);
                @include justify-content-end;
                @include flex-wrap(wrap);

                @media #{$breakpoint-xs} {
                    margin-top: 10px;
                    @include justify-content-start;
                }

                li a {
                    display: inline-block;
                    color: $text;
                    font-size: 14px;
                    padding: 0 12px;
                    font-weight: 400;

                    @media #{$breakpoint-md} {
                        font-size: 12px;
                        padding: 0 8px;
                    }

                    @media #{$breakpoint-xs} {
                        padding: 0 5px;
                        font-size: 12px;
                    }

                    &:hover,
                    &:focus {
                        font-weight: 400;
                        color: $hover;
                    }
                }

                li:last-child {
                    a {
                        padding-right: 0;
                    }
                }

                li:first-child a {
                    @media #{$breakpoint-xs} {
                        padding-left: 0;
                    }
                }
            }
        }
    }
}