{"id":2013,"date":"2025-07-07T09:37:17","date_gmt":"2025-07-07T09:37:17","guid":{"rendered":"https:\/\/genbecloud.com\/mastrly\/?page_id=2013"},"modified":"2025-11-04T16:38:50","modified_gmt":"2025-11-04T11:08:50","slug":"kids","status":"publish","type":"page","link":"https:\/\/genbecloud.com\/mastrly\/kids\/","title":{"rendered":"Kids"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2013\" class=\"elementor elementor-2013\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-741b1b3 e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"741b1b3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ef3336 elementor-widget elementor-widget-html\" data-id=\"2ef3336\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* Base Fonts *\/\r\nbody { font-family: 'Inter', sans-serif; }\r\n.font-fredoka-one { font-family: 'Fredoka One', cursive; }\r\n\r\n\/* Section Background *\/\r\n.hero-section {\r\n    background-color: #09263d;\r\n    background-image: radial-gradient(circle at center, #10314f 0%, #09263d 70%);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n.hero-section > * { z-index: 10; } \/* Ensure content is above background elements *\/\r\n\r\n\/* Star animations (Add all 10 star styles here) *\/\r\n.star { position: absolute; background-color: white; border-radius: 50%; opacity: 0; animation: twinkle 5s infinite ease-in-out; z-index: 0; }\r\n.star:nth-child(1) { top: 10%; left: 20%; width: 2px; height: 2px; animation-delay: 0s; }\r\n.star:nth-child(2) { top: 30%; left: 70%; width: 3px; height: 3px; animation-delay: 1.5s; }\r\n.star:nth-child(3) { top: 60%; left: 40%; width: 2px; height: 2px; animation-delay: 3s; }\r\n.star:nth-child(4) { top: 80%; left: 10%; width: 1px; height: 1px; animation-delay: 0.5s; }\r\n.star:nth-child(5) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 2.2s; }\r\n.star:nth-child(6) { top: 5%; left: 50%; width: 3px; height: 3px; animation-delay: 4s; }\r\n.star:nth-child(7) { top: 90%; left: 60%; width: 1px; height: 1px; animation-delay: 1s; }\r\n.star:nth-child(8) { top: 45%; left: 5%; width: 2px; height: 2px; animation-delay: 3.5s; }\r\n.star:nth-child(9) { top: 15%; left: 55%; width: 1px; height: 1px; animation-delay: 2s; }\r\n.star:nth-child(10) { top: 70%; left: 25%; width: 3px; height: 3px; animation-delay: 4.5s; }\r\n\r\n@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }\r\n\r\n\/* Nebula\/Galaxy Swirl *\/\r\n.nebula {\r\n    position: absolute; width: 300px; height: 300px;\r\n    background: radial-gradient(circle at center, rgba(253, 191, 42, 0.2) 0%, rgba(94, 213, 228, 0.2) 50%, transparent 70%);\r\n    border-radius: 50%; filter: blur(50px);\r\n    animation: nebula-float 15s infinite ease-in-out alternate; z-index: 0;\r\n}\r\n.nebula-1 { top: 10%; left: -5%; transform: scale(0.8); animation-delay: 0s; }\r\n.nebula-2 { bottom: 5%; right: -10%; transform: scale(1.2); animation-delay: 7s; }\r\n\r\n@keyframes nebula-float {\r\n    0% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n    50% { transform: translate(20px, 20px) scale(var(--scale, 1.1)); opacity: 0.7; }\r\n    100% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n}\r\n\r\n\/* Floating Planets *\/\r\n.floating-planet { position: absolute; animation: float-hero 12s infinite ease-in-out; z-index: 1; }\r\n.planet-1 { width: 60px; height: 60px; top: 20%; left: 15%; animation-duration: 10s; animation-delay: 1s; }\r\n.planet-2 { width: 80px; height: 80px; bottom: 15%; right: 10%; animation-duration: 14s; animation-delay: 3s; }\r\n\r\n\/* Floating Astronaut Animation *\/\r\n@keyframes float-hero {\r\n    0% { transform: translateY(0px) rotate(0deg); }\r\n    50% { transform: translateY(-15px) rotate(3deg); }\r\n    100% { transform: translateY(0px) rotate(0deg); }\r\n}\r\n.float-hero-animation { animation: float-hero 8s infinite ease-in-out; }\r\n\r\n\/* Astronaut Glow *\/\r\n@keyframes glow-pulse {\r\n    0%, 100% { filter: drop-shadow(0 0 10px rgba(94, 213, 228, 0.6)); }\r\n    50% { filter: drop-shadow(0 0 20px rgba(94, 213, 228, 0.9)); }\r\n}\r\n.glow-pulse-animation { animation: glow-pulse 4s infinite alternate; }\r\n\r\n\/* Text Bounce Animation *\/\r\n@keyframes bounce-in {\r\n    0% { transform: translateY(-50px) scale(0.5); opacity: 0; }\r\n    70% { transform: translateY(10px) scale(1.05); opacity: 1; }\r\n    100% { transform: translateY(0) scale(1); opacity: 1; }\r\n}\r\n.animate-bounce-in { animation: bounce-in 1s ease-out forwards; opacity: 0; }\r\n.headline-word-1 { animation-delay: 0.2s; }\r\n.headline-word-2 { animation-delay: 0.4s; }\r\n.headline-word-3 { animation-delay: 0.6s; }\r\n.headline-word-4 { animation-delay: 0.8s; }\r\n.headline-word-5 { animation-delay: 1s; }\r\n.headline-word-6 { animation-delay: 1.2s; }\r\n\r\n\/* Subtitle Fade-in *\/\r\n@keyframes fade-in {\r\n    0% { opacity: 0; transform: translateY(20px); }\r\n    100% { opacity: 1; transform: translateY(0); }\r\n}\r\n.animate-fade-in { animation: fade-in 1.5s ease-out forwards; opacity: 0; animation-delay: 1.5s; }\r\n\r\n\/* Rocket icon animation inside button *\/\r\n@keyframes rocket-launch {\r\n    0% { transform: translateX(0); }\r\n    50% { transform: translateX(10px) rotate(10deg); }\r\n    100% { transform: translateX(0); }\r\n}\r\n.btn-primary:hover .fa-rocket { animation: rocket-launch 0.5s forwards; }\r\n\r\n\r\n\/* ========================================= *\/\r\n\/* BUTTON OPTIMIZATION (Consistent & Mobile-Friendly) *\/\r\n\/* ========================================= *\/\r\n@keyframes pulse-button {\r\n    0%, 100% { transform: scale(1); }\r\n    50% { transform: scale(1.05); }\r\n}\r\n\r\n.btn-primary {\r\n    background-color: #ff8c61;\r\n    color: white;\r\n    font-weight: 600;\r\n    border-radius: 9999px; \/* rounded-full equivalent *\/\r\n    transition: all 0.3s ease;\r\n    animation: pulse-button 2.5s infinite ease-in-out;\r\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n\r\n    \/* MOBILE OPTIMIZATION: Reduced Padding\/Size *\/\r\n    padding: 1rem 1.75rem; \/* 16px vertical, ~28px horizontal *\/\r\n    font-size: 1.125rem; \/* 18px *\/\r\n    line-height: 1.25;\r\n    display: inline-flex; \/* Use inline-flex for centering *\/\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.btn-primary:hover {\r\n    animation: none;\r\n    background-color: #e67a50;\r\n    transform: translateY(-4px) scale(1.05); \/* Reduced hover lift *\/\r\n    box-shadow: 0 10px 20px rgba(255, 140, 97, 0.5); \/* Simpler shadow *\/\r\n}\r\n\r\n\/* Desktop Sizing *\/\r\n@media (min-width: 768px) {\r\n    .btn-primary {\r\n        padding: 1.25rem 2.5rem; \/* 20px vertical, 40px horizontal *\/\r\n        font-size: 1.5rem; \/* 24px *\/\r\n        transform: none; \r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero-section relative min-h-screen flex items-center justify-center py-24 px-4 md:px-8 lg:px-16\">\r\n    \r\n    <div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div>\r\n    <div class=\"nebula nebula-1\" style=\"--scale: 0.8;\"><\/div>\r\n    <div class=\"nebula nebula-2\" style=\"--scale: 1.2;\"><\/div>\r\n\r\n    <svg class=\"floating-planet planet-1\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"#5ed5e4\" opacity=\"0.8\"\/>\r\n        <circle cx=\"30\" cy=\"30\" r=\"10\" fill=\"#81E6D9\" opacity=\"0.6\"\/>\r\n    <\/svg>\r\n    <svg class=\"floating-planet planet-2\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"#fdbf2a\" opacity=\"0.8\"\/>\r\n        <path d=\"M20 50 C 20 27.9, 80 27.9, 80 50 C 80 72.1, 20 72.1, 20 50 Z\" stroke=\"#ff8c61\" stroke-width=\"8\" fill=\"none\"\/>\r\n    <\/svg>\r\n\r\n    <div class=\"max-w-7xl w-full mx-auto grid lg:grid-cols-2 items-center gap-16 relative z-10\">\r\n        <div class=\"text-center lg:text-left\">\r\n            <h1 class=\"text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6 font-fredoka-one drop-shadow-lg\">\r\n                <span class=\"text-[#5ed5e4] inline-block animate-bounce-in headline-word-1\">Welcome<\/span>\r\n                <span class=\"inline-block animate-bounce-in headline-word-2\">to<\/span>\r\n                <span class=\"inline-block animate-bounce-in headline-word-3\">Our<\/span>\r\n                <span class=\"text-[#fdbf2a] inline-block animate-bounce-in headline-word-4\">Learning<\/span>\r\n                <span class=\"text-[#fdbf2a] inline-block animate-bounce-in headline-word-5\">Galaxy<\/span><span class=\"text-[#fdbf2a] inline-block animate-bounce-in headline-word-6\">!<\/span>\r\n            <\/h1>\r\n            <p class=\"text-gray-300 text-lg sm:text-xl md:text-2xl mb-10 max-w-lg mx-auto lg:mx-0 animate-fade-in\">\r\n                Embark on a <span class=\"text-[#ff8c61] font-semibold\">fun-filled adventure<\/span> of knowledge and creativity with amazing stories, videos, and activities!\r\n            <\/p>\r\n            <div class=\"animate-fade-in\" style=\"animation-delay: 1.8s;\">\r\n                <a href=\"https:\/\/genbecloud.com\/mastrly\/shop\/\" class=\"btn-primary shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75\">\r\n                    <i class=\"fas fa-rocket mr-4 text-2xl\"><\/i> Start Your Cosmic Journey!\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"flex justify-center items-center relative animate-fade-in\" style=\"animation-delay: 2.1s;\">\r\n            <svg class=\"w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 float-hero-animation glow-pulse-animation\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                <defs>\r\n                    <linearGradient id=\"astronautGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                        <stop offset=\"0%\" stop-color=\"#81E6D9\" \/>\r\n                        <stop offset=\"100%\" stop-color=\"#5ed5e4\" \/>\r\n                    <\/linearGradient>\r\n                <\/defs>\r\n                <circle cx=\"50\" cy=\"30\" r=\"15\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <rect x=\"35\" y=\"40\" width=\"30\" height=\"30\" rx=\"8\" ry=\"8\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <rect x=\"25\" y=\"45\" width=\"10\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <rect x=\"65\" y=\"45\" width=\"10\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <rect x=\"40\" y=\"70\" width=\"10\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <rect x=\"50\" y=\"70\" width=\"10\" height=\"20\" rx=\"5\" ry=\"5\" fill=\"url(#astronautGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <path d=\"M42 27 C45 22 55 22 58 27 L55 32 C52 27 48 27 45 32 L42 27 Z\" fill=\"#09263d\" stroke=\"#FFFFFF\" stroke-width=\"1\"\/>\r\n            <\/svg>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc94d4a e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"fc94d4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b73562 elementor-widget elementor-widget-html\" data-id=\"2b73562\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* Apply base fonts *\/\r\nbody {\r\n    font-family: 'Inter', sans-serif;\r\n}\r\n.font-fredoka-one {\r\n    font-family: 'Fredoka One', cursive;\r\n}\r\n\r\n\/* === Section Styling and Padding Fix (REDUCED TO 3rem) === *\/\r\n.about-section {\r\n    background-color: #09263d; \/* Mastrly dark blue *\/\r\n    background-image: radial-gradient(circle at center, #10314f 0%, #09263d 70%);\r\n    position: relative;\r\n    overflow: hidden;\r\n    \r\n    \/* FIX 1: SECTION VERTICAL SPACING DECREASE (NOW 3rem) *\/\r\n    padding-top: 3rem !important; \r\n    padding-bottom: 3rem !important;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n    .about-section {\r\n        padding-top: 3rem !important; \r\n        padding-bottom: 3rem !important;\r\n    }\r\n}\r\n\r\n\r\n\/* Star animations *\/\r\n.star {\r\n    position: absolute;\r\n    background-color: white;\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n    animation: twinkle 5s infinite ease-in-out;\r\n    z-index: 0;\r\n}\r\n\r\n.star:nth-child(1) { top: 10%; left: 20%; width: 2px; height: 2px; animation-delay: 0s; }\r\n.star:nth-child(2) { top: 30%; left: 70%; width: 3px; height: 3px; animation-delay: 1.5s; }\r\n.star:nth-child(3) { top: 60%; left: 40%; width: 2px; height: 2px; animation-delay: 3s; }\r\n.star:nth-child(4) { top: 80%; left: 10%; width: 1px; height: 1px; animation-delay: 0.5s; }\r\n.star:nth-child(5) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 2.2s; }\r\n\r\n@keyframes twinkle {\r\n    0%, 100% { opacity: 0; transform: scale(0.5); }\r\n    50% { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n\/* Nebula\/Galaxy Swirl *\/\r\n.nebula {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle at center, rgba(253, 191, 42, 0.2) 0%, rgba(94, 213, 228, 0.2) 50%, transparent 70%);\r\n    border-radius: 50%;\r\n    filter: blur(50px);\r\n    animation: nebula-float 15s infinite ease-in-out alternate;\r\n    z-index: 0;\r\n}\r\n.nebula-1 { top: 70%; left: 5%; transform: scale(0.8); animation-delay: 0s; }\r\n.nebula-2 { bottom: 70%; right: 5%; transform: scale(1.2); animation-delay: 7s; }\r\n\r\n@keyframes nebula-float {\r\n    0% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n    50% { transform: translate(20px, 20px) scale(var(--scale, 1.1)); opacity: 0.7; }\r\n    100% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n}\r\n\r\n\/* Lightbulb\/Idea SVG animation *\/\r\n@keyframes idea-glow {\r\n    0%, 100% { filter: drop-shadow(0 0 10px rgba(253, 191, 42, 0.6)); }\r\n    50% { filter: drop-shadow(0 0 20px rgba(253, 191, 42, 1)); }\r\n}\r\n\r\n@keyframes float-idea {\r\n    0% { transform: translateY(0px) rotate(0deg); }\r\n    25% { transform: translateY(-10px) rotate(2deg); }\r\n    50% { transform: translateY(0px) rotate(0deg); }\r\n    75% { transform: translateY(10px) rotate(-2deg); }\r\n    100% { transform: translateY(0px) rotate(0deg); }\r\n}\r\n\r\n.idea-svg {\r\n    animation: idea-glow 3s infinite alternate, float-idea 6s infinite ease-in-out;\r\n}\r\n\r\n\/* Button Sizing Optimization *\/\r\n.btn-secondary {\r\n    background-color: #5ed5e4; \/* Mastrly Cyan *\/\r\n    color: #09263d; \/* Mastrly Dark Blue *\/\r\n    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n    \r\n    font-weight: 600;\r\n    border-radius: 9999px; \/* rounded-full equivalent *\/\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    \r\n    \/* Mobile Sizing FIX *\/\r\n    padding: 1rem 1.75rem; \r\n    font-size: 1rem; \/* 16px *\/\r\n    line-height: 1.25;\r\n}\r\n\r\n.btn-secondary:hover {\r\n    background-color: #81e6d9; \/* Lighter Cyan *\/\r\n    transform: translateY(-4px) scale(1.05); \/* Consistent hover lift *\/\r\n    box-shadow: 0 10px 20px rgba(94, 213, 228, 0.5), 0 0 20px rgba(94, 213, 228, 0.3);\r\n}\r\n\r\n\/* Desktop Sizing *\/\r\n@media (min-width: 768px) {\r\n    .btn-secondary {\r\n        padding: 1.25rem 2.5rem; \r\n        font-size: 1.5rem; \r\n    }\r\n}\r\n\r\n\r\n\/* Text fade-in-up animation *\/\r\n.animate-fade-in-up {\r\n    animation: fade-in-up 1s ease-out forwards;\r\n    opacity: 0;\r\n}\r\n\r\n@keyframes fade-in-up {\r\n    0% { opacity: 0; transform: translateY(30px); }\r\n    100% { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.text-delay-1 { animation-delay: 0.3s; }\r\n.text-delay-2 { animation-delay: 0.5s; }\r\n.text-delay-3 { animation-delay: 0.7s; }\r\n<\/style>\r\n<section class=\"about-section relative flex items-center justify-center py-24 px-4 md:px-8 lg:px-16\">\r\n    <div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div>\r\n    <div class=\"nebula nebula-1\" style=\"--scale: 0.8;\"><\/div>\r\n    <div class=\"nebula nebula-2\" style=\"--scale: 1.1;\"><\/div>\r\n\r\n    <div class=\"max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center relative z-10\">\r\n        \r\n        <div class=\"flex justify-center animate-fade-in-up\">\r\n            <svg class=\"w-64 h-64 sm:w-80 sm:h-80 idea-svg\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                <defs>\r\n                    <linearGradient id=\"bulbGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                        <stop offset=\"0%\" stop-color=\"#fdbf2a\" \/> <stop offset=\"100%\" stop-color=\"#ff8c61\" \/> <\/linearGradient>\r\n                <\/defs>\r\n                <path d=\"M50 10 C35 10 25 25 25 40 C25 55 35 70 50 70 C65 70 75 55 75 40 C75 25 65 10 50 10 Z\" fill=\"url(#bulbGradient)\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                <path d=\"M40 45 L45 55 L55 55 L60 45\" stroke=\"#FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                <rect x=\"45\" y=\"70\" width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" fill=\"#A0A0A0\" stroke=\"#FFFFFF\" stroke-width=\"1\"\/>\r\n                <rect x=\"42\" y=\"80\" width=\"16\" height=\"5\" rx=\"2\" ry=\"2\" fill=\"#A0A0A0\" stroke=\"#FFFFFF\" stroke-width=\"1\"\/>\r\n                <rect x=\"40\" y=\"85\" width=\"20\" height=\"5\" rx=\"2\" ry=\"2\" fill=\"#A0A0A0\" stroke=\"#FFFFFF\" stroke-width=\"1\"\/>\r\n            <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"text-center lg:text-left\">\r\n            <h2 class=\"text-white text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-8 font-fredoka-one animate-fade-in-up text-delay-1\">\r\n                <span class=\"text-[#ff8c61]\">Discover<\/span> Our <span class=\"text-[#5ed5e4]\">Mission<\/span>\r\n            <\/h2>\r\n            <p class=\"text-gray-300 text-lg sm:text-xl md:text-2xl mb-12 max-w-xl mx-auto lg:mx-0 font-inter animate-fade-in-up text-delay-2\">\r\n                We believe learning should be an <span class=\"text-[#fdbf2a] font-semibold\">exciting adventure<\/span>! Our mission is to help kids like you explore new worlds of ideas, boost your creativity, and discover how <span class=\"text-[#5ed5e4] font-semibold\">fun learning<\/span> can be!\r\n            <\/p>\r\n            <div class=\"animate-fade-in-up text-delay-3\">\r\n                <a href=\"https:\/\/genbecloud.com\/mastrly\/shop\/\" class=\"btn-secondary inline-flex items-center rounded-full font-semibold shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-cyan-300 focus:ring-opacity-75\">\r\n                    <i class=\"fas fa-book-open mr-4 text-2xl\"><\/i> Explore Our Learning Galaxy\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4290eb5 e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"4290eb5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68fa584 elementor-widget elementor-widget-html\" data-id=\"68fa584\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n<style>\r\n    \/* Apply base fonts (Assuming these are globally defined) *\/\r\n    body {\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n    .font-fredoka-one {\r\n        font-family: 'Fredoka One', cursive;\r\n    }\r\n\r\n    \/* === NEW MODIFICATION: TEXT SPACING REMOVAL === *\/\r\n    .toolkit-title-spacing {\r\n        margin-bottom: 0.5rem !important; \/* Reduced from mb-6 (1.5rem) *\/\r\n    }\r\n\r\n    .toolkit-description-spacing {\r\n        margin-bottom: 3rem !important; \/* Reduced from mb-16 (4rem) to 3rem *\/\r\n    }\r\n    \/* === END NEW MODIFICATION === *\/\r\n\r\n\r\n    \/* === Section Styling and Padding Fix === *\/\r\n    .toolkit-section {\r\n        background-color: #09263d; \/* Mastrly dark blue *\/\r\n        background-image: radial-gradient(circle at center, #10314f 0%, #09263d 70%);\r\n        position: relative;\r\n        overflow: hidden;\r\n        \r\n        \/* FIX 1: SECTION VERTICAL SPACING DECREASE (4rem max) *\/\r\n        padding-top: 4rem !important;\r\n        padding-bottom: 4rem !important;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .toolkit-section {\r\n            padding-top: 4rem !important; \r\n            padding-bottom: 4rem !important;\r\n        }\r\n    }\r\n\r\n\r\n    \/* Star animations *\/\r\n    .star {\r\n        position: absolute;\r\n        background-color: white;\r\n        border-radius: 50%;\r\n        opacity: 0;\r\n        animation: twinkle 5s infinite ease-in-out;\r\n        z-index: 0;\r\n    }\r\n\r\n    .star:nth-child(1) { top: 10%; left: 20%; width: 2px; height: 2px; animation-delay: 0s; }\r\n    .star:nth-child(2) { top: 30%; left: 70%; width: 3px; height: 3px; animation-delay: 1.5s; }\r\n    .star:nth-child(3) { top: 60%; left: 40%; width: 2px; height: 2px; animation-delay: 3s; }\r\n    .star:nth-child(4) { top: 80%; left: 10%; width: 1px; height: 1px; animation-delay: 0.5s; }\r\n    .star:nth-child(5) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 2.2s; }\r\n    \r\n    @keyframes twinkle {\r\n        0%, 100% { opacity: 0; transform: scale(0.5); }\r\n        50% { opacity: 1; transform: scale(1); }\r\n    }\r\n    \r\n    \/* Nebula\/Galaxy Swirl *\/\r\n    .nebula {\r\n        position: absolute;\r\n        width: 300px;\r\n        height: 300px;\r\n        background: radial-gradient(circle at center, rgba(253, 191, 42, 0.2) 0%, rgba(94, 213, 228, 0.2) 50%, transparent 70%);\r\n        border-radius: 50%;\r\n        filter: blur(50px);\r\n        animation: nebula-float 15s infinite ease-in-out alternate;\r\n        z-index: 0;\r\n    }\r\n    .nebula-1 { top: 15%; right: 5%; transform: scale(0.9); animation-delay: 0s; }\r\n    .nebula-2 { bottom: 15%; left: 5%; transform: scale(1.1); animation-delay: 7s; }\r\n\r\n    @keyframes nebula-float {\r\n        0% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n        50% { transform: translate(20px, 20px) scale(var(--scale, 1.1)); opacity: 0.7; }\r\n        100% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n    }\r\n\r\n    \/* Enhanced Card Styling *\/\r\n    .content-card {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 1.5rem; \/* 24px *\/\r\n        padding: 2rem;\r\n        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n        height: 100%;\r\n    }\r\n    .content-card:hover {\r\n        transform: translateY(-12px);\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .card-icon-wrapper {\r\n        width: 5rem; \/* 80px *\/\r\n        height: 5rem; \/* 80px *\/\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 1.5rem;\r\n        transition: transform 0.4s ease;\r\n        font-size: 2.5rem; \/* 40px *\/\r\n        color: #09263d;\r\n    }\r\n\r\n    .content-card:hover .card-icon-wrapper {\r\n        transform: scale(1.1) rotate(5deg);\r\n    }\r\n    \r\n    .icon-bg-1 { background-color: #fdbf2a; }\r\n    .icon-bg-2 { background-color: #5ed5e4; }\r\n    .icon-bg-3 { background-color: #ff8c61; }\r\n\r\n    .card-1:hover { border-color: #fdbf2a; }\r\n    .card-2:hover { border-color: #5ed5e4; }\r\n    .card-3:hover { border-color: #ff8c61; }\r\n\r\n    \/* Button Sizing Optimization *\/\r\n    .btn-toolkit {\r\n        background-color: #ff8c61; \/* Mastrly Orange *\/\r\n        color: #ffffff;\r\n        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n\r\n        font-weight: 600;\r\n        border-radius: 9999px; \/* rounded-full equivalent *\/\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        \/* Mobile Sizing FIX *\/\r\n        padding: 1rem 1.75rem; \r\n        font-size: 1rem; \/* 16px *\/\r\n    }\r\n    .btn-toolkit:hover {\r\n        background-color: #e67a50; \/* Darker Orange *\/\r\n        transform: translateY(-4px) scale(1.05); \/* Consistent hover lift *\/\r\n        box-shadow: 0 10px 20px rgba(255, 140, 97, 0.5), 0 0 20px rgba(255, 140, 97, 0.3);\r\n    }\r\n\r\n    \/* Desktop Sizing *\/\r\n    @media (min-width: 768px) {\r\n        .btn-toolkit {\r\n            padding: 1.25rem 2.5rem; \/* Larger desktop padding *\/\r\n            font-size: 1.5rem; \/* Larger desktop font size *\/\r\n        }\r\n    }\r\n\r\n\r\n    \/* Text fade-in-up animation *\/\r\n    .animate-fade-in-up {\r\n        animation: fade-in-up 1s ease-out forwards;\r\n        opacity: 0;\r\n    }\r\n\r\n    @keyframes fade-in-up {\r\n        0% { opacity: 0; transform: translateY(30px); }\r\n        100% { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .text-delay-1 { animation-delay: 0.3s; }\r\n    .text-delay-2 { animation-delay: 0.5s; }\r\n    .text-delay-3 { animation-delay: 0.7s; }\r\n<\/style>\r\n<section class=\"toolkit-section py-24 px-4 md:px-8 lg:px-16\">\r\n    <div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div>\r\n    <div class=\"nebula nebula-1\"><\/div>\r\n    <div class=\"nebula nebula-2\"><\/div>\r\n\r\n    <div class=\"max-w-6xl mx-auto text-center relative z-10\">\r\n        <div class=\"animate-fade-in-up text-delay-1\">\r\n            <h2 class=\"toolkit-title-spacing text-white text-3xl sm:text-4xl md:text-5xl font-bold leading-tight font-fredoka-one\">\r\n                <span class=\"text-[#fdbf2a]\">Your Learning<\/span> <span class=\"text-[#ff8c61]\">Toolkit<\/span>!\r\n            <\/h2>\r\n            <p class=\"toolkit-description-spacing text-gray-300 text-lg sm:text-xl md:text-2xl max-w-3xl mx-auto font-inter\">\r\n                Get ready to explore a universe of knowledge with our super cool learning resources! We have everything you need to learn, play, and grow.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10 mb-20\">\r\n            <div class=\"animate-fade-in-up text-delay-2\">\r\n                <div class=\"content-card card-1 flex flex-col items-center text-center\">\r\n                    <div class=\"card-icon-wrapper icon-bg-1\">\r\n                        <i class=\"fas fa-book-open\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Insightful Ebooks<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">\r\n                        Dive into amazing stories, explore fascinating facts, and embark on thrilling adventures with our digital books. Perfect for curious minds!\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up text-delay-3\">\r\n                <div class=\"content-card card-2 flex flex-col items-center text-center\">\r\n                    <div class=\"card-icon-wrapper icon-bg-2\">\r\n                        <i class=\"fas fa-video\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Awesome Videos<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">\r\n                        Watch, learn, and create with our fun video lessons! Our expert guides make tricky topics easy and super exciting with animated lessons.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up\" style=\"animation-delay: 0.9s\">\r\n                <div class=\"content-card card-3 flex flex-col items-center text-center\">\r\n                    <div class=\"card-icon-wrapper icon-bg-3\">\r\n                        <i class=\"fas fa-pencil-ruler\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Creative Activities<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">\r\n                        Get hands-on with our creative challenges, drawing guides, and activity sheets. Practice what you learn and create your own masterpieces!\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"animate-fade-in-up\" style=\"animation-delay: 1.1s\">\r\n            <a href=\"https:\/\/genbecloud.com\/mastrly\/shop\/\" class=\"btn-toolkit inline-flex items-center rounded-full font-semibold shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75\">\r\n                <i class=\"fas fa-compass mr-4 text-2xl\"><\/i> Explore All Resources\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca5a166 e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"ca5a166\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d733371 elementor-widget elementor-widget-html\" data-id=\"d733371\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* Apply base fonts (Assuming these are globally defined) *\/\r\n    body {\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n    .font-fredoka-one {\r\n        font-family: 'Fredoka One', cursive;\r\n    }\r\n\r\n    \/* === Section Styling and Padding Fix (REDUCED TO 3rem) === *\/\r\n    .journey-section {\r\n        background-color: #09263d; \/* Mastrly dark blue *\/\r\n        background-image: radial-gradient(circle at center, #10314f 0%, #09263d 70%);\r\n        position: relative;\r\n        overflow: hidden;\r\n        \r\n        \/* FIX 1: SECTION VERTICAL SPACING DECREASE (NOW 3rem) *\/\r\n        padding-top: 3rem !important; \r\n        padding-bottom: 3rem !important;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .journey-section {\r\n            padding-top: 3rem !important; \r\n            padding-bottom: 3rem !important;\r\n        }\r\n    }\r\n\r\n\r\n    \/* Star animations *\/\r\n    .star {\r\n        position: absolute;\r\n        background-color: white;\r\n        border-radius: 50%;\r\n        opacity: 0;\r\n        animation: twinkle 5s infinite ease-in-out;\r\n        z-index: 0;\r\n    }\r\n\r\n    .star:nth-child(1) { top: 10%; left: 20%; width: 2px; height: 2px; animation-delay: 0s; }\r\n    .star:nth-child(2) { top: 30%; left: 70%; width: 3px; height: 3px; animation-delay: 1.5s; }\r\n    .star:nth-child(3) { top: 60%; left: 40%; width: 2px; height: 2px; animation-delay: 3s; }\r\n    .star:nth-child(4) { top: 80%; left: 10%; width: 1px; height: 1px; animation-delay: 0.5s; }\r\n    .star:nth-child(5) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 2.2s; }\r\n    \r\n    @keyframes twinkle {\r\n        0%, 100% { opacity: 0; transform: scale(0.5); }\r\n        50% { opacity: 1; transform: scale(1); }\r\n    }\r\n\r\n    \/* Nebula\/Galaxy Swirl *\/\r\n    .nebula {\r\n        position: absolute;\r\n        width: 300px;\r\n        height: 300px;\r\n        background: radial-gradient(circle at center, rgba(253, 191, 42, 0.2) 0%, rgba(94, 213, 228, 0.2) 50%, transparent 70%);\r\n        border-radius: 50%;\r\n        filter: blur(50px);\r\n        animation: nebula-float 15s infinite ease-in-out alternate;\r\n        z-index: 0;\r\n    }\r\n    .nebula-1 { top: 10%; left: -5%; transform: scale(0.8); animation-delay: 0s; }\r\n    .nebula-2 { bottom: 5%; right: -10%; transform: scale(1.2); animation-delay: 7s; }\r\n\r\n    @keyframes nebula-float {\r\n        0% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n        50% { transform: translate(20px, 20px) scale(var(--scale, 1.1)); opacity: 0.7; }\r\n        100% { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0.5; }\r\n    }\r\n\r\n    \/* Enhanced Journey Card Styling *\/\r\n    .journey-card {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 1.5rem;\r\n        padding: 2.5rem 1.5rem;\r\n        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n        height: 100%;\r\n        position: relative;\r\n    }\r\n    .journey-card:hover {\r\n        transform: translateY(-12px);\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .journey-icon {\r\n        width: 5rem;\r\n        height: 5rem;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-bottom: 1.5rem;\r\n        transition: transform 0.4s ease;\r\n        font-size: 2.5rem;\r\n        color: #09263d;\r\n    }\r\n\r\n    .journey-card:hover .journey-icon {\r\n        transform: scale(1.1) rotate(5deg);\r\n    }\r\n    \r\n    .icon-bg-1 { background-color: #fdbf2a; }\r\n    .icon-bg-2 { background-color: #5ed5e4; }\r\n    .icon-bg-3 { background-color: #ff8c61; }\r\n    .icon-bg-4 { background-color: #81e6d9; }\r\n\r\n    .card-1:hover { border-color: #fdbf2a; }\r\n    .card-2:hover { border-color: #5ed5e4; }\r\n    .card-3:hover { border-color: #ff8c61; }\r\n    .card-4:hover { border-color: #81e6d9; }\r\n\r\n    \/* FIX 2: Button Sizing Optimization *\/\r\n    .btn-journey {\r\n        background-color: #ff8c61; \/* Mastrly Orange *\/\r\n        color: #ffffff;\r\n        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n\r\n        font-weight: 600;\r\n        border-radius: 9999px; \/* rounded-full equivalent *\/\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        \r\n        \/* Mobile Sizing FIX: Single-line on mobile *\/\r\n        padding: 1rem 1.75rem; \r\n        font-size: 1rem; \/* 16px *\/\r\n        line-height: 1.25;\r\n    }\r\n    .btn-journey:hover {\r\n        background-color: #e67a50; \/* Darker Orange *\/\r\n        transform: translateY(-4px) scale(1.05); \/* Consistent hover lift *\/\r\n        box-shadow: 0 10px 20px rgba(255, 140, 97, 0.5), 0 0 20px rgba(255, 140, 97, 0.3);\r\n    }\r\n\r\n    \/* Desktop Sizing *\/\r\n    @media (min-width: 768px) {\r\n        .btn-journey {\r\n            padding: 1.25rem 2.5rem; \/* Larger desktop padding *\/\r\n            font-size: 1.5rem; \/* Larger desktop font size *\/\r\n        }\r\n    }\r\n\r\n\r\n    \/* Text fade-in-up animation *\/\r\n    .animate-fade-in-up {\r\n        animation: fade-in-up 1s ease-out forwards;\r\n        opacity: 0;\r\n    }\r\n\r\n    @keyframes fade-in-up {\r\n        0% { opacity: 0; transform: translateY(30px); }\r\n        100% { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .text-delay-1 { animation-delay: 0.3s; }\r\n    .text-delay-2 { animation-delay: 0.5s; }\r\n    .text-delay-3 { animation-delay: 0.7s; }\r\n    .text-delay-4 { animation-delay: 0.9s; }\r\n    .text-delay-5 { animation-delay: 1.1s; }\r\n    .text-delay-6 { animation-delay: 1.3s; }\r\n    \/* === MODIFICATION END === *\/\r\n<\/style>\r\n\r\n<section class=\"journey-section py-24 px-4 md:px-8 lg:px-16\">\r\n    <div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div>\r\n    <div class=\"nebula nebula-1\"><\/div>\r\n    <div class=\"nebula nebula-2\"><\/div>\r\n\r\n    <div class=\"max-w-7xl mx-auto text-center relative z-10\">\r\n        <div class=\"animate-fade-in-up text-delay-1\">\r\n            <h2 class=\"text-white text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-6 font-fredoka-one\">\r\n                <span class=\"text-[#fdbf2a]\">Your Path<\/span> to <span class=\"text-[#ff8c61]\">Super Powers<\/span>!\r\n            <\/h2>\r\n            <p class=\"text-gray-300 text-lg sm:text-xl md:text-2xl mb-20 max-w-3xl mx-auto font-inter\">\r\n                Unlock amazing new abilities and become a <span class=\"text-[#5ed5e4] font-semibold\">super learner<\/span> with our fun and easy learning journey!\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-20\">\r\n            <div class=\"animate-fade-in-up text-delay-2\">\r\n                <div class=\"journey-card card-1 flex flex-col items-center\">\r\n                    <div class=\"journey-icon icon-bg-1\">\r\n                        <i class=\"fas fa-clock\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Learn at Your Speed!<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">Take your time and learn at a pace that's just right for you.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up text-delay-3\">\r\n                <div class=\"journey-card card-2 flex flex-col items-center\">\r\n                    <div class=\"journey-icon icon-bg-2\">\r\n                        <i class=\"fas fa-brain\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Boost Brain Power!<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">Solve puzzles and challenges to make your brain super strong!<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up text-delay-4\">\r\n                <div class=\"journey-card card-3 flex flex-col items-center\">\r\n                    <div class=\"journey-icon icon-bg-3\">\r\n                        <i class=\"fas fa-palette\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Unleash Creativity!<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">Draw, build, and imagine anything you want with our tools!<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up text-delay-5\">\r\n                <div class=\"journey-card card-4 flex flex-col items-center\">\r\n                    <div class=\"journey-icon icon-bg-4\">\r\n                        <i class=\"fas fa-user-graduate\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-white text-2xl font-bold mb-2 font-fredoka-one\">Become Confident!<\/h3>\r\n                    <p class=\"text-gray-400 text-md font-inter flex-grow\">Feel proud and ready to learn anything new with a big smile!<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"animate-fade-in-up text-delay-6\">\r\n            <a href=\"https:\/\/genbecloud.com\/mastrly\/shop\/\" class=\"btn-journey inline-flex items-center rounded-full font-semibold shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75\">\r\n                <i class=\"fas fa-star mr-4 text-2xl\"><\/i> Start Your Super Journey!\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-088c7a8 e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"088c7a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-245cddb elementor-widget elementor-widget-html\" data-id=\"245cddb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* ... (Existing global styles like body, .font-fredoka-one) ... *\/\r\n\r\n    \/* === Section Styling and Padding Fix (REDUCED TO 3rem) === *\/\r\n    .community-section {\r\n        background-color: #09263d;\r\n        background-image: radial-gradient(circle at center, #10314f 0%, #09263d 70%);\r\n        position: relative;\r\n        overflow: hidden;\r\n        \r\n        \/* FIX 1: SECTION VERTICAL SPACING DECREASE (NOW 3rem) *\/\r\n        padding-top: 3rem !important; \r\n        padding-bottom: 3rem !important;\r\n    }\r\n\r\n    @media (min-width: 640px) {\r\n        .community-section {\r\n            padding-top: 3rem !important; \r\n            padding-bottom: 3rem !important;\r\n        }\r\n    }\r\n\r\n\r\n    \/* ... (Existing Star and Nebula animations) ... *\/\r\n    .star { \/* ... *\/ animation: twinkle 5s infinite ease-in-out; z-index: 0; }\r\n    \/* ... (star nth-child styles) ... *\/\r\n    @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }\r\n    .nebula { \/* ... *\/ animation: nebula-float 15s infinite ease-in-out alternate; z-index: 0; }\r\n    \/* ... (nebula-1, nebula-2, @keyframes nebula-float) ... *\/\r\n\r\n\r\n    \/* Enhanced CTA Container Styling *\/\r\n    .cta-container {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 2rem; \/* 32px *\/\r\n        padding: 4rem 2rem;\r\n        transition: box-shadow 0.4s ease;\r\n    }\r\n    .cta-container:hover {\r\n        box-shadow: 0 20px 50px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* FIX 2: Button Sizing Optimization *\/\r\n    .btn-community {\r\n        background-color: #ff8c61; \/* Mastrly Orange *\/\r\n        color: #ffffff;\r\n        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n        \r\n        font-weight: 600;\r\n        border-radius: 9999px; \/* rounded-full equivalent *\/\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n\r\n        \/* Mobile Sizing FIX: Single-line on mobile *\/\r\n        padding: 1rem 1.75rem; \r\n        font-size: 1rem; \/* 16px *\/\r\n        line-height: 1.25;\r\n    }\r\n    .btn-community:hover {\r\n        background-color: #e67a50; \/* Darker Orange *\/\r\n        transform: translateY(-4px) scale(1.05); \/* Consistent hover lift *\/\r\n        box-shadow: 0 10px 20px rgba(255, 140, 97, 0.5), 0 0 20px rgba(255, 140, 97, 0.3); \/* Simplified shadow *\/\r\n    }\r\n\r\n    \/* Rocket icon animation inside button *\/\r\n    .btn-community:hover .fa-rocket {\r\n        animation: rocket-launch 0.5s forwards;\r\n    }\r\n\r\n    @keyframes rocket-launch {\r\n        0% { transform: translateX(0); }\r\n        50% { transform: translateX(10px) rotate(10deg); }\r\n        100% { transform: translateX(0); }\r\n    }\r\n\r\n    \/* Desktop Sizing *\/\r\n    @media (min-width: 768px) {\r\n        .btn-community {\r\n            padding: 1.25rem 2.5rem; \/* Larger desktop padding *\/\r\n            font-size: 1.5rem; \/* Larger desktop font size *\/\r\n        }\r\n    }\r\n\r\n\r\n    \/* Text fade-in-up animation *\/\r\n    .animate-fade-in-up {\r\n        animation: fade-in-up 1s ease-out forwards;\r\n        opacity: 0;\r\n    }\r\n\r\n    @keyframes fade-in-up {\r\n        0% { opacity: 0; transform: translateY(30px); }\r\n        100% { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .text-delay-1 { animation-delay: 0.3s; }\r\n    .text-delay-2 { animation-delay: 0.5s; }\r\n    .text-delay-3 { animation-delay: 0.7s; }\r\n    \/* === MODIFICATION END === *\/\r\n<\/style>\r\n\r\n<section class=\"community-section py-24 px-4 md:px-8 lg:px-16\">\r\n    <div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div><div class=\"star\"><\/div>\r\n    <div class=\"nebula nebula-1\"><\/div>\r\n    <div class=\"nebula nebula-2\"><\/div>\r\n\r\n    <div class=\"max-w-4xl mx-auto text-center relative z-10\">\r\n        <div class=\"cta-container\">\r\n            <div class=\"animate-fade-in-up text-delay-1\">\r\n                <h2 class=\"text-white text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-6 font-fredoka-one\">\r\n                    <span class=\"text-[#fdbf2a]\">Ready<\/span> to <span class=\"text-[#ff8c61]\">Launch<\/span>?\r\n                <\/h2>\r\n                <p class=\"text-gray-300 text-lg sm:text-xl md:text-2xl mb-12 max-w-2xl mx-auto font-inter\">\r\n                    Join our growing galaxy of young explorers! Discover new passions, make learning exciting, and unlock your child's full potential.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"animate-fade-in-up text-delay-2\">\r\n                <a href=\"https:\/\/genbecloud.com\/mastrly\/shop\/\" class=\"btn-community inline-flex items-center rounded-full font-semibold shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-orange-300 focus:ring-opacity-75\">\r\n                    <i class=\"fas fa-rocket mr-4 text-2xl\"><\/i> Join Our Learning Galaxy!\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Welcome to Our Learning Galaxy! Embark on a fun-filled adventure of knowledge and creativity with amazing stories, videos, and activities!<\/p>\n","protected":false},"author":37,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2013","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly<\/title>\n<meta name=\"description\" content=\"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly\" \/>\n<meta property=\"og:description\" content=\"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/genbecloud.com\/mastrly\/kids\/\" \/>\n<meta property=\"og:site_name\" content=\"Mastrly\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T11:08:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/genbecloud.com\/mastrly\/kids\/\",\"url\":\"https:\/\/genbecloud.com\/mastrly\/kids\/\",\"name\":\"Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly\",\"isPartOf\":{\"@id\":\"https:\/\/genbecloud.com\/mastrly\/#website\"},\"datePublished\":\"2025-07-07T09:37:17+00:00\",\"dateModified\":\"2025-11-04T11:08:50+00:00\",\"description\":\"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.\",\"breadcrumb\":{\"@id\":\"https:\/\/genbecloud.com\/mastrly\/kids\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/genbecloud.com\/mastrly\/kids\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/genbecloud.com\/mastrly\/kids\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/genbecloud.com\/mastrly\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kids\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/genbecloud.com\/mastrly\/#website\",\"url\":\"https:\/\/genbecloud.com\/mastrly\/\",\"name\":\"Mastrly\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/genbecloud.com\/mastrly\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly","description":"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly","og_description":"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.","og_url":"https:\/\/genbecloud.com\/mastrly\/kids\/","og_site_name":"Mastrly","article_modified_time":"2025-11-04T11:08:50+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/genbecloud.com\/mastrly\/kids\/","url":"https:\/\/genbecloud.com\/mastrly\/kids\/","name":"Kids Books Online \u2013 Kids Ebooks, Stories, Books at Mastrly","isPartOf":{"@id":"https:\/\/genbecloud.com\/mastrly\/#website"},"datePublished":"2025-07-07T09:37:17+00:00","dateModified":"2025-11-04T11:08:50+00:00","description":"Explore kids books online at Mastrly\u2014discover colorful stories, ebooks, and educational resources. Ignite imagination, inspire reading, and download today.","breadcrumb":{"@id":"https:\/\/genbecloud.com\/mastrly\/kids\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/genbecloud.com\/mastrly\/kids\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/genbecloud.com\/mastrly\/kids\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/genbecloud.com\/mastrly\/"},{"@type":"ListItem","position":2,"name":"Kids"}]},{"@type":"WebSite","@id":"https:\/\/genbecloud.com\/mastrly\/#website","url":"https:\/\/genbecloud.com\/mastrly\/","name":"Mastrly","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/genbecloud.com\/mastrly\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/pages\/2013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/comments?post=2013"}],"version-history":[{"count":130,"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/pages\/2013\/revisions"}],"predecessor-version":[{"id":3072,"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/pages\/2013\/revisions\/3072"}],"wp:attachment":[{"href":"https:\/\/genbecloud.com\/mastrly\/wp-json\/wp\/v2\/media?parent=2013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}