.accordion-item {
  margin-bottom: 10px;
  position: relative;
}

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.accordion-header .arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.accordion-header .arrow::before {
  content: "\25BC"; /* Unicode for down-pointing triangle (▼) */
}

.accordion-header .arrow.up::before {
  content: "\25B2"; /* Unicode for up-pointing triangle (▲) */
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.active {
  display: block;
}

.accordion-content p {
  margin: 0;
}