/*  07. footer area css here */


.footer_top{
	padding: 99px 0 89px;
    border-top: 1px solid $grey_color;
    border-bottom: 1px solid $grey_color;
    @media #{$tablet-device}{
        padding: 79px 0 31px;
    }
    @media #{$large-mobile}{
        padding: 55px 0 4px;
    }
}
.widgets_container{
    @media #{$tablet-device}{
        margin-bottom: 42px;
    }
    @media #{$large-mobile}{
        margin-bottom: 43px;
    }
    @media #{$small-mobile2}{
        text-align: center;
    }
    &.widget_menu{
        @media #{$large-mobile}{
            margin-bottom: 48px;
        }
    }
    &.widget_app{
        @media #{$large-mobile}{
           margin-bottom: 55px;
        }
    }
    & h3{
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 31px;
        padding-bottom: 10px;
        text-transform: uppercase;
        font-weight: 500;
        position: relative;
        &::before{
            content: "";
            width: 35px;
            height: 2px;
            background: $fonts_color;
            position: absolute;
            bottom: 0;
            left: 0;
            @media #{$small-mobile2}{
                left: 50%;
                transform: translatex(-50%);
            }
        }
        @media #{$tablet-device}{
            margin-bottom: 18px;
        }
        @media #{$large-mobile}{
            margin-bottom: 12px;
            font-size: 14px;
            display: inline-block;
        }
    }
  
}
.footer_logo{
    margin-bottom: 30px;
    text-align: center;
    @media #{$tablet-device}{
        margin-bottom: 22px;
    }
    @media #{$large-mobile}{
       margin-bottom: 20px;
    }
    & a{
        & img{
            width: 150px;
        }
    }
}

.contact_us{
    & > p{
        font-size: 14px;
        line-height:30px;
        margin-bottom: 0;
        & b{
            font-weight: 500;
        }
        &:last-child{
            margin-top: 50px;
            margin-bottom: 0;
            @media #{$desktop-device}{
               margin-top: 22px
            }
            @media #{$tablet-device}{
                margin-top: 20px;
            }
             @media #{$large-mobile}{
               margin-top: 0;
            }
        }
        
        @media #{$large-mobile}{
           font-size: 13px;
        }
    } 
}

.footer_menu{
    & ul{
        & li{
            padding-bottom: 2px;
            &:last-child{
                padding-bottom: 0;
            }
            & a{
                display: block;
                font-weight: 400;
                font-size: 15px;
                line-height: 30px;
                &:hover{
                    color: $secondary_color;
                }
                @media #{$tablet-device}{
                    font-size: 14px;
                    line-height: 26px;
                }
                @media #{$large-mobile}{
                    line-height: 22px;
                    font-size: 13px;
                }
            }
        }
    }
}
.footer_social{
    margin-top: 23px;
    text-align: center;
    @media #{$tablet-device}{
       margin-top: 17px;
    }
    @media #{$large-mobile}{
       margin-top: 15px;
    }
    & ul{
        & li{
            display: inline-block;
            margin-right: 8px;
            &:last-child{
                margin-right: 0;
            }
            @media #{$large-mobile}{
                margin-right: 6px;
            }
            & a{
                width: 42px;
                height: 42px;
                line-height: 44px;
                display: block;
                text-align: center;
                font-size: 14px;
                background: #f2f2f2;
                border-radius: 50%;
                &:hover{
                    color: $white;
                    background: $secondary_color;
                }
                @media #{$large-mobile}{
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                }
            }
        }
    }
}

.copyright_area{
    @media #{$large-mobile}{
       text-align: center;
        margin-bottom: 17px;
    }
    & p{
        text-transform: capitalize;
        line-height: 25px;
        font-size:14px;
        @media #{$large-mobile}{
            letter-spacing: 0;
            font-size: 13px;
            line-height: 20px;
        }
        & a{
            color: $secondary_color;
            &:hover{
                text-decoration: underline;
            }
        }
    }
}
.footer_widgetnav_menu{
    text-align: center;
    & ul{
        & li{
            display: inline-block;
            margin-right: 20px;
            &:last-child{
                margin-right: 0;
            }
            @media #{$large-mobile}{
                margin-right: 14px;
            }
            & a{
                font-size: 14px;
                line-height: 30px;
                &:hover{
                    color: $secondary_color;
                }
            }
        }
    }
}

.footer_app{
    text-align: center;
    margin-top: 32px;
    @media #{$tablet-device}{
       margin-top: 25px;
    }
    @media #{$tablet-device}{
       margin-top: 22px;
    }
    & ul{
        & li{
            display: inline-block;
            margin-right: 10px;
            &:last-child{
                margin-right: 0;
            }
            @media #{$desktop-device}{
               margin-right: 6px;
            }
            @media #{$tablet-device}{
               margin-right: 6px;
            }
            @media #{$large-mobile}{
               margin-right: 4px;
            }
            & a{
                & img{
                    @media #{$desktop-device}{
                        max-width: 140px;
                    }
                    @media #{$tablet-device}{
                       max-width: 135px;
                    }
                    @media #{$large-mobile}{
                        max-width: 128px;
                    }
                }
            }
        }
    }
}
.footer_payment{
    text-align: right;
}

.footer_bottom{
    padding: 29px 0;
    @media #{$large-mobile}{
       padding: 25px 0;
    }
}