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

/*----------------------------------------*/
/*  6.2 Footer Style 2
/*----------------------------------------*/

.dgm-footer{
    &-widget{
        &-paragraph{
            & p{
                font-weight: 500;
                font-size: 16px;
                line-height: 1.5;
                color: var(--tp-common-white);
            }
            &.color-style{
                & p {
                    color: #afb2b8;
                }
            }
        }
        &-social{
            & a{
                height: 40px;
                width: 40px;
                line-height: 33px;
                border-radius: 50%;
                display: inline-block;
                text-align: center;
                color: rgba(255, 255, 255, 0.5);
                border: 2px solid rgba(255, 255, 255, 0.1);
                &:not(:last-child){
                    margin-right: 6px;
                }
                &:hover{
                    color: var(--tp-common-black);
                    border-color: var(--tp-common-green-regular);
                    background-color: var(--tp-common-green-regular);
                }
            }
        }
        &-title{
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 25px;
            color: var(--tp-common-white);
            font-family: var(--tp-ff-grotesk);
        }
        &-menu{
            & ul{
                & li{
                    list-style-type: none;
                    &:not(:last-child){
                        margin-bottom: 8px;
                    }
                    & a{
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 1;
                        color: #afb2b8;
                        &:hover{
                            color: var(--tp-common-green-regular);
                        }
                    }
                }
            }
        }
        &-input{
            & input{
                font-weight: 400;
                font-size: 15px;
                line-height: 1;
                padding-left: 60px;
                padding-right: 50px;
                border-radius: 10px;
                background-color: #1e1e1e;
                color: var(--tp-common-white);
                border: 1px solid transparent;
                @include tp-placeholder{
                    font-weight: 400;
                    font-size: 15px;
                    line-height: 1;
                    color: #a1a4aa;
                }
                &:focus{
                    border-color:  var(--tp-common-green-regular);
                }
            }
            & .input-icon{
                position: absolute;
                left: 30px;
                top: 50%;
                transform: translateY(-55%);
            }
            & .input-button{
                position: absolute;
                right: 23px;
                top: 50%;
                transform: translateY(-50%);
                & span{
                    & svg{
                        color: var(--tp-common-green-regular);
                    }
                }
                & .animated-border-box.radius-style-2{
                    border-radius: 8px;
                    & .tp-btn-gradient.sm {
                    border-radius: 8px;
                    }
                }
            }
        }
    }
    &-col{
        &-1{
            padding-right: 150px;
            @media #{$xl}{
                padding-right: 100px;
            }
            @media #{$lg}{
                padding-right: 60px;
            }
            @media #{$md}{
                padding-right: 35px;
            }
            @media #{$xs}{
                padding-right: 0px;
            }
        }
        &-2{
            padding-left: 40px;
            @media #{$lg,$md,$xs}{
                padding-left: 0;
            }
        }
        &-3{
            padding-left: 50px;
            @media #{$lg}{
                padding-left: 20px;
            }
            @media #{$xs}{
                padding-left: 0;
            }
        }
        &-4{
            padding-left: 65px;
            @media #{$lg}{
                padding-left: 25px;
            }
            @media #{$md,$xs}{
                padding-left: 0px;
            }
        }
    }
    &-bg{
        overflow: hidden;
        border-radius: 24px;
        &::after{
            position: absolute;
            top: 0;
            left: 0;
            width: 34%;
            height: 100%;
            content: "";
            background-color: #212121;
            @media #{$xxl}{
                width: 29%;
            }
            @media #{$xl}{
                width: 32%;
            }
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
    }
}
.tp-copyright-2{
    &-left{
        & p{
            font-weight: 500;
            font-size: 14px;
            color: #828386;
            margin-bottom: 0;
            & a{
                color: var(--tp-common-white);
            }
        }
    }
    &-middle{
        padding-left: 40px;
        & a{
            font-weight: 500;
            font-size: 14px;
            line-height: 1.71;
            color: #afb2b8;
            transition: all .3s;
            & span{
                margin-right: 5px;
                display: inline-block;
                transform: translateY(-1px);
            }
            &:hover{
                color: var(--tp-common-green-regular);
            }
        }
    }
    &-right{
        & ul{
            & li{
                display: inline-block;
                list-style-type: none;
                &:not(:first-child){
                    margin-left: 30px; 
                    @media #{$lg}{
                        margin-left: 20px;
                    }
                }
                & a{
                    font-weight: 500;
                    font-size: 14px;
                    color: #afb2b8;
                    transition: all .3s;
                    &:hover{
                        color: var(--tp-common-green-regular);
                    }
                }
            }
        }
    }
    &-border{
        padding-top: 22px;
        padding-bottom: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        &.app-copyright-border{
            border-color: rgba(33, 33, 45, 0.06);
        }
    }
}