{"id":148,"date":"2026-04-02T05:08:02","date_gmt":"2026-04-02T05:08:02","guid":{"rendered":"http:\/\/localhost\/heyoninstitute.lk-new\/?page_id=148"},"modified":"2026-06-14T17:35:02","modified_gmt":"2026-06-14T17:35:02","slug":"courses","status":"publish","type":"page","link":"https:\/\/heyoninstitute.lk\/?page_id=148","title":{"rendered":"Courses"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Professional<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_plxmamplxmamplxm.png\" alt=\"Capacity Building Training\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Government &#038; Corporate<\/div>\n                <h2 class=\"card-title\">Capacity Building for Government Officials, Corporate Staff<\/h2>\n                <p class=\"card-description\">\u0dad\u0ddc\u0dbb\u0dad\u0dd4\u0dbb\u0dd4 \u0dad\u0dcf\u0d9a\u0dca\u0dc2\u0dab\u0dba \u0db8\u0dd6\u0dbd\u0dd2\u0d9a \u0d9a\u0dbb\u0d9c\u0dad\u0dca \u0db1\u0dd6\u0dad\u0db1 \u0dbb\u0dcf\u0da2\u0dca\u200d\u0dba \u0db4\u0dbb\u0dd2\u0db4\u0dcf\u0dbd\u0db1 \u0d85\u0dc0\u0dc1\u0dca\u200d\u0dba\u0dad\u0dcf\u0dc0\u0dbd\u0da7 \u0d9c\u0dd0\u0dc5\u0db4\u0dd9\u0db1 \u0db4\u0dbb\u0dd2\u0daf\u0dd2, \u0dbb\u0da2\u0dba\u0dda \u0db1\u0dd2\u0dbd\u0db0\u0dcf\u0dbb\u0dd3\u0db1\u0dca\u0d9c\u0dda \u0dc3\u0dc4 \u0db4\u0dde\u0daf\u0dca\u0d9c\u0dbd\u0dd2\u0d9a \u0d85\u0d82\u0dc1\u0dba\u0dda \u0db1\u0dd2\u0dbd\u0db0\u0dcf\u0dbb\u0dd3\u0db1\u0dca\u0d9c\u0dda \u0dad\u0dcf\u0d9a\u0dca\u0dc2\u0dab\u0dd2\u0d9a \u0daf\u0dd0\u0db1\u0dd4\u0db8, \u0d9a\u0dc5\u0db8\u0db1\u0dcf\u0d9a\u0dbb\u0dab \u0dc3\u0dc4 \u0db1\u0dcf\u0dba\u0d9a\u0dad\u0dca\u0dc0 \u0d9a\u0dd4\u0dc3\u0dbd\u0dad\u0dcf \u0dc0\u0dbb\u0dca\u0db0\u0db1\u0dba \u0d9a\u0dbb\u0db1 \u0dc3\u0dd4\u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dd3 \u0db4\u0dd4\u0dc4\u0dd4\u0dab\u0dd4 \u0db4\u0dcf\u0da8\u0db8\u0dcf\u0dbd\u0dcf\u0dc0\u0db1\u0dca.<\/p>\n                \n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=324\" class=\"card-cta-btn\">\n                    Read More \n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">School Leavers &#038; Job Seekers<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_f1txwzf1txwzf1tx.png\" alt=\"Professional Certificate Training\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Career Foundation<\/div>\n                <h2 class=\"card-title\">Professional Certificate Programs<\/h2>\n                <p class=\"card-description\">O\/L, A\/L \u0d89\u0dc0\u0dbb \u0dc0\u0dd4\u0dab\u0dd4 \u0daf\u0dd6 \u0db4\u0dd4\u0dad\u0dd4\u0db1\u0dca\u0da7 \u0dc0\u0d9c\u0dda\u0db8, \u0dad\u0db8\u0db1\u0dca\u0d9c\u0dda \u0dad\u0ddc\u0dbb\u0dad\u0dd4\u0dbb\u0dd4 \u0dad\u0dcf\u0d9a\u0dca\u0dc2\u0dab \u0dc4\u0dcf \u0d9a\u0dc5\u0db8\u0db1\u0dcf\u0d9a\u0dbb\u0dab \u0d9a\u0dd4\u0dc3\u0dbd\u0dad\u0dcf \u0dc0\u0dbb\u0dca\u0db0\u0db1\u0dba \u0d9a\u0dbb\u0d9c\u0dd9\u0db1 \u0dbb\u0dd0\u0d9a\u0dd2\u0dba\u0dcf\u0dc0\u0d9a\u0da7 \u0dba\u0db1\u0dca\u0db1 \u0db6\u0dbd\u0dcf\u0db4\u0ddc\u0dbb\u0ddc\u0dad\u0dca\u0dad\u0dd4 \u0dc0\u0db1 \u0d95\u0db1\u0dd1\u0db8 \u0d9a\u0dd9\u0db1\u0dd9\u0d9a\u0dd4\u0da7 \u0d9c\u0dd0\u0dc5\u0db4\u0dd9\u0db1 \u0db4\u0dbb\u0dd2\u0daf\u0dd2, \u0d89\u0dad\u0dcf\u0db8\u0dad\u0dca \u0d86\u0d9a\u0dbb\u0dca\u0dc2\u0dab\u0dd3\u0dba \u0dc3\u0dc4 \u0dc0\u0dd8\u0dad\u0dca\u0dad\u0dd3\u0dba\u0db8\u0dba \u0db8\u0da7\u0dca\u0da7\u0db8\u0dda \u0db4\u0dcf\u0da8\u0db8\u0dcf\u0dbd\u0dcf\u0dc0\u0db1\u0dca.<\/p>\n                \n                <!-- Updated CTA Link Button -->\n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=315\" class=\"card-cta-btn\">\n                    See All Courses \n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Young Learners<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Untitled.png\" alt=\"School ICT Courses\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Foundation Learning<\/div>\n                <h2 class=\"card-title\">School Courses<\/h2>\n                <p class=\"card-description\">\u0db4\u0dcf\u0dc3\u0dbd\u0dca \u0d85\u0db0\u0dca\u200d\u0dba\u0dcf\u0db4\u0db1\u0dba \u0dbd\u0db6\u0db1 \u0daf\u0dd6 \u0db4\u0dd4\u0dad\u0dd4\u0db1\u0dca \u0dc3\u0db3\u0dc4\u0dcf\u0db8 \u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dba\u0dd9\u0db1\u0dca \u0dc3\u0dd0\u0dbd\u0dc3\u0dd4\u0db8\u0dca \u0d9a\u0dc5 \u0dc3\u0dd4\u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dd3 \u0d92\u0d9a\u0dcf\u0db6\u0daf\u0dca\u0db0 \u0dc3\u0dc4\u0dad\u0dd2\u0d9a \u0db4\u0dad\u0dca\u200d\u0dbb \u0db4\u0dcf\u0da8\u0db8\u0dcf\u0dbd\u0dcf\u0dc0\u0db1\u0dca.<\/p>\n                \n                <!-- CTA Button (You can swap the href link whenever you generate the page id) -->\n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=198\" class=\"card-cta-btn\">\n                    See All Courses \n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"si\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        :root {\n            --primary-gradient: linear-gradient(46deg, #00adb5 4%, #095f5c 93%);\n            --primary-hover: linear-gradient(270deg, #00adb5 4%, #095f5c 93%);\n            --text-dark: #2d2d2d;\n            --text-muted: #555555;\n            --border-radius: 16px;\n            --transition: all 0.3s ease;\n        }\n\n        \/* Container styling to center the single card on your page template *\/\n        .course-card-container {\n            max-width: 1100px;\n            width: 100%;\n            margin: 20px auto;\n            padding: 0 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        \/* Beautiful Landscape Card Layout *\/\n        .course-landscape-card {\n            display: flex;\n            flex-direction: row; \/* Forces Image Left, Details Right *\/\n            background: #ffffff;\n            border-radius: var(--border-radius);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\n            overflow: hidden;\n            min-height: 400px;\n            transition: var(--transition);\n            border: 1px solid rgba(0, 0, 0, 0.04);\n        }\n\n        .course-landscape-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 173, 181, 0.12);\n        }\n\n        \/* Left Side Image Container *\/\n        .card-image-wrapper {\n            flex: 1.1; \/* Proportional width of the image area *\/\n            position: relative;\n            overflow: hidden;\n            min-height: 100%;\n        }\n\n        .card-image-wrapper img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: var(--transition);\n        }\n\n        .course-landscape-card:hover .card-image-wrapper img {\n            transform: scale(1.03);\n        }\n\n        \/* Elegant Pill Tag Overlay on Image *\/\n        .image-badge {\n            position: absolute;\n            top: 20px;\n            left: 20px;\n            background: rgba(9, 95, 92, 0.9);\n            backdrop-filter: blur(5px);\n            color: #ffffff;\n            padding: 6px 14px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            border-radius: 30px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            z-index: 2;\n        }\n\n        \/* Right Side Text Details *\/\n        .card-content-wrapper {\n            flex: 1; \/* Proportional width of the content area *\/\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background: linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);\n        }\n\n        .card-subtitle {\n            color: #00adb5;\n            font-size: 0.85rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 10px;\n        }\n\n        .card-title {\n            color: var(--text-dark);\n            font-size: 1.85rem;\n            line-height: 1.3;\n            margin: 0 0 15px 0;\n            font-weight: 700;\n        }\n\n        .card-description {\n            color: var(--text-muted);\n            font-size: 1rem;\n            line-height: 1.7;\n            margin: 0 0 30px 0;\n            font-weight: 400;\n        }\n\n        \/* Dynamic Action Button *\/\n        .card-cta-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            align-self: flex-start;\n            padding: 12px 28px;\n            background: var(--primary-gradient);\n            color: #ffffff;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.95rem;\n            border-radius: 50px;\n            box-shadow: 0 4px 15px rgba(0, 173, 181, 0.25);\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover {\n            background: var(--primary-hover);\n            box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);\n            transform: translateX(3px);\n        }\n\n        .card-cta-btn svg {\n            margin-left: 8px;\n            transition: var(--transition);\n        }\n\n        .card-cta-btn:hover svg {\n            transform: translateX(4px);\n        }\n\n        \/* Responsive Breakpoint for Mobile and Tablets *\/\n        @media (max-width: 850px) {\n            .course-landscape-card {\n                flex-direction: column; \/* Switches layout to vertical grid stack *\/\n            }\n            .card-image-wrapper {\n                min-height: 250px;\n            }\n            .card-content-wrapper {\n                padding: 30px;\n            }\n            .card-title {\n                font-size: 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"course-card-container\">\n        <div class=\"course-landscape-card\">\n            \n            <!-- Left Side Course Image -->\n            <div class=\"card-image-wrapper\">\n                <span class=\"image-badge\">Junior Academy<\/span>\n                <img decoding=\"async\" src=\"https:\/\/heyoninstitute.lk\/wp-content\/uploads\/2026\/06\/Untitled.png\" alt=\"Kids ICT Courses\">\n            <\/div>\n            \n            <!-- Right Side Course Details -->\n            <div class=\"card-content-wrapper\">\n                <div class=\"card-subtitle\">Early Steps<\/div>\n                <h2 class=\"card-title\">Kids Courses<\/h2>\n                <p class=\"card-description\">\u0db4\u0dcf\u0dc3\u0dbd\u0dca \u0d85\u0db0\u0dca\u200d\u0dba\u0dcf\u0db4\u0db1\u0dba \u0dbd\u0db6\u0db1 \u0daf\u0dd6 \u0db4\u0dd4\u0dad\u0dd4\u0db1\u0dca \u0dc3\u0db3\u0dc4\u0dcf\u0db8 \u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dba\u0dd9\u0db1\u0dca \u0dc3\u0dd0\u0dbd\u0dc3\u0dd4\u0db8\u0dca \u0d9a\u0dc5 \u0dc3\u0dd4\u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dd3 \u0d92\u0d9a\u0dcf\u0db6\u0daf\u0dca\u0db0 \u0dc3\u0dc4\u0dad\u0dd2\u0d9a \u0db4\u0dad\u0dca\u200d\u0dbb \u0db4\u0dcf\u0da8\u0db8\u0dcf\u0dbd\u0dcf\u0dc0\u0db1\u0dca.<\/p>\n                \n                <!-- CTA Button -->\n                <a href=\"https:\/\/heyoninstitute.lk\/?page_id=210\" class=\"card-cta-btn\">\n                    See All Courses \n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Professional Government &#038; Corporate Capacity Building for Government Officials, Corporate Staff \u0dad\u0ddc\u0dbb\u0dad\u0dd4\u0dbb\u0dd4 \u0dad\u0dcf\u0d9a\u0dca\u0dc2\u0dab\u0dba \u0db8\u0dd6\u0dbd\u0dd2\u0d9a \u0d9a\u0dbb\u0d9c\u0dad\u0dca \u0db1\u0dd6\u0dad\u0db1 \u0dbb\u0dcf\u0da2\u0dca\u200d\u0dba \u0db4\u0dbb\u0dd2\u0db4\u0dcf\u0dbd\u0db1 \u0d85\u0dc0\u0dc1\u0dca\u200d\u0dba\u0dad\u0dcf\u0dc0\u0dbd\u0da7 \u0d9c\u0dd0\u0dc5\u0db4\u0dd9\u0db1 \u0db4\u0dbb\u0dd2\u0daf\u0dd2, \u0dbb\u0da2\u0dba\u0dda \u0db1\u0dd2\u0dbd\u0db0\u0dcf\u0dbb\u0dd3\u0db1\u0dca\u0d9c\u0dda \u0dc3\u0dc4 \u0db4\u0dde\u0daf\u0dca\u0d9c\u0dbd\u0dd2\u0d9a \u0d85\u0d82\u0dc1\u0dba\u0dda \u0db1\u0dd2\u0dbd\u0db0\u0dcf\u0dbb\u0dd3\u0db1\u0dca\u0d9c\u0dda \u0dad\u0dcf\u0d9a\u0dca\u0dc2\u0dab\u0dd2\u0d9a \u0daf\u0dd0\u0db1\u0dd4\u0db8, \u0d9a\u0dc5\u0db8\u0db1\u0dcf\u0d9a\u0dbb\u0dab \u0dc3\u0dc4 \u0db1\u0dcf\u0dba\u0d9a\u0dad\u0dca\u0dc0 \u0d9a\u0dd4\u0dc3\u0dbd\u0dad\u0dcf \u0dc0\u0dbb\u0dca\u0db0\u0db1\u0dba \u0d9a\u0dbb\u0db1 \u0dc3\u0dd4\u0dc0\u0dd2\u0dc1\u0dda\u0dc2\u0dd3 \u0db4\u0dd4\u0dc4\u0dd4\u0dab\u0dd4 \u0db4\u0dcf\u0da8\u0db8\u0dcf\u0dbd\u0dcf\u0dc0\u0db1\u0dca. Read More School Leavers &#038; Job Seekers Career Foundation Professional Certificate Programs O\/L, A\/L \u0d89\u0dc0\u0dbb \u0dc0\u0dd4\u0dab\u0dd4 \u0daf\u0dd6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-148","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=148"}],"version-history":[{"count":30,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/148\/revisions"}],"predecessor-version":[{"id":693,"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=\/wp\/v2\/pages\/148\/revisions\/693"}],"wp:attachment":[{"href":"https:\/\/heyoninstitute.lk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}