{"id":524,"date":"2026-07-15T12:23:40","date_gmt":"2026-07-15T12:23:40","guid":{"rendered":"https:\/\/w3webhelp.in\/sample\/Infinexy\/?page_id=524"},"modified":"2026-08-06T11:32:43","modified_gmt":"2026-08-06T11:32:43","slug":"about","status":"publish","type":"page","link":"https:\/\/w3webhelp.in\/sample\/Infinexy\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Infinexy - About Us<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #f0f4f8;\r\n overflow-x: hidden;\r\n }\r\n\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --mix-color: #864ABA;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ===== ABOUT BANNER \/ HERO ===== *\/\r\n .about-banner {\r\n position: relative;\r\n min-height: 65vh;\r\n display: flex;\r\n align-items: center;\r\n background: linear-gradient(135deg, var(--badge-color) 0%, var(--mix-color) 100%);\r\n overflow: hidden;\r\n padding: 40px 0 80px;\r\n }\r\n\r\n \/* ===== VISUAL ANIMATIONS ===== *\/\r\n .about-banner .orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: orbFloat 8s ease-in-out infinite;\r\n }\r\n .about-banner .orb-1 {\r\n width: 200px;\r\n height: 200px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\r\n top: -50px;\r\n right: -50px;\r\n animation-delay: 0s;\r\n }\r\n .about-banner .orb-2 {\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);\r\n bottom: -100px;\r\n left: -100px;\r\n animation-delay: 3s;\r\n }\r\n .about-banner .orb-3 {\r\n width: 150px;\r\n height: 150px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);\r\n top: 40%;\r\n left: 60%;\r\n animation-delay: 5s;\r\n }\r\n\r\n @keyframes orbFloat {\r\n 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }\r\n 50% { transform: translate(30px, -40px) scale(1.2); opacity: 1; }\r\n }\r\n\r\n .about-banner .ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: ringSpin 20s linear infinite;\r\n }\r\n .about-banner .ring-1 {\r\n width: 400px;\r\n height: 400px;\r\n top: -100px;\r\n right: -100px;\r\n animation-duration: 25s;\r\n }\r\n .about-banner .ring-2 {\r\n width: 600px;\r\n height: 600px;\r\n bottom: -200px;\r\n left: -200px;\r\n animation-duration: 35s;\r\n animation-direction: reverse;\r\n }\r\n .about-banner .ring-3 {\r\n width: 250px;\r\n height: 250px;\r\n top: 50%;\r\n left: 70%;\r\n animation-duration: 15s;\r\n border-color: rgba(255,255,255,0.05);\r\n }\r\n .about-banner .ring::before {\r\n content: '';\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2);\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n box-shadow: 0 0 30px rgba(255,255,255,0.1);\r\n }\r\n @keyframes ringSpin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .about-banner .shooting-star {\r\n position: absolute;\r\n width: 2px;\r\n height: 2px;\r\n background: #fff;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: shootStar 4s linear infinite;\r\n }\r\n .about-banner .shooting-star::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n width: 60px;\r\n height: 1px;\r\n background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);\r\n transform: translateY(-50%);\r\n }\r\n .about-banner .shooting-star:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }\r\n .about-banner .shooting-star:nth-child(2) { top: 25%; right: 15%; animation-delay: 2s; animation-duration: 5s; }\r\n .about-banner .shooting-star:nth-child(3) { top: 55%; left: 5%; animation-delay: 4s; animation-duration: 3.5s; }\r\n .about-banner .shooting-star:nth-child(4) { top: 70%; right: 10%; animation-delay: 1.5s; animation-duration: 4.5s; }\r\n @keyframes shootStar {\r\n 0% { transform: translate(0, 0) scale(1); opacity: 0; }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 1; }\r\n 100% { transform: translate(-200px, 200px) scale(0); opacity: 0; }\r\n }\r\n\r\n .about-banner .particle {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.05);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: particleFloat 12s ease-in-out infinite;\r\n }\r\n .about-banner .particle:nth-child(1) { width: 4px; height: 4px; top: 10%; left: 20%; animation-delay: 0s; }\r\n .about-banner .particle:nth-child(2) { width: 6px; height: 6px; top: 20%; right: 30%; animation-delay: 2s; }\r\n .about-banner .particle:nth-child(3) { width: 3px; height: 3px; bottom: 15%; left: 40%; animation-delay: 4s; }\r\n .about-banner .particle:nth-child(4) { width: 5px; height: 5px; bottom: 10%; right: 25%; animation-delay: 6s; }\r\n .about-banner .particle:nth-child(5) { width: 4px; height: 4px; top: 45%; left: 55%; animation-delay: 8s; }\r\n .about-banner .particle:nth-child(6) { width: 3px; height: 3px; top: 60%; right: 40%; animation-delay: 10s; }\r\n @keyframes particleFloat {\r\n 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.03; }\r\n 25% { transform: translate(80px, -60px) scale(2); opacity: 0.08; }\r\n 50% { transform: translate(-40px, 40px) scale(0.5); opacity: 0.01; }\r\n 75% { transform: translate(60px, 80px) scale(1.5); opacity: 0.06; }\r\n }\r\n\r\n .about-banner .pulse-dot {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: pulseDot 3s ease-in-out infinite;\r\n }\r\n .about-banner .pulse-dot:nth-child(1) { width: 12px; height: 12px; top: 8%; left: 8%; animation-delay: 0s; }\r\n .about-banner .pulse-dot:nth-child(2) { width: 8px; height: 8px; top: 30%; right: 12%; animation-delay: 0.8s; }\r\n .about-banner .pulse-dot:nth-child(3) { width: 16px; height: 16px; bottom: 20%; left: 5%; animation-delay: 1.6s; }\r\n .about-banner .pulse-dot:nth-child(4) { width: 10px; height: 10px; bottom: 40%; right: 8%; animation-delay: 2.4s; }\r\n @keyframes pulseDot {\r\n 0%, 100% { transform: scale(1); opacity: 0.05; }\r\n 50% { transform: scale(2.5); opacity: 0.15; box-shadow: 0 0 40px rgba(255,255,255,0.05); }\r\n }\r\n\r\n .about-banner .tech-shape {\r\n position: absolute;\r\n border: 1.5px solid rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: techShapeFloat 15s ease-in-out infinite;\r\n }\r\n .about-banner .tech-shape:nth-child(1) { width: 80px; height: 80px; border-radius: 20px; top: 20%; right: 15%; animation-delay: 0s; transform: rotate(45deg); }\r\n .about-banner .tech-shape:nth-child(2) { width: 60px; height: 60px; border-radius: 50%; bottom: 25%; left: 20%; animation-delay: 3s; }\r\n .about-banner .tech-shape:nth-child(3) { width: 40px; height: 40px; border-radius: 8px; top: 55%; right: 30%; animation-delay: 6s; transform: rotate(30deg); }\r\n @keyframes techShapeFloat {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.04; }\r\n 33% { transform: translate(50px, -40px) rotate(15deg) scale(1.1); opacity: 0.08; }\r\n 66% { transform: translate(-30px, 30px) rotate(-8deg) scale(0.9); opacity: 0.05; }\r\n }\r\n\r\n .about-banner .glow-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);\r\n animation: glowRingPulse 5s ease-in-out infinite;\r\n }\r\n .about-banner .glow-ring:nth-child(1) { width: 350px; height: 350px; top: 10%; right: 5%; animation-delay: 0s; }\r\n .about-banner .glow-ring:nth-child(2) { width: 450px; height: 450px; bottom: 5%; left: 5%; animation-delay: 2.5s; }\r\n @keyframes glowRingPulse {\r\n 0%, 100% { transform: scale(0.8); opacity: 0.3; }\r\n 50% { transform: scale(1.2); opacity: 0.8; }\r\n }\r\n\r\n .about-banner .grid-overlay {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n opacity: 0.03;\r\n background-image: \r\n linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n animation: gridMove 30s linear infinite;\r\n }\r\n @keyframes gridMove {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(50px, 50px); }\r\n }\r\n\r\n \/* ===== BANNER INNER ===== *\/\r\n .about-banner .banner-inner {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n width: 100%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n \/* Left content (text) *\/\r\n .about-banner .banner-content {\r\n flex: 1 1 50%;\r\n max-width: 600px;\r\n animation: fadeInUp 0.7s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Right image container *\/\r\n .about-banner .banner-image {\r\n flex: 1 1 40%;\r\n max-width: 500px;\r\n margin-left: 20px;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .about-banner .banner-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .about-banner .banner-image img:hover {\r\n transform: scale(1.02);\r\n box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n \/* breadcrumb *\/\r\n .about-banner .breadcrumb {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease forwards;\r\n opacity: 0;\r\n }\r\n .about-banner .breadcrumb a {\r\n color: rgba(255,255,255,0.5);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n .about-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.8);\r\n }\r\n .about-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n }\r\n .about-banner .breadcrumb .current {\r\n color: rgba(255,255,255,0.8);\r\n font-weight: 500;\r\n }\r\n\r\n .about-banner .heading {\r\n font-size: clamp(36px, 5vw, 56px);\r\n font-weight: 900;\r\n line-height: 1.08;\r\n color: #ffffff;\r\n margin-bottom: 16px;\r\n }\r\n .about-banner .heading .highlight {\r\n background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.6));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .about-banner .description {\r\n font-size: clamp(16px, 1.1vw, 19px);\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.7);\r\n max-width: 560px;\r\n margin-bottom: 28px;\r\n }\r\n .about-banner .stats {\r\n display: flex;\r\n gap: 40px;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n .about-banner .stats .stat-item {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .about-banner .stats .stat-item .number {\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.2;\r\n }\r\n .about-banner .stats .stat-item .number .highlight {\r\n background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.6));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .about-banner .stats .stat-item .label {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n font-weight: 400;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* ===== RESPONSIVE ===== *\/\r\n @media (min-width: 1400px) {\r\n .about-banner { padding: 60px 0 80px; min-height: 70vh; }\r\n .about-banner .heading { font-size: 62px; }\r\n }\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .about-banner { padding: 40px 0 80px; min-height: 65vh; }\r\n .about-banner .heading { font-size: 52px; }\r\n }\r\n @media (max-width: 1199px) {\r\n .about-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .about-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .about-banner .ring-2 { display: none; }\r\n .about-banner .glow-ring { display: none; }\r\n .about-banner .banner-image { flex: 1 1 45%; max-width: 45%; }\r\n .about-banner .banner-content { flex: 1 1 50%; }\r\n }\r\n @media (max-width: 991px) {\r\n .about-banner { min-height: auto; padding: 70px 0 50px; }\r\n .about-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .about-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .about-banner .banner-image { \r\n flex: 1 1 100%; \r\n max-width: 100%; \r\n margin-left: 0; \r\n margin-top: 40px;\r\n }\r\n .about-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .about-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .about-banner .stats { justify-content: center; }\r\n .about-banner .breadcrumb { justify-content: center; }\r\n .about-banner .orb-2 { display: none; }\r\n .about-banner .ring-1 { display: none; }\r\n .about-banner .ring-3 { display: none; }\r\n .about-banner .shooting-star { display: none; }\r\n .about-banner .tech-shape { display: none; }\r\n .about-banner .grid-overlay { display: none; }\r\n }\r\n @media (max-width: 767px) {\r\n .about-banner { padding: 50px 0 40px; }\r\n .about-banner .banner-inner { padding: 0 20px; }\r\n .about-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .about-banner .description { font-size: 15px; line-height: 1.7; }\r\n .about-banner .stats { gap: 24px; flex-direction: row; flex-wrap: wrap; justify-content: center; }\r\n .about-banner .stats .stat-item .number { font-size: 24px; }\r\n .about-banner .stats .stat-item .label { font-size: 12px; }\r\n .about-banner .breadcrumb { font-size: 12px; }\r\n .about-banner .orb-1 { width: 120px; height: 120px; }\r\n .about-banner .orb-3 { display: none; }\r\n .about-banner .particle { display: none; }\r\n .about-banner .pulse-dot { display: none; }\r\n .about-banner .banner-image img { max-width: 320px; }\r\n }\r\n @media (max-width: 480px) {\r\n .about-banner { padding: 40px 0 30px; }\r\n .about-banner .banner-inner { padding: 0 16px; }\r\n .about-banner .heading { font-size: 26px; }\r\n .about-banner .description { font-size: 14px; }\r\n .about-banner .stats { gap: 16px; justify-content: center; }\r\n .about-banner .stats .stat-item { text-align: center; min-width: 80px; }\r\n .about-banner .stats .stat-item .number { font-size: 22px; }\r\n .about-banner .stats .stat-item .label { font-size: 11px; }\r\n .about-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; justify-content: center; }\r\n .about-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .about-banner .banner-image img { max-width: 260px; }\r\n }\r\n @media (max-width: 375px) {\r\n .about-banner { padding: 30px 0 24px; }\r\n .about-banner .heading { font-size: 22px; }\r\n .about-banner .description { font-size: 13px; }\r\n .about-banner .stats .stat-item .number { font-size: 18px; }\r\n .about-banner .stats .stat-item .label { font-size: 10px; }\r\n .about-banner .breadcrumb { font-size: 10px; }\r\n .about-banner .stats { gap: 10px; }\r\n .about-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"about-banner\">\r\n <!-- decorative elements -->\r\n <div class=\"orb orb-1\"><\/div>\r\n <div class=\"orb orb-2\"><\/div>\r\n <div class=\"orb orb-3\"><\/div>\r\n <div class=\"ring ring-1\"><\/div>\r\n <div class=\"ring ring-2\"><\/div>\r\n <div class=\"ring ring-3\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"glow-ring\"><\/div>\r\n <div class=\"glow-ring\"><\/div>\r\n <div class=\"grid-overlay\"><\/div>\r\n\r\n <div class=\"banner-inner\">\r\n <!-- LEFT: Text content -->\r\n <div class=\"banner-content\">\r\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n <a href=\"#\">Home<\/a>\r\n <span class=\"separator\"><i class=\"fas fa-chevron-right\"><\/i><\/span>\r\n <span class=\"current\">About Us<\/span>\r\n <\/nav>\r\n <h1 class=\"heading\">\r\n Who We <span class=\"highlight\">Are<\/span>\r\n <\/h1>\r\n <p class=\"description\">\r\n Infinexy Technologies is a global technology and telecommunications company \r\n delivering innovative communication solutions, international voice services, \r\n cloud infrastructure, and enterprise technology solutions for businesses worldwide.\r\n <\/p>\r\n <div class=\"stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">5+<\/span><\/span>\r\n <span class=\"label\">Years of Excellence<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">150+<\/span><\/span>\r\n <span class=\"label\">Countries Served<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">99.9%<\/span><\/span>\r\n <span class=\"label\">Uptime Guaranteed<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT: Image -->\r\n <div class=\"banner-image\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/08\/About-Us.png\" \r\n alt=\"Infinexy team collaboration\"\r\n loading=\"lazy\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-efb3e89 e-con-full e-flex e-con e-parent\" data-id=\"efb3e89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2efcb5d elementor-widget elementor-widget-html\" data-id=\"2efcb5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy - Company Profile<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --stat-color: #864ABA;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n COMPANY PROFILE SECTION\r\n ======================================== *\/\r\n .company-profile {\r\n padding: 80px 0;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .company-profile::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse at 80% 20%, rgba(142, 36, 170, 0.03) 0%, transparent 50%),\r\n radial-gradient(ellipse at 20% 80%, rgba(0, 159, 227, 0.03) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n\r\n .company-profile-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n PROFILE CARDS\r\n ======================================== *\/\r\n .profile-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .profile-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 30px 22px 26px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: default;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .profile-card:nth-child(1) { animation-delay: 0.05s; }\r\n .profile-card:nth-child(2) { animation-delay: 0.10s; }\r\n .profile-card:nth-child(3) { animation-delay: 0.15s; }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Animated Gradient Border *\/\r\n .profile-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .profile-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .profile-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ===== ICON WRAPPER - #4D7DD1 ===== *\/\r\n .profile-card .icon-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n color: var(--white);\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--badge-color);\r\n color: var(--badge-color);\r\n }\r\n\r\n \/* Animated Glow Ring *\/\r\n .profile-card .icon-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Glow Shadow *\/\r\n .profile-card .icon-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .profile-card:hover .icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .profile-card:hover .icon-wrapper::before {\r\n opacity: 1;\r\n border-color: currentColor;\r\n transform: scale(1.05);\r\n }\r\n\r\n .profile-card:hover .icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .profile-card .icon-wrapper i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .profile-card:hover .icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .profile-card h3 {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .profile-card:hover h3 {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION ===== *\/\r\n .profile-card p {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n }\r\n\r\n .profile-card:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE EFFECT ===== *\/\r\n .profile-card .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .profile-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .profile-card .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(142, 36, 170, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .profile-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n STATS BAR - #864ABA\r\n ======================================== *\/\r\n .stats-bar {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n margin-bottom: 40px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n animation-delay: 0.20s;\r\n }\r\n\r\n .stats-bar .stat-item {\r\n background: #f8fafc;\r\n border-radius: 16px;\r\n padding: 20px 16px;\r\n text-align: center;\r\n border: 1px solid var(--border);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .stats-bar .stat-item:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.04);\r\n border-color: rgba(142, 36, 170, 0.08);\r\n }\r\n\r\n .stats-bar .stat-item .number {\r\n font-size: 32px;\r\n font-weight: 800;\r\n color: var(--stat-color);\r\n line-height: 1.2;\r\n }\r\n\r\n .stats-bar .stat-item .number .highlight {\r\n color: var(--stat-color);\r\n }\r\n\r\n .stats-bar .stat-item .label {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n font-weight: 400;\r\n }\r\n\r\n \/* ========================================\r\n CORE VALUES - BOTTOM\r\n ======================================== *\/\r\n .values-section {\r\n margin-top: 16px;\r\n padding-top: 40px;\r\n border-top: 1px solid var(--border);\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n animation-delay: 0.30s;\r\n }\r\n\r\n .values-title {\r\n text-align: center;\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 28px;\r\n }\r\n\r\n .values-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .values-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .value-item {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 24px 18px;\r\n border: 1px solid var(--border);\r\n text-align: center;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .value-item:nth-child(1) { animation-delay: 0.35s; }\r\n .value-item:nth-child(2) { animation-delay: 0.40s; }\r\n .value-item:nth-child(3) { animation-delay: 0.45s; }\r\n .value-item:nth-child(4) { animation-delay: 0.50s; }\r\n\r\n .value-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .value-item:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .value-item:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.04);\r\n border-color: rgba(142, 36, 170, 0.08);\r\n }\r\n\r\n .value-item .value-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 12px;\r\n font-size: 20px;\r\n color: var(--white);\r\n background: var(--badge-color);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .value-item:hover .value-icon {\r\n transform: scale(1.05);\r\n box-shadow: 0 6px 20px rgba(77, 125, 209, 0.25);\r\n }\r\n\r\n .value-item h4 {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .value-item p {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .company-profile {\r\n padding: 60px 0;\r\n }\r\n\r\n .profile-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .stats-bar {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .values-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .company-profile {\r\n padding: 50px 0;\r\n }\r\n\r\n .company-profile-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 36px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .profile-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .profile-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n\r\n .profile-card .icon-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .profile-card .icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n\r\n .profile-card h3 {\r\n font-size: 15px;\r\n }\r\n\r\n .profile-card p {\r\n font-size: 13px;\r\n }\r\n\r\n \/* Stats side by side on tablet *\/\r\n .stats-bar {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .stats-bar .stat-item .number {\r\n font-size: 24px;\r\n }\r\n\r\n .stats-bar .stat-item .label {\r\n font-size: 12px;\r\n }\r\n\r\n .values-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .value-item {\r\n padding: 18px 14px;\r\n }\r\n\r\n .value-item h4 {\r\n font-size: 14px;\r\n }\r\n\r\n .value-item p {\r\n font-size: 12px;\r\n }\r\n\r\n .values-title {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .company-profile {\r\n padding: 40px 0;\r\n }\r\n\r\n .company-profile-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 28px;\r\n }\r\n\r\n .section-title {\r\n font-size: 24px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .section-badge {\r\n font-size: 10px;\r\n }\r\n\r\n .profile-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .profile-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n\r\n .profile-card .icon-wrapper {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .profile-card .icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n\r\n .profile-card h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .profile-card p {\r\n font-size: 11px;\r\n }\r\n\r\n \/* Stats side by side on mobile *\/\r\n .stats-bar {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 8px;\r\n }\r\n\r\n .stats-bar .stat-item {\r\n padding: 12px 8px;\r\n border-radius: 12px;\r\n }\r\n\r\n .stats-bar .stat-item .number {\r\n font-size: 18px;\r\n }\r\n\r\n .stats-bar .stat-item .label {\r\n font-size: 10px;\r\n }\r\n\r\n .values-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .value-item {\r\n padding: 14px 10px;\r\n border-radius: 12px;\r\n }\r\n\r\n .value-item .value-icon {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 16px;\r\n }\r\n\r\n .value-item h4 {\r\n font-size: 13px;\r\n }\r\n\r\n .value-item p {\r\n font-size: 11px;\r\n }\r\n\r\n .values-title {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .profile-grid {\r\n gap: 10px;\r\n }\r\n\r\n .profile-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .profile-card .icon-wrapper {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .profile-card .icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n\r\n .profile-card h3 {\r\n font-size: 12px;\r\n }\r\n\r\n .profile-card p {\r\n font-size: 10px;\r\n }\r\n\r\n .stats-bar {\r\n gap: 6px;\r\n }\r\n\r\n .stats-bar .stat-item .number {\r\n font-size: 16px;\r\n }\r\n\r\n .stats-bar .stat-item .label {\r\n font-size: 9px;\r\n }\r\n\r\n .values-grid {\r\n gap: 8px;\r\n }\r\n\r\n .value-item {\r\n padding: 10px 8px;\r\n }\r\n\r\n .value-item .value-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .value-item h4 {\r\n font-size: 12px;\r\n }\r\n\r\n .value-item p {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n COMPANY PROFILE SECTION\r\n ======================================== -->\r\n <section class=\"company-profile\">\r\n <div class=\"company-profile-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n About Infinexy\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Company Profile\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Infinexy Technologies is a global technology and telecommunications company \r\n delivering innovative solutions worldwide.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== PROFILE CARDS ===== -->\r\n <div class=\"profile-grid\">\r\n\r\n <!-- Mission -->\r\n <div class=\"profile-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <\/div>\r\n <h3>Our Mission<\/h3>\r\n <p>To empower businesses with innovative, reliable, and secure telecommunications solutions that drive growth and transform the way the world communicates.<\/p>\r\n <\/div>\r\n\r\n <!-- Vision -->\r\n <div class=\"profile-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-eye\"><\/i>\r\n <\/div>\r\n <h3>Our Vision<\/h3>\r\n <p>To become the world's most trusted technology and telecommunications partner, connecting people and businesses through intelligent, scalable, and sustainable solutions.<\/p>\r\n <\/div>\r\n\r\n <!-- Core Values Summary -->\r\n <div class=\"profile-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <\/div>\r\n <h3>Core Values<\/h3>\r\n <p>Innovation, Integrity, Customer-Centricity, Excellence, and Collaboration drive everything we do at Infinexy.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ========================================\r\n CORE VALUES - DETAILED\r\n ======================================== -->\r\n <div class=\"values-section\">\r\n <div class=\"values-title\">\r\n Our Core Values\r\n <\/div>\r\n\r\n <div class=\"values-grid\">\r\n\r\n <div class=\"value-item\">\r\n <div class=\"value-icon\">\r\n <i class=\"fas fa-lightbulb\"><\/i>\r\n <\/div>\r\n <h4>Innovation<\/h4>\r\n <p>Pushing boundaries with cutting-edge technology and creative solutions.<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-item\">\r\n <div class=\"value-icon\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h4>Integrity<\/h4>\r\n <p>Operating with honesty, transparency, and ethical responsibility.<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-item\">\r\n <div class=\"value-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <h4>Customer-Centricity<\/h4>\r\n <p>Putting customers at the heart of everything we do.<\/p>\r\n <\/div>\r\n\r\n <div class=\"value-item\">\r\n <div class=\"value-icon\">\r\n <i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <h4>Excellence<\/h4>\r\n <p>Delivering quality and reliability in every solution we provide.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb2d669 e-con-full e-flex e-con e-parent\" data-id=\"cb2d669\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49e2efc elementor-widget elementor-widget-html\" data-id=\"49e2efc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy - Leadership Team<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n LEADERSHIP TEAM SECTION\r\n ======================================== *\/\r\n .leadership {\r\n padding: 80px 0;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .leadership::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse at 80% 20%, rgba(142, 36, 170, 0.03) 0%, transparent 50%),\r\n radial-gradient(ellipse at 20% 80%, rgba(0, 159, 227, 0.03) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n\r\n .leadership-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 18px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n font-weight: 400;\r\n }\r\n\r\n .section-description {\r\n font-size: 16px;\r\n color: var(--gray);\r\n line-height: 1.8;\r\n max-width: 720px;\r\n margin: 12px auto 0;\r\n }\r\n\r\n \/* ========================================\r\n CORE PRINCIPLES - EXACT SAME AS MISSION CARD\r\n ======================================== *\/\r\n .principles-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .principle-item {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 30px 22px 26px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: default;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .principle-item:nth-child(1) { animation-delay: 0.05s; }\r\n .principle-item:nth-child(2) { animation-delay: 0.10s; }\r\n .principle-item:nth-child(3) { animation-delay: 0.15s; }\r\n .principle-item:nth-child(4) { animation-delay: 0.20s; }\r\n\r\n \/* Animated Gradient Border - Same as Mission Card *\/\r\n .principle-item::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .principle-item:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .principle-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ===== ICON WRAPPER - EXACT SAME AS MISSION CARD ===== *\/\r\n .principle-item .principle-icon {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n color: var(--white);\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--badge-color);\r\n color: var(--badge-color);\r\n }\r\n\r\n \/* Animated Glow Ring - Same as Mission Card *\/\r\n .principle-item .principle-icon::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Glow Shadow - Same as Mission Card *\/\r\n .principle-item .principle-icon::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .principle-item:hover .principle-icon {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .principle-item:hover .principle-icon::before {\r\n opacity: 1;\r\n border-color: currentColor;\r\n transform: scale(1.05);\r\n }\r\n\r\n .principle-item:hover .principle-icon::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .principle-item .principle-icon i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .principle-item:hover .principle-icon i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE - Same as Mission Card ===== *\/\r\n .principle-item h4 {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .principle-item:hover h4 {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION - Same as Mission Card ===== *\/\r\n .principle-item p {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n }\r\n\r\n .principle-item:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE EFFECT - Same as Mission Card ===== *\/\r\n .principle-item .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .principle-item:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY - Same as Mission Card ===== *\/\r\n .principle-item .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(142, 36, 170, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .principle-item:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n PHILOSOPHY SECTION\r\n ======================================== *\/\r\n .philosophy-section {\r\n background: #f8fafc;\r\n border-radius: 20px;\r\n padding: 40px 48px;\r\n border: 1px solid var(--border);\r\n margin-bottom: 40px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n animation-delay: 0.25s;\r\n }\r\n\r\n .philosophy-section .philosophy-title {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 8px;\r\n text-align: center;\r\n }\r\n\r\n .philosophy-section p {\r\n font-size: 15px;\r\n color: var(--gray);\r\n line-height: 1.8;\r\n }\r\n\r\n .philosophy-section .philosophy-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n margin-top: 16px;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n background: var(--white);\r\n border-radius: 12px;\r\n border: 1px solid var(--border);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item:hover {\r\n border-color: var(--badge-color);\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item i {\r\n color: var(--badge-color);\r\n font-size: 18px;\r\n margin-top: 10px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item .text h5 {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item .text p {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n line-height: 1.5;\r\n margin-top: 2px;\r\n }\r\n\r\n \/* ========================================\r\n CTA SECTION WITH BUTTON\r\n ======================================== *\/\r\n .leadership-cta {\r\n text-align: center;\r\n padding: 32px 0 8px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n animation-delay: 0.30s;\r\n }\r\n\r\n .leadership-cta .cta-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .leadership-cta .cta-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .leadership-cta p {\r\n font-size: 15px;\r\n color: var(--gray-light);\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* ===== CTA BUTTON - Same as Other Buttons ===== *\/\r\n .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 36px;\r\n font-size: 15px;\r\n font-weight: 600;\r\n border-radius: 100px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: var(--white);\r\n background: var(--dark);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n z-index: 1;\r\n }\r\n\r\n .cta-btn::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 100px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n transform: translateX(-100%);\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: -1;\r\n }\r\n\r\n .cta-btn:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .cta-btn:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.30);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .cta-btn i {\r\n font-size: 14px;\r\n transition: transform 0.3s ease;\r\n color: var(--white);\r\n }\r\n\r\n .cta-btn:hover i {\r\n transform: translateX(4px);\r\n }\r\n\r\n .cta-btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\r\n ======================================== *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .leadership {\r\n padding: 60px 0;\r\n }\r\n\r\n .principles-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .philosophy-section {\r\n padding: 32px 28px;\r\n }\r\n\r\n .philosophy-section .philosophy-grid {\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .leadership {\r\n padding: 50px 0;\r\n }\r\n\r\n .leadership-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 36px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 16px;\r\n }\r\n\r\n .section-description {\r\n font-size: 15px;\r\n }\r\n\r\n .principles-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .principle-item {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n\r\n .principle-item .principle-icon {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .principle-item .principle-icon i {\r\n font-size: 20px;\r\n }\r\n\r\n .principle-item h4 {\r\n font-size: 15px;\r\n }\r\n\r\n .principle-item p {\r\n font-size: 13px;\r\n }\r\n\r\n .philosophy-section {\r\n padding: 24px 18px;\r\n border-radius: 16px;\r\n }\r\n\r\n .philosophy-section .philosophy-title {\r\n font-size: 18px;\r\n }\r\n\r\n .philosophy-section p {\r\n font-size: 14px;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item {\r\n padding: 10px 12px;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item .text h5 {\r\n font-size: 13px;\r\n }\r\n\r\n .philosophy-section .philosophy-grid .item .text p {\r\n font-size: 12px;\r\n }\r\n\r\n .cta-btn {\r\n padding: 12px 28px;\r\n font-size: 14px;\r\n }\r\n\r\n .leadership-cta .cta-title {\r\n font-size: 18px;\r\n }\r\n\r\n .leadership-cta p {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .leadership {\r\n padding: 40px 0;\r\n }\r\n\r\n .leadership-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 28px;\r\n }\r\n\r\n .section-title {\r\n font-size: 24px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .section-description {\r\n font-size: 14px;\r\n }\r\n\r\n .section-badge {\r\n font-size: 10px;\r\n }\r\n\r\n .principles-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .principle-item {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n\r\n .principle-item .principle-icon {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .principle-item .principle-icon i {\r\n font-size: 16px;\r\n }\r\n\r\n .principle-item .principle-icon::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n\r\n .principle-item h4 {\r\n font-size: 13px;\r\n }\r\n\r\n .principle-item p {\r\n font-size: 11px;\r\n }\r\n\r\n .philosophy-section {\r\n padding: 18px 14px;\r\n }\r\n\r\n .philosophy-section .philosophy-title {\r\n font-size: 16px;\r\n }\r\n\r\n .philosophy-section p {\r\n font-size: 13px;\r\n }\r\n\r\n .cta-btn {\r\n padding: 10px 22px;\r\n font-size: 13px;\r\n }\r\n\r\n .leadership-cta .cta-title {\r\n font-size: 16px;\r\n }\r\n\r\n .leadership-cta p {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .principles-grid {\r\n gap: 10px;\r\n }\r\n\r\n .principle-item {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .principle-item .principle-icon {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .principle-item .principle-icon i {\r\n font-size: 13px;\r\n }\r\n\r\n .principle-item h4 {\r\n font-size: 12px;\r\n }\r\n\r\n .principle-item p {\r\n font-size: 10px;\r\n }\r\n\r\n .cta-btn {\r\n padding: 8px 18px;\r\n font-size: 12px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n LEADERSHIP TEAM SECTION\r\n ======================================== -->\r\n <section class=\"leadership\">\r\n <div class=\"leadership-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Leadership Team\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Driving Innovation. <span class=\"highlight\">Building Trust.<\/span> Delivering Impact.\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n At Infinexy Technologies, our leadership team brings together strategic vision, \r\n technical expertise, and a passion for innovation.\r\n <\/p>\r\n <p class=\"section-description\">\r\n With diverse experience across technology, digital transformation, software engineering, \r\n cloud solutions, AI, and business strategy, our leaders guide the company with a clear \r\n focus on innovation, quality, and long-term partnerships.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== CORE PRINCIPLES ===== -->\r\n <div class=\"principles-grid\">\r\n\r\n <div class=\"principle-item\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"principle-icon\">\r\n <i class=\"fas fa-lightbulb\"><\/i>\r\n <\/div>\r\n <h4>Innovation First<\/h4>\r\n <p>Fostering a culture of continuous learning and creative problem-solving.<\/p>\r\n <\/div>\r\n\r\n <div class=\"principle-item\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"principle-icon\">\r\n <i class=\"fas fa-handshake\"><\/i>\r\n <\/div>\r\n <h4>Customer Success<\/h4>\r\n <p>Helping clients achieve measurable business outcomes through technology.<\/p>\r\n <\/div>\r\n\r\n <div class=\"principle-item\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"principle-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <h4>People Empowerment<\/h4>\r\n <p>Investing in talent and nurturing leadership at every level.<\/p>\r\n <\/div>\r\n\r\n <div class=\"principle-item\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"principle-icon\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h4>Integrity & Excellence<\/h4>\r\n <p>Transparency, accountability, and uncompromising quality.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ===== PHILOSOPHY SECTION ===== -->\r\n <div class=\"philosophy-section\">\r\n <div class=\"philosophy-title\">\r\n Our Leadership Philosophy\r\n <\/div>\r\n <p>\r\n Our leadership is built on four core principles that guide every decision we make. \r\n We believe that great technology starts with great people\u2014leaders who inspire \r\n collaboration, embrace change, and are committed to delivering exceptional value \r\n for our clients.\r\n <\/p>\r\n <div class=\"philosophy-grid\">\r\n <div class=\"item\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <div class=\"text\">\r\n <h5>Innovation First<\/h5>\r\n <p>We foster a culture of continuous learning and creative problem-solving, enabling our teams to build future-ready digital solutions.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"item\">\r\n <i class=\"fas fa-bullseye\"><\/i>\r\n <div class=\"text\">\r\n <h5>Customer Success<\/h5>\r\n <p>Every decision we make is centered around helping our clients achieve measurable business outcomes through technology.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"item\">\r\n <i class=\"fas fa-user-graduate\"><\/i>\r\n <div class=\"text\">\r\n <h5>People Empowerment<\/h5>\r\n <p>We believe our greatest strength is our people. By investing in talent and encouraging collaboration, we create an environment where innovation thrives.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"item\">\r\n <i class=\"fas fa-award\"><\/i>\r\n <div class=\"text\">\r\n <h5>Integrity & Excellence<\/h5>\r\n <p>Transparency, accountability, and uncompromising quality define how we work with our clients, partners, and employees.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== CTA WITH BUTTON ===== -->\r\n <div class=\"leadership-cta\">\r\n <div class=\"cta-title\">\r\n Join Us on Our Journey\r\n <\/div>\r\n <p>\r\n Guided by visionary leadership and powered by talented professionals, \r\n Infinexy Technologies remains committed to building innovative solutions \r\n that empower businesses and shape a smarter digital future.\r\n <\/p>\r\n <a href=\"mailto:info@infinexy.com\" class=\"cta-btn\">\r\n <span>Mail Us<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e270e34 e-con-full e-flex e-con e-parent\" data-id=\"e270e34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83d2104 elementor-widget elementor-widget-html\" data-id=\"83d2104\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy - Corporate Overview<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n CORPORATE OVERVIEW SECTION\r\n ======================================== *\/\r\n .corporate {\r\n padding: 80px 0 24px; \/* reduced bottom padding from 80px to 24px *\/\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .corporate::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse at 80% 20%, rgba(142, 36, 170, 0.03) 0%, transparent 50%),\r\n radial-gradient(ellipse at 20% 80%, rgba(0, 159, 227, 0.03) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n\r\n .corporate-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n CORPORATE TOPICS GRID\r\n ======================================== *\/\r\n .topics-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .topic-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 32px 24px 28px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: default;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .topic-card:nth-child(1) { animation-delay: 0.05s; }\r\n .topic-card:nth-child(2) { animation-delay: 0.10s; }\r\n .topic-card:nth-child(3) { animation-delay: 0.15s; }\r\n .topic-card:nth-child(4) { animation-delay: 0.20s; }\r\n .topic-card:nth-child(5) { animation-delay: 0.25s; }\r\n .topic-card:nth-child(6) { animation-delay: 0.30s; }\r\n\r\n \/* Animated Gradient Border *\/\r\n .topic-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .topic-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .topic-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ===== ICON ===== *\/\r\n .topic-card .topic-icon {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n color: var(--white);\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--badge-color);\r\n color: var(--badge-color);\r\n }\r\n\r\n \/* Glow Ring *\/\r\n .topic-card .topic-icon::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Glow Shadow *\/\r\n .topic-card .topic-icon::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .topic-card:hover .topic-icon {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .topic-card:hover .topic-icon::before {\r\n opacity: 1;\r\n border-color: currentColor;\r\n transform: scale(1.05);\r\n }\r\n\r\n .topic-card:hover .topic-icon::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .topic-card .topic-icon i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .topic-card:hover .topic-icon i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .topic-card h3 {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .topic-card:hover h3 {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION ===== *\/\r\n .topic-card p {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n }\r\n\r\n .topic-card:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE EFFECT ===== *\/\r\n .topic-card .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .topic-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .topic-card .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(142, 36, 170, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .topic-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n STATS SECTION\r\n ======================================== *\/\r\n .stats-section {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n animation-delay: 0.35s;\r\n }\r\n\r\n .stats-section .stat-item {\r\n background: #f8fafc;\r\n border-radius: 16px;\r\n padding: 24px 16px;\r\n text-align: center;\r\n border: 1px solid var(--border);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .stats-section .stat-item:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.04);\r\n border-color: rgba(142, 36, 170, 0.08);\r\n }\r\n\r\n .stats-section .stat-item .number {\r\n font-size: 32px;\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.2;\r\n }\r\n\r\n .stats-section .stat-item .number .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .stats-section .stat-item .label {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n font-weight: 400;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\r\n ======================================== *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .corporate {\r\n padding: 60px 0 20px;\r\n }\r\n\r\n .topics-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n\r\n .stats-section {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .corporate {\r\n padding: 50px 0 16px;\r\n }\r\n\r\n .corporate-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 36px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .topics-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .topic-card {\r\n padding: 24px 16px 20px;\r\n border-radius: 14px;\r\n }\r\n\r\n .topic-card .topic-icon {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .topic-card .topic-icon i {\r\n font-size: 20px;\r\n }\r\n\r\n .topic-card h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .topic-card p {\r\n font-size: 13px;\r\n }\r\n\r\n .stats-section {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .stats-section .stat-item .number {\r\n font-size: 24px;\r\n }\r\n\r\n .stats-section .stat-item .label {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .corporate {\r\n padding: 40px 0 12px;\r\n }\r\n\r\n .corporate-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 28px;\r\n }\r\n\r\n .section-title {\r\n font-size: 24px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .section-badge {\r\n font-size: 10px;\r\n }\r\n\r\n .topics-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .topic-card {\r\n padding: 18px 12px 16px;\r\n border-radius: 12px;\r\n }\r\n\r\n .topic-card .topic-icon {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .topic-card .topic-icon i {\r\n font-size: 16px;\r\n }\r\n\r\n .topic-card h3 {\r\n font-size: 14px;\r\n }\r\n\r\n .topic-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .stats-section {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .stats-section .stat-item {\r\n padding: 14px 12px;\r\n }\r\n\r\n .stats-section .stat-item .number {\r\n font-size: 22px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .topics-grid {\r\n gap: 10px;\r\n }\r\n\r\n .topic-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .topic-card .topic-icon {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .topic-card .topic-icon i {\r\n font-size: 13px;\r\n }\r\n\r\n .topic-card h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .topic-card p {\r\n font-size: 11px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n CORPORATE OVERVIEW SECTION\r\n ======================================== -->\r\n <section class=\"corporate\">\r\n <div class=\"corporate-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Corporate Overview\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Corporate Snapshot\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n A global technology and telecommunications leader delivering innovative \r\n solutions across 150+ countries.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== TOPICS GRID ===== -->\r\n <div class=\"topics-grid\">\r\n\r\n <!-- 1. Global Presence -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <h3>Global Presence<\/h3>\r\n <p>Headquarters in the UK with operations spanning 150+ countries worldwide.<\/p>\r\n <\/div>\r\n\r\n <!-- 2. Industry Leadership -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-trophy\"><\/i>\r\n <\/div>\r\n <h3>Industry Leadership<\/h3>\r\n <p>At the forefront of telecom innovation with cutting-edge technology solutions.<\/p>\r\n <\/div>\r\n\r\n <!-- 3. Innovation & Technology -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-microchip\"><\/i>\r\n <\/div>\r\n <h3>Innovation & Technology<\/h3>\r\n <p>Driving digital transformation through AI, cloud, and next-gen telecom solutions.<\/p>\r\n <\/div>\r\n\r\n <!-- 4. Customer-Centric Approach -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-handshake\"><\/i>\r\n <\/div>\r\n <h3>Customer-Centric Approach<\/h3>\r\n <p>Delivering measurable business outcomes through technology partnerships.<\/p>\r\n <\/div>\r\n\r\n <!-- 5. Security & Reliability -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3>Security & Reliability<\/h3>\r\n <p>ISO-certified processes with 99.9% uptime guarantee for enterprise-grade solutions.<\/p>\r\n <\/div>\r\n\r\n <!-- 6. Sustainability & Growth -->\r\n <div class=\"topic-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"topic-icon\">\r\n <i class=\"fas fa-leaf\"><\/i>\r\n <\/div>\r\n <h3>Sustainability & Growth<\/h3>\r\n <p>Committed to sustainable business practices and long-term value creation.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18abca0 e-con-full e-flex e-con e-parent\" data-id=\"18abca0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c8eb83 elementor-widget elementor-widget-html\" data-id=\"2c8eb83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy - Journey & Milestones<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n JOURNEY & MILESTONES SECTION\r\n ======================================== *\/\r\n .journey {\r\n padding: 80px 0 24px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 24px;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n box-shadow: 0 4px 60px rgba(0,0,0,0.04);\r\n }\r\n\r\n .journey::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse at 80% 20%, rgba(142, 36, 170, 0.03) 0%, transparent 50%),\r\n radial-gradient(ellipse at 20% 80%, rgba(0, 159, 227, 0.03) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n\r\n .journey-inner {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n TIMELINE\r\n ======================================== *\/\r\n .timeline {\r\n position: relative;\r\n padding: 20px 0;\r\n }\r\n\r\n \/* Vertical Line *\/\r\n .timeline::before {\r\n content: '';\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n bottom: 0;\r\n width: 3px;\r\n background: linear-gradient(to bottom, var(--purple), var(--blue), var(--green));\r\n transform: translateX(-50%);\r\n border-radius: 4px;\r\n animation: lineGrow 1.5s ease forwards;\r\n height: 0;\r\n }\r\n\r\n @keyframes lineGrow {\r\n from { height: 0; }\r\n to { height: 100%; }\r\n }\r\n\r\n .timeline-item {\r\n display: flex;\r\n align-items: flex-start;\r\n margin-bottom: 40px;\r\n position: relative;\r\n opacity: 0;\r\n animation: fadeInUp 0.8s ease forwards;\r\n }\r\n\r\n .timeline-item:nth-child(1) { animation-delay: 0.1s; }\r\n .timeline-item:nth-child(2) { animation-delay: 0.2s; }\r\n .timeline-item:nth-child(3) { animation-delay: 0.3s; }\r\n .timeline-item:nth-child(4) { animation-delay: 0.4s; }\r\n .timeline-item:nth-child(5) { animation-delay: 0.5s; }\r\n .timeline-item:nth-child(6) { animation-delay: 0.6s; }\r\n\r\n \/* Alternate left\/right *\/\r\n .timeline-item:nth-child(odd) {\r\n flex-direction: row;\r\n }\r\n\r\n .timeline-item:nth-child(even) {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n \/* Content Box *\/\r\n .timeline-item .content {\r\n width: 45%;\r\n background: #f8fafc;\r\n padding: 28px 24px;\r\n border-radius: 16px;\r\n border: 1px solid var(--border);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n }\r\n\r\n .timeline-item .content:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);\r\n border-color: rgba(142, 36, 170, 0.15);\r\n }\r\n\r\n \/* Glow border on hover *\/\r\n .timeline-item .content::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .timeline-item .content:hover::before {\r\n opacity: 1;\r\n animation: gradientMove 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n \/* Year Badge *\/\r\n .timeline-item .year-badge {\r\n display: inline-block;\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n color: var(--white);\r\n font-size: 14px;\r\n font-weight: 700;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n margin-bottom: 12px;\r\n letter-spacing: 0.5px;\r\n position: relative;\r\n }\r\n\r\n .timeline-item .year-badge i {\r\n margin-right: 8px;\r\n font-size: 12px;\r\n }\r\n\r\n .timeline-item .content h3 {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 8px;\r\n line-height: 1.3;\r\n }\r\n\r\n .timeline-item .content p {\r\n font-size: 14px;\r\n color: var(--gray);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ===== ACHIEVEMENT LIST - NO ICONS ===== *\/\r\n .timeline-item .achievement-list {\r\n margin-top: 10px;\r\n list-style: none;\r\n padding: 0;\r\n }\r\n\r\n .timeline-item .achievement-list li {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n padding: 8px 0;\r\n border-bottom: 1px solid rgba(0,0,0,0.04);\r\n font-size: 14px;\r\n color: var(--gray);\r\n line-height: 1.5;\r\n }\r\n\r\n .timeline-item .achievement-list li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .timeline-item .achievement-list li .bullet {\r\n color: var(--badge-color);\r\n font-size: 14px;\r\n margin-top: 2px;\r\n min-width: 18px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .timeline-item .achievement-list li .bullet.cert {\r\n color: var(--purple);\r\n }\r\n\r\n .timeline-item .achievement-list li .text-wrapper {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n flex: 1;\r\n }\r\n\r\n \/* ===== CERTIFICATE BADGE ===== *\/\r\n .timeline-item .cert-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n background: rgba(142, 36, 170, 0.08);\r\n color: var(--purple);\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 3px 10px;\r\n border-radius: 50px;\r\n white-space: nowrap;\r\n }\r\n\r\n .timeline-item .cert-badge i {\r\n font-size: 10px;\r\n }\r\n\r\n \/* ===== TIMELINE DOT (NO ICON) ===== *\/\r\n .timeline-item .dot-wrapper {\r\n width: 60px;\r\n min-width: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .timeline-item .dot-wrapper .dot-circle {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n box-shadow: 0 0 0 4px rgba(77, 125, 209, 0.15);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Glow ring *\/\r\n .timeline-item .dot-wrapper .dot-circle::after {\r\n content: '';\r\n position: absolute;\r\n inset: -6px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(77, 125, 209, 0.15);\r\n animation: pulseRing 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseRing {\r\n 0% { transform: scale(1); opacity: 0.4; }\r\n 50% { transform: scale(1.3); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 0; }\r\n }\r\n\r\n .timeline-item:hover .dot-wrapper .dot-circle {\r\n transform: scale(1.2);\r\n box-shadow: 0 0 0 6px rgba(77, 125, 209, 0.2);\r\n }\r\n\r\n \/* Spacer for alignment *\/\r\n .timeline-item .spacer {\r\n width: 5%;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\r\n ======================================== *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .journey {\r\n padding: 60px 0 20px;\r\n border-radius: 16px;\r\n margin: 0 12px;\r\n }\r\n\r\n .timeline-item .content {\r\n width: 42%;\r\n padding: 24px 20px;\r\n }\r\n\r\n .timeline-item .content h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .timeline-item .content p {\r\n font-size: 13px;\r\n }\r\n\r\n .timeline-item .achievement-list li {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .journey {\r\n padding: 50px 0 16px;\r\n border-radius: 12px;\r\n margin: 0 8px;\r\n }\r\n\r\n .journey-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 36px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n \/* Remove vertical line on mobile *\/\r\n .timeline::before {\r\n display: none;\r\n }\r\n\r\n .timeline-item {\r\n flex-direction: column !important;\r\n align-items: center;\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .timeline-item .content {\r\n width: 100%;\r\n padding: 20px 16px;\r\n }\r\n\r\n \/* ===== HIDE DOT WRAPPER ON MOBILE ===== *\/\r\n .timeline-item .dot-wrapper {\r\n display: none !important;\r\n }\r\n\r\n .timeline-item .spacer {\r\n display: none;\r\n }\r\n\r\n .timeline-item .content h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .timeline-item .content p {\r\n font-size: 13px;\r\n }\r\n\r\n .timeline-item .achievement-list li {\r\n text-align: left;\r\n font-size: 13px;\r\n justify-content: flex-start;\r\n }\r\n\r\n .timeline-item .achievement-list li .text-wrapper {\r\n justify-content: flex-start;\r\n }\r\n\r\n .timeline-item .cert-badge {\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n }\r\n\r\n \/* ===== REMOVE BULLETS ON MOBILE ===== *\/\r\n .timeline-item .achievement-list li .bullet {\r\n display: none !important;\r\n }\r\n\r\n .timeline-item .achievement-list li {\r\n padding-left: 0;\r\n gap: 0;\r\n }\r\n\r\n .timeline-item .achievement-list li .text-wrapper {\r\n padding-left: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .journey {\r\n padding: 40px 0 12px;\r\n border-radius: 8px;\r\n margin: 0 4px;\r\n }\r\n\r\n .journey-inner {\r\n padding: 0 12px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 28px;\r\n }\r\n\r\n .section-title {\r\n font-size: 24px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .section-badge {\r\n font-size: 10px;\r\n }\r\n\r\n .timeline-item {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .timeline-item .content {\r\n padding: 16px 14px;\r\n border-radius: 12px;\r\n }\r\n\r\n .timeline-item .content h3 {\r\n font-size: 14px;\r\n }\r\n\r\n .timeline-item .content p {\r\n font-size: 12px;\r\n }\r\n\r\n .timeline-item .year-badge {\r\n font-size: 12px;\r\n padding: 4px 14px;\r\n }\r\n\r\n .timeline-item .achievement-list li {\r\n font-size: 12px;\r\n padding: 6px 0;\r\n }\r\n\r\n .timeline-item .cert-badge {\r\n font-size: 9px;\r\n padding: 2px 6px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n JOURNEY & MILESTONES SECTION\r\n ======================================== -->\r\n <section class=\"journey\">\r\n <div class=\"journey-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Our Journey\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Milestones & Achievements\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Tracing our path of growth, innovation, and global expansion.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== TIMELINE ===== -->\r\n <div class=\"timeline\">\r\n\r\n <!-- 2022 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"content\">\r\n <div class=\"year-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i> 2022\r\n <\/div>\r\n <h3>Asia-Pacific Expansion<\/h3>\r\n <ul class=\"achievement-list\">\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Established Interconnection with Australian Operators<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet cert\">\u25cf<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>ISO 27001 Certification Achieved<\/span>\r\n <span class=\"cert-badge\"><i class=\"fas fa-award\"><\/i> Certified<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"dot-wrapper\">\r\n <div class=\"dot-circle\"><\/div>\r\n <\/div>\r\n <div class=\"spacer\"><\/div>\r\n <\/div>\r\n\r\n <!-- 2023 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"spacer\"><\/div>\r\n <div class=\"dot-wrapper\">\r\n <div class=\"dot-circle\"><\/div>\r\n <\/div>\r\n <div class=\"content\">\r\n <div class=\"year-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i> 2023\r\n <\/div>\r\n <h3>Strategic Partnerships<\/h3>\r\n <ul class=\"achievement-list\">\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Onboarded UK's Prominent Telecom MVNO as Partner<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet cert\">\u25cf<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>PCI DSS Compliance Certified<\/span>\r\n <span class=\"cert-badge\"><i class=\"fas fa-award\"><\/i> Certified<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2024 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"content\">\r\n <div class=\"year-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i> 2024\r\n <\/div>\r\n <h3>European Expansion<\/h3>\r\n <ul class=\"achievement-list\">\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Interconnections reached throughout Europe \u2014 France & Netherlands<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet cert\">\u25cf<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Best Telecom Operator Award \u2014 Europe Region<\/span>\r\n <span class=\"cert-badge\"><i class=\"fas fa-medal\"><\/i> Winner<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"dot-wrapper\">\r\n <div class=\"dot-circle\"><\/div>\r\n <\/div>\r\n <div class=\"spacer\"><\/div>\r\n <\/div>\r\n\r\n <!-- 2025 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"spacer\"><\/div>\r\n <div class=\"dot-wrapper\">\r\n <div class=\"dot-circle\"><\/div>\r\n <\/div>\r\n <div class=\"content\">\r\n <div class=\"year-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i> 2025\r\n <\/div>\r\n <h3>Record Growth<\/h3>\r\n <ul class=\"achievement-list\">\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Completed 25 Million Milestone Voice Traffic per year to Global Destinations<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Expanded Operations to 50+ New Countries<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet cert\">\u25cf<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>TL 9000 Telecom Quality Certification<\/span>\r\n <span class=\"cert-badge\"><i class=\"fas fa-award\"><\/i> Certified<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2026 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"content\">\r\n <div class=\"year-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i> 2026\r\n <\/div>\r\n <h3>Future-Ready Innovation<\/h3>\r\n <ul class=\"achievement-list\">\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Partnership with Airalo for e-SIM Delivery<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Deployment of Own SBC in UK PoP<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet\">\u25c6<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>Launched Cloud-Native Telecom Platform<\/span>\r\n <\/span>\r\n <\/li>\r\n <li>\r\n <span class=\"bullet cert\">\u25cf<\/span>\r\n <span class=\"text-wrapper\">\r\n <span>ISO 22301 Business Continuity Certified<\/span>\r\n <span class=\"cert-badge\"><i class=\"fas fa-award\"><\/i> Certified<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"dot-wrapper\">\r\n <div class=\"dot-circle\"><\/div>\r\n <\/div>\r\n <div class=\"spacer\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29de3a8 e-con-full e-flex e-con e-parent\" data-id=\"29de3a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1442054 elementor-widget elementor-widget-html\" data-id=\"1442054\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy - Corporate Responsibility<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\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 \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n CORPORATE RESPONSIBILITY SECTION\r\n ======================================== *\/\r\n .responsibility {\r\n padding: 80px 0 24px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .responsibility::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: \r\n radial-gradient(ellipse at 80% 20%, rgba(77, 125, 209, 0.03) 0%, transparent 50%),\r\n radial-gradient(ellipse at 20% 80%, rgba(77, 125, 209, 0.03) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n\r\n .responsibility-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIBILITY GRID\r\n ======================================== *\/\r\n .resp-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .resp-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 32px 24px 28px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: default;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .resp-card:nth-child(1) { animation-delay: 0.05s; }\r\n .resp-card:nth-child(2) { animation-delay: 0.10s; }\r\n .resp-card:nth-child(3) { animation-delay: 0.15s; }\r\n .resp-card:nth-child(4) { animation-delay: 0.20s; }\r\n .resp-card:nth-child(5) { animation-delay: 0.25s; }\r\n .resp-card:nth-child(6) { animation-delay: 0.30s; }\r\n\r\n \/* Animated Gradient Border *\/\r\n .resp-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .resp-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .resp-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ===== ICON - ALL SAME COLOR #4D7DD1 ===== *\/\r\n .resp-card .resp-icon {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--badge-color);\r\n }\r\n\r\n \/* Glow Ring *\/\r\n .resp-card .resp-icon::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Glow Shadow *\/\r\n .resp-card .resp-icon::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .resp-card:hover .resp-icon {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .resp-card:hover .resp-icon::before {\r\n opacity: 1;\r\n border-color: var(--badge-color);\r\n transform: scale(1.05);\r\n }\r\n\r\n .resp-card:hover .resp-icon::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .resp-card .resp-icon i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resp-card:hover .resp-icon i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .resp-card h3 {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resp-card:hover h3 {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION ===== *\/\r\n .resp-card p {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .resp-card:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== STATS BADGES ===== *\/\r\n .resp-card .stats-badges {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 6px;\r\n }\r\n\r\n .resp-card .stats-badges .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 4px 12px;\r\n border-radius: 50px;\r\n background: #f8fafc;\r\n border: 1px solid var(--border);\r\n color: var(--dark);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .resp-card .stats-badges .badge i {\r\n font-size: 10px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .resp-card:hover .stats-badges .badge {\r\n background: var(--white);\r\n border-color: var(--badge-color);\r\n }\r\n\r\n \/* ===== SHINE EFFECT ===== *\/\r\n .resp-card .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .resp-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .resp-card .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(77, 125, 209, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .resp-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\r\n ======================================== *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .responsibility {\r\n padding: 60px 0 20px;\r\n }\r\n\r\n .resp-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .responsibility {\r\n padding: 50px 0 16px;\r\n }\r\n\r\n .responsibility-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 36px;\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .resp-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .resp-card {\r\n padding: 24px 16px 20px;\r\n border-radius: 14px;\r\n }\r\n\r\n .resp-card .resp-icon {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .resp-card .resp-icon i {\r\n font-size: 20px;\r\n }\r\n\r\n .resp-card h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .resp-card p {\r\n font-size: 13px;\r\n }\r\n\r\n .resp-card .stats-badges .badge {\r\n font-size: 10px;\r\n padding: 3px 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .responsibility {\r\n padding: 40px 0 12px;\r\n }\r\n\r\n .responsibility-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 28px;\r\n }\r\n\r\n .section-title {\r\n font-size: 24px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .section-badge {\r\n font-size: 10px;\r\n }\r\n\r\n .resp-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .resp-card {\r\n padding: 18px 12px 16px;\r\n border-radius: 12px;\r\n }\r\n\r\n .resp-card .resp-icon {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .resp-card .resp-icon i {\r\n font-size: 16px;\r\n }\r\n\r\n .resp-card h3 {\r\n font-size: 14px;\r\n }\r\n\r\n .resp-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .resp-card .stats-badges .badge {\r\n font-size: 9px;\r\n padding: 2px 8px;\r\n }\r\n\r\n .resp-card .stats-badges {\r\n gap: 5px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .resp-grid {\r\n gap: 10px;\r\n }\r\n\r\n .resp-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .resp-card .resp-icon {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .resp-card .resp-icon i {\r\n font-size: 13px;\r\n }\r\n\r\n .resp-card h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .resp-card p {\r\n font-size: 11px;\r\n }\r\n\r\n .resp-card .stats-badges .badge {\r\n font-size: 8px;\r\n padding: 2px 6px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n CORPORATE RESPONSIBILITY SECTION\r\n ======================================== -->\r\n <section class=\"responsibility\">\r\n <div class=\"responsibility-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Corporate Responsibility\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Building a Sustainable Future\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Our commitment to environmental stewardship, social impact, and ethical governance \r\n across all operations.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== RESPONSIBILITY GRID ===== -->\r\n <div class=\"resp-grid\">\r\n\r\n <!-- 1. Environmental Sustainability -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-leaf\"><\/i>\r\n <\/div>\r\n <h3>Environmental Sustainability<\/h3>\r\n <p>Reducing carbon footprint through green energy initiatives and sustainable operations.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-check-circle\"><\/i> Carbon Neutral by 2028<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-solar-panel\"><\/i> 40% Renewable<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. Social Impact -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-hands-helping\"><\/i>\r\n <\/div>\r\n <h3>Social Impact<\/h3>\r\n <p>Empowering communities through education, digital inclusion, and supporting underserved populations.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-users\"><\/i> 10K+ Lives Impacted<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-graduation-cap\"><\/i> 500+ Scholarships<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3. Diversity & Inclusion -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <h3>Diversity & Inclusion<\/h3>\r\n <p>Fostering an inclusive workplace where diverse perspectives drive innovation and success.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-venus-mars\"><\/i> 45% Women in Leadership<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-globe\"><\/i> 30+ Nationalities<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 4. Ethical Governance -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-gavel\"><\/i>\r\n <\/div>\r\n <h3>Ethical Governance<\/h3>\r\n <p>Upholding the highest standards of transparency, compliance, and ethical business practices.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-shield-alt\"><\/i> ISO 27001 Certified<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-award\"><\/i> Ethics Award 2025<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 5. Digital Responsibility -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-shield-halved\"><\/i>\r\n <\/div>\r\n <h3>Digital Responsibility<\/h3>\r\n <p>Ensuring data privacy, cybersecurity, and responsible AI deployment for all stakeholders.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-lock\"><\/i> GDPR Compliant<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-brain\"><\/i> Ethical AI Framework<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 6. Community Engagement -->\r\n <div class=\"resp-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"resp-icon\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <\/div>\r\n <h3>Community Engagement<\/h3>\r\n <p>Building strong local partnerships and contributing to the communities where we operate.<\/p>\r\n <div class=\"stats-badges\">\r\n <span class=\"badge\"><i class=\"fas fa-hand-holding-heart\"><\/i> 50+ NGO Partners<\/span>\r\n <span class=\"badge\"><i class=\"fas fa-clock\"><\/i> 5K+ Volunteer Hours<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\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>Infinexy – About Us Home About Us Who We Are Infinexy Technologies is a global technology and telecommunications company delivering innovative communication solutions, international voice services, cloud infrastructure, and enterprise technology solutions for businesses worldwide. 5+ Years of Excellence 150+ Countries Served 99.9% Uptime Guaranteed Infinexy – Company Profile About Infinexy Company Profile Infinexy Technologies […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-524","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":107,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/524\/revisions"}],"predecessor-version":[{"id":2155,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/524\/revisions\/2155"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}