{"id":167,"date":"2025-11-11T20:01:22","date_gmt":"2025-11-11T20:01:22","guid":{"rendered":"https:\/\/primetrixsolution.com\/?page_id=167"},"modified":"2026-03-23T20:15:40","modified_gmt":"2026-03-23T20:15:40","slug":"home","status":"publish","type":"page","link":"https:\/\/primetrixsolution.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"167\" class=\"elementor elementor-167\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e5b7ef7 e-flex e-con-boxed e-con e-parent\" data-id=\"2e5b7ef7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-64793d39 e-con-full e-flex e-con e-child\" data-id=\"64793d39\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-611d05f elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-image\" data-id=\"611d05f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"100\" src=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/cropped-primetrix_solutions_logo_no_background-removebg-preview-208x69.png\" class=\"attachment-medium size-medium wp-image-380\" alt=\"\" srcset=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/cropped-primetrix_solutions_logo_no_background-removebg-preview-300x100.png 300w, https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/cropped-primetrix_solutions_logo_no_background-removebg-preview-208x69.png 208w, https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/cropped-primetrix_solutions_logo_no_background-removebg-preview.png 611w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6aadfbbd animated-fast elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6aadfbbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83c\udf08 Hero Section with Bouncing Balls -->\r\n<style>\r\n.hero-section {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 80vh;\r\n   \/* dark navy backdrop *\/\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n}\r\n\r\n\/* Bouncing balls container *\/\r\n.hero-balls {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  z-index: 0;\r\n}\r\n\r\n\/* Each ball *\/\r\n.hero-balls span {\r\n  position: absolute;\r\n  display: block;\r\n  border-radius: 50%;\r\n  opacity: 0.2;\r\n  animation: bounce 6s ease-in-out infinite;\r\n}\r\n\r\n\/* Ball colors & sizes *\/\r\n.hero-balls span:nth-child(1) {\r\n  width: 80px; height: 80px;\r\n  background: radial-gradient(circle, #ff6b00 0%, #e11d48 80%);\r\n  top: 20%; left: 10%;\r\n  animation-delay: 0s;\r\n}\r\n.hero-balls span:nth-child(2) {\r\n  width: 120px; height: 120px;\r\n  background: radial-gradient(circle, #e11d48 0%, #9d174d 80%);\r\n  top: 40%; left: 70%;\r\n  animation-delay: 1s;\r\n}\r\n.hero-balls span:nth-child(3) {\r\n  width: 100px; height: 100px;\r\n  background: radial-gradient(circle, #ff6b00 0%, #e11d48 80%);\r\n  top: 60%; left: 30%;\r\n  animation-delay: 2s;\r\n}\r\n.hero-balls span:nth-child(4) {\r\n  width: 60px; height: 60px;\r\n  background: radial-gradient(circle, #e11d48 0%, #ff6b00 80%);\r\n  top: 10%; left: 80%;\r\n  animation-delay: 3s;\r\n}\r\n\r\n\/* Bounce animation *\/\r\n@keyframes bounce {\r\n  0%, 100% {\r\n    transform: translateY(0);\r\n  }\r\n  50% {\r\n    transform: translateY(-25px);\r\n  }\r\n}\r\n\r\n\/* Hero text *\/\r\n.hero-content {\r\n  position: relative;\r\n  z-index: 2;\r\n  text-align: center;\r\n  color: white;\r\n  font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n.hero-content h1 {\r\n  font-size: 2.8rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(90deg, #ff6b00, #e11d48);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  margin-bottom: 0.5em;\r\n}\r\n\r\n.hero-content p {\r\n  font-size: 1.2rem;\r\n  color: #94a3b8;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n  .hero-content h1 { font-size: 2rem; }\r\n  .hero-content p { font-size: 1rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero-section\">\r\n  <div class=\"hero-balls\">\r\n    <span><\/span>\r\n    <span><\/span>\r\n    <span><\/span>\r\n    <span><\/span>\r\n  <\/div>\r\n\r\n  <h1 class=\"hero-heading\">Empowering Digital Growth<\/h1>\r\n<p class=\"hero-subheading\">with Smart IT Solutions<\/p>\r\n<!-- Services tagline with exact Prime-style colors -->\r\n<style>\r\n\/* Palette used:\r\n   Orange:   #ff6b00\r\n   Magenta:  #e11d48\r\n   DeepPink: #9d174d\r\n   DarkNav:  #1e293b\r\n   Muted:    #94a3b8\r\n*\/\r\n\r\n.services-line {\r\n  font-family: 'Poppins', 'Inter', sans-serif;\r\n  font-weight: 600;\r\n  font-size: 1rem;\r\n  display: flex;\r\n  gap: 10px;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #94a3b8; \/* fallback muted color for plain text *\/\r\n  line-height: 1.2;\r\n  letter-spacing: 0.2px;\r\n  margin-top: 0.6rem;\r\n  z-index: 3;\r\n  position: relative;\r\n}\r\n\r\n\/* item styles *\/\r\n.services-line .svc {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: .5rem;\r\n  padding: 6px 10px;\r\n  border-radius: 999px;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n\/* individual colors (exact palette) *\/\r\n.svc.webdev {\r\n  background: linear-gradient(90deg, rgba(255,107,0,0.12), rgba(225,29,72,0.06));\r\n  color: #ff6b00; \/* orange *\/\r\n}\r\n.svc.mobile {\r\n  background: linear-gradient(90deg, rgba(225,29,72,0.08), rgba(157,23,77,0.04));\r\n  color: DeepPink; \/* magenta *\/\r\n}\r\n.svc.ai {\r\n  background: linear-gradient(90deg, rgba(157,23,77,0.08), rgba(157,23,77,0.03));\r\n  color: #9d174d; \/* deep pink *\/\r\n}\r\n.svc.seo {\r\n  background: rgba(30,41,59,0.06);\r\n  color: blue; \/* dark navy *\/\r\n}\r\n.svc.marketing {\r\n  background: linear-gradient(90deg, rgba(255,107,0,0.12), rgba(225,29,72,0.06));\r\n  color: #ff6b00;\r\n}\r\n\r\n\/* dot separator (visually the \u2022) *\/\r\n.services-line .dot {\r\n  color: blue; \/* light muted dot *\/\r\n  font-weight: 700;\r\n  margin: 0 4px;\r\n  user-select: none;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n\/* small responsive tweak *\/\r\n@media (max-width: 640px) {\r\n  .services-line { font-size: 0.92rem; gap: 6px; }\r\n  .services-line .svc { padding: 5px 8px; }\r\n}\r\n\/* ================================\r\n   \ud83c\udf08 PRIME-STYLE HEADINGS\r\n================================ *\/\r\nh1, h2, h3, h4, h5, h6 {\r\n  font-family: 'Poppins', 'Inter', sans-serif;\r\n  font-weight: 700;\r\n  line-height: 1.2;\r\n  letter-spacing: -0.3px;\r\n}\r\n\r\n.heading-gradient {\r\n  background: linear-gradient(90deg, #ff6b00 0%, #e11d48 50%, #9d174d 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  display: inline-block;\r\n}\r\n\r\n.heading-primary { color: #ff6b00 !important; }\r\n.heading-accent { color: #e11d48 !important; }\r\n.heading-dark { color: #1e293b !important; }\r\n\r\n.section-title {\r\n  font-size: 2rem;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  margin-bottom: 1.2em;\r\n  color: #1e293b;\r\n}\r\n\r\n.section-title span {\r\n  background: linear-gradient(90deg, #ff6b00, #e11d48);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.section-subtitle {\r\n  color: #64748b;\r\n  font-weight: 500;\r\n  font-size: 1.1rem;\r\n  text-align: center;\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.hero-heading {\r\n  font-size: 2.8rem;\r\n  font-weight: 800;\r\n  text-align: center;\r\n  background: linear-gradient(90deg, #ff6b00, #e11d48);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  margin-bottom: 0.3em;\r\n}\r\n\r\n.hero-subheading {\r\n  color: #334155;\r\n  font-size: 1.2rem;\r\n  text-align: center;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n  .hero-heading { font-size: 2rem; }\r\n  .section-title { font-size: 1.5rem; }\r\n}\r\n\r\n\/* ================================\r\n   \ud83d\udd18 PRIME-STYLE BUTTONS\r\n================================ *\/\r\n\r\n\/* Base button style *\/\r\n.btn-prime,\r\n.elementor-button.btn-prime,\r\n.wp-block-button__link.btn-prime {\r\n  background: linear-gradient(90deg, #ff6b00 0%, #e11d48 100%);\r\n  color: #fff !important;\r\n  font-family: 'Poppins', 'Inter', sans-serif;\r\n  font-weight: 600;\r\n  padding: 12px 32px;\r\n  border-radius: 50px;\r\n  border: none;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  transition: all 0.3s ease;\r\n  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);\r\n}\r\n\r\n\/* Hover effect *\/\r\n.btn-prime:hover,\r\n.elementor-button.btn-prime:hover,\r\n.wp-block-button__link.btn-prime:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.4);\r\n  background: linear-gradient(90deg, #e11d48 0%, #ff6b00 100%);\r\n  color: #fff !important;\r\n}\r\n\r\n\/* Outline variant *\/\r\n.btn-prime-outline {\r\n  border: 2px solid #e11d48;\r\n  background: transparent;\r\n  color: #e11d48 !important;\r\n  border-radius: 50px;\r\n  padding: 10px 28px;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.btn-prime-outline:hover {\r\n  background: linear-gradient(90deg, #ff6b00 0%, #e11d48 100%);\r\n  color: #fff !important;\r\n  border: none;\r\n}\r\n\r\n\/* Small and large sizes *\/\r\n.btn-prime.btn-sm { padding: 8px 20px; font-size: 0.9rem; }\r\n.btn-prime.btn-lg { padding: 14px 40px; font-size: 1.1rem; }\r\n\r\n\/* Centered buttons *\/\r\n.btn-center {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.hero-balls {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  z-index: 0;\r\n  pointer-events: none; \/* \u2705 allows clicks to pass through *\/\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- Markup -->\r\n<p class=\"services-line\" aria-label=\"Services: Web Development, Mobile Apps, AI & Blockchain, SEO, Full Digital Marketing\">\r\n  <span class=\"svc seo\">Web Development<\/span>\r\n  <span class=\"dot\" aria-hidden=\"true\">\u2022<\/span>\r\n  <span class=\"svc mobile\">Mobile Apps<\/span>\r\n  <span class=\"dot\" aria-hidden=\"true\">\u2022<\/span>\r\n  <span class=\"svc ai\">AI &amp; Blockchain<\/span>\r\n  <span class=\"dot\" aria-hidden=\"true\">\u2022<\/span>\r\n  <span class=\"svc seo\">SEO<\/span>\r\n  <span class=\"dot\" aria-hidden=\"true\">\u2022<\/span>\r\n  <span class=\"svc marketing\">Full Digital Marketing<\/span>\r\n<\/p>\r\n\r\n<a href=\"#form\" class=\"btn-prime\">\u2728Let\u2019s Build Something Great \ud83d\ude80<\/a>\r\n\r\n<\/section>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d6d3f08 e-con-full e-flex e-con e-parent\" data-id=\"d6d3f08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd4ce9d elementor-widget elementor-widget-html\" data-id=\"bd4ce9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"root\">\r\n    <!-- Font Awesome (used for social + feature icons). In WP, enqueue via functions.php instead. -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\r\n    <style>\r\n        .icon-circle {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 9999px;\r\n            color: #fff;\r\n        }\r\n\r\n        .icon-circle .fa,\r\n        .icon-circle [class*=\"fa-\"],\r\n        .icon-circle .dashicons,\r\n        .icon-circle svg {\r\n            font-size: 16px;\r\n            width: 16px;\r\n            height: 16px;\r\n            line-height: 1;\r\n            display: inline-block;\r\n        }\r\n\r\n        .icon-circle:hover {\r\n            transform: scale(1.05);\r\n            transition: transform .25s;\r\n        }\r\n\r\n        .contact-icon-svg {\r\n            width: 18px;\r\n            height: 18px;\r\n        }\r\n    <\/style>\r\n    <div class=\"min-h-screen\">\r\n        <header class=\"fixed top-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur-md border-b border-gray-200\/50\">\r\n            <div class=\"container mx-auto px-4 py-4\">\r\n                <div class=\"flex items-center justify-between\"><\/div>\r\n            <\/div>\r\n        <\/header>&nbsp;\r\n\r\n\r\n        <section id=\"about\" class=\"py-20 bg-gradient-to-br from-gray-50 to-blue-50 relative overflow-hidden\">\r\n            <div class=\"absolute inset-0 opacity-5\">\r\n                <div\r\n                    class=\"absolute top-20 left-20 w-40 h-40 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-3xl\">\r\n                <\/div>\r\n                <div\r\n                    class=\"absolute bottom-20 right-20 w-60 h-60 bg-gradient-to-br from-pink-400 to-blue-400 rounded-full blur-3xl\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"container mx-auto px-4 relative z-10\">\r\n                <div class=\"text-center mb-16\">\r\n                    <h2\r\n                        class=\"text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent mb-6\">\r\n                        About PrimeTrix Solutions<\/h2>\r\n                    <div class=\"max-w-3xl mx-auto\">\r\n                        <p class=\"text-lg md:text-xl text-gray-700 leading-relaxed mb-6\">We are an innovative IT\r\n                            solutions provider dedicated to transforming businesses through cutting-edge technology. Our\r\n                            team of experts specializes in delivering comprehensive digital solutions that drive growth\r\n                            and efficiency.<\/p>\r\n                        <p class=\"text-lg text-gray-600\">From custom software development to advanced AI\r\n                            implementations, we bring your digital vision to life with precision, creativity, and\r\n                            technical excellence.<\/p>\r\n\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-cogs\" style=\"color:#1e3a8a;font-size:18px;\"\r\n                                    aria-hidden=\"true\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                Custom Software<\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">Tailored\r\n                            solutions for your unique business needs<\/p>\r\n\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-robot\" style=\"color:#b45309;font-size:18px;\"\r\n                                    aria-hidden=\"true\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                Automation<\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">Streamline\r\n                            processes with intelligent automation<\/p>\r\n\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-brain\" style=\"color:#be185d;font-size:18px;\"\r\n                                    aria-hidden=\"true\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                AI Model Training<\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">Advanced\r\n                            machine learning and AI implementations<\/p>\r\n\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-link\" style=\"color:#1e3a8a;font-size:18px;\"\r\n                                    aria-hidden=\"true\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                Blockchain &amp; Web3<\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Next-generation decentralized applications<\/p>\r\n\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-bullhorn\" style=\"color:#b45309;font-size:18px;\"\r\n                                    aria-hidden=\"true\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                API Integration<\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">Seamless\r\n                            connectivity between systems<\/p>\r\n\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 hover:bg-white border border-gray-200\/50 hover:border-blue-200\">\r\n                        <div class=\"flex items-center space-x-4 mb-4\">\r\n                            <div\r\n                                class=\"p-3 rounded-xl bg-gradient-to-br from-blue-100 to-orange-100 group-hover:from-blue-200 group-hover:to-orange-200 transition-all duration-300\">\r\n                                <i class=\"fa-solid fa-bullhorn text-blue-600 text-2xl\"><\/i>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300\">\r\n                                Digital Marketing\r\n                            <\/h3>\r\n                        <\/div>\r\n                        <p class=\"text-gray-600 group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Comprehensive online growth strategies\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n\r\n                <\/div>\r\n            <\/div>\r\n                <div class=\"mt-20 grid grid-cols-2 md:grid-cols-4 gap-8\">\r\n                    <div class=\"text-center group\">\r\n                        <div\r\n                            class=\"text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent group-hover:from-pink-600 group-hover:to-blue-600 transition-all duration-300\">\r\n                            100+<\/div>\r\n                        <div\r\n                            class=\"text-gray-600 font-medium mt-2 group-hover:text-gray-800 transition-colors duration-300\">\r\n                            Projects Completed<\/div>\r\n                    <\/div>\r\n                    <div class=\"text-center group\">\r\n                        <div\r\n                            class=\"text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent group-hover:from-pink-600 group-hover:to-blue-600 transition-all duration-300\">\r\n                            50+<\/div>\r\n                        <div\r\n                            class=\"text-gray-600 font-medium mt-2 group-hover:text-gray-800 transition-colors duration-300\">\r\n                            Happy Clients<\/div>\r\n                    <\/div>\r\n                    <div class=\"text-center group\">\r\n                        <div\r\n                            class=\"text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent group-hover:from-pink-600 group-hover:to-blue-600 transition-all duration-300\">\r\n                            24\/7<\/div>\r\n                        <div\r\n                            class=\"text-gray-600 font-medium mt-2 group-hover:text-gray-800 transition-colors duration-300\">\r\n                            Support Available<\/div>\r\n                    <\/div>\r\n                    <div class=\"text-center group\">\r\n                        <div\r\n                            class=\"text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent group-hover:from-pink-600 group-hover:to-blue-600 transition-all duration-300\">\r\n                            5+<\/div>\r\n                        <div\r\n                            class=\"text-gray-600 font-medium mt-2 group-hover:text-gray-800 transition-colors duration-300\">\r\n                            Years Experience<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    <\/section>\r\n    <section id=\"services\" class=\"py-20 bg-white relative overflow-hidden\">\r\n        <div class=\"absolute inset-0 opacity-5\">\r\n            <div\r\n                class=\"absolute top-40 left-10 w-32 h-32 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-2xl animate-pulse\">\r\n            <\/div>\r\n            <div\r\n                class=\"absolute bottom-40 right-10 w-48 h-48 bg-gradient-to-br from-pink-400 to-blue-400 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n            <div\r\n                class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-64 h-64 bg-gradient-to-br from-orange-300 to-pink-300 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"container mx-auto px-4 relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h2\r\n                    class=\"text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-orange-500 to-pink-600 bg-clip-text text-transparent mb-6\">\r\n                    Our Services<\/h2>\r\n                <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">Comprehensive IT solutions designed to\r\n                    accelerate your business growth and digital transformation<\/p>\r\n\r\n            <\/div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-blue-500 to-blue-700 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-laptop-code text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            Website Development<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Custom, responsive websites built with modern technologies and optimized for\r\n                            performance.<\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-500 to-blue-700 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-orange-500 to-orange-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-orange-500 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-orange-500 to-orange-700 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-mobile-screen-button text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            Mobile App Development<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Native and cross-platform mobile applications for iOS and Android with exceptional UX.\r\n                        <\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-orange-500 to-orange-700 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-pink-500 to-pink-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-pink-500 to-pink-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-pink-500 to-pink-700 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-link text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            API Integration<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Seamless integration of third-party APIs and custom API development for your\r\n                            applications.<\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-pink-500 to-pink-700 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-blue-600 to-purple-600 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-brain text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            AI Model Training<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Custom AI and machine learning solutions tailored to your business requirements.<\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-orange-600 to-red-600 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-cubes text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            Blockchain &amp; Web3 Development<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Decentralized applications, smart contracts, and blockchain solutions for the future.\r\n                        <\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-green-500 to-green-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-green-500 to-green-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-green-500 to-green-700 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-chart-line text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            SEO &amp; SMO Optimization<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Comprehensive search engine and social media optimization to boost your online presence.\r\n                        <\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-green-500 to-green-700 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div\r\n                    class=\"group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-100 hover:border-transparent overflow-hidden\">\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                        <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"relative z-10\">\r\n                        <div\r\n                            class=\"inline-flex p-4 rounded-xl bg-gradient-to-br from-purple-500 to-purple-700 mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n                            <i class=\"fa-solid fa-bullhorn text-white\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-xl font-bold text-gray-800 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                            Full Digital Marketing Solutions<\/h3>\r\n                        <p\r\n                            class=\"text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300\">\r\n                            Complete digital marketing strategies including content, social media, and paid\r\n                            advertising.<\/p>\r\n\r\n                        <div\r\n                            class=\"mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                            <a href=\"#form\"\r\n                                class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-purple-500 to-purple-700 bg-clip-text text-transparent\">\r\n                                Learn More \u2192<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute top-4 right-4 w-2 h-2 bg-blue-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"absolute bottom-4 left-4 w-3 h-3 bg-orange-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <section id=\"portfolio\" class=\"py-20 bg-gradient-to-br from-gray-50 via-white to-blue-50 relative overflow-hidden\">\r\n        <div class=\"absolute inset-0 opacity-5\">\r\n            <div\r\n                class=\"absolute top-20 left-20 w-40 h-40 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n            <div\r\n                class=\"absolute bottom-20 right-20 w-60 h-60 bg-gradient-to-br from-pink-400 to-blue-400 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n            <div\r\n                class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-80 h-80 bg-gradient-to-br from-orange-300 to-pink-300 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"container mx-auto px-4 relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h2\r\n                    class=\"text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-orange-500 to-pink-600 bg-clip-text text-transparent mb-6\">\r\n                    Our Portfolio<\/h2>\r\n                <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">Showcasing innovation, technology, and\r\n                    creativity through our successful client projects.<\/p>\r\n\r\n            <\/div>\r\n            <div class=\"mb-16\">\r\n                <div class=\"flex items-center justify-center mb-8\">\r\n                    <div class=\"flex items-center space-x-3\">\r\n                        <div\r\n                            class=\"p-3 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center\">\r\n                            <i class=\"fa-solid fa-laptop-code text-blue-600 text-lg\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-2xl md:text-3xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent\">\r\n                            Web Development Projects<\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <!-- Animated Gradient Border on Hover -->\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <!-- Image Frame (replaces gradient) -->\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/plus.unsplash.com\/premium_photo-1683288295841-782fa47e4770?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-blue-900\/40 group-hover:bg-blue-700\/30 transition-colors duration-300\">\r\n                                <\/div>\r\n\r\n                                <!-- Optional Overlay Text -->\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">E-commerce<\/div>\r\n                                <\/div>\r\n\r\n                                <!-- Small hover sparkles -->\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Content -->\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Ganja.com<\/h3>\r\n\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                A modern e-commerce platform with secure payment integration, real-time product updates,\r\n                                and mobile responsiveness.\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Built with scalable architecture and optimized for performance.\r\n                            <\/p>\r\n\r\n                            <button onclick=\"window.open('https:\/\/ganja.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-blue-500 to-blue-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-500 to-blue-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <!-- Animated Gradient Border -->\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-500 to-orange-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-500 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <!-- Image Frame (Top Section) -->\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/plus.unsplash.com\/premium_photo-1681488262364-8aeb1b6aac56?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-orange-900\/40 group-hover:bg-orange-700\/30 transition-colors duration-300\">\r\n                                <\/div>\r\n\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Marketplace<\/div>\r\n                                <\/div>\r\n\r\n                                <!-- Sparkle animation -->\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Text Content -->\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                The Last Minute Gifts\r\n                            <\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Gift delivery marketplace with easy checkout flow, responsive UI, and SEO-optimized\r\n                                structure.\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Custom marketplace solution with advanced filtering and search capabilities.\r\n                            <\/p>\r\n\r\n                            <!-- Button -->\r\n                            <button onclick=\"window.open('https:\/\/thelastminutegifts.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-orange-500 to-orange-700 hover:shadow-[0_0_20px_rgba(251,146,60,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <!-- Hover Footer Text -->\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-orange-500 to-orange-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-pink-500 to-pink-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-pink-500 to-pink-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/marymcnutt.com\/wp-content\/uploads\/2025\/10\/breadcrumb-8.jpg?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Personal Brand<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                MaryMcNutt.com<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Personal brand website with custom CMS integration, sleek animations, and blog\r\n                                functionality.<\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Custom content management system with modern design aesthetics.<\/p>\r\n                            <button onclick=\"window.open('https:\/\/marymcnutt.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-pink-500 to-pink-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-pink-500 to-pink-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <!-- Gradient Border Animation -->\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <!-- Image Frame (Top Section) -->\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n\r\n                                <!-- Overlay -->\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-blue-900\/40 group-hover:bg-blue-700\/30 transition-colors duration-300\">\r\n                                <\/div>\r\n\r\n                                <!-- Optional Text -->\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Gaming Portal<\/div>\r\n                                <\/div>\r\n\r\n                                <!-- Glow Pulses -->\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Text Section -->\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                The Backdash\r\n                            <\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Gaming and entertainment portal with interactive UI, user-friendly content management,\r\n                                and fast loading performance.\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                High-performance gaming portal with real-time updates and social features.\r\n                            <\/p>\r\n\r\n                            <!-- Button -->\r\n                            <button onclick=\"window.open('https:\/\/thebackdash.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:shadow-[0_0_20px_rgba(147,51,234,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <!-- Hover Text -->\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/flagged\/photo-1570055349452-29232699cc63?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Luxury E-commerce<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Western Jewellers<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Luxury e-commerce website with elegant product showcasing, advanced filtering, and\r\n                                smooth transitions.<\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Premium jewelry showcase with sophisticated UI\/UX design.<\/p>\r\n                            <button onclick=\"window.open('https:\/\/www.westernjewellers.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-orange-600 to-red-600 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                     <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <!-- Image Frame with top-center badge -->\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n\r\n                                <div class=\"absolute inset-0 bg-blue-900\/30 group-hover:bg-blue-700\/20 transition-colors duration-300\">\r\n                                <\/div>\r\n\r\n                                <!-- Top-center small badge button -->\r\n                                <div class=\"absolute top-3 left-1\/2 -translate-x-1\/2 z-20\">\r\n                                    <button\r\n                                        class=\"text-xs font-semibold px-3 py-1 rounded-full bg-gradient-to-r from-blue-600 to-orange-400 text-white shadow-sm\">\r\n                                        Official Partner\r\n                                    <\/button>\r\n                                <\/div>\r\n\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Transportation<\/div>\r\n                                <\/div>\r\n\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                NexaTMS.com<\/h3>\r\n\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Al Transport Management System developed for Rayford Trucking LLC (Official Partner).\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Custom TMS solution with fleet tracking and dispatch features.\r\n                            <\/p>\r\n\r\n                            <button onclick=\"window.open('https:\/\/nexatms.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gradient-to-r from-blue-500 to-blue-700 h-10 px-4 w-full text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-500 to-blue-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Builder's Circle Card -->\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-blue-900\/40 group-hover:bg-blue-700\/30 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Community \/ Platform<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Builder's Circle<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                A private builder-focused ecosystem designed to connect, collaborate, and grow high-quality digital projects.\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Focused on high-value networking, structured growth, and scalable collaboration systems.\r\n                            <\/p>\r\n\r\n                            <button onclick=\"window.open('https:\/\/triagebuilders.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-blue-500 to-blue-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-blue-500 to-blue-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Rayford Trucking LLC Card -->\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-orange-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1601584115197-04ecc0da31d7?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-orange-900\/40 group-hover:bg-orange-700\/30 transition-colors duration-300\">\r\n                                <\/div>\r\n\r\n                                <!-- Official Partner Badge -->\r\n                                <div class=\"absolute top-3 left-1\/2 -translate-x-1\/2 z-20\">\r\n                                    <button\r\n                                        class=\"text-xs font-semibold px-3 py-1 rounded-full bg-gradient-to-r from-orange-600 to-red-500 text-white shadow-sm\">\r\n                                        Official Partner\r\n                                    <\/button>\r\n                                <\/div>\r\n\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">Transportation<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Rayford Trucking LLC<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Reliable. Efficient. Professional Freight Solutions. Built on precision, accountability, and dependable logistics services.\r\n                            <\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Enterprise-grade transportation solutions with a strong focus on operational reliability.\r\n                            <\/p>\r\n\r\n                            <button onclick=\"window.open('https:\/\/rayfordtrucking.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-orange-600 to-red-600 hover:shadow-[0_0_20px_rgba(234,88,12,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            \r\n                    \r\n                   \r\n            <\/div>\r\n            <div>\r\n                <div class=\"flex items-center justify-center mb-8\">\r\n                    <div class=\"flex items-center space-x-3\">\r\n                        <div\r\n                            class=\"p-3 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center\">\r\n                            <i class=\"fa-solid fa-brain text-purple-600 text-lg\" aria-hidden=\"true\"><\/i>\r\n                        <\/div>\r\n                        <h3\r\n                            class=\"text-2xl md:text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent\">\r\n                            AI &amp; Tech Projects<\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-green-500 to-green-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-green-500 to-green-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">AI Content<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Vidhi7.com<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                AI-powered content automation tool integrating prompt generation and NLP models.<\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Advanced natural language processing with intelligent content generation.<\/p>\r\n                            <button onclick=\"window.open('https:\/\/www.vidhi7.com\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-green-500 to-green-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-green-500 to-green-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">AI Marketplace<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Promptly.co.in<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Smart AI prompt marketplace featuring user accounts, AI-based recommendations, and a\r\n                                responsive UI.<\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Machine learning recommendation engine with user personalization.<\/p>\r\n                            <button onclick=\"window.open('https:\/\/www.promptly.co.in\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-purple-500 to-purple-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-purple-500 to-purple-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div\r\n                        class=\"group relative bg-white\/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 border border-gray-200\/50 hover:border-transparent overflow-hidden\">\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-indigo-500 to-indigo-700 opacity-0 group-hover:opacity-10 transition-opacity duration-500 rounded-2xl\">\r\n                        <\/div>\r\n                        <div\r\n                            class=\"absolute inset-0 bg-gradient-to-br from-indigo-500 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl p-[2px]\">\r\n                            <div class=\"bg-white rounded-2xl h-full w-full\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"relative z-10\">\r\n                            <div\r\n                                class=\"w-full h-48 bg-[url('https:\/\/images.unsplash.com\/photo-1523961131990-5ea7c61b2107?auto=format&fit=crop&w=900&q=60')] bg-cover bg-center rounded-xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300 relative overflow-hidden\">\r\n                                <div\r\n                                    class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors duration-300\">\r\n                                <\/div>\r\n                                <div class=\"relative z-10 text-center text-white\">\r\n                                    <div class=\"text-sm font-medium opacity-90\">AI E-commerce<\/div>\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute top-4 right-4 w-2 h-2 bg-white\/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                                <div\r\n                                    class=\"absolute bottom-4 left-4 w-3 h-3 bg-white\/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse\">\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h3\r\n                                class=\"text-xl font-bold text-gray-800 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-orange-500 group-hover:bg-clip-text transition-all duration-300\">\r\n                                Ecommerce AI App<\/h3>\r\n                            <p\r\n                                class=\"text-gray-600 leading-relaxed mb-4 group-hover:text-gray-700 transition-colors duration-300\">\r\n                                Full-stack AI-integrated eCommerce application using Next.js, Tailwind, and OpenAI\r\n                                APIs for intelligent product suggestions.<\/p>\r\n                            <p\r\n                                class=\"text-sm text-gray-500 mb-6 italic group-hover:text-gray-600 transition-colors duration-300\">\r\n                                Next.js powered with OpenAI integration for smart product recommendations.<\/p>\r\n                            <button onclick=\"window.open('https:\/\/ecommerce-app-rho-five.vercel.app\/', '_blank')\"\r\n                                class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary\/90 h-10 px-4 w-full bg-gradient-to-r from-indigo-500 to-indigo-700 hover:shadow-[0_0_20px_rgba(59,130,246,0.4)] text-white py-2 rounded-xl transition-all duration-300 hover:scale-105 group\/btn\">\r\n                                View Project\r\n                            <\/button>\r\n\r\n                            <div\r\n                                class=\"mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0\">\r\n                                <div\r\n                                    class=\"inline-flex items-center text-sm font-semibold bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent\">\r\n                                    Live Project \u2192<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"text-center mt-16\">\r\n                <div class=\"bg-gradient-to-br from-blue-600 to-orange-500 rounded-2xl p-8 text-white\">\r\n                    <h4 class=\"text-2xl font-bold mb-4\">Ready to Start Your Project?<\/h4>\r\n                    <p class=\"text-lg mb-6 opacity-90\">Join our growing list of satisfied clients and let's build\r\n                        something amazing together.<\/p>\r\n                    <button\r\n                        class=\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-xl font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg\">Get\r\n                        Started Today<\/button>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <section id=\"contact\" class=\"py-20 bg-gradient-to-br from-blue-50 via-white to-orange-50 relative overflow-hidden\">\r\n        <div class=\"absolute inset-0 opacity-5\">\r\n            <div\r\n                class=\"absolute top-20 left-20 w-40 h-40 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n            <div\r\n                class=\"absolute bottom-20 right-20 w-60 h-60 bg-gradient-to-br from-pink-400 to-blue-400 rounded-full blur-3xl animate-pulse\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"container mx-auto px-4 relative z-10\">\r\n            <div class=\"text-center mb-16\">\r\n                <h2\r\n                    class=\"text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-orange-500 to-pink-600 bg-clip-text text-transparent mb-6\">\r\n                    Let's Connect &amp; Build Your Project<\/h2>\r\n                <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">Ready to transform your business with\r\n                    cutting-edge technology? Get in touch with us today!<\/p>\r\n\r\n            <\/div>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94554ac e-con-full e-flex e-con e-child\" data-id=\"94554ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43985db elementor-widget elementor-widget-text-editor\" data-id=\"43985db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div\n  class=\"inline-flex items-center gap-2 px-5 py-2 bg-white rounded-full shadow-md mb-4 border border-transparent hover:border-blue-400 hover:bg-gradient-to-r hover:from-blue-50 hover:to-orange-50 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer\">\n  <span class=\"text-sm font-medium text-gray-700 group-hover:text-blue-600 transition-colors duration-300\">\n    Client Success Stories\n  <\/span>\n  <i class=\"fa-solid fa-arrow-right text-blue-500 text-sm transition-transform duration-300 group-hover:translate-x-1\"><\/i>\n<\/div>\n\n<h2 class=\"text-4xl md:text-5xl font-bold text-gray-900 mb-4\">\n  What Our Clients Say\n<\/h2>\n<p class=\"text-xl text-gray-600 max-w-2xl mx-auto\">\n  Real results from real partnerships\n<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08de77b elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"08de77b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;autoplay_speed&quot;:4000,&quot;speed&quot;:600,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper swiper-image-stretch\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/test1.png\" alt=\"test1\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/test2.png\" alt=\"test2\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/test3.png\" alt=\"test3\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/primetrixsolution.com\/wp-content\/uploads\/2025\/11\/test4.png\" alt=\"test4\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-left\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-chevron-right\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d62c969 elementor-widget elementor-widget-text-editor\" data-id=\"d62c969\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"partners\" class=\"py-24 mt-12 bg-gradient-to-br from-gray-900 via-blue-950 to-gray-900 relative overflow-hidden rounded-3xl\">\n  <div class=\"absolute inset-0 opacity-10 pointer-events-none\">\n    <div class=\"absolute top-40 left-40 w-72 h-72 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-3xl animate-pulse\"><\/div>\n    <div class=\"absolute bottom-20 right-40 w-72 h-72 bg-gradient-to-br from-orange-400 to-blue-400 rounded-full blur-3xl animate-pulse delay-1500\"><\/div>\n  <\/div>\n\n  <!-- Stats Section -->\n  <div class=\"flex flex-wrap gap-6 mt-10 justify-center text-center relative z-10\">\n    <div class=\"w-1\/2 md:w-1\/4 p-6 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/20 shadow-sm hover:shadow-lg hover:bg-white\/20 hover:-translate-y-1 transition-all duration-300\">\n      <div class=\"text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent mb-2\">100%<\/div>\n      <div class=\"text-gray-200 font-medium\">Client Satisfaction<\/div>\n    <\/div>\n\n    <div class=\"w-1\/2 md:w-1\/4 p-6 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/20 shadow-sm hover:shadow-lg hover:bg-white\/20 hover:-translate-y-1 transition-all duration-300\">\n      <div class=\"text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent mb-2\">9+<\/div>\n      <div class=\"text-gray-200 font-medium\">Projects Delivered<\/div>\n    <\/div>\n\n    <div class=\"w-1\/2 md:w-1\/4 p-6 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/20 shadow-sm hover:shadow-lg hover:bg-white\/20 hover:-translate-y-1 transition-all duration-300\">\n      <div class=\"text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent mb-2\">5\u2b50<\/div>\n      <div class=\"text-gray-200 font-medium\">Average Rating<\/div>\n    <\/div>\n\n    <div class=\"w-1\/2 md:w-1\/4 p-6 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/20 shadow-sm hover:shadow-lg hover:bg-white\/20 hover:-translate-y-1 transition-all duration-300\">\n      <div class=\"text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent mb-2\">24\/7<\/div>\n      <div class=\"text-gray-200 font-medium\">Support Available<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Partners Header -->\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center mt-12\">\n    <div class=\"inline-flex items-center gap-2 px-5 py-2 rounded-full border border-white\/20 backdrop-blur-sm bg-white\/10 mb-4 hover:border-blue-400 hover:scale-105 transition-all duration-300 cursor-pointer\">\n      <span class=\"text-sm font-medium text-gray-200\">Global Presence<\/span>\n      <i class=\"fa-solid fa-globe text-blue-400 text-sm\"><\/i>\n    <\/div>\n    <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-4\">Our Official Partners<\/h2>\n    <p class=\"text-xl text-gray-300 max-w-2xl mx-auto\">Connecting businesses across continents with dedicated support<\/p>\n  <\/div>\n\n  <!-- Partner Cards -->\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 relative z-10 flex flex-col lg:flex-row gap-8\">\n\n    <!-- USA Partner -->\n    <div class=\"flex-1 relative overflow-hidden rounded-3xl border border-white\/20 bg-white\/5 backdrop-blur-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-500\">\n      <div class=\"p-8\">\n        <div class=\"flex items-start justify-between mb-6 gap-4\">\n          <div class=\"flex-1\">\n            <h3 class=\"text-2xl font-bold text-white mb-2\">\ud83c\uddfa\ud83c\uddf8 USA Sales Office (Official Partner)<\/h3>\n            <p class=\"text-lg font-semibold text-gray-300\">Powered by Rayford Trucking LLC<\/p>\n          <\/div>\n          <div class=\"hidden md:block\">\n            <div class=\"p-3 rounded-xl border border-white\/20 backdrop-blur-sm transition-all duration-500 hover:border-blue-400\">\n              <img decoding=\"async\" class=\"w-24 h-24 object-contain mx-auto\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=150x150&amp;data=https:\/\/t.me\/NexaTMS\" alt=\"Telegram QR\" \/>\n              <p class=\"text-xs text-center mt-2 font-medium text-gray-400\">Scan for Telegram<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"space-y-3 mb-6\">\n          <a class=\"text-gray-300 hover:text-blue-400 transition-colors flex items-center gap-2 font-medium\" href=\"tel:+13098318910\"><i class=\"fa-solid fa-phone\"><\/i> +1 (309) 831-8910<\/a>\n          <a class=\"text-gray-300 hover:text-blue-400 transition-colors flex items-center gap-2 font-medium\" href=\"tel:+12178002113\"><i class=\"fa-solid fa-phone\"><\/i> +1 (217) 800-2113<\/a>\n          <a class=\"text-gray-300 hover:text-orange-400 transition-colors flex items-center gap-2 font-medium break-all\" href=\"mailto:elbertrayfordjr@nexatms.com\"><i class=\"fa-solid fa-envelope\"><\/i> elbertrayfordjr@nexatms.com<\/a>\n          <a class=\"text-gray-300 hover:text-blue-400 transition-colors flex items-center gap-2 font-medium\" href=\"https:\/\/t.me\/NexaTMS\" target=\"_blank\" rel=\"noopener\"><i class=\"fa-brands fa-telegram\"><\/i> @NexaTMS<\/a>\n        <\/div>\n\n        <div class=\"p-4 rounded-xl border-l-4 border-blue-400\/40 bg-white\/5 backdrop-blur-sm\">\n          <p class=\"text-sm text-gray-300 font-medium\"><i class=\"fa-solid fa-building\"><\/i> Registered Company in the United States<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- India Partner -->\n    <div class=\"flex-1 relative overflow-hidden rounded-3xl border border-white\/20 bg-white\/5 backdrop-blur-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-500\">\n      <div class=\"p-8\">\n        <div class=\"flex items-start justify-between mb-6 gap-4\">\n          <div class=\"flex-1\">\n            <h3 class=\"text-2xl font-bold text-white mb-2\">\ud83c\uddee\ud83c\uddf3 India Technical Support (Official Partner)<\/h3>\n            <p class=\"text-lg font-semibold text-gray-300\">Primetrix Solutions<\/p>\n          <\/div>\n          <div class=\"hidden md:block\">\n            <div class=\"p-3 rounded-xl border border-white\/20 backdrop-blur-sm transition-all duration-500 hover:border-orange-400\">\n              <img decoding=\"async\" class=\"w-24 h-24 object-contain mx-auto\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=150x150&amp;data=https:\/\/t.me\/Rajveer18900\" alt=\"Telegram QR\" \/>\n              <p class=\"text-xs text-center mt-2 font-medium text-gray-400\">Scan for Telegram<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"space-y-3 mb-6\">\n          <a class=\"text-gray-300 hover:text-blue-400 transition-colors flex items-center gap-2 font-medium\" href=\"tel:+918240408068\"><i class=\"fa-solid fa-phone\"><\/i> +91 8240408068<\/a>\n          <a class=\"text-gray-300 hover:text-orange-400 transition-colors flex items-center gap-2 font-medium break-all\" href=\"mailto:primetrixsolution@gmail.com\"><i class=\"fa-solid fa-envelope\"><\/i> primetrixsolution@gmail.com<\/a>\n          <a class=\"text-gray-300 hover:text-blue-400 transition-colors flex items-center gap-2 font-medium\" href=\"https:\/\/t.me\/Rajveer18900\" target=\"_blank\" rel=\"noopener\"><i class=\"fa-brands fa-telegram\"><\/i> @Rajveer18900<\/a>\n        <\/div>\n\n        <div class=\"p-4 rounded-xl border-l-4 border-orange-400\/40 bg-white\/5 backdrop-blur-sm\">\n          <p class=\"text-sm text-gray-300 font-medium\"><i class=\"fa-solid fa-screwdriver-wrench\"><\/i> Available for technical support &amp; project management in India<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\t\t\t\t\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-00eaafd e-flex e-con-boxed e-con e-parent\" data-id=\"00eaafd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-498cda8 elementor-widget elementor-widget-text-editor\" data-id=\"498cda8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<style>\n\/* iOS Safari Blur Fix *\/\n.backdrop-blur-md {\n  -webkit-backdrop-filter: blur(12px);\n  backdrop-filter: blur(12px);\n}\n.blur-3xl {\n  -webkit-filter: blur(64px);\n  filter: blur(64px);\n}\n\n\/* iPhone cutting fix *\/\n#form {\n  overflow: visible !important;\n}\n\n\/* Make inner blocks not overflow on small screens *\/\n@media (max-width: 640px) {\n  #form .p-8 {\n    padding: 1.5rem !important;\n  }\n  #form img {\n    max-width: 100%;\n    height: auto;\n  }\n}\n<\/style>\n\n<section id=\"form\" class=\"relative py-20 px-6 bg-gradient-to-br from-[#0a0f1f] via-[#0d1a3a] to-[#1a2a4f] text-white overflow-visible rounded-[2rem]\">\n\n<!-- Background Gradient Glow -->\n<div class=\"absolute inset-0 opacity-10 pointer-events-none\">\n  <div class=\"absolute top-20 left-20 w-40 h-40 bg-gradient-to-br from-blue-400 to-orange-400 rounded-full blur-3xl animate-pulse\"><\/div>\n  <div class=\"absolute bottom-20 right-20 w-56 h-56 bg-gradient-to-br from-orange-400 to-blue-400 rounded-full blur-3xl animate-pulse\"><\/div>\n<\/div>\n\n<div class=\"container mx-auto relative z-10 w-full\">\n\n<!-- Section Header -->\n<div class=\"text-center mb-12\">\n  <h2 class=\"text-4xl font-bold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent\">Get in Touch<\/h2>\n  <p class=\"text-gray-300 mt-2\">We\u2019re here to help and answer any questions you might have.<\/p>\n<\/div>\n\n<!-- Contact & Form -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-10 items-start mb-16\">\n\n<!-- Left: Form -->\n<div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all\">\n  <div class=\"form-wrapper\"><div class=\"forminator-ui forminator-custom-form forminator-custom-form-213 forminator-design--default  forminator_ajax\" data-forminator-render=\"1\" data-form=\"forminator-module-213\" data-uid=\"69e73a4250b92\"><br\/><\/div><form\n\t\t\t\tid=\"forminator-module-213\"\n\t\t\t\tclass=\"forminator-ui forminator-custom-form forminator-custom-form-213 forminator-design--default  forminator_ajax\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tdata-forminator-render=\"1\"\n\t\t\t\tdata-form-id=\"213\"\n\t\t\t\t data-color-option=\"theme\" data-design=\"default\" data-grid=\"open\" style=\"display: none;\"\n\t\t\t\tdata-uid=\"69e73a4250b92\"\n\t\t\t><div role=\"alert\" aria-live=\"polite\" class=\"forminator-response-message forminator-error\" aria-hidden=\"true\"><\/div><div class=\"forminator-row\"><div id=\"name-1\" class=\"forminator-field-name forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-name-1_69e73a4250b92\" id=\"forminator-field-name-1_69e73a4250b92-label\" class=\"forminator-label\">First Name <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"name-1\" value=\"\" placeholder=\"\" id=\"forminator-field-name-1_69e73a4250b92\" class=\"forminator-input forminator-name--field\" aria-required=\"true\" autocomplete=\"name\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"email-1\" class=\"forminator-field-email forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-email-1_69e73a4250b92\" id=\"forminator-field-email-1_69e73a4250b92-label\" class=\"forminator-label\">Email Address <span class=\"forminator-required\">*<\/span><\/label><input type=\"email\" name=\"email-1\" value=\"\" placeholder=\"\" id=\"forminator-field-email-1_69e73a4250b92\" class=\"forminator-input forminator-email--field\" data-required=\"true\" aria-required=\"true\" autocomplete=\"email\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"phone-1\" class=\"forminator-field-phone forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-phone-1_69e73a4250b92\" id=\"forminator-field-phone-1_69e73a4250b92-label\" class=\"forminator-label\">Phone Number<\/label><input type=\"text\" name=\"phone-1\" value=\"\" placeholder=\"\" id=\"forminator-field-phone-1_69e73a4250b92\" class=\"forminator-input forminator-field--phone\" data-required=\"\" aria-required=\"false\" autocomplete=\"off\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"textarea-1\" class=\"forminator-field-textarea forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-textarea-1_69e73a4250b92\" id=\"forminator-field-textarea-1_69e73a4250b92-label\" class=\"forminator-label\">Message<\/label><span id=\"forminator-field-textarea-1_69e73a4250b92-description\" class=\"forminator-description\"><span data-limit=\"180\" data-type=\"characters\" data-editor=\"\">0 \/ 180<\/span><\/span><textarea name=\"textarea-1\" placeholder=\"\" id=\"forminator-field-textarea-1_69e73a4250b92\" class=\"forminator-textarea\" rows=\"6\" style=\"--forminator-textarea-min-height:140px;\" maxlength=\"180\" ><\/textarea><\/div><\/div><\/div><input type=\"hidden\" name=\"referer_url\" value=\"\" \/><div class=\"forminator-row forminator-row-last\"><div class=\"forminator-col\"><div class=\"forminator-field\"><button class=\"forminator-button forminator-button-submit\">Submit<\/button><\/div><\/div><\/div><input type=\"hidden\" id=\"forminator_nonce\" name=\"forminator_nonce\" value=\"6245c762d8\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F167\" \/><input type=\"hidden\" name=\"form_id\" value=\"213\"><input type=\"hidden\" name=\"page_id\" value=\"167\"><input type=\"hidden\" name=\"form_type\" value=\"default\"><input type=\"hidden\" name=\"current_url\" value=\"https:\/\/primetrixsolution.com\/\"><input type=\"hidden\" name=\"render_id\" value=\"1\"><input type=\"hidden\" name=\"action\" value=\"forminator_submit_form_custom-forms\"><\/form><\/div>\n<\/div>\n\n<!-- Right: Contact Card -->\n<div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all text-center\">\n\n  <h3 class=\"text-2xl font-semibold mb-6 text-white\">Get In Touch<\/h3>\n\n  <div class=\"space-y-6 text-gray-300\">\n\n    <!-- Telegram -->\n    <div class=\"flex flex-wrap items-center justify-center gap-3 group transition-all hover:-translate-y-1 hover:drop-shadow-[0_0_10px_#24A1DE]\">\n      <i class=\"fa-brands fa-telegram text-[#24A1DE] text-2xl\"><\/i>\n      <span class=\"text-white font-medium\">Telegram:<\/span>\n      <span class=\"group-hover:text-[#24A1DE]\">@Rajveer18900<\/span>\n    <\/div>\n\n    <!-- LinkedIn -->\n    <div class=\"flex flex-wrap items-center justify-center gap-3 group hover:-translate-y-1 hover:drop-shadow-[0_0_10px_#0A66C2] transition-all\">\n      <i class=\"fa-brands fa-linkedin text-[#0A66C2] text-2xl\"><\/i>\n      <span class=\"text-white font-medium\">LinkedIn:<\/span>\n      <a href=\"https:\/\/www.linkedin.com\/company\/primetrix-solutions\/\" class=\"hover:underline group-hover:text-[#0A66C2]\" target=\"_blank\">PrimeTrix Solutions<\/a>\n    <\/div>\n\n    <!-- Phone -->\n    <div class=\"flex flex-wrap items-center justify-center gap-3 group hover:-translate-y-1 hover:drop-shadow-[0_0_10px_#22c55e] transition-all\">\n      <i class=\"fa-solid fa-phone text-green-400 text-xl\"><\/i>\n      <span class=\"text-white font-medium\">Phone:<\/span>\n      <span class=\"group-hover:text-green-400\">+91 8240408068<\/span>\n    <\/div>\n\n    <!-- Email -->\n    <div class=\"flex flex-wrap items-center justify-center gap-3 group hover:-translate-y-1 hover:drop-shadow-[0_0_10px_#ff6b00] transition-all\">\n      <i class=\"fa-solid fa-envelope text-[#ff6b00] text-xl\"><\/i>\n      <span class=\"text-white font-medium\">Email:<\/span>\n      <div class=\"flex flex-col text-left\">\n        <span class=\"group-hover:text-[#ff6b00]\">info@primetrixsolution.com<\/span>\n        <span class=\"group-hover:text-[#ff6b00]\">primetrixsolution@gmail.com<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- QR -->\n    <div class=\"mt-6 group hover:-translate-y-1 transition-all hover:drop-shadow-[0_0_15px_#ff6b00]\">\n      <div class=\"p-4 bg-white\/5 rounded-xl inline-block group-hover:scale-105\">\n        <img decoding=\"async\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=160x160&#038;data=@Rajveer18900\" class=\"rounded-xl mx-auto\" \/>\n      <\/div>\n      <button class=\"mt-4 px-6 py-2 bg-gradient-to-r from-[#004c97] to-[#ff6b00] rounded-full font-medium shadow-md hover:scale-105\">Scan QR Code for Telegram<\/button>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n<\/div>\n\n<!-- Why Choose -->\n<div class=\"text-center mb-10\">\n  <h3 class=\"text-3xl font-bold bg-gradient-to-r from-[#ff9500] to-[#ff6b00] bg-clip-text text-transparent\">Why Choose PrimeTrix Solutions?<\/h3>\n  <p class=\"text-gray-300 mt-2\">Delivering excellence through technology, service, and trust.<\/p>\n<\/div>\n\n<div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8\">\n\n  <div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-md hover:-translate-y-2 transition-all text-center\">\n    <h4 class=\"text-xl font-semibold text-white mb-2\">24\/7 Support &#038; Maintenance<\/h4>\n    <p class=\"text-gray-300 text-sm\">Always available to ensure your systems run smoothly.<\/p>\n  <\/div>\n\n  <div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-md hover:-translate-y-2 transition-all text-center\">\n    <h4 class=\"text-xl font-semibold text-white mb-2\">Cutting-edge Technology Stack<\/h4>\n    <p class=\"text-gray-300 text-sm\">Using the latest tools and frameworks.<\/p>\n  <\/div>\n\n  <div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-md hover:-translate-y-2 transition-all text-center\">\n    <h4 class=\"text-xl font-semibold text-white mb-2\">Fast Delivery &#038; Quality Assurance<\/h4>\n    <p class=\"text-gray-300 text-sm\">On-time project completion with quality.<\/p>\n  <\/div>\n\n  <div class=\"p-8 rounded-2xl bg-white\/10 backdrop-blur-md border border-white\/10 shadow-md hover:-translate-y-2 transition-all text-center\">\n    <h4 class=\"text-xl font-semibold text-white mb-2\">Competitive Pricing<\/h4>\n    <p class=\"text-gray-300 text-sm\">Affordable solutions with reliability.<\/p>\n  <\/div>\n\n<\/div>\n\n<\/div>\n<\/section>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Empowering Digital Growth with Smart IT Solutions Web Development \u2022 Mobile Apps \u2022 AI &amp; Blockchain \u2022 SEO \u2022 Full [&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":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=167"}],"version-history":[{"count":188,"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=\/wp\/v2\/pages\/167\/revisions\/430"}],"wp:attachment":[{"href":"https:\/\/primetrixsolution.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}