.contenttextblock {
  position: absolute;
  /* background: #fff; */
  top: 10%;
  /* border: 1px solid black; */
  width: 30%;
  height: 50%;
  left: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}
.contentblockwrapper {
  position: absolute;
  background: #fff;
  top: 36%;
  /* border: 1px solid black; */
  width: 30%;
  left: 1%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  border: 0.35vw solid #a775a7;
  border-radius: 1vw;
}

.contentblock_para {
  font-size: 1.7vw;
  font-family: 'andika';
  padding: 5% 3%;
  padding-right: 0%;
  text-align: left;
}
.contenttextblock_upperhalf,
.contenttextblock_lowerhalf {
  /* border: 1px solid black; */
  position: absolute;
  height: 40%;
  width: 100%;
  background-color: #fff;
}
.contenttextblock_upperhalf {
  top: 2vw;
}
.contenttextblock_lowerhalf {
  top: 12vw;
}
.btn_container {
  background-color: #a775a7;
}
.btn_container:hover {
  background: #6f007f;
}
.btn_container > button {
  background: transparent;
  color: #fff;
  font-size: 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
  text-transform: uppercase;
  margin: 0 auto;
  font-weight: bold;
  font-family: 'andika';
  border: transparent;
}
.btn_container > button > img {
  height: 3vh;
}
.btn_container > button:hover {
  color: #fff;
}
.btn_container > button:focus {
  color: #fff;
  outline: none;
  border: 1px solid transparent;
}
.dev {
  position: absolute;
  top: 52%;
  left: 22%;
  height: 39%;
  object-fit: contain;
}
.boy {
  position: absolute;
  top: 50%;
  left: 60%;
  height: 50%;
  object-fit: contain;
  display: none;
}
.girl {
  position: absolute;
  top: 64%;
  left: 6%;
  height: 32%;
  object-fit: contain;
}
.niren,
.sneha,
.sahil {
  position: absolute;
  top: 53%;
  left: 56%;
  height: 43%;
  object-fit: contain;
}
.sahil {
  left: 46%;
}
.sneha {
  left: 30%;
  height: 36%;
  top: 60%;
}
.sahilfamily,
.nirenfamily,
.snehafamily {
  position: absolute;
  top: 5%;
  left: 45%;
  height: 90%;
  object-fit: contain;
  display: none;
}
.topic {
  position: absolute;
  top: 39%;
  left: 16%;
  font-weight: 400;
  width: 30%;
  height: 13%;
  font-size: 2vw;
  color: #11100f;
  background-color: #fff;
  border-radius: 20px;
  padding: 0 2%;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 36%;
  height: 100%;
  background: #434430;
  z-index: 1;
  display: none;
}
.imagewrapper {
  display: none;
  position: absolute;
  top: 60%;
  left: 50%;
  height: 30%;
  object-fit: contain;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.imagewrapper > img {
  height: 100%;
}

/* option block */
.optionblock {
  position: absolute;
  background: #f3f2ee;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  display: none;
  border: 2px solid yellow;
  left: 10%;
  top: 26%;
  width: 45%;
  border-radius: 1vw;
}
.option_que {
  height: 20%;
  align-items: center;
  justify-content: space-between;
  width: 27%;
  position: absolute;
  top: 2vw;
  background: #fff;
  left: 1%;
  border: 2px solid yellow;
  border-radius: 1vw;
  z-index: 1;
  display: none;
}
.que_para {
  font-size: 1.8vw;
}
.option_title {
  font-size: 1.9vw;
}
.optionblock_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  padding-bottom: 2vw;
}
.options {
  border-radius: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8vh;
  width: 60%;
  cursor: pointer;
}

.option_first {
  margin-top: 3vh;
  background-color: #40a6ff;
  border-bottom: 5px solid blue;
}

.option_second {
  background-color: #e2cd7b;
  border-bottom: 5px solid rgb(246, 246, 6);
}
.option_third {
  background-color: #da80f1;
  border-bottom: 5px solid rgb(230, 39, 182);
}
.options:hover {
  transform: scale(1.125);
  transition: transform 0.3s ease-in-out;
}

