/* =====================================================
FUTUREVERSE — STUDENT COURSE DETAILS
File: student-course-details.css
Designed for the supplied student-course-details.html
===================================================== */

/* 1. ROOT VARIABLES */
:root {
--primary: #635bff;
--primary-dark: #4b43dc;
--primary-soft: #f0efff;
--secondary: #17b6d4;

--dark: #151a2e;
--heading: #20263a;
--text: #566176;
--muted: #8992a5;

--white: #ffffff;
--page-bg: #f6f7fb;
--border: #e7e9f1;
--success: #14966b;

--shadow-sm: 0 4px 18px rgba(24, 32, 64, 0.045);
--shadow-md: 0 14px 40px rgba(24, 32, 64, 0.09);
--shadow-primary: 0 10px 25px rgba(99, 91, 255, 0.25);

--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 22px;

--transition: 0.25s ease;

}

/* 2. RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}

body {
min-height: 100vh;
overflow-x: hidden;
background: var(--page-bg);
color: var(--text);
font-family: "Inter", "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
outline: 3px solid rgba(99, 91, 255, 0.45);
outline-offset: 4px;
}

img {
display: block;
max-width: 100%;
}

ul {
list-style: none;
}

::selection {
background: var(--primary);
color: #fff;
}

/* 3. PAGE CONTAINER */
.page-container {
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}

/* 4. HEADER */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(231, 233, 241, 0.9);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.header-container {
position: relative;
width: min(1280px, calc(100% - 48px));
min-height: 78px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

/* Brand */
.brand-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 11px;
}

.brand-icon {
width: 43px;
height: 43px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, var(--primary), #8b80ff);
color: #fff;
font-size: 23px;
box-shadow: 0 6px 16px rgba(99, 91, 255, 0.22);
transition: transform var(--transition);
}

.brand-logo:hover .brand-icon {
transform: rotate(-8deg);
}

.brand-name {
color: var(--dark);
font-size: 24px;
font-weight: 850;
letter-spacing: -1px;
line-height: 1;
}

.brand-name span {
color: var(--primary);
}

/* Main navigation */
.main-navigation {
display: flex;
align-items: center;
gap: 34px;
}

.main-navigation a {
position: relative;
padding: 28px 0;
color: #667085;
font-size: 14px;
font-weight: 600;
transition: color var(--transition);
}

.main-navigation a::after {
position: absolute;
right: 0;
bottom: 19px;
left: 0;
height: 2px;
content: "";
background: var(--primary);
border-radius: 5px;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}

.main-navigation a:hover,
.main-navigation a.active {
color: var(--primary);
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
transform: scaleX(1);
}

/* Header actions */
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}

.header-login {
color: #465067;
font-size: 14px;
font-weight: 700;
transition: color var(--transition);
}

.header-login:hover {
color: var(--primary);
}

.header-signup {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 19px;
border: 1px solid transparent;
border-radius: 11px;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 750;
box-shadow: 0 6px 16px rgba(99, 91, 255, 0.18);
transition:
background var(--transition),
transform var(--transition),
box-shadow var(--transition);
}

.header-signup:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}

.header-signup i {
font-size: 12px;
}

/* Mobile menu button */
.mobile-menu-toggle {
display: none;
width: 43px;
height: 43px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
color: var(--dark);
font-size: 19px;
}

/* 5. MAIN PAGE */
.course-details-page {
min-height: 70vh;
}

/* 6. BREADCRUMB */
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-top: 24px;
padding-bottom: 22px;
color: var(--muted);
font-size: 12px;
}

.breadcrumb a {
transition: color var(--transition);
}

.breadcrumb a:hover {
color: var(--primary);
}

.breadcrumb i {
color: #b0b6c4;
font-size: 9px;
}

.breadcrumb span {
color: var(--primary);
font-weight: 700;
}

/* 7. COURSE HERO */
.course-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 55px 0 62px;
background:
radial-gradient(
ellipse at 82% 10%,
rgba(119, 104, 255, 0.3),
transparent 34%
),
radial-gradient(
ellipse at 8% 100%,
rgba(23, 182, 212, 0.12),
transparent 32%
),
linear-gradient(125deg, #11172c 0%, #20244a 54%, #302e70 100%);
}

