body {
  font-family: 'Poppins', sans-serif;
  background: #f7f7f7;
  color: #333;
}

.navbar .brand h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.3px;
}

.navbar .brand p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #ffe6e6;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}


.btn-primary,
.btn-secondary,
button {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2px;
}

#question {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}

#options label {
  font-size: 14px;
  font-weight: 400;
  color: #444;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  background: #fff;
}

/* MINI STATUS BAR */
.exam-status-bar {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 15px;

  background: #d80000;
  color: #fff;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* LEFT (Answered Count) */
.status-left {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* CENTER (Progress Bar) */
.status-center {
  flex: 1;
}

/* PROGRESS TRACK */
.status-center .progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  overflow: hidden;
}

/* PROGRESS FILL */
#progressFill {
  height: 100%;
  width: 0%;
  background: #00e676;
  transition: width 0.3s ease;
}

/* RIGHT (TIMER) */
.status-right {
  font-weight: bold;
  font-size: 14px;

  background: #fff;
  color: #d80000;

  padding: 6px 12px;
  border-radius: 20px;
}

/* MOBILE OPTIMIZATION */
@media(max-width:768px){

  .exam-status-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .status-left,
  .status-right {
    text-align: center;
  }

  .status-right {
    align-self: center;
  }
}

.main{
  display:flex;
  flex-wrap:wrap;
  padding:20px;

  gap:30px; /* ✅ ADD THIS */
}

.question-box{
flex:2;
background:#ffe6eb;
padding:20px;
border-radius:10px;
}

#options{
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

/* EACH OPTION */
#options label{
display:grid;
grid-template-columns:20px 1fr;
align-items:center;

background:#f9f9f9;
padding:12px 15px;

border-radius:8px;
border:1px solid #ddd;

cursor:pointer;
transition:0.2s ease;
}

/* HOVER EFFECT */
#options label:hover{
background:#ffe6eb;
border-color:var(--red);
}

/* RADIO FIX */
#options input[type="radio"]{
width:16px;
height:16px;
margin:0;
justify-self:center;
accent-color:var(--red);
}

#options input[type="radio"]:checked + span{
font-weight:bold;
color:var(--red);
}

#options label *{
box-sizing:border-box;
}

#options label{
font-size:15px;
line-height:1.4;
}

.nav-buttons{
margin-top:15px;
}

.nav-buttons button{
margin-right:10px;
padding:10px;
background:var(--red);
color:white;
border:none;
cursor:pointer;
}

.side-panel{
  flex:1;
  margin-left:0; /* REMOVE old margin */
}

#questionNumbers{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}

.q-btn{
padding:10px;
background:#ddd;
border:none;
cursor:pointer;
}

.q-btn.active{
background:red;
color:white;
}

.q-btn.answered{
background:green;
color:white;
}

.q-btn.flagged{
background:orange;
color:white;
}

.submit-btn {
  width: 100%;
  display: block;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  cursor: pointer;
}

/* INSTRUCTION PAGE */
.instruction {
  padding: 15px;   /* reduced from 20px */
  margin: 0;       /* remove extra spacing */
}

.instruction h2{
color:red;
}

.instruction ul{
text-align:left;
margin-top:20px;
}

.instruction button{
margin-top:20px;
padding:12px 20px;
background:red;
color:white;
border:none;
cursor:pointer;
font-size:16px;
}

input{
padding:10px;
width:80%;
border-radius:5px;
border:1px solid #ccc;
}

#remark{
margin-top:15px;
font-weight:bold;
color:red;
}

.exam-wrapper{
padding:15px 10% 40px;
}

