/* ==========================================
   Premium Course Content Typography System
=========================================== */

/* Base wrapper */
.course-content,
.prose {
    line-height: 1.85;
    color: #374151; /* gray-700 */
    font-size: 1rem;
}

/* Disable Tailwind prose list markers */
.prose ul,
.prose ol {
    list-style: none !important;
}

.prose ul > li::marker {
    content: none !important;
    color: transparent !important;
}



/* ------------------------------------------
   Main Section Headings (H2)
------------------------------------------- */
.course-content h2,
.prose h2 {
    font-size: clamp(1.6rem, 2vw, 1.9rem); /* responsive */
    font-weight: 800;
    color: #111827;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    position: relative;
    padding-left: 1rem;
}

/* Accent line */
.course-content h2::before,
.prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 4px;
    height: 1.2em;
    background: linear-gradient(180deg, #fb923c, #f97316);
    border-radius: 999px;
}

/* ------------------------------------------
   Subsection Headings (H3)
------------------------------------------- */
.course-content h3,
.prose h3 {
    font-size: clamp(1.25rem, 1.5vw, 1.4rem);
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
}

/* ------------------------------------------
   Paragraphs
------------------------------------------- */
.course-content p,
.prose p {
    margin-bottom: 1.2rem;
    font-size: 1rem;
    color: #374151;
}

/* Emphasis inside paragraphs */
.course-content strong,
.prose strong {
    color: #111827;
    font-weight: 600;
}

/* ------------------------------------------
   Lists
------------------------------------------- */
.course-content ul,
.prose ul {
    margin: 1.2rem 0 1.8rem;
    padding-left: 0;
    list-style: none;
}

/* Premium list items */
.course-content ul li,
.prose ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.98rem;
    color: #374151;
}

/* Custom bullet */
.course-content ul li::before,
.prose ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.85rem;
    color: #f97316;
    font-weight: 700;
}

/* ------------------------------------------
   Divider
------------------------------------------- */
.course-content hr,
.prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid #e5e7eb;
}

/* ------------------------------------------
   Highlight / Callout Boxes
------------------------------------------- */
.course-content div[style*="border-left"],
.prose div[style*="border-left"] {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

/* ------------------------------------------
   Mobile polish
------------------------------------------- */
@media (max-width: 640px) {
    .course-content h2,
    .prose h2 {
        margin-top: 2.5rem;
    }

    .course-content ul li,
    .prose ul li {
        padding-left: 1.5rem;
    }
}

.circle-learn-more{
    width: 43px !important;
}