/* --- Top Bar --- */
        #top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            /* adjust as needed */
            background-color: #00698d;
            /* your color */
            z-index: 1050;
            transition: transform 0.3s ease-in-out;
        }

        /* Hide top-bar on scroll */
        #top-bar.hide {
            transform: translateY(-100%);
        }

        /* --- Site Header --- */
        #site-header {
            position: fixed;
            top: 40px;
            /* initially below top-bar */
            left: 0;
            width: 100%;
            z-index: 1040;
            background-color: #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: top 0.3s ease-in-out;
        }

        /* --- Body Margin to Prevent Overlap --- */
        body {
            margin-top: 120px;
            /* adjust if your combined header height is different */
        }