p.para {
  font-size: 20px;
  color: black;
  font-family: Verdana;
}

span.para1 {
  font-size: 22px;
  color: green;
  font-family: Verdana;
  font-weight: 600;
}

/* table */


 h1,h2 {
            text-align: left;
            color: #004d4d;
        }

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

        th {
            background: #004d4d;
            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: #e6ffff;
        }

        .type {
            font-weight: bold;
            color: #004d4d;
        }
/* table end */

.sentence1 {
  position: relative;
  padding: 20px;
  width: 500px;
  border-radius: 15px;
  background: #e5f5f5;
  color: black;
  /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
}



.sentence2 {

  position: relative;
  padding: 20px;
  width: 500px;
  border-radius: 15px;
  background: #e5f5f5;
  color: black;
  /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
}


.sentence3 {
  position: relative;
  padding: 20px;
  width: 500px;
  border-radius: 15px;
  background: #e5f5f5;
  color: black;
  /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
}


.sentence4 {
  position: relative;
  padding: 20px;
  width: 500px;
  border-radius: 15px;
  background: #e5f5f5;
  color: black;
  /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */

}
  .sentence5 {
    position: relative;
    padding: 20px;
    width: 500px;
    border-radius: 15px;
    background: #e5f5f5;
    color: black;
    /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
    
  }

  .sentence6 {
    position: relative;
    padding: 20px;
    width: 500px;
    border-radius: 15px;
    background: #e5f5f5;
    color: black;
    /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
    
  }


  .sentence7 {
    position: relative;
    padding: 20px;
    width: 500px;
    border-radius: 15px;
    background: #e5f5f5;
    color: black;
    /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
  }


/* common mistakes */

/* .wrapper {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
}

.mistake {
    background: white;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
    border-left: 6px solid #e63946;
}

.mistake h2 {
    margin-top: 0;
    color: #1d3557;
} */

.wrong {
    color: #e63946;
    font-size: 20px;
    font-weight: 600;
}

.right {
    color: #2a9d8f;
    font-size: 20px;
    font-weight: 600;
}

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

.example {
    font-size: 20px;
    color: #444;
    font-style: italic;
}

ul {
    font-size: 20px;
    padding-left: 18px;
    margin: 8px 0;
}

/* common mistakes end */



/* adjective 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, #004d4d, #004d4d);
    /* 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 #004d4d;
}

/* 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) {
    .sentence1 {
      width: 345px;
    }

    .sentence2 {
      width: 345px;
    }

    .sentence3 {
      width: 345px;
    }

    .sentence4 {
      width: 345px;
    }

    .sentence5 {
      width: 345px;
    }

    .sentence6 {
      width: 345px;
    }

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