.question-box{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.side-panel{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.review-item{
background:#f9f9f9;
padding:10px;
margin:8px 0;
border-radius:8px;
cursor:pointer;
border:1px solid #ddd;
transition:0.2s;
}

.review-item:hover{
background:#ffe6eb;
border-color:var(--red);
}

.status-answered{
color:green;
font-weight:bold;
}

.status-unanswered{
color:red;
font-weight:bold;
}

.status-unanswered{
color:red;
font-weight:bold;
animation:blink 1s infinite;
}

@keyframes blink{
50%{opacity:0.4;}
}

.q-btn.unanswered{
border:2px solid red;
color:red;
}

#timer{
  background:white;
  color:#d80000; /* 🔥 FIXED */
  padding:8px 15px;
  border-radius:8px;
  font-weight:bold;
  font-size:18px;
}

.footer{
background:linear-gradient(135deg, var(--red), #a80000);
color:white;
padding:30px 10%;
text-align:center;
border-top:3px solid var(--pink);
box-shadow:0 -5px 20px rgba(0,0,0,0.1);
}

.footer p{
font-size:14px;
opacity:0.95;
}

.footer-credit a{
color:#7aa5f5;
font-weight:600;
text-decoration:none;
}

.footer-credit a:hover{
color:#ffffff;
text-decoration:underline;
}

@media (max-width:768px){

.exam-wrapper{
padding:15px 15px 30px;
}

.main{
flex-direction:column;
gap:20px;
}

.question-box{
width:100%;
}

.side-panel{
margin-left:0;
width:100%;
}

.header{
flex-direction:column;
gap:10px;
text-align:center;
}

}

@media (max-width:768px){

#options label{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

#options input[type="radio"]{
transform:scale(1.2);
}

}

@media (max-width:768px){

#questionNumbers{
grid-template-columns:repeat(4,1fr);
gap:8px;
}

.q-btn{
padding:8px;
font-size:14px;
}

}

@media (max-width:768px){

#timer{
font-size:16px;
padding:6px 10px;
}

}

@media (max-width:768px){


  .instruction{
    margin:20px 10px;   /* was 100px ❌ */
    padding:15px;
  }

input{
width:100%;
}

}

@media (max-width:768px){

button{
width:100%;
margin-top:8px;
}

.nav-buttons button{
width:32%;
font-size:13px;
}

}

button{
padding:12px 18px;
border:none;
border-radius:8px;
font-family:'Poppins', sans-serif;
font-size:15px;
cursor:pointer;
transition:all 0.3s ease;
}

.btn-primary{
background:linear-gradient(135deg, #ff4d4d, #cc0000);
color:white;
box-shadow:0 4px 10px rgba(255,0,0,0.2);
}

/* HOVER */
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(255,0,0,0.3);
background:linear-gradient(135deg, #ff1a1a, #990000);
}

/* CLICK EFFECT */
.btn-primary:active{
transform:scale(0.97);
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.submit-btn {
  background: #d80000;
  color: #fff;

  padding: 12px 25px;
  border: none;
  border-radius: 30px;

  font-family: 'Poppins', sans-serif;
  font-weight: 500;

  cursor: pointer;

  display: inline-block;   /* IMPORTANT FIX */
  width: auto;             /* prevents full width */

  transition: 0.3s ease;
}

#reviewPage .submit-btn {
  display: block;
  margin: 20px auto;
  width: fit-content;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(216,0,0,0.25);
}

.submit-btn:hover{
background:linear-gradient(135deg, #cc0000, #660000);
transform:translateY(-2px);
}

.btn-flag{
background:#fff3cd;
color:#cc7a00;
border:1px solid #ffcc00;
}

.btn-flag:hover{
background:#ffe08a;
transform:translateY(-2px);
}

.q-btn{
padding:10px;
border-radius:6px;
background:#eee;
border:none;
cursor:pointer;
transition:all 0.2s ease;
}

.q-btn:hover{
background:#ffd6db;
transform:scale(1.05);
}

/* ACTIVE */
.q-btn.active{
background:red;
color:white;
}

/* ANSWERED */
.q-btn.answered{
background:green;
color:white;
}

/* UNANSWERED */
.q-btn.unanswered{
background:#ffcccc;
color:#990000;
}

/* FLAGGED */
.q-btn.flagged{
background:orange;
color:white;
}

.review-item{
padding:15px;
margin-bottom:10px;
border-radius:10px;
background:#fff;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
cursor:pointer;
transition:all 0.2s ease;
}

.review-item:hover{
transform:translateY(-3px);
box-shadow:0 6px 15px rgba(0,0,0,0.1);
background:#fff5f7;
}

.nav-buttons{
margin-top:20px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

#answerReview{
margin-top:20px;
text-align:left;
}

.review-box{
background:#fff;
padding:15px;
margin-bottom:15px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.correct{
color:green;
font-weight:600;
}

.wrong{
color:red;
font-weight:600;
}

.correct-answer{
color:green;
}

.your-answer{
color:#333;
}

#answerReview{
max-height:400px;
overflow-y:auto;
}

.cbt-landing {
  position: relative;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* BACKGROUND IMAGE */
  background: url("CBT-TEST.jpeg") center/cover no-repeat;
  overflow: hidden;
}

/* DARK GRADIENT OVERLAY (KEY FOR READABILITY) */
.cbt-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.6)
  );
  z-index: 1;
}

