*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:#eef2f7;color:#222;}

/* HEADER */
header{background:#fff;padding:5px 10px;position:sticky;top:0;z-index:1000;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 15%);}

.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:auto;gap:15px;}
/* LOGO */
.logo{max-width:120px;}
.logo img{width:100%;height:auto;object-fit:contain;background:#fff;padding:5px;border-radius:5px;}

h1 {font-size: clamp(22px, 5vw, 42px); line-height: 1.2; margin-bottom: 5px;}
h2 {font-size:25px; margin-bottom: 5px;}
h3 {font-size:24px; margin-bottom: 5px;}
p {font-size:15px; line-height:1.7;}
.clearH10{clear:both; height:10px;}
/* H1 */
header h1{color: #222;font-size:28px;font-weight:600;flex:1;text-align:center;line-height:1.3; margin-bottom: 5px;}
.Card1{background: #fff8d6; border-left: 5px solid #fbbc04; border-radius:16px;padding:20px; max-width:1300px; margin:20px auto 10px auto;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.Card2{background:#fff;border-radius:16px;padding:20px; max-width:1200px; margin:10px auto 10px auto;box-shadow:0 2px 12px rgba(0,0,0,0.08);}
/* WRAPPER */
.wrapper{display:grid; grid-template-columns:340px 1fr 340px;gap:20px;max-width:1300px;margin:10px auto;padding:15px;}

/* ADS */
.Quizcard{background:#fff;border-radius:16px;padding:10px; height:auto; display:flex;align-items:center;
justify-content:center;font-size:18px;font-weight:600;color:#777;box-shadow:0 2px 10px rgba(0,0,0,0.08);}

/* QUIZ */

.quiz{background:#fff;padding:20px;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.08);}

/* PROGRESS */
.progress-container{width:100%;height:10px;background:#ddd;border-radius:20px;overflow:hidden;margin-bottom:25px;}

.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#34a853,#0f9d58);transition:0.4s;}

/* QUESTION */
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;}

.question{font-size:22px;font-weight:600;margin-bottom:20px;line-height:1.5;}

/* OPTIONS */
.option{background:#f1f3f6;padding:10px 15px;margin-bottom:12px;border-radius:12px;
cursor:pointer;transition:0.3s;border:2px solid transparent;font-size:16px;font-weight:500;}

.option:hover{background:#e8f0fe;transform:translateY(-2px);}
.correct{background:#d4edda !important;border-color:#28a745 !important;color:#155724;}
.wrong{background:#f8d7da !important;border-color:#dc3545 !important;color:#721c24;}

/* BUTTONS */
.btns{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap;}

button{flex:1;padding:14px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:0.3s;}
button:hover{transform:translateY(-2px);opacity:0.95;}
.prev{background:#ccc;}
.answer{background:#34a853;color:#fff;}
.next{background:#1a73e8;color:#fff;}

/* EXPLANATION */
#explanationBox{margin-top:20px;padding:18px;border-radius:12px;background:#fff8d6;display:none;border-left:5px solid #fbbc04;font-size:14px;}

/* RESULT */
#completeBox{display:none;margin-top:30px;padding:5px;text-align:center;background:#f8fff8;border-radius:16px;}
.score{font-size:30px;font-weight:700;color:#1a73e8;margin:20px 0;}
.redirect{font-size:20px;font-weight:600;color:#444;}
.redirect span{font-size:34px;font-weight:600;color:#ff0000;}
/* Table */

.table-container{
width:100%;
overflow-x:auto;
margin:20px 0;
}

/* TABLE */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  background: #fff;
}

/* BORDERED */
.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #ddd;
}

/* HEADER STYLE */
table th {
  background: #1a73e8;
  color: #fff;
  padding: 12px;
  text-align: left;
  font-weight: 600;
}

/* CELL STYLE */
table td {
  padding: 12px;
  color: #333;
}

/* STRIPED ROWS */
.table-striped tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

.table-striped tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* HOVER EFFECT (Bootstrap-like feel) */
table tbody tr:hover {
  background-color: #e8f0fe;
  transition: 0.2s;
}

/* RESPONSIVE TABLE */
.table-responsive {
  overflow-x: auto;
  width: 100%;
}
/* List*/
.custom-list {
    padding-left: 22px;
    margin: 20px 0;
}

.custom-list li {
    margin-bottom: 12px;
    line-height: 1.8;
    color: #444;
    font-size: 16px;
    transition: all 0.3s ease;
}

.custom-list li:hover {
    color: #0d6efd;
    transform: translateX(3px);
}
/* Main container */
.m_container{
    display:flex;
    height:auto;
}

/* Left side */
.left{flex:1; color:white; padding:5px;}

/* Right side */
.right{flex:1; padding:5px;}

/* FOOTER */
footer{background:#111;color:#fff;text-align:center;padding:14px;margin-top:40px;font-size:14px;}

/* MOBILE */
@media(max-width:992px){
.wrapper{grid-template-columns:1fr;padding:10px 15px;}
.Quizcard{height:auto;}
.question{font-size:19px;}
.m_container{flex-direction:column;}
}

@media(max-width:768px){
header{font-size:20px;padding:5px 10px;}
.header-container{flex-direction:row;}
.logo img{width:100%;height:auto;}
 header h1{font-size:18px;text-align:center;}
.Card1{margin: 20px 15px 10px 15px;}
.Card2{margin: 10px 15px 10px 15px;}
.custom-list li {font-size: 15px; line-height: 1.7; }
}