/* Reset & Variables */
:root {
--primary: #04AA6D;
--secondary: #282A35;
--text: #282A35;
--bg: #ffffff;
--bg-light: #f1f1f1;
--border: #e7e9eb;
--html-color: #E34C26;
--css-color: #264de4;
--js-color: #F0DB4F;
--database-color: #00758F;
--python-color: #306998;
--nodejs-color: #68A063;
}

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

body {
font-family: 'Source Sans Pro', sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
}

/* Top Navigation */
.top-nav {
background: var(--secondary);
color: white;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 20px;
height: 60px;
}

.logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
font-weight: 700;
}

.logo i {
color: var(--primary);
}

.nav-links {
display: flex;
gap: 0;
margin-left: 40px;
flex: 1;
}

.nav-links > a, .nav-item > a {
color: white;
text-decoration: none;
padding: 20px 18px;
display: block;
transition: background 0.3s;
}

.nav-links > a:hover, .nav-item > a:hover {
background: rgba(255,255,255,0.1);
}

/* Mega Menu */
.mega-menu-trigger {
position: relative;
}

.mega-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
display: none;
min-width: 800px;
}

.mega-menu-trigger:hover .mega-menu {
display: block;
}

.mega-menu-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 30px;
}

.mega-column h3 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
}

.mega-column a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
color: var(--text);
text-decoration: none;
border-radius: 4px;
transition: background 0.2s;
}

.mega-column a:hover {
background: var(--bg-light);
}

.mega-column a i {
width: 20px;
}

.nav-actions {
display: flex;
gap: 10px;
margin-left: auto;
}

.btn-search, .btn-theme {
background: transparent;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
transition: background 0.3s;
}

.btn-search:hover, .btn-theme:hover {
background: rgba(255,255,255,0.1);
}

/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--primary) 0%, #059862 100%);
color: white;
padding: 80px 20px;
text-align: center;
}

.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
}

.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.95;
}

.search-box {
max-width: 600px;
margin: 0 auto 40px;
display: flex;
background: white;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.search-box input {
flex: 1;
border: none;
padding: 18px 25px;
font-size: 1rem;
outline: none;
}

.search-box button {
background: var(--secondary);
border: none;
color: white;
padding: 0 30px;
cursor: pointer;
font-size: 1.2rem;
}

.hero-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
}

.stat {
display: flex;
flex-direction: column;
}

.stat strong {
font-size: 2rem;
}

/* Courses Section */
.courses {
padding: 80px 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.courses h2, .features h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: var(--secondary);
}

.course-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.course-card {
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 30px;
text-decoration: none;
color: var(--text);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}

.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.card-icon {
font-size: 3rem;
margin-bottom: 20px;
}

.course-card.html .card-icon { color: var(--html-color); }
.course-card.css .card-icon { color: var(--css-color); }
.course-card.js .card-icon { color: var(--js-color); }
.course-card.database .card-icon { color: var(--database-color); }
.course-card.python .card-icon { color: var(--python-color); }
.course-card.nodejs .card-icon { color: var(--nodejs-color); }

.course-card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.card-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--primary);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
}

/* Features */
.features {
background: var(--bg-light);
padding: 80px 20px;
}

.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}

.feature-item {
text-align: center;
}

.feature-item i {
font-size: 3rem;
color: var(--primary);
margin-bottom: 20px;
}

.feature-item h3 {
margin-bottom: 10px;
}

/* Footer */
footer {
background: var(--secondary);
color: white;
padding: 50px 20px 20px;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 30px;
}

.footer-section h4 {
margin-bottom: 15px;
color: var(--primary);
}

.footer-section a {
display: block;
color: rgba(255,255,255,0.8);
text-decoration: none;
margin-bottom: 8px;
}

.footer-section a:hover {
color: white;
}

.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}

/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
}