@use '../utils' as *;

/*----------------------------------------*/
/*  23. footer CSS START
/*----------------------------------------*/

.tp-footer{
    &__content{
        & .tp-section-title{
            margin-bottom: 30px;
        }
        & p{
            font-weight: 400;
            font-size: 18px;
            line-height: 1.4;           
            color: #C0C0DD; 
            margin-bottom: 30px;          
        }
    }
    &__thumb{
        &-sm{
            margin: 0 10px;
        }
    }
}
.tp-footer-bottom{
    &__border-top{
        border-top: 1px solid #2C2F94;
    }
    &__menu{
        & ul{
            text-align: end;
            @media #{$md}{
                text-align: center;
                margin-bottom: 50px;
            }
            @media #{$xs}{
                text-align: center;
                margin-bottom: 30px;
            }
            & li{
                display: inline-block;
                margin: 0px 30px;
                @media #{$xl}{
                    margin: 0px 20px ;
                }
                @media #{$lg}{
                    margin: 0px 15px ;
                }
                @media #{$xs}{
                    margin: 0;
                    margin: 0px 10px;
                }
                & a{
                    display: inline-block;
                    font-weight: 700;
                    font-size: 15px;
                    line-height: 19px;
                    color: var(--tp-common-white);
                    text-align: center;
                    letter-spacing: 0.14em;
                    text-transform: uppercase;
                    &:hover{
                        color: var(--tp-common-sky);
                    }
                }
            }
        }
    }
    &__logo{
        @media #{$xs}{
            margin-bottom: 30px;
        }  
    }
    &__social{
        & ul{
            & li{
                display: inline-block;
                margin-left: 10px;
                &:first-child{
                    margin-left: 0;
                }
                & a{
                    height: 40px;
                    width: 40px;
                    line-height: 40px;
                    background-color: #23259F;
                    border-radius: 50%;
                    color: var(--tp-common-white);
                    display: inline-block;
                    text-align: center;
                    transition: .3s;
                    &:hover{
                        background-color: #3EB9FF;
                    }
                }
            }
        }
    }
}