{"id":10,"date":"2026-10-12T14:41:58","date_gmt":"2026-10-12T14:41:58","guid":{"rendered":"https:\/\/taxency.com\/?page_id=10"},"modified":"2026-10-16T14:40:53","modified_gmt":"2026-10-16T14:40:53","slug":"home","status":"publish","type":"page","link":"https:\/\/taxency.com\/?page_id=10","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n EduSphere Hero Section Modern Dark Theme<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap\" rel=\"stylesheet\">\n <style>\n \/* ============================================\n RESET AND BASE\n ============================================ *\/\n *,\n *::before,\n *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n \/* Dark theme palette *\/\n --bg-dark: #04070e;\n --bg-surface: #0a1120;\n --bg-elevated: #101a2e;\n --border-subtle: #1c2842;\n --border-accent: #1e3a8a;\n\n \/* Accent electric blue *\/\n --accent-300: #93c5fd;\n --accent-400: #60a5fa;\n --accent-500: #3b82f6;\n --accent-600: #2563eb;\n --accent-700: #1d4ed8;\n --accent-glow: rgba(59, 130, 246, 0.4);\n\n \/* Text *\/\n --text-primary: #f1f5f9;\n --text-secondary: #94a3b8;\n --text-muted: #64748b;\n\n \/* Typography *\/\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n\n html {\n scroll-behavior: smooth;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n font-family: var(--font-sans);\n background-color: var(--bg-dark);\n color: var(--text-primary);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n \/* ============================================\n HERO SECTION\n ============================================ *\/\n .hero {\n position: relative;\n min-height: 100vh;\n min-height: 100dvh;\n display: flex;\n align-items: center;\n padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 100px);\n overflow: hidden;\n isolation: isolate;\n }\n\n \/* Ambient background layers *\/\n .hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 90% 65% at 50% -15%, rgba(37, 99, 235, 0.22) 0%, transparent 62%),\n radial-gradient(ellipse 55% 55% at 88% 25%, rgba(59, 130, 246, 0.12) 0%, transparent 58%),\n radial-gradient(ellipse 65% 55% at 8% 92%, rgba(96, 165, 250, 0.08) 0%, transparent 58%);\n pointer-events: none;\n z-index: -2;\n }\n\n \/* Subtle grid pattern *\/\n .hero::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);\n background-size: 72px 72px;\n mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 18%, transparent 78%);\n -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 18%, transparent 78%);\n pointer-events: none;\n z-index: -1;\n }\n\n .container {\n width: 100%;\n max-width: 1220px;\n margin: 0 auto;\n padding: 0 clamp(20px, 4vw, 40px);\n }\n\n .hero__inner {\n display: grid;\n grid-template-columns: 1.05fr 0.95fr;\n align-items: center;\n gap: clamp(40px, 6vw, 80px);\n }\n\n \/* ============================================\n LEFT COLUMN CONTENT\n ============================================ *\/\n .hero__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 620px;\n }\n\n \/* Badge *\/\n .hero__badge {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 8px 20px 8px 10px;\n background: rgba(37, 99, 235, 0.08);\n border: 1px solid rgba(59, 130, 246, 0.25);\n border-radius: 100px;\n font-size: 0.8rem;\n font-weight: 500;\n color: var(--accent-300);\n letter-spacing: 0.01em;\n margin-bottom: 30px;\n backdrop-filter: blur(10px);\n transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;\n }\n\n .hero__badge:hover {\n border-color: rgba(59, 130, 246, 0.45);\n background: rgba(37, 99, 235, 0.14);\n transform: translateY(-1px);\n }\n\n .hero__badge-dot {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--accent-500), var(--accent-700));\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 0 14px var(--accent-glow);\n flex-shrink: 0;\n position: relative;\n }\n\n \/* CSS drawn graduation cap *\/\n .icon-cap {\n width: 12px;\n height: 12px;\n position: relative;\n }\n\n .icon-cap::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 5px solid #ffffff;\n }\n\n .icon-cap::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 8px;\n height: 2px;\n background: #ffffff;\n border-radius: 1px;\n }\n\n \/* Headline *\/\n .hero__title {\n font-size: clamp(2.3rem, 5.8vw, 4rem);\n font-weight: 800;\n line-height: 1.06;\n letter-spacing: -0.04em;\n color: var(--text-primary);\n margin-bottom: 26px;\n }\n\n .hero__title--gradient {\n background: linear-gradient(120deg, var(--accent-400) 0%, #a78bfa 48%, var(--accent-500) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n \/* Subheadline *\/\n .hero__subtitle {\n font-size: clamp(1rem, 1.6vw, 1.15rem);\n color: var(--text-secondary);\n line-height: 1.7;\n margin-bottom: 38px;\n max-width: 520px;\n }\n\n \/* CTA Group *\/\n .hero__cta-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 14px;\n margin-bottom: 48px;\n width: 100%;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n padding: 16px 34px;\n border-radius: 14px;\n font-family: var(--font-sans);\n font-size: 0.95rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n text-decoration: none;\n cursor: pointer;\n border: 1.5px solid transparent;\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n box-shadow 0.25s ease,\n background 0.2s ease,\n border-color 0.2s ease;\n will-change: transform;\n white-space: nowrap;\n }\n\n .btn:active {\n transform: translateY(0) scale(0.98);\n }\n\n \/* Primary CTA *\/\n .btn--primary {\n background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 100%);\n color: #ffffff;\n box-shadow:\n 0 4px 18px rgba(37, 99, 235, 0.4),\n 0 1px 0 rgba(255, 255, 255, 0.14) inset;\n position: relative;\n overflow: hidden;\n }\n\n .btn--primary::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 55%);\n opacity: 0;\n transition: opacity 0.25s ease;\n pointer-events: none;\n }\n\n .btn--primary:hover {\n transform: translateY(-3px);\n box-shadow:\n 0 10px 30px rgba(37, 99, 235, 0.55),\n 0 1px 0 rgba(255, 255, 255, 0.18) inset;\n }\n\n .btn--primary:hover::after {\n opacity: 1;\n }\n\n .btn--primary:focus-visible {\n outline: 2px solid var(--accent-400);\n outline-offset: 3px;\n }\n\n \/* Ghost secondary *\/\n .btn--ghost {\n background: rgba(255, 255, 255, 0.035);\n color: var(--text-primary);\n border-color: var(--border-subtle);\n backdrop-filter: blur(10px);\n }\n\n .btn--ghost:hover {\n background: rgba(255, 255, 255, 0.07);\n border-color: #334155;\n transform: translateY(-3px);\n }\n\n .btn--ghost:focus-visible {\n outline: 2px solid var(--accent-400);\n outline-offset: 3px;\n }\n\n .btn__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1em;\n line-height: 1;\n }\n\n \/* Arrow icon using CSS *\/\n .icon-arrow {\n width: 14px;\n height: 2px;\n background: currentColor;\n position: relative;\n border-radius: 1px;\n }\n\n .icon-arrow::after {\n content: '';\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n width: 6px;\n height: 6px;\n border-top: 2px solid currentColor;\n border-right: 2px solid currentColor;\n border-radius: 1px;\n }\n\n \/* Live indicator dot *\/\n .live-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #ef4444;\n box-shadow: 0 0 10px #ef4444;\n animation: live-pulse 1.6s ease-in-out infinite;\n flex-shrink: 0;\n }\n\n @keyframes live-pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(0.85); }\n }\n\n \/* Play icon using CSS *\/\n .icon-play {\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 10px solid currentColor;\n margin-left: 2px;\n }\n\n \/* Trust Bar Stats *\/\n .hero__trust {\n display: flex;\n align-items: center;\n gap: 30px;\n flex-wrap: wrap;\n padding-top: 10px;\n }\n\n .trust-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .trust-item__value {\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--text-primary);\n letter-spacing: -0.025em;\n line-height: 1.15;\n font-variant-numeric: tabular-nums;\n }\n\n .trust-item__value span {\n color: var(--accent-400);\n }\n\n .trust-item__label {\n font-size: 0.76rem;\n color: var(--text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n }\n\n .trust-divider {\n width: 1px;\n height: 38px;\n background: var(--border-subtle);\n }\n\n \/* ============================================\n RIGHT COLUMN VISUAL\n ============================================ *\/\n .hero__visual {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 460px;\n }\n\n \/* Glow behind card *\/\n .hero__visual::before {\n content: '';\n position: absolute;\n width: 85%;\n height: 85%;\n background: radial-gradient(circle, rgba(37, 99, 235, 0.32) 0%, transparent 70%);\n filter: blur(70px);\n z-index: 0;\n animation: pulse-glow 6s ease-in-out infinite;\n }\n\n @keyframes pulse-glow {\n 0%, 100% { opacity: 0.55; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.1); }\n }\n\n \/* Main glass card *\/\n .hero-card {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 430px;\n background: linear-gradient(160deg, rgba(16, 26, 46, 0.94) 0%, rgba(10, 17, 32, 0.97) 100%);\n border: 1px solid var(--border-subtle);\n border-radius: 28px;\n padding: 32px;\n backdrop-filter: blur(24px);\n box-shadow:\n 0 40px 70px -24px rgba(0, 0, 0, 0.75),\n 0 0 0 1px rgba(255, 255, 255, 0.03) inset;\n }\n\n .hero-card__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 26px;\n }\n\n .hero-card__title {\n font-size: 0.88rem;\n font-weight: 700;\n color: var(--text-primary);\n letter-spacing: -0.01em;\n }\n\n .hero-card__live {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 0.7rem;\n font-weight: 700;\n color: #4ade80;\n background: rgba(74, 222, 128, 0.09);\n padding: 5px 11px;\n border-radius: 100px;\n border: 1px solid rgba(74, 222, 128, 0.2);\n }\n\n .hero-card__live::before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #4ade80;\n box-shadow: 0 0 8px #4ade80;\n animation: blink 2s ease-in-out infinite;\n }\n\n @keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n \/* Progress rows *\/\n .progress-list {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .progress-item__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 9px;\n }\n\n .progress-item__name {\n font-size: 0.83rem;\n font-weight: 500;\n color: var(--text-secondary);\n }\n\n .progress-item__pct {\n font-size: 0.78rem;\n font-weight: 700;\n color: var(--accent-400);\n font-variant-numeric: tabular-nums;\n }\n\n .progress-bar {\n height: 7px;\n background: rgba(148, 163, 184, 0.1);\n border-radius: 100px;\n overflow: hidden;\n }\n\n .progress-bar__fill {\n height: 100%;\n border-radius: 100px;\n background: linear-gradient(90deg, var(--accent-600), var(--accent-400));\n box-shadow: 0 0 12px var(--accent-glow);\n width: 0;\n animation: fill-bar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes fill-bar {\n to { width: var(--fill-width); }\n }\n\n \/* Floating stat chip *\/\n .hero__chip {\n position: absolute;\n z-index: 2;\n display: flex;\n align-items: center;\n gap: 12px;\n background: rgba(16, 26, 46, 0.96);\n border: 1px solid var(--border-subtle);\n border-radius: 18px;\n padding: 15px 20px;\n backdrop-filter: blur(18px);\n box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.7);\n animation: float 6s ease-in-out infinite;\n }\n\n .hero__chip--top {\n top: 6%;\n right: -5%;\n animation-delay: 0s;\n }\n\n .hero__chip--bottom {\n bottom: 5%;\n left: -7%;\n animation-delay: -3s;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-14px); }\n }\n\n .chip-icon {\n width: 42px;\n height: 42px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n }\n\n .chip-icon--blue { background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(59, 130, 246, 0.28); }\n .chip-icon--violet { background: rgba(167, 139, 250, 0.16); border: 1px solid rgba(167, 139, 250, 0.28); }\n .chip-icon--green { background: rgba(74, 222, 128, 0.16); border: 1px solid rgba(74, 222, 128, 0.28); }\n\n \/* CSS drawn chart bars *\/\n .icon-chart {\n display: flex;\n align-items: flex-end;\n gap: 2px;\n height: 14px;\n }\n\n .icon-chart span {\n width: 3px;\n background: var(--accent-400);\n border-radius: 1px;\n }\n\n .icon-chart span:nth-child(1) { height: 6px; }\n .icon-chart span:nth-child(2) { height: 10px; }\n .icon-chart span:nth-child(3) { height: 14px; }\n\n \/* CSS drawn trophy *\/\n .icon-trophy {\n width: 14px;\n height: 14px;\n position: relative;\n }\n\n .icon-trophy::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 12px;\n height: 9px;\n border: 2px solid #a78bfa;\n border-radius: 2px 2px 8px 8px;\n }\n\n .icon-trophy::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 8px;\n height: 2px;\n background: #a78bfa;\n border-radius: 1px;\n }\n\n \/* CSS drawn play\/live icon *\/\n .icon-live {\n width: 14px;\n height: 14px;\n position: relative;\n border-radius: 50%;\n border: 2px solid #4ade80;\n }\n\n .icon-live::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-40%, -50%);\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 6px solid #4ade80;\n }\n\n .chip-text strong {\n display: block;\n font-size: 0.88rem;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1.3;\n }\n\n .chip-text span {\n font-size: 0.73rem;\n color: var(--text-muted);\n font-weight: 500;\n }\n\n \/* ============================================\n RESPONSIVE TABLET\n ============================================ *\/\n @media (max-width: 1024px) {\n .hero__inner {\n grid-template-columns: 1fr;\n gap: 60px;\n text-align: center;\n }\n\n .hero__content {\n align-items: center;\n max-width: 700px;\n margin: 0 auto;\n }\n\n .hero__subtitle {\n max-width: 580px;\n }\n\n .hero__cta-group {\n justify-content: center;\n }\n\n .hero__trust {\n justify-content: center;\n }\n\n .hero__visual {\n min-height: 400px;\n max-width: 480px;\n margin: 0 auto;\n width: 100%;\n }\n\n .hero__chip--top { right: -3%; }\n .hero__chip--bottom { left: -3%; }\n }\n\n \/* ============================================\n RESPONSIVE MOBILE\n ============================================ *\/\n @media (max-width: 640px) {\n .hero {\n min-height: auto;\n padding: 100px 0 72px;\n }\n\n .hero__badge {\n font-size: 0.72rem;\n padding: 7px 16px 7px 9px;\n margin-bottom: 24px;\n }\n\n .hero__title {\n margin-bottom: 20px;\n }\n\n .hero__subtitle {\n font-size: 0.98rem;\n margin-bottom: 32px;\n }\n\n .hero__cta-group {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n margin-bottom: 40px;\n }\n\n .btn {\n width: 100%;\n padding: 17px 24px;\n font-size: 0.95rem;\n }\n\n .hero__trust {\n gap: 22px;\n justify-content: center;\n }\n\n .trust-divider {\n display: none;\n }\n\n .trust-item {\n align-items: center;\n text-align: center;\n min-width: 92px;\n }\n\n .trust-item__value {\n font-size: 1.25rem;\n }\n\n .trust-item__label {\n font-size: 0.68rem;\n }\n\n \/* Visual adjustments *\/\n .hero__visual {\n min-height: 340px;\n }\n\n .hero-card {\n padding: 24px;\n border-radius: 22px;\n }\n\n .hero-card__header {\n margin-bottom: 22px;\n }\n\n .progress-list {\n gap: 16px;\n }\n\n \/* Reposition floating chips *\/\n .hero__chip {\n padding: 11px 15px;\n gap: 10px;\n border-radius: 15px;\n }\n\n .hero__chip--top {\n top: 3%;\n right: 0;\n }\n\n .hero__chip--bottom {\n bottom: 1%;\n left: 0;\n }\n\n .chip-icon {\n width: 34px;\n height: 34px;\n border-radius: 10px;\n }\n\n .chip-text strong { font-size: 0.8rem; }\n .chip-text span { font-size: 0.68rem; }\n }\n\n \/* ============================================\n RESPONSIVE SMALL MOBILE\n ============================================ *\/\n @media (max-width: 390px) {\n .hero__trust {\n gap: 16px;\n }\n\n .trust-item__value { font-size: 1.1rem; }\n\n .hero__chip--top,\n .hero__chip--bottom {\n position: static;\n animation: none;\n margin-top: 16px;\n width: 100%;\n justify-content: center;\n }\n\n .hero__visual {\n flex-direction: column;\n min-height: auto;\n }\n }\n\n \/* ============================================\n ACCESSIBILITY REDUCED MOTION\n ============================================ *\/\n @media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .progress-bar__fill {\n width: var(--fill-width);\n }\n }\n\n \/* ============================================\n FOCUS STYLES\n ============================================ *\/\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--accent-400);\n outline-offset: 3px;\n border-radius: 8px;\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero\" aria-label=\"Hero Build your digital future\">\n <div class=\"container\">\n <div class=\"hero__inner\">\n\n <!-- LEFT CONTENT -->\n <div class=\"hero__content\">\n\n <!-- Badge -->\n <span class=\"hero__badge\">\n <span class=\"hero__badge-dot\" aria-hidden=\"true\">\n <span class=\"icon-cap\"><\/span>\n <\/span>\n 150K+ students already learning\n <\/span>\n\n <!-- Headline -->\n <h1 class=\"hero__title\">\n Build your digital<br>\n future with <span class=\"hero__title--gradient\">live skills.<\/span>\n <\/h1>\n\n <!-- Subheadline -->\n <p class=\"hero__subtitle\">\n Join 150K+ learners mastering in demand tech skills with 9+ expert led courses, live classes, real projects, and 1 on 1 mentorship built for the modern student.\n <\/p>\n\n <!-- CTA Buttons -->\n <div class=\"hero__cta-group\">\n <a href=\"#courses\" class=\"btn btn--primary\">\n Start Learning Free\n <span class=\"btn__icon\" aria-hidden=\"true\">\n <span class=\"icon-arrow\"><\/span>\n <\/span>\n <\/a>\n <a href=\"#live\" class=\"btn btn--ghost\">\n <span class=\"live-dot\" aria-hidden=\"true\"><\/span>\n Join Live Class\n <\/a>\n <\/div>\n\n <!-- Trust Stats -->\n <div class=\"hero__trust\" role=\"list\">\n <div class=\"trust-item\" role=\"listitem\">\n <span class=\"trust-item__value\">150K<span>+<\/span><\/span>\n <span class=\"trust-item__label\">Students<\/span>\n <\/div>\n <div class=\"trust-divider\" aria-hidden=\"true\"><\/div>\n <div class=\"trust-item\" role=\"listitem\">\n <span class=\"trust-item__value\">9<span>+<\/span><\/span>\n <span class=\"trust-item__label\">Courses<\/span>\n <\/div>\n <div class=\"trust-divider\" aria-hidden=\"true\"><\/div>\n <div class=\"trust-item\" role=\"listitem\">\n <span class=\"trust-item__value\">4.9<span>\u2605<\/span><\/span>\n <span class=\"trust-item__label\">Avg. Rating<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- RIGHT VISUAL -->\n <div class=\"hero__visual\" aria-hidden=\"true\">\n\n <!-- Floating chip top -->\n <div class=\"hero__chip hero__chip--top\">\n <div class=\"chip-icon chip-icon--green\">\n <span class=\"icon-live\"><\/span>\n <\/div>\n <div class=\"chip-text\">\n <strong>Live now<\/strong>\n <span>Frontend class<\/span>\n <\/div>\n <\/div>\n\n <!-- Main glass card -->\n <div class=\"hero-card\">\n <div class=\"hero-card__header\">\n <span class=\"hero-card__title\">Your Learning Path<\/span>\n <span class=\"hero-card__live\">Live<\/span>\n <\/div>\n\n <div class=\"progress-list\">\n <div class=\"progress-item\">\n <div class=\"progress-item__top\">\n <span class=\"progress-item__name\">Frontend Fundamentals<\/span>\n <span class=\"progress-item__pct\">100%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-bar__fill\" style=\"--fill-width: 100%; animation-delay: 0.2s;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"progress-item\">\n <div class=\"progress-item__top\">\n <span class=\"progress-item__name\">React and State Management<\/span>\n <span class=\"progress-item__pct\">78%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-bar__fill\" style=\"--fill-width: 78%; animation-delay: 0.4s;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"progress-item\">\n <div class=\"progress-item__top\">\n <span class=\"progress-item__name\">Backend and APIs<\/span>\n <span class=\"progress-item__pct\">52%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-bar__fill\" style=\"--fill-width: 52%; animation-delay: 0.6s;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"progress-item\">\n <div class=\"progress-item__top\">\n <span class=\"progress-item__name\">Cloud Deployment<\/span>\n <span class=\"progress-item__pct\">24%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-bar__fill\" style=\"--fill-width: 24%; animation-delay: 0.8s;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Floating chip bottom -->\n <div class=\"hero__chip hero__chip--bottom\">\n <div class=\"chip-icon chip-icon--violet\">\n <span class=\"icon-trophy\"><\/span>\n <\/div>\n <div class=\"chip-text\">\n <strong>Certified<\/strong>\n <span>Career ready<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92b4ece elementor-widget elementor-widget-html\" data-id=\"92b4ece\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>EduSphere Section 02 Features<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap\" rel=\"stylesheet\">\n <style>\n \/* ============================================\n RESET AND BASE\n ============================================ *\/\n *,\n *::before,\n *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n \/* Dark theme palette *\/\n --bg-dark: #04070e;\n --bg-surface: #0a1120;\n --bg-elevated: #101a2e;\n --bg-card: #0d1626;\n --border-subtle: #1c2842;\n --border-hover: #2a3a5c;\n\n \/* Accent electric blue *\/\n --accent-300: #93c5fd;\n --accent-400: #60a5fa;\n --accent-500: #3b82f6;\n --accent-600: #2563eb;\n --accent-700: #1d4ed8;\n --accent-glow: rgba(59, 130, 246, 0.4);\n\n \/* Text *\/\n --text-primary: #f1f5f9;\n --text-secondary: #94a3b8;\n --text-muted: #64748b;\n\n \/* Typography *\/\n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n\n html {\n scroll-behavior: smooth;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n font-family: var(--font-sans);\n background-color: var(--bg-dark);\n color: var(--text-primary);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n \/* ============================================\n SECTION 02 WRAPPER\n ============================================ *\/\n .section-features {\n position: relative;\n padding: clamp(80px, 12vh, 130px) 0 clamp(80px, 12vh, 130px);\n overflow: hidden;\n isolation: isolate;\n }\n\n \/* Ambient background glow *\/\n .section-features::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),\n radial-gradient(ellipse 50% 40% at 90% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),\n radial-gradient(ellipse 50% 40% at 5% 30%, rgba(96, 165, 250, 0.06) 0%, transparent 55%);\n pointer-events: none;\n z-index: -2;\n }\n\n \/* Subtle grid pattern *\/\n .section-features::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);\n background-size: 72px 72px;\n mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);\n -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 80%);\n pointer-events: none;\n z-index: -1;\n }\n\n .container {\n width: 100%;\n max-width: 1220px;\n margin: 0 auto;\n padding: 0 clamp(20px, 4vw, 40px);\n }\n\n \/* ============================================\n SECTION HEADER\n ============================================ *\/\n .section-header {\n text-align: center;\n max-width: 720px;\n margin: 0 auto clamp(52px, 8vh, 72px);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .section-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 7px 18px;\n background: rgba(37, 99, 235, 0.08);\n border: 1px solid rgba(59, 130, 246, 0.25);\n border-radius: 100px;\n font-size: 0.76rem;\n font-weight: 600;\n color: var(--accent-300);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 22px;\n backdrop-filter: blur(10px);\n }\n\n .section-eyebrow-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--accent-400);\n box-shadow: 0 0 10px var(--accent-glow);\n flex-shrink: 0;\n }\n\n .section-title {\n font-size: clamp(1.9rem, 4.5vw, 3rem);\n font-weight: 800;\n line-height: 1.1;\n letter-spacing: -0.035em;\n color: var(--text-primary);\n margin-bottom: 20px;\n }\n\n .section-title--gradient {\n background: linear-gradient(120deg, var(--accent-400) 0%, #a78bfa 50%, var(--accent-500) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n .section-subtitle {\n font-size: clamp(1rem, 1.6vw, 1.12rem);\n color: var(--text-secondary);\n line-height: 1.7;\n max-width: 580px;\n }\n\n \/* ============================================\n FEATURES GRID\n ============================================ *\/\n .features-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: clamp(20px, 2.5vw, 28px);\n }\n\n \/* ============================================\n FEATURE CARD\n ============================================ *\/\n .feature-card {\n position: relative;\n background: linear-gradient(160deg, rgba(16, 26, 46, 0.85) 0%, rgba(13, 22, 38, 0.95) 100%);\n border: 1px solid var(--border-subtle);\n border-radius: 24px;\n padding: 36px 30px 32px;\n backdrop-filter: blur(16px);\n box-shadow:\n 0 8px 24px -8px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.02) inset;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n border-color 0.3s ease,\n box-shadow 0.3s ease;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n \/* Top accent line on hover *\/\n .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--accent-500), transparent);\n opacity: 0;\n transition: opacity 0.35s ease;\n }\n\n \/* Corner glow on hover *\/\n .feature-card::after {\n content: '';\n position: absolute;\n top: -60px;\n right: -60px;\n width: 160px;\n height: 160px;\n background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);\n opacity: 0;\n transition: opacity 0.35s ease;\n pointer-events: none;\n }\n\n .feature-card:hover {\n transform: translateY(-8px);\n border-color: var(--border-hover);\n box-shadow:\n 0 24px 48px -16px rgba(0, 0, 0, 0.7),\n 0 0 0 1px rgba(59, 130, 246, 0.1) inset;\n }\n\n .feature-card:hover::before,\n .feature-card:hover::after {\n opacity: 1;\n }\n\n \/* Icon wrapper *\/\n .feature-icon {\n position: relative;\n width: 56px;\n height: 56px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 26px;\n background: rgba(59, 130, 246, 0.1);\n border: 1px solid rgba(59, 130, 246, 0.2);\n flex-shrink: 0;\n transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;\n }\n\n .feature-card:hover .feature-icon {\n transform: scale(1.08) rotate(-3deg);\n background: rgba(59, 130, 246, 0.18);\n border-color: rgba(59, 130, 246, 0.35);\n }\n\n \/* Icon color variants *\/\n .feature-icon--blue { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.22); }\n .feature-icon--violet { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.22); }\n .feature-icon--cyan { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.22); }\n .feature-icon--green { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.22); }\n .feature-icon--amber { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.22); }\n .feature-icon--pink { background: rgba(244, 114, 182, 0.1); border-color: rgba(244, 114, 182, 0.22); }\n\n \/* Card text *\/\n .feature-title {\n font-size: 1.15rem;\n font-weight: 700;\n color: var(--text-primary);\n letter-spacing: -0.015em;\n margin-bottom: 12px;\n line-height: 1.3;\n }\n\n .feature-desc {\n font-size: 0.92rem;\n color: var(--text-secondary);\n line-height: 1.65;\n flex: 1;\n }\n\n \/* ============================================\n CSS DRAWN ICONS\n ============================================ *\/\n\n \/* Icon 1: Live video \/ broadcast *\/\n .icon-broadcast {\n width: 22px;\n height: 22px;\n position: relative;\n border-radius: 50%;\n border: 2px solid var(--accent-400);\n }\n\n .icon-broadcast::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--accent-400);\n box-shadow: 0 0 10px var(--accent-glow);\n }\n\n .icon-broadcast::after {\n content: '';\n position: absolute;\n top: -6px;\n left: -6px;\n right: -6px;\n bottom: -6px;\n border-radius: 50%;\n border: 1.5px solid var(--accent-400);\n opacity: 0.35;\n animation: broadcast-pulse 2s ease-in-out infinite;\n }\n\n @keyframes broadcast-pulse {\n 0%, 100% { transform: scale(1); opacity: 0.35; }\n 50% { transform: scale(1.12); opacity: 0.6; }\n }\n\n \/* Icon 2: Certificate \/ badge *\/\n .icon-certificate {\n width: 22px;\n height: 22px;\n position: relative;\n }\n\n .icon-certificate::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 14px;\n border: 2px solid #a78bfa;\n border-radius: 3px;\n }\n\n .icon-certificate::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 6px solid #a78bfa;\n }\n\n \/* Icon 3: Mentor \/ user group *\/\n .icon-mentor {\n width: 22px;\n height: 22px;\n position: relative;\n }\n\n .icon-mentor::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 9px;\n height: 9px;\n border-radius: 50%;\n border: 2px solid #22d3ee;\n }\n\n .icon-mentor::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 16px;\n height: 8px;\n border: 2px solid #22d3ee;\n border-bottom: none;\n border-radius: 8px 8px 0 0;\n }\n\n \/* Icon 4: Projects \/ code brackets *\/\n .icon-code {\n width: 22px;\n height: 22px;\n position: relative;\n }\n\n .icon-code::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%) rotate(-45deg);\n width: 11px;\n height: 11px;\n border-left: 2px solid #4ade80;\n border-bottom: 2px solid #4ade80;\n border-radius: 2px;\n }\n\n .icon-code::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%) rotate(135deg);\n width: 11px;\n height: 11px;\n border-left: 2px solid #4ade80;\n border-bottom: 2px solid #4ade80;\n border-radius: 2px;\n }\n\n \/* Icon 5: Career \/ briefcase *\/\n .icon-career {\n width: 22px;\n height: 22px;\n position: relative;\n }\n\n .icon-career::before {\n content: '';\n position: absolute;\n top: 6px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 14px;\n border: 2px solid #fbbf24;\n border-radius: 3px;\n }\n\n .icon-career::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 50%;\n transform: translateX(-50%);\n width: 8px;\n height: 5px;\n border: 2px solid #fbbf24;\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n }\n\n \/* Icon 6: Flexible \/ clock *\/\n .icon-flexible {\n width: 22px;\n height: 22px;\n position: relative;\n border-radius: 50%;\n border: 2px solid #f472b6;\n }\n\n .icon-flexible::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform-origin: left center;\n transform: translate(-100%, -50%) rotate(-90deg);\n width: 6px;\n height: 2px;\n background: #f472b6;\n border-radius: 2px;\n }\n\n .icon-flexible::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform-origin: left center;\n transform: translate(0, -50%) rotate(30deg);\n width: 5px;\n height: 2px;\n background: #f472b6;\n border-radius: 2px;\n }\n\n \/* ============================================\n BOTTOM STATS STRIP\n ============================================ *\/\n .features-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: clamp(24px, 5vw, 64px);\n flex-wrap: wrap;\n margin-top: clamp(56px, 8vh, 80px);\n padding: 34px 40px;\n background: linear-gradient(160deg, rgba(16, 26, 46, 0.7) 0%, rgba(13, 22, 38, 0.8) 100%);\n border: 1px solid var(--border-subtle);\n border-radius: 24px;\n backdrop-filter: blur(16px);\n box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);\n }\n\n .feature-stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n text-align: center;\n }\n\n .feature-stat__value {\n font-size: clamp(1.5rem, 2.5vw, 2rem);\n font-weight: 800;\n color: var(--text-primary);\n letter-spacing: -0.025em;\n line-height: 1.1;\n font-variant-numeric: tabular-nums;\n }\n\n .feature-stat__value span {\n color: var(--accent-400);\n }\n\n .feature-stat__label {\n font-size: 0.76rem;\n color: var(--text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n }\n\n .feature-stat-divider {\n width: 1px;\n height: 40px;\n background: var(--border-subtle);\n }\n\n \/* ============================================\n RESPONSIVE TABLET\n ============================================ *\/\n @media (max-width: 1024px) {\n .features-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n \/* ============================================\n RESPONSIVE MOBILE\n ============================================ *\/\n @media (max-width: 640px) {\n .section-features {\n padding: 72px 0 72px;\n }\n\n .section-header {\n margin-bottom: 44px;\n }\n\n .section-eyebrow {\n font-size: 0.7rem;\n padding: 6px 14px;\n margin-bottom: 18px;\n }\n\n .features-grid {\n grid-template-columns: 1fr;\n gap: 18px;\n }\n\n .feature-card {\n padding: 30px 24px 26px;\n border-radius: 20px;\n }\n\n .feature-icon {\n width: 50px;\n height: 50px;\n border-radius: 14px;\n margin-bottom: 22px;\n }\n\n .feature-title {\n font-size: 1.08rem;\n }\n\n .feature-desc {\n font-size: 0.9rem;\n }\n\n \/* Stats strip mobile *\/\n .features-stats {\n gap: 20px;\n padding: 26px 20px;\n margin-top: 44px;\n border-radius: 20px;\n }\n\n .feature-stat-divider {\n display: none;\n }\n\n .feature-stat {\n min-width: 90px;\n }\n\n .feature-stat__value {\n font-size: 1.35rem;\n }\n\n .feature-stat__label {\n font-size: 0.68rem;\n }\n }\n\n \/* ============================================\n RESPONSIVE SMALL MOBILE\n ============================================ *\/\n @media (max-width: 390px) {\n .feature-card {\n padding: 26px 20px 22px;\n }\n\n .features-stats {\n gap: 16px;\n }\n\n .feature-stat__value {\n font-size: 1.2rem;\n }\n }\n\n \/* ============================================\n ACCESSIBILITY REDUCED MOTION\n ============================================ *\/\n @media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n \/* ============================================\n FOCUS STYLES\n ============================================ *\/\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--accent-400);\n outline-offset: 3px;\n border-radius: 8px;\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- ============================================\n SECTION 02: WHY CHOOSE US \/ FEATURES\n ============================================ -->\n <section class=\"section-features\" aria-label=\"Why choose EduSphere\">\n <div class=\"container\">\n\n <!-- Section Header -->\n <div class=\"section-header\">\n <span class=\"section-eyebrow\">\n <span class=\"section-eyebrow-dot\" aria-hidden=\"true\"><\/span>\n Why EduSphere\n <\/span>\n <h2 class=\"section-title\">\n Everything you need to<br>\n <span class=\"section-title--gradient\">succeed in tech.<\/span>\n <\/h2>\n <p class=\"section-subtitle\">\n We combine live instruction, hands on projects, and career support so you graduate with skills that employers actually want.\n <\/p>\n <\/div>\n\n <!-- Features Grid -->\n <div class=\"features-grid\">\n\n <!-- Card 1: Live Classes -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--blue\">\n <span class=\"icon-broadcast\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">Live Interactive Classes<\/h3>\n <p class=\"feature-desc\">\n Join real time sessions with expert instructors. Ask questions, get instant feedback, and learn alongside a community of driven students.\n <\/p>\n <\/article>\n\n <!-- Card 2: Certificates -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--violet\">\n <span class=\"icon-certificate\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">Industry Certificates<\/h3>\n <p class=\"feature-desc\">\n Earn recognized certificates on completion. Showcase your achievements on LinkedIn and prove your skills to hiring managers.\n <\/p>\n <\/article>\n\n <!-- Card 3: Mentorship -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--cyan\">\n <span class=\"icon-mentor\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">1 on 1 Mentorship<\/h3>\n <p class=\"feature-desc\">\n Get paired with an industry mentor who guides your learning, reviews your work, and helps you stay on track to your goals.\n <\/p>\n <\/article>\n\n <!-- Card 4: Real Projects -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--green\">\n <span class=\"icon-code\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">Real World Projects<\/h3>\n <p class=\"feature-desc\">\n Build a portfolio that proves your skills. Work on projects modelled after real client briefs and industry challenges.\n <\/p>\n <\/article>\n\n <!-- Card 5: Career Support -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--amber\">\n <span class=\"icon-career\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">Career Support<\/h3>\n <p class=\"feature-desc\">\n CV reviews, mock interviews, and access to our hiring partner network. We support you until you land the role you want.\n <\/p>\n <\/article>\n\n <!-- Card 6: Flexible Learning -->\n <article class=\"feature-card\">\n <div class=\"feature-icon feature-icon--pink\">\n <span class=\"icon-flexible\"><\/span>\n <\/div>\n <h3 class=\"feature-title\">Flexible Learning<\/h3>\n <p class=\"feature-desc\">\n Study at your own pace with recorded lessons and evening live sessions designed for students and working professionals.\n <\/p>\n <\/article>\n\n <\/div>\n\n <!-- Bottom Stats Strip -->\n <div class=\"features-stats\" role=\"list\">\n <div class=\"feature-stat\" role=\"listitem\">\n <span class=\"feature-stat__value\">150K<span>+<\/span><\/span>\n <span class=\"feature-stat__label\">Students<\/span>\n <\/div>\n <div class=\"feature-stat-divider\" aria-hidden=\"true\"><\/div>\n <div class=\"feature-stat\" role=\"listitem\">\n <span class=\"feature-stat__value\">9<span>+<\/span><\/span>\n <span class=\"feature-stat__label\">Courses<\/span>\n <\/div>\n <div class=\"feature-stat-divider\" aria-hidden=\"true\"><\/div>\n <div class=\"feature-stat\" role=\"listitem\">\n <span class=\"feature-stat__value\">4.9<span>\u2605<\/span><\/span>\n <span class=\"feature-stat__label\">Avg. Rating<\/span>\n <\/div>\n <div class=\"feature-stat-divider\" aria-hidden=\"true\"><\/div>\n <div class=\"feature-stat\" role=\"listitem\">\n <span class=\"feature-stat__value\">92<span>%<\/span><\/span>\n <span class=\"feature-stat__label\">Success Rate<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EduSphere Hero Section Modern Dark Theme 150K+ students already learning Build your digital future with live skills. Join 150K+ learners mastering in demand tech skills with 9+ expert led courses, live classes, real projects, and 1 on 1 mentorship built for the modern student. Start Learning Free Join Live Class 150K+ Students 9+ Courses 4.9\u2605 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taxency.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":10,"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/taxency.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/taxency.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}