:root {
            --body-bg: #f8fafc;
            --card-bg: #ffffff;
            --accent-color: #6366f1;
        }

        body { background-color: var(--body-bg); margin: 0; font-family: 'Segoe UI', sans-serif; }
        .page-content { padding: 20px 8px; }

        .course-group { 
            max-width: 1100px; margin: 0 auto 30px auto; 
            opacity: 0; transform: translateY(20px); 
            transition: all 0.6s ease-out;
        }
        .course-group.show { opacity: 1; transform: translateY(0); }

        .section-header { 
            display: flex; align-items: center; gap: 6px;
            margin-bottom: 12px; padding-left: 5px;
        }
        .section-header i { color: var(--accent-color); font-size: 16px; }
        .section-header h2 { font-size: 16px; color: #334155; margin: 0; font-weight: 700; }

        .course-container {
            display: flex; 
            flex-wrap: wrap; /* নিচে নিচে নামার জন্য */
            gap: 8px; /* কার্ডের মাঝের ফাঁকা জায়গা */
            padding: 5px;
        }

        .card-anchor { 
            text-decoration: none; 
            color: inherit; 
            display: block; 
            flex: 0 0 calc(20% - 8px); /* ডেক্সটপে ৫টি */
        }

        .course-box {
            background: var(--card-bg); border-radius: 12px; overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.3s ease; height: 100%; 
            display: flex; flex-direction: column;
            border: 1px solid #f1f5f9;
        }

        .course-img { 
            height: 80px; width: 100%; 
            background-size: cover; background-position: center;
        }

        .course-info { padding: 8px 4px; text-align: center; }
        .course-info h3 { 
            margin: 0; font-size: 11px; color: #1e293b; 
            font-weight: 700; line-height: 1.2;
            min-height: 30px; display: flex; align-items: center; justify-content: center;
        }

        /* রেসপন্সিভ ব্রেকপয়েন্টস */
        @media (max-width: 1024px) {
            .card-anchor { flex: 0 0 calc(25% - 8px); } /* ট্যাবলেটে ৪টি */
        }

        @media (max-width: 768px) {
            .card-anchor { flex: 0 0 calc(33.33% - 8px); } /* ছোট ট্যাবলেটে ৩টি */
        }

        @media (max-width: 480px) {
            /* মোবাইলে ৩টি কার্ড দেখানোর জন্য */
            .card-anchor { flex: 0 0 calc(33.33% - 8px); } 
            .course-img { height: 65px; }
            .course-info h3 { font-size: 10px; }
            .section-header h2 { font-size: 15px; }
        }

        footer { display: none !important; }