/* CONTENT BOX */
.cbt-hero-box {
  position: relative;
  z-index: 2;
  max-width: 750px;
  padding: 25px;
  color: #fff;

  animation: fadeUp 1s ease-in-out;
}

/* HEADLINE */
.cbt-hero-box h1 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* PARAGRAPH */
.cbt-hero-box p {
  font-size: 16px;
  opacity: 0.95;
  margin-bottom: 15px;
}

/* TAGS */
.cbt-tags {
  margin: 15px 0;
}

.cbt-tags span {
  display: inline-block;
  margin: 5px;
  padding: 8px 14px;
  border-radius: 20px;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 12px;

  backdrop-filter: blur(6px);
}

/* BUTTON */
.start-btn {
  background: #d80000;
  color: #fff;
  border: none;
  padding: 13px 28px;
  border-radius: 30px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s ease;
  box-shadow: 0 5px 20px rgba(216,0,0,0.4);
}

.start-btn:hover {
  transform: scale(1.05);
}

/* SMALL NOTE */
.small-note {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8;
}

/* ANIMATION */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBILE */
@media(max-width:768px){
  .cbt-hero-box h1 {
    font-size: 24px;
  }

  .cbt-hero-box p {
    font-size: 14px;
  }
}

/* ANIMATION */
.pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}

.fade {
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.hidden {
  display: none;
}

.fade-out {
  opacity: 0;
  transition: 0.5s ease;
}

.navbar {
  margin: 0;
  padding: 10px 20px;
}

.footer {
  margin: 0;
  padding: 20px 0;
}

section {
  margin: 0;
}

.instruction {
  min-height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: flex-start; /* IMPORTANT FIX */
  padding-top: 20px;
}

/* MAIN CARD */
.exam-card {
  background: #ffffff;
  width: 100%;
  max-width: 750px;
  border-radius: 15px;
  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid #eee;

  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HEADER (SOLID RED + WHITE TEXT) */
.exam-header {
  background: #d80000;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}

.exam-header h2 {
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 5px;
}

.exam-header p {
  font-size: 13px;
  color: #ffffff;
  opacity: 0.9;
}

/* USER INPUT */
.exam-user {
  display: flex;
  gap: 12px;
  padding: 18px;
  background: #fff;
}

.exam-user input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
  transition: 0.2s;
}

.exam-user input:focus {
  border: 1px solid #d80000;
}

/* INFO SECTION */
.exam-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: #fff5f7;
}

.info-box {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;

  border: 1px solid #f1f1f1;
  transition: 0.2s;
}

.info-box:hover {
  transform: translateY(-2px);
  border: 1px solid #ffd6de;
}

.info-box h4 {
  font-size: 12px;
  color: #888;
}

.info-box p {
  font-weight: 600;
  color: #d80000;
}

/* INSTRUCTIONS */
.exam-rules {
  padding: 20px;
}

.exam-rules h3 {
  color: #d80000;
  margin-bottom: 10px;
  font-size: 18px;
}

.exam-rules ul {
  padding-left: 20px;
}

.exam-rules li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
}