.course-hero::before,
.course-hero::after {
position: absolute;
z-index: -1;
content: "";
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
pointer-events: none;
}

.course-hero::before {
top: -220px;
right: -90px;
width: 510px;
height: 510px;
box-shadow:
0 0 0 35px rgba(255, 255, 255, 0.018),
0 0 0 75px rgba(255, 255, 255, 0.018);
}

.course-hero::after {
right: 28%;
bottom: -230px;
width: 390px;
height: 390px;
}

.course-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
align-items: center;
gap: 65px;
}

.course-hero-content {
min-width: 0;
padding: 12px 0;
}

.course-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 23px;
}

.course-category {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 13px;
border: 1px solid rgba(174, 165, 255, 0.28);
border-radius: 50px;
background: rgba(120, 107, 255, 0.15);
color: #dedaff;
font-size: 11px;
font-weight: 750;
}

.course-category i {
color: #b5adff;
}

.course-level {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50px;
background: rgba(255, 255, 255, 0.08);
color: #e0e4f7;
font-size: 11px;
font-weight: 650;
}

.course-title {
max-width: 750px;
margin-bottom: 19px;
color: #fff;
font-size: clamp(34px, 4.1vw, 50px);
font-weight: 850;
letter-spacing: -1.6px;
line-height: 1.19;
overflow-wrap: anywhere;
}

.course-short-description {
max-width: 690px;
color: #c7cce0;
font-size: 15px;
line-height: 1.95;
}

.course-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px 30px;
margin-top: 29px;
}

.course-meta-item {
display: flex;
align-items: center;
gap: 10px;
color: #d6daeb;
}

.course-meta-item > i {
display: flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 11px;
background: rgba(255, 255, 255, 0.08);
color: #b5adff;
font-size: 14px;
}

.course-meta-item span {
display: flex;
flex-direction: column;
gap: 1px;
color: #c3c9df;
font-size: 11px;
line-height: 1.5;
}

.course-meta-item strong {
color: #fff;
font-size: 13px;
font-weight: 750;
}

/* Hero instructor */
.course-instructor {
display: flex;
align-items: center;
gap: 13px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.instructor-avatar {
display: flex;
flex: 0 0 46px;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
background: linear-gradient(135deg, #756aff, #17b6d4);
color: #fff;
font-size: 19px;
}

.instructor-information {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 2px;
}

.instructor-label {
color: #aab1cb;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.25px;
}

.instructor-name {
color: #fff;
font-size: 14px;
font-weight: 750;
overflow-wrap: anywhere;
}

.instructor-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: 8px;
background: rgba(20, 150, 107, 0.14);
color: #8ce3c2;
font-size: 10px;
font-weight: 700;
}

.instructor-badge i {
font-size: 12px;
}

/* 8. COURSE PREVIEW CARD */
.course-preview-card {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 21px;
background: #fff;
box-shadow: 0 25px 65px rgba(0, 0, 0, 0.25);
color: var(--text);
transition: transform var(--transition), box-shadow var(--transition);
}

.course-preview-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 75px rgba(0, 0, 0, 0.29);
}

