* {
      font-size: 16px;
    }

    .question {
      margin: 10px;
    }

    .answer {
      padding: 10px;
    }

    button {
      margin: 10px;
    }

    .first {
      display: none;
      height: 300px;
      width: 200px;
      margin-top: 10px;
    }

    .footer-copyright {
      background-color: #0099CC;
      padding: 15px 0 15px 0;
      margin: 30px 0 0 0;
    }

    .main-title {
      margin-bottom: 20px;
      text-align: center;
    }

    @media (max-width: 767px) {
      .btn {
        white-space: normal;
        word-wrap: break-word;
        text-align: left;
      }
    }

    table,
    th,
    td {
      border: 1px solid;
      padding: 3px 3px 3px 3px;
    }

    /* MEDIA QUERY SECTION*/
    @media only screen and (max-width: 600px) {

      /* class="tblcenter" */
      .tblcenter {
        margin-left: auto;
        margin-right: auto;
      }

      /* class="imgcenter" */
      .imgcenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .thisppr {
      display: none;
    }

    /* progressbar */
    .progress-circle {
      width: 120px;
      height: 120px;
      margin: 20px auto;
    }

    .circular-chart {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 250px;
    }

    .circle-bg {
      fill: none;
      stroke: #eee;
      stroke-width: 3.8;
    }

    .circle {
      fill: none;
      stroke: #00acc1;
      stroke-width: 2.8;
      stroke-linecap: round;
      transition: stroke-dasharray 0.6s ease;
    }

    .percentage {
      fill: #333;
      font-family: Arial, sans-serif;
      font-size: 0.5em;
      text-anchor: middle;
    }

    /* blink text */
    @keyframes blink {

      0%,
      50%,
      100% {
        opacity: 1;
      }

      25%,
      75% {
        opacity: 0;
      }
    }


    /* MCQ School Text Animation */
    h1.mcq-title {
      font-size: 3rem;
      font-weight: 800;
      text-align: center;
      color: green;
      font-family: 'Segoe UI', sans-serif;
      margin-top: 40px;
      animation: fadeSlide 1.5s ease forwards;
      opacity: 0;
      position: relative;
    }

    h1.mcq-title::after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      background: red;
      margin: 12px auto 0;
      border-radius: 4px;
      animation: underlineExpand 1s ease forwards;
      animation-delay: 1.2s;
      opacity: 0;
    }

    @keyframes fadeSlide {
      0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes underlineExpand {
      0% {
        width: 0;
        opacity: 0;
      }

      100% {
        width: 80px;
        opacity: 1;
      }
    }


    .swal2-input::placeholder {
      font-size: 14px;
    }

    .swal2-input {
      font-size: 14px;
      /* Adjust as needed */
    }


    /*STUDENT LABEL*/
    .student-label-card {
      max-width: 480px;
      margin: 32px auto;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 24px rgba(44, 62, 80, 0.08);
      padding: 28px 32px 24px 32px;
      font-family: 'Segoe UI', Arial, sans-serif;
    }

    .student-label-card h2 {
      margin-top: 0;
      margin-bottom: 18px;
      color: #d9534f;
      font-size: 1.4em;
      letter-spacing: 1px;
      text-align: center;
    }

    .label-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .label-title {
      min-width: 130px;
      font-weight: 600;
      color: #555;
      background: #f8f8f8;
      border-radius: 5px;
      padding: 6px 12px;
      margin-right: 10px;
      text-align: right;
      flex-shrink: 0;
    }

    .label-value {
      flex: 1;
      background: #fdf2f2;
      color: #b52b27;
      border-radius: 5px;
      padding: 6px 12px;
      word-break: break-word;
      font-weight: 500;
    }

    @media (max-width: 600px) {
      .student-label-card {
        padding: 12px 6px;
      }

      .label-row {
        flex-direction: column;
        align-items: stretch;
      }

      .label-title {
        text-align: left;
        margin-bottom: 2px;
      }
    }



    /* PRICE TAG*/
    .price-tag-hero {
      width: 100vw;
      max-width: 100%;
      margin: 0 auto 32px auto;
      padding: 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
      animation: gradientMove 4s linear infinite alternate;
      box-shadow: 0 6px 24px rgba(30, 60, 114, 0.16);
      border-radius: 32px 32px 32px 32px;
      /* All corners rounded */
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes gradientMove {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 100% 50%;
      }
    }

    .price-tag-content {
      color: #fff;
      text-align: center;
      padding: 32px 8vw 36px 8vw;
      width: 100%;
    }

    .price-tag-label {
      font-size: 1.4em;
      letter-spacing: 2px;
      font-weight: 600;
      opacity: 0.90;
      margin-bottom: 12px;
    }

    .price-tag-value {
      font-size: 3em;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 8px;
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 8px;
    }

    .price-tag-currency {
      font-size: 0.6em;
      font-weight: 400;
      vertical-align: super;
      opacity: 0.85;
    }

    .price-tag-note {
      font-size: 1.1em;
      color: #e3f2fd;
      margin-top: 10px;
      opacity: 0.85;
    }

    @media (max-width: 600px) {
      .price-tag-content {
        padding: 24px 2vw 28px 2vw;
      }

      .price-tag-value {
        font-size: 2em;
      }
    }

    /* TEXT BLINK */
    #myBlinkId {
      animation: blink-animation 2s steps(2, start) infinite;
      -webkit-animation: blink-animation 2s steps(2, start) infinite;
    }

    @keyframes blink-animation {
      to {
        visibility: hidden;
      }
    }

    @-webkit-keyframes blink-animation {
      to {
        visibility: hidden;
      }
    }


    /* ANSWER CODE*/
    .answer-feedback {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      padding: 14px 20px;
      border-radius: 10px;
      font-size: 1.25em;
      font-weight: 500;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
      animation: fadeInScale 0.4s ease;
    }

    .answer-feedback.correct {
      background: linear-gradient(90deg, #e0ffe5 0%, #b2f9cc 100%);
      color: #198754;
      border-left: 5px solid #198754;
    }

    .answer-feedback.incorrect {
      background: linear-gradient(90deg, #fff0f0 0%, #ffd6d6 100%);
      color: #c0392b;
      border-left: 5px solid #c0392b;
    }

    .answer-feedback .icon {
      font-size: 1.6em;
      flex-shrink: 0;
    }

    @keyframes fadeInScale {
      0% {
        opacity: 0;
        transform: scale(0.95);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }