@use '../../utils' as *;

/*----------------------------------------*/
/*  6.3 Footer Style 3
/*----------------------------------------*/

.tp-footer-3{
    &-widget{
        &-title{
            font-weight: 700;
            font-size: 20px;
            line-height: 1.4;
            color: var(--tp-common-white);
            @media #{$xl}{
                font-size: 19px;
            }
            & span{
                color: #adff5b;
            }
        }
        &-link{
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--tp-common-white); 
            & span{
                height: 34px;
                width: 34px;
                line-height: 34px;
                text-align: center;
                border-radius: 100%;
                display: inline-block;
                transition: all .3s;
                color: var(--tp-common-white);
                background-color:rgba(255, 255, 255, 0.06); 
            }
            &:hover{
                color: var(--tp-common-purple);
                & span{
                    color: var(--tp-common-white);
                    background-color: var(--tp-common-purple);
                }
            }
        }
        &-menu{
            & ul{
                & li{
                    list-style-type: none;
                    &:not(:last-child){
                        margin-bottom: 10px;
                    }
                    & a{
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 1;
                        color: #a6a8ab; 
                        position: relative;
                        padding-left: 14px;
                        &::after{
                            position: absolute;
                            content: '';
                            top: 9px;
                            left: 0;
                            width: 4px;
                            height: 4px;
                            border-radius: 50%;
                            background-color: #a6a8ab;
                        }
                        &:hover{
                            color: var(--tp-common-white);
                        }
                    }
                }
            }
        }
        &-contact{
            &-item{
                margin-bottom: 15px;
                & span{
                    display: block;
                    font-weight: 600;
                    font-size: 12px;
                    color: #999b9e;
                    text-transform: uppercase;
                }
                & a{
                    font-weight: 600;
                    font-size: 16px;
                    color: var(--tp-common-white);
                }
            }
        }
        &-social{
            & a{
                margin-right: 20px;
                color: rgba(255, 255, 255, 0.4);
                &:hover{
                    color: var(--tp-common-white);
                }
            }
        }
    }
    &-space{
        &-2{
            padding-left: 100px;
            @media #{$lg}{
                padding-left: 30px;
            }
            @media #{$md}{
                padding-left: 70px;
            }
            @media #{$xs}{
                padding-left: 0;
            }
        }
        &-3{
            padding-left: 80px;
            @media #{$lg}{
                padding-left: 30px;
            }
            @media #{$xs}{
                padding-left: 0;
            }
        }
    }
}

.tp-copyright-3{
    &-border{
        border-top: 1px dashed rgba(255, 255, 255, 0.2);
    }
    &-left{
        @media #{$md,$xs}{
            margin-bottom: 30px;
        }
        & p{
            font-weight: 500;
            font-size: 14px;
            color: #93959b;
            margin-bottom: 0;
            & a{
                color: var(--tp-common-white);
            }
        }
    }
    &-store{
        border-radius: 6px;
        padding: 1px 18px;
        display: inline-block;
        background-color: #2b313f;
        margin-left: 10px;
        transition: .3s;
        &:hover{
            background-color: #3a4254;
        }
        & > span{
            flex: 0 0 auto;
            margin-right: 10px;
        }
        &-info{
            & span{
                font-weight: 600;
                font-size: 12px;
                line-height: 1;
                letter-spacing: -0.02em;
                color: var(--tp-common-white);
            }
            & h5{
                font-weight: 700;
                font-size: 14px;
                line-height: 1.3;
                letter-spacing: -0.02em;
                color: var(--tp-common-white);
            }
        }
    }
    &-right{
        & > span{
            font-weight: 700;
            font-size: 12px;
            margin-right: 10px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
        }
    }
}

.tp-footer-style{
    &-5{
        & .tp-footer-2-widget-paragraph p {
            color: #525356;
        }
        & .tp-footer-2-widget-social a {
            color: var(--tp-common-black);
            border: 2px solid rgba(20, 24, 32, 0.1);
            &:hover{
                color: var(--tp-common-white);
                border-color: #277dff;
                background-color: #277dff;
            }
        }
        & .tp-footer-2-widget-title {
            @include tp-gradient((90deg, #3e86f2 0%, #ad60cb 49.48%, #ff656a 100%));
            background-clip: text;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }
        & .tp-footer-link {
            color: var(--tp-common-black);
        }
    }
}

.tp-copyright-style{
    &-2{
        &.tp-copyright-2-border {
            border-top: 1px solid #e8eaed;
        }
        & .tp-copyright-2-left p {
            color: #525356;
            & a{
                color: var(--tp-common-black);
            }
        }
        & .tp-copyright-2-middle a {
            color: var(--tp-common-black);
            &:hover{
                color: var(--tp-common-blue);
            }
        }
        & .tp-copyright-2-right ul li a {
            color: var(--tp-common-black);
            &:hover{
                color: var(--tp-common-blue);
            }
        }
    }
}