:root { --cg-green:#24704d; --cg-deep:#103d2b; --cg-orange:#e27c3a; --cg-ink:#17261f; --cg-muted:#65736c; --cg-line:#dfe8e2; --cg-soft:#f4f8f5; }
.course-group-page { overflow:hidden; color:var(--cg-ink); background:#fff; font-family:var(--fontFamily,inherit); }
.course-group-page * { box-sizing:border-box; }
.cg-hero { position:relative; isolation:isolate; padding:46px 0 0; overflow:hidden; background:linear-gradient(135deg,#0e3d2a 0%,#1e704d 60%,#32825d 100%); color:#fff; }
.cg-hero::before,.cg-hero::after { position:absolute; z-index:-1; border-radius:50%; content:""; pointer-events:none; }
.cg-hero::before { width:620px; height:620px; top:-350px; inset-inline-end:-120px; border:1px solid rgba(255,255,255,.16); box-shadow:0 0 0 68px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.025); }
.cg-hero::after { width:300px; height:300px; bottom:-190px; inset-inline-start:10%; background:rgba(226,124,58,.22); filter:blur(25px); }
.cg-breadcrumb { display:flex; gap:9px; align-items:center; color:rgba(255,255,255,.65); font-size:14px; }
.cg-breadcrumb a { color:#fff; text-decoration:none; }.cg-breadcrumb a:hover { text-decoration:underline; }
.cg-hero__content { max-width:730px; padding:58px 0 68px; }.cg-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--cg-orange); font-size:13px; font-weight:800; letter-spacing:.03em; }.cg-hero .cg-eyebrow { color:#ffbc8c; }
.cg-hero h1,.cg-section-heading h2 { margin:14px 0; font-weight:800; letter-spacing:-.03em; }.cg-hero h1 { max-width:680px; font-size:clamp(36px,5vw,62px); line-height:1.08; color:#fff; }.cg-hero p { max-width:600px; margin:0; color:rgba(255,255,255,.82); font-size:18px; line-height:1.75; }
.cg-hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:31px; }.cg-primary-action { border-radius:8px; background:var(--cg-orange)!important; border-color:var(--cg-orange)!important; }.cg-primary-action:hover { background:#c96327!important; border-color:#c96327!important; }.cg-secondary-action { padding:12px 2px; color:#fff; font-weight:700; text-decoration:none; }.cg-secondary-action:hover { color:#ffbc8c; }
.cg-trust-bar { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(255,255,255,.17); }.cg-trust-item { display:flex; align-items:center; gap:12px; min-width:210px; padding:20px 30px 20px 0; margin-inline-end:30px; border-inline-end:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.77); font-size:13px; }.cg-trust-item:last-child { border:0; }.cg-trust-item i { color:#ffbc8c; font-size:24px; }.cg-trust-item strong { display:block; color:#fff; font-size:18px; line-height:1.1; }
.cg-modes,.cg-courses { padding:90px 0; }.cg-modes { background:var(--cg-soft); }.cg-section-heading { max-width:650px; margin:0 auto 38px; text-align:center; }.cg-section-heading--start { margin:0; text-align:start; }.cg-section-heading h2 { font-size:clamp(28px,3vw,42px); line-height:1.17; }.cg-section-heading p { margin:0; color:var(--cg-muted); font-size:16px; line-height:1.7; }
.cg-mode-card { height:100%; padding:32px; border:1px solid var(--cg-line); border-radius:16px; background:#fff; box-shadow:0 12px 28px rgba(15,54,37,.05); transition:transform .22s ease,box-shadow .22s ease; }.cg-mode-card:hover { transform:translateY(-5px); box-shadow:0 20px 38px rgba(15,54,37,.11); }.cg-mode-card__icon { display:grid; width:52px; height:52px; place-items:center; margin-bottom:23px; border-radius:14px; font-size:24px; }.cg-mode-card--blue .cg-mode-card__icon { color:#2875b8; background:#e8f3fc; }.cg-mode-card--green .cg-mode-card__icon { color:var(--cg-green); background:#e8f5ed; }.cg-mode-card--orange .cg-mode-card__icon { color:#c66328; background:#fff0e6; }.cg-mode-card h3 { margin:0 0 11px; font-size:22px; font-weight:800; }.cg-mode-card p { min-height:55px; margin:0 0 23px; color:var(--cg-muted); line-height:1.65; }.cg-mode-card__link { display:inline-flex; align-items:center; gap:9px; padding:0; border:0; background:transparent; color:var(--cg-green); font-weight:800; cursor:pointer; }.cg-mode-card__link i { font-size:12px; transition:transform .2s ease; }.cg-mode-card__link:hover i { transform:translateX(4px); }[dir="rtl"] .cg-mode-card__link:hover i { transform:translateX(-4px); }
.cg-courses { background:linear-gradient(180deg,#fff 0%,#f7faf8 100%); }.cg-courses__top { display:flex; justify-content:space-between; gap:25px; align-items:end; margin-bottom:35px; }.cg-filter { display:flex; flex-wrap:wrap; gap:8px; }.cg-filter button { padding:9px 15px; border:1px solid var(--cg-line); border-radius:999px; background:#fff; color:var(--cg-muted); font-size:13px; font-weight:750; cursor:pointer; transition:.2s ease; }.cg-filter button:hover,.cg-filter button.is-active { border-color:var(--cg-green); background:var(--cg-green); color:#fff; }.cg-course-item { margin-bottom:30px; transition:opacity .2s ease,transform .2s ease; }.cg-course-item[hidden] { display:none!important; }
/* Existing course-card partial */
.kh-course-card { display:flex; height:100%; min-height:535px; flex-direction:column; overflow:hidden; border:1px solid #e6ece8; border-radius:16px; background:#fff; color:var(--cg-ink); text-decoration:none; box-shadow:0 10px 28px rgba(12,43,29,.08); transition:transform .25s ease,box-shadow .25s ease; }.kh-course-card:hover { transform:translateY(-6px); color:var(--cg-ink); box-shadow:0 20px 42px rgba(12,43,29,.15); }.kh-course-cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--cg-deep); }.kh-course-cover img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }.kh-course-card:hover .kh-course-cover img { transform:scale(1.05); }.kh-course-cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,27,18,.6)); }.kh-course-type-pill { position:absolute; z-index:2; bottom:14px; inset-inline-start:14px; display:block; max-width:calc(100% - 28px); overflow:hidden; padding:7px 10px; border-radius:99px; background:#fff; color:var(--cg-green); box-shadow:0 5px 14px rgba(0,0,0,.15); font-size:11px; font-weight:800; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.kh-course-body { display:flex; flex:1; flex-direction:column; padding:22px 18px 16px; }.kh-course-title { display:-webkit-box; overflow:hidden; margin:0; color:var(--cg-ink); font-size:21px; font-weight:800; line-height:1.25; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.kh-course-instructor { display:flex; align-items:center; gap:9px; margin:17px 0; }.kh-instructor-avatar { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; overflow:hidden; border-radius:50%; background:var(--cg-soft); color:var(--cg-green); font-size:12px; font-weight:800; }.kh-instructor-avatar img { width:100%; height:100%; object-fit:cover; }.kh-instructor-name { display:block; font-size:13px; font-weight:700; }.kh-instructor-title { display:block; color:var(--cg-muted); font-size:11px; }.kh-course-check { margin-inline-start:auto; color:var(--cg-green); }.kh-course-stats { display:grid; grid-template-columns:repeat(4,1fr); margin-top:auto; padding:11px 0; border-block:1px solid var(--cg-line); }.kh-stat-item { min-width:0; padding:0 4px; text-align:center; }.kh-stat-item+.kh-stat-item { border-inline-start:1px solid var(--cg-line); }.kh-stat-icon,.kh-stat-stars { color:var(--cg-orange); font-size:12px; }.kh-stat-value { display:block; overflow:hidden; color:var(--cg-muted); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.kh-course-price-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:15px; }.kh-course-price-main { display:flex; align-items:baseline; gap:8px; }.kh-current-price { color:var(--cg-orange); font-size:21px; font-weight:800; }.kh-old-price { color:#9aa59f; font-size:12px; text-decoration:line-through; }.kh-save-tag { padding:5px 7px; border-radius:99px; background:#fff0e6; color:#c66328; font-size:10px; font-weight:800; }.kh-course-cta { width:100%; margin-top:14px; padding:11px!important; border-radius:7px; text-align:center; }
.cg-empty-state { padding:70px 20px; border:1px dashed #bfd0c5; border-radius:16px; background:#fff; text-align:center; }.cg-empty-state i { color:var(--cg-orange); font-size:38px; }.cg-empty-state h3 { margin:15px 0 7px; font-weight:800; }.cg-empty-state p { margin:0; color:var(--cg-muted); }
@media (max-width:991px) { .cg-courses__top { align-items:start; flex-direction:column; }.cg-trust-item { min-width:auto; flex:1 1 30%; }.cg-hero__content { padding:45px 0 55px; } }
@media (max-width:767px) { .cg-hero { padding-top:25px; }.cg-hero__content { padding:35px 0 40px; }.cg-hero p { font-size:16px; }.cg-trust-bar { padding:5px 0; }.cg-trust-item { flex:1 1 100%; padding:13px 0; margin:0; border-inline-end:0; border-bottom:1px solid rgba(255,255,255,.15); }.cg-trust-item:last-child { border-bottom:0; }.cg-modes,.cg-courses { padding:58px 0; }.cg-section-heading { margin-bottom:28px; }.cg-mode-card { padding:26px; }.cg-filter { width:100%; overflow:auto; flex-wrap:nowrap; padding-bottom:4px; }.cg-filter button { white-space:nowrap; }.kh-course-card { min-height:0!important; border-radius:14px; }.kh-course-cover { aspect-ratio:16/8.5!important; }.kh-course-type-pill { bottom:10px; inset-inline-start:10px; max-width:calc(100% - 20px); padding:6px 9px; font-size:10px!important; }.kh-course-body { padding:16px 14px 13px!important; }.kh-course-title { font-size:20px!important; line-height:1.3!important; }.kh-course-instructor { margin:12px 0!important; }.kh-course-stats { padding:9px 0!important; }.kh-course-price-row { padding-top:11px; }.kh-course-cta { min-height:42px; margin-top:11px; padding:9px!important; }.cg-course-item { margin-bottom:18px; } }