{"id":6553,"date":"2026-09-18T05:10:26","date_gmt":"2026-09-18T05:10:26","guid":{"rendered":"https:\/\/brightcodess.com\/bengaluru\/?page_id=6553"},"modified":"2026-09-22T07:46:40","modified_gmt":"2026-09-22T07:46:40","slug":"social-media-app","status":"publish","type":"page","link":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/","title":{"rendered":"Social Media App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6553\" class=\"elementor elementor-6553\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1943003 e-con-full e-flex e-con e-parent\" data-id=\"1943003\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-e60303d e-con-full e-flex e-con e-child\" data-id=\"e60303d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d678ea elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"5d678ea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Font and Icon Links -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\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<div class=\"wp-social-hero-wrapper\">\r\n    <style>\r\n        \/* Scoped CSS to prevent theme conflicts *\/\r\n        .wp-social-hero-wrapper {\r\n            --primary-blue: #0060ff;\r\n            --dark-navy: #0b1c3c;\r\n            --text-gray: #555555;\r\n            --light-blue-bg: #e5f0ff;\r\n            --white: #ffffff;\r\n            \r\n            --icon-blue: #0060ff;\r\n            --icon-green: #00a859;\r\n            --icon-purple: #8b3dff;\r\n            --icon-orange: #ff6b00;\r\n\r\n            font-family: 'Poppins', sans-serif;\r\n            color: var(--dark-navy);\r\n            background-color: #f8fbff;\r\n            overflow-x: hidden;\r\n            width: 100%;\r\n        }\r\n\r\n        .wp-social-hero-wrapper * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .hero-section {\r\n            position: relative;\r\n            background: radial-gradient(circle at 70% 50%, #eef5ff 0%, #ffffff 80%);\r\n            padding: 2rem 1.5rem 4rem;\r\n            min-height: 20vh;\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .container {\r\n            max-width: 1350px;\r\n            margin: 0 auto;\r\n            width: 100%;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .hero-content {\r\n            display: grid;\r\n            grid-template-columns: 1fr;\r\n            gap: 4rem;\r\n            align-items: center;\r\n        }\r\n\r\n        @media (min-width: 992px) {\r\n            .wp-social-hero-wrapper .hero-content {\r\n                grid-template-columns: 1.1fr 0.9fr;\r\n                gap: 2rem;\r\n            }\r\n        }\r\n\r\n        .wp-social-hero-wrapper .badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            background-color: var(--light-blue-bg);\r\n            color: var(--primary-blue);\r\n            padding: 0.5rem 1.2rem;\r\n            border-radius: 50px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .badge i {\r\n            margin-right: 8px;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .hero-title {\r\n            font-size: 3rem;\r\n            line-height: 1.1;\r\n            font-weight: 800;\r\n            margin-bottom: 1.5rem;\r\n            color: var(--dark-navy);\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .hero-title span {\r\n            color: var(--primary-blue);\r\n        }\r\n\r\n        @media (min-width: 768px) {\r\n            .wp-social-hero-wrapper .hero-title {\r\n                font-size: 4.5rem;\r\n            }\r\n        }\r\n\r\n        .wp-social-hero-wrapper .hero-desc {\r\n            font-size: 1.1rem;\r\n            color: var(--text-gray);\r\n            line-height: 1.6;\r\n            margin-bottom: 2.5rem;\r\n            max-width: 90%;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .cta-row {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 2rem;\r\n            margin-bottom: 3.5rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .btn-primary {\r\n            background-color: var(--primary-blue);\r\n            color: var(--white);\r\n            padding: 1rem 2rem;\r\n            border-radius: 50px;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            box-shadow: 0 8px 20px rgba(0, 96, 255, 0.25);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .btn-primary:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 12px 25px rgba(0, 96, 255, 0.35);\r\n            color: var(--white);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .video-cta {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            text-decoration: none;\r\n            color: var(--dark-navy);\r\n            cursor: pointer;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .play-btn {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background-color: var(--white);\r\n            color: var(--primary-blue);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            font-size: 1.2rem;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.08);\r\n            border: 1px solid #e1e8f2;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .video-cta:hover .play-btn {\r\n            background-color: var(--primary-blue);\r\n            color: var(--white);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .video-text {\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .video-text strong {\r\n            font-size: 1rem;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .video-text span {\r\n            font-size: 0.8rem;\r\n            color: var(--text-gray);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .features-row {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            gap: 1rem;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .feature-item {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            flex: 1;\r\n            min-width: 140px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .feature-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin-bottom: 0.8rem;\r\n            color: var(--white);\r\n            font-size: 1.2rem;\r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .icon-blue { background-color: var(--icon-blue); }\r\n        .wp-social-hero-wrapper .icon-green { background-color: var(--icon-green); }\r\n        .wp-social-hero-wrapper .icon-purple { background-color: var(--icon-purple); }\r\n        .wp-social-hero-wrapper .icon-orange { background-color: var(--icon-orange); }\r\n\r\n        .wp-social-hero-wrapper .feature-title {\r\n            font-weight: 700;\r\n            font-size: 0.95rem;\r\n            margin-bottom: 0.2rem;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .feature-desc {\r\n            font-size: 0.75rem;\r\n            color: var(--text-gray);\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .right-col {\r\n            position: relative;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            min-height: 600px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .mockup-container {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 500px;\r\n            height: 650px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .phone {\r\n            position: absolute;\r\n            background-color: var(--white);\r\n            border-radius: 40px;\r\n            border: 10px solid #222;\r\n            box-shadow: 0 25px 50px rgba(0,0,0,0.15), inset 0 0 0 2px #fff;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .phone::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 120px;\r\n            height: 25px;\r\n            background-color: #222;\r\n            border-bottom-left-radius: 15px;\r\n            border-bottom-right-radius: 15px;\r\n            z-index: 10;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .phone-back {\r\n            width: 260px;\r\n            height: 540px;\r\n            right: 0;\r\n            top: 30px;\r\n            transform: scale(0.9) rotate(2deg);\r\n            z-index: 1;\r\n            filter: brightness(0.95);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .phone-front {\r\n            width: 280px;\r\n            height: 580px;\r\n            left: 20px;\r\n            bottom: 0;\r\n            z-index: 2;\r\n            transform: rotate(-1deg);\r\n        }\r\n\r\n        .wp-social-hero-wrapper .screen-content {\r\n            padding: 35px 15px 15px;\r\n            height: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            background: #f9faff;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .app-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .wp-social-hero-wrapper .app-header h3 {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            margin: 0;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .story-circles {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .circle {\r\n            width: 45px;\r\n            height: 45px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(45deg, #f09433, #dc2743);\r\n            padding: 2px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .circle-inner {\r\n            width: 100%;\r\n            height: 100%;\r\n            border-radius: 50%;\r\n            background-color: #ccc;\r\n            border: 2px solid white;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .post-card {\r\n            background: white;\r\n            border-radius: 12px;\r\n            padding: 12px;\r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .post-img {\r\n            width: 100%;\r\n            height: 200px;\r\n            background-color: #e2e8f0;\r\n            border-radius: 8px;\r\n            margin: 10px 0;\r\n            background-image: url('https:\/\/placehold.co\/400x300\/a0c4ff\/ffffff?text=Social+App');\r\n            background-size: cover;\r\n            background-position: center;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .list-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            background: white;\r\n            padding: 10px;\r\n            border-radius: 10px;\r\n            margin-bottom: 10px;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.02);\r\n        }\r\n        .wp-social-hero-wrapper .list-img { width: 50px; height: 50px; border-radius: 8px; background: #ddd; }\r\n        .wp-social-hero-wrapper .list-text { flex: 1; }\r\n        .wp-social-hero-wrapper .list-text .l-title { font-weight: 700; font-size: 0.8rem; margin: 0; }\r\n        .wp-social-hero-wrapper .list-text .l-sub { font-size: 0.65rem; color: #888; margin: 0; }\r\n        .wp-social-hero-wrapper .list-btn { background: var(--primary-blue); color: white; border: none; padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;}\r\n\r\n        .wp-social-hero-wrapper .floating-icon {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            color: white;\r\n            font-size: 1.5rem;\r\n            box-shadow: 0 10px 20px rgba(0,0,0,0.15);\r\n            z-index: 5;\r\n            animation: float 6s ease-in-out infinite;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-instagram {\r\n            width: 60px; height: 60px; font-size: 2rem;\r\n            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);\r\n            top: 20px; left: 0px;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-facebook {\r\n            width: 50px; height: 50px;\r\n            background: #1877f2;\r\n            top: 240px; left: -20px;\r\n            animation-delay: 1s;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-youtube {\r\n            width: 50px; height: 50px;\r\n            background: #ff0000;\r\n            top: 360px; left: -30px;\r\n            animation-delay: 2s;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-x {\r\n            width: 45px; height: 45px;\r\n            background: #000000;\r\n            top: 130px; right: -20px;\r\n            animation-delay: 0.5s;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-linkedin {\r\n            width: 55px; height: 55px;\r\n            background: #0a66c2;\r\n            top: 220px; right: -30px;\r\n            animation-delay: 1.5s;\r\n        }\r\n\r\n        .wp-social-hero-wrapper .fi-heart {\r\n            width: 40px; height: 40px; font-size: 1rem;\r\n            background: #ff3366;\r\n            top: 340px; right: -10px;\r\n            border-radius: 12px;\r\n            border-bottom-left-radius: 0;\r\n            animation-delay: 2.5s;\r\n        }\r\n\r\n        @keyframes float {\r\n            0% { transform: translateY(0px); }\r\n            50% { transform: translateY(-15px); }\r\n            100% { transform: translateY(0px); }\r\n        }\r\n\r\n        .wp-social-hero-wrapper .connect-text {\r\n            position: absolute;\r\n            bottom: 20px;\r\n            right: -60px;\r\n            font-family: 'Caveat', cursive;\r\n            color: var(--primary-blue);\r\n            font-size: 2.2rem;\r\n            line-height: 1.1;\r\n            font-weight: 700;\r\n            z-index: 10;\r\n            transform: rotate(-5deg);\r\n        }\r\n\r\n        @media (max-width: 991px) {\r\n            .wp-social-hero-wrapper .right-col {\r\n                min-height: auto;\r\n                padding-top: 2rem;\r\n            }\r\n            .wp-social-hero-wrapper .mockup-container {\r\n                height: 550px;\r\n                transform: scale(0.9);\r\n            }\r\n            .wp-social-hero-wrapper .phone-front { left: 0; }\r\n            .wp-social-hero-wrapper .connect-text { right: 0; bottom: -20px; }\r\n            .wp-social-hero-wrapper .fi-x { right: 10px; }\r\n            .wp-social-hero-wrapper .fi-linkedin { right: 0; }\r\n            .wp-social-hero-wrapper .fi-heart { right: 20px; }\r\n        }\r\n    <\/style>\r\n\r\n    <section class=\"hero-section\">\r\n        <div class=\"container\">\r\n            <div class=\"hero-content\">\r\n                \r\n                <div class=\"left-col\">\r\n                    <div class=\"badge\">\r\n                        <i class=\"fa-solid fa-bullhorn\"><\/i> CUSTOM SOCIAL MEDIA PLATFORMS\r\n                    <\/div>\r\n                    \r\n                    <h1 class=\"hero-title\">\r\n                        Social Media <br>\r\n                        App Development <br>\r\n                        <span>in Bangalore<\/span>\r\n                    <\/h1>\r\n                    \r\n                    <p class=\"hero-desc\">\r\n                        Turn your idea into a powerful social media platform with Brightcode. We develop custom, scalable and feature-rich social media apps that connect people, create communities and drive engagement.\r\n                    <\/p>\r\n                    \r\n                    <div class=\"cta-row\">\r\n                        <a href=\"#\" class=\"btn-primary\">\r\n                            Get a Free Consultation <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n                        <\/a>\r\n                        \r\n                        <a href=\"#\" class=\"video-cta\">\r\n                            <div class=\"play-btn\">\r\n                                <i class=\"fa-solid fa-play\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"video-text\">\r\n                                <strong>Watch Our Video<\/strong>\r\n                                <span>See how we work<\/span>\r\n                            <\/div>\r\n                        <\/a>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"features-row\">\r\n                        <div class=\"feature-item\">\r\n                            <div class=\"feature-icon icon-blue\">\r\n                                <i class=\"fa-solid fa-gear\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"feature-title\">Custom Solutions<\/div>\r\n                            <div class=\"feature-desc\">Tailored to your vision<\/div>\r\n                        <\/div>\r\n                        <div class=\"feature-item\">\r\n                            <div class=\"feature-icon icon-green\">\r\n                                <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"feature-title\">Secure & Scalable<\/div>\r\n                            <div class=\"feature-desc\">Built for millions of users<\/div>\r\n                        <\/div>\r\n                        <div class=\"feature-item\">\r\n                            <div class=\"feature-icon icon-purple\">\r\n                                <i class=\"fa-solid fa-users\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"feature-title\">Experienced Team<\/div>\r\n                            <div class=\"feature-desc\">Skilled app developers<\/div>\r\n                        <\/div>\r\n                        <div class=\"feature-item\">\r\n                            <div class=\"feature-icon icon-orange\">\r\n                                <i class=\"fa-solid fa-headset\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"feature-title\">Ongoing Support<\/div>\r\n                            <div class=\"feature-desc\">From idea to growth<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"right-col\">\r\n                    <div class=\"mockup-container\">\r\n                        \r\n                        <!-- Floating Icons -->\r\n                        <div class=\"floating-icon fi-instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                        <div class=\"floating-icon fi-facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/div>\r\n                        <div class=\"floating-icon fi-youtube\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                        <div class=\"floating-icon fi-x\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/div>\r\n                        <div class=\"floating-icon fi-linkedin\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/div>\r\n                        <div class=\"floating-icon fi-heart\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n\r\n                        <!-- Phone 2 (Background - Discover) -->\r\n                        <div class=\"phone phone-back\">\r\n                            <div class=\"screen-content\">\r\n                                <div class=\"app-header\">\r\n                                    <h3>Discover<\/h3>\r\n                                    <i class=\"fa-regular fa-bell\"><\/i>\r\n                                <\/div>\r\n                                <div style=\"font-size: 12px; padding: 10px; background: #eee; border-radius: 20px; color:#888; margin-bottom: 15px;\">\r\n                                    <i class=\"fa-solid fa-magnifying-glass\"><\/i> Search people, topics...\r\n                                <\/div>\r\n                                \r\n                                <div class=\"list-item\">\r\n                                    <div class=\"list-img\" style=\"background-image: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/1.jpg'); background-size: cover;\"><\/div>\r\n                                    <div class=\"list-text\">\r\n                                        <div class=\"l-title\">Travel<\/div>\r\n                                        <div class=\"l-sub\">1.2M members<\/div>\r\n                                    <\/div>\r\n                                    <button class=\"list-btn\">Join<\/button>\r\n                                <\/div>\r\n                                <div class=\"list-item\">\r\n                                    <div class=\"list-img\" style=\"background-image: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/2.jpg'); background-size: cover;\"><\/div>\r\n                                    <div class=\"list-text\">\r\n                                        <div class=\"l-title\">Food Lovers<\/div>\r\n                                        <div class=\"l-sub\">856K members<\/div>\r\n                                    <\/div>\r\n                                    <button class=\"list-btn\">Join<\/button>\r\n                                <\/div>\r\n                                <div class=\"list-item\">\r\n                                    <div class=\"list-img\" style=\"background-image: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/3.jpg'); background-size: cover;\"><\/div>\r\n                                    <div class=\"list-text\">\r\n                                        <div class=\"l-title\">Tech & Startups<\/div>\r\n                                        <div class=\"l-sub\">1.1M members<\/div>\r\n                                    <\/div>\r\n                                    <button class=\"list-btn\">Join<\/button>\r\n                                <\/div>\r\n                                <div class=\"list-item\">\r\n                                    <div class=\"list-img\" style=\"background-image: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/4.jpg'); background-size: cover;\"><\/div>\r\n                                    <div class=\"list-text\">\r\n                                        <div class=\"l-title\">Fitness & Health<\/div>\r\n                                        <div class=\"l-sub\">920K members<\/div>\r\n                                    <\/div>\r\n                                    <button class=\"list-btn\">Join<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Phone 1 (Foreground - BrightSocial) -->\r\n                        <div class=\"phone phone-front\">\r\n                            <div class=\"screen-content\">\r\n                                <div class=\"app-header\">\r\n                                    <h3>BrightSocial<\/h3>\r\n                                    <i class=\"fa-brands fa-facebook-messenger\" style=\"color:var(--primary-blue)\"><\/i>\r\n                                <\/div>\r\n                                \r\n                                <div class=\"story-circles\">\r\n                                    <div class=\"circle\"><div class=\"circle-inner\" style=\"background: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/6.jpg')center\/cover;\"><\/div><\/div>\r\n                                    <div class=\"circle\"><div class=\"circle-inner\" style=\"background: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/7.jpg') center\/cover;\"><\/div><\/div>\r\n                                    <div class=\"circle\"><div class=\"circle-inner\" style=\"background: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/8.jpg') center\/cover;\"><\/div><\/div>\r\n                                    <div class=\"circle\"><div class=\"circle-inner\" style=\"background: url('https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/9.jpg') center\/cover;\"><\/div><\/div>\r\n                                <\/div>\r\n\r\n                                <div class=\"post-card\">\r\n                                    <div style=\"display:flex; align-items:center; gap:10px; margin-bottom: 10px;\">\r\n                                        <div style=\"width:35px; height:35px; border-radius:50%; background: #ccc;\"><\/div>\r\n                                        <div>\r\n                                            <div style=\"font-size:0.8rem; font-weight:700;\">Ananya Sharma<\/div>\r\n                                            <div style=\"font-size:0.6rem; color:#888;\">Bangalore, India<\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                    <div style=\"font-size:0.8rem; line-height:1.4;\">\r\n                                        Good vibes, better connections! \ud83d\udc99 Building a stronger community together. <span style=\"color:var(--primary-blue)\">#LifeInBangalore #Connect<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"post-img\"><\/div>\r\n                                    <div style=\"display:flex; justify-content:space-between; color:#555; font-size:1.1rem; padding-top: 5px;\">\r\n                                        <div style=\"display:flex; gap: 15px;\">\r\n                                            <span><i class=\"fa-regular fa-heart\" style=\"color:red;\"><\/i> <small style=\"font-size:0.7rem\">2.4K<\/small><\/span>\r\n                                            <span><i class=\"fa-regular fa-comment\"><\/i> <small style=\"font-size:0.7rem\">320<\/small><\/span>\r\n                                            <span><i class=\"fa-regular fa-paper-plane\"><\/i><\/span>\r\n                                        <\/div>\r\n                                        <i class=\"fa-regular fa-bookmark\"><\/i>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                \r\n                                <!-- Bottom Nav Mockup -->\r\n                                <div style=\"display:flex; justify-content:space-around; padding-top:10px; border-top: 1px solid #eee; margin-top: auto; font-size: 1.2rem; color: #888;\">\r\n                                    <i class=\"fa-solid fa-house\" style=\"color:var(--primary-blue)\"><\/i>\r\n                                    <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n                                    <i class=\"fa-regular fa-square-plus\"><\/i>\r\n                                    <i class=\"fa-regular fa-user\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Handwritten text bottom right -->\r\n                        <div class=\"connect-text\">\r\n                            Connect<br>\r\n                            Share<br>\r\n                            Engage<br>\r\n                            Grow\r\n                        <\/div>\r\n                    \r\n                    <!-- Added Missing Closing Divs Here -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2369d43 e-flex e-con-boxed e-con e-parent\" data-id=\"2369d43\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e29b74c elementor-widget elementor-widget-html\" data-id=\"e29b74c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\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>Social Media App Development<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700;800&family=Caveat:wght@700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* Isolate styles using a specific wrapper class *\/\r\n        .social-media-wrapper {\r\n            font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n            background-color: #ffffff;\r\n            padding: 5rem 2rem;\r\n            width: 100%;\r\n        }\r\n\r\n        .social-media-wrapper * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .social-media-wrapper .container {\r\n            max-width: 1350px;\r\n            margin: 0 auto;\r\n            display: flex;\r\n            gap: 2.5rem;\r\n            align-items: stretch; \/* Forces both child columns to be the same height *\/\r\n        }\r\n\r\n        \/* Left Side: Cards Section *\/\r\n        .social-media-wrapper .left-content {\r\n            flex: 2.2; \/* Takes up more space to fit 4 cards nicely *\/\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .social-media-wrapper .section-title {\r\n            font-size: 2.25rem;\r\n            color: #111827;\r\n            font-weight: 800;\r\n            margin-bottom: 1rem;\r\n            letter-spacing: -0.025em;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .social-media-wrapper .section-title span {\r\n            background: linear-gradient(to right, #ec4899, #8b5cf6, #3b82f6);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .social-media-wrapper .section-subtitle {\r\n            font-size: 1.05rem;\r\n            color: #4b5563;\r\n            margin-bottom: 2.5rem;\r\n            line-height: 1.6;\r\n            max-width: 90%;\r\n        }\r\n\r\n        .social-media-wrapper .cards-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 1.5rem;\r\n            flex: 1; \/* Allows grid to take remaining space if needed *\/\r\n        }\r\n\r\n        .social-media-wrapper .card-item {\r\n            background-color: #ffffff;\r\n            border: 1px solid #f3f4f6;\r\n            border-radius: 16px;\r\n            padding: 2.5rem 1.25rem;\r\n            text-align: center;\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .social-media-wrapper .card-item:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 12px 30px rgba(139, 92, 246, 0.1);\r\n            border-color: #ede9fe;\r\n        }\r\n\r\n        .social-media-wrapper .icon-circle {\r\n            width: 64px;\r\n            height: 64px;\r\n            border-radius: 16px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 1.5rem auto;\r\n            color: #ffffff;\r\n            transform: rotate(-3deg);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .social-media-wrapper .card-item:hover .icon-circle {\r\n            transform: rotate(0deg) scale(1.05);\r\n        }\r\n\r\n        .social-media-wrapper .icon-circle svg {\r\n            width: 28px;\r\n            height: 28px;\r\n            stroke: currentColor;\r\n            stroke-width: 2;\r\n            fill: none;\r\n            stroke-linecap: round;\r\n            stroke-linejoin: round;\r\n        }\r\n\r\n        .social-media-wrapper .bg-pink { background: linear-gradient(135deg, #f43f5e, #db2777); }\r\n        .social-media-wrapper .bg-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); }\r\n        .social-media-wrapper .bg-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }\r\n        .social-media-wrapper .bg-rose { background: linear-gradient(135deg, #fb7185, #e11d48); }\r\n\r\n        .social-media-wrapper .card-item h3 {\r\n            font-size: 1.1rem;\r\n            color: #1f2937;\r\n            font-weight: 700;\r\n            margin-bottom: 0.75rem;\r\n        }\r\n\r\n        .social-media-wrapper .card-item p {\r\n            font-size: 0.875rem;\r\n            color: #6b7280;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* Right Side: Why Choose Panel *\/\r\n        .social-media-wrapper .right-panel {\r\n            flex: 1;\r\n            background: linear-gradient(145deg, #fdf4ff, #f3e8ff); \/* Faint pink\/purple *\/\r\n            border-radius: 24px;\r\n            padding: 2.5rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n            border: 1px solid #fae8ff;\r\n            box-shadow: inset 0 0 40px rgba(255,255,255,0.5);\r\n        }\r\n\r\n        .social-media-wrapper .panel-title {\r\n            font-size: 1.5rem;\r\n            color: #4c1d95; \/* Deep purple *\/\r\n            font-weight: 800;\r\n            margin-bottom: 1.5rem;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .social-media-wrapper .feature-list {\r\n            list-style: none;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .social-media-wrapper .feature-list li {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 1rem;\r\n            font-size: 0.95rem;\r\n            color: #4b5563;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .social-media-wrapper .check-icon {\r\n            width: 22px;\r\n            height: 22px;\r\n            margin-right: 12px;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        \/* Signature and Swoosh *\/\r\n        .social-media-wrapper .signature-area {\r\n            margin-top: auto; \/* Pushes signature to the exact bottom *\/\r\n            align-self: flex-end;\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n            padding-right: 1.5rem;\r\n            padding-top: 2rem;\r\n        }\r\n\r\n        .social-media-wrapper .signature-text {\r\n            font-family: 'Caveat', cursive;\r\n            color: #d946ef; \/* Vibrant fuchsia *\/\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n            line-height: 1;\r\n            transform: rotate(-6deg);\r\n        }\r\n\r\n        .social-media-wrapper .swoosh {\r\n            width: 90px;\r\n            height: 20px;\r\n            stroke: #d946ef;\r\n            stroke-width: 3;\r\n            fill: none;\r\n            stroke-linecap: round;\r\n            transform: rotate(-6deg);\r\n            margin-top: 5px;\r\n        }\r\n\r\n        \/* Faint Network Watermark *\/\r\n        .social-media-wrapper .network-bg {\r\n            position: absolute;\r\n            right: -30px;\r\n            bottom: -30px;\r\n            height: 90%;\r\n            width: auto;\r\n            opacity: 0.03;\r\n            color: #7c3aed;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Responsive Breakpoints *\/\r\n        @media (max-width: 1200px) {\r\n            .social-media-wrapper .container {\r\n                flex-direction: column;\r\n            }\r\n            .social-media-wrapper .right-panel {\r\n                width: 100%;\r\n                max-width: 700px;\r\n                margin: 0 auto;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .social-media-wrapper .cards-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .social-media-wrapper {\r\n                padding: 3rem 1rem;\r\n            }\r\n            .social-media-wrapper .cards-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .social-media-wrapper .section-title {\r\n                font-size: 1.75rem;\r\n            }\r\n            .social-media-wrapper .signature-area {\r\n                align-self: center;\r\n                padding-right: 0;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"social-media-wrapper\">\r\n    <div class=\"container\">\r\n        \r\n        <!-- Left Side: Cards Container -->\r\n        <div class=\"left-content\">\r\n            <h2 class=\"section-title\">Complete Social Media App Development Solutions in Bangalore<\/span><\/h2>\r\n            <p class=\"section-subtitle\">We craft engaging, scalable, and highly interactive social networking platforms tailored to connect communities, build brands, and drive digital growth.<\/p>\r\n            \r\n            <div class=\"cards-grid\">\r\n                \r\n                <!-- Card 1: User Profiles -->\r\n                <div class=\"card-item\">\r\n                    <div class=\"icon-circle bg-pink\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                            <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path>\r\n                            <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3>User Profiles<\/h3>\r\n                    <p>Customizable profiles with avatars, bios, badges, and detailed user activity tracking.<\/p>\r\n                <\/div>\r\n\r\n                <!-- Card 2: News Feed -->\r\n                <div class=\"card-item\">\r\n                    <div class=\"icon-circle bg-purple\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\r\n                            <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle>\r\n                            <polyline points=\"21 15 16 10 5 21\"><\/polyline>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3>Smart News Feed<\/h3>\r\n                    <p>Algorithm-driven media feeds supporting images, videos, stories, and live interactions.<\/p>\r\n                <\/div>\r\n\r\n                <!-- Card 3: Messaging -->\r\n                <div class=\"card-item\">\r\n                    <div class=\"icon-circle bg-blue\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                            <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3>Real-Time Chat<\/h3>\r\n                    <p>Secure direct messaging, group chats, voice notes, and instant push notifications.<\/p>\r\n                <\/div>\r\n\r\n                <!-- Card 4: Admin Panel -->\r\n                <div class=\"card-item\">\r\n                    <div class=\"icon-circle bg-rose\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\r\n                            <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line>\r\n                            <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <h3>Admin & Analytics<\/h3>\r\n                    <p>Powerful dashboard to manage content, moderate users, and track platform engagement.<\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Right Side: Why Choose Panel -->\r\n        <div class=\"right-panel\">\r\n            \r\n            <!-- Faint background network icon -->\r\n            <svg class=\"network-bg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                <circle cx=\"18\" cy=\"5\" r=\"3\"><\/circle>\r\n                <circle cx=\"6\" cy=\"12\" r=\"3\"><\/circle>\r\n                <circle cx=\"18\" cy=\"19\" r=\"3\"><\/circle>\r\n                <line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\" stroke=\"currentColor\" stroke-width=\"2\"><\/line>\r\n                <line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\" stroke=\"currentColor\" stroke-width=\"2\"><\/line>\r\n            <\/svg>\r\n\r\n            <h2 class=\"panel-title\">Why Choose Our Bangalore Team?<\/h2>\r\n            \r\n            <ul class=\"feature-list\">\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Access to Top Tier Tech Talent\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    High-Performance Real-Time Engines\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Engaging UI\/UX & Gamification\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Data Security & Privacy Compliance\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Scalable Cloud Architecture\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Agile Development Sprints\r\n                <\/li>\r\n                <li>\r\n                    <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#a855f7\"\/>\r\n                        <path d=\"M8 12l2.5 2.5L16 9\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    Post-Launch Growth & Support\r\n                <\/li>\r\n            <\/ul>\r\n\r\n            <div class=\"signature-area\">\r\n                <div class=\"signature-text\">Connect<br>The World<\/div>\r\n                <svg class=\"swoosh\" viewBox=\"0 0 100 20\">\r\n                    <path d=\"M5,15 Q50,0 95,15\" \/>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\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-563d25d e-flex e-con-boxed e-con e-parent\" data-id=\"563d25d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-059457a elementor-widget elementor-widget-html\" data-id=\"059457a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"social-media-features-wrapper\">\r\n    <style>\r\n        .social-media-features-wrapper {\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n            max-width: 1350px;\r\n            margin: 0 auto;\r\n            padding: 40px 20px;\r\n            box-sizing: border-box;\r\n            background-color: #ffffff;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-header {\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-header h2 {\r\n            font-size: 26px;\r\n            font-weight: 700;\r\n            color: #1a1a2e;\r\n            margin: 0 0 10px 0;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-header p {\r\n            font-size: 16px;\r\n            color: #5c677d;\r\n            margin: 0;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-card {\r\n            background: #fafbff;\r\n            border: 1px solid #eef2f9;\r\n            border-radius: 12px;\r\n            padding: 30px;\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-card-header {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-icon {\r\n            width: 48px;\r\n            height: 48px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin-right: 15px;\r\n            color: #ffffff;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-icon svg {\r\n            width: 22px;\r\n            height: 22px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        \/* Vibrant Social Media Color Palette *\/\r\n        .social-media-features-wrapper .sm-icon-user {\r\n            background-color: #ec4899; \/* Vibrant Pink *\/\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-icon-creator {\r\n            background-color: #8b5cf6; \/* Vibrant Purple *\/\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-icon-admin {\r\n            background-color: #3b82f6; \/* Vibrant Blue *\/\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-card-title {\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n            color: #1a1a2e;\r\n            margin: 0;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-list {\r\n            list-style: none;\r\n            padding: 0;\r\n            margin: 0;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-list li {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            margin-bottom: 14px;\r\n            font-size: 14.5px;\r\n            color: #4a5568;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-list li:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .social-media-features-wrapper .sm-list li svg {\r\n            flex-shrink: 0;\r\n            width: 18px;\r\n            height: 18px;\r\n            margin-right: 12px;\r\n            margin-top: 2px;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .social-media-features-wrapper .sm-header h2 {\r\n                font-size: 24px;\r\n            }\r\n            .social-media-features-wrapper .sm-grid {\r\n                gap: 20px;\r\n            }\r\n            .social-media-features-wrapper .sm-card {\r\n                padding: 25px 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"sm-header\">\r\n        <h2>Key Features of a Social Media App<\/h2>\r\n        <p>We develop feature-rich social platforms with everything you need to build engaging communities and drive interactions.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"sm-grid\">\r\n        <!-- User Features Card -->\r\n        <div class=\"sm-card\">\r\n            <div class=\"sm-card-header\">\r\n                <div class=\"sm-icon sm-icon-user\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                        <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h3 class=\"sm-card-title\">User Features<\/h3>\r\n            <\/div>\r\n            <ul class=\"sm-list\">\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>User registration & customizable profiles<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Smart algorithmic news feed<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Real-time messaging & group chats<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Like, comment, share & save functionalities<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Photo & HD video media sharing<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Ephemeral stories & status updates<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Advanced search & content discovery<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Interactive polls & community forums<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Push notifications & alerts<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Privacy controls & user blocking<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Creator \/ Influencer Features Card -->\r\n        <div class=\"sm-card\">\r\n            <div class=\"sm-card-header\">\r\n                <div class=\"sm-icon sm-icon-creator\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                        <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h3 class=\"sm-card-title\">Creator Features<\/h3>\r\n            <\/div>\r\n            <ul class=\"sm-list\">\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Dedicated creator dashboards<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>In-depth audience analytics<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Content scheduling & drafts<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Monetization & virtual tipping<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Live streaming capabilities<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Verified account badges<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Exclusive paid subscriptions<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Brand collaboration tools<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Follower management<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Detailed engagement insights<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Admin Panel Features Card -->\r\n        <div class=\"sm-card\">\r\n            <div class=\"sm-card-header\">\r\n                <div class=\"sm-icon sm-icon-admin\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.06-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.73,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.06,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.49-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z\"\/><\/svg>\r\n                <\/div>\r\n                <h3 class=\"sm-card-title\">Admin Panel Features<\/h3>\r\n            <\/div>\r\n            <ul class=\"sm-list\">\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>User & creator profile management<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Content moderation & AI filtering<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Targeted ad campaign management<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Platform-wide analytics & reporting<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Role-based access control (RBAC)<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Spam & fake account detection<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Revenue tracking & creator payouts<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Global push notification broadcast<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Algorithm & feed configuration<\/li>\r\n                <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>Privacy, GDPR & compliance tools<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\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-ed76fc2 e-flex e-con-boxed e-con e-parent\" data-id=\"ed76fc2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88ed8bf elementor-widget elementor-widget-html\" data-id=\"88ed8bf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\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>Social Media App Development Process<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"social-dev-wrapper\">\r\n    <style>\r\n        .social-dev-wrapper {\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n            max-width: 1350px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            gap: 20px;\r\n            color: #1a202c;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .social-dev-wrapper * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .social-dev-wrapper .dev-section, \r\n        .social-dev-wrapper .industries-section {\r\n            background-color: #f7f9fd;\r\n            border-radius: 16px;\r\n            padding: 35px;\r\n        }\r\n\r\n        .social-dev-wrapper .dev-section {\r\n            flex: 1.7; \/* Primary section space *\/\r\n        }\r\n\r\n        .social-dev-wrapper .industries-section {\r\n            flex: 1.1; \/* Secondary section space *\/\r\n        }\r\n\r\n        .social-dev-wrapper .section-header h2 {\r\n            font-size: 24px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            color: #111827;\r\n            letter-spacing: -0.5px;\r\n        }\r\n\r\n        .social-dev-wrapper .section-header p {\r\n            font-size: 15px;\r\n            color: #6b7280;\r\n            margin: 0 0 45px 0;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .social-dev-wrapper .timeline-container {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            position: relative;\r\n        }\r\n\r\n        \/* The horizontal connecting line *\/\r\n        .social-dev-wrapper .timeline-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 28px; \/* Center of the 56px icon *\/\r\n            left: 10%;\r\n            right: 10%;\r\n            height: 2px;\r\n            background-color: #e5e7eb;\r\n            z-index: 1;\r\n        }\r\n\r\n        .social-dev-wrapper .timeline-step {\r\n            flex: 1;\r\n            text-align: center;\r\n            position: relative;\r\n            z-index: 2;\r\n            padding: 0 12px;\r\n        }\r\n\r\n        .social-dev-wrapper .step-icon {\r\n            width: 56px;\r\n            height: 56px;\r\n            margin: 0 auto 16px auto;\r\n            background-color: #ffffff;\r\n            border: 2.5px solid #8b5cf6; \/* Deep Purple *\/\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #8b5cf6;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .social-dev-wrapper .timeline-step:hover .step-icon {\r\n            transform: scale(1.1);\r\n            box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);\r\n            background-color: #8b5cf6;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .social-dev-wrapper .step-icon svg {\r\n            width: 24px;\r\n            height: 24px;\r\n        }\r\n\r\n        .social-dev-wrapper .timeline-step h4 {\r\n            font-size: 15px;\r\n            font-weight: 700;\r\n            color: #1f2937;\r\n            margin: 0 0 8px 0;\r\n        }\r\n\r\n        .social-dev-wrapper .timeline-step p {\r\n            font-size: 13px;\r\n            color: #6b7280;\r\n            margin: 0;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .social-dev-wrapper .industries-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 16px;\r\n        }\r\n\r\n        .social-dev-wrapper .industry-card {\r\n            background-color: #ffffff;\r\n            border-radius: 12px;\r\n            padding: 24px 12px;\r\n            text-align: center;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);\r\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border: 1px solid #f3f4f6;\r\n        }\r\n\r\n        .social-dev-wrapper .industry-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);\r\n            border-color: #e0e7ff;\r\n        }\r\n\r\n        .social-dev-wrapper .industry-card svg {\r\n            width: 32px;\r\n            height: 32px;\r\n            color: #3b82f6; \/* Bright Blue *\/\r\n            margin-bottom: 14px;\r\n        }\r\n\r\n        .social-dev-wrapper .industry-card span {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: #374151;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            .social-dev-wrapper {\r\n                flex-direction: column;\r\n            }\r\n            .social-dev-wrapper .timeline-container::before {\r\n                left: 8%;\r\n                right: 8%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .social-dev-wrapper .dev-section, \r\n            .social-dev-wrapper .industries-section {\r\n                padding: 25px 20px;\r\n            }\r\n            .social-dev-wrapper .timeline-container {\r\n                flex-direction: column;\r\n                gap: 40px;\r\n            }\r\n            \/* Morph the horizontal line into a vertical connecting line for mobile *\/\r\n            .social-dev-wrapper .timeline-container::before {\r\n                top: 0;\r\n                bottom: 0;\r\n                left: 50%;\r\n                width: 2px;\r\n                height: 100%;\r\n                transform: translateX(-50%);\r\n            }\r\n            .social-dev-wrapper .timeline-step {\r\n                display: flex;\r\n                flex-direction: column;\r\n                align-items: center;\r\n                background-color: #f7f9fd; \/* Covers the vertical line slightly for neatness *\/\r\n                padding: 10px 0;\r\n            }\r\n            .social-dev-wrapper .industries-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .social-dev-wrapper .industries-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"dev-section\">\r\n        <div class=\"section-header\">\r\n            <h2>Our Development Process<\/h2>\r\n            <p>A structured, agile approach to building high-performance social networking platforms.<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"timeline-container\">\r\n            <!-- Step 1: Discover -->\r\n            <div class=\"timeline-step\">\r\n                <div class=\"step-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\"\/>\r\n                        <path d=\"M21 21L16.65 16.65\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h4>1. Discover<\/h4>\r\n                <p>Understand your community and target audience.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Step 2: Design -->\r\n            <div class=\"timeline-step\">\r\n                <div class=\"step-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\r\n                        <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line>\r\n                        <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h4>2. Design<\/h4>\r\n                <p>Create engaging wireframes and UI\/UX flows.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Step 3: Develop -->\r\n            <div class=\"timeline-step\">\r\n                <div class=\"step-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"16 18 22 12 16 6\"><\/polyline>\r\n                        <polyline points=\"8 6 2 12 8 18\"><\/polyline>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h4>3. Develop<\/h4>\r\n                <p>Build your app with scalable real-time architecture.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Step 4: Test -->\r\n            <div class=\"timeline-step\">\r\n                <div class=\"step-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h4>4. Test<\/h4>\r\n                <p>Ensure quality, speed, and data security.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Step 5: Launch -->\r\n            <div class=\"timeline-step\">\r\n                <div class=\"step-icon\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"><\/path>\r\n                        <path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"><\/path>\r\n                        <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"><\/path>\r\n                        <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <h4>5. Launch<\/h4>\r\n                <p>Deploy to stores and scale your user base.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"industries-section\">\r\n        <div class=\"section-header\">\r\n            <h2>Who We Build For<\/h2>\r\n            <p>We develop interactive platforms for diverse social media niches.<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"industries-grid\">\r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect>\r\n                    <path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"><\/path>\r\n                <\/svg>\r\n                <span>Enterprises &<br>Brands<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <polygon points=\"23 7 16 12 23 17 23 7\"><\/polygon>\r\n                    <rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect>\r\n                <\/svg>\r\n                <span>Content<br>Creators<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"><\/polygon>\r\n                <\/svg>\r\n                <span>Tech<br>Startups<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path>\r\n                <\/svg>\r\n                <span>Dating &<br>Matchmaking<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\r\n                    <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\r\n                    <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path>\r\n                    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\r\n                <\/svg>\r\n                <span>Professional<br>Networks<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"industry-card\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"><\/line>\r\n                    <line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"><\/line>\r\n                    <line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"><\/line>\r\n                    <line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"><\/line>\r\n                <\/svg>\r\n                <span>Interest-based<br>Communities<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\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-03cffdb e-flex e-con-boxed e-con e-parent\" data-id=\"03cffdb\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f993af5 elementor-widget elementor-widget-html\" data-id=\"f993af5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\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>Social Media App Development<\/title>\r\n  \r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n    .social-tech-section {\r\n      font-family: 'Plus Jakarta Sans', sans-serif;\r\n      padding: 80px 20px;\r\n      background-color: #fcfaff; \/* Light warm tint fitting social media *\/\r\n      color: #1e293b;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .social-container {\r\n      max-width: 1440px;\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1.3fr;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* LEFT COLUMN *\/\r\n    .social-tag {\r\n      color: #4f46e5; \/* Primary Indigo *\/\r\n      font-size: 12px;\r\n      font-weight: 700;\r\n      letter-spacing: 1.5px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .social-tag .tag-line {\r\n      width: 30px;\r\n      height: 2px;\r\n      background: #4f46e5;\r\n      display: inline-block;\r\n    }\r\n\r\n    .social-tag .tag-dot {\r\n      width: 4px;\r\n      height: 4px;\r\n      background-color: #4f46e5;\r\n      border-radius: 50%;\r\n    }\r\n\r\n    .social-title {\r\n      font-size: 46px;\r\n      font-weight: 800;\r\n      line-height: 1.15;\r\n      color: #0f172a;\r\n      margin: 0 0 20px 0;\r\n      letter-spacing: -1px;\r\n    }\r\n\r\n    .social-title span { \r\n      color: #4f46e5;\r\n    }\r\n\r\n    .social-description {\r\n      font-size: 16px;\r\n      color: #475569;\r\n      line-height: 1.6;\r\n      margin-bottom: 35px;\r\n      max-width: 90%;\r\n    }\r\n\r\n    .social-props-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 12px;\r\n      margin-bottom: 30px;\r\n    }\r\n\r\n    .social-prop-item {\r\n      background: #ffffff;\r\n      padding: 24px 12px;\r\n      border-radius: 12px;\r\n      text-align: center;\r\n      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.04);\r\n      border: 1px solid #e2e8f0;\r\n      transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .social-prop-item:hover {\r\n      transform: translateY(-5px);\r\n      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.08);\r\n    }\r\n\r\n    .social-icon {\r\n      width: 48px;\r\n      height: 48px;\r\n      border-radius: 12px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 0 auto 16px auto;\r\n    }\r\n\r\n    .social-icon svg { width: 24px; height: 24px; }\r\n    \r\n    \/* Color variations for icons *\/\r\n    .social-icon-blue { background: #dbeafe; color: #2563eb; }\r\n    .social-icon-cyan { background: #ccfbf1; color: #0d9488; }\r\n    .social-icon-indigo { background: #e0e7ff; color: #4f46e5; }\r\n    .social-icon-purple { background: #fae8ff; color: #c026d3; }\r\n\r\n    .social-prop-item h4 { \r\n      font-size: 13px; \r\n      font-weight: 700; \r\n      margin: 0 0 6px 0; \r\n      color: #0f172a;\r\n    }\r\n\r\n    .social-prop-item p { \r\n      font-size: 11px; \r\n      color: #64748b; \r\n      margin: 0; \r\n      line-height: 1.4; \r\n    }\r\n\r\n    .social-architecture-pill {\r\n      background: #ffffff;\r\n      border: 1px solid #c7d2fe;\r\n      border-radius: 12px;\r\n      padding: 16px 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      position: relative;\r\n      cursor: pointer;\r\n      box-shadow: 0 10px 20px rgba(79, 70, 229, 0.05);\r\n      transition: border-color 0.3s;\r\n    }\r\n    \r\n    .social-architecture-pill:hover {\r\n        border-color: #4f46e5;\r\n    }\r\n\r\n    .social-architecture-pill .app-icon {\r\n      background: #4f46e5;\r\n      color: #fff;\r\n      width: 40px;\r\n      height: 40px;\r\n      border-radius: 8px;\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    .social-architecture-pill .app-icon svg {\r\n        width: 22px; height: 22px;\r\n    }\r\n\r\n    .social-architecture-pill .pill-text-content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 4px;\r\n    }\r\n\r\n    .social-architecture-pill strong { \r\n      display: block; \r\n      font-size: 14px; \r\n      color: #3730a3; \r\n    }\r\n\r\n    .social-architecture-pill p { \r\n      margin: 0; \r\n      font-size: 12px; \r\n      color: #64748b; \r\n    }\r\n\r\n    .social-architecture-pill .pill-arrow {\r\n      margin-left: auto;\r\n      color: #3730a3;\r\n    }\r\n    \r\n    .social-architecture-pill .pill-arrow svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    \/* RIGHT COLUMN & CARDS *\/\r\n    .social-right {\r\n      position: relative;\r\n      background: #ffffff;\r\n      padding: 40px;\r\n      border-radius: 24px;\r\n      box-shadow: 0 20px 40px rgba(79, 70, 229, 0.06);\r\n      border: 1px solid #e0e7ff;\r\n    }\r\n\r\n    .social-cards-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 30px;\r\n    }\r\n\r\n    .social-card {\r\n      background: #ffffff;\r\n      border: 1px solid #f1f5f9;\r\n      border-radius: 16px;\r\n      padding: 24px;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.02);\r\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n    \r\n    .social-card:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 10px 20px rgba(79, 70, 229, 0.08);\r\n        border-color: #c7d2fe;\r\n    }\r\n\r\n    .social-card .card-header {\r\n      display: flex;\r\n      gap: 16px;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .social-card .card-icon {\r\n      width: 40px;\r\n      height: 40px;\r\n      border-radius: 8px;\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    .social-card .card-icon svg { width: 20px; height: 20px; }\r\n    \r\n    .icon-blue { background: #dbeafe; color: #2563eb; }\r\n    .icon-cyan { background: #ccfbf1; color: #0d9488; }\r\n    .icon-indigo { background: #e0e7ff; color: #4f46e5; }\r\n    .icon-purple { background: #fae8ff; color: #c026d3; }\r\n\r\n    .social-card .card-header h3 {\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      color: #1e293b;\r\n      margin: 0 0 6px 0;\r\n      letter-spacing: 0.5px;\r\n    }\r\n\r\n    .social-card .card-header p {\r\n      font-size: 12px;\r\n      color: #64748b;\r\n      margin: 0;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .social-tags {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n\r\n    .social-tag-item {\r\n      font-size: 12px;\r\n      font-weight: 600;\r\n      color: #334155;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding-top: 8px;\r\n      border-top: 1px dashed #e2e8f0;\r\n    }\r\n\r\n    \/* CENTER APP BADGE *\/\r\n    .social-badge-wrapper {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      width: 140px;\r\n      height: 140px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      z-index: 10;\r\n    }\r\n\r\n    .social-badge-wrapper .orbit-circle {\r\n      position: absolute;\r\n      border-radius: 50%;\r\n      border: 1px dashed #a5b4fc;\r\n    }\r\n\r\n    .orbit-1 { width: 100%; height: 100%; animation: rotateOrbit 20s linear infinite; }\r\n    .orbit-2 { width: 130%; height: 130%; border-color: #818cf8; animation: rotateOrbitReverse 25s linear infinite; }\r\n\r\n    .social-badge-wrapper .orbit-dot {\r\n      position: absolute;\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n    }\r\n\r\n    .dot-a { background-color: #4f46e5; top: -4px; left: 50%; transform: translateX(-50%); }\r\n    .dot-b { background-color: #e11d48; bottom: -4px; left: 50%; transform: translateX(-50%); }\r\n\r\n    .social-badge-wrapper .badge-content {\r\n      width: 74px;\r\n      height: 74px;\r\n      background: #ffffff;\r\n      border-radius: 50%;\r\n      box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border: 4px solid #eef2ff;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .social-badge-wrapper .badge-content svg {\r\n      width: 32px;\r\n      height: 32px;\r\n    }\r\n\r\n    \/* STATS BANNER *\/\r\n    .social-stats-banner {\r\n      max-width: 1100px;\r\n      margin: 50px auto 0 auto;\r\n      background: #ffffff;\r\n      border-radius: 100px;\r\n      padding: 16px 40px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      box-shadow: 0 15px 35px rgba(79, 70, 229, 0.06);\r\n      border: 1px solid #f1f5f9;\r\n    }\r\n\r\n    .social-stats-banner .banner-left {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n    }\r\n\r\n    .social-stats-banner .chart-icon {\r\n      background: #e11d48; \/* Vibrant Rose for engagement *\/\r\n      color: white;\r\n      width: 44px;\r\n      height: 44px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n    \r\n    .social-stats-banner .chart-icon svg {\r\n      width: 22px;\r\n      height: 22px;\r\n    }\r\n\r\n    .social-stats-banner .banner-text {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .social-stats-banner .banner-text strong {\r\n      font-size: 13px;\r\n      color: #0f172a;\r\n    }\r\n    \r\n    .social-stats-banner .banner-text span {\r\n      font-size: 12px;\r\n      color: #64748b;\r\n    }\r\n\r\n    .social-stats-banner .banner-stats { \r\n      display: flex; \r\n      align-items: center; \r\n      gap: 30px; \r\n    }\r\n\r\n    .social-stats-banner .stat-item { \r\n      text-align: center; \r\n    }\r\n\r\n    .social-stats-banner .stat-item h4 { \r\n      font-size: 20px; \r\n      font-weight: 800; \r\n      color: #4f46e5; \r\n      margin: 0 0 2px 0; \r\n    }\r\n\r\n    .social-stats-banner .stat-item p { \r\n      font-size: 10px; \r\n      color: #64748b; \r\n      font-weight: 700;\r\n      margin: 0; \r\n      text-transform: uppercase;\r\n      letter-spacing: 0.5px;\r\n    }\r\n\r\n    .social-stats-banner .stat-divider { \r\n      width: 1px; \r\n      height: 35px; \r\n      background-color: #e2e8f0; \r\n    }\r\n\r\n    \/* KEYFRAMES *\/\r\n    @keyframes rotateOrbit {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    @keyframes rotateOrbitReverse {\r\n      0% { transform: rotate(360deg); }\r\n      100% { transform: rotate(0deg); }\r\n    }\r\n\r\n    \/* RESPONSIVE *\/\r\n    @media (max-width: 1150px) {\r\n      .social-container { grid-template-columns: 1fr; gap: 40px; }\r\n      .social-badge-wrapper { display: none; }\r\n      .social-stats-banner { flex-direction: column; gap: 24px; border-radius: 24px; text-align: center; padding: 24px; }\r\n      .social-stats-banner .banner-left { flex-direction: column; text-align: center; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .social-props-grid { grid-template-columns: repeat(2, 1fr); }\r\n      .social-title { font-size: 34px; }\r\n      .social-right { padding: 20px; }\r\n      .social-cards-grid { grid-template-columns: 1fr; }\r\n    }\r\n    \r\n    @media (max-width: 480px) {\r\n      .social-props-grid { grid-template-columns: 1fr; }\r\n      .social-stats-banner .banner-stats { flex-direction: column; gap: 15px; }\r\n      .social-stats-banner .stat-divider { width: 50px; height: 1px; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <section class=\"social-tech-section\">\r\n    <div class=\"social-container\">\r\n      \r\n      <!-- LEFT COLUMN: Heading & Highlights -->\r\n      <div class=\"social-left\">\r\n        <div class=\"social-tag\">\r\n          SOCIAL MEDIA APP DEVELOPMENT <span class=\"tag-line\"><\/span><span class=\"tag-dot\"><\/span>\r\n        <\/div>\r\n        \r\n        <h2 class=\"social-title\">\r\n          Build the Best<br>Social Media App<br><span>in Bangalore<\/span>\r\n        <\/h2>\r\n        \r\n        <p class=\"social-description\">\r\n          We leverage robust, scalable technologies to build ultra-responsive social networking applications that enable real-time messaging, intelligent feed algorithms, and seamless content sharing.\r\n        <\/p>\r\n\r\n        <!-- 4 Value Props -->\r\n        <div class=\"social-props-grid\">\r\n          <div class=\"social-prop-item\">\r\n            <div class=\"social-icon social-icon-blue\">\r\n              <!-- Chat Icon -->\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Real-Time Chat<\/h4>\r\n            <p>Instant messaging<br>& media<\/p>\r\n          <\/div>\r\n          <div class=\"social-prop-item\">\r\n            <div class=\"social-icon social-icon-cyan\">\r\n              <!-- Feed\/Algorithm Icon -->\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Smart Feeds<\/h4>\r\n            <p>AI-driven content<br>discovery<\/p>\r\n          <\/div>\r\n          <div class=\"social-prop-item\">\r\n            <div class=\"social-icon social-icon-indigo\">\r\n              <!-- Media\/Camera Icon -->\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Media Sharing<\/h4>\r\n            <p>High-res photos<br>& videos<\/p>\r\n          <\/div>\r\n          <div class=\"social-prop-item\">\r\n            <div class=\"social-icon social-icon-purple\">\r\n              <!-- Live Video Icon -->\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\"\/><\/svg>\r\n            <\/div>\r\n            <h4>Live Streaming<\/h4>\r\n            <p>Real-time broad-<br>casting<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Feature Pill -->\r\n        <div class=\"social-architecture-pill\">\r\n          <div class=\"app-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"pill-text-content\">\r\n            <strong>Custom Social Apps. Built for peak engagement.<\/strong>\r\n            <p>From personalized feeds to global viral communities.<\/p>\r\n          <\/div>\r\n          <div class=\"pill-arrow\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- RIGHT COLUMN: Grid Cards + Center Badge -->\r\n      <div class=\"social-right\">\r\n        <div class=\"social-cards-grid\">\r\n          \r\n          <!-- User App Card -->\r\n          <div class=\"social-card\">\r\n            <div class=\"card-header\">\r\n              <div class=\"card-icon icon-blue\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n              <\/div>\r\n              <div>\r\n                <h3>SOCIAL USER APP<\/h3>\r\n                <p>Discover content, share stories, and build vibrant communities.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"social-tags\">\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\ud83d\udcf1<\/span> React Native \/ Kotlin<\/div>\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\u26a1<\/span> Firebase & GraphQL<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Creator Panel Card -->\r\n          <div class=\"social-card\">\r\n            <div class=\"card-header\">\r\n              <div class=\"card-icon icon-cyan\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n              <\/div>\r\n              <div>\r\n                <h3>CREATOR STUDIO<\/h3>\r\n                <p>Monetization, audience insights, and campaign management.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"social-tags\">\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\ud83d\udcb3<\/span> Stripe Connect<\/div>\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\ud83d\udcca<\/span> Advanced Analytics<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Admin Card -->\r\n          <div class=\"social-card\">\r\n            <div class=\"card-header\">\r\n              <div class=\"card-icon icon-indigo\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"\/><rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"\/><rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"\/><\/svg>\r\n              <\/div>\r\n              <div>\r\n                <h3>SUPER ADMIN<\/h3>\r\n                <p>Content moderation, user management, and ad network control.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"social-tags\">\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\u2699\ufe0f<\/span> Node.js \/ React.js<\/div>\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\u2601\ufe0f<\/span> AWS \/ Google Cloud<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Devices\/AR Card -->\r\n          <div class=\"social-card\">\r\n            <div class=\"card-header\">\r\n              <div class=\"card-icon icon-purple\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/svg>\r\n              <\/div>\r\n              <div>\r\n                <h3>AR & LIVE MEDIA<\/h3>\r\n                <p>Immersive AR filters, live audio rooms, and real-time video streaming.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"social-tags\">\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\ud83d\udce1<\/span> WebRTC \/ Socket.io<\/div>\r\n              <div class=\"social-tag-item\"><span class=\"tag-ico\">\ud83d\udd76\ufe0f<\/span> ARCore & ARKit<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- CENTER BADGE -->\r\n        <div class=\"social-badge-wrapper\">\r\n          <div class=\"orbit-circle orbit-1\">\r\n            <div class=\"orbit-dot dot-a\"><\/div>\r\n          <\/div>\r\n          <div class=\"orbit-circle orbit-2\">\r\n            <div class=\"orbit-dot dot-b\"><\/div>\r\n          <\/div>\r\n          \r\n          <div class=\"badge-content\">\r\n            <!-- Heart SVG -->\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e11d48\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- BOTTOM STATS BANNER -->\r\n    <div class=\"social-stats-banner\">\r\n      <div class=\"banner-left\">\r\n        <div class=\"chart-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><polyline points=\"17 6 23 6 23 12\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"banner-text\">\r\n          <strong>Empowering global communities, creators & viral brands.<\/strong>\r\n          <span>Scalable. Secure. Built for High Daily Active Users.<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"banner-stats\">\r\n        <div class=\"stat-item\">\r\n          <h4>50M+<\/h4>\r\n          <p>POSTS<br>SHARED<\/p>\r\n        <\/div>\r\n        <div class=\"stat-divider\"><\/div>\r\n        <div class=\"stat-item\">\r\n          <h4>99.9%<\/h4>\r\n          <p>SERVER<br>UPTIME<\/p>\r\n        <\/div>\r\n        <div class=\"stat-divider\"><\/div>\r\n        <div class=\"stat-item\">\r\n          <h4>5X<\/h4>\r\n          <p>USER<br>ENGAGEMENT<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/body>\r\n<\/html>\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-badc201 e-flex e-con-boxed e-con e-parent\" data-id=\"badc201\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd0573a elementor-widget elementor-widget-html\" data-id=\"bd0573a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\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>Social Media App Development FAQs<\/title>\r\n  \r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');\r\n\r\n    body {\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .social-faq-section {\r\n      font-family: 'Plus Jakarta Sans', sans-serif;\r\n      background-color: #f8fafc;\r\n      padding: 60px 20px;\r\n    }\r\n\r\n    .social-faq-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .social-faq-header {\r\n      text-align: center;\r\n      margin-bottom: 50px;\r\n    }\r\n\r\n    .social-faq-subtitle {\r\n      color: #2563eb;\r\n      font-size: 14px;\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      letter-spacing: 1px;\r\n      display: block;\r\n      margin-bottom: 15px;\r\n    }\r\n\r\n    .social-faq-title {\r\n      color: #0f172a;\r\n      font-size: 38px;\r\n      font-weight: 700;\r\n      line-height: 1.3;\r\n      margin: 0;\r\n    }\r\n\r\n    .social-faq-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .social-faq-item {\r\n      border-bottom: 1px solid #e2e8f0;\r\n    }\r\n\r\n    .social-faq-question {\r\n      width: 100%;\r\n      background: none;\r\n      border: none;\r\n      padding: 24px 0;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      font-family: inherit;\r\n      font-size: 18px;\r\n      font-weight: 600;\r\n      color: #0f172a;\r\n      text-align: left;\r\n      cursor: pointer;\r\n      transition: color 0.3s;\r\n    }\r\n\r\n    .social-faq-question:hover {\r\n      color: #2563eb;\r\n    }\r\n\r\n    .social-faq-icon {\r\n      position: relative;\r\n      width: 20px;\r\n      height: 20px;\r\n      flex-shrink: 0;\r\n      margin-left: 20px;\r\n    }\r\n\r\n    .social-faq-icon::before,\r\n    .social-faq-icon::after {\r\n      content: '';\r\n      position: absolute;\r\n      background-color: #0f172a;\r\n      transition: transform 0.3s ease, background-color 0.3s ease;\r\n    }\r\n\r\n    .social-faq-icon::before {\r\n      top: 9px;\r\n      left: 0;\r\n      width: 20px;\r\n      height: 2px;\r\n    }\r\n\r\n    .social-faq-icon::after {\r\n      top: 0;\r\n      left: 9px;\r\n      width: 2px;\r\n      height: 20px;\r\n    }\r\n\r\n    .social-faq-answer {\r\n      max-height: 0;\r\n      overflow: hidden;\r\n      transition: max-height 0.4s ease;\r\n    }\r\n\r\n    .social-faq-answer p {\r\n      margin: 0;\r\n      padding-bottom: 24px;\r\n      color: #64748b;\r\n      font-size: 16px;\r\n      line-height: 1.6;\r\n      padding-right: 40px; \r\n    }\r\n\r\n    \/* Active State Styles *\/\r\n    .social-faq-item.active .social-faq-question {\r\n      color: #2563eb; \r\n    }\r\n\r\n    .social-faq-item.active .social-faq-icon::before,\r\n    .social-faq-item.active .social-faq-icon::after {\r\n      background-color: #2563eb; \r\n    }\r\n\r\n    .social-faq-item.active .social-faq-icon::after {\r\n      transform: rotate(90deg);\r\n    }\r\n\r\n    \/* Responsive styling *\/\r\n    @media (max-width: 768px) {\r\n      .social-faq-title {\r\n        font-size: 28px;\r\n      }\r\n      .social-faq-question {\r\n        font-size: 16px;\r\n      }\r\n      .social-faq-answer p {\r\n        font-size: 15px;\r\n        padding-right: 10px;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <section class=\"social-faq-section\">\r\n    <div class=\"social-faq-container\">\r\n      \r\n      <div class=\"social-faq-header\">\r\n        <span class=\"social-faq-subtitle\">FAQS<\/span>\r\n        <h2 class=\"social-faq-title\">Common questions about social media app development in Bangalore<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"social-faq-list\">\r\n        \r\n        <!-- FAQ Item 1 -->\r\n        <div class=\"social-faq-item active\">\r\n          <button class=\"social-faq-question\">\r\n            How long does it take to build a social media app?\r\n            <span class=\"social-faq-icon\"><\/span>\r\n          <\/button>\r\n          <div class=\"social-faq-answer\" style=\"max-height: 200px;\">\r\n            <p>The development timeline typically ranges from 12 to 20 weeks, depending on the complexity of features like real-time messaging, custom feed algorithms, live video streaming, and AR filters.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- FAQ Item 2 -->\r\n        <div class=\"social-faq-item\">\r\n          <button class=\"social-faq-question\">\r\n            Can the app integrate with other platforms and APIs?\r\n            <span class=\"social-faq-icon\"><\/span>\r\n          <\/button>\r\n          <div class=\"social-faq-answer\">\r\n            <p>Yes, we build apps that seamlessly integrate with platforms like Instagram, Google, and Apple for social login, as well as third-party APIs for maps, payment gateways, and content moderation.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- FAQ Item 3 -->\r\n        <div class=\"social-faq-item\">\r\n          <button class=\"social-faq-question\">\r\n            Will there be an admin panel to manage users and content?\r\n            <span class=\"social-faq-icon\"><\/span>\r\n          <\/button>\r\n          <div class=\"social-faq-answer\">\r\n            <p>Absolutely. We build a comprehensive Admin dashboard that allows you to moderate user-generated content, monitor engagement metrics in real-time, manage advertising campaigns, and handle user reports.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- FAQ Item 4 -->\r\n        <div class=\"social-faq-item\">\r\n          <button class=\"social-faq-question\">\r\n            Will you support us after the app is live?\r\n            <span class=\"social-faq-icon\"><\/span>\r\n          <\/button>\r\n          <div class=\"social-faq-answer\">\r\n            <p>Yes, we offer ongoing maintenance and support packages. This includes server scaling to handle high user traffic during viral moments, performance optimization, OS updates for iOS and Android, and new feature enhancements.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      const faqItems = document.querySelectorAll('.social-faq-item');\r\n\r\n      faqItems.forEach(item => {\r\n        const question = item.querySelector('.social-faq-question');\r\n        const answer = item.querySelector('.social-faq-answer');\r\n\r\n        question.addEventListener('click', () => {\r\n          const isActive = item.classList.contains('active');\r\n\r\n          \/\/ Close all items\r\n          faqItems.forEach(otherItem => {\r\n            otherItem.classList.remove('active');\r\n            otherItem.querySelector('.social-faq-answer').style.maxHeight = null;\r\n          });\r\n\r\n          \/\/ If it wasn't active, open it\r\n          if (!isActive) {\r\n            item.classList.add('active');\r\n            answer.style.maxHeight = answer.scrollHeight + \"px\";\r\n          }\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2253265 e-flex e-con-boxed e-con e-parent\" data-id=\"2253265\" 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-141b6de elementor-widget elementor-widget-html\" data-id=\"141b6de\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"wp-social-banner-wrapper\">\r\n  <style>\r\n    \/* Scoped CSS to prevent conflicts with your active WordPress theme *\/\r\n    .wp-social-banner-wrapper {\r\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      background-color: transparent; \r\n      padding: 0px 20px;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .wp-social-banner-wrapper * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .social-container {\r\n      background-color: white;\r\n      border-radius: 10px;\r\n      box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n      display: flex;\r\n      overflow: hidden;\r\n      max-width: 1400px;\r\n      width: 100%;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .image-section {\r\n      flex: 1; \r\n      position: relative;\r\n      clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); \r\n    }\r\n\r\n    .wp-social-banner-wrapper .image-section img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      display: block; \r\n    }\r\n\r\n    .wp-social-banner-wrapper .purple-accent-1 {\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      width: 30px;\r\n      height: 100%;\r\n      background-color: #a855f7; \r\n      clip-path: polygon(100% 0, 100% 100%, 0 100%);\r\n      transform: translateX(15px);\r\n    }\r\n\r\n    .wp-social-banner-wrapper .pink-accent-2 {\r\n      position: absolute;\r\n      bottom: 0;\r\n      right: 30px;\r\n      width: 20px;\r\n      height: 60%;\r\n      background-color: #ec4899; \r\n      clip-path: polygon(100% 0, 100% 100%, 0 100%);\r\n    }\r\n\r\n    .wp-social-banner-wrapper .content-section {\r\n      flex: 2; \r\n      padding: 40px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      position: relative; \r\n    }\r\n\r\n    .wp-social-banner-wrapper h2 {\r\n      color: #2e1065; \r\n      margin-top: 0;\r\n      margin-bottom: 15px;\r\n      font-size: 28px;\r\n      font-weight: 700;\r\n      line-height: 1.3;\r\n      border: none;\r\n      padding-bottom: 0;\r\n    }\r\n\r\n    .wp-social-banner-wrapper p {\r\n      color: #555;\r\n      line-height: 1.6;\r\n      margin-bottom: 25px;\r\n      font-size: 16px;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .buttons {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 20px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .btn-primary {\r\n      background-color: #8b5cf6; \r\n      color: white;\r\n      padding: 12px 24px;\r\n      border: none;\r\n      border-radius: 5px;\r\n      cursor: pointer;\r\n      font-weight: 600;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      font-size: 15px;\r\n      text-decoration: none;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .btn-primary:hover {\r\n      background-color: #7c3aed; \r\n      color: white;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .btn-video {\r\n      background: none;\r\n      border: none;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      cursor: pointer;\r\n      color: #2e1065;\r\n      font-weight: bold;\r\n      padding: 0;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .play-icon {\r\n      width: 40px;\r\n      height: 40px;\r\n      border-radius: 50%;\r\n      border: 2px solid #8b5cf6;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      color: #8b5cf6;\r\n      transition: background-color 0.3s, color 0.3s;\r\n    }\r\n    \r\n    .wp-social-banner-wrapper .btn-video:hover .play-icon {\r\n      background-color: #8b5cf6;\r\n      color: white;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .play-icon svg {\r\n      width: 18px;\r\n      height: 18px;\r\n      fill: currentColor;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .video-text {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .video-text span:first-child {\r\n      font-size: 15px;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .video-text span:last-child {\r\n      font-size: 12px;\r\n      font-weight: normal;\r\n      color: #777;\r\n    }\r\n\r\n    .wp-social-banner-wrapper .handwritten-text {\r\n      position: absolute;\r\n      right: 40px;\r\n      top: 30px;\r\n      color: #ec4899;\r\n      font-family: 'Brush Script MT', 'Comic Sans MS', cursive; \r\n      font-size: 26px;\r\n      transform: rotate(-5deg); \r\n      text-align: right;\r\n      line-height: 1.2;\r\n    }\r\n    \r\n    .wp-social-banner-wrapper .handwritten-text svg {\r\n      width: 100px;\r\n      height: auto;\r\n      margin-top: 5px;\r\n      stroke: currentColor;\r\n      stroke-width: 2;\r\n      fill: none;\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n      .wp-social-banner-wrapper .handwritten-text {\r\n        position: static; \r\n        text-align: left;\r\n        transform: none;\r\n        margin-top: 30px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .wp-social-banner-wrapper {\r\n        padding: 20px 15px;\r\n      }\r\n      .wp-social-banner-wrapper .social-container {\r\n        flex-direction: column;\r\n      }\r\n      .wp-social-banner-wrapper .image-section {\r\n        clip-path: none; \r\n        height: 250px; \r\n      }\r\n      .wp-social-banner-wrapper .purple-accent-1, \r\n      .wp-social-banner-wrapper .pink-accent-2 {\r\n        display: none; \r\n      }\r\n      .wp-social-banner-wrapper .content-section {\r\n        padding: 30px 20px;\r\n      }\r\n      .wp-social-banner-wrapper h2 {\r\n        font-size: 24px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"social-container\">\r\n    <div class=\"image-section\">\r\n      <img decoding=\"async\" src=\"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg\" alt=\"People using social media apps on smartphones\">\r\n      <div class=\"purple-accent-1\"><\/div>\r\n      <div class=\"pink-accent-2\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"content-section\">\r\n      <h2>Let's Build Your Social Media App<\/h2>\r\n      <p>Have an idea for a social networking platform? Let's discuss your requirements and create an engaging, scalable application that connects people and builds thriving communities.<\/p>\r\n\r\n      <div class=\"buttons\">\r\n        <a href=\"#\" class=\"btn-primary\">\r\n          Get in Touch\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\n            <path fill-rule=\"evenodd\" d=\"M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z\"\/>\r\n          <\/svg>\r\n        <\/a>\r\n\r\n        <button class=\"btn-video\">\r\n          <div class=\"play-icon\">\r\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M8 5v14l11-7z\"\/>\r\n              <\/svg>\r\n          <\/div>\r\n          <div class=\"video-text\">\r\n              <span>Watch Our Video<\/span>\r\n              <span>See how we work<\/span>\r\n          <\/div>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"handwritten-text\">\r\n        Spark Connections<br>Build Communities\r\n        <br>\r\n        <svg viewBox=\"0 0 100 20\">\r\n            <path d=\"M 0 15 Q 50 0 100 15\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\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\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>CUSTOM SOCIAL MEDIA PLATFORMS Social Media App Development in Bangalore Turn your idea into a powerful social media platform with Brightcode. We develop custom, scalable and feature-rich social media apps that connect people, create communities and drive engagement. Get a Free Consultation Watch Our Video See how we work Custom Solutions Tailored to your vision [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6553","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v28.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Social Media App - Brightcode Software Services<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Social Media App\" \/>\n<meta property=\"og:description\" content=\"CUSTOM SOCIAL MEDIA PLATFORMS Social Media App Development in Bangalore Turn your idea into a powerful social media platform with Brightcode. We develop custom, scalable and feature-rich social media apps that connect people, create communities and drive engagement. Get a Free Consultation Watch Our Video See how we work Custom Solutions Tailored to your vision [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightcode Software Services\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightcodess\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-22T07:46:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Brightcodebss\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/\",\"name\":\"Social Media App - Brightcode Software Services\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Untitled-design-1.jpg\",\"datePublished\":\"2026-09-18T05:10:26+00:00\",\"dateModified\":\"2026-09-22T07:46:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Untitled-design-1.jpg\",\"contentUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/Untitled-design-1.jpg\",\"width\":500,\"height\":375},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/social-media-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Social Media App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#website\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\",\"name\":\"Brightcode Software Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#organization\",\"name\":\"Brightcode Software Services\",\"alternateName\":\"Brightcode\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Brightcode-Logo.webp\",\"contentUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Brightcode-Logo.webp\",\"width\":500,\"height\":500,\"caption\":\"Brightcode Software Services\"},\"image\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/brightcodess\\\/\",\"https:\\\/\\\/x.com\\\/Brightcodebss\",\"https:\\\/\\\/www.instagram.com\\\/brightcodess\\\/\",\"https:\\\/\\\/linkedin.com\\\/company\\\/brightcodess\"],\"description\":\"Brightcode is a leading software company in Bangalore offers wide range of IT solutions that include software development, website development, mobile app development and digital marketing services.\",\"telephone\":\"93868 06214\",\"legalName\":\"Brightcode Software Services Pvt. Ltd.\",\"foundingDate\":\"2019-02-07\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"51\",\"maxValue\":\"200\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Social Media App - Brightcode Software Services","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/","og_locale":"en_US","og_type":"article","og_title":"Social Media App","og_description":"CUSTOM SOCIAL MEDIA PLATFORMS Social Media App Development in Bangalore Turn your idea into a powerful social media platform with Brightcode. We develop custom, scalable and feature-rich social media apps that connect people, create communities and drive engagement. Get a Free Consultation Watch Our Video See how we work Custom Solutions Tailored to your vision [&hellip;]","og_url":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/","og_site_name":"Brightcode Software Services","article_publisher":"https:\/\/www.facebook.com\/brightcodess\/","article_modified_time":"2026-09-22T07:46:40+00:00","og_image":[{"url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Brightcodebss","twitter_misc":{"Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/","url":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/","name":"Social Media App - Brightcode Software Services","isPartOf":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/#primaryimage"},"image":{"@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/#primaryimage"},"thumbnailUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg","datePublished":"2026-09-18T05:10:26+00:00","dateModified":"2026-09-22T07:46:40+00:00","breadcrumb":{"@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brightcodess.com\/bengaluru\/social-media-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/#primaryimage","url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg","contentUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/Untitled-design-1.jpg","width":500,"height":375},{"@type":"BreadcrumbList","@id":"https:\/\/brightcodess.com\/bengaluru\/social-media-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brightcodess.com\/bengaluru\/"},{"@type":"ListItem","position":2,"name":"Social Media App"}]},{"@type":"WebSite","@id":"https:\/\/brightcodess.com\/bengaluru\/#website","url":"https:\/\/brightcodess.com\/bengaluru\/","name":"Brightcode Software Services","description":"","publisher":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brightcodess.com\/bengaluru\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/brightcodess.com\/bengaluru\/#organization","name":"Brightcode Software Services","alternateName":"Brightcode","url":"https:\/\/brightcodess.com\/bengaluru\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightcodess.com\/bengaluru\/#\/schema\/logo\/image\/","url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2025\/11\/Brightcode-Logo.webp","contentUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2025\/11\/Brightcode-Logo.webp","width":500,"height":500,"caption":"Brightcode Software Services"},"image":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightcodess\/","https:\/\/x.com\/Brightcodebss","https:\/\/www.instagram.com\/brightcodess\/","https:\/\/linkedin.com\/company\/brightcodess"],"description":"Brightcode is a leading software company in Bangalore offers wide range of IT solutions that include software development, website development, mobile app development and digital marketing services.","telephone":"93868 06214","legalName":"Brightcode Software Services Pvt. Ltd.","foundingDate":"2019-02-07","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"51","maxValue":"200"}}]}},"_links":{"self":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages\/6553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/comments?post=6553"}],"version-history":[{"count":0,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages\/6553\/revisions"}],"wp:attachment":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/media?parent=6553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}