/* =========================
RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f6f8fb;
color:#1e293b;
line-height:1.7;
}

/* =========================
TOPBAR
========================= */

.topbar{

position:sticky;
top:0;
z-index:1000;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 8%;

background:rgba(255,255,255,0.9);

backdrop-filter:blur(10px);

border-bottom:1px solid #e2e8f0;

}

.back-btn{

text-decoration:none;

background:#f1f5f9;

color:#334155;

padding:10px 18px;

border-radius:12px;

font-weight:600;

transition:0.3s;

}

.back-btn:hover{

background:#dbeafe;
color:#2563eb;
transform:translateY(-2px);

}

.logo{

font-size:1.4rem;
font-weight:800;

color:#15803d;

letter-spacing:-0.5px;

}

/* =========================
HEADER CURSO
========================= */

.course-header{

padding:80px 8% 60px;

display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
flex-wrap:wrap;

background:linear-gradient(
135deg,
#14532d,
#166534,
#15803d
);

color:white;

position:relative;
overflow:hidden;

}

.course-header::before{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(255,255,255,0.05);
border-radius:50%;
top:-180px;
right:-120px;
}

.course-header::after{
content:"";
position:absolute;
width:250px;
height:250px;
background:rgba(255,255,255,0.05);
border-radius:50%;
bottom:-120px;
left:-80px;
}

.course-info{

flex:1;
min-width:280px;
position:relative;
z-index:2;

}

.course-badge{

display:inline-block;

background:rgba(255,255,255,0.15);

color:white;

padding:10px 18px;

border-radius:999px;

font-size:0.9rem;
font-weight:700;

margin-bottom:22px;

border:1px solid rgba(255,255,255,0.2);

backdrop-filter:blur(8px);

}

.course-info h1{

font-size:3rem;
line-height:1.1;

margin-bottom:22px;

color:white;

max-width:700px;

}

.course-info p{

font-size:1.1rem;
line-height:1.8;

max-width:650px;

color:#d1fae5;

}

/* =========================
PROGRESS
========================= */

.course-progress-box{

background:white;

padding:28px;

border-radius:24px;

min-width:280px;

box-shadow:
0 15px 40px rgba(0,0,0,0.15);

position:relative;
z-index:2;

}

.progress-text{

display:block;

font-weight:700;

margin-bottom:14px;

color:#334155;

}

.progress-bar{

width:100%;
height:14px;

background:#e2e8f0;

border-radius:999px;

overflow:hidden;

margin-bottom:14px;

}

.progress-fill{

height:100%;

background:
linear-gradient(
90deg,
#22c55e,
#16a34a
);

border-radius:999px;

}

.progress-percent{

font-size:0.95rem;
font-weight:700;

color:#15803d;

}

/* =========================
CONTAINER
========================= */

.container{

width:90%;
max-width:1100px;

margin:auto;

padding-bottom:100px;

}

/* =========================
LESSON CARD
========================= */

.lesson-card{

background:white;

padding:40px;

border-radius:28px;

margin-bottom:35px;

box-shadow:
0 10px 35px rgba(15,23,42,0.06);

border:1px solid #e2e8f0;

}

.lesson-top{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:25px;

flex-wrap:wrap;
gap:12px;

}

.lesson-number{

background:#dcfce7;

color:#166534;

padding:8px 16px;

border-radius:999px;

font-size:0.85rem;
font-weight:700;

}

.lesson-duration{

color:#64748b;
font-weight:600;

}

.lesson-card h2{

font-size:2rem;

margin-bottom:28px;

color:#0f172a;

}

.objectives{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;

}

.objective{

background:#f0fdf4;

padding:18px;

border-radius:18px;

font-weight:600;

border:1px solid #bbf7d0;

color:#166534;

}

/* =========================
CARDS
========================= */

.card{

background:white;

padding:45px;

border-radius:28px;

margin-bottom:35px;

box-shadow:
0 10px 35px rgba(15,23,42,0.06);

border:1px solid #e2e8f0;

}

.card h2{

font-size:2rem;

margin-bottom:22px;

color:#0f172a;

}

.card h3{

margin-top:25px;
margin-bottom:16px;

color:#166534;

}

.card p{

line-height:1.9;

margin-bottom:20px;

color:#475569;

font-size:1.05rem;

}

.card ul{

padding-left:22px;

}

.card li{

margin-bottom:14px;

line-height:1.7;

color:#334155;

}

/* =========================
STATS
========================= */

.stats-section{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-bottom:35px;

}

.stat-card{

background:white;

padding:35px;

border-radius:24px;

box-shadow:
0 10px 25px rgba(15,23,42,0.06);

border:1px solid #e2e8f0;

transition:0.3s;

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card h3{

font-size:1.4rem;

margin-bottom:16px;

color:#166534;

}

.stat-card p{

line-height:1.8;

color:#475569;

}

/* =========================
IMPORTANT BOX
========================= */

.important-box{

background:linear-gradient(
135deg,
#14532d,
#166534
);

padding:45px;

border-radius:28px;

margin-bottom:35px;

color:white;

box-shadow:
0 15px 35px rgba(0,0,0,0.12);

}

.important-box h2{

margin-bottom:18px;

font-size:2rem;

}

.important-box p{

line-height:1.9;

font-size:1.05rem;

color:#d1fae5;

}

/* =========================
SUMMARY
========================= */

.summary-card{

background:linear-gradient(
135deg,
#166534,
#15803d
);

padding:40px;

border-radius:28px;

margin-bottom:45px;

color:white;

box-shadow:
0 20px 40px rgba(22,101,52,0.2);

}

.summary-card h2{

margin-bottom:20px;

color:white;

}

.summary-card p{

line-height:1.9;

color:#dcfce7;

}

/* =========================
NAVIGATION
========================= */

.lesson-navigation{

display:flex;
justify-content:flex-end;

}

.next-btn{

text-decoration:none;

background:
linear-gradient(
90deg,
#22c55e,
#16a34a
);

color:white;

padding:18px 34px;

border-radius:18px;

font-weight:700;

font-size:1rem;

transition:0.3s;

box-shadow:
0 10px 25px rgba(34,197,94,0.3);

}

.next-btn:hover{

transform:translateY(-4px);

box-shadow:
0 15px 30px rgba(34,197,94,0.4);

}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#16a34a;
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#e2e8f0;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.course-header{

padding-top:50px;

}

.course-info h1{

font-size:2.2rem;

}

.card,
.lesson-card,
.important-box,
.summary-card{

padding:30px;

}

}

@media(max-width:600px){

.topbar{

padding:16px 5%;

}

.course-header{

padding:45px 5%;

}

.container{

width:92%;

}

.course-info h1{

font-size:1.9rem;

}

.card h2,
.lesson-card h2,
.important-box h2{

font-size:1.6rem;

}

.next-btn{

width:100%;
text-align:center;

}

}