Curious Learner | Confidence & Capability<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\n\n :root {\n --cl-teal: #14b8a6;\n --cl-navy: #0c4a6e;\n --cl-orange: #f97316;\n --cl-sky: #0ea5e9;\n }\n\n body, html { \n margin: 0; padding: 0; font-family: 'Outfit', sans-serif; \n background: #ffffff; overflow-x: hidden; \n }\n\n #global-hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5%;\n background: #fff;\n overflow: hidden;\n }\n\n .live-mesh {\n position: absolute;\n inset: 0;\n background-image: \n radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.04) 0px, transparent 50%),\n radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.04) 0px, transparent 50%);\n z-index: 1;\n }\n\n .hero-grid {\n display: grid;\n grid-template-columns: 1.1fr 1fr;\n gap: 50px;\n max-width: 1300px;\n width: 100%;\n z-index: 10;\n }\n\n .hero-text {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: left;\n }\n\n \/* DYNAMIC PREFIX BADGE *\/\n .prefix-badge {\n display: inline-block;\n background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);\n color: #fff;\n padding: 10px 24px;\n border-radius: 100px;\n font-weight: 800;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n margin-bottom: 25px;\n box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);\n width: fit-content;\n }\n\n \/* FIXED HORIZONTAL HEADING *\/\n h1 {\n font-size: clamp(2.8rem, 6vw, 4.8rem);\n color: var(--cl-navy);\n font-weight: 900;\n line-height: 1.1;\n margin: 0 0 30px;\n letter-spacing: -2px;\n text-transform: uppercase;\n }\n\n .line-wrap {\n display: block;\n white-space: nowrap; \/* Forces text to stay in one line *\/\n }\n\n .gradient-text {\n background: linear-gradient(90deg, var(--cl-teal), var(--cl-sky), var(--cl-teal));\n background-size: 200% auto;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: flowText 4s linear infinite;\n }\n\n @keyframes flowText { to { background-position: 200% center; } }\n\n \/* DESCRIPTION STYLING *\/\n .hero-text p {\n font-size: 1.2rem;\n color: #64748b;\n line-height: 1.7;\n max-width: 600px;\n margin-bottom: 40px;\n }\n\n .hero-text p strong {\n color: var(--cl-navy);\n font-weight: 600;\n }\n\n .btn-global {\n display: inline-flex;\n background: var(--cl-navy);\n color: #fff;\n padding: 22px 50px;\n border-radius: 100px;\n text-decoration: none;\n font-weight: 800;\n font-size: 1.1rem;\n transition: 0.3s;\n width: fit-content;\n }\n\n .btn-global:hover {\n transform: scale(1.05);\n background: #000;\n }\n\n .visual-container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .main-frame {\n width: 100%;\n max-width: 500px;\n aspect-ratio: 4\/5;\n background: #fff;\n border-radius: 50px;\n padding: 12px;\n box-shadow: 0 40px 100px rgba(0,0,0,0.06);\n transform-style: preserve-3d;\n z-index: 5;\n transition: transform 0.1s ease-out;\n }\n\n .main-frame img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 38px;\n }\n\n .floating-badge {\n position: absolute;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 16px 28px;\n border-radius: 20px;\n font-weight: 900;\n color: var(--cl-navy);\n box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n border: 1px solid #eee;\n z-index: 20;\n animation: float 4s ease-in-out infinite;\n }\n\n .b-1 { top: 10%; left: -20px; border-left: 6px solid var(--cl-teal); }\n .b-2 { bottom: 15%; right: -20px; border-right: 6px solid var(--cl-orange); animation-delay: 1s; }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n }\n\n .scroll-hint {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0.5;\n }\n\n .mouse {\n width: 24px; height: 40px;\n border: 2px solid var(--cl-navy);\n border-radius: 12px;\n position: relative;\n }\n\n .wheel {\n width: 4px; height: 8px;\n background: var(--cl-teal);\n border-radius: 2px;\n position: absolute;\n top: 6px; left: 50%;\n transform: translateX(-50%);\n animation: scroll 2s infinite;\n }\n\n @keyframes scroll {\n 0% { opacity: 1; top: 6px; }\n 100% { opacity: 0; top: 25px; }\n }\n\n @media (max-width: 991px) {\n .hero-grid { grid-template-columns: 1fr; text-align: center; }\n .hero-text { align-items: center; }\n .line-wrap { white-space: normal; }\n .floating-badge { position: relative; margin: 10px; left: 0; top: 0; }\n }\n <\/style>\n<\/head>\n<body>\n\n<section id=\"global-hero\">\n <div class=\"live-mesh\" id=\"glowCursor\"><\/div>\n\n <div class=\"hero-grid\">\n <div class=\"hero-text\">\n <div class=\"prefix-badge\">Established to Inspire<\/div>\n <h1>\n <span class=\"line-wrap\">Nurturing Curiosity,<\/span>\n <span class=\"line-wrap gradient-text\">Building Confidence<\/span>\n <\/h1>\n \n <p>\n At <strong>Curious Learner<\/strong>, we believe learning should build confidence, not pressure. Through personalised one-on-one support and clear structure, we help students strengthen foundations, close gaps, and grow in both ability and self-belief.\n <\/p>\n\n <a href=\"#explore\" class=\"btn-global\">Explore Our Mission \u2192<\/a>\n <\/div>\n\n <div class=\"visual-container\">\n <div class=\"main-frame\" id=\"tiltCard\">\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/wp-content\/uploads\/2026\/01\/Cover-NZ.jpg\" alt=\"Curious Learner Student\" title=\"About Us\">\n <\/div>\n <div class=\"floating-badge b-1\">\u2b50 Confidence<\/div>\n <div class=\"floating-badge b-2\">\ud83c\udfaf Capability<\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-hint\">\n <div class=\"mouse\"><div class=\"wheel\"><\/div><\/div>\n <\/div>\n<\/section>\n\n<script>\n const glow = document.getElementById('glowCursor');\n document.addEventListener('mousemove', (e) => {\n glow.style.background = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, rgba(20, 184, 166, 0.1) 0%, transparent 40%)`;\n });\n\n const card = document.getElementById('tiltCard');\n document.addEventListener('mousemove', (e) => {\n let xAxis = (window.innerWidth \/ 2 - e.pageX) \/ 25;\n let yAxis = (window.innerHeight \/ 2 - e.pageY) \/ 25;\n card.style.transform = `rotateY(${xAxis}deg) rotateX(${-yAxis}deg)`;\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Who We Are | Curious Learner Global<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n --cl-orange: #f97316;\r\n --cl-sky: #0ea5e9;\r\n }\r\n\r\n body, html {\r\n margin: 0; padding: 0; width: 100%;\r\n background: #ffffff; font-family: 'Outfit', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- STABILIZED ALIGNMENT WRAPPER --- *\/\r\n #cl-kinetic-hub {\r\n position: relative;\r\n padding: 40px 0; \/* Reduced padding to align with above\/below sections *\/\r\n display: flex;\r\n justify-content: center;\r\n overflow: hidden;\r\n background: #ffffff;\r\n }\r\n\r\n \/* NEW SOFT GRADIENT MESH - REPLACES SQUARES *\/\r\n .cl-mesh-layer {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 10% 10%, rgba(20, 184, 166, 0.03) 0%, transparent 40%),\r\n radial-gradient(circle at 90% 90%, rgba(14, 165, 233, 0.03) 0%, transparent 40%);\r\n z-index: 1;\r\n }\r\n\r\n .hub-content-layout {\r\n max-width: 1200px; \/* Locked width for perfect vertical alignment *\/\r\n width: 90%;\r\n display: grid;\r\n grid-template-columns: 0.8fr 1.2fr;\r\n gap: 40px;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* --- IDENTITY NODE --- *\/\r\n .hub-identity {\r\n position: sticky;\r\n top: 40px;\r\n height: fit-content;\r\n }\r\n\r\n .live-pulse-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: var(--cl-navy);\r\n color: #fff;\r\n padding: 8px 18px;\r\n border-radius: 100px;\r\n font-weight: 900;\r\n font-size: 0.7rem;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hub-identity h2 {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n line-height: 1;\r\n margin: 0 0 20px;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .hub-identity h2 span { color: var(--cl-teal); }\r\n\r\n .hub-identity p {\r\n font-size: 1.1rem;\r\n color: #64748b;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n \/* --- MATRIX GRID --- *\/\r\n .matrix-container {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .kinetic-card {\r\n background: #ffffff;\r\n border: 1px solid rgba(12, 74, 110, 0.1);\r\n padding: 35px;\r\n border-radius: 30px;\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n transform-style: preserve-3d;\r\n cursor: pointer;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* COLOURED HOVER EFFECTS *\/\r\n .kinetic-card:hover { transform: scale(1.02); }\r\n .card-01:hover { border-color: var(--cl-teal); box-shadow: 0 20px 40px rgba(20, 184, 166, 0.1); }\r\n .card-02:hover { border-color: var(--cl-orange); box-shadow: 0 20px 40px rgba(249, 115, 22, 0.1); }\r\n .card-03:hover { border-color: var(--cl-sky); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1); }\r\n .card-04:hover { border-color: var(--cl-navy); box-shadow: 0 20px 40px rgba(12, 74, 110, 0.1); }\r\n\r\n .card-index {\r\n display: block; font-weight: 900; font-size: 0.75rem;\r\n letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px;\r\n }\r\n\r\n .card-01 .card-index { color: var(--cl-teal); }\r\n .card-02 .card-index { color: var(--cl-orange); }\r\n .card-03 .card-index { color: var(--cl-sky); }\r\n .card-04 .card-index { color: var(--cl-navy); }\r\n\r\n .kinetic-card p {\r\n font-size: 1.05rem; color: #475569; line-height: 1.5; margin: 0;\r\n pointer-events: none;\r\n }\r\n .kinetic-card p strong { color: var(--cl-navy); }\r\n\r\n .wide-card { grid-column: span 2; background: var(--cl-navy); border: none; }\r\n .wide-card p { color: #cbd5e1; }\r\n .wide-card p strong { color: var(--cl-teal); }\r\n\r\n @media (max-width: 900px) {\r\n .hub-content-layout { grid-template-columns: 1fr; padding-bottom: 40px; }\r\n .matrix-container { grid-template-columns: 1fr; }\r\n .wide-card { grid-column: span 1; }\r\n .hub-identity { position: relative; top: 0; text-align: center; margin-bottom: 30px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-kinetic-hub\">\r\n <div class=\"cl-mesh-layer\"><\/div>\r\n\r\n <div class=\"hub-content-layout\">\r\n <div class=\"hub-identity\">\r\n <div class=\"live-pulse-badge\">Node Status: Active<\/div>\r\n <h2>Who We<br><span>Are<\/span><\/h2>\r\n <p>Curious Learner is a surgical EdTech platform engineered to bridge the gap between curiosity and capability.<\/p>\r\n <\/div>\r\n\r\n <div class=\"matrix-container\">\r\n <div class=\"kinetic-card card-01 tilt-target\">\r\n <span class=\"card-index\">01 \/ Global Reach<\/span>\r\n <p>We help children across <strong>Australia and New Zealand<\/strong> excel in academics.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-02 tilt-target\">\r\n <span class=\"card-index\">02 \/ Precision<\/span>\r\n <p>Personalised pathways for <strong>Selective Admissions, ICAS, and NAPLAN<\/strong>.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card wide-card tilt-target\">\r\n <span class=\"card-index\" style=\"color: var(--cl-teal);\">03 \/ Philosophy<\/span>\r\n <p>A true learning partner\u2014nurturing <strong>academic excellence and critical thinking<\/strong> to thrive in exams and life.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-03 tilt-target\">\r\n <span class=\"card-index\">04 \/ Growth<\/span>\r\n <p>Building <strong>confidence and self-belief<\/strong> through structured professional support.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-04 tilt-target\">\r\n <span class=\"card-index\">05 \/ Innovation<\/span>\r\n <p>Nurturing the next generation of thinkers through <strong>curiosity-driven mechanics<\/strong>.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const targets = document.querySelectorAll('.tilt-target');\r\n targets.forEach(target => {\r\n target.addEventListener('mousemove', (e) => {\r\n const rect = target.getBoundingClientRect();\r\n const x = (e.clientX - rect.left) - (rect.width \/ 2);\r\n const y = (e.clientY - rect.top) - (rect.height \/ 2);\r\n target.style.transform = `perspective(1000px) rotateX(${-y \/ 20}deg) rotateY(${x \/ 20}deg) scale3d(1.02, 1.02, 1.02)`;\r\n });\r\n target.addEventListener('mouseleave', () => {\r\n target.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n --cl-purple: #8b5cf6;\r\n --cl-orange: #f97316;\r\n --border-soft: rgba(12, 74, 110, 0.08);\r\n }\r\n\r\n \/* --- STABILIZED ALIGNMENT WRAPPER --- *\/\r\n #cl-chromatic-vision {\r\n position: relative;\r\n padding: 40px 0; \/* Reduced padding for seamless vertical alignment *\/\r\n background: #ffffff;\r\n font-family: 'Outfit', sans-serif;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n \/* DYNAMIC MESH BACKGROUND - ELIMINATES EMPTY FEEL *\/\r\n .vision-mesh {\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(20, 184, 166, 0.05) 0%, transparent 60%);\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .vision-container {\r\n max-width: 1200px; \/* Locked to align with 'Who We Are' section *\/\r\n width: 90%;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* --- CENTERED HEADER --- *\/\r\n .vision-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .vision-header h2 {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n margin: 0;\r\n text-transform: uppercase;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .vision-header h2 span { color: var(--cl-teal); }\r\n\r\n .vision-accent {\r\n width: 80px; height: 4px;\r\n background: var(--cl-orange);\r\n margin: 15px auto;\r\n border-radius: 100px;\r\n }\r\n\r\n \/* --- 3-COLUMN CHROMATIC GRID --- *\/\r\n .vision-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n perspective: 1200px;\r\n }\r\n\r\n .vision-card {\r\n background: #ffffff;\r\n border: 1px solid var(--border-soft);\r\n padding: 50px 35px;\r\n border-radius: 40px;\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n transform-style: preserve-3d;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* INDIVIDUAL COLORED HOVER EFFECTS *\/\r\n .v-card-teal:hover { \r\n border-color: var(--cl-teal); \r\n box-shadow: 0 30px 60px rgba(20, 184, 166, 0.15); \r\n }\r\n .v-card-purple:hover { \r\n border-color: var(--cl-purple); \r\n box-shadow: 0 30px 60px rgba(139, 92, 246, 0.15); \r\n }\r\n .v-card-orange:hover { \r\n border-color: var(--cl-orange); \r\n box-shadow: 0 30px 60px rgba(249, 115, 22, 0.15); \r\n }\r\n\r\n \/* ICON ANIMATIONS *\/\r\n .v-icon-wrap {\r\n font-size: 3.5rem;\r\n margin-bottom: 25px;\r\n display: inline-block;\r\n transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .vision-card:hover .v-icon-wrap {\r\n transform: translateZ(50px) scale(1.1);\r\n }\r\n\r\n .vision-card h3 {\r\n font-size: 1.6rem;\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n margin: 0 0 15px;\r\n line-height: 1.2;\r\n }\r\n\r\n .vision-card p {\r\n font-size: 1.1rem;\r\n color: #64748b;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n .vision-card p strong { color: var(--cl-navy); }\r\n\r\n \/* --- RESPONSIVE --- *\/\r\n @media (max-width: 991px) {\r\n .vision-grid { grid-template-columns: 1fr; }\r\n .vision-card { padding: 40px 30px; }\r\n #cl-chromatic-vision { padding: 60px 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-chromatic-vision\">\r\n <div class=\"vision-mesh\" id=\"vMesh\"><\/div>\r\n\r\n <div class=\"vision-container\">\r\n \r\n <div class=\"vision-header\">\r\n <h2>Our <span>Vision<\/span><\/h2>\r\n <div class=\"vision-accent\"><\/div>\r\n <p style=\"color: #64748b; font-size: 1.15rem; max-width: 600px; margin: 0 auto;\">\r\n To set a new standard in personalised education by combining structured learning, measurable progress, and confidence-driven growth.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-grid\">\r\n \r\n <div class=\"vision-card v-card-teal kinetic-node\">\r\n <div class=\"v-icon-wrap\">\ud83d\ude80<\/div>\r\n <h3>Nurturing Future Leaders<\/h3>\r\n <p>Developing <strong>lifelong learners<\/strong> equipped for today’s opportunities and tomorrow’s leadership.<\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-card v-card-purple kinetic-node\">\r\n <div class=\"v-icon-wrap\">\u2728<\/div>\r\n <h3>Curiosity to Confidence<\/h3>\r\n <p>Engineering a path where a child’s <strong>curiosity<\/strong> transforms into absolute confidence.<\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-card v-card-orange kinetic-node\">\r\n <div class=\"v-icon-wrap\">\ud83c\udf93<\/div>\r\n <h3>Global Accessibility<\/h3>\r\n <p>Providing <strong>personalised learning<\/strong> for ICAS, NAPLAN, OC, and scholarships globally.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ --- 1. LIVE MESH BACKGROUND ---\r\n const mesh = document.getElementById('vMesh');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) * 100;\r\n const y = (e.clientY \/ window.innerHeight) * 100;\r\n mesh.style.setProperty('--x', `${x}%`);\r\n mesh.style.setProperty('--y', `${y}%`);\r\n });\r\n\r\n \/\/ --- 2. 3D KINETIC INTERACTION ---\r\n const nodes = document.querySelectorAll('.kinetic-node');\r\n nodes.forEach(node => {\r\n node.addEventListener('mousemove', (e) => {\r\n const rect = node.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const centerX = rect.width \/ 2;\r\n const centerY = rect.height \/ 2;\r\n \r\n const rotateX = (y - centerY) \/ 10;\r\n const rotateY = (centerX - x) \/ 10;\r\n\r\n node.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.03, 1.03, 1.03)`;\r\n });\r\n\r\n node.addEventListener('mouseleave', () => {\r\n node.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-purple: #6B1AB7;\r\n --cl-orange: #f97316;\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n }\r\n\r\n \/* --- STABILIZED LAYOUT --- *\/\r\n #cl-mission-stable {\r\n position: relative;\r\n padding: 40px 0;\r\n background: #ffffff;\r\n font-family: 'Outfit', sans-serif;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .mission-glow-layer {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(107, 26, 183, 0.04) 0%, transparent 60%);\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .mission-wrapper {\r\n max-width: 1200px;\r\n width: 90%;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n position: relative;\r\n z-index: 10;\r\n align-items: center;\r\n }\r\n\r\n \/* --- LEFT SIDE: HIGH-CONTRAST HEADING (FIXED) --- *\/\r\n .mission-title-area {\r\n background: var(--cl-navy);\r\n padding: 60px;\r\n border-radius: 40px;\r\n color: white;\r\n box-shadow: 0 20px 50px rgba(12, 74, 110, 0.2);\r\n }\r\n\r\n .mission-prefix {\r\n font-weight: 900;\r\n letter-spacing: 4px;\r\n color: var(--cl-teal);\r\n font-size: 0.8rem;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n display: block;\r\n }\r\n\r\n \/* Fixed Heading Visibility *\/\r\n .mission-title-area h2 {\r\n font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n line-height: 0.95;\r\n margin: 0;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n }\r\n\r\n .line-1 {\r\n color: #ffffff; \/* Forced white for permanent visibility *\/\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .line-2 {\r\n color: var(--cl-orange);\r\n display: block;\r\n background: linear-gradient(90deg, var(--cl-orange), #ffcc00);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* --- RIGHT SIDE: KINETIC CONTENT & BADGES --- *\/\r\n .mission-info-area {\r\n background: #ffffff;\r\n border: 1px solid rgba(12, 74, 110, 0.1);\r\n padding: 50px;\r\n border-radius: 40px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.02);\r\n }\r\n\r\n .mission-description {\r\n font-size: 1.25rem;\r\n color: #475569;\r\n line-height: 1.7;\r\n margin: 0 0 35px 0;\r\n }\r\n\r\n .mission-description strong {\r\n color: var(--cl-navy);\r\n border-bottom: 2px solid var(--cl-teal);\r\n }\r\n\r\n \/* --- PERMANENTLY COLOURED LIVE BADGES --- *\/\r\n .mission-badges {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .m-badge {\r\n padding: 12px 24px;\r\n border-radius: 100px;\r\n font-size: 0.85rem;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n border: 2px solid transparent;\r\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\r\n cursor: pointer;\r\n background: rgba(248, 250, 252, 0.8); \r\n }\r\n\r\n .mb-purple { color: var(--cl-purple); border-color: rgba(107, 26, 183, 0.2); }\r\n .mb-purple:hover { background: var(--cl-purple); color: #fff !important; border-color: var(--cl-purple); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(107, 26, 183, 0.3); }\r\n\r\n .mb-orange { color: var(--cl-orange); border-color: rgba(249, 115, 22, 0.2); }\r\n .mb-orange:hover { background: var(--cl-orange); color: #fff !important; border-color: var(--cl-orange); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); }\r\n\r\n .mb-teal { color: var(--cl-teal); border-color: rgba(20, 184, 166, 0.2); }\r\n .mb-teal:hover { background: var(--cl-teal); color: #fff !important; border-color: var(--cl-teal); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3); }\r\n\r\n .mb-navy { color: var(--cl-navy); border-color: rgba(12, 74, 110, 0.2); }\r\n .mb-navy:hover { background: var(--cl-navy); color: #fff !important; border-color: var(--cl-navy); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(12, 74, 110, 0.3); }\r\n\r\n @media (max-width: 1024px) {\r\n .mission-wrapper { grid-template-columns: 1fr; }\r\n .mission-title-area { padding: 40px 25px; text-align: center; }\r\n .mission-badges { justify-content: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-mission-stable\">\r\n <div class=\"mission-glow-layer\" id=\"glowMesh\"><\/div>\r\n\r\n <div class=\"mission-wrapper\">\r\n <div class=\"mission-title-area\">\r\n <span class=\"mission-prefix\">OUR CORE MISSION<\/span>\r\n <h2>\r\n <span class=\"line-1\">Your Child’s<\/span>\r\n <span class=\"line-2\">Learning Partner<\/span>\r\n <\/h2>\r\n <div style=\"width: 60px; height: 4px; background: var(--cl-teal); margin-top: 30px; border-radius: 10px;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mission-info-area\">\r\n <p class=\"mission-description\">\r\n At <strong>Curious Learner<\/strong>, we are not just mentors; we are your child’s <strong>learning partner<\/strong>. Through personalised focused programs strategically aligned with <strong>competitive examinations<\/strong>, we cultivate confidence and future-ready minds.\r\n <\/p>\r\n\r\n <div class=\"mission-badges\">\r\n <div class=\"m-badge mb-purple\">Personalised<\/div>\r\n <div class=\"m-badge mb-orange\">Expert Guidance<\/div>\r\n <div class=\"m-badge mb-teal\">Future-Ready<\/div>\r\n <div class=\"m-badge mb-navy\">Confidence<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const glow = document.getElementById('glowMesh');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) * 100;\r\n const y = (e.clientY \/ window.innerHeight) * 100;\r\n glow.style.setProperty('--mx', `${x}%`);\r\n glow.style.setProperty('--my', `${y}%`);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<div id=\"cl-master-final-sections\">\r\n\r\n <section id=\"cl-founder-spotlight\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-founder-flex-container\">\r\n \r\n <div class=\"cl-founder-img-side\">\r\n <div class=\"cl-frame-container\">\r\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/wp-content\/uploads\/2025\/09\/nitasha-Rajvanshi-1.png\" alt=\"Nitasha Rajvanshi\" title=\"About Us\">\r\n <div class=\"cl-founder-badge-mini\">Founder & Mentor<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cl-founder-text-side\">\r\n <h4 class=\"cl-sub-label\">ABOUT THE FOUNDER<\/h4>\r\n <h2 class=\"cl-founder-name\">Nitasha <span class=\"text-teal\">Rajvanshi<\/span><\/h2>\r\n <p class=\"cl-founder-bio\">Nitasha founded <strong>Curious Learner<\/strong> with a vision to ignite curiosity in every child and build lifelong confidence. Dedicated to helping students excel in competitive exams through personalised guidance.<\/p>\r\n \r\n <div class=\"cl-quote-box-mini\">\r\n <p>\u201cEvery child is unique, with their own strengths and dreams. My mission is to nurture that uniqueness \u2014 to go beyond textbooks and spark curiosity that lasts a lifetime.\u201d<\/p>\r\n <cite>\u2014 Nitasha Rajvanshi<\/cite>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"cl-excellence-grid\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-grid-header\">\r\n <h2 class=\"cl-grid-title\">Guided by <span class=\"text-teal\">Excellence<\/span><\/h2>\r\n <div class=\"cl-accent-line-center\"><\/div>\r\n <p class=\"cl-grid-subtitle\">Our vision is simple: to nurture lifelong learners ready for tomorrow.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-cards-container\">\r\n <div class=\"cl-info-card v-teal\">\r\n <div class=\"cl-card-icon\">\ud83d\udc51<\/div>\r\n <h3>Expert Mentors<\/h3>\r\n <p>Learn from passionate mentors who know how to prepare students for competitive exams and beyond.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-info-card v-orange\">\r\n <div class=\"cl-card-icon\">\u23f0<\/div>\r\n <h3>Learning for You<\/h3>\r\n <p>Flexible, personalised pathways that let every child grow at their own pace with confidence.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-info-card v-purple\">\r\n <div class=\"cl-card-icon\">\ud83d\udcd6<\/div>\r\n <h3>Recognised Success<\/h3>\r\n <p>Earn certificates and milestones that reflect progress and build student pride.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* --- STABILIZED ALIGNMENT & PADDING --- *\/\r\n#cl-founder-spotlight, \r\n#cl-excellence-grid { \r\n padding: 40px 0; \/* Reduced to align with Mission\/Vision sections *\/\r\n background: #ffffff;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.cl-about-wrapper {\r\n max-width: 1200px; \/* Locked for perfect vertical alignment *\/\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n}\r\n\r\n\/* --- SUBTLE LIVE ANIMATIONS --- *\/\r\n@keyframes floatSoft {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n}\r\n\r\n.cl-frame-container img,\r\n.cl-info-card {\r\n transition: all 0.4s ease-in-out;\r\n}\r\n\r\n\/* Info Cards Hover: Lift and Glow only on hover *\/\r\n.cl-info-card:hover {\r\n transform: translateY(-10px);\r\n border-color: #14b8a6;\r\n box-shadow: 0 20px 40px rgba(12, 74, 110, 0.08);\r\n}\r\n\r\n\/* Founder Badge subtle pulse *\/\r\n.cl-founder-badge-mini {\r\n animation: floatSoft 4s ease-in-out infinite;\r\n}\r\n\r\n\/* --- FOUNDER SIDE LAYOUT --- *\/\r\n.cl-founder-flex-container { \r\n display: flex; \r\n align-items: center; \r\n gap: 60px; \r\n}\r\n\r\n.cl-founder-img-side { flex: 0 0 340px; position: relative; }\r\n.cl-frame-container img { width: 100%; border-radius: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }\r\n.cl-founder-badge-mini { \r\n position: absolute; bottom: 20px; right: -10px; \r\n background: #6B1AB7; color: #fff; padding: 10px 20px; \r\n border-radius: 15px; font-weight: 900; font-size: 0.7rem; \r\n box-shadow: 0 10px 20px rgba(107, 26, 183, 0.2); \r\n}\r\n\r\n.cl-sub-label { letter-spacing: 4px; color: #6B1AB7; font-weight: 900; font-size: 0.75rem; margin-bottom: 10px; }\r\n.cl-founder-name { font-size: 3rem; color: #0c4a6e; font-weight: 900; margin: 10px 0 20px; letter-spacing: -1px; }\r\n.cl-quote-box-mini { \r\n background: #f8fafc; padding: 35px; border-radius: 30px; \r\n border-left: 6px solid #14b8a6; font-style: italic; \r\n margin-top: 30px;\r\n}\r\n.cl-quote-box-mini cite { display: block; margin-top: 15px; font-style: normal; font-weight: 700; color: #14b8a6; }\r\n\r\n\/* --- EXCELLENCE GRID LAYOUT --- *\/\r\n.cl-grid-header { text-align: center; margin-bottom: 50px; }\r\n.cl-grid-title { font-size: 3rem; color: #0c4a6e; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: -2px; }\r\n.cl-accent-line-center { width: 80px; height: 5px; background: #f97316; margin: 15px auto; border-radius: 10px; }\r\n.cl-grid-subtitle { font-size: 1.1rem; color: #64748b; }\r\n\r\n.cl-cards-container { \r\n display: grid; \r\n grid-template-columns: repeat(3, 1fr); \r\n gap: 25px; \r\n}\r\n\r\n.cl-info-card { \r\n padding: 45px 30px; border-radius: 40px; \r\n background: #fff; border: 1px solid rgba(12, 74, 110, 0.08); \r\n text-align: center; \r\n}\r\n\r\n\/* Color Indicators *\/\r\n.v-teal { border-top: 6px solid #14b8a6; }\r\n.v-orange { border-top: 6px solid #f97316; }\r\n.v-purple { border-top: 6px solid #6B1AB7; }\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media (max-width: 991px) {\r\n .cl-founder-flex-container { flex-direction: column; text-align: center; }\r\n .cl-cards-container { grid-template-columns: 1fr; }\r\n .cl-founder-img-side { flex: 0 0 auto; max-width: 300px; margin-bottom: 30px; }\r\n}\r\n<\/style>\n\n\n\n<section id=\"cl-milestones-final\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-milestone-grid\">\r\n \r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle teal-bg\">\ud83c\udf93<\/div>\r\n <div class=\"cl-milestone-num text-teal\" data-target=\"500\">0<\/div>\r\n <p class=\"cl-milestone-label\">Students Guided<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle orange-bg\">\ud83d\udcc8<\/div>\r\n <div class=\"cl-milestone-num text-orange\" data-target=\"98\">0<\/div>\r\n <p class=\"cl-milestone-label\">Success Rate %<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle purple-bg\">\ud83d\udc51<\/div>\r\n <div class=\"cl-milestone-num text-purple\" data-target=\"15\">0<\/div>\r\n <p class=\"cl-milestone-label\">Expert Mentors<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle blue-bg\">\u23f3<\/div>\r\n <div class=\"cl-milestone-num text-blue\" data-target=\"1200\">0<\/div>\r\n <p class=\"cl-milestone-label\">Hours Coaching<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- MILESTONE STYLING --- *\/\r\n#cl-milestones-final { \r\n padding: 100px 5%; \r\n background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%); \r\n}\r\n\r\n.cl-milestone-grid { \r\n display: grid; \r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); \r\n gap: 30px; \r\n}\r\n\r\n.cl-milestone-card { \r\n background: #ffffff; \r\n padding: 50px 25px; \r\n border-radius: 40px; \r\n text-align: center; \r\n box-shadow: 0 15px 40px rgba(0,0,0,0.04); \r\n border: 1px solid #f1f5f9;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.cl-milestone-card:hover { transform: translateY(-10px); }\r\n\r\n\/* Icon Backgrounds *\/\r\n.cl-icon-circle { \r\n width: 65px; height: 65px; border-radius: 20px; \r\n display: flex; align-items: center; justify-content: center; \r\n margin: 0 auto 25px; font-size: 1.8rem; \r\n}\r\n.teal-bg { background: #e6fffa; color: #14b8a6; }\r\n.orange-bg { background: #fff7ed; color: #f97316; }\r\n.purple-bg { background: #f5f3ff; color: #6B1AB7; }\r\n.blue-bg { background: #f0f9ff; color: #0ea5e9; }\r\n\r\n\/* Numbers *\/\r\n.cl-milestone-num { font-size: 4rem; font-weight: 900; line-height: 1; margin-bottom: 12px; }\r\n.cl-milestone-num::after { content: '+'; font-size: 2rem; vertical-align: top; margin-left: 2px; }\r\n\/* Special case for percentage *\/\r\n.cl-milestone-card:nth-child(2) .cl-milestone-num::after { content: '%'; }\r\n\r\n.cl-milestone-label { \r\n font-size: 1rem; font-weight: 800; color: #0c4a6e; \r\n text-transform: uppercase; letter-spacing: 1px; \r\n}\r\n\r\n\/* Color Classes *\/\r\n.text-teal { color: #14b8a6; }\r\n.text-orange { color: #f97316; }\r\n.text-purple { color: #6B1AB7; }\r\n.text-blue { color: #0ea5e9; }\r\n\r\n@media (max-width: 768px) {\r\n .cl-milestone-num { font-size: 3rem; }\r\n .cl-milestone-card { padding: 40px 20px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* --- DYNAMIC COUNTER SCRIPT --- *\/\r\nconst startAcademyCounters = () => {\r\n const counters = document.querySelectorAll('.cl-milestone-num');\r\n counters.forEach(counter => {\r\n const update = () => {\r\n const target = +counter.getAttribute('data-target');\r\n const count = +counter.innerText;\r\n const speed = 150; \r\n const inc = target \/ speed;\r\n\r\n if (count < target) {\r\n counter.innerText = Math.ceil(count + inc);\r\n setTimeout(update, 20);\r\n } else {\r\n counter.innerText = target;\r\n }\r\n };\r\n update();\r\n });\r\n};\r\n\r\n\/\/ Trigger only when user scrolls to section\r\nconst milestoneObserver = new IntersectionObserver((entries) => {\r\n if(entries[0].isIntersecting) {\r\n startAcademyCounters();\r\n milestoneObserver.disconnect();\r\n }\r\n}, { threshold: 0.5 });\r\n\r\nmilestoneObserver.observe(document.querySelector('#cl-milestones-final'));\r\n<\/script>\n\n\n\n<!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 <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\n\n :root {\n --cl-teal: #14b8a6;\n --cl-navy-dark: #020617;\n --cl-orange: #f97316;\n --cl-brand-blue: #3b82f6;\n --cl-white: #ffffff;\n --cl-text-muted: #94a3b8;\n }\n\n #cl-final-academic-footer {\n background: var(--cl-navy-dark);\n color: var(--cl-white);\n font-family: 'Outfit', sans-serif;\n padding: 60px 0 30px;\n border-top: 1px solid rgba(20, 184, 166, 0.2);\n }\n\n .footer-wrapper {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr;\n gap: 60px;\n }\n\n \/* --- LOGO & BRANDING --- *\/\n .brand-zone img {\n max-width: 250px;\n height: auto;\n margin-bottom: 25px;\n display: block;\n background: #ffffff; \n padding: 12px;\n border-radius: 16px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .brand-tagline {\n font-size: 0.95rem;\n line-height: 1.7;\n color: var(--cl-text-muted);\n margin-bottom: 30px;\n }\n\n \/* SOCIAL ICONS (ORIGINAL COLORS ON HOVER) *\/\n .social-cluster {\n display: flex;\n gap: 15px;\n }\n\n .s-icon {\n width: 42px; height: 42px;\n background: rgba(255, 255, 255, 0.05);\n color: var(--cl-white);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n font-size: 1.2rem;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n \/* Brand Color Physics *\/\n .s-fb:hover { background: #1877F2; border-color: #1877F2; transform: translateY(-8px); }\n .s-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; transform: translateY(-8px); }\n .s-ln:hover { background: #0077b5; border-color: #0077b5; transform: translateY(-8px); }\n .s-x:hover { background: #ffffff; color: #000000; border-color: #ffffff; transform: translateY(-8px); }\n\n \/* --- QUICK ACCESS (COLOURED HOVER) --- *\/\n .nav-node h3 {\n color: var(--cl-teal);\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 30px;\n font-weight: 900;\n }\n\n .nav-node ul { list-style: none; padding: 0; margin: 0; }\n .nav-node li { margin-bottom: 15px; }\n .nav-node a {\n color: var(--cl-text-muted);\n text-decoration: none;\n font-size: 0.95rem;\n transition: 0.3s;\n display: inline-block;\n }\n\n \/* Multi-Color Link Hover *\/\n .nav-node li:nth-child(odd) a:hover { color: var(--cl-teal); transform: translateX(5px); }\n .nav-node li:nth-child(even) a:hover { color: var(--cl-orange); transform: translateX(5px); }\n\n \/* --- CONTACT & ADDRESS --- *\/\n .contact-stack { margin-bottom: 25px; }\n .contact-stack strong {\n display: block;\n color: var(--cl-teal);\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 5px;\n }\n .contact-stack p, .contact-stack a {\n color: var(--cl-text-muted);\n text-decoration: none;\n font-size: 0.95rem;\n margin: 0;\n transition: 0.3s;\n }\n .contact-stack a:hover { color: var(--cl-white); }\n\n \/* --- LEGAL BAR --- *\/\n .legal-row {\n max-width: 1200px;\n margin: 50px auto 0;\n padding: 30px 20px 0;\n border-top: 1px solid rgba(255, 255, 255, 0.05);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .legal-copy { font-size: 0.85rem; color: var(--cl-white); }\n \n .legal-power { font-size: 0.9rem; font-weight: 900; color: var(--cl-white); }\n .brand-orange { color: var(--cl-orange); }\n .brand-blue { color: var(--cl-brand-blue); }\n\n @media (max-width: 991px) {\n .footer-wrapper { grid-template-columns: 1fr; text-align: center; gap: 40px; }\n .social-cluster { justify-content: center; }\n .legal-row { flex-direction: column; gap: 15px; text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n\n<footer id=\"cl-final-academic-footer\">\n <div class=\"footer-wrapper\">\n \n <div class=\"brand-zone\">\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/newzealand\/wp-content\/uploads\/sites\/3\/2026\/01\/cropped-Logo-Color-Updated.png\" alt=\"Curious Learner Academy\" title=\"About Us\">\n <p class=\"brand-tagline\">\n Empowering students across Aotearoa New Zealand with structured, flexible, and tailored learning that bridges gaps, builds confidence, and ensures clear, measurable growth.\n <\/p>\n <div class=\"social-cluster\">\n <a href=\"#\" class=\"s-icon s-fb\" title=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-ig\" title=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-ln\" title=\"LinkedIn\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-x\" title=\"X (Twitter)\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <div class=\"nav-node\">\n <h3>Quick Access<\/h3>\n <ul>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/faq\/\">Help & FAQs<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/terms-conditions\/\">Terms & Conditions<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/refund-cancellation\/\">Refund & Cancellation<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/privacy-policy\/\">Privacy Policy<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/data-breachresponse-policy-cookies-policy\/\">Breach & Cookies<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/child-protection-online-safety\/\">Child Safety Hub<\/a><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"nav-node\">\n <h3>Support Node<\/h3>\n <div class=\"contact-stack\">\n <strong>Address<\/strong>\n <p>Global Online Learning Platform<\/p>\n <\/div>\n <div class=\"contact-stack\">\n <strong>WhatsApp Support<\/strong>\n <a href=\"https:\/\/wa.me\/919251230015\">+91 92512 30015<\/a>\n <\/div>\n <div class=\"contact-stack\">\n <strong>Official Email<\/strong>\n <a href=\"mailto:support@curiouslearneracademy.com\">support@curiouslearneracademy.com<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"legal-row\">\n <div class=\"legal-copy\">\n Copyright \u00a9 2025 Curious Learner New Zealand\n <\/div>\n <div class=\"legal-power\">\n Powered by <span class=\"brand-orange\">Curious<\/span> <span class=\"brand-blue\">Learner<\/span>\n <\/div>\n <\/div>\n<\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Curious Learner | Confidence & Capability Established to Inspire Nurturing Curiosity, Building Confidence At Curious Learner, we believe learning should […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-637","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"curiouslearneroffice@gmail.com","author_link":"https:\/\/curiouslearneracademy.com\/newzealand\/author\/curiouslearnerofficegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Curious Learner | Confidence & Capability Established to Inspire Nurturing Curiosity, Building Confidence At Curious Learner, we believe learning should […]","_links":{"self":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":2,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/media?parent=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":637,"date":"2026-03-03T06:28:12","date_gmt":"2026-03-03T06:28:12","guid":{"rendered":"https:\/\/curiouslearneracademy.com\/newzealand\/?page_id=637"},"modified":"2026-06-03T14:23:51","modified_gmt":"2026-06-03T14:23:51","slug":"about-us","status":"publish","type":"page","link":"https:\/\/curiouslearneracademy.com\/newzealand\/about-us\/","title":{"rendered":"About Us"},"content":{"rendered":"\n\n\n\n \n \n Curious Learner | Confidence & Capability<\/title>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\n\n :root {\n --cl-teal: #14b8a6;\n --cl-navy: #0c4a6e;\n --cl-orange: #f97316;\n --cl-sky: #0ea5e9;\n }\n\n body, html { \n margin: 0; padding: 0; font-family: 'Outfit', sans-serif; \n background: #ffffff; overflow-x: hidden; \n }\n\n #global-hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5%;\n background: #fff;\n overflow: hidden;\n }\n\n .live-mesh {\n position: absolute;\n inset: 0;\n background-image: \n radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.04) 0px, transparent 50%),\n radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.04) 0px, transparent 50%);\n z-index: 1;\n }\n\n .hero-grid {\n display: grid;\n grid-template-columns: 1.1fr 1fr;\n gap: 50px;\n max-width: 1300px;\n width: 100%;\n z-index: 10;\n }\n\n .hero-text {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: left;\n }\n\n \/* DYNAMIC PREFIX BADGE *\/\n .prefix-badge {\n display: inline-block;\n background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);\n color: #fff;\n padding: 10px 24px;\n border-radius: 100px;\n font-weight: 800;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n margin-bottom: 25px;\n box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);\n width: fit-content;\n }\n\n \/* FIXED HORIZONTAL HEADING *\/\n h1 {\n font-size: clamp(2.8rem, 6vw, 4.8rem);\n color: var(--cl-navy);\n font-weight: 900;\n line-height: 1.1;\n margin: 0 0 30px;\n letter-spacing: -2px;\n text-transform: uppercase;\n }\n\n .line-wrap {\n display: block;\n white-space: nowrap; \/* Forces text to stay in one line *\/\n }\n\n .gradient-text {\n background: linear-gradient(90deg, var(--cl-teal), var(--cl-sky), var(--cl-teal));\n background-size: 200% auto;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: flowText 4s linear infinite;\n }\n\n @keyframes flowText { to { background-position: 200% center; } }\n\n \/* DESCRIPTION STYLING *\/\n .hero-text p {\n font-size: 1.2rem;\n color: #64748b;\n line-height: 1.7;\n max-width: 600px;\n margin-bottom: 40px;\n }\n\n .hero-text p strong {\n color: var(--cl-navy);\n font-weight: 600;\n }\n\n .btn-global {\n display: inline-flex;\n background: var(--cl-navy);\n color: #fff;\n padding: 22px 50px;\n border-radius: 100px;\n text-decoration: none;\n font-weight: 800;\n font-size: 1.1rem;\n transition: 0.3s;\n width: fit-content;\n }\n\n .btn-global:hover {\n transform: scale(1.05);\n background: #000;\n }\n\n .visual-container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .main-frame {\n width: 100%;\n max-width: 500px;\n aspect-ratio: 4\/5;\n background: #fff;\n border-radius: 50px;\n padding: 12px;\n box-shadow: 0 40px 100px rgba(0,0,0,0.06);\n transform-style: preserve-3d;\n z-index: 5;\n transition: transform 0.1s ease-out;\n }\n\n .main-frame img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 38px;\n }\n\n .floating-badge {\n position: absolute;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 16px 28px;\n border-radius: 20px;\n font-weight: 900;\n color: var(--cl-navy);\n box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n border: 1px solid #eee;\n z-index: 20;\n animation: float 4s ease-in-out infinite;\n }\n\n .b-1 { top: 10%; left: -20px; border-left: 6px solid var(--cl-teal); }\n .b-2 { bottom: 15%; right: -20px; border-right: 6px solid var(--cl-orange); animation-delay: 1s; }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n }\n\n .scroll-hint {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n opacity: 0.5;\n }\n\n .mouse {\n width: 24px; height: 40px;\n border: 2px solid var(--cl-navy);\n border-radius: 12px;\n position: relative;\n }\n\n .wheel {\n width: 4px; height: 8px;\n background: var(--cl-teal);\n border-radius: 2px;\n position: absolute;\n top: 6px; left: 50%;\n transform: translateX(-50%);\n animation: scroll 2s infinite;\n }\n\n @keyframes scroll {\n 0% { opacity: 1; top: 6px; }\n 100% { opacity: 0; top: 25px; }\n }\n\n @media (max-width: 991px) {\n .hero-grid { grid-template-columns: 1fr; text-align: center; }\n .hero-text { align-items: center; }\n .line-wrap { white-space: normal; }\n .floating-badge { position: relative; margin: 10px; left: 0; top: 0; }\n }\n <\/style>\n<\/head>\n<body>\n\n<section id=\"global-hero\">\n <div class=\"live-mesh\" id=\"glowCursor\"><\/div>\n\n <div class=\"hero-grid\">\n <div class=\"hero-text\">\n <div class=\"prefix-badge\">Established to Inspire<\/div>\n <h1>\n <span class=\"line-wrap\">Nurturing Curiosity,<\/span>\n <span class=\"line-wrap gradient-text\">Building Confidence<\/span>\n <\/h1>\n \n <p>\n At <strong>Curious Learner<\/strong>, we believe learning should build confidence, not pressure. Through personalised one-on-one support and clear structure, we help students strengthen foundations, close gaps, and grow in both ability and self-belief.\n <\/p>\n\n <a href=\"#explore\" class=\"btn-global\">Explore Our Mission \u2192<\/a>\n <\/div>\n\n <div class=\"visual-container\">\n <div class=\"main-frame\" id=\"tiltCard\">\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/wp-content\/uploads\/2026\/01\/Cover-NZ.jpg\" alt=\"Curious Learner Student\" title=\"About Us\">\n <\/div>\n <div class=\"floating-badge b-1\">\u2b50 Confidence<\/div>\n <div class=\"floating-badge b-2\">\ud83c\udfaf Capability<\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-hint\">\n <div class=\"mouse\"><div class=\"wheel\"><\/div><\/div>\n <\/div>\n<\/section>\n\n<script>\n const glow = document.getElementById('glowCursor');\n document.addEventListener('mousemove', (e) => {\n glow.style.background = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, rgba(20, 184, 166, 0.1) 0%, transparent 40%)`;\n });\n\n const card = document.getElementById('tiltCard');\n document.addEventListener('mousemove', (e) => {\n let xAxis = (window.innerWidth \/ 2 - e.pageX) \/ 25;\n let yAxis = (window.innerHeight \/ 2 - e.pageY) \/ 25;\n card.style.transform = `rotateY(${xAxis}deg) rotateX(${-yAxis}deg)`;\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Who We Are | Curious Learner Global<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n --cl-orange: #f97316;\r\n --cl-sky: #0ea5e9;\r\n }\r\n\r\n body, html {\r\n margin: 0; padding: 0; width: 100%;\r\n background: #ffffff; font-family: 'Outfit', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- STABILIZED ALIGNMENT WRAPPER --- *\/\r\n #cl-kinetic-hub {\r\n position: relative;\r\n padding: 40px 0; \/* Reduced padding to align with above\/below sections *\/\r\n display: flex;\r\n justify-content: center;\r\n overflow: hidden;\r\n background: #ffffff;\r\n }\r\n\r\n \/* NEW SOFT GRADIENT MESH - REPLACES SQUARES *\/\r\n .cl-mesh-layer {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 10% 10%, rgba(20, 184, 166, 0.03) 0%, transparent 40%),\r\n radial-gradient(circle at 90% 90%, rgba(14, 165, 233, 0.03) 0%, transparent 40%);\r\n z-index: 1;\r\n }\r\n\r\n .hub-content-layout {\r\n max-width: 1200px; \/* Locked width for perfect vertical alignment *\/\r\n width: 90%;\r\n display: grid;\r\n grid-template-columns: 0.8fr 1.2fr;\r\n gap: 40px;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* --- IDENTITY NODE --- *\/\r\n .hub-identity {\r\n position: sticky;\r\n top: 40px;\r\n height: fit-content;\r\n }\r\n\r\n .live-pulse-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: var(--cl-navy);\r\n color: #fff;\r\n padding: 8px 18px;\r\n border-radius: 100px;\r\n font-weight: 900;\r\n font-size: 0.7rem;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .hub-identity h2 {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n line-height: 1;\r\n margin: 0 0 20px;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .hub-identity h2 span { color: var(--cl-teal); }\r\n\r\n .hub-identity p {\r\n font-size: 1.1rem;\r\n color: #64748b;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n \/* --- MATRIX GRID --- *\/\r\n .matrix-container {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .kinetic-card {\r\n background: #ffffff;\r\n border: 1px solid rgba(12, 74, 110, 0.1);\r\n padding: 35px;\r\n border-radius: 30px;\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n transform-style: preserve-3d;\r\n cursor: pointer;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* COLOURED HOVER EFFECTS *\/\r\n .kinetic-card:hover { transform: scale(1.02); }\r\n .card-01:hover { border-color: var(--cl-teal); box-shadow: 0 20px 40px rgba(20, 184, 166, 0.1); }\r\n .card-02:hover { border-color: var(--cl-orange); box-shadow: 0 20px 40px rgba(249, 115, 22, 0.1); }\r\n .card-03:hover { border-color: var(--cl-sky); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1); }\r\n .card-04:hover { border-color: var(--cl-navy); box-shadow: 0 20px 40px rgba(12, 74, 110, 0.1); }\r\n\r\n .card-index {\r\n display: block; font-weight: 900; font-size: 0.75rem;\r\n letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px;\r\n }\r\n\r\n .card-01 .card-index { color: var(--cl-teal); }\r\n .card-02 .card-index { color: var(--cl-orange); }\r\n .card-03 .card-index { color: var(--cl-sky); }\r\n .card-04 .card-index { color: var(--cl-navy); }\r\n\r\n .kinetic-card p {\r\n font-size: 1.05rem; color: #475569; line-height: 1.5; margin: 0;\r\n pointer-events: none;\r\n }\r\n .kinetic-card p strong { color: var(--cl-navy); }\r\n\r\n .wide-card { grid-column: span 2; background: var(--cl-navy); border: none; }\r\n .wide-card p { color: #cbd5e1; }\r\n .wide-card p strong { color: var(--cl-teal); }\r\n\r\n @media (max-width: 900px) {\r\n .hub-content-layout { grid-template-columns: 1fr; padding-bottom: 40px; }\r\n .matrix-container { grid-template-columns: 1fr; }\r\n .wide-card { grid-column: span 1; }\r\n .hub-identity { position: relative; top: 0; text-align: center; margin-bottom: 30px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-kinetic-hub\">\r\n <div class=\"cl-mesh-layer\"><\/div>\r\n\r\n <div class=\"hub-content-layout\">\r\n <div class=\"hub-identity\">\r\n <div class=\"live-pulse-badge\">Node Status: Active<\/div>\r\n <h2>Who We<br><span>Are<\/span><\/h2>\r\n <p>Curious Learner is a surgical EdTech platform engineered to bridge the gap between curiosity and capability.<\/p>\r\n <\/div>\r\n\r\n <div class=\"matrix-container\">\r\n <div class=\"kinetic-card card-01 tilt-target\">\r\n <span class=\"card-index\">01 \/ Global Reach<\/span>\r\n <p>We help children across <strong>Australia and New Zealand<\/strong> excel in academics.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-02 tilt-target\">\r\n <span class=\"card-index\">02 \/ Precision<\/span>\r\n <p>Personalised pathways for <strong>Selective Admissions, ICAS, and NAPLAN<\/strong>.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card wide-card tilt-target\">\r\n <span class=\"card-index\" style=\"color: var(--cl-teal);\">03 \/ Philosophy<\/span>\r\n <p>A true learning partner\u2014nurturing <strong>academic excellence and critical thinking<\/strong> to thrive in exams and life.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-03 tilt-target\">\r\n <span class=\"card-index\">04 \/ Growth<\/span>\r\n <p>Building <strong>confidence and self-belief<\/strong> through structured professional support.<\/p>\r\n <\/div>\r\n <div class=\"kinetic-card card-04 tilt-target\">\r\n <span class=\"card-index\">05 \/ Innovation<\/span>\r\n <p>Nurturing the next generation of thinkers through <strong>curiosity-driven mechanics<\/strong>.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const targets = document.querySelectorAll('.tilt-target');\r\n targets.forEach(target => {\r\n target.addEventListener('mousemove', (e) => {\r\n const rect = target.getBoundingClientRect();\r\n const x = (e.clientX - rect.left) - (rect.width \/ 2);\r\n const y = (e.clientY - rect.top) - (rect.height \/ 2);\r\n target.style.transform = `perspective(1000px) rotateX(${-y \/ 20}deg) rotateY(${x \/ 20}deg) scale3d(1.02, 1.02, 1.02)`;\r\n });\r\n target.addEventListener('mouseleave', () => {\r\n target.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n --cl-purple: #8b5cf6;\r\n --cl-orange: #f97316;\r\n --border-soft: rgba(12, 74, 110, 0.08);\r\n }\r\n\r\n \/* --- STABILIZED ALIGNMENT WRAPPER --- *\/\r\n #cl-chromatic-vision {\r\n position: relative;\r\n padding: 40px 0; \/* Reduced padding for seamless vertical alignment *\/\r\n background: #ffffff;\r\n font-family: 'Outfit', sans-serif;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n \/* DYNAMIC MESH BACKGROUND - ELIMINATES EMPTY FEEL *\/\r\n .vision-mesh {\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(20, 184, 166, 0.05) 0%, transparent 60%);\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .vision-container {\r\n max-width: 1200px; \/* Locked to align with 'Who We Are' section *\/\r\n width: 90%;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* --- CENTERED HEADER --- *\/\r\n .vision-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .vision-header h2 {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n margin: 0;\r\n text-transform: uppercase;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .vision-header h2 span { color: var(--cl-teal); }\r\n\r\n .vision-accent {\r\n width: 80px; height: 4px;\r\n background: var(--cl-orange);\r\n margin: 15px auto;\r\n border-radius: 100px;\r\n }\r\n\r\n \/* --- 3-COLUMN CHROMATIC GRID --- *\/\r\n .vision-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n perspective: 1200px;\r\n }\r\n\r\n .vision-card {\r\n background: #ffffff;\r\n border: 1px solid var(--border-soft);\r\n padding: 50px 35px;\r\n border-radius: 40px;\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n transform-style: preserve-3d;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* INDIVIDUAL COLORED HOVER EFFECTS *\/\r\n .v-card-teal:hover { \r\n border-color: var(--cl-teal); \r\n box-shadow: 0 30px 60px rgba(20, 184, 166, 0.15); \r\n }\r\n .v-card-purple:hover { \r\n border-color: var(--cl-purple); \r\n box-shadow: 0 30px 60px rgba(139, 92, 246, 0.15); \r\n }\r\n .v-card-orange:hover { \r\n border-color: var(--cl-orange); \r\n box-shadow: 0 30px 60px rgba(249, 115, 22, 0.15); \r\n }\r\n\r\n \/* ICON ANIMATIONS *\/\r\n .v-icon-wrap {\r\n font-size: 3.5rem;\r\n margin-bottom: 25px;\r\n display: inline-block;\r\n transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .vision-card:hover .v-icon-wrap {\r\n transform: translateZ(50px) scale(1.1);\r\n }\r\n\r\n .vision-card h3 {\r\n font-size: 1.6rem;\r\n color: var(--cl-navy);\r\n font-weight: 900;\r\n margin: 0 0 15px;\r\n line-height: 1.2;\r\n }\r\n\r\n .vision-card p {\r\n font-size: 1.1rem;\r\n color: #64748b;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n .vision-card p strong { color: var(--cl-navy); }\r\n\r\n \/* --- RESPONSIVE --- *\/\r\n @media (max-width: 991px) {\r\n .vision-grid { grid-template-columns: 1fr; }\r\n .vision-card { padding: 40px 30px; }\r\n #cl-chromatic-vision { padding: 60px 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-chromatic-vision\">\r\n <div class=\"vision-mesh\" id=\"vMesh\"><\/div>\r\n\r\n <div class=\"vision-container\">\r\n \r\n <div class=\"vision-header\">\r\n <h2>Our <span>Vision<\/span><\/h2>\r\n <div class=\"vision-accent\"><\/div>\r\n <p style=\"color: #64748b; font-size: 1.15rem; max-width: 600px; margin: 0 auto;\">\r\n To set a new standard in personalised education by combining structured learning, measurable progress, and confidence-driven growth.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-grid\">\r\n \r\n <div class=\"vision-card v-card-teal kinetic-node\">\r\n <div class=\"v-icon-wrap\">\ud83d\ude80<\/div>\r\n <h3>Nurturing Future Leaders<\/h3>\r\n <p>Developing <strong>lifelong learners<\/strong> equipped for today’s opportunities and tomorrow’s leadership.<\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-card v-card-purple kinetic-node\">\r\n <div class=\"v-icon-wrap\">\u2728<\/div>\r\n <h3>Curiosity to Confidence<\/h3>\r\n <p>Engineering a path where a child’s <strong>curiosity<\/strong> transforms into absolute confidence.<\/p>\r\n <\/div>\r\n\r\n <div class=\"vision-card v-card-orange kinetic-node\">\r\n <div class=\"v-icon-wrap\">\ud83c\udf93<\/div>\r\n <h3>Global Accessibility<\/h3>\r\n <p>Providing <strong>personalised learning<\/strong> for ICAS, NAPLAN, OC, and scholarships globally.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ --- 1. LIVE MESH BACKGROUND ---\r\n const mesh = document.getElementById('vMesh');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) * 100;\r\n const y = (e.clientY \/ window.innerHeight) * 100;\r\n mesh.style.setProperty('--x', `${x}%`);\r\n mesh.style.setProperty('--y', `${y}%`);\r\n });\r\n\r\n \/\/ --- 2. 3D KINETIC INTERACTION ---\r\n const nodes = document.querySelectorAll('.kinetic-node');\r\n nodes.forEach(node => {\r\n node.addEventListener('mousemove', (e) => {\r\n const rect = node.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const centerX = rect.width \/ 2;\r\n const centerY = rect.height \/ 2;\r\n \r\n const rotateX = (y - centerY) \/ 10;\r\n const rotateY = (centerX - x) \/ 10;\r\n\r\n node.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.03, 1.03, 1.03)`;\r\n });\r\n\r\n node.addEventListener('mouseleave', () => {\r\n node.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\r\n\r\n :root {\r\n --cl-purple: #6B1AB7;\r\n --cl-orange: #f97316;\r\n --cl-teal: #14b8a6;\r\n --cl-navy: #0c4a6e;\r\n }\r\n\r\n \/* --- STABILIZED LAYOUT --- *\/\r\n #cl-mission-stable {\r\n position: relative;\r\n padding: 40px 0;\r\n background: #ffffff;\r\n font-family: 'Outfit', sans-serif;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .mission-glow-layer {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(107, 26, 183, 0.04) 0%, transparent 60%);\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .mission-wrapper {\r\n max-width: 1200px;\r\n width: 90%;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n position: relative;\r\n z-index: 10;\r\n align-items: center;\r\n }\r\n\r\n \/* --- LEFT SIDE: HIGH-CONTRAST HEADING (FIXED) --- *\/\r\n .mission-title-area {\r\n background: var(--cl-navy);\r\n padding: 60px;\r\n border-radius: 40px;\r\n color: white;\r\n box-shadow: 0 20px 50px rgba(12, 74, 110, 0.2);\r\n }\r\n\r\n .mission-prefix {\r\n font-weight: 900;\r\n letter-spacing: 4px;\r\n color: var(--cl-teal);\r\n font-size: 0.8rem;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n display: block;\r\n }\r\n\r\n \/* Fixed Heading Visibility *\/\r\n .mission-title-area h2 {\r\n font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n line-height: 0.95;\r\n margin: 0;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n }\r\n\r\n .line-1 {\r\n color: #ffffff; \/* Forced white for permanent visibility *\/\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .line-2 {\r\n color: var(--cl-orange);\r\n display: block;\r\n background: linear-gradient(90deg, var(--cl-orange), #ffcc00);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* --- RIGHT SIDE: KINETIC CONTENT & BADGES --- *\/\r\n .mission-info-area {\r\n background: #ffffff;\r\n border: 1px solid rgba(12, 74, 110, 0.1);\r\n padding: 50px;\r\n border-radius: 40px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.02);\r\n }\r\n\r\n .mission-description {\r\n font-size: 1.25rem;\r\n color: #475569;\r\n line-height: 1.7;\r\n margin: 0 0 35px 0;\r\n }\r\n\r\n .mission-description strong {\r\n color: var(--cl-navy);\r\n border-bottom: 2px solid var(--cl-teal);\r\n }\r\n\r\n \/* --- PERMANENTLY COLOURED LIVE BADGES --- *\/\r\n .mission-badges {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .m-badge {\r\n padding: 12px 24px;\r\n border-radius: 100px;\r\n font-size: 0.85rem;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n border: 2px solid transparent;\r\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\r\n cursor: pointer;\r\n background: rgba(248, 250, 252, 0.8); \r\n }\r\n\r\n .mb-purple { color: var(--cl-purple); border-color: rgba(107, 26, 183, 0.2); }\r\n .mb-purple:hover { background: var(--cl-purple); color: #fff !important; border-color: var(--cl-purple); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(107, 26, 183, 0.3); }\r\n\r\n .mb-orange { color: var(--cl-orange); border-color: rgba(249, 115, 22, 0.2); }\r\n .mb-orange:hover { background: var(--cl-orange); color: #fff !important; border-color: var(--cl-orange); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); }\r\n\r\n .mb-teal { color: var(--cl-teal); border-color: rgba(20, 184, 166, 0.2); }\r\n .mb-teal:hover { background: var(--cl-teal); color: #fff !important; border-color: var(--cl-teal); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3); }\r\n\r\n .mb-navy { color: var(--cl-navy); border-color: rgba(12, 74, 110, 0.2); }\r\n .mb-navy:hover { background: var(--cl-navy); color: #fff !important; border-color: var(--cl-navy); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(12, 74, 110, 0.3); }\r\n\r\n @media (max-width: 1024px) {\r\n .mission-wrapper { grid-template-columns: 1fr; }\r\n .mission-title-area { padding: 40px 25px; text-align: center; }\r\n .mission-badges { justify-content: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"cl-mission-stable\">\r\n <div class=\"mission-glow-layer\" id=\"glowMesh\"><\/div>\r\n\r\n <div class=\"mission-wrapper\">\r\n <div class=\"mission-title-area\">\r\n <span class=\"mission-prefix\">OUR CORE MISSION<\/span>\r\n <h2>\r\n <span class=\"line-1\">Your Child’s<\/span>\r\n <span class=\"line-2\">Learning Partner<\/span>\r\n <\/h2>\r\n <div style=\"width: 60px; height: 4px; background: var(--cl-teal); margin-top: 30px; border-radius: 10px;\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mission-info-area\">\r\n <p class=\"mission-description\">\r\n At <strong>Curious Learner<\/strong>, we are not just mentors; we are your child’s <strong>learning partner<\/strong>. Through personalised focused programs strategically aligned with <strong>competitive examinations<\/strong>, we cultivate confidence and future-ready minds.\r\n <\/p>\r\n\r\n <div class=\"mission-badges\">\r\n <div class=\"m-badge mb-purple\">Personalised<\/div>\r\n <div class=\"m-badge mb-orange\">Expert Guidance<\/div>\r\n <div class=\"m-badge mb-teal\">Future-Ready<\/div>\r\n <div class=\"m-badge mb-navy\">Confidence<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const glow = document.getElementById('glowMesh');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) * 100;\r\n const y = (e.clientY \/ window.innerHeight) * 100;\r\n glow.style.setProperty('--mx', `${x}%`);\r\n glow.style.setProperty('--my', `${y}%`);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\n\n\n\n<div id=\"cl-master-final-sections\">\r\n\r\n <section id=\"cl-founder-spotlight\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-founder-flex-container\">\r\n \r\n <div class=\"cl-founder-img-side\">\r\n <div class=\"cl-frame-container\">\r\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/wp-content\/uploads\/2025\/09\/nitasha-Rajvanshi-1.png\" alt=\"Nitasha Rajvanshi\" title=\"About Us\">\r\n <div class=\"cl-founder-badge-mini\">Founder & Mentor<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cl-founder-text-side\">\r\n <h4 class=\"cl-sub-label\">ABOUT THE FOUNDER<\/h4>\r\n <h2 class=\"cl-founder-name\">Nitasha <span class=\"text-teal\">Rajvanshi<\/span><\/h2>\r\n <p class=\"cl-founder-bio\">Nitasha founded <strong>Curious Learner<\/strong> with a vision to ignite curiosity in every child and build lifelong confidence. Dedicated to helping students excel in competitive exams through personalised guidance.<\/p>\r\n \r\n <div class=\"cl-quote-box-mini\">\r\n <p>\u201cEvery child is unique, with their own strengths and dreams. My mission is to nurture that uniqueness \u2014 to go beyond textbooks and spark curiosity that lasts a lifetime.\u201d<\/p>\r\n <cite>\u2014 Nitasha Rajvanshi<\/cite>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"cl-excellence-grid\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-grid-header\">\r\n <h2 class=\"cl-grid-title\">Guided by <span class=\"text-teal\">Excellence<\/span><\/h2>\r\n <div class=\"cl-accent-line-center\"><\/div>\r\n <p class=\"cl-grid-subtitle\">Our vision is simple: to nurture lifelong learners ready for tomorrow.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-cards-container\">\r\n <div class=\"cl-info-card v-teal\">\r\n <div class=\"cl-card-icon\">\ud83d\udc51<\/div>\r\n <h3>Expert Mentors<\/h3>\r\n <p>Learn from passionate mentors who know how to prepare students for competitive exams and beyond.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-info-card v-orange\">\r\n <div class=\"cl-card-icon\">\u23f0<\/div>\r\n <h3>Learning for You<\/h3>\r\n <p>Flexible, personalised pathways that let every child grow at their own pace with confidence.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-info-card v-purple\">\r\n <div class=\"cl-card-icon\">\ud83d\udcd6<\/div>\r\n <h3>Recognised Success<\/h3>\r\n <p>Earn certificates and milestones that reflect progress and build student pride.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* --- STABILIZED ALIGNMENT & PADDING --- *\/\r\n#cl-founder-spotlight, \r\n#cl-excellence-grid { \r\n padding: 40px 0; \/* Reduced to align with Mission\/Vision sections *\/\r\n background: #ffffff;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.cl-about-wrapper {\r\n max-width: 1200px; \/* Locked for perfect vertical alignment *\/\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n}\r\n\r\n\/* --- SUBTLE LIVE ANIMATIONS --- *\/\r\n@keyframes floatSoft {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n}\r\n\r\n.cl-frame-container img,\r\n.cl-info-card {\r\n transition: all 0.4s ease-in-out;\r\n}\r\n\r\n\/* Info Cards Hover: Lift and Glow only on hover *\/\r\n.cl-info-card:hover {\r\n transform: translateY(-10px);\r\n border-color: #14b8a6;\r\n box-shadow: 0 20px 40px rgba(12, 74, 110, 0.08);\r\n}\r\n\r\n\/* Founder Badge subtle pulse *\/\r\n.cl-founder-badge-mini {\r\n animation: floatSoft 4s ease-in-out infinite;\r\n}\r\n\r\n\/* --- FOUNDER SIDE LAYOUT --- *\/\r\n.cl-founder-flex-container { \r\n display: flex; \r\n align-items: center; \r\n gap: 60px; \r\n}\r\n\r\n.cl-founder-img-side { flex: 0 0 340px; position: relative; }\r\n.cl-frame-container img { width: 100%; border-radius: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }\r\n.cl-founder-badge-mini { \r\n position: absolute; bottom: 20px; right: -10px; \r\n background: #6B1AB7; color: #fff; padding: 10px 20px; \r\n border-radius: 15px; font-weight: 900; font-size: 0.7rem; \r\n box-shadow: 0 10px 20px rgba(107, 26, 183, 0.2); \r\n}\r\n\r\n.cl-sub-label { letter-spacing: 4px; color: #6B1AB7; font-weight: 900; font-size: 0.75rem; margin-bottom: 10px; }\r\n.cl-founder-name { font-size: 3rem; color: #0c4a6e; font-weight: 900; margin: 10px 0 20px; letter-spacing: -1px; }\r\n.cl-quote-box-mini { \r\n background: #f8fafc; padding: 35px; border-radius: 30px; \r\n border-left: 6px solid #14b8a6; font-style: italic; \r\n margin-top: 30px;\r\n}\r\n.cl-quote-box-mini cite { display: block; margin-top: 15px; font-style: normal; font-weight: 700; color: #14b8a6; }\r\n\r\n\/* --- EXCELLENCE GRID LAYOUT --- *\/\r\n.cl-grid-header { text-align: center; margin-bottom: 50px; }\r\n.cl-grid-title { font-size: 3rem; color: #0c4a6e; font-weight: 900; margin: 0; text-transform: uppercase; letter-spacing: -2px; }\r\n.cl-accent-line-center { width: 80px; height: 5px; background: #f97316; margin: 15px auto; border-radius: 10px; }\r\n.cl-grid-subtitle { font-size: 1.1rem; color: #64748b; }\r\n\r\n.cl-cards-container { \r\n display: grid; \r\n grid-template-columns: repeat(3, 1fr); \r\n gap: 25px; \r\n}\r\n\r\n.cl-info-card { \r\n padding: 45px 30px; border-radius: 40px; \r\n background: #fff; border: 1px solid rgba(12, 74, 110, 0.08); \r\n text-align: center; \r\n}\r\n\r\n\/* Color Indicators *\/\r\n.v-teal { border-top: 6px solid #14b8a6; }\r\n.v-orange { border-top: 6px solid #f97316; }\r\n.v-purple { border-top: 6px solid #6B1AB7; }\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media (max-width: 991px) {\r\n .cl-founder-flex-container { flex-direction: column; text-align: center; }\r\n .cl-cards-container { grid-template-columns: 1fr; }\r\n .cl-founder-img-side { flex: 0 0 auto; max-width: 300px; margin-bottom: 30px; }\r\n}\r\n<\/style>\n\n\n\n<section id=\"cl-milestones-final\">\r\n <div class=\"cl-about-wrapper\">\r\n <div class=\"cl-milestone-grid\">\r\n \r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle teal-bg\">\ud83c\udf93<\/div>\r\n <div class=\"cl-milestone-num text-teal\" data-target=\"500\">0<\/div>\r\n <p class=\"cl-milestone-label\">Students Guided<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle orange-bg\">\ud83d\udcc8<\/div>\r\n <div class=\"cl-milestone-num text-orange\" data-target=\"98\">0<\/div>\r\n <p class=\"cl-milestone-label\">Success Rate %<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle purple-bg\">\ud83d\udc51<\/div>\r\n <div class=\"cl-milestone-num text-purple\" data-target=\"15\">0<\/div>\r\n <p class=\"cl-milestone-label\">Expert Mentors<\/p>\r\n <\/div>\r\n\r\n <div class=\"cl-milestone-card\">\r\n <div class=\"cl-icon-circle blue-bg\">\u23f3<\/div>\r\n <div class=\"cl-milestone-num text-blue\" data-target=\"1200\">0<\/div>\r\n <p class=\"cl-milestone-label\">Hours Coaching<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* --- MILESTONE STYLING --- *\/\r\n#cl-milestones-final { \r\n padding: 100px 5%; \r\n background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%); \r\n}\r\n\r\n.cl-milestone-grid { \r\n display: grid; \r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); \r\n gap: 30px; \r\n}\r\n\r\n.cl-milestone-card { \r\n background: #ffffff; \r\n padding: 50px 25px; \r\n border-radius: 40px; \r\n text-align: center; \r\n box-shadow: 0 15px 40px rgba(0,0,0,0.04); \r\n border: 1px solid #f1f5f9;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n.cl-milestone-card:hover { transform: translateY(-10px); }\r\n\r\n\/* Icon Backgrounds *\/\r\n.cl-icon-circle { \r\n width: 65px; height: 65px; border-radius: 20px; \r\n display: flex; align-items: center; justify-content: center; \r\n margin: 0 auto 25px; font-size: 1.8rem; \r\n}\r\n.teal-bg { background: #e6fffa; color: #14b8a6; }\r\n.orange-bg { background: #fff7ed; color: #f97316; }\r\n.purple-bg { background: #f5f3ff; color: #6B1AB7; }\r\n.blue-bg { background: #f0f9ff; color: #0ea5e9; }\r\n\r\n\/* Numbers *\/\r\n.cl-milestone-num { font-size: 4rem; font-weight: 900; line-height: 1; margin-bottom: 12px; }\r\n.cl-milestone-num::after { content: '+'; font-size: 2rem; vertical-align: top; margin-left: 2px; }\r\n\/* Special case for percentage *\/\r\n.cl-milestone-card:nth-child(2) .cl-milestone-num::after { content: '%'; }\r\n\r\n.cl-milestone-label { \r\n font-size: 1rem; font-weight: 800; color: #0c4a6e; \r\n text-transform: uppercase; letter-spacing: 1px; \r\n}\r\n\r\n\/* Color Classes *\/\r\n.text-teal { color: #14b8a6; }\r\n.text-orange { color: #f97316; }\r\n.text-purple { color: #6B1AB7; }\r\n.text-blue { color: #0ea5e9; }\r\n\r\n@media (max-width: 768px) {\r\n .cl-milestone-num { font-size: 3rem; }\r\n .cl-milestone-card { padding: 40px 20px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* --- DYNAMIC COUNTER SCRIPT --- *\/\r\nconst startAcademyCounters = () => {\r\n const counters = document.querySelectorAll('.cl-milestone-num');\r\n counters.forEach(counter => {\r\n const update = () => {\r\n const target = +counter.getAttribute('data-target');\r\n const count = +counter.innerText;\r\n const speed = 150; \r\n const inc = target \/ speed;\r\n\r\n if (count < target) {\r\n counter.innerText = Math.ceil(count + inc);\r\n setTimeout(update, 20);\r\n } else {\r\n counter.innerText = target;\r\n }\r\n };\r\n update();\r\n });\r\n};\r\n\r\n\/\/ Trigger only when user scrolls to section\r\nconst milestoneObserver = new IntersectionObserver((entries) => {\r\n if(entries[0].isIntersecting) {\r\n startAcademyCounters();\r\n milestoneObserver.disconnect();\r\n }\r\n}, { threshold: 0.5 });\r\n\r\nmilestoneObserver.observe(document.querySelector('#cl-milestones-final'));\r\n<\/script>\n\n\n\n<!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 <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;900&display=swap');\n\n :root {\n --cl-teal: #14b8a6;\n --cl-navy-dark: #020617;\n --cl-orange: #f97316;\n --cl-brand-blue: #3b82f6;\n --cl-white: #ffffff;\n --cl-text-muted: #94a3b8;\n }\n\n #cl-final-academic-footer {\n background: var(--cl-navy-dark);\n color: var(--cl-white);\n font-family: 'Outfit', sans-serif;\n padding: 60px 0 30px;\n border-top: 1px solid rgba(20, 184, 166, 0.2);\n }\n\n .footer-wrapper {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr;\n gap: 60px;\n }\n\n \/* --- LOGO & BRANDING --- *\/\n .brand-zone img {\n max-width: 250px;\n height: auto;\n margin-bottom: 25px;\n display: block;\n background: #ffffff; \n padding: 12px;\n border-radius: 16px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .brand-tagline {\n font-size: 0.95rem;\n line-height: 1.7;\n color: var(--cl-text-muted);\n margin-bottom: 30px;\n }\n\n \/* SOCIAL ICONS (ORIGINAL COLORS ON HOVER) *\/\n .social-cluster {\n display: flex;\n gap: 15px;\n }\n\n .s-icon {\n width: 42px; height: 42px;\n background: rgba(255, 255, 255, 0.05);\n color: var(--cl-white);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n font-size: 1.2rem;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n \/* Brand Color Physics *\/\n .s-fb:hover { background: #1877F2; border-color: #1877F2; transform: translateY(-8px); }\n .s-ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; transform: translateY(-8px); }\n .s-ln:hover { background: #0077b5; border-color: #0077b5; transform: translateY(-8px); }\n .s-x:hover { background: #ffffff; color: #000000; border-color: #ffffff; transform: translateY(-8px); }\n\n \/* --- QUICK ACCESS (COLOURED HOVER) --- *\/\n .nav-node h3 {\n color: var(--cl-teal);\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 4px;\n margin-bottom: 30px;\n font-weight: 900;\n }\n\n .nav-node ul { list-style: none; padding: 0; margin: 0; }\n .nav-node li { margin-bottom: 15px; }\n .nav-node a {\n color: var(--cl-text-muted);\n text-decoration: none;\n font-size: 0.95rem;\n transition: 0.3s;\n display: inline-block;\n }\n\n \/* Multi-Color Link Hover *\/\n .nav-node li:nth-child(odd) a:hover { color: var(--cl-teal); transform: translateX(5px); }\n .nav-node li:nth-child(even) a:hover { color: var(--cl-orange); transform: translateX(5px); }\n\n \/* --- CONTACT & ADDRESS --- *\/\n .contact-stack { margin-bottom: 25px; }\n .contact-stack strong {\n display: block;\n color: var(--cl-teal);\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 5px;\n }\n .contact-stack p, .contact-stack a {\n color: var(--cl-text-muted);\n text-decoration: none;\n font-size: 0.95rem;\n margin: 0;\n transition: 0.3s;\n }\n .contact-stack a:hover { color: var(--cl-white); }\n\n \/* --- LEGAL BAR --- *\/\n .legal-row {\n max-width: 1200px;\n margin: 50px auto 0;\n padding: 30px 20px 0;\n border-top: 1px solid rgba(255, 255, 255, 0.05);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .legal-copy { font-size: 0.85rem; color: var(--cl-white); }\n \n .legal-power { font-size: 0.9rem; font-weight: 900; color: var(--cl-white); }\n .brand-orange { color: var(--cl-orange); }\n .brand-blue { color: var(--cl-brand-blue); }\n\n @media (max-width: 991px) {\n .footer-wrapper { grid-template-columns: 1fr; text-align: center; gap: 40px; }\n .social-cluster { justify-content: center; }\n .legal-row { flex-direction: column; gap: 15px; text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n\n<footer id=\"cl-final-academic-footer\">\n <div class=\"footer-wrapper\">\n \n <div class=\"brand-zone\">\n <img decoding=\"async\" src=\"https:\/\/curiouslearneracademy.com\/newzealand\/wp-content\/uploads\/sites\/3\/2026\/01\/cropped-Logo-Color-Updated.png\" alt=\"Curious Learner Academy\" title=\"About Us\">\n <p class=\"brand-tagline\">\n Empowering students across Aotearoa New Zealand with structured, flexible, and tailored learning that bridges gaps, builds confidence, and ensures clear, measurable growth.\n <\/p>\n <div class=\"social-cluster\">\n <a href=\"#\" class=\"s-icon s-fb\" title=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-ig\" title=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-ln\" title=\"LinkedIn\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\n <a href=\"#\" class=\"s-icon s-x\" title=\"X (Twitter)\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\n <\/div>\n <\/div>\n\n <div class=\"nav-node\">\n <h3>Quick Access<\/h3>\n <ul>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/faq\/\">Help & FAQs<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/terms-conditions\/\">Terms & Conditions<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/refund-cancellation\/\">Refund & Cancellation<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/privacy-policy\/\">Privacy Policy<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/data-breachresponse-policy-cookies-policy\/\">Breach & Cookies<\/a><\/li>\n <li><a href=\"https:\/\/curiouslearneracademy.com\/newzealand\/child-protection-online-safety\/\">Child Safety Hub<\/a><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"nav-node\">\n <h3>Support Node<\/h3>\n <div class=\"contact-stack\">\n <strong>Address<\/strong>\n <p>Global Online Learning Platform<\/p>\n <\/div>\n <div class=\"contact-stack\">\n <strong>WhatsApp Support<\/strong>\n <a href=\"https:\/\/wa.me\/919251230015\">+91 92512 30015<\/a>\n <\/div>\n <div class=\"contact-stack\">\n <strong>Official Email<\/strong>\n <a href=\"mailto:support@curiouslearneracademy.com\">support@curiouslearneracademy.com<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"legal-row\">\n <div class=\"legal-copy\">\n Copyright \u00a9 2025 Curious Learner New Zealand\n <\/div>\n <div class=\"legal-power\">\n Powered by <span class=\"brand-orange\">Curious<\/span> <span class=\"brand-blue\">Learner<\/span>\n <\/div>\n <\/div>\n<\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Curious Learner | Confidence & Capability Established to Inspire Nurturing Curiosity, Building Confidence At Curious Learner, we believe learning should […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-637","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"curiouslearneroffice@gmail.com","author_link":"https:\/\/curiouslearneracademy.com\/newzealand\/author\/curiouslearnerofficegmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Curious Learner | Confidence & Capability Established to Inspire Nurturing Curiosity, Building Confidence At Curious Learner, we believe learning should […]","_links":{"self":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":2,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/pages\/637\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/curiouslearneracademy.com\/newzealand\/wp-json\/wp\/v2\/media?parent=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}