.swiperCard .swiper-slide {
  /* background-color: var(--bs-card-bg); */
  background-color: #1a1c34;
  border-radius: 18px;
  min-height: 530px !important;
}
.swiperCard .swiper-wrapper {
  max-width: 473px;
  width: 100%;
  /* min-height: 530px !important; */
}
.swiperCard .swiper {
  position: unset !important;
}
.swiperCard {
  position: relative;
}
.swiperCard .swiper-wrapper {
  position: unset !important;
}
.swiperCard .mySwiper {
  position: unset !important;
  max-width: 573px;
  padding: 0 50px;
}
.light-style .swiperCard .swiper-slide {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  /* background-color: #ffffff !important; */
  background-image: linear-gradient(-225deg, #5d9fff 0%, #b8dcff 48%, #6bbbff 100%) !important;
}
.swiperHeader {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 75px;
}
.swiperBody {
  padding: 10px 30px 20px 30px;
}
.swiperBody h1 {
  line-height: normal;
  font-weight: bold;
}
.swiperPassImg {
  width: 100%;
  max-width: 282px;
  margin-top: 1rem;
}
.cardsBtn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  background-image: linear-gradient(-225deg, #5d9fff 0%, #b8dcff 48%, #6bbbff 100%) !important;
  padding: 10px;
  --swiper-navigation-size: 15px !important;
  color: unset !important;
}
.dark-style .cardsBtn {
  background-color: #1a1c34 !important;
  background-image: none !important;
}
.cardsBtn:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.cardsBody {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 1.5rem;
}
.cardsBody h1 {
  line-height: normal;
  font-weight: bold;
}
.correctCard {
  border-left: 7px solid #23ecbb !important;
  background-color: #275a4d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 10px;
}
.correctCard img {
  width: 25px;
}
.light-style .correctCard h5 {
  color: #fff;
}
.light-style .incorrectCard h5 {
  color: #fff;
}
.incorrectCard {
  border-left: 7px solid #ec2e5f !important;
  background-color: #2a162e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 10px;
}
.incorrectCard img {
  width: 25px;
}

@media (max-width: 768px) {
  .swiperCard .swiper-wrapper {
    max-width: 388px;
  }
  .swiperCard .mySwiper {
    padding: 0 0px;
  }
}
@media (max-width: 576px) {
  .swiperBody {
    padding: 10px 15px 20px 15px;
  }
  .swiperCard .swiper-wrapper {
    max-width: 307px;
  }
  .cardsBtn {
    width: 30px !important;
    height: 30px !important;
  }
  .swiperCard .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 0px) !important;
  }
  .swiperCard .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 0px) !important;
  }
  .swiperHeader {
    padding: 10px 15px;
    min-height: 70px;
  }
  .swiperBody ul {
    padding-left: 1rem !important;
  }
}