.dashboard-header {
  width: 100%;
  height: 80px;
  background: url('../../../../../assets/images/head/header.png') no-repeat center top;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; // Center vertically
  padding: 0 20px; // Horizontal padding

  position: relative;
  z-index: 10;
  box-sizing: border-box;

  .left-area, .right-area {
    position: absolute;
    top: 0px;
    z-index: 2;
    height: 40px; 
    display: flex;
    align-items: center;
    white-space: nowrap; // Prevent text wrapping
  }

  .left-area {
    left: 20px;
    justify-content: flex-start;
  }

  .right-area {
    right: 20px;
    justify-content: flex-end;
  }

  .time-info, .user-info {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    padding: 5px 15px;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    
    .time-text, .user-text {
      font-family: 'Arial', sans-serif;
      font-weight: 500;
    }
  }

  .center-area {
    width: 100%; // Take full width
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100%;
    margin-top: 10px;

    .header-title {
      font-size: 32px;
      color: #fff;
      font-weight: bold;
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
      text-align: center;
      white-space: nowrap;
      margin: 0 10vw; // Increased spacing to push menus further outward
      margin-top: -15px; 
    }

    .menu-group {
      display: flex;
      gap: 50px;
      margin-top: 25px; // Move menus further down

    
      .menu-item1, .menu-item2{
      width: 180px; // Approx width from image
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      background: url('../../../../../assets/images/head/menu1.png') no-repeat center;
      background-size: 100% 100%;
      transition: all 0.3s;
      
      &:hover {
        filter: brightness(1.2);
      }

      &.active {
        background: url('../../../../../assets/images/head/menu2.png') no-repeat center;
        background-size: 100% 100%;
      }
    }
      .menu-item2{
        background: url('../../../../../assets/images/head/menu3.png') no-repeat center;
        background-size: 100% 100%;
        &.active {
          background: url('../../../../../assets/images/head/menu4.png') no-repeat center;
        }
      }
    }
  }
}