/* Course Hero */
.course-hero {
 background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/course-hero-bg.jpg);
 background-size: cover;
 background-position: center;
 color: white;
 padding: 150px 0 80px;
 text-align: center;
}

.course-hero h1 {
 font-size: 2.5rem;
 margin-bottom: 20px;
}

.course-hero p {
 font-size: 1.2rem;
 max-width: 700px;
 margin: 0 auto 30px;
}

/* Course Details */
.course-details {
 padding: 80px 0;
}

.course-details-grid {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 40px;
}

.course-main h2 {
 font-size: 2rem;
 margin-bottom: 20px;
 color: var(--dark);
}

.course-main h3 {
 font-size: 1.5rem;
 margin: 30px 0 15px;
 color: var(--dark);
}

.course-main p {
 margin-bottom: 20px;
}

.course-features {
 list-style: none;
 margin-bottom: 30px;
}

.course-features li {
 margin-bottom: 10px;
 padding-left: 30px;
 position: relative;
}

.course-features li i {
 color: var(--secondary);
 position: absolute;
 left: 0;
 top: 3px;
}

.course-structure {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 20px;
 margin: 30px 0;
}

.structure-item {
 text-align: center;
 padding: 20px;
 background-color: var(--light);
 border-radius: 8px;
}

.structure-item i {
 font-size: 2rem;
 color: var(--secondary);
 margin-bottom: 15px;
}

.structure-item h4 {
 margin-bottom: 10px;
}

/* Course Sidebar */
.course-sidebar {
 position: sticky;
 top: 100px;
 align-self: start;
}

.course-card {
 background-color: var(--white);
 border-radius: 8px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 padding: 25px;
 margin-bottom: 30px;
}

.course-card h3 {
 font-size: 1.3rem;
 margin-bottom: 20px;
 color: var(--dark);
}

.course-info-item {
 display: flex;
 gap: 15px;
 margin-bottom: 15px;
}

.course-info-item i {
 color: var(--secondary);
 font-size: 1.2rem;
 margin-top: 3px;
}

.course-info-item h4 {
 font-size: 1rem;
 margin-bottom: 5px;
}

.course-info-item p {
 color: var(--gray);
 font-size: 0.9rem;
}

.btn-block {
 display: block;
 width: 100%;
 text-align: center;
 margin-top: 20px;
}

/* Course Levels */
.course-levels {
 background-color: var(--light);
 padding: 80px 0;
}

.course-levels h2 {
 text-align: center;
 margin-bottom: 20px;
 font-size: 2rem;
}

.course-levels p {
 text-align: center;
 margin-bottom: 40px;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
}

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

.level-card {
 background-color: var(--white);
 padding: 25px;
 border-radius: 8px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.level-card h3 {
 color: var(--secondary);
 margin-bottom: 10px;
 font-size: 1.2rem;
}

.level-card p {
 text-align: left;
 margin-bottom: 15px;
 font-size: 0.95rem;
}

.level-card ul {
 list-style: none;
}

.level-card ul li {
 margin-bottom: 8px;
 padding-left: 25px;
 position: relative;
 font-size: 0.9rem;
}

.level-card ul li::before {
 content: '•';
 color: var(--secondary);
 position: absolute;
 left: 10px;
}

/* Course Testimonials */
.course-testimonials {
 padding: 80px 0;
}

.course-testimonials h2 {
 text-align: center;
 margin-bottom: 50px;
 font-size: 2rem;
}

/* Course CTA */
.course-cta {
 background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('../images/cta-bg.jpg');
 background-size: cover;
 background-position: center;
 color: var(--white);
 padding: 80px 0;
 text-align: center;
}

.course-cta h2 {
 font-size: 2rem;
 margin-bottom: 20px;
}

.course-cta p {
 font-size: 1.2rem;
 margin-bottom: 30px;
}

.course-cta p strong {
 color: var(--secondary);
}

/* Responsive Styles */
@media (max-width: 992px) {
 .course-details-grid {
   grid-template-columns: 1fr;
 }
 
 .course-sidebar {
   position: static;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
 }
}

@media (max-width: 768px) {
 .course-hero {
   padding: 120px 0 60px;
 }
 
 .course-hero h1 {
   font-size: 2rem;
   color:white;
 }
 
 .course-structure {
   grid-template-columns: 1fr;
 }
 
 .course-sidebar {
   grid-template-columns: 1fr;
 }
 
 .levels-grid {
   grid-template-columns: 1fr;
 }
}

@media (max-width: 576px) {
 .course-hero {
   padding: 100px 0 40px;
 }
 
 .course-hero h1 {
   font-size: 1.8rem;
 }
 
 .course-cta .cta-buttons {
   flex-direction: column;
 }
 
 .course-cta .btn {
   width: 100%;
   margin-bottom: 15px;
 }
}