/* =========================================
   TOP-BAR COMPONENT
========================================= */
.top-bar {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    background: var(--bg-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1001;
    height: 40px;
}

/* در صورتی که کلاس‌های داخلی مثل top-right-section در فایل شما ویژگی خاصی دارند 
   به طور پیش‌فرض در چیدمان flex پدر خود (top-bar) به درستی قرار می‌گیرند. */