@use '../../utils' as *;
/*----------------------------------------*/
/*  3.1 Header Style 3
/*----------------------------------------*/
.header {
    &-top {
        &-right {
            & span {
                font-size: 14px;
                line-height: 1.5;
                color: #DAD2CE;
            }
        }
    }
    &__social {
        & ul {
            display: flex;
            align-items: center;
            & li {
                list-style: none;
                margin-left: 15px;
                padding-left: 15px;
                position: relative;
                @media #{$md} {
                    margin-left: 8px;
                    padding-left: 8px; 
                }
                &:first-child {
                    &::before {
                        display: none;
                    }
                }
                &::before {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 16px;
                    background-color: rgba(218, 210, 206, 0.2);
                }
                &  a {
                    font-size: 14px;
                    line-height: 150%;
                    color: #DAD2CE;
                    padding: 11px 0;
                    display: inline-block;
                    & i {
                        font-size: 14px;
                        color: #DAD2CE;
                    }
                }
            }
        }
    }
    &__btn-3 {
        & .tp-btn {
            font-weight: 500;
            padding: 15px 30px;
        }
    }
    &__border-3 {
        position: relative;
        &::before {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg, rgba(205,95,55,0) 0%, rgba(205,95,55,0.4) 50%, rgba(205,95,55,0) 100%);
            @media #{$lg,$md,$xs} {
                display: none;
            }
        }
        & .offcanvas-open-btn i {
            background-color: rgba(205, 95, 55, 1);
            @include transition(.3s);
            &:hover {
                background-color: rgba(205, 95, 55, .8);
            }
        }
    }
}
.main-menu-3 {
    margin-left: 30px;
    &.main-menu ul li > a {
        color: var(--tp-text-body);
        padding: 41px 0;
    }
}
.header-2 {
    &.header-sticky {
        & .header__search i,
        & .header__phone i {
            background-color: rgba(205, 95, 55, 1);
            &:hover {
                box-shadow: inset 0 0 0 40px  var(--tp-heading-primary);
                color: var(--tp-common-white);
            }
        }
    }
}