```css id="topbar01"
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM TOPBAR
   ------------------------------------------------------------
   File: /assets/css/layout/topbar.css
   Version: 1.0

   PHP:
   /includes/topbar.php

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css

   Design:
   Deep Emerald + Champagne Gold
   ============================================================ */


/* ============================================================
   01. TOPBAR
   ============================================================ */

.site-topbar {
    position: relative;

    z-index: calc(var(--z-header) + 2);

    width: 100%;
    height: var(--topbar-height);

    color: rgba(255, 255, 255, 0.78);

    background:
        var(--color-primary-deep);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    font-family:
        var(--font-ui);

    overflow: hidden;
}


/* ============================================================
   02. PREMIUM TOP ACCENT
   ============================================================ */

.site-topbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212, 175, 104, 0.22) 20%,
            rgba(212, 175, 104, 0.72) 50%,
            rgba(212, 175, 104, 0.22) 80%,
            transparent 100%
        );

    pointer-events: none;
}


/* ============================================================
   03. SUBTLE BACKGROUND GLOW
   ============================================================ */

.site-topbar::after {
    content: "";

    position: absolute;

    top: -90px;
    right: 8%;

    width: 280px;
    height: 180px;

    border-radius:
        var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(183, 138, 61, 0.09) 0%,
            rgba(183, 138, 61, 0) 70%
        );

    pointer-events: none;
}


/* ============================================================
   04. CONTAINER
   ============================================================ */

.site-topbar .container {
    position: relative;

    z-index: 2;

    height: 100%;
}


/* ============================================================
   05. INNER LAYOUT
   ============================================================ */

.topbar-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;
    height: 100%;

    gap: var(--space-6);
}


/* ============================================================
   06. LEFT SIDE
   ============================================================ */

.topbar-left {
    display: flex;

    align-items: center;

    min-width: 0;

    height: 100%;

    gap: var(--space-4);
}


/* ============================================================
   07. RIGHT SIDE
   ============================================================ */

.topbar-right {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-shrink: 0;

    height: 100%;

    gap: var(--space-4);
}


/* ============================================================
   08. COMMON TOPBAR ITEM
   ============================================================ */

.topbar-item {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    min-width: 0;

    color: rgba(255, 255, 255, 0.72);

    font-family:
        var(--font-ui);

    font-size: 0.75rem;

    font-weight:
        var(--font-medium);

    line-height: 1;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* ============================================================
   09. CLICKABLE TOPBAR ITEMS
   ============================================================ */

a.topbar-item {
    transition:
        color var(--transition),
        opacity var(--transition);
}

a.topbar-item:hover {
    color:
        var(--color-secondary-light);
}


/* ============================================================
   10. TOPBAR ICON
   ============================================================ */

.topbar-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    color:
        var(--color-secondary-light);

    font-size: 0.8125rem;

    line-height: 1;
}

.topbar-icon i {
    display: block;

    line-height: 1;
}


/* ============================================================
   11. TEXT
   ============================================================ */

.topbar-text {
    display: inline-block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   12. LABEL
   ============================================================ */

.topbar-label {
    color: rgba(255, 255, 255, 0.48);

    font-size: 0.6875rem;

    font-weight:
        var(--font-semibold);

    letter-spacing:
        var(--tracking-wide);

    text-transform: uppercase;
}


/* ============================================================
   13. DIVIDER
   ============================================================ */

.topbar-divider {
    display: block;

    width: 1px;
    height: 14px;

    flex: 0 0 1px;

    background:
        rgba(255, 255, 255, 0.12);
}


/* ============================================================
   14. EMAIL
   ============================================================ */

.topbar-email {
    max-width: 280px;
}


/* ============================================================
   15. PHONE
   ============================================================ */

.topbar-phone {
    font-weight:
        var(--font-semibold);
}


/* ============================================================
   16. GST
   ============================================================ */

.topbar-gst {
    color: rgba(255, 255, 255, 0.66);
}

.topbar-gst .topbar-text {
    color: rgba(255, 255, 255, 0.82);

    font-weight:
        var(--font-semibold);

    letter-spacing: 0.025em;
}


/* ============================================================
   17. LOCATION
   ============================================================ */

.topbar-location {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    color: rgba(255, 255, 255, 0.64);

    font-family:
        var(--font-ui);

    font-size: 0.75rem;

    font-weight:
        var(--font-medium);

    line-height: 1;

    white-space: nowrap;
}

.topbar-location .topbar-icon {
    color:
        var(--color-secondary-light);
}


/* ============================================================
   18. WHATSAPP BUTTON
   ============================================================ */

.topbar-whatsapp {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    height: 28px;

    padding:
        0
        var(--space-3);

    border:
        1px solid rgba(37, 211, 102, 0.24);

    border-radius:
        var(--radius-pill);

    color:
        rgba(255, 255, 255, 0.92);

    background:
        rgba(37, 211, 102, 0.08);

    font-family:
        var(--font-ui);

    font-size: 0.6875rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        0.025em;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


/* ============================================================
   19. WHATSAPP HOVER
   ============================================================ */

.topbar-whatsapp:hover {
    color:
        var(--text-white);

    background:
        rgba(37, 211, 102, 0.16);

    border-color:
        rgba(37, 211, 102, 0.42);

    transform:
        translateY(-1px);
}


/* ============================================================
   20. WHATSAPP ICON
   ============================================================ */

.topbar-whatsapp-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        var(--color-whatsapp);

    font-size: 0.875rem;

    line-height: 1;
}

.topbar-whatsapp-icon i {
    display: block;

    line-height: 1;
}


/* ============================================================
   21. WHATSAPP TEXT
   ============================================================ */

.topbar-whatsapp-text {
    display: inline-block;
}


/* ============================================================
   22. FOCUS STATES
   ============================================================ */

.site-topbar a:focus-visible {
    outline:
        1px solid var(--color-secondary-light);

    outline-offset: 3px;

    border-radius:
        var(--radius-sm);
}


/* ============================================================
   23. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .topbar-inner {
        gap: var(--space-8);
    }

    .topbar-left,
    .topbar-right {
        gap: var(--space-5);
    }

}


/* ============================================================
   24. STANDARD DESKTOP
   ============================================================ */

@media (
    min-width: 992px
)
and (
    max-width: 1199.98px
) {

    .topbar-left,
    .topbar-right {
        gap: var(--space-3);
    }

    .topbar-item,
    .topbar-location {
        font-size: 0.6875rem;
    }

    .topbar-email {
        max-width: 220px;
    }

}


/* ============================================================
   25. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .site-topbar {
        height: 38px;
    }

    .topbar-inner {
        gap: var(--space-4);
    }

    .topbar-left {
        flex: 1 1 auto;

        gap: var(--space-3);
    }

    .topbar-right {
        gap: var(--space-3);
    }

    .topbar-desktop-only {
        display: none !important;
    }

    .topbar-item {
        font-size: 0.6875rem;
    }

    .topbar-email {
        max-width: 230px;
    }

    .topbar-whatsapp {
        height: 26px;

        padding:
            0
            var(--space-3);
    }

}


/* ============================================================
   26. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .site-topbar {
        height: 36px;
    }

    .site-topbar .container {
        padding-right:
            var(--space-4);

        padding-left:
            var(--space-4);
    }

    .topbar-inner {
        gap: var(--space-3);
    }

    .topbar-left {
        min-width: 0;

        gap: var(--space-2);
    }

    .topbar-right {
        flex: 0 0 auto;
    }

    .topbar-email {
        max-width: 180px;
    }

    .topbar-phone {
        display: none;
    }

    .topbar-left > .topbar-divider {
        display: none;
    }

    .topbar-item {
        font-size: 0.6875rem;
    }

    .topbar-whatsapp {
        width: 28px;
        height: 28px;

        padding: 0;

        border-radius:
            var(--radius-circle);
    }

    .topbar-whatsapp-text {
        display: none;
    }

    .topbar-whatsapp-icon {
        font-size: 0.875rem;
    }

}


/* ============================================================
   27. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .topbar-email {
        max-width: 205px;
    }

}


/* ============================================================
   28. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .site-topbar .container {
        padding-right:
            var(--space-3);

        padding-left:
            var(--space-3);
    }

    .topbar-email {
        max-width: 180px;
    }

}


/* ============================================================
   29. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .topbar-item,
    .topbar-whatsapp {
        transition: none;
    }

    .topbar-whatsapp:hover {
        transform: none;
    }

}


/* ============================================================
   END OF TOPBAR
   ============================================================ */
```