/* importing google fonts */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  .info_box,.result_box{ position: absolute; top: 24%; left: 50%; transform: translate(-50%, -50%);}
  .quiz_box{ position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
  .start_btn{ position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),  0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .info_box.activeInfo,.quiz_box.activeQuiz,.result_box.activeResult{ opacity: 1; z-index: 5; pointer-events: auto; transform: translate(-50%, -50%) scale(1);}
  .start_btn button{ font-size: 25px; font-weight: 500; color: #007bff; padding: 15px 30px; outline: none; border: none; border-radius: 5px; background: #fff; cursor: pointer;}.info_box{ width: 540px; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease;}
  .info_box .info-title{ height: 60px; width: 100%; border-bottom: 1px solid lightgrey; display: flex; align-items: center; padding: 0 30px; border-radius: 5px 5px 0 0; font-size: 20px; font-weight: 600;}.info_box .info-list{ padding: 15px 30px;}
  .info_box .info-list .info{ margin: 5px 0; font-size: 17px;}.info_box 
  .info-list .info span{ font-weight: 600; color: #007bff;}
  .info_box .buttons{ height: 60px; display: flex; align-items: center; justify-content: flex-end; padding: 0 30px; border-top: 1px solid lightgrey;}
  .info_box .buttons button{ margin: 0 5px; height: 40px; width: 100px; font-size: 16px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease;}
  .quiz_box{ width: 650px; background: #fff; border-radius: 5px; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease;}.quiz_box header{ position: relative; z-index: 2; height: 70px; padding: 0 30px; background: #fff; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: center; box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);}.quiz_box header .title{ font-size: 20px; font-weight: 600;}.quiz_box header .timer{ color: #004085; background: #cce5ff; border: 1px solid #b8daff; height: 45px; padding: 0 8px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; width: 145px;}.quiz_box header .timer .time_left_txt{ font-weight: 400; font-size: 17px; user-select: none;}.quiz_box header .timer .timer_sec{ font-size: 18px; font-weight: 500; height: 30px; width: 45px; color: #fff; border-radius: 5px; line-height: 30px; text-align: center; background: #343a40; border: 1px solid #343a40; user-select: none;}.quiz_box header .time_line{ position: absolute; bottom: 0px; left: 0px; height: 3px; background: #007bff;}section{ padding: 25px 30px 20px 30px; background: #fff;}section .que_text h1{ font-size: 18px; font-weight: 600;}section .option_list{ padding: 20px 0px; display: block;}section .option_list .option{ background: aliceblue; border: 1px solid #84c5fe; border-radius: 5px; padding: 8px 15px; font-size: 17px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center;*/ justify-content: space-between;*/}section .option_list .option:last-child{ margin-bottom: 0px;}section .option_list .option:hover{ color: #004085; background: #cce5ff; border: 1px solid #b8daff;}section .option_list .option.correct{ color: #155724; background: #d4edda; border: 1px solid #c3e6cb;}section .option_list .option.incorrect{ color: #721c24; background: #f8d7da; border: 1px solid #f5c6cb;}section .option_list .option.disabled{ pointer-events: none;}section .option_list .option .icon{ height: 26px; width: 26px; border: 2px solid transparent; border-radius: 50%; text-align: center; font-size: 13px; pointer-events: none; transition: all 0.3s ease; line-height: 24px;}.option_list .option .icon.tick{ color: #23903c; border-color: #23903c; background: #d4edda;}.option_list .option .icon.cross{ color: #a42834; background: #f8d7da; border-color: #a42834;}footer{ height: 60px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid lightgrey;}footer .total_que span{ display: flex; user-select: none;}footer .total_que span p{ font-weight: 500; padding: 0 5px;}footer .total_que span p:first-child{ padding-left: 0px;}footer button{ height: 40px; padding: 0 13px; font-size: 18px; font-weight: 400; cursor: pointer; border: none; outline: none; color: #fff; border-radius: 5px; background: #007bff; border: 1px solid #007bff; line-height: 10px; opacity: 0; pointer-events: none; transform: scale(0.95); transition: all 0.3s ease;}footer button:hover{ background: #0263ca;}footer button.show{ opacity: 1; pointer-events: auto; transform: scale(1);}
  .result_box{ background: #fff; border-radius: 5px; display: flex; padding: 25px 30px; width: 530px; align-items: center; flex-direction: column; justify-content: center; transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; transition: all 0.3s ease;}.result_box .icon{ font-size: 100px; color: #007bff; margin-bottom: 10px;}.result_box .complete_text{ font-size: 20px; font-weight: 500;}.result_box .score_text span{ display: flex; margin: 10px 0; font-size: 18px; font-weight: 500;}.result_box .score_text span p{ padding: 0 4px; font-weight: 600;}.result_box .buttons{ display: flex; margin: 20px 0;}.result_box .buttons button{ margin: 0 10px; height: 45px; padding: 0 20px; font-size: 18px; font-weight: 500; cursor: pointer; border: none; outline: none; border-radius: 5px; border: 1px solid #007bff; transition: all 0.3s ease;}.buttons button.restart{ color: #fff; background: #007bff;}.buttons button.restart:hover{ background: #0263ca;}.buttons button.quit{ color: #007bff; background: #fff;}.buttons button.quit:hover{ color: #fff; background: #007bff;}
  @media (max-width: 667px) 
{ 
          .start_btn{ top: 20%; width: auto; }
          .info_box { top: 25%; width: auto; }
          .quiz_box, .result_box { top: 28%; width: auto; }
          .post {margin-top: 500px;}
         .quiz_box header .title { font-size: 16px; text-align: center; }
         .quiz_box { width: auto; }
/*         .start_btn, .info_box, .quiz_box, .result_box {top: 20%; width: auto;}*/
         footer button {
          padding: 0 6px;
          font-size: 15px;
          margin: 0px 5px;
         }
         .start_btn button{width: 200px;}
         h1, .h1{font-size: 18px;}
         .heading-banner .holder > .align{width: 100%;}
}
 .post {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin: 20px auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  max-width: 600px;
  font-family: 'Segoe UI', sans-serif;
  margin-top: 800px;
}

.post-content {
  font-size: 18px;
  margin-bottom: 15px;
}

.interaction-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}

.action-btn {
  background: #f2f2f2;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn i {
  font-size: 18px;
}

.action-btn:hover {
  background: #007bff;
  color: white;
}

.c
.share-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.share-btn i {
  font-size: 18px;
}

.comment-box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.send-comment {
  padding: 10px 16px;
  border: none;
  background: #28a745;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.comment-box p{margin-bottom: 0px;}

.send-comment:hover {
  background: #218838;
}

.share-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.share-btn i {
  font-size: 18px;
}

/* Individual platform colors */
.share-btn.facebook { background-color: #3b5998; }
.share-btn.facebook:hover { background-color: #2d4373; }

.share-btn.twitter { background-color: #1da1f2; }
.share-btn.twitter:hover { background-color: #0d95e8; }

.share-btn.whatsapp { background-color: #25d366; }
.share-btn.whatsapp:hover { background-color: #1ebe5b; }

.share-btn.linkedin { background-color: #0077b5; }
.share-btn.linkedin:hover { background-color: #005983; }

.fb-like-btn {
  background-color: #1877f2;
  color: white;
  border: none;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 30px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fb-like-btn.liked {
  background-color: #145dbf;
}

.fb-like-btn:hover {
  background-color: #145dbf;
}

#like_count {
  margin-left: 10px;
  font-weight: 600;
  font-size: 14px;
}

#like_result {
  margin-left: 10px;
  font-weight: 600;
  font-size: 16px;
  color: red;
}

#comment_result {
  margin-left: 10px;
  font-weight: 600;
  font-size: 16px;
  color: red;
}



.comment-form{padding-bottom: 15px;}
.comment-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  height: auto;
  min-height: initial;
}

.comment-form button {
  padding: 8px 16px;
  background-color: #1877f2;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.comment-form button:hover {
  background-color: #145dbf;
}

.comments-list {
  margin-top: 20px;
}

.comment-box {
  background: #f0f2f5;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.like-btn-wrap {
    margin-bottom: 10px;
}

.result_box .score_text span i.fa-solid.fa-star, i.fa-regular.fa-star {
   line-height: 33px;
}