/* Thumbnail placeholder */
.course-thumbnail {
position: relative;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(
circle at 20% 20%,
rgba(255, 255, 255, 0.2),
transparent 30%
),
radial-gradient(
circle at 85% 85%,
rgba(23, 182, 212, 0.28),
transparent 36%
),
linear-gradient(135deg, #34308a, #7068ff 58%, #21aeca);
}

.course-thumbnail::before,
.course-thumbnail::after {
position: absolute;
content: "";
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
}

.course-thumbnail::before {
width: 250px;
height: 250px;
}

.course-thumbnail::after {
width: 190px;
height: 190px;
}

.thumbnail-placeholder {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 25px;
color: #fff;
text-align: center;
}

.thumbnail-icon {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 24px;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 30px rgba(18, 20, 76, 0.16);
font-size: 35px;
backdrop-filter: blur(8px);
}

.thumbnail-placeholder > span {
font-size: 11px;
font-weight: 850;
letter-spacing: 2px;
}

.thumbnail-placeholder p {
margin-top: 6px;
color: #e5e5ff;
font-size: 11px;
}

.preview-label {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 11px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 9px;
background: rgba(22, 24, 58, 0.58);
color: #fff;
font-size: 10px;
font-weight: 700;
backdrop-filter: blur(10px);
}

.preview-label i {
color: #c2bcff;
}

/* Preview card body */
.preview-card-content {
padding: 25px;
}

.preview-price {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 20px;
}

.price-label {
color: var(--muted);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
}

.preview-price strong {
color: var(--heading);
font-size: 22px;
font-weight: 850;
letter-spacing: -0.5px;
}

.enroll-button {
width: 100%;
min-height: 51px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13px 20px;
border: 0;
border-radius: 12px;
background: linear-gradient(120deg, var(--primary), #8176ff);
color: #fff;
font-size: 14px;
font-weight: 800;
box-shadow: var(--shadow-primary);
transition:
transform var(--transition),
background var(--transition),
box-shadow var(--transition);
}

.enroll-button:hover {
transform: translateY(-2px);
background: linear-gradient(120deg, var(--primary-dark), var(--primary));
box-shadow: 0 14px 28px rgba(99, 91, 255, 0.31);
}

.enroll-button:active {
transform: translateY(0);
}

.enroll-button i {
font-size: 13px;
transition: transform var(--transition);
}

.enroll-button:hover i {
transform: translateX(4px);
}

.preview-note {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 7px;
margin-top: 14px;
color: var(--muted);
font-size: 10px;
text-align: center;
}

.preview-note i {
margin-top: 4px;
color: var(--success);
}

.preview-divider {
height: 1px;
margin: 22px 0;
background: var(--border);
}

.preview-includes-title {
margin-bottom: 17px;
color: var(--heading);
font-size: 14px;
font-weight: 800;
}

.preview-includes-list {
display: flex;
flex-direction: column;
gap: 14px;
}

.preview-includes-list li {
display: flex;
align-items: flex-start;
gap: 11px;
color: #59647a;
font-size: 12px;
}

.preview-includes-list li i {
width: 17px;
margin-top: 4px;
color: var(--primary);
text-align: center;
}

/* 9. COURSE BODY */
.course-body {
padding: 48px 0 75px;
}

.course-body-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
align-items: start;
gap: 28px;
}

.course-main-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 23px;
}

/* 10. CONTENT SECTIONS */
.content-section {
min-width: 0;
padding: 31px;
scroll-margin-top: 105px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}

.content-section:hover {
border-color: #dfe0f7;
box-shadow: 0 8px 26px rgba(24, 32, 64, 0.055);
}

/* Section heading */
.section-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 23px;
}

.section-heading-icon {
flex: 0 0 49px;
width: 49px;
height: 49px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e6e3ff;
border-radius: 15px;
background: linear-gradient(145deg, #f3f1ff, #eae8ff);
color: var(--primary);
font-size: 19px;
}

.section-heading > div:last-child {
min-width: 0;
}

.section-eyebrow {
display: block;
margin-bottom: 4px;
color: var(--primary);
font-size: 9px;
font-weight: 850;
letter-spacing: 1.4px;
line-height: 1.5;
}

.section-heading h2 {
color: var(--heading);
font-size: 23px;
font-weight: 850;
letter-spacing: -0.6px;
line-height: 1.35;
}

.section-description {
margin-top: -5px;
margin-bottom: 18px;
color: var(--text);
font-size: 13px;
line-height: 1.85;
}

/* 11. ABOUT COURSE */
.course-description {
color: #5b667b;
font-size: 14px;
line-height: 2;
}

.course-description p + p {
margin-top: 14px;
}

.course-description strong {
color: var(--heading);
font-weight: 750;
}

/* 12. LEARNING OUTCOMES */
.learning-outcomes-section .section-heading {
margin-bottom: 20px;
}

.learning-outcomes-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
margin-top: 20px;
}

.learning-outcomes-list li {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
padding: 16px;
border: 1px solid #e9ebf5;
border-radius: 13px;
background: #fbfbff;
color: #4f5b70;
font-size: 12px;
line-height: 1.8;
transition:
transform var(--transition),
border-color var(--transition),
background var(--transition);
}

.learning-outcomes-list li:hover {
transform: translateY(-2px);
border-color: #d6d1ff;
background: #f7f6ff;
}

.outcome-check {
flex: 0 0 25px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #e4f8ef;
color: var(--success);
font-size: 11px;
}

/* 13. COURSE INFORMATION */
.information-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.information-item {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
padding: 17px;
border: 1px solid var(--border);
border-radius: 14px;
background: #fcfcff;
transition:
border-color var(--transition),
background var(--transition);
}

.information-item:hover {
border-color: #d7d3ff;
background: #f9f8ff;
}

.information-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--primary-soft);
color: var(--primary);
font-size: 16px;
}

.information-item > div {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 4px;
}

.information-item > div > span {
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}

.information-item strong {
color: var(--heading);
font-size: 13px;
font-weight: 750;
line-height: 1.6;
overflow-wrap: anywhere;
}

/* 14. CURRICULUM */
.curriculum-heading {
align-items: flex-start;
margin-bottom: 25px;
}

.curriculum-heading-content {
flex: 1;
min-width: 0;
}

.curriculum-heading-content .section-description {
margin-top: 9px;
margin-bottom: 0;
}

.curriculum-count {
flex-shrink: 0;
padding: 7px 11px;
border: 1px solid #e2dfff;
border-radius: 9px;
background: var(--primary-soft);
color: var(--primary);
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}

.curriculum-list {
display: flex;
flex-direction: column;
gap: 13px;
}

/* Empty curriculum state */
.curriculum-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 20px;
border: 1px dashed #d9ddec;
border-radius: 15px;
background:
radial-gradient(circle at 50% 0%, #f0efff, transparent 70%),
#fcfcff;
text-align: center;
}

.empty-state-icon {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
border: 1px solid #e1deff;
border-radius: 19px;
background: #f0efff;
color: var(--primary);
font-size: 24px;
}

.curriculum-empty-state h3 {
margin-bottom: 7px;
color: var(--heading);
font-size: 16px;
font-weight: 800;
}

.curriculum-empty-state p {
max-width: 350px;
color: var(--muted);
font-size: 12px;
line-height: 1.9;
}

/* Future module elements, if rendered later */
.curriculum-module {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 13px;
background: #fff;
}

.curriculum-module-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 17px;
background: #fafaff;
}

.curriculum-module-header h3 {
color: var(--heading);
font-size: 14px;
font-weight: 800;
}

.curriculum-module-header p {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
}

.curriculum-lesson-list {
padding: 5px 18px;
}

.curriculum-lesson {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #f0f1f6;
}

.curriculum-lesson:last-child {
border-bottom: 0;
}

.curriculum-lesson > i {
margin-top: 4px;
color: var(--primary);
}

.curriculum-lesson span {
color: #4e5a70;
font-size: 12px;
}

/* 15. INSTRUCTOR PROFILE */
.instructor-profile-card {
display: flex;
align-items: flex-start;
gap: 19px;
padding: 22px;
border: 1px solid #e9e8f8;
border-radius: 16px;
background:
linear-gradient(120deg, #faf9ff, #fff 75%);
}

.instructor-profile-avatar {
flex: 0 0 76px;
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #e9e6ff;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #20b5d1);
color: #fff;
font-size: 28px;
box-shadow: 0 7px 20px rgba(99, 91, 255, 0.17);
}

.instructor-profile-details {
flex: 1;
min-width: 0;
}

.instructor-profile-details h3 {
margin-bottom: 4px;
color: var(--heading);
font-size: 18px;
font-weight: 850;
overflow-wrap: anywhere;
}

.instructor-profile-role {
display: inline-block;
margin-bottom: 12px;
color: var(--primary);
font-size: 11px;
font-weight: 750;
}

.instructor-profile-details p {
color: var(--text);
font-size: 12px;
line-height: 1.9;
}

/* 16. COURSE SIDEBAR */
.course-sidebar {
position: sticky;
top: 103px;
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}

.sidebar-card {
padding: 23px 19px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
}

.sidebar-card-heading {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 19px;
padding-bottom: 17px;
border-bottom: 1px solid var(--border);
}

.sidebar-heading-icon {
flex: 0 0 37px;
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: var(--primary-soft);
color: var(--primary);
font-size: 15px;
}

.sidebar-card-heading h3 {
color: var(--heading);
font-size: 15px;
font-weight: 850;
}

/* Sidebar navigation */
.course-page-navigation {
display: flex;
flex-direction: column;
gap: 5px;
}

.course-page-navigation a {
position: relative;
display: flex;
align-items: center;
gap: 11px;
padding: 12px 11px;
border-radius: 10px;
color: #657086;
font-size: 12px;
font-weight: 650;
transition:
color var(--transition),
background var(--transition),
transform var(--transition);
}

.course-page-navigation a i {
flex: 0 0 18px;
color: #9098aa;
text-align: center;
transition: color var(--transition);
}

.course-page-navigation a:hover {
transform: translateX(2px);
background: #f7f6ff;
color: var(--primary);
}

.course-page-navigation a:hover i {
color: var(--primary);
}

.course-page-navigation a.active {
background: var(--primary-soft);
color: var(--primary);
font-weight: 800;
}

.course-page-navigation a.active i {
color: var(--primary);
}

/* 17. SIDEBAR HELP CARD */
.sidebar-help-card {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 25px 22px;
border: 1px solid #e1ddff;
border-radius: var(--radius-md);
background:
radial-gradient(
circle at 100% 0%,
rgba(132, 121, 255, 0.15),
transparent 38%
),
linear-gradient(145deg, #f0eeff, #f9f8ff);
}

.sidebar-help-card::after {
position: absolute;
z-index: -1;
right: -45px;
bottom: -65px;
width: 140px;
height: 140px;
border: 1px solid rgba(99, 91, 255, 0.12);
border-radius: 50%;
content: "";
}

.help-card-icon {
width: 47px;
height: 47px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
border: 1px solid #e8e5ff;
border-radius: 14px;
background: #fff;
color: var(--primary);
font-size: 20px;
box-shadow: 0 5px 15px rgba(99, 91, 255, 0.08);
}

.sidebar-help-card h3 {
margin-bottom: 9px;
color: #252747;
font-size: 18px;
font-weight: 850;
}

.sidebar-help-card p {
margin-bottom: 18px;
color: #69708b;
font-size: 12px;
line-height: 1.9;
}

.sidebar-help-card > a {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
border: 1px solid #dedaff;
border-radius: 10px;
background: #fff;
color: var(--primary);
font-size: 11px;
font-weight: 800;
transition:
color var(--transition),
background var(--transition),
transform var(--transition);
}

.sidebar-help-card > a:hover {
transform: translateY(-2px);
border-color: var(--primary);
background: var(--primary);
color: #fff;
}

/* 18. FOOTER */
.site-footer {
margin-top: 0;
padding: 52px 0 0;
background:
radial-gradient(
ellipse at 12% 0%,
rgba(99, 91, 255, 0.13),
transparent 36%
),
#11172b;
color: #b8c0d3;
}

.footer-main {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr;
gap: 65px;
padding-bottom: 42px;
}

.footer-brand {
min-width: 0;
}

.footer-brand .brand-logo {
margin-bottom: 18px;
}

.footer-brand .brand-name {
color: #fff;
}

.footer-brand .brand-name span {
color: #a59dff;
}

.footer-brand .brand-icon {
background: linear-gradient(135deg, #746aff, #9288ff);
}

.footer-brand p {
max-width: 330px;
color: #aab2c7;
font-size: 13px;
line-height: 2;
}

.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}

.footer-links h3 {
margin-bottom: 6px;
color: #fff;
font-size: 14px;
font-weight: 850;
}

.footer-links a {
color: #b2bbcf;
font-size: 12px;
transition:
color var(--transition),
transform var(--transition);
}

.footer-links a:hover {
transform: translateX(3px);
color: #aaa3ff;
}

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
color: #8f9ab2;
font-size: 11px;
line-height: 1.8;
}

/* 19. TABLET RESPONSIVE */
@media (max-width: 1050px) {
.header-container {
gap: 20px;
}

.main-navigation {
    gap: 22px;
}

.course-hero-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 35px;
}

.course-body-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 22px;
}