.firstoption_para,
.secondoption_para,
.thirdoption_para {
  align-self: center;
  width: 100%;
  color: #fff;
}
.audioimgclass {
  height: 50%;
}
.optioncorrect {
  position: absolute;
  top: 32%;
  background: #fff;
  right: 10%;
  width: 22%;
  height: 13vh;
}
.familyoptionblock {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  display: none;
  left: 3%;
  top: 35%;
  width: 30%;
  border-radius: 1vw;
}
.familyoption_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  height: 30vh;
}
.familyoptions {
  position: absolute;
  left: 20%;
  border-radius: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  padding: 5% 0%;
  cursor: pointer;
  z-index: 1;
}
.familyoptions > img {
  height: 90%;
  position: absolute;
  right: -44%;
  display: none;
}
.familyoption_first {
  top: 0%;
  box-shadow: 0 8px 2px -2px blue;
  background-color: #40a6ff;
}
.familyoption_first:hover {
  box-shadow: 0 -8px 2px -2px blue;
  /* border-top: 5px solid blue; */
  border-bottom: none;
}
.familyoption_second {
  top: 50%;
  background-color: #e2cd7b;
  box-shadow: 0 8px 2px -2px rgb(246, 246, 6);
  /* border-bottom: 5px solid rgb(246, 246, 6); */
}
.familyoption_second:hover {
  box-shadow: 0 -8px 2px -2px rgb(246, 246, 6);

  /* border-top: 5px solid rgb(246, 246, 6); */
  border-bottom: none;
}
.familyoption_third {
  top: 100%;
  background-color: #da80f1;
  box-shadow: 0 8px 2px -2px rgb(230, 39, 182);
  /* border-bottom: 5px solid rgb(230, 39, 182); */
}
.familyoption_third:hover {
  box-shadow: 0 -8px 2px -2px rgb(230, 39, 182);
  /* border-top: 5px solid rgb(230, 39, 182); */
  border-bottom: none;
}
.firstfamilyoption_para,
.secondfamilyoption_para,
.thirdfamilyoption_para {
  align-self: center;
  width: 100%;
  color: #fff;
}
.firstoption_feedback,
.secondoption_feedback,
.thirdoption_feedback {
  object-fit: contain;
  width: 36%;
}
/* .firstoption_feedback {
  border: 2px solid rgb(50,193,38);
  color: rgb(50,193,38);
  border-radius: 0.35vw;
}
.secondoption_feedback,
.thirdoption_feedback {
  border: 2px solid rgb(193,40,38);
  color: rgb(193,40,38);
  border-radius: 0.35vw;
} */
.firstoption_feedback::before,
.secondoption_feedback::before,
.thirdoption_feedback::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -12%;
  width: 0px;
  height: 0px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  /* border-color: transparent rgb(50,193,38) transparent transparent; */
}
/* .secondoption_feedback::before,
.thirdoption_feedback::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -12%;
  width: 0px;
  height: 0px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  border-color: transparent rgb(193,40,38) transparent transparent;
} */
.feedback_success {
  border: 2px solid rgb(50, 193, 38);
  color: rgb(50, 193, 38);
  border-radius: 0.35vw;
}
.feedback_failure {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
  border: 2px solid rgb(193, 40, 38);
  color: rgb(193, 40, 38);
  border-radius: 0.35vw;
}
.feedback_success_before {
  border-color: transparent rgb(50, 193, 38) transparent transparent;
}
.feedback_success.d::before {
  border-color: transparent rgb(50, 193, 38) transparent transparent;
}
.feedback_failure_before {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
}
.feedback_failure.d::before {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
}

.playtimebg {
  background-color: #fef9e6 !important;
}
.topic {
  font-size: 2.5vw;
  background-color: #f17b31;
  color: #fff;
  padding: 3%;
}
.ag {
  list-style: disc;
  width: 80%;
  position: absolute;
  left: 16%;
  top: 39%;
}
.aglist {
  text-align: left;
  font-size: 2vw;
  width: 100%;
  color: #595959;
  font-family: 'Sniglet';
}
.aglist:nth-child(2) {
  margin-top: 4%;
}
.playtime {
  position: fixed;
  font-size: 5vw;
  top: 47%;
  left: 42%;
  color: #fff;
  letter-spacing: 2px;
  font-family: 'Sniglet';
  width: 20%;
}
:lang(np) .playtime {
  top: 55%;
}
.squirrel-listening {
  width: 19%;
  position: absolute;
  top: 54%;
  right: 13%;
}
.rhino_dancing {
  width: 19%;
  position: absolute;
  top: 35%;
  left: 15%;
}

