* 
/* LAYOUT */
.main-wrapper { display: flex; min-height: 80vh; }

/* SIDEBAR */
.sidebar { width: 300px; background: white; border-right: 1px solid #ddd; padding: 30px 20px; }
.sidebar h3 { font-size: 1.1rem; margin-bottom: 20px; color: #2c3e50; border-left: 4px solid #007bff; padding-left: 10px; }
.filter-list { list-style: none; }
.filter-btn { 
    width: 100%; text-align: left; background: none; border: none; padding: 10px; 
    cursor: pointer; color: #555; transition: 0.3s; border-radius: 4px;
}
.filter-btn:hover { background: #f8f9fa; }
.filter-btn.active { color: #007bff; font-weight: bold; background: #eef6ff; }

/* CONTENT & CARDS */
.content-area { flex: 1; padding: 40px; background: #f8f9fa; }
.search-container { margin-bottom: 30px; }
.search-container input { width: 100%; max-width: 400px; padding: 12px; border-radius: 25px; border: 1px solid #ddd; outline: none; }

.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
.course-card { background: white; padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: 0.3s; }
.course-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.card-image img { width: 100px; height: auto; margin-bottom: 15px; }
.course-card h4 { font-size: 1rem; color: #333; height: 45px; overflow: hidden; }
.course-card p { font-size: 0.8rem; color: #888; margin: 10px 0; text-transform: uppercase; }
.enroll-card-btn { display: inline-block; padding: 10px 20px; background: #3984C6; color: white; text-decoration: none; border-radius: 5px; font-weight: 400; }


/* MOBILE */
@media (max-width: 768px) {
    .main-wrapper { flex-direction: column; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #ddd; }
}
.count {
    float: right;
    background: #e9ecef;
    color: #666;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    transition: 0.3s;
}

.filter-btn.active .count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
:root{
  --banner: #1D4567;
  --btn: #3984C6;
  --ice: #F6F8FA;
  --text: #222831;
  --muted: #6b7280;
  --card-bg: #f3f6f9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', sans-serif;
  background: var(--ice);
  color:var(--text);
  line-height:1.5;
}