#faq-banner {
  height: 25em;
  background: linear-gradient(to right, oklch(43.2% 0.232 292.759), #1e1a4d);
  padding-top: 9rem;
  position: relative;
  margin-top: -180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.down-curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.down-curve svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 15em;
}

.down-curve .shape-fill {
  fill: #ffffff;
}

#faq-banner .cs-container span {
  font-weight: 700;
  font-size: clamp(2em, calc(1.5em + 2.5vw), 4em);
  width: 60%;
  text-wrap: balance;
  min-width: 600px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: white;
}

#faq {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#faq .paragraph {
  text-align: center;
  margin-bottom: clamp(2em, 4vw, 3em);
}
#faq .paragraph h1 {
  margin-top: 1em;
}
#faq .paragraph p {
  width: 60%;
}

#faq .cs-button-group {
  display: flex;
  justify-content: center;
  gap: clamp(0.6em, 1.5vw, 1.2em);
  margin-bottom: clamp(2em, 4vw, 3em);
}
#faq .cs-button-group button {
  font-family: inherit;
  font-weight: 600;
  color: oklch(0.373 0.034 259.733);
  font-size: clamp(1em, calc(0.893em + 0.357vw), 1.25em);
  padding: clamp(0.5em, 1.5vw, 0.8em) clamp(1.2em, 4vw, 2.5em);
  border-radius: 0.8em;
  text-transform: capitalize;
  border: 2px solid oklch(89.4% 0.057 293.283);
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s ease;
}
#faq .cs-button-group button:hover {
  background-color: oklch(93% 0.034 272.788);
  border: 2px solid oklch(27.5% 0.011 216.9);
  color: oklch(27.5% 0.011 216.9);
}
#faq .cs-button-group .active {
  background-color: oklch(93% 0.034 272.788);
  border: 2px solid oklch(27.5% 0.011 216.9);
  color: oklch(27.5% 0.011 216.9);
}

/* #faq .cs-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
} */

#faq .cs-faq-group {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    display 0.35s allow-discrete;
}

#faq .cs-faq-group.active {
  display: block;
  opacity: 1;
  transform: translateY(0);

  @starting-style {
    opacity: 0;
    transform: translateY(8px);
  }
}

#faq .cs-faq-item {
  cursor: pointer;
  transition: 250ms ease;
  display: grid;
  grid-template-rows: auto 0fr;
  margin: 1em auto;
  width: 85%;
  padding: clamp(1rem, 4vw, 1.5rem);
  background-color: white;
  border: 2px solid oklch(89.4% 0.057 293.283);
  border-radius: 1rem;
  text-wrap: pretty;
}
#faq div.summary {
  text-transform: capitalize;
  font-weight: 600;
  font-size: clamp(1em, calc(0.893em + 0.357vw), 1.25em);
  font-size: clamp(1em, calc(0.893em + 0.357vw), 1.25em);
  letter-spacing: 0.1em;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 0.2em;
}
#faq div.summary p {
  background-clip: text;
  color: oklch(37.3% 0.034 259.733);
}
#faq .open {
  grid-template-rows: auto 1fr;
  row-gap: clamp(0.5em, 2vw, 1em);
  border: 2px solid oklch(27.5% 0.011 216.9);
}
#faq .hidden {
  overflow: hidden;
}
#faq .hidden p {
  /* text-shadow: 1px 1px 1px #ccc; */
  color: oklch(37.3% 0.034 259.733);
}
#faq div.summary::before {
  content: "\25B6";
  color: oklch(37.3% 0.034 259.733);
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.3s ease;
}

#faq .open div.summary::before {
  transform: rotate(90deg);
}

.floating-circle.first {
  left: -10%;
  top: 60vmin;
}

.floating-circle.first .big {
  animation: floatUpDown2 3s ease infinite alternate;
}

.floating-circle.first .border {
  left: 10%;
  top: 25vmin;
  height: 50vmin;
  width: 50vmin;
  animation: floatUpDown 3s ease-in-out infinite alternate;
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0); /* Starting position */
  }
  100% {
    transform: translateY(-20px); /* Moves up by 20 pixels */
  }
}
@keyframes floatUpDown2 {
  0% {
    transform: translateY(20px); /* Starting position */
  }
  100% {
    transform: translateY(-20px); /* Moves up by 20 pixels */
  }
}
.floating-circle.second {
  left: 90%;
  top: 10vmin;
}
.floating-circle.second .big {
  height: 45vmin;
  width: 45vmin;
  animation: floatUpDown 3s ease-in-out infinite alternate;
}
.floating-circle.second .border {
  left: -10%;
  top: 30vmin;
  animation: floatUpDown2 3s ease infinite alternate;
}
@media only screen and (max-width: 1080px) {
  #faq-banner {
    height: 20em;
  }
  .down-curve svg {
    height: 10em;
  }
}

@media only screen and (max-width: 800px) {
  #faq-banner {
    height: 18em;
  }
  .down-curve svg {
    height: 9em;
  }
  #faq .paragraph p {
    width: 90%;
  }
}
@media only screen and (max-width: 640px) {
  #faq-banner {
    height: 17em;
  }
  .down-curve svg {
    height: 8em;
  }
  .floating-circle.first {
    left: -5%;
    top: 80vmin;
  }
}

@media only screen and (max-width: 540px) {
  #faq-banner {
    height: 17em;
  }
  .down-curve svg {
    height: 8em;
  }
  .floating-circle.first {
    left: -15%;
    top: 110vmin;
  }
}