{"id":7119,"date":"2026-03-26T00:00:47","date_gmt":"2026-03-26T00:00:47","guid":{"rendered":"https:\/\/raistheme.com\/?page_id=7119"},"modified":"2026-04-06T11:45:19","modified_gmt":"2026-04-06T11:45:19","slug":"bluey","status":"publish","type":"page","link":"https:\/\/raistheme.com\/tools\/font-generator\/bluey\/","title":{"rendered":"Bluey Font Generator \u2013 Create Stylish Bluey Text Free"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7119\" class=\"elementor elementor-7119\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d8c79f5 e-con-full e-flex e-con e-parent\" data-id=\"1d8c79f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57bbf4b9 elementor-widget elementor-widget-shortcode\" data-id=\"57bbf4b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!-- Font Awesome for icons -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <!-- html2canvas for image download -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n    \r\n    <style>\r\n        \/* CSS Reset *\/\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        \/* Main Wrapper *\/\r\n        .main-wrapper {\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 50%, #90caf9 100%);\r\n            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial', sans-serif;\r\n            padding: 20px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            overflow-x: hidden;\r\n        }\r\n        \r\n        \/* Header Wrapper *\/\r\n        .header-wrapper {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n            \/* Animation removed as requested *\/\r\n        }\r\n        \r\n        .header-text {\r\n            font-size: clamp(2.5rem, 5vw, 3.7rem);\r\n            font-weight: 700;\r\n            background: linear-gradient(45deg, #1e88e5, #42a5f5, #64b5f6, #90caf9);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n            border-radius: 15px;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .sub-heading {\r\n            font-size: clamp(1rem, 2.5vw, 1.3rem);\r\n            font-weight: 500;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n            margin-top: 15px;\r\n            display: block;\r\n            letter-spacing: 0.5px;\r\n        }\r\n        \r\n        \/* Content Wrapper *\/\r\n        .content-wrapper {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 30px;\r\n        }\r\n        \r\n        \/* Input Section Wrapper *\/\r\n        .input-section-wrapper {\r\n            background: rgba(255, 255, 255, 0.85);\r\n            border-radius: 20px;\r\n            padding: 25px;\r\n            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);\r\n            backdrop-filter: blur(8px);\r\n            border: 1px solid rgba(255, 255, 255, 0.18);\r\n        }\r\n        \r\n        .input-label {\r\n            font-size: 1.2rem;\r\n            color: #1565c0;\r\n            margin-bottom: 15px;\r\n            display: block;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .input-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .text-input {\r\n            width: 100% !important;\r\n            padding: 15px 20px !important;\r\n            font-size: 1.2rem !important;\r\n            border: 3px solid transparent !important;\r\n            border-radius: 15px !important;\r\n            background: linear-gradient(white, white) padding-box,\r\n                        linear-gradient(45deg, #42a5f5, #64b5f6, #90caf9, #bbdefb) border-box !important;\r\n            transition: all 0.3s ease !important;\r\n            font-family: inherit !important;\r\n            outline: none !important;\r\n        }\r\n        \r\n        .text-input:focus {\r\n            border-radius: 15px;\r\n            background: linear-gradient(white, white) padding-box,\r\n                        linear-gradient(45deg, #1e88e5, #42a5f5, #64b5f6, #90caf9) border-box;\r\n            box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);\r\n        }\r\n        \r\n        \/* Control Panel Heading *\/\r\n        .control-panel-heading {\r\n            font-size: 1.5rem;\r\n            color: #1565c0;\r\n            margin-top: 25px;\r\n            margin-bottom: 15px;\r\n            font-weight: bold;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .control-panel-heading i {\r\n            color: #42a5f5;\r\n        }\r\n        \r\n        \/* Control Panel Wrapper *\/\r\n        .control-panel-wrapper {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 20px;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .control-card {\r\n            border-radius: 15px;\r\n            padding: 20px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            background: white;\r\n        }\r\n        \r\n        .control-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .control-label {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            font-size: 1rem;\r\n            color: #1565c0;\r\n            margin-bottom: 10px;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .control-label i {\r\n            color: #42a5f5;\r\n        }\r\n        \r\n        .control-input {\r\n            width: 100%;\r\n            padding: 10px;\r\n            border: 2px solid #bbdefb;\r\n            border-radius: 10px;\r\n            font-size: 1rem;\r\n            transition: border-color 0.3s ease;\r\n            font-family: inherit;\r\n        }\r\n        \r\n        .control-input:focus {\r\n            outline: none;\r\n            border-color: #42a5f5;\r\n        }\r\n        \r\n        .slider-container {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .slider {\r\n            flex: 1;\r\n            height: 8px;\r\n            border-radius: 5px;\r\n            background: #bbdefb;\r\n            outline: none;\r\n            -webkit-appearance: none;\r\n        }\r\n        \r\n        .slider::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            width: 20px;\r\n            height: 20px;\r\n            border-radius: 50%;\r\n            background: #42a5f5;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .slider::-moz-range-thumb {\r\n            width: 20px;\r\n            height: 20px;\r\n            border-radius: 50%;\r\n            background: #42a5f5;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .slider-value {\r\n            min-width: 40px;\r\n            text-align: center;\r\n            font-weight: bold;\r\n            color: #1565c0;\r\n        }\r\n        \r\n        \/* Button Wrapper *\/\r\n        .button-wrapper {\r\n            display: flex;\r\n            gap: 15px;\r\n            justify-content: center;\r\n            margin-top: 25px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .action-button {\r\n            padding: 12px 25px;\r\n            font-size: 1.1rem;\r\n            font-weight: bold;\r\n            border: none;\r\n            border-radius: 50px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .action-button::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, #1e88e5, #42a5f5);\r\n            z-index: -1;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .action-button.reset-button::before {\r\n            background: linear-gradient(45deg, #ffb74d, #ffcc80);\r\n        }\r\n        \r\n        .action-button:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .action-button:hover::before {\r\n            background: linear-gradient(45deg, #1565c0, #1e88e5);\r\n        }\r\n        \r\n        .action-button.reset-button:hover::before {\r\n            background: linear-gradient(45deg, #ffa726, #ffb74d);\r\n        }\r\n        \r\n        .action-button span {\r\n            color: white;\r\n        }\r\n        \r\n        \/* Output Section Wrapper *\/\r\n        .output-section-wrapper {\r\n            background: rgba(255, 255, 255, 0.85);\r\n            border-radius: 20px;\r\n            padding: 25px;\r\n            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);\r\n            backdrop-filter: blur(8px);\r\n            border: 1px solid rgba(255, 255, 255, 0.18);\r\n        }\r\n        \r\n        .output-label {\r\n            font-size: 1.2rem;\r\n            color: #1565c0;\r\n            margin-bottom: 15px;\r\n            display: block;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .font-styles-wrapper {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .font-style-card {\r\n            background: white;\r\n            border-radius: 15px;\r\n            padding: 20px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .font-style-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 5px;\r\n            background: linear-gradient(90deg, #1e88e5, #42a5f5, #64b5f6, #90caf9);\r\n        }\r\n        \r\n        .font-style-name {\r\n            font-size: 1rem;\r\n            color: #1565c0;\r\n            margin-bottom: 10px;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .font-preview {\r\n            min-height: 80px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.5rem;\r\n            word-break: break-word;\r\n            text-align: center;\r\n            padding: 10px;\r\n            background: #f5f5f5;\r\n            border-radius: 10px;\r\n            position: relative;\r\n            color: #0d47a1;\r\n            \/* Default fallback font for Unicode *\/\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        }\r\n        \r\n        .copy-button {\r\n            position: absolute;\r\n            top: 10px;\r\n            right: 10px;\r\n            background: #42a5f5;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 30px;\r\n            height: 30px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            opacity: 0.7;\r\n        }\r\n        \r\n        .copy-button:hover {\r\n            opacity: 1;\r\n            background: #1e88e5;\r\n            transform: scale(1.1);\r\n        }\r\n        \r\n        .copy-button.copied {\r\n            background: #4caf50;\r\n        }\r\n        \r\n        \/* Action Bar Wrapper *\/\r\n        .action-bar-wrapper {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 10px;\r\n            justify-content: center;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .action-icon-button {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(45deg, #42a5f5, #64b5f6);\r\n            color: white;\r\n            border: none;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .action-icon-button:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\r\n            background: linear-gradient(45deg, #1e88e5, #42a5f5);\r\n        }\r\n        \r\n        .action-icon-button.download-button {\r\n            background: linear-gradient(45deg, #66bb6a, #81c784);\r\n        }\r\n        \r\n        .action-icon-button.download-button:hover {\r\n            background: linear-gradient(45deg, #4caf50, #66bb6a);\r\n        }\r\n        \r\n        .action-icon-button.share-button {\r\n            background: linear-gradient(45deg, #ffb74d, #ffcc80);\r\n        }\r\n        \r\n        .action-icon-button.share-button:hover {\r\n            background: linear-gradient(45deg, #ffa726, #ffb74d);\r\n        }\r\n        \r\n        \/* Notification Wrapper *\/\r\n        .notification-wrapper {\r\n            position: fixed;\r\n            bottom: 20px;\r\n            right: 20px;\r\n            background: white;\r\n            padding: 15px 20px;\r\n            border-radius: 10px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            transform: translateY(100px);\r\n            opacity: 0;\r\n            transition: all 0.3s ease;\r\n            z-index: 1000;\r\n        }\r\n        \r\n        .notification-wrapper.show {\r\n            transform: translateY(0);\r\n            opacity: 1;\r\n        }\r\n        \r\n        .notification-icon {\r\n            color: #4caf50;\r\n            font-size: 1.2rem;\r\n        }\r\n        \r\n        .notification-text {\r\n            color: #333;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        \/* Responsive Design *\/\r\n        @media (max-width: 992px) {\r\n            .control-panel-wrapper {\r\n                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n            }\r\n            \r\n            .font-styles-wrapper {\r\n                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .header-text {\r\n                font-size: clamp(2rem, 5vw, 3rem);\r\n            }\r\n            \r\n            .control-panel-wrapper {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .font-styles-wrapper {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 600px) {\r\n            .header-text {\r\n                font-size: clamp(1.8rem, 5vw, 2.5rem);\r\n            }\r\n            \r\n            .input-section-wrapper, .output-section-wrapper {\r\n                padding: 15px;\r\n            }\r\n            \r\n            .button-wrapper {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n            \r\n            .action-button {\r\n                width: 100%;\r\n                max-width: 300px;\r\n                justify-content: center;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 400px) {\r\n            .header-text {\r\n                font-size: clamp(1.5rem, 5vw, 2rem);\r\n            }\r\n            \r\n            .main-wrapper {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .control-card {\r\n                padding: 15px;\r\n            }\r\n        }\r\n\r\n        \/* Bluey Content Section Styles *\/\r\n        .bluey-content-wrapper {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            line-height: 1.6;\r\n            color: #2c3e50;\r\n            background: linear-gradient(135deg, #aee2f2 0%, #adcff0 100%);\r\n            padding: 60px 20px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .bluey-main-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .bluey-content-section {\r\n            background: #ffffff;\r\n            border-radius: 20px;\r\n            padding: 50px 40px;\r\n            margin-bottom: 40px;\r\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .bluey-content-section:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);\r\n        }\r\n\r\n        .bluey-content-section::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 5px;\r\n            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n            transition: height 0.3s ease;\r\n        }\r\n\r\n        .bluey-content-section:hover::before {\r\n            height: 8px;\r\n        }\r\n\r\n        .section-one {\r\n            background: linear-gradient(135deg, #e0f2ff 0%, #f0f9ff 100%);\r\n            border: 3px solid transparent;\r\n            background-clip: padding-box;\r\n            position: relative;\r\n        }\r\n\r\n        .section-one::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n            border-radius: 20px;\r\n            z-index: -1;\r\n        }\r\n\r\n        .section-two {\r\n            background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);\r\n            border: 3px solid transparent;\r\n            background-clip: padding-box;\r\n            position: relative;\r\n        }\r\n\r\n        .section-two::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #f59e0b, #ef4444);\r\n            border-radius: 20px;\r\n            z-index: -1;\r\n        }\r\n\r\n        .section-three {\r\n            background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);\r\n            border: 3px solid transparent;\r\n            background-clip: padding-box;\r\n            position: relative;\r\n        }\r\n\r\n        .section-three::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #10b981, #06b6d4);\r\n            border-radius: 20px;\r\n            z-index: -1;\r\n        }\r\n\r\n        .bluey-section-header {\r\n            display: flex;\r\n                align-items: center;\r\n            gap: 15px;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .bluey-icon-wrapper {\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n                justify-content: center;\r\n            font-size: 30px;\r\n            animation: iconFloat 3s ease-in-out infinite;\r\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .icon-one {\r\n            background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n        }\r\n\r\n        .icon-two {\r\n            background: linear-gradient(135deg, #f59e0b, #ef4444);\r\n        }\r\n\r\n        .icon-three {\r\n            background: linear-gradient(135deg, #10b981, #06b6d4);\r\n        }\r\n\r\n        @keyframes iconFloat {\r\n            0%, 100% { transform: translateY(0); }\r\n            50% { transform: translateY(-10px); }\r\n        }\r\n\r\n        .bluey-section-title {\r\n            font-size: 28px;\r\n            font-weight: 700;\r\n            background: linear-gradient(90deg, #f6f8ff 0%, #c1d3ea 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            flex: 1;\r\n        }\r\n\r\n        .bluey-section-text {\r\n            font-size: 16px;\r\n            color: #4a5568;\r\n            margin-bottom: 30px;\r\n            text-align: justify;\r\n        }\r\n\r\n        .bluey-features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 25px;\r\n            margin-top: 30px;\r\n        }\r\n\r\n        .bluey-feature-card {\r\n            background: rgba(255, 255, 255, 0.9);\r\n            padding: 25px;\r\n            border-radius: 15px;\r\n            border-left: 4px solid;\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .feature-card-one {\r\n            border-left-color: #3b82f6;\r\n        }\r\n\r\n        .feature-card-two {\r\n            border-left-color: #f59e0b;\r\n        }\r\n\r\n        .feature-card-three {\r\n            border-left-color: #10b981;\r\n        }\r\n\r\n        .bluey-feature-card:hover {\r\n            transform: translateX(10px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .bluey-feature-icon {\r\n            font-size: 24px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .bluey-feature-title {\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            color: #2c3e50;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .bluey-feature-description {\r\n            font-size: 14px;\r\n            color: #64748b;\r\n        }\r\n\r\n        .bluey-faq-section {\r\n            background: #ffffff;\r\n            border-radius: 20px;\r\n            padding: 50px 40px;\r\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\r\n        }\r\n\r\n        .bluey-faq-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .bluey-faq-title {\r\n            font-size: 32px;\r\n            font-weight: 700;\r\n            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .bluey-faq-subtitle {\r\n            font-size: 16px;\r\n            color: #64748b;\r\n        }\r\n\r\n        .bluey-faq-item {\r\n            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\r\n            border-radius: 12px;\r\n            margin-bottom: 20px;\r\n            overflow: hidden;\r\n            border: 2px solid #e2e8f0;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .bluey-faq-item:hover {\r\n            border-color: #667eea;\r\n            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.1);\r\n        }\r\n\r\n        .bluey-faq-question {\r\n            padding: 20px 25px;\r\n            cursor: pointer;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-weight: 600;\r\n            color: #2c3e50;\r\n            user-select: none;\r\n        }\r\n\r\n        .bluey-faq-toggle {\r\n            font-size: 24px;\r\n            color: #667eea;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .bluey-faq-item.active .bluey-faq-toggle {\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        .bluey-faq-answer {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.3s ease, padding 0.3s ease;\r\n            padding: 0 25px;\r\n            color: #4a5568;\r\n        }\r\n\r\n        .bluey-faq-item.active .bluey-faq-answer {\r\n            max-height: 200px;\r\n            padding: 0 25px 20px 25px;\r\n        }\r\n\r\n        @media (max-width: 992px) {\r\n            .bluey-content-wrapper {\r\n                padding: 40px 15px;\r\n            }\r\n\r\n            .bluey-content-section {\r\n                padding: 40px 30px;\r\n            }\r\n\r\n            .bluey-section-title {\r\n                font-size: 24px;\r\n            }\r\n\r\n            .bluey-features-grid {\r\n                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n                gap: 20px;\r\n            }\r\n\r\n            .bluey-faq-section {\r\n                padding: 40px 30px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .bluey-content-wrapper {\r\n                padding: 30px 12px;\r\n            }\r\n\r\n            .bluey-content-section {\r\n                padding: 30px 20px;\r\n                margin-bottom: 30px;\r\n            }\r\n\r\n            .bluey-section-header {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 10px;\r\n            }\r\n\r\n            .bluey-icon-wrapper {\r\n                width: 50px;\r\n                height: 50px;\r\n                font-size: 24px;\r\n            }\r\n\r\n            .bluey-section-title {\r\n                font-size: 22px;\r\n            }\r\n\r\n            .bluey-section-text {\r\n                font-size: 15px;\r\n            }\r\n\r\n            .bluey-features-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 15px;\r\n            }\r\n\r\n            .bluey-faq-section {\r\n                padding: 30px 20px;\r\n            }\r\n\r\n            .bluey-faq-title {\r\n                font-size: 26px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"main-wrapper\">\r\n        <!-- Header Section -->\r\n        <div class=\"header-wrapper\">\r\n            <h1 class=\"header-text\">Bluey Font Generator \u2013 Create Stylish Bluey Text Free<\/h1>\r\n            <p class=\"sub-heading\">Create stunning, playful text with a touch of Bluey magic<\/p>\r\n        <\/div>\r\n        \r\n        <!-- Content Section -->\r\n        <div class=\"content-wrapper\">\r\n            <!-- Input Section -->\r\n            <div class=\"input-section-wrapper\">\r\n                <label class=\"input-label\">Type your text here:<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"text\" class=\"text-input\" id=\"textInput\" placeholder=\"Start typing...\">\r\n                <\/div>\r\n                \r\n                <!-- Control Panel -->\r\n                <div class=\"control-panel-heading\">\r\n                    <i class=\"fas fa-sliders-h\"><\/i>\r\n                    Customization Options\r\n                <\/div>\r\n                <div class=\"control-panel-wrapper\">\r\n                    <!-- Text Transform Feature -->\r\n                    <div class=\"control-card\">\r\n                        <div class=\"control-label\">\r\n                            <i class=\"fas fa-text-width\"><\/i>\r\n                            Text Transform\r\n                        <\/div>\r\n                        <select class=\"control-input\" id=\"textTransformSelect\">\r\n                            <option value=\"none\">None (Original)<\/option>\r\n                            <option value=\"uppercase\">UPPERCASE<\/option>\r\n                            <option value=\"lowercase\">lowercase<\/option>\r\n                            <option value=\"capitalize\">Capitalize Each Word<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n            \r\n                    <!-- Font Size Adjustment -->\r\n                    <div class=\"control-card\">\r\n                        <div class=\"control-label\">\r\n                            <i class=\"fas fa-text-height\"><\/i>\r\n                            Font Size\r\n                        <\/div>\r\n                        <div class=\"slider-container\">\r\n                            <input type=\"range\" class=\"slider\" id=\"fontSizeSlider\" min=\"12\" max=\"72\" value=\"24\">\r\n                            <div class=\"slider-value\" id=\"fontSizeValue\">24px<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                \r\n                    <!-- Letter Spacing Adjustment -->\r\n                    <div class=\"control-card\">\r\n                        <div class=\"control-label\">\r\n                            <i class=\"fas fa-arrows-alt-h\"><\/i>\r\n                            Letter Spacing\r\n                        <\/div>\r\n                        <div class=\"slider-container\">\r\n                            <input type=\"range\" class=\"slider\" id=\"letterSpacingSlider\" min=\"-2\" max=\"10\" value=\"0\" step=\"0.1\">\r\n                            <div class=\"slider-value\" id=\"letterSpacingValue\">0px<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- Action Buttons -->\r\n                <div class=\"button-wrapper\">\r\n                    <button class=\"action-button reset-button\" id=\"resetButton\">\r\n                        <i class=\"fas fa-redo\"><\/i>\r\n                        <span>Reset<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n                \r\n            <!-- Output Section -->\r\n            <div class=\"output-section-wrapper\">\r\n                <label class=\"output-label\">Bluey Copyable Font Styles:<\/label>\r\n                \r\n                <div class=\"font-styles-wrapper\" id=\"fontStylesWrapper\">\r\n                    <!-- Font Style 1 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Bold Sans<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview1\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"1\">\r\n                            <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                \r\n                    <!-- Font Style 2 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Bubbles<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview2\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"2\">\r\n                            <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                \r\n                    <!-- Font Style 3 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Double Struck<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview3\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"3\">\r\n                            <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n            \r\n                    <!-- Font Style 4 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Script<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview4\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"4\">\r\n                        <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n            \r\n                    <!-- Font Style 5 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Monospace<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview5\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"5\">\r\n                            <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                    \r\n                    <!-- Font Style 6 -->\r\n                    <div class=\"font-style-card\">\r\n                        <div class=\"font-style-name\">Bluey Wide<\/div>\r\n                        <div class=\"font-preview\" id=\"fontPreview6\">Your text here<\/div>\r\n                        <button class=\"copy-button\" data-font=\"6\">\r\n                            <i class=\"fas fa-copy\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            \r\n                <!-- Action Bar -->\r\n                <div class=\"action-bar-wrapper\">\r\n                    <button class=\"action-icon-button\" id=\"copyAllButton\" title=\"Copy All Text\">\r\n                        <i class=\"fas fa-copy\"><\/i>\r\n                    <\/button>\r\n                    <button class=\"action-icon-button download-button\" id=\"downloadPngButton\" title=\"Download as PNG\">\r\n                        <i class=\"fas fa-download\"><\/i>\r\n                    <\/button>\r\n                    <button class=\"action-icon-button share-button\" id=\"shareButton\" title=\"Share on Social Media\">\r\n                        <i class=\"fas fa-share-alt\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Notification -->\r\n        <div class=\"notification-wrapper\" id=\"notification\">\r\n            <i class=\"fas fa-check-circle notification-icon\"><\/i>\r\n            <div class=\"notification-text\" id=\"notificationText\">Text copied to clipboard!<\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <!-- Bluey Content Section -->\r\n    <div class=\"bluey-content-wrapper\">\r\n        <div class=\"bluey-main-container\">\r\n           \r\n            \r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            \/\/ DOM Elements\r\n            const textInput = document.getElementById('textInput');\r\n            const textTransformSelect = document.getElementById('textTransformSelect');\r\n            const fontSizeSlider = document.getElementById('fontSizeSlider');\r\n            const fontSizeValue = document.getElementById('fontSizeValue');\r\n            const letterSpacingSlider = document.getElementById('letterSpacingSlider');\r\n            const letterSpacingValue = document.getElementById('letterSpacingValue');\r\n            const resetButton = document.getElementById('resetButton');\r\n            const fontStylesWrapper = document.getElementById('fontStylesWrapper');\r\n            const copyAllButton = document.getElementById('copyAllButton');\r\n            const downloadPngButton = document.getElementById('downloadPngButton');\r\n            const shareButton = document.getElementById('shareButton');\r\n            const notification = document.getElementById('notification');\r\n            const notificationText = document.getElementById('notificationText');\r\n            \r\n            \/\/ Unicode Mapping Helper Function\r\n            \/\/ This ensures text is copyable anywhere (Unicode transformation)\r\n            function getUnicodeText(text, style) {\r\n                const chars = {\r\n                    \/\/ Style 1: Sans Serif Bold (Bluey Logo vibes)\r\n                    1: {\r\n                        'A': '\ud835\uddd4', 'B': '\ud835\uddd5', 'C': '\ud835\uddd6', 'D': '\ud835\uddd7', 'E': '\ud835\uddd8', 'F': '\ud835\uddd9', 'G': '\ud835\uddda', 'H': '\ud835\udddb', 'I': '\ud835\udddc', 'J': '\ud835\udddd', 'K': '\ud835\uddde', 'L': '\ud835\udddf', 'M': '\ud835\udde0', 'N': '\ud835\udde1', 'O': '\ud835\udde2', 'P': '\ud835\udde3', 'Q': '\ud835\udde4', 'R': '\ud835\udde5', 'S': '\ud835\udde6', 'T': '\ud835\udde7', 'U': '\ud835\udde8', 'V': '\ud835\udde9', 'W': '\ud835\uddea', 'X': '\ud835\uddeb', 'Y': '\ud835\uddec', 'Z': '\ud835\udded',\r\n                        'a': '\ud835\uddee', 'b': '\ud835\uddef', 'c': '\ud835\uddf0', 'd': '\ud835\uddf1', 'e': '\ud835\uddf2', 'f': '\ud835\uddf3', 'g': '\ud835\uddf4', 'h': '\ud835\uddf5', 'i': '\ud835\uddf6', 'j': '\ud835\uddf7', 'k': '\ud835\uddf8', 'l': '\ud835\uddf9', 'm': '\ud835\uddfa', 'n': '\ud835\uddfb', 'o': '\ud835\uddfc', 'p': '\ud835\uddfd', 'q': '\ud835\uddfe', 'r': '\ud835\uddff', 's': '\ud835\ude00', 't': '\ud835\ude01', 'u': '\ud835\ude02', 'v': '\ud835\ude03', 'w': '\ud835\ude04', 'x': '\ud835\ude05', 'y': '\ud835\ude06', 'z': '\ud835\ude07',\r\n                        '0': '\ud835\udfec', '1': '\ud835\udfed', '2': '\ud835\udfee', '3': '\ud835\udfef', '4': '\ud835\udff0', '5': '\ud835\udff1', '6': '\ud835\udff2', '7': '\ud835\udff3', '8': '\ud835\udff4', '9': '\ud835\udff5'\r\n                    },\r\n                    \/\/ Style 2: Bubbles\/Circled (Playful)\r\n                    2: {\r\n                        'A': '\u24b6', 'B': '\u24b7', 'C': '\u24b8', 'D': '\u24b9', 'E': '\u24ba', 'F': '\u24bb', 'G': '\u24bc', 'H': '\u24bd', 'I': '\u24be', 'J': '\u24bf', 'K': '\u24c0', 'L': '\u24c1', 'M': '\u24c2', 'N': '\u24c3', 'O': '\u24c4', 'P': '\u24c5', 'Q': '\u24c6', 'R': '\u24c7', 'S': '\u24c8', 'T': '\u24c9', 'U': '\u24ca', 'V': '\u24cb', 'W': '\u24cc', 'X': '\u24cd', 'Y': '\u24ce', 'Z': '\u24cf',\r\n                        'a': '\u24d0', 'b': '\u24d1', 'c': '\u24d2', 'd': '\u24d3', 'e': '\u24d4', 'f': '\u24d5', 'g': '\u24d6', 'h': '\u24d7', 'i': '\u24d8', 'j': '\u24d9', 'k': '\u24da', 'l': '\u24db', 'm': '\u24dc', 'n': '\u24dd', 'o': '\u24de', 'p': '\u24df', 'q': '\u24e0', 'r': '\u24e1', 's': '\u24e2', 't': '\u24e3', 'u': '\u24e4', 'v': '\u24e5', 'w': '\u24e6', 'x': '\u24e7', 'y': '\u24e8', 'z': '\u24e9',\r\n                        '0': '\u24ea', '1': '\u2460', '2': '\u2461', '3': '\u2462', '4': '\u2463', '5': '\u2464', '6': '\u2465', '7': '\u2466', '8': '\u2467', '9': '\u2468'\r\n                    },\r\n                    \/\/ Style 3: Double Struck (Bold Outline)\r\n                    3: {\r\n                        'A': '\ud835\udd38', 'B': '\ud835\udd39', 'C': '\u2102', 'D': '\ud835\udd3b', 'E': '\ud835\udd3c', 'F': '\ud835\udd3d', 'G': '\ud835\udd3e', 'H': '\u210d', 'I': '\ud835\udd40', 'J': '\ud835\udd41', 'K': '\ud835\udd42', 'L': '\ud835\udd43', 'M': '\ud835\udd44', 'N': '\u2115', 'O': '\ud835\udd46', 'P': '\u2119', 'Q': '\u211a', 'R': '\u211d', 'S': '\ud835\udd4a', 'T': '\ud835\udd4b', 'U': '\ud835\udd4c', 'V': '\ud835\udd4d', 'W': '\ud835\udd4e', 'X': '\ud835\udd4f', 'Y': '\ud835\udd50', 'Z': '\u2124',\r\n                        'a': '\ud835\udd52', 'b': '\ud835\udd53', 'c': '\ud835\udd54', 'd': '\ud835\udd55', 'e': '\ud835\udd56', 'f': '\ud835\udd57', 'g': '\ud835\udd58', 'h': '\ud835\udd59', 'i': '\ud835\udd5a', 'j': '\ud835\udd5b', 'k': '\ud835\udd5c', 'l': '\ud835\udd5d', 'm': '\ud835\udd5e', 'n': '\ud835\udd5f', 'o': '\ud835\udd60', 'p': '\ud835\udd61', 'q': '\ud835\udd62', 'r': '\ud835\udd63', 's': '\ud835\udd64', 't': '\ud835\udd65', 'u': '\ud835\udd66', 'v': '\ud835\udd67', 'w': '\ud835\udd68', 'x': '\ud835\udd69', 'y': '\ud835\udd6a', 'z': '\ud835\udd6b',\r\n                        '0': '\ud835\udfd8', '1': '\ud835\udfd9', '2': '\ud835\udfda', '3': '\ud835\udfdb', '4': '\ud835\udfdc', '5': '\ud835\udfdd', '6': '\ud835\udfde', '7': '\ud835\udfdf', '8': '\ud835\udfe0', '9': '\ud835\udfe1'\r\n                    },\r\n                    \/\/ Style 4: Script\/Cursive\r\n                    4: {\r\n                        'A': '\ud835\udc9c', 'B': '\u212c', 'C': '\ud835\udc9e', 'D': '\ud835\udc9f', 'E': '\u2130', 'F': '\u2131', 'G': '\ud835\udca2', 'H': '\u210b', 'I': '\u2110', 'J': '\ud835\udca5', 'K': '\ud835\udca6', 'L': '\u2112', 'M': '\u2133', 'N': '\ud835\udca9', 'O': '\ud835\udcaa', 'P': '\ud835\udcab', 'Q': '\ud835\udcac', 'R': '\u211b', 'S': '\ud835\udcae', 'T': '\ud835\udcaf', 'U': '\ud835\udcb0', 'V': '\ud835\udcb1', 'W': '\ud835\udcb2', 'X': '\ud835\udcb3', 'Y': '\ud835\udcb4', 'Z': '\ud835\udcb5',\r\n                        'a': '\ud835\udcb6', 'b': '\ud835\udcb7', 'c': '\ud835\udcb8', 'd': '\ud835\udcb9', 'e': '\u212f', 'f': '\ud835\udcbb', 'g': '\u210a', 'h': '\ud835\udcbd', 'i': '\ud835\udcbe', 'j': '\ud835\udcbf', 'k': '\ud835\udcc0', 'l': '\ud835\udcc1', 'm': '\ud835\udcc2', 'n': '\ud835\udcc3', 'o': '\u2134', 'p': '\ud835\udcc5', 'q': '\ud835\udcc6', 'r': '\ud835\udcc7', 's': '\ud835\udcc8', 't': '\ud835\udcc9', 'u': '\ud835\udcca', 'v': '\ud835\udccb', 'w': '\ud835\udccc', 'x': '\ud835\udccd', 'y': '\ud835\udcce', 'z': '\ud835\udccf',\r\n                        '0': '0', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9'\r\n                    },\r\n                    \/\/ Style 5: Monospace\r\n                    5: {\r\n                        'A': '\ud835\ude70', 'B': '\ud835\ude71', 'C': '\ud835\ude72', 'D': '\ud835\ude73', 'E': '\ud835\ude74', 'F': '\ud835\ude75', 'G': '\ud835\ude76', 'H': '\ud835\ude77', 'I': '\ud835\ude78', 'J': '\ud835\ude79', 'K': '\ud835\ude7a', 'L': '\ud835\ude7b', 'M': '\ud835\ude7c', 'N': '\ud835\ude7d', 'O': '\ud835\ude7e', 'P': '\ud835\ude7f', 'Q': '\ud835\ude80', 'R': '\ud835\ude81', 'S': '\ud835\ude82', 'T': '\ud835\ude83', 'U': '\ud835\ude84', 'V': '\ud835\ude85', 'W': '\ud835\ude86', 'X': '\ud835\ude87', 'Y': '\ud835\ude88', 'Z': '\ud835\ude89',\r\n                        'a': '\ud835\ude8a', 'b': '\ud835\ude8b', 'c': '\ud835\ude8c', 'd': '\ud835\ude8d', 'e': '\ud835\ude8e', 'f': '\ud835\ude8f', 'g': '\ud835\ude90', 'h': '\ud835\ude91', 'i': '\ud835\ude92', 'j': '\ud835\ude93', 'k': '\ud835\ude94', 'l': '\ud835\ude95', 'm': '\ud835\ude96', 'n': '\ud835\ude97', 'o': '\ud835\ude98', 'p': '\ud835\ude99', 'q': '\ud835\ude9a', 'r': '\ud835\ude9b', 's': '\ud835\ude9c', 't': '\ud835\ude9d', 'u': '\ud835\ude9e', 'v': '\ud835\ude9f', 'w': '\ud835\udea0', 'x': '\ud835\udea1', 'y': '\ud835\udea2', 'z': '\ud835\udea3',\r\n                        '0': '\ud835\udff6', '1': '\ud835\udff7', '2': '\ud835\udff8', '3': '\ud835\udff9', '4': '\ud835\udffa', '5': '\ud835\udffb', '6': '\ud835\udffc', '7': '\ud835\udffd', '8': '\ud835\udffe', '9': '\ud835\udfff'\r\n                    },\r\n                    \/\/ Style 6: Fullwidth\/Wide\r\n                    6: {\r\n                        'A': '\uff21', 'B': '\uff22', 'C': '\uff23', 'D': '\uff24', 'E': '\uff25', 'F': '\uff26', 'G': '\uff27', 'H': '\uff28', 'I': '\uff29', 'J': '\uff2a', 'K': '\uff2b', 'L': '\uff2c', 'M': '\uff2d', 'N': '\uff2e', 'O': '\uff2f', 'P': '\uff30', 'Q': '\uff31', 'R': '\uff32', 'S': '\uff33', 'T': '\uff34', 'U': '\uff35', 'V': '\uff36', 'W': '\uff37', 'X': '\uff38', 'Y': '\uff39', 'Z': '\uff3a',\r\n                        'a': '\uff41', 'b': '\uff42', 'c': '\uff43', 'd': '\uff44', 'e': '\uff45', 'f': '\uff46', 'g': '\uff47', 'h': '\uff48', 'i': '\uff49', 'j': '\uff4a', 'k': '\uff4b', 'l': '\uff4c', 'm': '\uff4d', 'n': '\uff4e', 'o': '\uff4f', 'p': '\uff50', 'q': '\uff51', 'r': '\uff52', 's': '\uff53', 't': '\uff54', 'u': '\uff55', 'v': '\uff56', 'w': '\uff57', 'x': '\uff58', 'y': '\uff59', 'z': '\uff5a',\r\n                        '0': '\uff10', '1': '\uff11', '2': '\uff12', '3': '\uff13', '4': '\uff14', '5': '\uff15', '6': '\uff16', '7': '\uff17', '8': '\uff18', '9': '\uff19'\r\n                    }\r\n                };\r\n\r\n                return text.split('').map(char => chars[style][char] || char).join('');\r\n            }\r\n            \r\n            \/\/ Font size slider update\r\n            fontSizeSlider.addEventListener('input', function() {\r\n                fontSizeValue.textContent = this.value + 'px';\r\n                updateFontPreviews();\r\n            });\r\n            \r\n            \/\/ Letter spacing slider update\r\n            letterSpacingSlider.addEventListener('input', function() {\r\n                letterSpacingValue.textContent = this.value + 'px';\r\n                updateFontPreviews();\r\n            });\r\n            \r\n            \/\/ Update font previews\r\n            function updateFontPreviews() {\r\n                let text = textInput.value || 'Your text here';\r\n                const textTransform = textTransformSelect.value;\r\n                const fontSize = fontSizeSlider.value + 'px';\r\n                const letterSpacing = letterSpacingSlider.value + 'px';\r\n                \r\n                \/\/ Apply text transform (Standard CSS transform first)\r\n                if (textTransform === 'uppercase') {\r\n                    text = text.toUpperCase();\r\n                } else if (textTransform === 'lowercase') {\r\n                    text = text.toLowerCase();\r\n                } else if (textTransform === 'capitalize') {\r\n                    text = text.toLowerCase().replace(\/\\b\\w\/g, l => l.toUpperCase());\r\n                }\r\n                \r\n                \/\/ Generate the 6 styles\r\n                for (let i = 1; i <= 6; i++) {\r\n                    const preview = document.getElementById(`fontPreview${i}`);\r\n                    \r\n                    \/\/ Convert text to specific Unicode style\r\n                    const styledText = getUnicodeText(text, i);\r\n                    \r\n                    preview.textContent = styledText;\r\n                    preview.style.fontSize = fontSize;\r\n                    preview.style.letterSpacing = letterSpacing;\r\n                    \/\/ Reset CSS text transform as we handled it before unicode conversion\r\n                    preview.style.textTransform = 'none'; \r\n                }\r\n            }\r\n            \r\n            \/\/ Reset button click\r\n            resetButton.addEventListener('click', function(e) {\r\n                e.preventDefault();\r\n                textInput.value = '';\r\n                textTransformSelect.value = 'none';\r\n                fontSizeSlider.value = 24;\r\n                fontSizeValue.textContent = '24px';\r\n                letterSpacingSlider.value = 0;\r\n                letterSpacingValue.textContent = '0px';\r\n                updateFontPreviews();\r\n                showNotification('Settings reset to default!');\r\n            });\r\n            \r\n            \/\/ Copy individual font style\r\n            document.querySelectorAll('.copy-button').forEach(button => {\r\n                button.addEventListener('click', function() {\r\n                    const fontNumber = this.getAttribute('data-font');\r\n                    const preview = document.getElementById(`fontPreview${fontNumber}`);\r\n                    const text = preview.textContent;\r\n                    \r\n                    navigator.clipboard.writeText(text).then(() => {\r\n                        this.classList.add('copied');\r\n                        const icon = this.querySelector('i');\r\n                        icon.className = 'fas fa-check';\r\n            \r\n                        setTimeout(() => {\r\n                            this.classList.remove('copied');\r\n                            icon.className = 'fas fa-copy';\r\n                        }, 2000);\r\n                        \r\n                        showNotification('Text copied to clipboard!');\r\n                    });\r\n                });\r\n            });\r\n            \r\n            \/\/ Copy all text\r\n            copyAllButton.addEventListener('click', function() {\r\n                let allText = '';\r\n                const styleNames = [\"Bold Sans\", \"Bubbles\", \"Double Struck\", \"Script\", \"Monospace\", \"Wide\"];\r\n                for (let i = 1; i <= 6; i++) {\r\n                    const preview = document.getElementById(`fontPreview${i}`);\r\n                    allText += `${styleNames[i-1]}: ${preview.textContent}\\n`;\r\n                }\r\n                \r\n                navigator.clipboard.writeText(allText).then(() => {\r\n                    showNotification('All styles copied!');\r\n                });\r\n            });\r\n        \r\n            \/\/ Download as PNG\r\n            downloadPngButton.addEventListener('click', function() {\r\n                const element = document.getElementById('fontStylesWrapper');\r\n                \r\n                html2canvas(element, {\r\n                    backgroundColor: null,\r\n                    scale: 2\r\n                }).then(canvas => {\r\n                    const link = document.createElement('a');\r\n                    link.download = 'bluey-fonts.png';\r\n                    link.href = canvas.toDataURL('image\/png');\r\n                    link.click();\r\n                    showNotification('Image downloaded successfully!');\r\n                });\r\n            });\r\n        \r\n            \/\/ Share on social media\r\n            shareButton.addEventListener('click', function() {\r\n                const text = textInput.value || 'Check out these amazing Bluey fonts!';\r\n                const url = window.location.href;\r\n                \r\n                if (navigator.share) {\r\n                    navigator.share({\r\n                        title: 'Bluey Font Generator',\r\n                        text: text,\r\n                        url: url\r\n                    }).then(() => {\r\n                        showNotification('Shared successfully!');\r\n                    }).catch(() => {\r\n                        showNotification('Share cancelled!');\r\n                    });\r\n                } else {\r\n                    const twitterUrl = `https:\/\/twitter.com\/intent\/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;\r\n                    window.open(twitterUrl, '_blank');\r\n                    showNotification('Opening Twitter to share...');\r\n                }\r\n            });\r\n            \r\n            \/\/ Show notification helper\r\n            function showNotification(message) {\r\n                notificationText.textContent = message;\r\n                notification.classList.add('show');\r\n                setTimeout(() => {\r\n                    notification.classList.remove('show');\r\n                }, 3000);\r\n            }\r\n            \r\n            \/\/ Input event listeners for real-time updates\r\n            textInput.addEventListener('input', updateFontPreviews);\r\n            textTransformSelect.addEventListener('change', updateFontPreviews);\r\n            fontSizeSlider.addEventListener('input', updateFontPreviews); \/\/ Real-time update while sliding\r\n            letterSpacingSlider.addEventListener('input', updateFontPreviews); \/\/ Real-time update while sliding\r\n            \r\n            \/\/ Initialize font previews on page load\r\n            updateFontPreviews();\r\n        });\r\n\r\n        \/\/ FAQ Toggle Functionality\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const faqItems = document.querySelectorAll('.bluey-faq-item');\r\n            \r\n            faqItems.forEach(item => {\r\n                const question = item.querySelector('.bluey-faq-question');\r\n                if (question) {\r\n                    question.addEventListener('click', () => {\r\n                        const isActive = item.classList.contains('active');\r\n                        faqItems.forEach(faq => faq.classList.remove('active'));\r\n                        if (!isActive) {\r\n                            item.classList.add('active');\r\n                        }\r\n                    });\r\n                }\r\n            });\r\n\r\n            \/\/ Feature cards hover effect\r\n            const featureCards = document.querySelectorAll('.bluey-feature-card');\r\n            featureCards.forEach(card => {\r\n                card.addEventListener('mouseenter', function() {\r\n                    this.style.transform = 'translateX(10px) scale(1.02)';\r\n                });\r\n                card.addEventListener('mouseleave', function() {\r\n                    this.style.transform = 'translateX(0) scale(1)';\r\n                });\r\n            });\r\n\r\n            \/\/ Intersection Observer for animations\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.style.opacity = '1';\r\n                        entry.target.style.transform = 'translateY(0)';\r\n                    }\r\n                });\r\n            }, { threshold: 0.1 });\r\n\r\n            document.querySelectorAll('.bluey-content-section, .bluey-faq-section').forEach(section => {\r\n                section.style.opacity = '0';\r\n                section.style.transform = 'translateY(20px)';\r\n                section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\r\n                observer.observe(section);\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n<!-- Content Section Start From Here -->\r\n\r\n<!-- Font Awesome CDN -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<div id=\"bluey-extra-content\">\r\n    <style>\r\n        \/* Base Container Styles *\/\r\n        #bluey-extra-content {\r\n            --bluey-main: #1565c0;\r\n            --bluey-light: #42a5f5;\r\n            --bluey-accent: #ffb74d;\r\n            --bluey-bg-blue: #f0f7ff;\r\n            --bluey-bg-white: #ffffff;\r\n            --bluey-text: #2c3e50;\r\n            --bluey-gradient: linear-gradient(45deg, #1e88e5, #42a5f5, #764ba2);\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            color: var(--bluey-text);\r\n        }\r\n\r\n        .bluey-sec-container {\r\n            width: 100%;\r\n            padding: 80px 20px;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .bluey-sec-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Heading Styles *\/\r\n        .bluey-header-group {\r\n            text-align: center;\r\n            margin-bottom: 50px;\r\n        }\r\n\r\n        .bluey-wh-heading {\r\n            font-size: clamp(2rem, 5vw, 2.5rem);\r\n            font-weight: 800;\r\n            margin-bottom: 15px;\r\n            background: var(--bluey-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            display: inline-block;\r\n        }\r\n\r\n        .bluey-sub-heading {\r\n            font-size: 1.1rem;\r\n            color: #64748b;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Card Grid Layout *\/\r\n        .bluey-card-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        .bluey-content-card {\r\n            padding: 30px 20px;\r\n            border-radius: 10px;\r\n            text-align: center;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            position: relative;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .bluey-content-card i {\r\n            font-size: 2.5rem;\r\n            color: var(--bluey-main);\r\n            margin-bottom: 20px;\r\n            transition: transform 0.4s ease;\r\n        }\r\n\r\n        .bluey-content-card h3 {\r\n            font-size: 1.2rem;\r\n            margin-bottom: 12px;\r\n            color: var(--bluey-main);\r\n        }\r\n\r\n        .bluey-content-card p {\r\n            font-size: 0.95rem;\r\n            line-height: 1.5;\r\n            color: #4a5568;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* --- SECTION 1: WHAT (Background White, Card Bluey-Light) --- *\/\r\n        .bluey-sec-white { background-color: var(--bluey-bg-white); }\r\n        .bluey-sec-white .bluey-content-card { \r\n            background-color: var(--bluey-bg-blue);\r\n            border: 1px solid rgba(66, 165, 245, 0.1);\r\n        }\r\n        \r\n        \/* Interaction: Layered Shadow Lift *\/\r\n        .card-lift:hover {\r\n            transform: translateY(-12px);\r\n            box-shadow: 0 5px 15px rgba(21, 101, 192, 0.1), \r\n                        0 15px 35px rgba(21, 101, 192, 0.15);\r\n        }\r\n        .card-lift:hover i {\r\n            transform: rotate(-10deg) scale(1.1);\r\n        }\r\n\r\n        \/* --- SECTION 2: WHY (Background Bluey-Light, Card White) --- *\/\r\n        .bluey-sec-light { background-color: var(--bluey-bg-blue); }\r\n        .bluey-sec-light .bluey-content-card { \r\n            background-color: var(--bluey-bg-white);\r\n            border: 1px solid #e2e8f0;\r\n        }\r\n\r\n        \/* Interaction: Elastic Scale-Pop *\/\r\n        .card-pop:hover {\r\n            transform: scale(1.06);\r\n            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            z-index: 2;\r\n        }\r\n        .card-pop:hover i {\r\n            color: var(--bluey-accent);\r\n            animation: pulse-icon 1.5s infinite;\r\n        }\r\n        @keyframes pulse-icon {\r\n            0% { transform: scale(1); }\r\n            50% { transform: scale(1.2); }\r\n            100% { transform: scale(1); }\r\n        }\r\n\r\n        \/* --- SECTION 3: HOW (Background White, Card Bluey-Light) --- *\/\r\n        .bluey-sec-how { background-color: var(--bluey-bg-white); }\r\n        .bluey-sec-how .bluey-content-card { \r\n            background-color: var(--bluey-bg-blue);\r\n        }\r\n\r\n        \/* Interaction: Corner-Radius Morph *\/\r\n        .card-morph:hover {\r\n            border-bottom-right-radius: 50px;\r\n            border-top-left-radius: 50px;\r\n            box-shadow: inset 0 0 15px rgba(21, 101, 192, 0.05);\r\n        }\r\n        .card-morph:hover i {\r\n            transform: translateY(-5px);\r\n            filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));\r\n        }\r\n\r\n        \/* Responsive Breakpoints *\/\r\n        @media (max-width: 1024px) {\r\n            .bluey-card-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n        @media (max-width: 600px) {\r\n            .bluey-card-grid { grid-template-columns: 1fr; }\r\n            .bluey-wh-heading { font-size: 1.8rem; }\r\n            .bluey-sec-container { padding: 50px 15px; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- SECTION 1: WHAT -->\r\n <section class=\"bluey-sec-container bluey-sec-white\">\r\n        <div class=\"bluey-sec-inner\">\r\n        \r\n        <\/div>\r\n\t<\/section>\r\n    <section class=\"bluey-sec-container bluey-sec-white\">\r\n        <div class=\"bluey-sec-inner\">\r\n            <div class=\"bluey-header-group\">\r\n                <h2 class=\"bluey-wh-heading\">What is the Bluey Font Generator?<\/h2>\r\n                <p class=\"bluey-sub-heading\">Learn how this playful tool transforms boring text into a whimsical adventure inspired by Australia's favorite family.<\/p>\r\n            <\/div>\r\n            <div class=\"bluey-card-grid\">\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-dog\"><\/i>\r\n                    <h3>Character Styles<\/h3>\r\n                    <p>Features text mappings inspired by Bluey, Bingo, and the Heeler family's unique aesthetics.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i>\r\n                    <h3>Unicode Magic<\/h3>\r\n                    <p>Uses special mathematical characters to create styles that can be copied and pasted anywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-palette\"><\/i>\r\n                    <h3>Visual Previews<\/h3>\r\n                    <p>Instantly see your text in multiple styles like Bubbles, Sans Bold, and Script as you type.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-mobile-screen\"><\/i>\r\n                    <h3>App Compatibility<\/h3>\r\n                    <p>Works perfectly across Instagram, TikTok, and Discord without needing any special software.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-bone\"><\/i>\r\n                    <h3>Playful Accents<\/h3>\r\n                    <p>Adds extra fun symbols and \"Bluey-vibes\" to your sentences for a friendly, warm appearance.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-keyboard\"><\/i>\r\n                    <h3>Simple Input<\/h3>\r\n                    <p>Designed to be user-friendly for both parents and kids\u2014just type and pick your favorite style.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-image\"><\/i>\r\n                    <h3>PNG Exports<\/h3>\r\n                    <p>Convert your favorite playful font styles into high-quality images for crafts or digital cards.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-lift\">\r\n                    <i class=\"fa-solid fa-infinity\"><\/i>\r\n                    <h3>Free & Unlimited<\/h3>\r\n                    <p>Generate as many fun names and phrases as you want with no hidden costs or subscriptions.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: WHY -->\r\n    <section class=\"bluey-sec-container bluey-sec-light\">\r\n        <div class=\"bluey-sec-inner\">\r\n            <div class=\"bluey-header-group\">\r\n                <h2 class=\"bluey-wh-heading\">Why Use Playful Text Styles?<\/h2>\r\n                <p class=\"bluey-sub-heading\">Sometimes standard text just isn't fun enough. Discover why thousands use our tool for their creative projects.<\/p>\r\n            <\/div>\r\n            <div class=\"bluey-card-grid\">\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-cake-candles\"><\/i>\r\n                    <h3>Birthday Invites<\/h3>\r\n                    <p>Perfect for creating themed birthday cards that look like official Bluey merchandise titles.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-school\"><\/i>\r\n                    <h3>Teacher Resources<\/h3>\r\n                    <p>Teachers use these styles to make classroom labels and worksheets more engaging for young students.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-heart\"><\/i>\r\n                    <h3>Social Media Bios<\/h3>\r\n                    <p>Stand out on social media with a bio that reflects your family-friendly or playful personality.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-camera-retro\"><\/i>\r\n                    <h3>Video Captions<\/h3>\r\n                    <p>Add \"pop-up\" style text to your YouTube or TikTok videos that matches the cartoon aesthetic.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-house-chimney-user\"><\/i>\r\n                    <h3>Home Organizing<\/h3>\r\n                    <p>Print out fun labels for toy boxes, lunch boxes, and bedroom doors in a font the kids will love.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-face-grin-stars\"><\/i>\r\n                    <h3>Fan Art<\/h3>\r\n                    <p>Add titles and credits to your own fan illustrations with a font that actually fits the show's world.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-envelope\"><\/i>\r\n                    <h3>Friendly Emails<\/h3>\r\n                    <p>Brighten up your digital communication with a touch of whimsy and warmth in every character.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-pop\">\r\n                    <i class=\"fa-solid fa-award\"><\/i>\r\n                    <h3>Certificate Design<\/h3>\r\n                    <p>Create \"Great Job\" or \"Star Student\" awards that feel extra special with bold, bubble-style lettering.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: HOW -->\r\n    <section class=\"bluey-sec-container bluey-sec-how\">\r\n        <div class=\"bluey-sec-inner\">\r\n            <div class=\"bluey-header-group\">\r\n                <h2 class=\"bluey-wh-heading\">How to Create Your Bluey Text?<\/h2>\r\n                <p class=\"bluey-sub-heading\">Master the art of font transfiguration in just a few simple steps. It's so easy, even Muffin could do it!<\/p>\r\n            <\/div>\r\n            <div class=\"bluey-card-grid\">\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-1\"><\/i>\r\n                    <h3>Start Typing<\/h3>\r\n                    <p>Click inside the \"Start Typing\" box at the top of the page and enter your phrase or name.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-2\"><\/i>\r\n                    <h3>Adjust Settings<\/h3>\r\n                    <p>Use the sliders to change the font size or letter spacing to get the exact look you want.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-3\"><\/i>\r\n                    <h3>Pick Your Style<\/h3>\r\n                    <p>Browse the cards below the input to see your text transformed into 6 different fun styles.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card-magnetic bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-4\"><\/i>\r\n                    <h3>Copy Style<\/h3>\r\n                    <p>Click the copy icon on any card to instantly save that stylized text to your clipboard.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-paste\"><\/i>\r\n                    <h3>Paste Away<\/h3>\r\n                    <p>Go to your app (like Instagram) and paste the text into your bio, post, or comments section.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-download\"><\/i>\r\n                    <h3>Save as Image<\/h3>\r\n                    <p>Click the download icon if you want to save all styles as a single PNG image for printing.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-share-nodes\"><\/i>\r\n                    <h3>Share Online<\/h3>\r\n                    <p>Use the share button to show off your creations directly to Twitter or via mobile share sheet.<\/p>\r\n                <\/div>\r\n                <div class=\"bluey-content-card card-morph\">\r\n                    <i class=\"fa-solid fa-rotate-right\"><\/i>\r\n                    <h3>Reset & Redo<\/h3>\r\n                    <p>Hit the reset button to clear all settings and start a fresh magical font project instantly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":7231,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7119","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/comments?post=7119"}],"version-history":[{"count":5,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7119\/revisions"}],"predecessor-version":[{"id":7229,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7119\/revisions\/7229"}],"up":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7231"}],"wp:attachment":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/media?parent=7119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}