.sima01 {
  width: 40%;
  top: 26%;
  left: -20%;
}
.sima_talking {
  left: -15%;
  width: 44%;
  top: 11%;
}
.speechtextbox {
  position: absolute;
  top: 35%;
  left: 46%;
  width: 30%;
  height: 30%;
}
.textbox {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.speechtext {
  margin-top: 7%;
}
.speechtextbox2 p {
  font-size: 1.7vw;
}
.toptextimg {
  background-color: #f17b31;
  display: flex;
  align-items: center;
  padding: 0% 0 0 3%;
}
.topimg {
  width: 10%;
}
.toptext {
  margin-left: 3%;
  margin-top: 2%;
  color: #fff;
}
.familyimgdesc {
  width: 40%;
  position: absolute;
  left: 4%;
  top: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-right: 1px solid #8b8985;
}
.member {
  width: 40%;
  border: 1px solid #8b8985;
  border-radius: 20px 20px 0 0;
  background-color: #eeeeee;
  margin: 6% 4%;
}
.pasang_s_grandfather,
.pasang_s_father,
.pasang_s_sister,
.pasang {
  width: 60%;
}
.mina_s_father,
.mina_s_mother,
.mina_s_brother,
.mina,
.ritesh_s_grandfather,
.ritesh_s_grandmother,
.ritesh_s_father,
.ritesh_s_mother,
.ritesh {
  width: 50%;
}
.memberdesc {
  border-top: 1px solid #8b8985;
  font-size: 1vw;
  text-align: left;
  padding: 2% 10%;
}

:lang(np) .memberdesc {
  font-size: 1.3vw;
}
:lang(np) .familyimgdescmina {
  margin-top: -1%;
}
.qnans {
  width: 55%;
  float: right;
  padding: 2%;
  margin-top: 4.5%;
}
.toptextblock {
  background-color: #c9daf8;
  padding: 0% 2%;
  border-radius: 7px;
  float: right;
  width: 51%;
  right: 2%;
  top: 20%;
  position: absolute;
}
.qntoptext {
  color: #595959;
  font-size: 1.5vw;
  text-align: left;
  padding: 1.5% 0%;
  width: 100%;
}
.qnopt {
  margin-top: 5%;
}
.qntext {
  background-color: #f9cb9c;
  padding: 2% 2%;
  font-size: 1.4vw;
  text-align: left;
  border-radius: 7px;
}

.qnopt div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3%;
}
.ans {
  width: 30%;
  background-color: #eeeeee;
  border: 1px solid #9f9c95;
  padding: 0.5%;
  font-size: 1.5vw;
  border-radius: 5px;
  cursor: pointer;
  pointer-events: none;
}
.qnopt:not(:first-child) {
  display: none;
}

.correctlogo,
.incorrectlogo {
  position: absolute;
  width: 15%;
  left: 90%;
  top: 15%;
}
.correctlogo {
  width: 20%;
}
.familyimgdescmina {
  justify-content: start;
  top: 20%;
}
.familyimgdescmina .member {
  margin: 2% 4%;
}
.summary {
  display: flex;
  width: 100%;
}
.sec1 {
  width: 33%;
  padding: 3% 0;
}
.sec2 {
  width: 33%;
  height: 100vh;
  padding: 3% 0;
  background-color: #ffd966 !important;
}
.sec3 {
  width: 33%;
  padding: 3% 0;
}
.topsummaryimg {
  width: 100%;
}
.stoptext,
.bottomtext {
  font-size: 1.2vw;
  color: #5e6059;
}
.spasang,
.smina,
.sritesh {
  width: 60%;
  background-color: #fff;
  padding: 3% 15% 0 15%;
  border: 2px solid #adaa9f;
  border-radius: 15px;
}
.bottomimgdesc {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10%;
}
.imgdescblock {
  width: 40%;
  border: 1px solid #595959;
  background-color: #fff;
  margin: 2.5% 0;
  border-radius: 10px 10px 0 0;
}
.bottomimg {
  width: 60%;
}
.bottomtext {
  border-top: 1px solid #595959;
}

