.faq-body,
.faq-html {
  font-family: "Poppins", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12pt;
  font-weight: 400;
  color: black;
  background: black;
}

.faq-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body > .faq-box {
  width: 100%;
  height: 100%;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    30deg,
    #000000,
    #0e0e0e,
    #181818,
    #202020,
    #292929,
    #313131,
    #3b3b3b,
    #444444,
    #4d4d4d,
    #575757,
    #616161,
    #6b6b6b
  );
}

.faq-box > ul {
  position: relative;
  left: 70px;
  list-style: none;
  padding: 20px 0px;
  margin: 0;
  border-left: 60px solid MediumSpringGreen;
  padding-left: 40px;
  width: 500px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -3px 0px inset,
    rgba(0, 0, 0, 0.3) 0px 3px 0px inset;
}

.faq-box > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  color: white;
  text-transform: uppercase;
}

.faq-box > ul > li:nth-child(2) {
  --itemcolor: red;
}

.faq-box > ul > li:nth-child(4) {
  --itemcolor: orange;
}

.faq-box > ul > li:nth-child(6) {
  --itemcolor: yellow;
}

.faq-box > ul > li:nth-child(8) {
  --itemcolor: lawngreen;
}

.faq-box > ul > li:nth-child(10) {
  --itemcolor: dodgerblue;
}

.faq-box > ul > li:nth-child(12) {
  --itemcolor: violet;
}

