{"id":945,"date":"2025-04-08T03:45:19","date_gmt":"2025-04-08T02:45:19","guid":{"rendered":"https:\/\/apagroup.co.za\/?page_id=945"},"modified":"2026-03-02T13:53:54","modified_gmt":"2026-03-02T13:53:54","slug":"kkmarketing","status":"publish","type":"page","link":"https:\/\/apagroup.co.za\/en\/kkmarketing\/","title":{"rendered":"KK MARKETING &#038; BRANDING"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"945\" class=\"elementor elementor-945\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67b63212 e-flex e-con-boxed e-con e-parent\" data-id=\"67b63212\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f41e574 elementor-widget elementor-widget-heading\" data-id=\"1f41e574\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_mobile&quot;:&quot;bounceIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">KK MARKETING &amp; BRANDING<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31da3f6f e-flex e-con-boxed e-con e-parent\" data-id=\"31da3f6f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4963136e elementor-widget elementor-widget-text-editor\" data-id=\"4963136e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #993300;\"><strong data-start=\"341\" data-end=\"380\">KK MARKETING &amp; BRANDING<\/strong>\u00a0is a full-service marketing, branding, and strategic consultation agency built for businesses that dare to grow. As a proud subsidiary of the <strong data-start=\"523\" data-end=\"536\">APA Group<\/strong>, we are driven by innovation, data, and bold creativity to help brands across <em data-start=\"615\" data-end=\"631\">all industries<\/em> stand out, scale fast, and connect deeply with their audiences.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4ce6c740 e-flex e-con-boxed e-con e-parent\" data-id=\"4ce6c740\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40c20018 elementor-widget elementor-widget-html\" data-id=\"40c20018\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>ARC-KURVES | Creative Digital Solutions<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <style>\r\n        :root {\r\n            --primary: #6D2605;\r\n            --secondary: #E84C3D;\r\n            --light: #F8F4E9;\r\n            --dark: #333333;\r\n            --accent: #3498DB;\r\n            --creative: #FF9F1C;\r\n            --bg: #FFFFFF;\r\n            --gradient: linear-gradient(135deg, #6D2605 0%, #E84C3D 100%);\r\n            --creative-gradient: linear-gradient(135deg, #FF9F1C 0%, #E84C3D 100%);\r\n        }\r\n        \r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: 'Montserrat', sans-serif;\r\n        }\r\n        \r\n        body {\r\n            background-color: var(--bg);\r\n            color: var(--dark);\r\n            line-height: 1.6;\r\n            overflow-x: hidden;\r\n        }\r\n        \r\n        \/* Animated Background *\/\r\n        .bg-animation {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: -2;\r\n            background: \r\n                radial-gradient(circle at 20% 30%, rgba(255,159,28,0.05) 0%, transparent 30%),\r\n                radial-gradient(circle at 80% 70%, rgba(52,152,219,0.05) 0%, transparent 30%),\r\n                radial-gradient(circle at 40% 80%, rgba(109,38,5,0.05) 0%, transparent 40%);\r\n            animation: gradientMove 20s ease infinite alternate;\r\n        }\r\n        \r\n        \/* Floating Shapes *\/\r\n        .floating-shapes {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: -1;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .shape {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            opacity: 0.1;\r\n            filter: blur(30px);\r\n            animation: float 15s linear infinite;\r\n        }\r\n        \r\n        .shape-1 {\r\n            width: 400px;\r\n            height: 400px;\r\n            background: var(--primary);\r\n            top: 20%;\r\n            left: -100px;\r\n            animation-delay: 0s;\r\n        }\r\n        \r\n        .shape-2 {\r\n            width: 600px;\r\n            height: 600px;\r\n            background: var(--creative);\r\n            bottom: -200px;\r\n            right: -200px;\r\n            animation-delay: 3s;\r\n            animation-direction: reverse;\r\n        }\r\n        \r\n        .shape-3 {\r\n            width: 300px;\r\n            height: 300px;\r\n            background: var(--accent);\r\n            top: 50%;\r\n            left: 50%;\r\n            animation-delay: 6s;\r\n        }\r\n        \r\n        \/* Typography *\/\r\n        h1, h2, h3 {\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            font-weight: 800;\r\n        }\r\n        \r\n        h1 {\r\n            font-size: 2.8rem;\r\n            background: var(--creative-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            line-height: 1.2;\r\n            margin-bottom: 1rem;\r\n        }\r\n        \r\n        h2 {\r\n            font-size: 2.2rem;\r\n            color: var(--primary);\r\n            position: relative;\r\n            display: inline-block;\r\n            margin-bottom: 2rem;\r\n        }\r\n        \r\n        h2:after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -10px;\r\n            left: 0;\r\n            width: 50px;\r\n            height: 4px;\r\n            background: var(--primary);\r\n            animation: underlineGrow 0.8s ease-out forwards;\r\n        }\r\n        \r\n        p {\r\n            color: #555;\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        \/* Layout *\/\r\n        section {\r\n            padding: 6rem 8%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .section-header {\r\n            text-align: center;\r\n            margin-bottom: 3rem;\r\n        }\r\n        \r\n        \/* Hero Section *\/\r\n        .hero {\r\n            text-align: center;\r\n            padding: 8rem 5% 6rem;\r\n            position: relative;\r\n        }\r\n        \r\n        .hero-icon {\r\n            font-size: 5rem;\r\n            margin-bottom: 1.5rem;\r\n            display: inline-block;\r\n            animation: bounce 2s ease infinite, rotate 20s linear infinite;\r\n            background: var(--creative-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n        \r\n        .hero p {\r\n            max-width: 700px;\r\n            margin: 0 auto 2rem;\r\n            font-size: 1.2rem;\r\n        }\r\n        \r\n        \/* Services Grid *\/\r\n        .services-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n        }\r\n        \r\n        .service-card {\r\n            background: white;\r\n            border-radius: 20px;\r\n            padding: 2.5rem;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            border: 1px solid rgba(0,0,0,0.05);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .service-card:hover {\r\n            transform: translateY(-15px) scale(1.03);\r\n            box-shadow: 0 20px 50px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .service-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: var(--light);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1.5rem;\r\n            font-size: 2rem;\r\n            color: var(--primary);\r\n            transition: all 0.3s ease;\r\n            border: 2px solid var(--primary);\r\n        }\r\n        \r\n        .service-card:hover .service-icon {\r\n            background: var(--primary);\r\n            color: white;\r\n            transform: rotate(15deg) scale(1.1);\r\n            border-radius: 50%;\r\n        }\r\n        \r\n        .service-image {\r\n            width: 100%;\r\n            height: 180px;\r\n            object-fit: cover;\r\n            border-radius: 12px;\r\n            margin-bottom: 1.5rem;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .service-card:hover .service-image {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        \/* Growth Section *\/\r\n        .growth-section {\r\n            background: var(--light);\r\n            border-radius: 30px;\r\n            margin: 4rem auto;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .growth-item {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 3rem;\r\n            background: white;\r\n            border-radius: 20px;\r\n            padding: 2rem;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n            transition: all 0.4s ease;\r\n        }\r\n        \r\n        .growth-item:hover {\r\n            transform: translateX(15px);\r\n            box-shadow: 0 15px 40px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .growth-number {\r\n            font-size: 3rem;\r\n            font-weight: 800;\r\n            color: var(--primary);\r\n            margin-right: 2rem;\r\n            min-width: 80px;\r\n            text-align: center;\r\n            background: var(--light);\r\n            border-radius: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            flex-shrink: 0;\r\n        }\r\n        \r\n        .growth-image {\r\n            width: 150px;\r\n            height: 150px;\r\n            object-fit: cover;\r\n            border-radius: 15px;\r\n            margin-left: 2rem;\r\n            flex-shrink: 0;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .growth-item:hover .growth-image {\r\n            transform: rotate(5deg) scale(1.05);\r\n        }\r\n        \r\n        \/* Buttons *\/\r\n        .btn {\r\n            display: inline-block;\r\n            padding: 15px 35px;\r\n            border-radius: 50px;\r\n            text-decoration: none;\r\n            font-weight: 700;\r\n            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            text-align: center;\r\n            margin: 0.5rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .btn-primary {\r\n            background: var(--gradient);\r\n            color: white;\r\n            box-shadow: 0 5px 20px rgba(109,38,5,0.3);\r\n        }\r\n        \r\n        .btn-primary:hover {\r\n            transform: translateY(-5px) scale(1.05);\r\n            box-shadow: 0 15px 30px rgba(109,38,5,0.4);\r\n        }\r\n        \r\n        .btn-creative {\r\n            background: var(--creative-gradient);\r\n            color: white;\r\n            box-shadow: 0 5px 20px rgba(255,159,28,0.3);\r\n        }\r\n        \r\n        .btn-creative:hover {\r\n            transform: translateY(-5px) scale(1.05);\r\n            box-shadow: 0 15px 30px rgba(255,159,28,0.4);\r\n        }\r\n        \r\n        \/* Animations *\/\r\n        @keyframes bounce {\r\n            0%, 100% { transform: translateY(0); }\r\n            50% { transform: translateY(-20px); }\r\n        }\r\n        \r\n        @keyframes rotate {\r\n            from { transform: rotate(0deg); }\r\n            to { transform: rotate(360deg); }\r\n        }\r\n        \r\n        @keyframes underlineGrow {\r\n            from { width: 0; }\r\n            to { width: 50px; }\r\n        }\r\n        \r\n        @keyframes gradientMove {\r\n            0% { background-position: 0% 0%; }\r\n            100% { background-position: 100% 100%; }\r\n        }\r\n        \r\n        @keyframes float {\r\n            0% { transform: translateY(0px) rotate(0deg); }\r\n            50% { transform: translateY(-20px) rotate(5deg); }\r\n            100% { transform: translateY(0px) rotate(0deg); }\r\n        }\r\n        \r\n        @keyframes pulse {\r\n            0% { transform: scale(1); opacity: 0.1; }\r\n            50% { transform: scale(1.1); opacity: 0.2; }\r\n            100% { transform: scale(1); opacity: 0.1; }\r\n        }\r\n        \r\n        .float {\r\n            animation: float 6s ease-in-out infinite;\r\n        }\r\n        \r\n        .pulse {\r\n            animation: pulse 3s ease infinite;\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            h1 {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            h2 {\r\n                font-size: 1.8rem;\r\n            }\r\n            \r\n            section {\r\n                padding: 4rem 5%;\r\n            }\r\n            \r\n            .growth-item {\r\n                flex-direction: column;\r\n                text-align: center;\r\n            }\r\n            \r\n            .growth-number {\r\n                margin-right: 0;\r\n                margin-bottom: 1rem;\r\n            }\r\n            \r\n            .growth-image {\r\n                margin-left: 0;\r\n                margin-top: 1.5rem;\r\n                width: 100%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <!-- Animated Background -->\r\n    <div class=\"bg-animation\"><\/div>\r\n    <div class=\"floating-shapes\">\r\n        <div class=\"shape shape-1\"><\/div>\r\n        <div class=\"shape shape-2\"><\/div>\r\n        <div class=\"shape shape-3\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Hero Section -->\r\n    <section class=\"hero\">\r\n        <div class=\"hero-icon\">\r\n            <i class=\"fas fa-magic\"><\/i>\r\n        <\/div>\r\n        <h1>CREATIVE DIGITAL SOLUTIONS<\/h1>\r\n        <p>We blend strategy, design, and technology to build remarkable brands and digital experiences that drive growth.<\/p>\r\n        <div>\r\n            <a href=\"#services\" class=\"btn btn-primary\">OUR SERVICES<\/a>\r\n            <a href=\"mailto:info@apagroup.co.za\" class=\"btn btn-creative\">EMAIL US<\/a>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Services Section -->\r\n    <section id=\"services\">\r\n        <div class=\"section-header\">\r\n            <h2>WHAT WE CREATE<\/h2>\r\n            <p>Comprehensive digital solutions tailored to your needs<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"services-grid\">\r\n            <div class=\"service-card\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Brand Strategy\" class=\"service-image\">\r\n                <div class=\"service-icon\"><i class=\"fas fa-bullseye\"><\/i><\/div>\r\n                <h3>Brand Strategy<\/h3>\r\n                <p>Powerful brand identities that connect emotionally and stand out in competitive markets.<\/p>\r\n                <ul style=\"margin-top: 1rem; padding-left: 1.5rem; color: #666;\">\r\n                    <li>Brand positioning<\/li>\r\n                    <li>Visual identity systems<\/li>\r\n                    <li>Messaging frameworks<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            \r\n            <div class=\"service-card\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Digital Marketing\" class=\"service-image\">\r\n                <div class=\"service-icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\r\n                <h3>Digital Marketing<\/h3>\r\n                <p>Data-driven campaigns that deliver measurable growth across all digital channels.<\/p>\r\n                <ul style=\"margin-top: 1rem; padding-left: 1.5rem; color: #666;\">\r\n                    <li>Social media marketing<\/li>\r\n                    <li>SEO & content strategy<\/li>\r\n                    <li>Performance advertising<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            \r\n            <div class=\"service-card\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555774698-0b77e0d5fac6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"App Development\" class=\"service-image\">\r\n                <div class=\"service-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\r\n                <h3>App Development<\/h3>\r\n                <p>Custom mobile and web applications built to solve your unique business challenges.<\/p>\r\n                <ul style=\"margin-top: 1rem; padding-left: 1.5rem; color: #666;\">\r\n                    <li>iOS & Android apps<\/li>\r\n                    <li>Progressive web apps<\/li>\r\n                    <li>Enterprise software<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            \r\n            <div class=\"service-card\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Web Development\" class=\"service-image\">\r\n                <div class=\"service-icon\"><i class=\"fas fa-code\"><\/i><\/div>\r\n                <h3>Web Development<\/h3>\r\n                <p>High-performing websites designed to convert visitors into customers.<\/p>\r\n                <ul style=\"margin-top: 1rem; padding-left: 1.5rem; color: #666;\">\r\n                    <li>E-commerce solutions<\/li>\r\n                    <li>Custom web applications<\/li>\r\n                    <li>UX\/UI optimization<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Growth Section -->\r\n    <section id=\"growth\" class=\"growth-section\">\r\n        <div class=\"section-header\">\r\n            <h2>OUR CREATIVE PROCESS<\/h2>\r\n            <p>How we bring ideas to life and drive results<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"growth-items\">\r\n            <div class=\"growth-item\">\r\n                <div class=\"growth-number\">1<\/div>\r\n                <div>\r\n                    <h3>Discover & Define<\/h3>\r\n                    <p>We start by deeply understanding your business, audience, and goals to craft the perfect strategy.<\/p>\r\n                <\/div>\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Discover\" class=\"growth-image\">\r\n            <\/div>\r\n            \r\n            <div class=\"growth-item\">\r\n                <div class=\"growth-number\">2<\/div>\r\n                <div>\r\n                    <h3>Design & Develop<\/h3>\r\n                    <p>Our team transforms concepts into beautiful, functional digital experiences tailored to your needs.<\/p>\r\n                <\/div>\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Design\" class=\"growth-image\">\r\n            <\/div>\r\n            \r\n            <div class=\"growth-item\">\r\n                <div class=\"growth-number\">3<\/div>\r\n                <div>\r\n                    <h3>Deploy & Optimize<\/h3>\r\n                    <p>We launch with precision and continuously refine based on data and user feedback.<\/p>\r\n                <\/div>\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\" alt=\"Deploy\" class=\"growth-image\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- CTA Section -->\r\n    <section style=\"text-align: center; background: var(--creative-gradient); color: white; border-radius: 30px; overflow: hidden;\">\r\n        <div style=\"padding: 6rem 2rem; max-width: 800px; margin: 0 auto; position: relative;\">\r\n            <div class=\"pulse\" style=\"position: absolute; width: 300px; height: 300px; background: rgba(255,255,255,0.1); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;\"><\/div>\r\n            <div style=\"position: relative; z-index: 1;\">\r\n                <h2 style=\"color: white;\">READY TO CREATE SOMETHING AMAZING?<\/h2>\r\n                <p style=\"color: rgba(255,255,255,0.9); margin-bottom: 2.5rem;\">Let's discuss how we can help bring your vision to life.<\/p>\r\n                <div>\r\n                    <a href=\"mailto:info@apagroup.co.za\" class=\"btn btn-primary\" style=\"background: white; color: var(--primary);\">EMAIL US<\/a>\r\n                    <a href=\"tel:+27679629187\" class=\"btn btn-creative\" style=\"border: 2px solid white; background: transparent;\">CALL NOW<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Animation on scroll\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const animateOnScroll = () => {\r\n                const elements = document.querySelectorAll('.service-card, .growth-item');\r\n                \r\n                elements.forEach(element => {\r\n                    const elementPosition = element.getBoundingClientRect().top;\r\n                    const screenPosition = window.innerHeight \/ 1.2;\r\n                    \r\n                    if (elementPosition < screenPosition) {\r\n                        element.style.opacity = '1';\r\n                        element.style.transform = 'translateY(0)';\r\n                    }\r\n                });\r\n            };\r\n            \r\n            \/\/ Set initial state for animation\r\n            document.querySelectorAll('.service-card, .growth-item').forEach(el => {\r\n                el.style.opacity = '0';\r\n                el.style.transform = 'translateY(30px)';\r\n                el.style.transition = 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)';\r\n            });\r\n            \r\n            window.addEventListener('scroll', animateOnScroll);\r\n            animateOnScroll(); \/\/ Trigger once on load\r\n            \r\n            \/\/ Colorful hover effects\r\n            const serviceCards = document.querySelectorAll('.service-card');\r\n            const colors = ['#6D2605', '#E84C3D', '#3498DB', '#FF9F1C'];\r\n            \r\n            serviceCards.forEach((card, index) => {\r\n                card.addEventListener('mouseenter', () => {\r\n                    card.style.boxShadow = `0 20px 50px ${colors[index]}30`;\r\n                });\r\n                card.addEventListener('mouseleave', () => {\r\n                    card.style.boxShadow = '0 10px 30px rgba(0,0,0,0.1)';\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KK MARKETING &#038; BRANDING KK MARKETING &#038; BRANDING\u00a0is a full-service marketing, branding, and strategic consultation agency built for businesses that dare to grow. As a proud subsidiary of the APA Group, we are driven by innovation, data, and bold creativity to help brands across all industries stand out, scale fast, and connect deeply with their &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/apagroup.co.za\/en\/kkmarketing\/\"> <span class=\"screen-reader-text\">KK MARKETING &#038; BRANDING<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":890,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/pages\/945"}],"collection":[{"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/comments?post=945"}],"version-history":[{"count":18,"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/pages\/945\/revisions"}],"predecessor-version":[{"id":1081,"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/pages\/945\/revisions\/1081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/media\/890"}],"wp:attachment":[{"href":"https:\/\/apagroup.co.za\/en\/wp-json\/wp\/v2\/media?parent=945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}