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

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/

/* footer col design for home 1 */
.footer {
    &-col{
        &-1{
            margin-right: -20px;
            @media #{$xs} {
                margin-right: 0;
            }
        }
        &-2 {
            padding-left: 145px;
            margin-right: -50px;
            position: relative;
            @media #{$xl} {
                padding-left: 105px;
            }
            @media #{$lg} {
                padding-left: 30px;
            }
            @media #{$md} {
                padding-left: 30px;
                margin-right: 0;
            }
            @media #{$xs} {
                margin-right: 0;
                padding-left: 0;
            }
            &::before {
                position: absolute;
                content: '';
                left: 80px;
                top: 57%;
                transform: translateY(-50%);
                height: 516px;
                width: 1px;
                background: rgba(72, 30, 11, 0.1);
                @media #{$lg,$md,$xs} {
                    display: none;
                }
            }
        }
        &-3 {
            padding-left: 135px;
            position: relative;
            @media #{$lg} {
                padding-left: 50px;
            }
            @media #{$md,$xs} {
                padding-left: 0px;
            }
            &::before {
                position: absolute;
                content: '';
                left: 80px;
                top: 52%;
                transform: translateY(-50%);
                height: 516px;
                width: 1px;
                background: rgba(72, 30, 11, 0.1);
                @media #{$lg,$md,$xs} {
                    display: none;
                }
            }
            &::after {
                position: absolute;
                content: '';
                left: 80px;
                top: 52%;
                transform: translateY(-50%);
                height: 1px;
                width: 768px;
                background: rgba(72, 30, 11, 0.1);
                @media #{$xxxl} {
                    width: 100%;
                }
                @media #{$xxl} {
                    width: 80%;
                }
                @media #{$xl} {
                    width: 90%;
                }
                @media #{$lg,$md,$xs} {
                    display: none;
                }
            }
            & .footer-link {
                padding-bottom: 50px;
                & ul {
                    & li {
                        float: left;
                        width: 33.33%;
                    }
                }
            }
        }
    }
}

.footer {
    &-logo {
        margin-bottom: 28px;
    }
    &-info {
        & p {
            font-size: 20px;
            line-height: 1.5;
            margin-bottom: 30px;
            @media #{$lg} {
                font-size: 18px;
            }
            & br {
                @media #{$xs} {
                    display: none;
                }
            }
        }
    }
    &-social {
        & a {
            display: inline-block;
            @include square-btn (56px, $circle: true);
            border: 1px solid rgba(72, 30, 11, 0.1);
            color: var(--tp-heading-primary);
            font-size: 20px;
            margin-right: 18px;
            &:last-child {
                margin-right: 0;
            }
            @media #{$xl,$lg} {
                margin-right: 12px;
            }
            &:hover {
                background-color: #CD5F37;
                color: var(--tp-common-white);
            }
        }
    }
    &-title {
        font-weight: 700;
        font-size: 24px;
        line-height: 1.5;
        color: var(--tp-heading-primary);
        margin-bottom: 35px;
        display: inline-block;
    }
    &-link {
        & li {
            list-style: none;
            margin-bottom: 25px;
            &:last-child {
                margin-bottom: 0;
            }
            & a {
                font-size: 20px;
                line-height: 1;
                color: var(--tp-text-body);
                display: inline-block;
                position: relative;
                @media #{$lg} {
                    font-size: 18px;
                }
                &:hover {
                    color: var(--tp-theme-primary);
                    &::before {
                        opacity: 1;
                        width: 100%;
                        left: 0;
                        right: auto;
                        transition: all 0.2s linear;
                    }
                }
                &::before {
                    position: absolute;
                    content: "";
                    width: 0;
                    height: 1px;
                    background: #CD5F37;
                    left: auto;
                    right: 0;
                    bottom: -1px;
                    opacity: 0;
                    transition: all 0.3s linear;
                }
            }
        }
    }
    &-input {
        width: 410px;
        & input {
            width: 100%;
            height: 80px;
            background-color: rgba(205, 95, 55, .1);
            border: none;
            font-size: 20px;
            padding: 10px 40px;
            border: 1px solid transparent;
            @include tp-placeholder {
                color: #6A5952;
                font-size: 20px;
                border: 1px solid transparent;
            }
            &:focus {
                border-color: var(--tp-theme-primary);
                &::placeholder {
                    font-size: 0;
                }
            }
        }
    }
    &-newsletter {
        &-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        &-submit {
            margin-left: 6px;
            & button {
                height: 80px;
                width: 80px;
                line-height: 80px;
                background-color: var(--tp-theme-primary);
                display: inline-block;
                font-size: 28px;
                color: var(--tp-common-white);
                &:hover {
                    box-shadow: inset 0 0 0 60px #FAEFEB;
                    color: var(--tp-theme-primary);
                }
                & span {
                    display: inline-block;
                }
            }
            
        }
    }
    &-copyright {
        & span {
            font-size: 18px;
            line-height: 1.5;
            color: var(--tp-text-body);
            display: inline-block;
            padding: 22px 0;
        }
    }
    &-bottom-1 {
        border-top: 1px solid  rgba(72, 30, 11, 0.1);
        margin-right: 95px;
        margin-left: 95px;
        @media #{$xs} {
            margin-right: 0;
            margin-left: 0;
        }
    }
}