body {
    background: black !important;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}


body{

font-family:"Cairo",sans-serif;

direction:rtl;

background:#f1f8e9;

color:#222;

min-height:100vh;

}



.header{

background:linear-gradient(
135deg,
#2e7d32,
#66bb6a
);

color:white;

text-align:center;

padding:45px 20px;

border-radius:0 0 35px 35px;

}



.header h1{

font-size:45px;

margin-bottom:10px;

}


.header p{

font-size:20px;

}



.welcome-card,
.lesson-box,
.features,
.daily-word,
.daily-sentence,
.progress,
.quiz-box{

width:92%;

max-width:900px;

margin:30px auto;

background:white;

padding:30px;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,0.08);

}



.levels{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

padding:25px;

}



.levels button{

background:white;

color:#2e7d32;

border:2px solid #4caf50;

border-radius:20px;

padding:12px 30px;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}



.levels button:hover{

background:#4caf50;

color:white;

transform:translateY(-4px);

}



.lesson-menu{

background:#f9fff9;

border:2px solid #c8e6c9;

border-radius:20px;

padding:20px;

margin:15px 0;

}



.lesson-menu h3{

color:#2e7d32;

margin-bottom:15px;

}



button{

font-family:"Cairo",sans-serif;

}



.lesson-menu button,
.lesson-content button,
.daily-word button,
.daily-sentence button{

background:#2e7d32;

color:white;

border:none;

border-radius:15px;

padding:10px 20px;

cursor:pointer;

}



button:hover{

background:#1b5e20;

}



.lesson-content{

line-height:2.2;

}



.lesson-content h3{

color:#2e7d32;

}



.features{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

}



.card{

background:#f9fff9;

width:260px;

padding:25px;

border-radius:20px;

text-align:center;

border:1px solid #c8e6c9;

}



.card h3{

color:#2e7d32;

margin-bottom:10px;

}



.daily-word,
.daily-sentence,
.quiz-box{

text-align:center;

}



.daily-word h2,
.daily-sentence h2,
.progress h2,
.quiz-box h2{

color:#2e7d32;

margin-bottom:15px;

}



.progress-container{

width:100%;

height:25px;

background:#ddd;

border-radius:20px;

overflow:hidden;

margin:15px 0;

}



#progress-bar{

height:100%;

width:0%;

background:#4caf50;

transition:.5s;

}



#progress-text{

font-size:18px;

font-weight:bold;

}



footer{

background:#2e7d32;

color:white;

text-align:center;

padding:25px;

margin-top:40px;

}



@media(max-width:600px){

.header h1{

font-size:32px;

}


.levels button{

width:45%;

}


.card{

width:100%;

}

}



.lesson-box,
.lesson-box h2,
.lesson-box h3,
.lesson-box p {
    color: #000 !important;
}

.lesson-box * {
    color: black !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body {
    background: black !important;
}