/*----------------------------
    Top Bar
----------------------------*/
.header-style-02 {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.topbar-area {
    background-color: transparent;
    border-bottom: 1px solid #D2D2D2;
    &.style-01 {
        position: relative;
        &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 35%;
            height: 100%;
            background-color: var(--main-color-one);
            z-index: -1;
            clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
        }
    }
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    div {
        .boxed-btn {
            padding: 15px 30px;
            background-color: var(--main-color-one);
            display: inline-block;
            color: $white;
            @include transition($transition);
            &:hover {
                background-color: var(--secondary-color);
                color: $white;
            }
        }
    }
    .left-content{
        .social-icon {
            display: flex;
            align-items: center;
            & ul{
                margin: 5px 0 5px 0;
                & li{
                    & img{
                        margin-right: 10px;
                        display: inline-block;
                    }
                    & a{
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .right-contnet {
        display: flex;
        align-items: center;
        & ul{
            & li{
                text-transform: uppercase;
                & img{
                    margin-right: 10px;
                }
                & a{
                    color: var(--paragraph-color);
                    font-size: 14px;
                }
            }
        }
    }
}