.course-card,.popular-card{color:#fff;border:1px solid #7a7a7a2e;border-radius:12px;padding-bottom:1rem;transition:all .2s ease-in-out;position:relative}.course-card:hover,.popular-card:hover{box-shadow:0 2px 4px #7a7a7a2e}.course-card.highlight{grid-column:span 2;overflow:hidden}.card-badge{background:var(--main-color);color:#fff;z-index:2;border-radius:20px;padding:3px 8px;font-size:.7rem;font-weight:500;position:absolute;top:8px;right:8px}.grade-name-badge{background:#c66024}@media (width>=768px){.card-badge{padding:4px 10px;font-size:.8rem;top:12px;right:12px}}.card-image .course-image{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform .5s}.course-card:hover .card-image .course-image{transform:scale(1.05)}.card-content{flex-direction:column;padding:20px 10px 0;display:flex;overflow:hidden}.card-title,.popular-title{-webkit-line-clamp:2;color:#1a2340;-webkit-box-orient:vertical;font-size:14px;font-weight:600;line-height:22px;display:-webkit-box;overflow:hidden}@media (width>=768px){.card-title,.popular-title{font-size:16px;line-height:25px}}.card-stats{flex-wrap:wrap;gap:10px;display:flex}.stat-item{color:#525252;border-radius:20px;align-items:center;gap:5px;padding:4px 8px;font-size:12px;display:flex}.card-description,.popular-summary{color:#555;-webkit-line-clamp:3;-webkit-box-orient:vertical;height:54px;margin-top:8px;font-size:11px;line-height:18px;overflow:hidden;display:-webkit-box!important}@media (width>=768px){.card-description,.popular-summary{height:60px;margin-top:10px;font-size:12px;line-height:20px}}.card-progress{margin-bottom:15px}.progress-bar{background:#e0e6ef;border-radius:3px;height:6px;margin-bottom:5px;overflow:hidden}.progress-fill{background:var(--main-color);border-radius:3px;height:100%}.progress-text{color:#294269;text-align:right;font-size:.8rem}.card-tags{flex-wrap:wrap;gap:8px;margin-bottom:15px;display:flex}.tag-item{color:#294269;background:#e9eef6;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:.8rem;display:flex}.view-course-btn{justify-content:center;align-items:center;gap:5px;display:inline-flex}.view-course-btn:hover{background:#7167d824;transform:translate(-5px)}.popular-courses-container{width:100%;overflow:hidden}.popular-courses-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px;display:grid}.popular-card{transition:all .3s;overflow:hidden}.popular-header{border-bottom:1px solid #e0e6ef;align-items:center;padding:12px;display:flex}.popular-number{color:#213555;background:#8ad3bb;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin-right:10px;font-size:.9rem;font-weight:600;display:flex}.popular-content{padding:12px;display:flex}.popular-image{border-radius:8px;width:80px;height:80px;margin-right:12px;overflow:hidden}.popular-image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.popular-details{flex:1}.popular-meta{flex-wrap:wrap;gap:10px;display:flex}.popular-actions{border-top:1px solid #e0e6ef;justify-content:flex-end;padding:12px;display:flex}.popular-btn{border-radius:20px;align-items:center;gap:5px;padding:6px 12px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.popular-btn,.popular-btn:hover{background:var(--main-color);color:#fff}.popular-btn:hover{transform:translate(-5px)}