/* ============================================================
   HEADER ITEM
============================================================ */
/* This section defines the styles for the header item in the side menu of the home page. 
 The header is designed to be visually distinct and attention-grabbing, with a bold font, vibrant color,
  and centered text. 
 The use of a bottom border adds a stylish accent to the header, while the padding creates space
  below the text for improved readability and visual appeal. 
 These styles work together to create an effective and attractive header that enhances the presentation
  of the side menu and encourages users to explore its contents. */
#sideMenu li h1 {
  margin: 0 auto;
  padding: 11px 26px;

  display: inline-block;

  border-radius: 999px;
  border: 3px solid rgb(255, 0, 38);

  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;

  color: #fff;
  background: linear-gradient(135deg, rgb(184, 0, 0) 0%, rgb(60, 0, 0) 60%, rgb(10, 0, 0) 100%);

  box-shadow:
    0 4px 20px rgba(200, 0, 30, 0.45),
    0 0 40px rgba(200, 0, 30, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 20px rgba(200, 0, 30, 0.1);

  text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);

  cursor: pointer;
  transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

/* SERVICES MENU pill hover */
#sideMenu li h1:hover {
  background: linear-gradient(135deg, rgb(0, 143, 175) 0%, rgb(0, 62, 85) 60%, rgb(20, 0, 0) 100%);
  border-color: rgba(0, 122, 209, 0.8);
  box-shadow:
    0 6px 30px rgba(0, 191, 255, 0.7),
    0 0 60px rgba(0, 137, 200, 0.3),
    inset 0 1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 30px rgba(255, 60, 60, 0.15);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
}

/* RESET */
#sideMenu li:first-child {
  background: transparent;
  cursor: default;
  margin-bottom: 16px;
  text-align: center;
}

/* RESET HOVER — keep first-child li itself neutral, pill handles its own hover */
#sideMenu li:first-child:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* RESET UNDERLINE */
#sideMenu li:first-child::after {
  display: none;
}

/* RESET ARROW */
#sideMenu li:first-child::before {
  display: none;
}