/* ===== FAQ SECTION ===== */
.comic-faqs {
background-image: url("/images/faq.png");
    background-position: center;
        background-size: cover;
}

/* TITLE */
.faq-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 4px 4px 0 #8840A5;
}

/* ACCORDION ITEM */
.comic-accordion .accordion-item {
  position: relative;
  border: 4px solid #000;
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 6px 6px 0 #000;
  transition: all 0.3s ease;
}

/* GRAFFITI SPLASH */
.comic-accordion .accordion-item::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: #8840A5;
  opacity: 0.12;
  border-radius: 50% 40% 60% 45%;
  transform: rotate(25deg);
}

/* SPRAY DOTS */
.comic-accordion .accordion-item::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 8px;
  height: 8px;
  background: #8840A5;
  border-radius: 50%;
  opacity: 0.4;
  box-shadow:
    -16px -10px 0 #8840A5,
    -32px 6px 0 #8840A5,
    -48px -6px 0 #8840A5;
}

/* BUTTON */
.comic-accordion .accordion-button {
  background: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  color: #000;
  padding: 20px;
}

/* REMOVE DEFAULT BOOTSTRAP STYLE */
.accordion-button:focus {
  box-shadow: none;
}

/* ACTIVE BUTTON */
.accordion-button:not(.collapsed) {
  background: #8840A5;
  color: #fff;
}

/* BODY */
.comic-accordion .accordion-body {
  background: #fff;
  font-size: 1rem;
  line-height: 1.6;
  border-top: 4px dashed #000;
}

/* ICON FIX */
.accordion-button::after {
  background-size: 1.2rem;
}

/* HOVER / LIFT EFFECT */
.comic-accordion .accordion-item:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 10px 10px 0 #000;
}

/* MOBILE */
@media (max-width: 768px) {
  .faq-title {
    font-size: 2.2rem;
  }

  .comic-accordion .accordion-button {
    font-size: 1rem;
  }
}