p.para{
font-size: 20px; color:black; font-family:Verdana;
}
span.para1{
 font-size: 22px; color:black; font-family:Verdana;font-weight: 700;   
}
/* table */
 h1,h2 {
            text-align: left;
            color: #004080;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        th {
            background: #004080;
            color: white;
            padding: 12px;
            font-size: 16px;
        }
        td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            font-size: 15px;
        }

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

        tr:hover {
            background: #e6f0ff;
        }

        .type {
            font-weight: bold;
            color: #004080;
        }

/* table end */

.pa1{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa2{
   color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa3{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa4{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa5{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa6{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa7{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa8{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa9{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa10{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa11{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa12{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa13{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}
.pa14{
    color:black;
  padding: 20px;
  width: 700px;
  background-color: #e6e6e6;
  border-radius: 20px;

}


/* common mistakes */
/* 
.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 #dc3545;
}

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

.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;
}

/* common mistakes end */


/* past tense 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 */
}

/* 50 quiz */

.quiz-btn {
     
    padding: 10px  30px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, #004080, #004080);
    /* box-shadow: 0 10px 30px #004d4d; */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover animation */
.quiz-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px #004080;
}

/* 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){
    .pa1{width: 345px;}
    .pa2{width: 345px;}
    .pa3{width: 345px;}
    .pa4{width: 345px;}
    .pa5{width: 345px;}
    .pa6{width: 345px;}
    .pa7{width: 345px;}
    .pa8{width: 345px;}
    .pa9{width: 345px;}
    .pa10{width: 345px;}
    .pa11{width: 345px;}
    .pa12{width: 345px;}
    .pa13{width: 345px;}
    .pa14{width: 345px;}
     .sidebar{background-color:#111;}
      .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;
}