/* START BUTTON */
.exam-start {
  text-align: center;
  padding: 20px;
}

.exam-start button {
  background: #d80000;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 25px;
  font-size: 15px;
  cursor: pointer;

  transition: 0.2s;
}

.exam-start button:hover {
  transform: scale(1.05);
}

/* MOBILE */
@media(max-width: 600px) {

  .exam-info {
    grid-template-columns: 1fr;
  }

  .exam-user {
    flex-direction: column;
  }

  .exam-header h2 {
    font-size: 18px;
  }
}




#instructionPage {
  display: none;
}

body {
  padding-top: 80px; /* adjust if your header is taller */
}

#instructionPage {
  display: none;
}

/* NAVBAR BACKGROUND (CBT STYLE) */
.navbar {
  background: #d80000;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

/* BRAND TEXT WHITE */
.navbar .brand h2,
.navbar .brand p {
  color: #fff;
}

/* DESKTOP MENU */
.nav-menu a {
  color: #fff;
}

/* HAMBURGER ICON WHITE */
.hamburger span {
  background: #fff;
}

/* MOBILE MENU - DROPDOWN (NOT FULL SCREEN) */
@media(max-width: 768px) {

  .nav-menu {
    position: absolute;
    top: 70px;
    right: 15px;

    width: 220px;
    background: #b30000;

    display: flex;
    flex-direction: column;

    border-radius: 12px;
    padding: 10px 0;

    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    transform: scaleY(0);
    transform-origin: top;
    transition: 0.25s ease;

    opacity: 0;
    pointer-events: none;
  }

  /* SHOW MENU */
  .nav-menu.active {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu a {
    color: #fff;
    padding: 12px 18px;
    text-align: left;
    font-size: 14px;
  }

  .nav-menu a:hover {
    background: rgba(255,255,255,0.1);
  }
}

/* HAMBURGER ANIMATION */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.hamburger span {
  display: block;
  height: 3px;
  width: 25px;
  background: #f0eeee;
  margin: 5px 0;
  transition: 0.3s;
}

.review-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

/* FINAL SUBMIT (GREEN) */
.submit-final-answer {
  background: #28a745; /* real green */
  color: #fff;
  border: none;

  padding: 12px 25px;
  border-radius: 30px;

  font-family: 'Poppins', sans-serif;
  font-weight: 500;

  cursor: pointer;
  transition: 0.3s ease;
}

.submit-final-answer:hover {
  background: #d80000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40,167,69,0.3);
}

/* BACK TO EXAM (RED) */
.back-exam {
  background: #d80000;
  color: #fff;
  border: none;

  padding: 12px 25px;
  border-radius: 30px;

  font-family: 'Poppins', sans-serif;
  font-weight: 500;

  cursor: pointer;
  transition: 0.3s ease;
}

.back-exam:hover {
  background: #b30000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(216,0,0,0.25);
}



.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#d80000;
  color:white;
  padding:10px 15px;
}

.exam-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.exam-right img{
  width:35px;
  height:35px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid white;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #ffd6db;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: #00c853;
  transition: width 0.3s;
}

/* PREMIUM CTA CONTAINER */
.cta-premium {
  margin-top: 40px;
  padding: 40px 25px;

  background: #ffffff;
  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  text-align: center;

  position: relative;
  overflow: hidden;
}

/* SUBTLE TOP ACCENT (BRAND RED LINE) */
.cta-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #ff4d4d, #d80000);
}

/* CONTENT */
.cta-content h3 {
  font-size: 22px;
  color: #d80000;
  margin-bottom: 12px;
  font-weight: 600;
}

