footer{
    &.site-footer{
        border-top:1px solid $border-color;
        margin-top:4rem;
        background-color: $white-color;
        @media #{$breakpoint-ls}{
            margin-top:3rem;
        }
        .footer-in{
            padding:4rem 0;
            @media #{$breakpoint-ls}{
                padding:3rem 0;
            }
            position: relative;
            .footer-widget{
                .footer-logo{
                    h2{
                        @include clear();
                        display: block;
                        font-family: $cookie;
                        font-size:4rem;
                        margin:2rem 0 0 0;
                        text-align: center;
                        text-transform: capitalize;
                        a{
                        font-family: $cookie;
                        text-transform: capitalize
                        }
                        @media #{$breakpoint-ls}{
                            font-size: 3rem;
                        }
                        @media #{$breakpoint-md}{
                            margin:0;
                        }
                    }
                    a{
                        color:$grey-color;
                        font-weight: 500;
                    }
                }
                
                .ft-wd-title{
                    position: relative;
                    margin-bottom: 1rem;
                    h4{
                        font-size: 1.225rem;
                        font-weight: 700;
                        text-transform: capitalize;
                    }
                }
                
                .ft-social{
                    ul{
                        @include display-flex(flex);
                        @include justify-content-center;
                        @include align-items-center;
                    }
                    li{
                      a{
                        width:40px;
                        height: 40px;
                        display: flex;
                        flex-direction: column;
                        justify-content:center;
                        align-items:center;
                        border:2px solid $bg-dark;
                        @include radius(100%);
                        
                        color:$bg-dark;
                        @include transition(all .4s ease-in-out);
                        overflow: hidden;
                        
                        &:hover{
                          color:$pink-color;
                          border-color:$pink-color;
                        }
                      }
                      &:not(:last-child){
                        margin-right: 10px;
                    }
                    }
                  }
                .widget_categories{
                    ul{
                        @include display-flex(flex);
                        @include justify-content-start;
                        @include align-items-center;
                        @include flex-wrap(wrap);
                        li{
                            @include flex(0 0 50%);
                            max-width: 50%;
                            a{
                                display: block;
                                @include transition(all .5s ease-in-out);
                                position: relative;
                                padding:.25rem .6125rem .25rem 1.1rem;
                                color:$body-color;
                                text-transform: capitalize;
                                &::before{
                                    font-family: "Font Awesome 5 Free";
                                    content:'\f105';
                                    font-weight: 900;
                                    -webkit-font-smoothing: antialiased;
                                    -moz-osx-font-smoothing: grayscale;
                                    left:0;
                                    position: absolute;
                                    top:.1rem;
                                    font-size: 1rem;
                                }
                                &:visited{
                                    color:$heading-color;
                                }
                                &:hover{
                                    padding-left: 1.6rem;
                                    color:$secondary-color;
                                }
                            }
                        }
                    }
                }
                .news-letter{
                    .input-group {
                        @include display-flex(flex);
                        @include justify-content-center;
                        @include align-items-stretch;
                        button[type="submit"]{
                            height: 100%;
                            background-color:$secondary-color;
                            color:$white-color;
                            padding: 0 1rem;
                            border-color: $secondary-color;
                            &:hover{
                                background-color: $secondary-color;
                                cursor: pointer;
                            }
                        }
                    }
                }
                
            }
            
        }
        
    }
}
.copyright{
    text-align: center;
    border-top:1px solid $border-color;
    padding:15px;
    background-color: $white-color;
    .copyright-text{
        @include display-flex(flex);
        @include justify-content-center;
        @include align-items-center;
        @include flex-wrap(wrap);
        color:$border-dark;
        letter-spacing: .5px;
        line-height: 24px;
        font-size: .875rem;
        a{
            color:$secondary-color;
        }
    }
}

.upto-button{
    width:50px;
    height: 50px;
    @include transition(1s ease-in-out);
    @include display-flex(flex);
    @include justify-content-center;
    @include align-items-center;
    @include flex-direction-column(column);
    @include radius(50%);
    background-color: $pink-color;
    color:$white-color;
    position: absolute;
    left:auto;
    right:30px;
    bottom:1rem;
    margin:0 auto;
    z-index: 999;
    &:hover{
        background-color: $primary-color;
    }
}