/* ============================================================
   CONTENT WRAPPER
============================================================ */
/* This CSS file defines the styles for the welcome content section of the home page. 
 It includes styles for the content wrapper, heading row, main heading, and line separator. 
 The content wrapper is designed to align the welcome message and any accompanying elements
 in a visually appealing way, while the heading row organizes the main heading and any 
 additional elements such as icons or decorative accents. 
 The main heading is styled to be bold and attention-grabbing, with a responsive font size that
 adjusts based on the screen size. 
 The line separator adds a visual break between the heading and any subsequent content, using a
 gradient effect to enhance the overall design of the section. */
.welcome__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;

  grid-column: 1;
  text-align: left;

  animation: fadeInLeft 0.7s ease-out 0.2s both;
}

/* ============================================================
   HEADING ROW
============================================================ */

/* Heading row wrapper */
.welcome__heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 45px;
}

/* Main heading */
.welcome__heading {
  margin: 0;
  padding: 0;

  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;

  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

  flex: 1;
}

/* ============================================================
   LINE SEPARATOR
============================================================ */

/* Gradient line */
.line_separator {
  flex-basis: 100%;
  width: 100%;
  height: 3px;
  margin: 10px 0 18px 0;

  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%
  );

  border-radius: 2px;
  box-shadow: 0 0 10px 2px rgba(200, 0, 30, 0.4);
}