/*--------------------------------------------------
 *               Security section
 * ----------------------------------------------------*/
#security {
  width: 100%;
  padding: 5rem 2rem;
  margin-top: 8rem;
  position: relative;
  z-index: 2;
}
#security .content {
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
#security .content > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  row-gap: 0.7rem;
}
#security img {
  grid-row: 1/3;
}
#security h2 {
  font-weight: 700;
  font-family: Poppins;
  font-size: clamp(1rem, 2vw, 1.6rem);
  padding: 0;
}
#security p {
  font-size: 0.8125rem;
}
#security a {
  /* color: black; */
  text-decoration: underline;
  font-weight: 500;
  white-space: nowrap;
}
#security a:hover {
  color: #1852ff;
  text-decoration: none;
}

@media (max-width: 760px) {
  #security .content {
    max-width: 500px;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 400px) {
  #security .content > div {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}
/*--------------------------------------------------
 *               FAQ section
 * ----------------------------------------------------*/
#faq {
  width: 100%;
  padding: 5rem 2rem 5.5rem 2rem;
  background-color: var(--dark-bg-col);
}
#faq::before {
  content: var(--pseudo-content);
  position: absolute;
  width: 700px;
  height: 400px;
  border-radius: 50%;
  background: rgba(0, 72, 225, 0.6);
  right: 5%;
  bottom: -15%;
  filter: blur(140px);
}
#faq::after {
  content: var(--pseudo-content);
  position: absolute;
  width: 700px;
  height: 500px;
  border-radius: 50%;
  background: #21f0f666;
  right: 11%;
  bottom: 23%;
  filter: blur(140px);
}
#faq .content {
  max-width: 1200px;
  margin: 0 auto;
}
#faq .content > div {
  margin-top: 2rem;
  border-bottom: solid #00000038 4px;
  background: #0000007a;
  z-index: 2;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 2px 9px 32px #00000080;
}
#faq .content .payment {
  display: none;
}
#faq label {
  display: block;
}
#faq input {
  appearance: none;
  opacity: 0;
  display: none;
}
#faq :is(h2, label, p) {
  font-family: "Poppins";
}
#faq h2 {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 2.2rem);
  text-align: center;
  line-height: normal;
  margin-bottom: 2rem;
  opacity: 0.9;
  z-index: 3;
  position: relative;
  text-shadow: 2px 2px 6px #000000;
}
#faq p {
  z-index: 2;
  font-size: clamp(0.8125rem, 1vw, 1rem);
  font-weight: 300;
  color: #ffffffc4;
}
#faq ul {
  padding: 0 1.5rem;
}
#faq ul li {
  color: #ffffffc4;
  list-style-type: disclosure-closed;
  list-style-position: inside;
  font-size: clamp(0.8125rem, 1vw, 1rem);
  font-weight: 300;
}
#faq a {
  color:#21eeef;
  text-decoration: underline;
  font-weight: 500;
  white-space: nowrap;
}
#faq a:hover {
  color: white;
  text-decoration: none;
}
#faq label.choose-topic {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  /* background: #F4F4F4; */
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1490196078) inset;
  padding: 0.4rem;
  border-radius: 40px;
  align-items: center;
  position: relative;
}
#faq label.choose-topic .marker {
  position: absolute;
  height: -webkit-fill-available;
  /* background: black; */
  border-radius: 30px;
  margin: 0.4rem 0;
  transition: all 0.35s cubic-bezier(0.24, -0.52, 0.76, 1.42);
}
#faq label.choose-topic b {
  font-size: clamp(1rem, 2vw, 14px);
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  padding: 0.8rem 1.5rem;
  border-radius: 40px;
  transition: background 0.25s, color 0.25s;
  z-index: 2;
}
#faq label.choose-topic b#software {
  cursor: default;
}
#faq label.choose-topic:has(input:checked) b#software {
  cursor: pointer;
}
#faq label.choose-topic:has(input:checked) b#payment {
  cursor: default;
}
#faq label.choose-topic:has(input:checked) ~ .software {
  display: none;
}
#faq label.choose-topic:has(input:checked) ~ .payment {
  display: block;
}
#faq label.question {
  border-top: solid #dfdfdf0d 2px;
  padding: 1.2rem 2rem 1.2rem 1.5rem;
  font-size: clamp(14px, 1vw, 1.1rem);
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D'1.1'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2016%2016'%20style%3D'enable-background%3Anew%200%200%2016%2016%3B'%20xml%3Aspace%3D'preserve'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23FF7A00'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke-miterlimit%3D'10'%3E%3Cline%20x1%3D'8'%20y1%3D'3.4'%20x2%3D'8'%20y2%3D'12.6'/%3E%3Cline%20x1%3D'12.6'%20y1%3D'8'%20x2%3D'3.4'%20y2%3D'8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 2%;
  background-size: clamp(17px, 2vw, 20px);
  transition: all 0.3s;
}
#faq .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s;
}
#faq .answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 1.5rem;
  opacity: 0;
  transition: all 0.25s;
}

#faq .answer b {
  font-weight: 600;
  color: #ffffffb5;
}

#faq label.question:has(input:checked) {
  background: #2b2b31a6;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D'1.1'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2016%2016'%20style%3D'enable-background%3Anew%200%200%2016%2016%3B'%20xml%3Aspace%3D'preserve'%3E%3Cline%20fill%3D'none'%20stroke%3D'%23FF7A00'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke-miterlimit%3D'10'%20x1%3D'12.6'%20y1%3D'8'%20x2%3D'3.4'%20y2%3D'8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 2%;
  background-size: clamp(17px, 2vw, 20px);
}
#faq label.question:has(input:checked) + .answer {
  grid-template-rows: 1fr;
}
#faq label.question:has(input:checked) + .answer > p {
  padding: 1rem 1.5rem;
  /* background: #F2FDFF; */
  opacity: 1;
  color: #ffffff7d;
}

#main-content {
  padding-bottom: 0;
}

section.testimonials {
  margin-bottom: 0;
  z-index: 3;
  padding-bottom: 1rem;
}
/* .testimonials ~ #faq {
  margin-bottom: 1rem;
} */

@media (max-width: 1280px) {
  #faq {
    width: var(--main-width);
    margin: 0 auto;
    padding: 4rem 0 2rem 0;
  }
}