/* Container for the risks section */
.risks {
  text-align: center;
}

/* Apply red to the specific intro h3 */
.risks .intro-statement {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--alert-color); /* Ensure red color */
  margin-bottom: 25px;
  grid-column: 1 / -1; /* Span the intro across both columns */
}

/* General styling for other h3 elements */
.risks h3 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 15px;
  color: var(--secondary-color);
}

/* Container for the two-column layout */
.risks-columns {
  background-color: var(--light-grey-color); /* Light grey background */
  border: 2px solid var(--dark-grey-color); /* Dark border */
  border-radius: 10px; /* Rounded corners */
  padding: 40px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
  width: 80%; /* Adjust width to 80% of its current size */
  margin: 0 auto;
}

/* The grid to align the rows in both columns */
.risks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  grid-template-rows: repeat(3, auto); /* Three rows */
  gap: 20px; /* Spacing between the columns and rows */
}

/* Styling for each row in the grid */
.risks-row {
  display: contents; /* Maintain the row structure for alignment */
}

/* Styling for the unordered lists */
.risks-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* List items styling */
.risks-list li {
  margin-bottom: 5px;
  position: relative;
  padding-left: 35px; /* Leave space for the icon */
  text-align: left;
  font-size: 1.2rem;
  color: var(--dark-grey-color);
}

/* Adding the Font Awesome hand icon as a bullet */
.risks-list li::before {
  content: '\f138'; /* Unicode for Font Awesome hand-point-right */
  font-family: 'Font Awesome 5 Free'; /* Font Awesome */
  font-weight: 900; /* Solid icon weight */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2rem;
  color: var(--dark-grey-color); /* Your dark color */
  padding-right: 10px;
}

/* Styling for the outro statement (risks-statement) */
.risks-statement {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark-grey-color);
  margin-top: 40px;
}