p.para{
font-size: 20px; color:black; font-family:Verdana;
}
span.para1{
 font-size: 22px; color:black; font-family:Verdana;font-weight: 700;   
}





/* table */


    table {
      width: 100%;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #2c3e50;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #e6f2ff;
    }


/* common mistakes */
/* * {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f2f4f7;
    color: #333;
} */

 /* h2.common_mistakes {
     background: linear-gradient(135deg, #fd7e14, #ffc107); 
     color: #fff; 
     text-align: center; 
     padding: 30px 20px; 
}  */

/* header p {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.9;
}  */
h2.cm{
  color: green;
  text-decoration: underline;
}
/* .container {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
}

.card {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    border-left: 6px solid #fd7e14;
}

.card h2 {
    margin-top: 0;
    color: #fd7e14;
} */

.wrong {
    color: #dc3545;
    font-size: 20px;
    font-weight: bold;
}

.right {
    color: #198754;
    font-size: 20px;
    font-weight: bold;
}

.rule {
    font-size: 20px;
    color: #555;
    margin-top: 6px;
}

/* footer {
    text-align: center;
    padding: 15px;
    font-size: 14px;
    color: #777;
} */

/* common mistakes end */


/* Been vs Being quiz */

:root{--bg:#0f1724;--card:#0b1220;--accent:#ef4444;--muted:#94a3b8;--glass:rgba(255,255,255,0.03)}
/* html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui} */
.body1{background:linear-gradient(180deg,#071029 0%,#071827 60%);display:flex;align-items:center;justify-content:center;padding:36px;color:#e6eef8;border-radius: 25px;}
.container{width:920px;max-width:96%;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:28px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
h4{margin:0 0 6px;font-size:22px}
p.lead{margin:0 0 20px;color:var(--muted)}
.card{background:var(--card);border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.question{font-weight:600;margin-bottom:10px}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.option{background:var(--glass);padding:10px;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,0.03);transition:transform .12s}
.option:hover{transform:translateY(-3px)}
.option.selected{outline:2px solid rgba(53, 241, 6, 0.938)}
.controls{display:flex;gap:10px}
button{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
button.primary{background:var(--accent);border-color:transparent;color:#fff}
.progress{height:10px;background:rgba(255,255,255,0.04);border-radius:8px;overflow:hidden;margin:14px 0}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#f97316);width:0%}
.footer1{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:13px}
.result{padding:12px;border-radius:10px;background:rgba(255,255,255,0.02);margin-top:12px}
.answers-list{list-style:none;padding:0;margin-top:10px}
.answers-list li{padding:6px 8px;border-radius:6px;margin-bottom:6px;background:rgba(255,255,255,0.02)}
@media(max-width:600px){.options{grid-template-columns:1fr}}



/* next lesson button  */
/* Button container */
.button-container {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 50px auto;
}

/* Common button style */
.lesson-button {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
  color: white;
}

/* Previous button */
.prev-btn {
  background-color: #ff4d4d; /* Red */
}

.prev-btn:hover {
  background-color: #e60000; /* Darker red on hover */
}

/* Next button */
.next-btn {
  background-color: #4CAF50; /* Green */
}

.next-btn:hover {
  background-color: #2e7d32; /* Darker green on hover */
}

/* next lesson button end */



.quiz-btn {
     
    padding: 15px 40px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, #db05bf, #dc2696);
    box-shadow: 0 10px 30px rgba(239, 68, 196, 0.6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover animation */
.quiz-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgb(239, 68, 188);
}

/* Click animation */
.quiz-btn:active {
    transform: scale(0.95);
}

/* Shining effect */
.quiz-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transition: 0.6s;
}

.quiz-btn:hover::before {
    left: 120%;
}


  

/* Mobile view */
@media(max-width:768px){
     .sidebar{background-color:#111;}
    .search-box {
  width: 250px;
}
    .controls {
    flex-wrap: wrap;         /* allow buttons to go to next line */
    justify-content: center; /* center horizontally */
    gap: 10px;
  }

  #prev, 
  #next {
    
    margin-top: 8px;
    width: 100%;

  }

  #submit {
    width: 100%;             /* Submit goes to second row */
    margin-top: 8px;
  }
}


/* footer */
a.footer-a{
  color: rgb(1, 106, 175); 
  text-decoration: none;
}