/* FAQ Area Style Here... */
.faq-area {
  /* background: var(--bs-dark-light); */
  padding-bottom: 40px;
  padding-top: 190px;
  margin-top: -124px;
  z-index: -1;
  background: url(../images/hero-after.svg) var(--bs-dark-light) no-repeat;
  background-size: 1034px;
  background-position-x: right;
}
.faq-left-side{
  max-width: 500px;
}
.faq-right-side svg{
  margin-left: 60px;
}
.faq-des {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.21;
  color: var(--bs-white);
  max-width: 360px;
}
.faq-area::before {
  content: "";
  background: url(../images/hero-before.svg) no-repeat;
  width: 802px;
  height: 446px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 800px;
  background-position: center;
  z-index: -1;
}

/* Transparent Accordion */
 .accordion {
  border: none;
  position: relative; /* Make sure it can stack correctly */
  z-index: 1; /* Lower z-index, but it still needs to stack properly */
}

.accordion-item {
  background: transparent !important;
  border: none;
  position: relative; /* Ensures it follows stacking context */
  z-index: 1; /* Ensure it's clickable */
}

.accordion-button {
  background-color: transparent !important;
  color: var(--bs-primary-light); /* Adjust the text color */
  border: none;
  font-weight: 500;
  position: relative; /* Ensure button stays within its stacking context */
  z-index: 2; /* Keep this above accordion content */
}

.accordion-button:not(.collapsed) {
  color: var(--bs-white); /* Active button text color */
  background-color: transparent !important;
}

.accordion-body {
  background-color: transparent !important;
  color: var(--bs-secondary-light); /* Adjust body text color */
  border: none;
  position: relative;
  z-index: 1; /* Ensure the body doesn't interfere with the button */
}

/* Default arrow (down) when the accordion is collapsed */
.accordion-button::after {
  content: "\f078"; /* Unicode character for FontAwesome down arrow */
  font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is being used */
  font-weight: 900;
  float: right;
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for rotation and color */
  color: var(--bs-primary-light); /* Blue color when collapsed */
}

/* Arrow (up) when the accordion is expanded */
.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg); /* Rotate arrow when expanded */
  color: var(--bs-white); /* White color when expanded */
}

.faq-area a, strong, b {
  color: var(--bs-bitcoin) !important;
  font-weight: bold !important;
}