/* ============================================
   TECH WAVE CSS - Knowledge Wave India
   ============================================ */

.package-detail-area { padding: 60px 0 80px; background: #F6F8FF; }
.row { display: flex; flex-wrap: wrap; gap: 30px; }
.col-lg-8 { flex: 0 0 calc(66.667% - 15px); max-width: calc(66.667% - 15px); }
.col-lg-4 { flex: 0 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); }

.package-detail-thumb { border-radius: 15px; overflow: hidden; margin-bottom: 30px; background: linear-gradient(135deg, #0A210F, #14591D); }
.package-detail-thumb img { width: 100%; height: 360px; object-fit: cover; display: block; }

.package-detail-content { background: #fff; border-radius: 15px; padding: 35px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.package-meta { list-style: none; padding: 0; margin: 0 0 12px; }
.package-meta .rating { color: #FFD700; font-size: 14px; }
.package-detail-content .title { font-size: 32px; font-weight: 800; color: #0A210F; margin: 0 0 25px; }

.detail-tabs { list-style: none; padding: 0; margin: 0 0 25px; display: flex; gap: 5px; border-bottom: 2px solid #e0e0e0; }
.tab-item { margin-bottom: -2px; }
.tab-btn { padding: 14px 24px; border: none; background: none; font-size: 15px; font-weight: 600; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s ease; font-family: 'Inter', sans-serif; }
.tab-btn.active, .tab-btn:hover { color: #99AA38; border-bottom-color: #99AA38; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.overview-content h2 { font-size: 28px; color: #0A210F; margin: 0 0 10px; font-weight: 800; }
.overview-content h4 { font-size: 18px; color: #666; margin: 0 0 8px; }
.overview-content p { color: #666; font-size: 16px; line-height: 1.8; margin: 0 0 15px; }

.course-features { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; }
.course-features li { padding: 8px 0; font-size: 15px; color: #333; border-bottom: 1px solid #f0f0f0; }
.course-features li strong { color: #0A210F; }

.curriculum-title { font-size: 20px; color: #0A210F; margin: 0 0 20px; font-weight: 700; }
.curriculum-list { display: flex; flex-direction: column; gap: 10px; }
.curriculum-item { border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; }
.curriculum-header { width: 100%; text-align: left; padding: 18px 20px; background: none; border: none; font-size: 16px; font-weight: 600; color: #0A210F; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; }
.curriculum-header i { color: #99AA38; font-size: 14px; }
.curriculum-body { display: none; border-top: 1px solid #e0e0e0; }
.curriculum-item.active .curriculum-body { display: block; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-item { padding: 14px 20px 14px 35px; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #333; cursor: pointer; transition: all 0.3s ease; }
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: rgba(153,170,56,0.05); color: #99AA38; }

.package-sidebar { background: #fff; border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); position: sticky; top: 100px; }
.price-wrap { text-align: center; padding-bottom: 25px; border-bottom: 1px solid #e0e0e0; margin-bottom: 25px; }
.price { font-size: 36px; font-weight: 800; color: #99AA38; margin: 0; }
.info-wrap h5 { font-size: 18px; color: #0A210F; margin: 0 0 18px; font-weight: 600; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #333; }
.info-list li:last-child { border-bottom: none; }
.info-list li img { width: 22px; height: 22px; }
.info-list li span { margin-left: auto; font-weight: 600; color: #0A210F; }
.payment-wrap { padding: 20px 0; border-top: 1px solid #e0e0e0; margin-top: 20px; }
.payment-wrap h5 { font-size: 16px; color: #0A210F; margin: 0 0 12px; font-weight: 600; }
.payment-wrap img { width: 100%; }
.enroll-wrap { margin-top: 20px; }

.btn-enroll { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #99AA38; color: #0A210F; font-weight: 700; font-size: 16px; padding: 16px 25px; border-radius: 50px; text-decoration: none; border: 2px solid transparent; transition: all 0.3s ease; }
.btn-enroll:hover { background: transparent; color: #99AA38; border-color: #99AA38; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(153,170,56,0.3); }
.btn-enroll svg { transition: transform 0.3s ease; }
.btn-enroll:hover svg { transform: translateX(5px); }

.scroll-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #99AA38; color: #0A210F; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 999; display: none; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(153,170,56,0.4); transition: all 0.3s ease; }
.scroll-top.show { display: flex; }
.scroll-top:hover { background: #0A210F; color: #99AA38; transform: translateY(-5px); }

@media (max-width: 991.98px) {
    .col-lg-8, .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
    .package-detail-area { padding: 40px 0 60px; }
    .package-sidebar { position: static; }
    .package-detail-thumb img { height: 280px; }
    .course-features { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .package-detail-content { padding: 25px; }
    .package-detail-content .title { font-size: 26px; }
    .tab-btn { padding: 12px 16px; font-size: 14px; }
    .price { font-size: 28px; }
    .package-detail-thumb img { height: 220px; }
    .overview-content h2 { font-size: 24px; }
}

@media (max-width: 575.98px) {
    .package-detail-content { padding: 20px; }
    .package-detail-content .title { font-size: 22px; }
    .detail-tabs { flex-wrap: wrap; }
    .package-detail-thumb img { height: 200px; }
    .overview-content h2 { font-size: 20px; }
}