/* ============================================================
   HEADER
============================================================ */
/* This section defines the styles for the header of the footer section on the home page. 
 The header is designed to be visually appealing and attention-grabbing, with a bold font and shadow effects. 
 The header is positioned prominently to clearly identify the content and draw attention to the key
  message of the section. 
 A hover effect is included to enhance interactivity, allowing the header to scale up slightly for added emphasis. 
 These styles work together to create a visually appealing and effective header that encourages
  visitors to explore further. */

/* === HEADER TEXT === */
/* #Footer_Header (Footer main heading text) */
#Footer_Header {
  position: relative;
  z-index: 2;

  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 0;

  text-align: center;

  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 1px;

  color: #ffffff;

  filter: drop-shadow(0 2px 8px rgba(200, 0, 30, 0.25));

  transition: filter 200ms ease, background 200ms ease;
}

/* === HEADER UNDERLINE — full width across footer === */
#Footer_Header::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  margin-top: 12px;

  background: linear-gradient(
    90deg,
    rgba(200, 0, 30, 0) 0%,
    rgba(200, 0, 30, 1) 30%,
    rgb(255, 255, 255) 70%,
    rgba(200, 0, 30, 0) 100%
  );
  box-shadow: 0 0 10px rgba(200, 0, 30, 0.3);
  border-radius: 2px;
}