body {
  background-color: #f8f9fa;
}

.banner {
  position: relative;
  background: url("../../assets/img/bg_pheader_2.jpg") center/cover no-repeat;
  height: 200px; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section h1 {
  font-weight: 700;
}

/* Section Styles */
.content-section {
  padding: 40px 20px;
  background-color: #fff;
}

.section-title {
  text-align: center;
  font-weight: 500;
  margin-bottom: 20px;
  color: #555;
}

hr {
  margin: 20px 0;
}

h6 {
  font-weight: bold;
}

table th,
table td {
  vertical-align: middle;
}

.doc-card {
  background: #fff;
  border-radius: 4px;
  padding: 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.griev-table th,
.griev-table td {
  border: 1px solid #222;
  vertical-align: top;
}

a.custom-link {
  color: #0b5ed7;
  text-decoration: underline;
}

.inside-list {
  margin-top: 8px;
}

/* Card / panel that contains the content */
.content-panel {
  background: #fff;
  border-radius: 4px;
  padding: 28px 30px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
  max-width: 980px;
  margin: 0 auto;
}

/* Heading style to match screenshot: bold, slightly larger and underlined */
.section-head {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 18px;
  display: inline-block;
  border-bottom: 2px solid #0b2d54;
  /* dark blue underline */
  padding-bottom: 6px;
}

/* Subheading (Default of TM/CM) */
.subhead {
  font-weight: 600;
  margin-top: 6px;
  margin-bottom: 12px;
  color: #222;
}

p.lead-paragraph {
  margin-bottom: 18px;
  line-height: 1.55;
  color: #333;
}

/* Lists appearance: small bullets & spacing like screenshot */
.info-list,
.info-list-2 {
  margin-left: 1rem;
  margin-bottom: 18px;
  color: #222;
  line-height: 1.6;
}

.info-list li,
.info-list-2 li {
  margin-bottom: 8px;
}

/* make bullets a bit smaller */
.info-list li::marker,
.info-list-2 li::marker {
  font-size: 0.9em;
}

/* Make the first small heading inside panel less prominent */
.small-note {
  color: #4b4b4b;
  margin-bottom: 10px;
  font-weight: 600;
}

@media (max-width: 576px) {
  .content-panel {
    padding: 18px;
  }

  .section-head {
    font-size: 1rem;
  }
}
