.page-header-container {
  margin-bottom: 1.5rem;
}

.page-header {
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
}

.page-description-container p,
.duties-content p,
.organization-content p,
.shakman-exempt-position-content p,
.other-details-container .custom-accordion .accordion-content li,
.other-details-container .custom-accordion .accordion-content p {
  font-size: 16px;
  line-height: 26px;
  color: #4d4d4d;
}

.duties-content,
.organization-content,
.shakman-exempt-position-content {
  margin-top: 3rem;
}

.duties-content--header,
.organization-content--header,
.shakman-exempt-position-content--header {
  font-size: 32px;
  font-weight: 700;
  line-height: 39px;
  margin-bottom: 1.5rem;
}

.other-details-container {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.shakman-exempt-position-content {
  margin-top: 4rem;
}

/* --- Custom Accordion Styles START --- */

.custom-accordion {
  width: 100%;
  margin: 1rem auto;
  border: none;
}

.accordion-item {
  border: none;
  margin-bottom: 20px;
}

/* Hide the default checkbox */
.accordion-toggle {
  display: none;
}

/* Style the title/label to be clickable */
.accordion-title {
  display: block;
  padding: 15px 20px;
  background-color: #f5f7fa;
  color: #4d4d4d;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative; /* For the icon */
  padding-right: 50px; /* Space for the icon */
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}

.accordion-title:hover {
  background-color: #dce4ef;
}

/* The content panel that shows/hides */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 2rem;
  background-color: #f5f7fa;
  color: #4d4d4d;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-content ul {
  margin-left: 0;
}

/* When the checkbox is checked, expand the content */
.accordion-toggle:checked ~ .accordion-content {
  max-height: 100vh;
  padding: 1rem 2rem;
}

.accordion-title-and-icon-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

/* Create the chevron icon using an embedded SVG */
.accordion-title::after {
  content: "";
  position: absolute;
  right: 20px; /* Position from the right edge */
  top: 50%; /* Center vertically */

  /* The SVG icon itself */
  width: 28px;
  height: 28px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2341B6E6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* Initial state (pointing right) and animation */
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
}

/* When the accordion is open, rotate the chevron */
.accordion-toggle:checked ~ .accordion-title::after {
  transform: translateY(-50%) rotate(90deg); /* Rotate 90 degrees to point down */
}

.accordion-title-icon {
  color: #41b6e6;
  height: 45px;
  width: 45px;
}

/* --- Custom Accordion Styles END --- */

.apply-now--btn {
  text-decoration: none;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  border-radius: 0.375rem;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding: 0.75rem;
  margin-top: 1rem;
}

.apply-now--btn:hover {
  background-color: #1daae2;
}

.apply-now--btn:hover,
.apply-now--btn:visited {
  color: #fff;
}

.apply-now-btn-and-shakman-exempt-container {
  margin-bottom: 5rem;
}