:root {
  --defult-color: #fff;
  --primary-color: #000;
  --secondary-color: #097877;
  --tertiary-color: #6ccdbf;
  --light-bg-color: #f2f0f4;
  --input-bg: #100f0f;
  --border-color: #7d7878;
  --heading-color: #422c9b;
  --btn-bg: #173433;
  --design-bg: #6dcec0;
  --section-bg: #dbf7f3;
  --roboto: "Roboto", sans-serif;
  --playfair: "Playfair Display", serif;
  --sec-hdr-color: #054645;
  --size-48px: clamp(2.2rem, 4.5vw, 4rem);
  --size-24px-h2: clamp(1.3rem, 2vw, 1.71rem);
  --size-24px-p: clamp(1.1rem, 1.3vw, 1.71rem);
  --size-22px-h3: clamp(1.25rem, 1.9vw, 1.57rem);
  --size-20px: clamp(1.05rem, 1.2vw, 1.43rem);
  --size-18px: clamp(1.1rem, 1.1vw, 1.29rem);
  --icon-color: #09fe67;
  --box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

html,
body {
  font-family: var(--roboto);
  overflow-x: hidden;
}

.title4 {
  font-size: var(--size-20px);
  color: var(--input-bg);
  font-weight: 500;
}

/* Quiz Overview Section */
.quiz-sec {
  background: url(/assets/QuizPage/quizBg10.png) no-repeat center/cover;
  background-attachment: fixed;
}

.overview-sec {
  padding: 70px 0;
}

.switch-quiz {
  background: var(--secondary-color);
  border-radius: 10px;
  padding: 11px;
  margin-bottom: 20px;
}

.switch-btn {
  background: transparent;
  padding: 10px 55px;
  color: var(--defult-color);
  border-radius: 10px;
  font-size: var(--size-18px);
}

.switch-btn.active {
  background: var(--input-bg);
}

.overview-tab p {
  font-size: var(--size-20px);
  font-weight: 200;
  margin: 7px 0 17px;
}

.tags-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.topic-tags {
  padding: 8px 34px;
  background: var(--secondary-color);
  color: var(--defult-color);
  border-radius: 20px;
}

.topic-tags.active {
  background: transparent;
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.concept-topic {
  padding: 40px;
  border-radius: 10px;
}

.concept-topic h4 {
  color: var(--defult-color);
  margin-bottom: 20px;
  white-space: nowrap;
}

.topic1 {
  background: url(/assets/QuizOverview/topic1.png) no-repeat center/cover;
}

.topic2 {
  background: url(/assets/QuizOverview/topic2.png) no-repeat center/cover;
}

.spot-box {
  border: 1px solid var(--input-bg);
  padding: 23px 15px;
  border-radius: 20px;
}

.spot-box .title3 {
  font-weight: 400;
}

.progress {
  margin: 10px 0;
}

.progress-bar {
  background: var(--heading-color);
}

.spot-box > p {
  font-size: var(--size-18px);
  color: #fd0b0b;
}

.spotCategory-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}

.spot-category {
  border: 1px solid var(--input-bg);
  padding: 5px;
  border-radius: 10px;
}

.spot-category p {
  font-size: 1rem;
  font-weight: 300;
}

.quiz-mentor {
  border: 1px solid var(--input-bg);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 20px;
}

.mentor-img {
  max-width: 46px;
}

.mentor-img img {
  object-fit: cover;
}

.mentor-details {
  color: #245851;
  text-transform: capitalize;
}

.mentor-details > .title4 {
  margin: 0;
}

.mentor-bottom {
  margin-top: 10px;
}

.mentor-bottom p {
  font-size: 0.8rem;
  color: #245851;
}

.mentor-bottom p > span {
  font-weight: 800;
}

.spot-box > .section-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overview-iconBox {
  margin-top: 20px;
}

.overview-iconBox > span {
  padding: 7px 9px;
  border-radius: 15px;
  margin-right: 15px;
}

.overview-iconBox > span:nth-child(1) {
  background: var(--icon-color);
}

.overview-iconBox > span:nth-child(2) {
  background: var(--sec-hdr-color);
}

.overview-iconBox > span:nth-child(3) {
  background: var(--heading-color);
  margin-right: 0;
}

/* Result Section */

.result-sec {
  padding: 70px 0;
  background: #b7d0cf;
}

.result-hdr > .title3 {
  position: relative;
  color: var(--secondary-color);
}

.result-hdr > .title3::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--icon-color);
  border-radius: 50%;
  top: 50%;
  left: -10%;
  transform: translate(-50%, -50%);
}

.result-cardGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.result-card {
  padding: 30px;
  background: #c0e7f8;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

/* Process Section */
.process-sec {
  padding: 70px 0;
}

.process-box {
  display: inline-block;
  padding: 16.5px 20px;
  border: 1px solid var(--input-bg);
  border-radius: 30px;
}

.process-hdrCntn > .title2 {
  margin: 20px 0;
}

.process-hdrCntn p {
  font-size: var(--size-20px);
  color: rgba(0, 0, 0, 0.6);
}

.process-cardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.process-card {
  position: relative;
  height: 416px;
  border-radius: 20px;
}

.process1 {
  background: url(/assets/QuizOverview/process1.png) no-repeat center/cover;
}

.process2 {
  background: url(/assets/QuizOverview/process2.jpg) no-repeat center/cover;
}

.process3 {
  background: url(/assets/QuizOverview/process3.png) no-repeat center/cover;
}

.processCard-cntn {
  padding: 25px 15px;
  border: 1px solid var(--input-bg);
  background: var(--defult-color);
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 20px;
}

.processCard-cntn p {
  font-size: 1rem;
  margin-top: 10px;
}

.process-bottomCntn {
  margin-top: 30px;
}

.process-bottomCntn p {
  font-size: var(--size-20px);
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 30px;
}

/* REsponsive Section */

@media screen and (max-width: 1200px) {
  .result-cardGrid {
    grid-template-columns: 1fr 1fr;
  }

  .result-card {
    padding: 20px;
  }
}

@media screen and (max-width: 992px) {
  .tags-bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .process-cardGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-cardGrid .process3 {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }
}

@media screen and (max-width: 768px) {
  .overview-sec,
  .result-sec,
  .process-sec {
    padding: 35px 0;
  }

  .tags-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-cardGrid {
    grid-template-columns: 1fr;
  }

  .process-cardGrid .process3 {
    grid-column: auto;
    width: 100%;
    justify-self: auto;
  }
}

@media screen and (max-width: 576px) {
  .topic-tags {
    margin: 10px 0;
  }

  .tags-bar {
    margin-bottom: 10px;
    gap: 0 10px;
  }

  .result-cardGrid {
    grid-template-columns: 1fr;
  }

  .tags-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview-tab p,
  .process-hdrCntn p,
  .processCard-cntn p,
  .process-bottomCntn p {
    font-size: 14px;
  }
  .topic-tags {
    padding: 8px 15px;
  }

  .processCard-cntn {
    padding: 15px 10px;
  }

  .switch-quiz {
    flex-wrap: wrap;
    justify-content: center !important;
    padding: 5px 0;
  }

  .switch-btn:last-child {
    margin-top: 5px;
  }
}