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

/*----------------------------------------*/
/*  6.4 Footer Style 4
/*----------------------------------------*/

.#{$theme-prifix}-footer{
    $self : &;
    &-style-4{
        #{$self}{
            &-widget{
                & ul{
                    & li{
                        & a{
                            &:hover{
                                color: var(--tp-common-black);
                                &::after{
                                    background-color: var(--tp-common-black);
                                }
                            }
                        }
                    }
                }
            }
            &-logo{
                margin-bottom: 13px;
            }
            &-social-4{
                .tp-footer-social-title-4{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 12px;
                    margin-bottom: 12px;
                }
                & a{
                    border-color: var(--tp-common-white);
                    box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.1);

                    &:hover{
                        color: var(--tp-common-white);
                        background-color: var(--tp-common-black);
                        border-color: var(--tp-common-black);
                        box-shadow: none;
                    }
                }
            }
        }
    }
    &-subscribe{
        & p{
            font-size: 15px;
        }
        &-input{
            position: relative;
            & input{
                height: 54px;
                background-color: var(--tp-common-white);
                border-color: var(--tp-common-white);
                box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.1);
                padding-right: 130px;
                @include tp-placeholder{
                    color: #7D7F82;
                }

                &:focus{
                    border-color: var(--tp-common-white);
                }
            }
            & button{
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                font-weight: 500;
                font-size: 16px;
                line-height: 23px;
                color: var(--tp-common-white);
                color: var(--tp-common-white);
                background-color: var(--tp-common-black);
                box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.1);
                padding: 16px 30px;
                height: 54px;

                &:hover{
                    background-color: var(--tp-theme-brown);
                }
            }
        }
    }
   
    
}

/* footer col design for home 4 */
.footer-col-4{
    &-1{

    }
    &-2{
        padding-left: 23px;
        @media #{$xs}{
            padding-left: 0;
        }
    }
    &-3{
        padding-left: 85px;
        @media #{$lg, $md,  $sm, $xs}{
            padding-left: 0;
        }
    }
    &-4{
        padding-left: 48px;
        @media #{$lg, $md, $sm, $xs}{
            padding-left: 0;
        }
    }
}