.course-title {
    font-size: clamp(32px, 4.5vw, 43px);
}

.content-section {
    padding: 26px;
}

.footer-main {
    gap: 38px;
}

}

/* 20. MOBILE AND SMALL TABLET */
@media (max-width: 800px) {
.page-container {
width: calc(100% - 36px);
}

.header-container {
    width: calc(100% - 36px);
    min-height: 70px;
}

.brand-icon {
    width: 39px;
    height: 39px;
    font-size: 21px;
}

.brand-name {
    font-size: 22px;
}

.mobile-menu-toggle {
    display: inline-flex;
    flex-shrink: 0;
}

.main-navigation {
    position: absolute;
    top: calc(100% + 1px);
    right: -18px;
    left: -18px;
    display: none;
    align-items: stretch;
    gap: 3px;
    padding: 12px 18px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 18px 30px rgba(24, 32, 64, 0.09);
}

.main-navigation.open {
    display: flex;
    flex-direction: column;
}

.main-navigation a {
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 14px;
}

.main-navigation a::after {
    display: none;
}

.main-navigation a:hover,
.main-navigation a.active {
    background: var(--primary-soft);
}

.header-actions {
    display: none;
}

.breadcrumb {
    gap: 9px;
    padding-top: 19px;
    padding-bottom: 19px;
    font-size: 11px;
}

.course-hero {
    padding: 39px 0 42px;
}

.course-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
}

.course-hero-content {
    padding: 0;
}

.course-title {
    max-width: 650px;
    font-size: clamp(32px, 6vw, 43px);
}

.course-short-description {
    font-size: 14px;
}

.course-preview-card {
    width: min(100%, 520px);
    justify-self: center;
}

.course-thumbnail {
    min-height: 235px;
}

.course-body {
    padding: 30px 0 50px;
}

.course-body-grid {
    grid-template-columns: 1fr;
    gap: 24px;
}

.course-main-content {
    gap: 18px;
}

.course-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
}

.sidebar-card,
.sidebar-help-card {
    height: 100%;
}

.footer-main {
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
}

.footer-brand {
    grid-column: 1 / -1;
}

}

/* 21. MOBILE */
@media (max-width: 540px) {
.page-container {
width: calc(100% - 28px);
}

.header-container {
    width: calc(100% - 28px);
    min-height: 66px;
}

.brand-logo {
    gap: 9px;
}

.brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 19px;
}

.brand-name {
    font-size: 20px;
}

