.header-right{
    border-left: 1px solid white;
}
.project-filter{
    background: rgba(217, 217, 217, 0.2);
}
.project-filter-top{
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 51px;
    border-bottom: 1px solid white;
}
.project-filter-top .project-filter-title{
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    color: #FFFFFF;
}
.project-filter-buttons{
    display: flex;
    gap: 10px;
    position: fixed;
    top: 10px;
    right: 20px;
}
.project-filter-button{
    background: rgba(217, 217, 217, 0.2);
    border: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #FFFFFF;
}
.project-filter-button:hover,
.project-filter-button.active{
    background: rgba(217, 217, 217, 0.8);
    color: #2D2827;
}
.project-filter-bottom{
    height: 49px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow: auto;
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */
}
.project-filter-bottom::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
.project-tags{
    display: inline-flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.project-tags li a{
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #858C93;
}
.project-tags li a:hover,
.project-tags li a.active{
    color: #FFFFFF;
}

.projects-page{
    padding: 0 20px; 
}

@media screen and (max-width: 1024px){
    .header-right{
        border-left: none;
    }
    .header-right .project-filter{
        display: none;
    }
    body:not(.home):not(.single-work) .site-main{
        padding-top: var(--header-height);
    }
    .projects-page{
        padding: 0 14px;
    }
    .project-filter-mobile{
        display: block;
        padding: 14px 0 56px;
    }
    .project-filter-mobile .project-filter-title{
        font-weight: 500;
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        text-transform: uppercase;
        padding: 14px 0;
    }
    .project-filter-mobile .mobile-project-tags{
        display: flex;
        gap: 5px;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 28px;
    }
    .project-filter-mobile .mobile-project-tags a{
        color: #858C93;
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        opacity: 0.4;
    }
    .project-filter-mobile .mobile-project-tags a.active{
        color: #FFFFFF;
        opacity: 1; 
    }
    .project-filter-buttons{
        position: sticky;
        z-index: 11;
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 60px 14px 14px;
    }
    .list-project-tags{
        color: #858C93;
    }
    .project-item .project-item-list .project-col.index{
        width: 15px;
    }
}
@media screen and (max-width: 850px){
    .project-filter-mobile .mobile-project-tags{
       flex-direction: column;
       gap: 5px;
    }
    .project-filter-mobile .mobile-project-tags li{
        width: 100%;
    }
}