p.para {
    font-size: 20px;
    color: black;
    font-family: Verdana;
}
h3.para{
    font-size: 22px;
    color: #993300;
}
h4,h6.para{
    font-size: 22px;
    color: #993300;
}
h5.para{
    font-size: 22px;
    color: #0f0099;
}
ul,ol.ul{
    margin-left: 50px;
}
li.para{
  font-size: 20px;
  color: black;
  font-family: Verdana;
}




/* table */
 h1,h2 {
            text-align: left;
            color: #660066;
        }

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

        th {
            background: #660066;
            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: #f7e6f7;
        }

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


        /* table end */


.fox{
        width: 95%;
        max-width: 600px;
        background: #f5dff5;
        padding: 30px;
        border-radius: 20px;
        /* box-shadow: 8px 8px 10px #b8b8b8,
              -8px -8px 15px #ffffff; */
    }

/* common mistakes */



.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 */



/* lead - led 10 quiz */

:root{
--bg:#0f1724;
--card:#0b1220;
--accent:#ef4444;
--muted:#94a3b8;
--glass:rgba(255,255,255,0.03)
}

.body1{
margin:0;
font-family:Arial;
background:linear-gradient(180deg,#071029 0%,#071827 60%);
color:#e6eef8;
}

.body1{
display:flex;
align-items:center;
justify-content:center;
padding:36px;
}

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

.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.9)
}

.submitBtn{
background:var(--accent);
border:none;
padding:10px 16px;
border-radius:8px;
color:#fff;
cursor:pointer;
margin-top:10px
}

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


/* lead - led 10 quiz end */


/* 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, #006666, #006666);
    /* 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 #006666;
}

/* 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){
    .card1{
        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;
}