summary::-webkit-details-marker {
  display: none;
}

.faqs-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--faqs--padding-top);
  margin-top: var(--faqs--margin-top);
  background-color: var(--faqs--background-color);
  color: var(--faqs--text-color);
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
}

.faqs-wrapper-vpn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--faqs--padding-top);
  background-color: var(--faqs--background-color);
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
}

.faqs {
  max-width: 768px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.faqs>h2 {
  font-size: 28px;
  font-weight: var(--faqs--title-weight);
  margin-top: 0;
  margin-bottom: 20px;
}

.faqs details {
  width: 100%;
  border-bottom: var(--faqs--item-border);
  background-color: var(--faqs--item-background-color);
  word-break: break-word;
}

.faqs details summary {
  all: unset;
  position: relative;
  padding: 18px 30px 18px 0;
  max-width: 100%;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  font-weight: var(--faqs--question-weight);
  line-height: 1.33;
}

.faqs details summary::after {
  content: '';
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 3px;
  right: 5px;
  height: 9px;
  width: 9px;
  border-left: 2px solid var(--faqs--arrow-color);
  border-bottom: 2px solid var(--faqs--arrow-color);
  transition: transform 0.5s;
  transform: translate(0, 0) rotate(-45deg);
  transform-origin: center;
}

.faqs details[open] summary::after {
  transform: translate(0, 3px) rotate(-225deg);
}

.faqs details>div {
  margin-top: -18px;
  padding: 0 0 5px;
}

.faqs details a {
  color: black;
}

@media (max-width: 599px) {
  .faqs-wrapper {
    margin-top: var(--faqs--margin-top--sm);
  }

  .faqs-wrapper-vpn {
    padding-top: 30px;
  }

  .faqs {
    max-width: 345px;
  }
}