.imgdescblock2 {
  width: 30%;
}
.imgdescblock2 img {
  width: 80%;
}
.bottomimgdesc9 {
  margin-top: 5%;
  flex-wrap: nowrap;
  flex-direction: column;
}
.pasanggf::after {
  content: '';
  background-color: #595959;
  width: 2px;
  height: 20%;
  position: absolute;
}
.pasangf::after {
  content: '';
  background-color: #595959;
  width: 2px;
  height: 76%;
  position: absolute;
}
.pasangs {
  width: 35%;
  position: absolute;
  top: 110%;
  left: 8%;
}
.pasangp {
  width: 35%;
  position: absolute;
  top: 110%;
  right: 8%;
}
.pasangs::after {
  content: '';
  background-color: #595959;
  width: 30%;
  height: 2px;
  position: absolute;
  top: 36%;
  right: -31%;
}
.pasangp::after {
  content: '';
  background-color: #595959;
  width: 30%;
  height: 2px;
  position: absolute;
  top: 36%;
  left: -31%;
}

.minagf::after {
  content: '';
  width: 2px;
  height: 60%;
  position: absolute;
  background-color: #595959;
}
.minaf {
  width: 35%;
  position: absolute;
  top: 100%;
  left: 8%;
}
.minaf::before {
  content: '';
  width: 50%;
  height: 2px;
  top: 45%;
  right: -50%;
  position: absolute;
  background-color: #595959;
}
.minaf::after {
  content: '';
  width: 2px;
  height: 30%;
  top: 100%;
  position: absolute;
  background-color: #595959;
}
.minam {
  width: 35%;
  position: absolute;
  top: 100%;
  right: 8%;
}
.minam::after {
  content: '';
  width: 2px;
  height: 30%;
  top: 100%;
  position: absolute;
  background-color: #595959;
}
.minab {
  width: 35%;
  position: absolute;
  top: 220%;
  left: 8%;
}
.minab::before {
  content: '';
  width: 145%;
  height: 2px;
  top: -27%;
  left: 50%;
  position: absolute;
  background-color: #595959;
}
.minab::after {
  content: '';
  width: 42%;
  height: 2px;
  top: 43%;
  right: -42%;
  position: absolute;
  background-color: #595959;
}
.mina2 {
  width: 35%;
  position: absolute;
  top: 220%;
  right: 8%;
}
.mina2::before {
  content: '';
  width: 2px;
  height: 72%;
  top: -27%;
  right: 121%;
  position: absolute;
  background-color: #595959;
}

.riteshgf {
  width: 35%;
  position: absolute;
  top: 0%;
  left: 8%;
}
.riteshgf::after {
  content: '';
  width: 42%;
  height: 2px;
  top: 43%;
  right: -42%;
  position: absolute;
  background-color: #595959;
}
.riteshgm {
  width: 35%;
  position: absolute;
  top: 0%;
  right: 8%;
}
.riteshgm::before {
  content: '';
  width: 2px;
  height: 121%;
  top: 46%;
  left: -24%;
  position: absolute;
  background-color: #595959;
}
.riteshf {
  position: absolute;
  width: 35%;
  margin-top: 111%;
  left: 8%;
}
.riteshf::before {
  content: '';
  width: 42%;
  height: 2px;
  top: 38%;
  right: -42%;
  position: absolute;
  background-color: #595959;
}
.riteshf::after {
  content: '';
  width: 2px;
  height: 21%;
  position: absolute;
  background-color: #595959;
}
.riteshm {
  width: 35%;
  position: absolute;
  margin-top: 111%;
  right: 8%;
}
.riteshm::after {
  content: '';
  width: 2px;
  height: 21%;
  position: absolute;
  background-color: #595959;
}
.riteshr {
  width: 35%;
  position: absolute;
  margin-top: 204%;
}
.riteshr::before {
  content: '';
  width: 143%;
  height: 2px;
  top: -41%;
  left: -22%;
  position: absolute;
  background-color: #595959;
}
.riteshr::after {
  content: '';
  width: 2px;
  position: absolute;
  height: 39%;
  top: -39%;
  background-color: #595959;
}
.topsummarytext {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -5%;
}
.familyttxt {
  font-size: 1.3vw;
  width: 60%;
  padding: 1% 5%;
  background-color: #f9cb9c;
}

/* .qntext .speakerimg {
  width: 6%;
  position: absolute;
  right: 2%;
  top: 20%;
}
.qntext img {
  width: 100%;
  cursor: pointer;
} */

.textimg {
  background-color: #f9cb9c;
  border-radius: 7px;
}
.textimg img {
  width: 6%;
  cursor: pointer;
  position: absolute;
  right: 2%;
}