/* Mitindo ya Jumla (Top-Header) */
            .top-header {
                background-color: #1a202c; /* Rangi nyeusi kidogo */
                color: #e2e8f0; /* Maandishi mepesi */
                padding: 10px 0;
                font-size: 0.85em;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1002; /* Juu kuliko header kuu */
                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
                display: flex; /* Kuwezesha Flexbox */
                align-items: center; /* Panga vitu katikati wima */
                height: 40px; /* Urefu maalum */
            }

            .top-header-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px; /* Padding ya kushoto/kulia */
            }

            .top-header-info span {
                margin-right: 20px;
                display: inline-flex;
                align-items: center;
            }

            .top-header-info i {
                margin-right: 8px;
                color: var(--primary-orange); /* Rangi ya ikoni */
            }

            .top-header-right-items {
                display: flex;
                align-items: center;
                gap: 20px; /* Nafasi kati ya vipengele vya kulia */
            }

            .top-header-search {
                display: flex;
                align-items: center;
                background-color: #2d3748; /* Background nyeusi kidogo kwa search */
                border-radius: 5px;
                overflow: hidden;
            }

            .top-header-search input {
                border: none;
                padding: 8px 10px;
                background-color: transparent;
                color: #e2e8f0;
                outline: none;
                width: 150px; /* Upana wa input */
            }

            .top-header-search input::placeholder {
                color: #a0aec0;
            }

            .top-header-search button {
                background-color: var(--accent-blue);
                border: none;
                color: var(--white);
                padding: 8px 12px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            .top-header-search button:hover {
                background-color: #2b6cb0;
            }

            /* Mitindo ya Lugha Kwenye Top Header */
            .language-switcher-top {
                display: flex;
                align-items: center;
            }

            .language-switcher-top a {
                text-decoration: none;
                color: #a0aec0;
                font-weight: 600;
                padding: 5px 8px;
                border-radius: 5px;
                transition: background-color 0.3s ease, color 0.3s ease;
                font-size: 0.85em;
            }

            .language-switcher-top a:hover {
                background-color: #4a5568;
                color: var(--white);
            }

            .language-switcher-top a.active {
                background-color: var(--primary-orange);
                color: var(--white);
            }

            .language-switcher-top span {
                color: #a0aec0;
                margin: 0 5px;
            }

            /* Marekebisho kwa ajili ya Header Kuu na Body */
            body {
                padding-top: 120px; /* 40px (Top Header) + 80px (Main Header) */
            }

            .header {
                top: 40px; /* Anza baada ya top header */
                z-index: 1000; /* Baki chini ya top-header */
            }

            /* Media Queries kwa Responsiveness (Top-Header) */
         @media (max-width: 768px) {
    .top-header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: auto;
        padding: 8px 15px;
    }

    .top-header-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .top-header-info {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.85em;
        align-items: center;
    }

    .top-header-info span {
        margin-right: 10px;
        white-space: nowrap;
    }

    .top-header-right-items {
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }

    .top-header-search input {
        width: 100px;
        max-width: 120px;
        font-size: 0.85em;
    }

    .top-header-search button {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    .language-switcher-top {
        display: flex;
        gap: 5px;
        white-space: nowrap;
    }

    .language-switcher-top a {
        padding: 4px 6px;
        font-size: 0.75em;
    }

    body {
        padding-top: 100px; /* Adjust if needed */
    }

    .header {
        top: 40px;
    }
}
 @media (max-width: 768px) {
    .top-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        height: auto;
    }

    .top-header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        width: 100%;
    }

    .top-header-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1;
        font-size: 0.75em;
        white-space: nowrap;
    }

    .top-header-info span {
        margin-right: 5px;
        display: inline-flex;
        align-items: center;
    }

    .top-header-right-items {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .top-header-search {
        display: flex;
        align-items: center;
        background-color: #2d3748;
        border-radius: 3px;
        overflow: hidden;
    }

    .top-header-search input {
        width: 80px;
        padding: 5px;
        font-size: 0.75em;
    }

    .top-header-search button {
        padding: 5px 8px;
        font-size: 0.75em;
    }

    .language-switcher-top a {
        padding: 3px 5px;
        font-size: 0.75em;
    }

    .language-switcher-top span {
        margin: 0 2px;
    }

    body {
        padding-top: 100px;
    }

    .header {
        top: 40px;
    }
}