/* ============================================================
   SECTION LABEL
============================================================ */
/* This CSS file defines the styles for the section label in the welcome section.
 The section label is positioned prominently to clearly identify the content and draw 
 attention to the welcome message. It features a gradient background and shadow effects
 that complement the overall cybersecurity aesthetic of the section. */

/* Section label */
.content-section--welcome .content-section__label01 {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 10;

  display: inline-block;
  margin: 0;
  padding: 10px 24px;

  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;

  color: #fff;
  background: linear-gradient(135deg, rgb(200, 0, 30) 0%, rgb(0, 0, 0) 100%);

  box-shadow:
    0 4px 15px rgb(255, 255, 255),
    0 0 30px rgba(255, 255, 255, 0.2);

  transition: all 200ms ease;
}

/* Section label hover */
.content-section--welcome .content-section__label01:hover {
  transform: translateX(-5px) scale(1.02);
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 0, 0) 100%);
  box-shadow:
    0 6px 20px rgba(255, 255, 255, 0.6),
    0 0 40px rgba(255, 255, 255, 0.25);
}

/* Section label hover triggered by section hover */
#section-welcome:hover .content-section__label01 {
  transform: translateX(-5px) scale(1.02);
  background: linear-gradient(135deg, rgb(0, 110, 141) 0%, rgb(0, 0, 0) 100%);
  box-shadow:
    0 6px 20px rgba(255, 255, 255, 0.6),
    0 0 40px rgba(255, 255, 255, 0.25);
}