/* Sticky Header Styles */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* Ensure the body doesn't jump when the header becomes sticky if we were using fixed. 
   Since we use sticky, it's relative until it hits the top.
   But typically users want it fixed at the VERY top of the window always?
   If so, position: fixed is better, but then we need to handle spacing.
   Sticky is safer for now as it keeps layout flow. 
   However, user said "fix haeder bar only change button content but header fix every time".
   If they mean only the orange bar is fixed vs the whole thing.
   "set this header over button HOME TO ABOUT US page" implies the menu bar.
*/

/* Making the orange menu bar fixed at the top on scroll, or always? 
   Usually in these designs, the top logo part scrolls away and the menu sticks.
   OR the whole header sticks. 
   TSCTUP site: The whole header seems to scroll, but the menu might stick? 
   Let's check the user request again: "fix haeder bar only change button content but header fix every time".
   This usually means a fixed header.
   
   I'll add .sticky-header class to stye.css
*/

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* If browser doesn't support sticky or for better "fixed" behavior (fully fixed from start) */
/* .fixed-top is a bootstrap class, but we can define our own if needed. */