/*
.container {
  width: 90%;
  max-width: 800px;
  height: 80vh;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 10px;
  padding: 20px;
}
*/

.custom-accordion-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1*var(--bs-gutter-y));
  margin-right: calc(-0.5*var(--bs-gutter-x));
  margin-left: calc(-0.5*var(--bs-gutter-x));
  justify-content: center !important;
}

.custom-accordion-mb-2 {
  margin-bottom: .5rem !important;
}

@media (min-width: 768px) {
  .custom-accordion-col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}

.custom-accordion-text-center {
  text-align: center !important;
}

.custom-accordion-mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Accordion Wrapper */
.accordion {
  max-width: 1000px;
}

/* Hide the input checkbox */
.accordion input {
  display: none;
}

/* Style for labels (headers) */
.accordion label {
  display: block;
  font-weight: bold;
  padding: 15px;
  cursor: pointer;
  background: transparent;
  position: relative;
  transition: color 0.3s;
}

/* Change text color on hover */
.accordion label:hover {
  color: #007bff;
}

/* Add an arrow indicator */
.accordion label::after {
  content: "\25BE";
  /* Downward arrow */
  position: absolute;
  right: 20px;
  transition: transform 0.3s;
}

/* Rotate arrow when active */
.accordion input:checked+label::after {
  transform: rotate(180deg);
}

/* Style for content */
.accordion .content {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  transition: max-height 0.3s ease-in-out;
  padding: 0 15px;
}

/* Show content when checkbox is checked */
.accordion input:checked+label+.content {
  max-height: 500px;
  padding: 15px;
}

/* Reduce spacing between lines inside the accordion */
.accordion .content p {
  margin: 5px 0;
  line-height: 1.2;
}