.faq__sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq__sections>h2 {
  color: var(--text-primary);
  font-size: var(--fs-5);
  font-weight: 500;
}

.accordion {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 1rem;
}

@media(max-width: 991px) {
  .accordion {
    grid-template-columns: 1fr;
  }
}

.accordion .accordion-item {
  position: relative;
  background-color: var(--bg-secondary);
  border-radius: var(--brad-6);
  padding: 1rem 1.5rem;
  background-clip: padding-box;
}

.accordion .accordion-item:last-child {
  border: 0;
}

.accordion button {
  position: relative;
  display: block;
  background: none;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 44px;
  color: var(--text-secondary);
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: color 0.2s;
  font-size: var(--fs-6);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
}

.accordion button .icon::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' transform='matrix(1 0 0 -1 0 40)' fill='%235021CA'/%3E%3Cpath d='M12.2557 16.0646L12.7798 15.5369C12.9448 15.3721 13.1642 15.2813 13.3988 15.2813C13.6332 15.2813 13.8529 15.3721 14.0178 15.5369L19.9964 21.5157L25.9819 15.5303C26.1466 15.3654 26.3663 15.2748 26.6007 15.2748C26.8351 15.2748 27.055 15.3654 27.2198 15.5303L27.744 16.0548C28.0853 16.3958 28.0853 16.9514 27.744 17.2925L20.6176 24.4445C20.4529 24.6092 20.2334 24.7253 19.9969 24.7253L19.9942 24.7253C19.7597 24.7253 19.5402 24.6091 19.3755 24.4445L12.2557 17.3119C12.0908 17.1472 12.0003 16.9211 12 16.6867C12 16.4522 12.0908 16.2292 12.2557 16.0646Z' fill='white'/%3E%3C/svg%3E%0A");
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  opacity: 0.4;
  transition: 0.3s;
}

.accordion button:hover {
  color: var(--color-primary);
}

.accordion button[aria-expanded=true] {
  color: var(--text-primary);
  transition: 0.3s;
}

.accordion button:hover .icon::before {
  opacity: 0.7;
  rotate: 90deg;
  transition: 0.3s;
}

.accordion button[aria-expanded=true] .icon::before {
  opacity: 1;
  rotate: 180deg;
  transition: 0.3s;
}

.accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion .accordion-content>div {
  color: var(--text-secondary);
  font-size: var(--fs-7);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}