header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 1s ease-in-out;
    height: @header-height;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;

    @media (max-width: 992px) {
        background-color: @surface;
    }

    @media (max-width: 768px) {
        height: @header-height-max-768;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .header-content-right {
            text-align: right;
        }
    }

    .brand {
        display: block;
        margin: @space-md 0;
        max-width: 300px;

        @media (max-width: 992px) {
            width: 80%;
        }
    }
}
