@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Merriweather:wght@400;700&display=swap');

        /* ===== CSS VARIABLES FOR THEME MANAGEMENT ===== */
        :root {
            /* Brand Colors */
            --color-brand-yellow: #ffde59;
            --color-primary-blue: #0077b5;
            --color-primary-blue-dark: #005582;

            /* Neutral Colors */
            --color-white: #ffffff;
            --color-black: #000000;
            --color-gray-dark: #333;
            --color-gray-medium: #555;
            --color-gray-light: #ddd;
            --color-gray-lightest: #f0f0f0;

            /* Typography */
            --font-primary: 'Roboto', sans-serif;
            --font-heading: 'Merriweather', serif;
            --font-weight-light: 300;
            --font-weight-regular: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            /* Spacing Scale (8px base) */
            --spacing-xs: 8px;
            --spacing-sm: 16px;
            --spacing-md: 24px;
            --spacing-lg: 32px;
            --spacing-xl: 40px;
            --spacing-2xl: 48px;

            /* Layout */
            --max-width-content: 1000px;
            --max-width-wide: 1200px;
            --border-radius: 10px;
            --border-radius-sm: 5px;

            /* Transitions */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
        }

        /* Smooth Scrolling for Anchor Links */
        html {
            scroll-behavior: smooth;
        }

        /* Scroll Margin for Sections (prevents content hiding behind header) */
        section[id], article[id] {
            scroll-margin-top: 20px;
        }

        /* Learning Paths - Hover Effects */
        #learning-paths .path-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        /* Blog Cards - Hover Effects */
        .blog-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
        }

        /* Learning Paths - Sidebar Hover Effects */
        #learning-paths aside ul li:hover {
            background: rgba(255,255,255,0.25) !important;
        }

        /* Mobile Responsiveness for Learning Paths */
        @media (max-width: 1024px) {
            #learning-paths .two-col-layout {
                grid-template-columns: 1fr !important;
            }

            #learning-paths .path-cards-grid {
                grid-template-columns: 1fr !important;
            }

            #learning-paths aside {
                position: static !important;
                margin-top: 30px;
            }
        }

        @media (max-width: 640px) {
            #learning-paths h2 {
                font-size: 1.8em !important;
            }

            #learning-paths .path-card h3 {
                font-size: 1.15em !important;
            }
        }

        /* Skip to Content Link for Keyboard Navigation */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #0077b5;
            color: white;
            padding: 8px 16px;
            text-decoration: none;
            font-weight: bold;
            z-index: 100;
            border-radius: 0 0 4px 0;
        }

            .skip-link:focus {
                top: 0;
                outline: 2px solid #005582;
                outline-offset: 2px;
            }

        /* Sticky Navigation */
        .sticky-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 222, 89, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 99;
            transition: transform var(--transition-normal);
        }

        .nav-container {
            max-width: var(--max-width-wide);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-xl);
            padding: var(--spacing-sm) var(--spacing-md);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: var(--spacing-xl);
        }

        .nav-search-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .nav-search-box {
            padding: 8px 12px 8px 35px;
            font-size: 0.9em;
            border: 2px solid rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
            font-family: 'Roboto', sans-serif;
            width: 200px;
        }

        .nav-search-box:focus {
            outline: none;
            border-color: #0077b5;
            background: white;
            width: 250px;
            box-shadow: 0 2px 8px rgba(0, 119, 181, 0.2);
            transform: translateY(-1px);
        }

        .nav-search-box:not(:placeholder-shown) {
            border-color: #0077b5;
            background: white;
            font-weight: 500;
        }

        .nav-search-box::placeholder {
            color: #666;
            transition: color 0.3s;
        }

        .nav-search-box:focus::placeholder {
            color: #999;
        }

        .nav-search-icon {
            position: absolute;
            left: 12px;
            color: #666;
            pointer-events: none;
            font-size: 0.9em;
            transition: all 0.3s;
        }

        .nav-search-wrapper:focus-within .nav-search-icon {
            color: #0077b5;
            transform: scale(1.1);
        }

        .nav-link {
            color: var(--color-black);
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
            font-size: 0.95em;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--border-radius-sm);
            transition: all var(--transition-fast);
            position: relative;
        }

        .nav-link:hover {
            color: var(--color-primary-blue);
            background: rgba(255, 255, 255, 0.5);
        }

        .nav-link:focus-visible {
            outline: 2px solid var(--color-primary-blue);
            outline-offset: 2px;
        }

        .nav-link-external {
            background: rgba(255, 255, 255, 0.3);
        }

        .nav-link-external:hover {
            background: rgba(255, 255, 255, 0.6);
        }

        .nav-link-cta {
            background: rgba(0, 119, 181, 0.15);
            font-weight: var(--font-weight-bold);
            border: 1px solid rgba(0, 119, 181, 0.3);
        }

        .nav-link-cta:hover {
            background: var(--color-primary-blue);
            color: white;
            border-color: var(--color-primary-blue);
        }


        @media (max-width: 768px) {
            .nav-container {
                gap: var(--spacing-sm);
            }

            .nav-links {
                gap: var(--spacing-sm);
            }

            .nav-link {
                font-size: 0.85em;
                padding: var(--spacing-xs);
            }

            .nav-search-box {
                width: 150px;
                font-size: 0.85em;
            }

            .nav-search-box:focus {
                width: 180px;
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                gap: 6px;
                padding: var(--spacing-xs) 8px;
                flex-wrap: wrap;
            }

            .nav-links {
                gap: 6px;
            }

            .nav-link {
                font-size: 0.75em;
                padding: 6px 8px;
            }

            /* Hide "in" on very small screens to save space */
            .nav-link-external::after {
                content: ' 🎥';
            }

            .nav-search-wrapper {
                width: 100%;
                order: 3;
                margin-top: 8px;
            }

            .nav-search-box {
                width: 100%;
                font-size: 0.85em;
            }

            .nav-search-box:focus {
                width: 100%;
            }
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: var(--spacing-lg);
            right: var(--spacing-lg);
            background: var(--color-primary-blue);
            color: var(--color-white);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-normal);
            z-index: 98;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background: var(--color-primary-blue-dark);
            transform: translateY(-4px);
            box-shadow: 0 6px 16px rgba(0, 119, 181, 0.4);
        }

        .back-to-top:focus-visible {
            outline: 3px solid var(--color-primary-blue);
            outline-offset: 3px;
        }

        /* Visible Focus Indicators for Keyboard Navigation */
        a:focus-visible,
        button:focus-visible,
        iframe:focus-visible {
            outline: 2px solid #0077b5;
            outline-offset: 2px;
            border-radius: 2px;
        }

        /* Remove default focus outline only when using mouse */
        a:focus:not(:focus-visible),
        button:focus:not(:focus-visible) {
            outline: none;
        }

        /* Enhanced focus for interactive elements */
        .icon:focus-visible {
            outline: 3px solid #0077b5;
            outline-offset: 3px;
        }

        .button:focus-visible {
            outline: 3px solid #0077b5;
            outline-offset: 3px;
            box-shadow: 0 0 0 4px rgba(0, 115, 230, 0.2);
        }

        body {
            font-family: var(--font-primary);
            background-color: var(--color-brand-yellow);
            color: var(--color-black);
            text-align: center;
            margin: 0;
            padding: 50px 0 0 0;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        header {
            padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-xl) var(--spacing-md);
        }

        section {
            padding: var(--spacing-xl) var(--spacing-md);
        }

        footer {
            padding: var(--spacing-lg) var(--spacing-md);
        }

        h1 {
            font-family: var(--font-heading);
            font-size: 3em;
            font-weight: var(--font-weight-bold);
            margin-top: var(--spacing-md);
            animation: slideIn 1s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .subtitle {
            font-family: var(--font-primary);
            font-size: 1.3em;
            font-weight: var(--font-weight-regular);
            margin: var(--spacing-xs) 0;
            animation: fadeIn 1.5s ease-out;
        }

        .highlight {
            font-family: var(--font-primary);
            font-size: 1.2em;
            font-weight: var(--font-weight-light);
            margin: var(--spacing-xs) 0;
            color: var(--color-primary-blue);
            animation: fadeIn 2s ease-out;
        }

        .icon {
            width: 44px;
            height: 44px;
            margin: var(--spacing-xs);
            transition: transform var(--transition-normal);
        }

            .icon:hover {
                transform: scale(1.2);
            }

        .profile-container {
            margin: var(--spacing-lg) 0;
            display: flex;
            justify-content: center;
        }

        .profile-pic {
            border-radius: 50%;
            width: 200px;
            height: 200px;
            object-fit: cover;
            border: 3px solid var(--color-black);
            image-rendering: -webkit-optimize-contrast;
            transition: transform var(--transition-normal);
        }

            .profile-pic:hover {
                transform: none;
            }

        .social-links {
            margin: var(--spacing-lg) 0;
        }

            .social-links a {
                text-decoration: none;
                color: var(--color-black);
                margin: 0 var(--spacing-xs);
                font-size: 1.5em;
            }

                .social-links a img {
                    vertical-align: middle;
                }

                .social-links a:hover {
                    transform: translateY(-3px);
                }

                    .social-links a:hover span {
                        color: var(--color-primary-blue);
                    }
        /* About Me Section */
        .about {
            margin: var(--spacing-xl) auto 0 auto;
            padding: var(--spacing-xl);
            max-width: var(--max-width-content);
            background-color: var(--color-white);
            border-radius: var(--border-radius);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: left;
            animation: fadeIn 1.5s ease-out;
        }

            .about h2 {
                font-family: var(--font-heading);
                font-size: 2em;
                font-weight: var(--font-weight-bold);
                color: var(--color-primary-blue);
                text-align: center;
                margin-bottom: var(--spacing-md);
                animation: slideIn 1s ease-out;
            }

        .about-content {
            line-height: 1.6;
            color: var(--color-gray-dark);
        }

            .about-content p {
                margin-bottom: var(--spacing-md);
                font-size: 1.05em;
                text-align: justify;
            }

                .about-content p:last-child {
                    margin-bottom: 0;
                }

        .courses {
            margin: 0 auto;
            padding: var(--spacing-xl) var(--spacing-md);
            max-width: var(--max-width-content);
            background-color: var(--color-white);
            border-radius: var(--border-radius);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

            .courses h2 {
                font-size: 2em;
                margin-bottom: var(--spacing-md);
                color: var(--color-primary-blue);
                animation: slideIn 1s ease-out;
            }

            .courses ul {
                list-style: none;
                padding: 0;
                column-count: 2;
                column-gap: var(--spacing-md);
                margin: 0;
            }

                .courses ul li {
                    margin-bottom: var(--spacing-xs);
                    animation: fadeIn 1.5s ease-out;
                }

                    .courses ul li a {
                        text-decoration: none;
                        color: var(--color-primary-blue);
                        font-size: 1em;
                        transition: color var(--transition-normal);
                    }

                        .courses ul li a:hover {
                            text-decoration: underline;
                            color: var(--color-primary-blue-dark);
                        }


        .video-section {
            margin: 0 auto;
            padding: var(--spacing-xl) var(--spacing-md);
            max-width: var(--max-width-content);
            background-color: var(--color-white);
            border-radius: var(--border-radius);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-md);
        }

        .video-item {
            flex: 1 1 calc(33.333% - var(--spacing-md));
            max-width: calc(33.333% - var(--spacing-md));
            position: relative;
            background: var(--color-black);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-sizing: border-box;
            min-height: 200px;
        }

            .video-item iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }

            .video-item p {
                margin-top: var(--spacing-xs);
                color: var(--color-gray-dark);
            }

            .video-item a {
                color: var(--color-primary-blue);
                text-decoration: none;
                transition: color var(--transition-normal);
            }

                .video-item a:hover {
                    color: var(--color-primary-blue-dark);
                    text-decoration: underline;
                }


        /* Footer */
        /* Newsletter/Blog Section */
        .newsletter-section {
            background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
            color: var(--color-white);
            text-align: center;
            padding: 30px var(--spacing-md);
            margin-top: 0;
            animation: fadeIn 1.5s ease-out;
        }

        .newsletter-content {
            max-width: 600px;
            margin: 0 auto;
        }

        .newsletter-section h2 {
            font-family: var(--font-heading);
            font-size: 2em;
            color: var(--color-white);
            margin-bottom: var(--spacing-sm);
        }

        .newsletter-section p {
            font-size: 1em;
            margin-bottom: var(--spacing-md);
            line-height: 1.5;
        }

        .newsletter-button {
            display: inline-block;
            background-color: var(--color-white);
            color: var(--color-primary-blue);
            padding: 12px 30px;
            font-size: 1em;
            font-weight: var(--font-weight-semibold);
            text-decoration: none;
            border-radius: var(--border-radius-sm);
            transition: all var(--transition-normal);
            margin: var(--spacing-xs) 0;
        }

            .newsletter-button:hover {
                background-color: var(--color-gray-lightest);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }

        .contact-info {
            margin-top: var(--spacing-md);
            font-size: 0.9em;
            opacity: 0.95;
        }

            .contact-info a {
                color: var(--color-white);
                text-decoration: underline;
                font-weight: var(--font-weight-semibold);
            }

                .contact-info a:hover {
                    opacity: 0.8;
                }

        footer {
            font-size: 0.85em;
            background-color: #f8f9fa;
            border-top: 2px solid var(--color-primary-blue);
            animation: fadeIn 2s ease-out;
            text-align: center;
            color: #666;
        }

        footer p {
            margin: var(--spacing-xs) 0;
        }

        .footer-link {
            color: var(--color-primary-blue);
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
            transition: color var(--transition-fast);
        }

        .footer-link:hover {
            color: var(--color-primary-blue-dark);
            text-decoration: underline;
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5em;
            }

            .subtitle {
                font-size: 1.2em;
            }

            .highlight {
                font-size: 1em;
            }

            .profile-pic {
                width: 160px;
                height: 160px;
            }

            .social-links {
                font-size: 1.2em;
            }

            .about {
                padding: var(--spacing-lg) var(--spacing-md);
                margin: var(--spacing-lg) auto 0 auto;
            }

            header {
                padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
            }

            section {
                padding: var(--spacing-lg) var(--spacing-md);
            }

            .about h2 {
                font-size: 1.6em;
            }

            .about-content p {
                font-size: 1em;
                text-align: left;
            }

            .courses h2 {
                font-size: 1.6em;
            }

            .courses ul {
                column-count: 1;
            }

            .video-section {
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2.2em;
            }

            .subtitle {
                font-size: 1.1em;
            }

            .highlight {
                font-size: 1em;
            }

            .icon {
                width: 44px;
                height: 44px;
            }

            .profile-pic {
                width: 140px;
                height: 140px;
            }

            .about {
                padding: var(--spacing-sm);
                margin: var(--spacing-sm) auto;
            }

                .about h2 {
                    font-size: 1.4em;
                }

            .about-content p {
                font-size: 0.95em;
            }

            .courses h2 {
                font-size: 1.4em;
            }

            .courses ul {
                column-count: 1;
            }

            .video-item {
                padding-bottom: 56.25%;
            }
        }

        @media (max-width: 768px) {
            .video-section {
                flex-direction: column;
            }

            .video-item {
                flex: 1 1 100%;
                max-width: 100%;
                padding-bottom: 56.25%;
            }

            /* Course blocks - stack vertically on mobile */
            .course-block {
                flex-direction: column !important;
            }

            .course-content {
                flex: 1 !important;
            }

            .course-visual {
                flex: 1 !important;
            }

            /* Course details - better mobile spacing */
            .course-details-content {
                font-size: 0.75em;
            }

            .course-details-summary {
                font-size: 0.85em;
            }

            /* Learning paths - single column */
            .two-col-layout {
                grid-template-columns: 1fr !important;
            }

            .path-cards-grid {
                grid-template-columns: 1fr !important;
            }

            .paths-sidebar {
                position: static;
            }

            /* Blog grid - single column */
            .blog-grid {
                grid-template-columns: 1fr !important;
            }

            /* Stats grid - 2 columns */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            /* Touch-friendly buttons */
            .button {
                padding: 14px 24px;
                font-size: 1em;
            }
        }

        @media (max-width: 480px) {
            /* Stats grid - single column on very small screens */
            .stats-grid {
                grid-template-columns: 1fr !important;
            }

            /* Smaller course details text */
            .course-details-content {
                font-size: 0.7em;
                padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
            }

            .course-details-content ul {
                padding-left: var(--spacing-sm);
            }

            /* Blog cards - tighter spacing */
            .blog-card {
                padding: 20px;
            }

            /* Path cards - tighter spacing */
            .path-card {
                padding: var(--spacing-sm);
            }

            /* Touch-friendly tap targets */
            .course-details-summary {
                padding: var(--spacing-sm);
                font-size: 0.9em;
            }
        }

        /* Stats Banner Styles */
        .stats-banner {
            background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
            padding: var(--spacing-xl) var(--spacing-md);
            color: var(--color-white);
        }

        .stats-container {
            max-width: var(--max-width-wide);
            margin: 0 auto;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-lg);
            text-align: center;
        }

        .stat-item {
            padding: var(--spacing-sm);
            border-radius: var(--border-radius);
            transition: transform var(--transition-fast);
        }

        .stat-item:hover {
            transform: translateY(-3px);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--spacing-xs);
        }

        .stat-number.highlight {
            color: var(--color-brand-yellow);
        }

        .stat-label {
            font-size: 1em;
            opacity: 0.95;
        }

        /* Social Links Enhanced Styles */
        .social-links-flex {
            display: flex;
            gap: 35px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .social-link-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            transition: transform var(--transition-fast);
        }

        .social-icon-img {
            width: 40px;
            height: 40px;
            margin-bottom: 6px;
        }

        .social-label {
            font-size: 0.8em;
            color: var(--color-gray-dark);
            font-weight: var(--font-weight-medium);
        }

        /* Learning Paths Section */
        .section-learning-paths {
            background-color: #f8f9fa;
            padding: 60px var(--spacing-md);
            margin-top: var(--spacing-xl);
        }

        .container-wide {
            max-width: var(--max-width-wide);
            margin: 0 auto;
        }

        .learning-paths-heading {
            text-align: center;
            font-size: 2em;
            margin-bottom: var(--spacing-sm);
        }

        .learning-paths-subtitle {
            text-align: center;
            font-size: 1.1em;
            color: #666;
            max-width: 700px;
            margin: 0 auto var(--spacing-xl);
        }

        .two-col-layout {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: var(--spacing-xl);
            align-items: start;
        }

        .path-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
        }

        /* Path Card Styles */
        .path-card {
            background: var(--color-white);
            border-radius: var(--border-radius);
            padding: var(--spacing-md);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-left: 4px solid var(--color-primary-blue);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }

        .path-badge {
            display: inline-block;
            background: var(--color-brand-yellow);
            color: var(--color-black);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75em;
            margin-bottom: 12px;
            font-weight: var(--font-weight-semibold);
        }

        .path-card h3 {
            font-size: 1.3em;
            margin-bottom: var(--spacing-xs);
            color: var(--color-primary-blue);
        }

        .path-description {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 12px;
        }

        .path-meta {
            display: flex;
            gap: 12px;
            margin-bottom: var(--spacing-sm);
            font-size: 0.85em;
            color: #666;
        }

        .path-card details {
            margin-bottom: var(--spacing-sm);
        }

        .path-card summary {
            cursor: pointer;
            color: var(--color-primary-blue);
            font-weight: var(--font-weight-semibold);
            font-size: 0.9em;
            margin-bottom: var(--spacing-xs);
        }

        .path-card ol {
            list-style: decimal;
            padding-left: var(--spacing-md);
            margin: var(--spacing-xs) 0;
        }

        .path-card ol li {
            margin-bottom: var(--spacing-xs);
            font-size: 0.9em;
        }

        .path-card ol li a {
            color: var(--color-primary-blue);
            text-decoration: none;
        }

        .path-card ol li a:hover {
            text-decoration: underline;
        }

        .path-start-button {
            display: block;
            text-align: center;
            background: var(--color-primary-blue);
            color: var(--color-white);
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: 6px;
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
            font-size: 0.9em;
            transition: background var(--transition-normal);
        }

        .path-start-button:hover {
            background: var(--color-primary-blue-dark);
        }

        /* Path Card Color Variants */
        .path-card.purple {
            border-left-color: #6c44bc;
        }

        .path-card.purple .path-badge {
            background: #6c44bc;
            color: var(--color-white);
        }

        .path-card.purple h3 {
            color: #6c44bc;
        }

        .path-card.purple summary {
            color: #6c44bc;
        }

        .path-card.purple ol li a {
            color: #6c44bc;
        }

        .path-card.purple .path-start-button {
            background: #6c44bc;
        }

        .path-card.purple .path-start-button:hover {
            background: #5a3499;
        }

        .path-card.green {
            border-left-color: #28a745;
        }

        .path-card.green .path-badge {
            background: #28a745;
            color: var(--color-white);
        }

        .path-card.green h3 {
            color: #28a745;
        }

        .path-card.green summary {
            color: #28a745;
        }

        .path-card.green ol li a {
            color: #28a745;
        }

        .path-card.green .path-start-button {
            background: #28a745;
        }

        .path-card.green .path-start-button:hover {
            background: #218838;
        }

        .path-card.orange {
            border-left-color: #ff6b35;
        }

        .path-card.orange h3 {
            color: #ff6b35;
        }

        .path-card.orange summary {
            color: #ff6b35;
        }

        .path-card.orange ol li a {
            color: #ff6b35;
        }

        .path-card.orange .path-start-button {
            background: #ff6b35;
        }

        .path-card.orange .path-start-button:hover {
            background: #ff5722;
        }

        .path-card.teal {
            border-left-color: #17a2b8;
        }

        .path-card.teal .path-badge {
            background: #17a2b8;
            color: var(--color-white);
        }

        .path-card.teal h3 {
            color: #17a2b8;
        }

        .path-card.teal summary {
            color: #17a2b8;
        }

        .path-card.teal ol li a {
            color: #17a2b8;
        }

        .path-card.teal .path-start-button {
            background: #17a2b8;
        }

        .path-card.teal .path-start-button:hover {
            background: #138496;
        }

        .path-card.red {
            border-left-color: #dc3545;
        }

        .path-card.red .path-badge {
            background: #dc3545;
            color: var(--color-white);
        }

        .path-card.red h3 {
            color: #dc3545;
        }

        .path-card.red summary {
            color: #dc3545;
        }

        .path-card.red ol li a {
            color: #dc3545;
        }

        .path-card.red .path-start-button {
            background: #dc3545;
        }

        .path-card.red .path-start-button:hover {
            background: #c82333;
        }

        .path-card.gold {
            border-left-color: #ffd700;
        }

        .path-card.gold h3 {
            color: #d97706;
        }

        .path-card.gold summary {
            color: #d97706;
        }

        .path-card.gold ol li a {
            color: #d97706;
        }

        .path-card.gold .path-start-button {
            background: #d97706;
        }

        .path-card.gold .path-start-button:hover {
            background: #b45309;
        }

        /* Learning Paths Sidebar */
        .paths-sidebar {
            position: sticky;
            top: 20px;
            background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
            border-radius: 12px;
            padding: 28px;
            color: var(--color-white);
            height: fit-content;
            box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
        }

        .sidebar-heading {
            font-size: 1.4em;
            margin-bottom: var(--spacing-md);
            text-align: center;
            border-bottom: 2px solid rgba(255,255,255,0.2);
            padding-bottom: var(--spacing-sm);
        }

        .sidebar-subtext {
            font-size: 0.95em;
            margin-bottom: var(--spacing-md);
            text-align: center;
            opacity: 0.95;
        }

        .sidebar-list {
            list-style: none;
            padding: 0;
            display: grid;
            gap: 12px;
        }

        .sidebar-list li {
            background: rgba(255,255,255,0.15);
            padding: 12px 14px;
            border-radius: var(--spacing-xs);
            font-size: 0.9em;
            transition: background var(--transition-fast);
        }

        .sidebar-list li:hover {
            background: rgba(255,255,255,0.25);
        }

        .sidebar-list strong {
            display: block;
            margin-bottom: 4px;
            font-size: 0.95em;
        }

        .sidebar-list a {
            color: #ffd700;
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
        }

        .sidebar-list a:hover {
            text-decoration: underline;
        }

        /* LinkedIn Learning Banner */
        .linkedin-banner {
            background: linear-gradient(135deg, #0077B5 0%, #00A0DC 100%);
            color: var(--color-white);
            padding: var(--spacing-md);
            border-radius: var(--spacing-xs);
            margin: var(--spacing-md) 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border: 3px solid var(--color-brand-yellow);
        }

        .linkedin-banner p {
            margin: 0;
            font-size: 1.1em;
            font-weight: var(--font-weight-medium);
        }

        .linkedin-banner .badge-free {
            background: var(--color-brand-yellow);
            color: var(--color-black);
            padding: 2px var(--spacing-xs);
            border-radius: 4px;
            font-weight: var(--font-weight-bold);
        }

        /* Course Details */
        .course-details {
            margin: var(--spacing-md) 0;
            border: 1px solid #e0e0e0;
            border-radius: var(--border-radius-sm);
            background: #fafafa;
            transition: all var(--transition-normal);
            max-width: 100%;
            box-sizing: border-box;
        }

        .course-details[open] {
            background: var(--color-white);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .course-details-summary {
            cursor: pointer;
            color: var(--color-primary-blue);
            font-weight: var(--font-weight-semibold);
            padding: var(--spacing-sm) var(--spacing-md);
            user-select: none;
            font-size: 0.9em;
            background: transparent;
            border-radius: var(--border-radius-sm);
            transition: background var(--transition-fast);
        }

        .course-details-summary:hover {
            background: rgba(0, 119, 181, 0.05);
        }

        .course-details-content {
            padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
            font-size: 0.7em;
            line-height: 1.6;
            color: #333;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .course-details-content p {
            margin: var(--spacing-sm) 0;
            color: #2c3e50;
        }

        .course-details-content p:first-child {
            margin-top: 0;
        }

        .course-details-content strong {
            color: var(--color-primary-blue);
            font-weight: var(--font-weight-semibold);
            display: inline;
            font-size: 1em;
        }

        .course-details-content ul {
            margin: var(--spacing-xs) 0 var(--spacing-md) 0;
            padding-left: var(--spacing-md);
            padding-right: var(--spacing-xs);
            line-height: 1.7;
            display: block;
            max-width: 100%;
            column-count: 1 !important;
            list-style: disc;
            box-sizing: border-box;
        }

        .course-details-content li {
            margin-bottom: var(--spacing-xs);
            color: #444;
            display: list-item;
            max-width: 100%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            padding-right: var(--spacing-xs);
        }

        .course-details-content li::marker {
            color: var(--color-primary-blue);
        }

        .course-details-content ul:last-child {
            margin-bottom: 0;
        }

        /* Video Embed Container */
        .video-embed-container {
            position: relative;
            height: 0;
            padding-bottom: 56.25%;
        }

        .video-embed-container iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
        }

        /* Course Description Text */
        .course-description-text {
            font-size: 0.95em;
        }

        /* Blog Articles Section */
        .blog-articles-section {
            background-color: #f8f9fa;
            padding: 60px var(--spacing-md);
            margin-top: 0;
        }

        .blog-container {
            max-width: var(--max-width-wide);
            margin: 0 auto;
        }

        .blog-section-title {
            text-align: center;
            font-size: 2em;
            margin-bottom: 15px;
            color: var(--color-primary-blue);
        }

        .blog-section-subtitle {
            text-align: center;
            font-size: 1.1em;
            color: #666;
            max-width: 700px;
            margin: 0 auto 40px;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .blog-featured-badge {
            display: inline-block;
            background: var(--color-brand-yellow);
            color: #000;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75em;
            margin-bottom: 12px;
            font-weight: 600;
            width: fit-content;
        }

        .blog-tags {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.85em;
            color: #666;
        }

        .blog-tag {
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 500;
        }

        .blog-tag.ai-healthcare {
            background: #e3f2fd;
            color: var(--color-primary-blue);
        }

        .blog-tag.education {
            background: #e8f5e9;
            color: #28a745;
        }

        .blog-tag.career {
            background: #f3e5f5;
            color: #6c44bc;
        }

        .blog-tag.yoruba-tech {
            background: #fff3e0;
            color: #ff6b35;
        }

        .blog-tag.tutorial {
            background: #e0f7fa;
            color: #17a2b8;
        }

        .blog-card-title {
            font-size: 1.25em;
            margin-bottom: 12px;
            color: #333;
            line-height: 1.3;
        }

        .blog-card-excerpt {
            color: #666;
            font-size: 0.95em;
            margin-bottom: 20px;
            line-height: 1.6;
            flex-grow: 1;
        }

        .blog-view-all-container {
            text-align: center;
            margin-top: 40px;
        }

        /* Blog Card */
        .blog-card {
            background: var(--color-white);
            border-radius: var(--border-radius);
            padding: 28px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-top: 4px solid var(--color-primary-blue);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            display: flex;
            flex-direction: column;
        }

        /* Blog Read Button */
        .blog-read-button {
            display: inline-block;
            background: var(--color-primary-blue);
            color: var(--color-white);
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: 6px;
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
            font-size: 0.9em;
            text-align: center;
            transition: background var(--transition-normal);
        }

        .blog-read-button:hover {
            background: var(--color-primary-blue-dark);
        }

        /* View All Blog Button */
        .blog-view-all-button {
            display: inline-block;
            background: var(--color-white);
            color: var(--color-primary-blue);
            padding: 12px 30px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: var(--font-weight-semibold);
            font-size: 1em;
            border: 2px solid var(--color-primary-blue);
            transition: all var(--transition-normal);
        }

        .blog-view-all-button:hover {
            background: var(--color-primary-blue);
            color: var(--color-white);
        }
    

        /* Newsletter/Blog Section */
        .newsletter-section {
            background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
            color: var(--color-white);
            text-align: center;
            padding: 30px var(--spacing-md);
            margin-top: 0;
            animation: fadeIn 1.5s ease-out;
        }

        .newsletter-content {
            max-width: 600px;
            margin: 0 auto;
        }

        .newsletter-section h2 {
            font-family: var(--font-heading);
            font-size: 2em;
            color: var(--color-white);
            margin-bottom: var(--spacing-sm);
        }

        .newsletter-section p {
            font-size: 1em;
            margin-bottom: var(--spacing-md);
            line-height: 1.5;
        }

        .emailoctopus-form-container {
            /* This will constrain the height of the form.
               The form will scroll vertically if its content is taller than the max-height. */
            max-height: 300px; /* You can adjust this value as needed */
            overflow-y: auto;
            border-radius: 8px; /* Helps to contain the form visually */
        }
    

        /* Course List Two-Column Layout */
        .course-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
            padding: var(--spacing-md) 0;
            justify-content: flex-start;
        }

        .course-block {
            display: flex;
            flex-direction: column;
            background-color: var(--color-white);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--spacing-xs);
            overflow: hidden;
            flex: 1 1 45%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        @media (min-width: 768px) {
            .course-block {
                flex-direction: row;
            }

            .course-content {
                flex: 1.5;
                padding: var(--spacing-md);
            }

            .course-visual {
                flex: 1;
            }
        }

        .course-content {
            padding: var(--spacing-sm);
        }

            .course-content h3 {
                margin-top: 0;
                font-size: 1.4em;
                font-weight: var(--font-weight-semibold);
                line-height: 1.3;
                margin-bottom: var(--spacing-xs);
                color: var(--color-primary-blue);
            }

            .course-content p {
                color: var(--color-gray-medium);
                line-height: 1.5;
            }

        .course-buttons {
            margin-top: var(--spacing-sm);
        }

            .course-buttons a {
                display: inline-block;
                margin-right: var(--spacing-sm);
                padding: var(--spacing-xs) var(--spacing-md);
                text-decoration: none;
                border-radius: var(--border-radius-sm);
                font-weight: var(--font-weight-bold);
                transition: background-color var(--transition-normal);
            }

        .button.primary {
            background-color: var(--color-primary-blue);
            color: var(--color-white);
            border: 1px solid var(--color-primary-blue);
        }

            .button.primary:hover {
                background-color: var(--color-primary-blue-dark);
                border-color: var(--color-primary-blue-dark);
            }

        .button.secondary {
            background-color: var(--color-gray-lightest);
            color: var(--color-gray-dark);
            border: 1px solid #ccc;
        }

            .button.secondary:hover {
                background-color: #e0e0e0;
                border-color: #bbb;
            }

        .course-visual {
            position: relative;
        }

            .course-visual .video-container {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                max-width: 100%;
                background: var(--color-black);
            }

                .course-visual .video-container iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 0;
                }

            .course-visual p,
            .course-visual-caption {
                font-size: 0.85em;
                color: var(--color-gray-medium);
                text-align: center;
                margin-top: var(--spacing-xs);
                margin-bottom: 0;
                padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
            }

                .course-visual p a {
                    color: var(--color-primary-blue);
                    text-decoration: none;
                }

                    .course-visual p a:hover {
                        text-decoration: underline;
                    }
    

        /* Press & Speaking Section Styles */
        .media-section {
            background: #f8f9fa;
            padding: 60px var(--spacing-md);
            margin: 0;
        }

        .media-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .media-title {
            text-align: center;
            font-family: var(--font-heading);
            font-size: 2.2em;
            margin-bottom: 15px;
            color: var(--color-primary-blue);
        }

        .media-subtitle {
            text-align: center;
            font-size: 1.1em;
            color: #666;
            max-width: 700px;
            margin: 0 auto 50px;
            line-height: 1.6;
        }

        .media-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            column-gap: 40px;
        }

        .media-highlight {
            padding: 24px 28px;
            border-left: 3px solid #e0e0e0;
            transition: all var(--transition-normal);
            position: relative;
        }

        .media-highlight:hover {
            border-left-color: var(--color-primary-blue);
            background: rgba(0, 119, 181, 0.02);
            padding-left: 36px;
        }

        .media-type {
            display: inline-block;
            font-size: 0.75em;
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-primary-blue);
            background: rgba(0, 119, 181, 0.1);
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 12px;
        }

        .media-type.conference {
            color: #6c44bc;
            background: rgba(108, 68, 188, 0.1);
        }

        .media-type.podcast {
            color: #28a745;
            background: rgba(40, 167, 69, 0.1);
        }

        .media-highlight h3 {
            font-size: 1.2em;
            margin: 0 0 8px 0;
            line-height: 1.4;
            font-weight: var(--font-weight-semibold);
        }

        .media-highlight h3 a {
            color: #333;
            text-decoration: none;
            transition: color var(--transition-fast);
            display: inline-block;
        }

        .media-highlight h3 a:hover {
            color: var(--color-primary-blue);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }

        .media-source {
            font-size: 0.9em;
            color: #999;
            margin: 0 0 10px 0;
            font-weight: var(--font-weight-medium);
        }

        .media-desc {
            font-size: 0.95em;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        @media (max-width: 768px) {
            .media-content {
                grid-template-columns: 1fr;
                column-gap: 0;
            }

            .media-title {
                font-size: 1.8em;
            }

            .media-subtitle {
                font-size: 1em;
            }

            .media-highlight {
                padding: 20px 24px;
            }

            .media-highlight:hover {
                padding-left: 28px;
            }
        }

        /* Search box styles */
        .search-container {
            max-width: 600px;
            margin: 0 auto 30px auto;
        }

        .search-box {
            width: 100%;
            padding: 14px 20px 14px 45px;
            font-size: 1em;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            transition: border-color 0.3s, box-shadow 0.3s;
            font-family: 'Roboto', sans-serif;
            box-sizing: border-box;
        }

        .search-box:focus {
            outline: none;
            border-color: #0077b5;
            box-shadow: 0 0 0 3px rgba(0, 119, 181, 0.1);
        }

        .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            display: none;
        }

        .no-results h3 {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #333;
        }