.mobile-menu-toggle {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.breadcrumb {
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 7px;
    font-size: 10px;
}

.course-hero {
    padding: 31px 0 33px;
}

.course-badges {
    gap: 8px;
    margin-bottom: 18px;
}

.course-category,
.course-level {
    padding: 7px 10px;
    font-size: 10px;
}

.course-title {
    margin-bottom: 14px;
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: -0.9px;
    line-height: 1.24;
}

.course-short-description {
    font-size: 12px;
    line-height: 1.9;
}

.course-meta {
    gap: 15px 17px;
    margin-top: 22px;
}

.course-meta-item {
    gap: 8px;
}

.course-meta-item > i {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.course-meta-item span {
    font-size: 10px;
}

.course-meta-item strong {
    font-size: 12px;
}

.course-instructor {
    gap: 10px;
    margin-top: 24px;
    padding-top: 19px;
}

.instructor-avatar {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.instructor-label {
    font-size: 8px;
}

.instructor-name {
    font-size: 12px;
}

.instructor-badge {
    gap: 5px;
    padding: 6px 7px;
    font-size: 9px;
}

.course-preview-card {
    border-radius: 17px;
}

.course-thumbnail {
    min-height: 190px;
}

.thumbnail-icon {
    width: 63px;
    height: 63px;
    border-radius: 19px;
    font-size: 29px;
}

.thumbnail-placeholder > span {
    font-size: 9px;
}

.thumbnail-placeholder p {
    font-size: 10px;
}

.preview-label {
    right: 10px;
    bottom: 10px;
    padding: 7px 9px;
    font-size: 9px;
}

.preview-card-content {
    padding: 20px;
}

.preview-price strong {
    font-size: 20px;
}

.enroll-button {
    min-height: 48px;
    font-size: 13px;
}

.preview-includes-list {
    gap: 12px;
}

.preview-includes-list li {
    font-size: 11px;
}

.course-body {
    padding: 23px 0 38px;
}

.content-section {
    padding: 19px;
    border-radius: 16px;
}

.section-heading {
    gap: 12px;
    margin-bottom: 19px;
}

.section-heading-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 16px;
}

.section-eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
}

.section-heading h2 {
    font-size: 19px;
    letter-spacing: -0.3px;
}

.course-description {
    font-size: 12px;
    line-height: 1.95;
}

.section-description {
    font-size: 12px;
}

.learning-outcomes-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
}

.learning-outcomes-list li {
    padding: 13px;
    font-size: 12px;
}

.information-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.information-item {
    gap: 12px;
    padding: 13px;
}

.information-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.information-item > div > span {
    font-size: 10px;
}

.information-item strong {
    font-size: 12px;
}

.curriculum-heading {
    flex-wrap: wrap;
    align-items: center;
}

.curriculum-heading-content {
    flex-basis: calc(100% - 60px);
}

.curriculum-count {
    margin-left: 54px;
    font-size: 9px;
}

.curriculum-empty-state {
    padding: 28px 15px;
}

.empty-state-icon {
    width: 54px;
    height: 54px;
    font-size: 21px;
}

.curriculum-empty-state h3 {
    font-size: 15px;
}

.curriculum-empty-state p {
    font-size: 11px;
}

.instructor-profile-card {
    flex-direction: column;
    gap: 14px;
    padding: 17px;
}

.instructor-profile-avatar {
    flex-basis: 65px;
    width: 65px;
    height: 65px;
    font-size: 24px;
}

.instructor-profile-details h3 {
    font-size: 16px;
}

.instructor-profile-details p {
    font-size: 12px;
}

.course-sidebar {
    grid-template-columns: 1fr;
    gap: 15px;
}

.sidebar-card {
    padding: 19px;
}

.sidebar-help-card {
    padding: 22px;
}

.footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 27px 18px;
    padding-bottom: 30px;
}

.footer-brand {
    grid-column: 1 / -1;
}

.footer-brand .brand-name {
    font-size: 22px;
}

.footer-brand p {
    font-size: 12px;
}

.footer-links {
    gap: 11px;
}

.footer-links h3 {
    font-size: 13px;
}

.footer-links a {
    font-size: 11px;
}

.footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 17px 0;
}

.footer-bottom p {
    font-size: 10px;
}

}

/* 22. EXTRA SMALL SCREENS */
@media (max-width: 360px) {
.page-container {
width: calc(100% - 22px);
}

.header-container {
    width: calc(100% - 22px);
}

.brand-name {
    font-size: 18px;
}

.course-title {
    font-size: 27px;
}

.course-meta {
    gap: 13px;
}

.instructor-badge {
    font-size: 8px;
}

.content-section {
    padding: 16px;
}

.section-heading h2 {
    font-size: 17px;
}

.footer-main {
    gap: 25px 12px;
}

}

/* 23. REDUCED MOTION ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

}