.service-details > label{
  position: relative;
  color:var(--primary-accent);
  font-size: 1.2rem;
  transition: 0.3s;
  cursor:pointer;
}
.service-details > label:hover{
  text-decoration: underline;
}

.toggle {
  appearance: none;
  display: none;
}

.toggle+label:after {
  position: absolute;
  top:50%;
  right:15px;
  transform: translateY(-50%);
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-down ms-3" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
  line-height: 0;
  transition: transform 0.3s;
}
.toggle:checked+label{
  color:#5c6f82;
}

.toggle:checked+label:after {
  transform: translateY(-50%) scaleY(-1);
}

.toggle~.details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s, opacity .3s;
}

.toggle:checked~.details {
  max-height: 500vh;
  opacity: 1;
  background:linear-gradient(0deg,rgba(253,196,0,.4),transparent);
  border-radius:0 0 10px 10px;
}