.faq-box > ul > li::before {
  content: "";
  position: absolute;
  left: -75px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px;
  border-style: double dotted solid dashed;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.faq-box > ul > li::after {
  color: var(--itemcolor);
  position: absolute;
  left: -75px;
  width: 60px;
  height: 60px;
  background: transparent;
  content: "#1";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.faq-box > ul > li:nth-child(2)::before {
  border-color: var(--itemcolor);
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(4)::before {
  border-color: var(--itemcolor);
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(4)::after {
  content: "#2";
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(6)::before {
  border-color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(6)::after {
  content: "#3";
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(8)::before {
  border-color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(8)::after {
  content: "#4";
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(10)::before {
  border-color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(10)::after {
  content: "#5";
  color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(12)::before {
  border-color: var(--itemcolor);
}

.faq-box > ul > li:nth-child(12)::after {
  content: "#6";
  color: var(--itemcolor);
}

.faq-box > ul > li:hover::before {
  background: var(--itemcolor);
  border-color: black;
  animation: bulletspin 5s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes bulletspin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.faq-box > ul > li:hover::after {
  color: white;
}

.faq-box > ul > li:nth-child(4):hover::after,
.faq-box > ul > li:nth-child(6):hover::after,
.faq-box > ul > li:nth-child(8):hover::after {
  color: black;
}

.faq-box > ul > li > p {
  position: relative;
  font-size: 1rem;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.1s ease-in-out;
  font-family: "Exo 2";
  font-weight: 600;
}

.faq-box > ul > li > p::after {
  position: absolute;
  background: var(--itemcolor);
  content: "";
  bottom: 10px;
  left: -100%;
  width: 100%;
  height: 3px;
  transition: all 0.2s ease-in-out;
}

.faq-box > ul > li:hover > p::after {
  left: 0;
  transition: all 0.2s ease-in-out;
}

.faq-box > ul > li:active > p {
  transform: scale(0.95);
}

.faq-box > ul > input {
  position: absolute;
  display: none;
  z-index: 3;
}

.faq-box > ul > li > label {
  position: absolute;
  width: 120%;
  height: 100%;
  right: 0;
  z-index: 4;
}

.faq-box > ul > li > label::before {
  position: absolute;
  content: "Quinoa irony vape, mixtape viral mumblecore readymade street art pork belly salvia yuccie paleo butcher selfies.";
  top: -70px;
  left: -100%;
  width: 250px;
  min-height: 200px;
  padding: 30px 20px;
  background: var(--itemcolor);
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11pt;
  color: white;
  text-align: center;
  text-transform: none;
  line-height: 16pt;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -3px 0px inset;
  transition: all 0.3s ease-in-out;
  font-family: "Exo 2",sans-serif;
}

.faq-box > ul > li:nth-child(2) > label::before {
  content: "Online classes at our center involves live interactive classes conducted through a virtual classroom platform. Students can attend lectures, participate in discussions, and ask questions in real-time. Additionally, we provide recorded sessions for review and study flexibility.";
  top: 0;
}

.faq-box > ul > li:nth-child(4) > label::before {
  content: "Our instructors are highly qualified professionals with extensive experience in their respective fields. They hold advanced degrees and certifications, and many have practical industry experience that enriches their teaching.";
  top: -50px;
}

.faq-box > ul > li:nth-child(6) > label::before {
  content: "At Webcram Career Academy, we offer courses in web development, graphic design, SEO, and SMO, equipping you with essential digital skills.";
}

.faq-box > ul > li:nth-child(4) > label::before,
.faq-box > ul > li:nth-child(6) > label::before,
.faq-box > ul > li:nth-child(8) > label::before {
  color: black;
}

.faq-box > ul > li:nth-child(8) > label::before {
  content: "We provide comprehensive learning resources including digital textbooks, lecture notes, practice exercises, and supplementary materials. Our students also have access to a library of recorded lectures and tutorials to support their learning outside of class hours.";
}

.faq-box > ul > li:nth-child(10) > label::before {
  top: -120px;
  content: "Student progress is monitored through regular assessments, quizzes, and assignments conducted online. Our instructors provide personalized feedback on assignments and assessments to help students identify areas for improvement and track their academic growth.";
}

.faq-box > ul > li:nth-child(12) > label::before {
  top: unset;
  bottom: 0;
  content: "To participate in our online classes, students need a stable internet connection, a computer or tablet with audio and video capabilities, and access to a web browser compatible with our virtual classroom platform. Detailed technical specifications are provided upon enrollment to ensure smooth participation in classes.";
}

.faq-box > ul > li > label::after {
  position: absolute;
  top: 20%;
  left: -20%;
  content: "";
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 30px solid var(--itemcolor);
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}

.faq-box > ul > li > label:hover {
  cursor: pointer;
}

.faq-box > ul > input:checked + li > label::before,
.faq-box > ul > input:checked + li > label::after {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.faq-box > ul > input:checked + li > label::before {
  left: -64%;
}

.faq-box > ul > input:checked + li > label::after {
  left: -12%;
  transform: scale(1);
}

.faq-box > ul > input:checked + li > p {
  color: var(--itemcolor);
  font-weight: 700;
  font-size: 14pt;
  transition: all 0.1s ease-in-out;
}

/* Make Responsive */

@media (max-width: 990px) {
  body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .faq-box {
    min-height: 100vh;
    padding: 20px 0px;
  }

  .faq-box > ul {
    left: 20px;
    align-self: flex-start;
  }

  .faq-box > ul > li > label::before {
    width: 300px;
    left: 100%;
    top: 100% !important;
  }

  .faq-box > ul > li > label::after {
    left: 0;
    top: 230%;
  }

  .faq-box > ul > input:checked + li {
    margin-bottom: 220px;
  }

  .faq-box > ul > input:checked + li > label::before {
    left: 21%;
  }

  .faq-box > ul > input:checked + li > label::after {
    left: 12%;
    top: 230%;
  }
}

@media (max-width: 630px) {
  .faq-box > ul > li {
    height: 70px;
  }
  .faq-box > ul > li > p {
    font-size: 11pt;
  }
  .faq-box > ul > input:checked + li > p {
    font-size: 12pt;
  }
  .faq-box > ul > li > label::before {
    padding: 20px;
    left: 10% !important;
  }
  .faq-box > ul > li > label::after {
    left: 0 !important;
    filter: drop-shadow(1px 1px 2px black);
  }
}

@media (max-width: 550px) {
  .faq-box > ul {
    width: 320px;
  }
  .faq-box > ul > li {
    white-space: normal !important;
  }
  .faq-box > ul > li > p {
    white-space: normal !important;
    line-height: 11pt;
  }
  .faq-box > ul > li > label::before {
    padding: 20px;
    left: -10% !important;
  }
  .faq-box > ul > li > label::after {
    left: -16% !important;
  }
}

@media (max-width: 375px) {
  .faq-box > ul {
    width: 290px;
  }
  .faq-box > ul > li > label::before {
    width: 230px;
    min-height: 260px;
  }
  .faq-box > ul > input:checked + li {
    margin-bottom: 270px;
  }
}