/* MAIN TEXT */
.cta-main-text {
  font-size: 15px;
  color: #0c0c0c;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* SUB TEXT */
.cta-sub-text {
  font-size: 13px;
  color: #d80000;
  margin-bottom: 25px;
}

/* PREMIUM BUTTON */
.cta-premium-btn {
  display: inline-block;
  padding: 14px 28px;

  background: #d80000;
  color: #fff;
  text-decoration: none;

  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;

  letter-spacing: 0.3px;

  box-shadow: 0 8px 25px rgba(216,0,0,0.25);

  transition: all 0.3s ease;
}

/* HOVER */
.cta-premium-btn:hover {
  background: #a80000;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(216,0,0,0.35);
}

/* MOBILE OPTIMIZATION */
@media(max-width: 768px){

  .cta-premium {
    padding: 30px 18px;
  }

  .cta-content h3 {
    font-size: 18px;
  }

  .cta-main-text {
    font-size: 14px;
  }

  .cta-sub-text {
    font-size: 12px;
  }

  .cta-premium-btn {
    width: 100%;
  }

}


/* OVERLAY */
.finish-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* BOX */
.finish-box {
  background: #fff;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;

  width: 90%;
  max-width: 400px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* TITLE */
.finish-box h3 {
  color: #d80000;
  margin-bottom: 10px;
}

/* TEXT */
.finish-box p {
  font-size: 14px;
  color: #444;
  margin-bottom: 20px;
}

/* BUTTON GROUP */
.finish-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* BUTTON BASE */
.finish-btn {
  padding: 12px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

/* PREMIUM */
.finish-btn.premium {
  background: #d80000;
  color: #fff;
}

/* FINISH */
.finish-btn.danger {
  background: #333;
  color: #fff;
}

/* CANCEL */
.finish-btn.cancel {
  background: #eee;
  color: #333;
}

/* OVERLAY */
.result-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* BOX */
.result-box {
  background: #fff;
  width: 90%;
  max-width: 420px;

  padding: 30px 20px;
  border-radius: 18px;

  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  animation: pop 0.3s ease;
}

/* ANIMATION */
@keyframes pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* TITLE */
.result-box h2 {
  color: #d80000;
  margin-bottom: 10px;
}

/* TEXT */
.result-box p {
  font-size: 14px;
  color: #444;
  margin: 6px 0;
}

/* NOTE */
.result-note {
  margin-top: 10px;
  font-size: 13px;
  color: #777;
}

/* BUTTONS */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* BASE BUTTON */
.result-btn {
  padding: 12px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

/* PREMIUM */
.result-btn.premium {
  background: #d80000;
  color: #fff;
}

/* HOME */
.result-btn.home {
  background: #333;
  color: #fff;
}
.full-btn {
  width: 100%;
  display: block;
  text-align: center;
  padding: 12px 18px;
  border-radius: 8px;

  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  cursor: pointer;
}

.full-btn {
  margin-top: 10px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  margin-top: 20px;
}

/* BUTTON STYLE */
.action-btn {
  background: #d80000;
  color: #fff;

  border: none;
  border-radius: 30px;

  padding: 12px 25px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;

  cursor: pointer;
  transition: 0.3s ease;

  width: auto;        /* IMPORTANT: not full width */
  min-width: 180px;   /* keeps nice shape */
  text-align: center;
}

/* HOVER EFFECT */
.action-btn:hover {
  background: #a80000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(216,0,0,0.25);
}
@media(max-width:768px){

  .action-btn {
    min-width: 70%;   /* centered but not full screen */
    font-size: 14px;
  }

}
.submit-btn{
  margin-top:25px; /* increase spacing */
}

.hide-header {
  display: none !important;
}


.academy-name{
  display:block;
  font-size:20px;
  font-weight:600;
  opacity:0.9;
}

#answeredCount{
    font-size:20px;
  }
  
@media(max-width:768px){

  .status-left{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .academy-name{
    font-size:11px;
  }

  #answeredCount{
    font-size:20px;
  }

}