/* src/courses/dsa-fundamentals/DSAFundamentals.css */
.course-overview { max-width: 1200px; margin: 0px auto; padding: 2rem; }
.course-overview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid rgb(224, 224, 224); }
.course-overview-header h1 { color: rgb(44, 62, 80); margin: 0px; font-size: 2.5rem; }
.course-overview-content { display: flex; flex-direction: column; gap: 2rem; }
.course-description { background: rgb(248, 249, 250); padding: 1.5rem; border-radius: 8px; border-left: 4px solid rgb(25, 118, 210); }
.course-description h2 { color: rgb(25, 118, 210); margin-top: 0px; margin-bottom: 1rem; }
.course-description p { color: rgb(85, 85, 85); line-height: 1.8; font-size: 1.05rem; margin: 0px; }
.course-importance { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.course-importance h2 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 1.5rem; }
.importance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.importance-item { padding: 1.5rem; background: rgb(248, 249, 250); border-radius: 6px; border-left: 4px solid rgb(76, 175, 80); transition: transform 0.2s, box-shadow 0.2s; }
.importance-item:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; }
.importance-item h3 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 0.75rem; font-size: 1.2rem; }
.importance-item p { color: rgb(85, 85, 85); line-height: 1.6; margin: 0px; }
.real-world-applications { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.real-world-applications h2 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 1rem; }
.real-world-applications ul { list-style: none; padding: 0px; }
.real-world-applications li { padding: 0.75rem 0px; border-bottom: 1px solid rgb(224, 224, 224); color: rgb(85, 85, 85); line-height: 1.6; }
.real-world-applications li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.real-world-applications li strong { color: rgb(25, 118, 210); }
.course-structure { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.course-structure h2 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 1.5rem; }
.structure-info { display: flex; flex-direction: column; gap: 1.5rem; }
.structure-item { padding: 1.5rem; background: rgb(248, 249, 250); border-radius: 6px; border-left: 4px solid rgb(255, 152, 0); }
.structure-item h3 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 0.75rem; font-size: 1.2rem; }
.structure-item p { color: rgb(85, 85, 85); line-height: 1.6; margin: 0px; }
.learning-approach { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.learning-approach h2 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 1.5rem; }
.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.approach-item { padding: 1.5rem; background: rgb(248, 249, 250); border-radius: 6px; border-left: 4px solid rgb(156, 39, 176); }
.approach-item h3 { color: rgb(44, 62, 80); margin-top: 0px; margin-bottom: 0.75rem; font-size: 1.1rem; }
.approach-item p { color: rgb(85, 85, 85); line-height: 1.6; margin: 0px; }
@media (max-width: 768px) {
  .course-overview { padding: 1rem; }
  .course-overview-header h1 { font-size: 2rem; }
  .importance-grid, .approach-grid { grid-template-columns: 1fr; }
}