Infinexy - Hero Section<\/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: #ffffff;\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 --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n min-height: 70vh;\r\n display: flex;\r\n align-items: center;\r\n background: var(--white);\r\n overflow: hidden;\r\n padding: 30px 0;\r\n }\r\n\r\n .hero-inner {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n\r\n .hero-content {\r\n max-width: 600px;\r\n }\r\n\r\n .hero-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: 14px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n }\r\n\r\n .hero-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 .hero-heading {\r\n font-size: clamp(28px, 3.8vw, 44px);\r\n font-weight: 900;\r\n line-height: 1.1;\r\n color: var(--dark);\r\n margin-bottom: 12px;\r\n animation: fadeInUp 0.8s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-heading .highlight {\r\n color: var(--dark);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .hero-heading:hover .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .hero-subheading {\r\n font-size: clamp(13px, 0.9vw, 16px);\r\n line-height: 1.7;\r\n color: var(--gray);\r\n max-width: 500px;\r\n margin-bottom: 20px;\r\n animation: fadeInUp 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n animation: fadeInUp 0.8s ease 0.3s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n font-size: 13px;\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 white-space: nowrap;\r\n }\r\n\r\n .hero-btn-primary::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 .hero-btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-primary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n }\r\n\r\n .hero-btn-primary i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n color: var(--white);\r\n }\r\n\r\n .hero-btn-primary:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border-radius: 100px;\r\n border: 2px solid var(--border);\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: var(--dark);\r\n background: transparent;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n z-index: 1;\r\n white-space: nowrap;\r\n }\r\n\r\n .hero-btn-secondary::before {\r\n content: '';\r\n position: absolute;\r\n inset: -2px;\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 .hero-btn-secondary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-secondary:hover {\r\n color: var(--white);\r\n border-color: transparent;\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.25);\r\n }\r\n\r\n .hero-btn-secondary i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n color: var(--dark);\r\n }\r\n\r\n .hero-btn-secondary:hover i {\r\n color: var(--white);\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-btn-tertiary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 16px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: var(--gray);\r\n background: transparent;\r\n transition: all 0.4s ease;\r\n border-radius: 100px;\r\n position: relative;\r\n white-space: nowrap;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-btn-tertiary::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 .hero-btn-tertiary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-tertiary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.25);\r\n }\r\n\r\n .hero-btn-tertiary i {\r\n font-size: 12px;\r\n transition: transform 0.3s ease;\r\n color: var(--gray);\r\n }\r\n\r\n .hero-btn-tertiary:hover i {\r\n color: var(--white);\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-trust {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n margin-top: 24px;\r\n padding-top: 18px;\r\n border-top: 1px solid var(--border);\r\n animation: fadeInUp 0.8s ease 0.4s forwards;\r\n opacity: 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .hero-trust .trust-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n color: var(--gray);\r\n }\r\n\r\n .hero-trust .trust-item i {\r\n color: var(--green);\r\n font-size: 14px;\r\n }\r\n\r\n .hero-trust .trust-item strong {\r\n color: var(--dark);\r\n font-weight: 700;\r\n font-size: 14px;\r\n }\r\n\r\n \/* HERO VISUAL *\/\r\n .hero-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n \/* IMAGE WITH OPTIMIZED LOADING *\/\r\n .hero-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 460px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n z-index: 2;\r\n transition: transform 0.8s ease;\r\n background: #e8edf3;\r\n }\r\n\r\n .hero-image-wrapper:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Placeholder - shows instantly *\/\r\n .hero-image-wrapper .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #b8cce0 0%, #d5dce6 100%);\r\n border-radius: 20px;\r\n z-index: 0;\r\n }\r\n\r\n .hero-image-wrapper img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n position: relative;\r\n z-index: 1;\r\n \/* Blur-up effect *\/\r\n filter: blur(20px);\r\n transform: scale(1.05);\r\n transition: filter 0.8s ease-out, transform 0.8s ease-out;\r\n }\r\n\r\n .hero-image-wrapper img.loaded {\r\n filter: blur(0);\r\n transform: scale(1);\r\n }\r\n\r\n .hero-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(142, 36, 170, 0.05), rgba(0, 159, 227, 0.03));\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n \/* RINGS *\/\r\n .ring-outer {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 2px solid rgba(142, 36, 170, 0.06);\r\n pointer-events: none;\r\n z-index: 1;\r\n width: 116%;\r\n height: 116%;\r\n top: -8%;\r\n left: -8%;\r\n animation: spin 25s linear infinite;\r\n }\r\n\r\n .ring-outer::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--purple);\r\n box-shadow: 0 0 20px rgba(142, 36, 170, 0.3);\r\n }\r\n\r\n .ring-inner {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px dashed rgba(0, 159, 227, 0.06);\r\n pointer-events: none;\r\n z-index: 1;\r\n width: 124%;\r\n height: 124%;\r\n top: -12%;\r\n left: -12%;\r\n animation: spinReverse 30s linear infinite;\r\n }\r\n\r\n .ring-inner::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 30%;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--blue);\r\n box-shadow: 0 0 15px rgba(0, 159, 227, 0.3);\r\n }\r\n\r\n .ring-pulse {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(142, 36, 170, 0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 132%;\r\n height: 132%;\r\n top: -16%;\r\n left: -16%;\r\n animation: pulseRing 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes spinReverse {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(-360deg); }\r\n }\r\n\r\n @keyframes pulseRing {\r\n 0%, 100% { transform: scale(1); opacity: 0.3; }\r\n 50% { transform: scale(1.05); opacity: 0.7; }\r\n }\r\n\r\n \/* FLOATING CARDS *\/\r\n .hero-float-card {\r\n position: absolute;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 12px 16px;\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n animation: floatCard 6s ease-in-out infinite;\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n z-index: 3;\r\n }\r\n\r\n .hero-float-card .card-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n color: var(--white);\r\n flex-shrink: 0;\r\n }\r\n\r\n .hero-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n\r\n .hero-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n\r\n .hero-float-card .card-icon.orange {\r\n background: linear-gradient(135deg, var(--orange), #fbbf24);\r\n }\r\n\r\n .hero-float-card .card-text {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n\r\n .hero-float-card .card-text small {\r\n display: block;\r\n font-weight: 400;\r\n font-size: 10px;\r\n color: var(--gray-light);\r\n }\r\n\r\n .hero-float-card.card-1 {\r\n top: -12px;\r\n right: -16px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .hero-float-card.card-2 {\r\n bottom: 16px;\r\n left: -24px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .hero-float-card.card-3 {\r\n bottom: -12px;\r\n right: -8px;\r\n animation-delay: 4s;\r\n }\r\n\r\n @keyframes floatCard {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\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 \/* RESPONSIVE *\/\r\n @media (min-width: 1400px) {\r\n .hero { padding: 30px 0; min-height: 65vh; }\r\n .hero-inner { gap: 50px; }\r\n .hero-image-wrapper { max-width: 500px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .hero { padding: 30px 0; min-height: 60vh; }\r\n .hero-inner { gap: 30px; }\r\n .hero-heading { font-size: clamp(28px, 3.5vw, 38px); }\r\n .hero-image-wrapper { max-width: 400px; }\r\n .hero-float-card.card-1 { top: -10px; right: -10px; }\r\n .hero-float-card.card-2 { bottom: 12px; left: -16px; }\r\n .hero-float-card.card-3 { bottom: -10px; right: -5px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .hero { padding: 35px 0; min-height: auto; }\r\n .hero-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }\r\n .hero-content { max-width: 100%; margin: 0 auto; }\r\n .hero-subheading { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .hero-buttons { justify-content: center; }\r\n .hero-trust { justify-content: center; }\r\n .hero-image-wrapper { max-width: 380px; margin: 0 auto; }\r\n .hero-float-card.card-1 { top: -10px; right: 0px; }\r\n .hero-float-card.card-2 { bottom: 8px; left: -8px; }\r\n .hero-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .hero { padding: 30px 0; }\r\n .hero-inner { padding: 0 20px; gap: 25px; }\r\n .hero-heading { font-size: clamp(24px, 5vw, 30px); }\r\n .hero-subheading { font-size: 14px; }\r\n .hero-buttons { justify-content: center; gap: 8px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 8px 16px; font-size: 12px; }\r\n .hero-btn-tertiary { padding: 8px 12px; font-size: 12px; }\r\n .hero-trust { justify-content: center; gap: 16px; padding-top: 14px; margin-top: 20px; }\r\n .hero-trust .trust-item { font-size: 11px; }\r\n .hero-trust .trust-item strong { font-size: 13px; }\r\n .hero-image-wrapper { max-width: 320px; }\r\n .hero-float-card { padding: 8px 12px; gap: 8px; }\r\n .hero-float-card .card-icon { width: 30px; height: 30px; font-size: 14px; }\r\n .hero-float-card .card-text { font-size: 11px; }\r\n .hero-float-card .card-text small { font-size: 9px; }\r\n .hero-float-card.card-1 { top: -5px; right: -5px; }\r\n .hero-float-card.card-2 { bottom: 4px; left: -12px; }\r\n .hero-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero { padding: 24px 0; }\r\n .hero-inner { padding: 0 16px; gap: 20px; }\r\n .hero-heading { font-size: clamp(20px, 6vw, 24px); }\r\n .hero-badge { font-size: 10px; margin-bottom: 10px; }\r\n .hero-subheading { font-size: 13px; margin-bottom: 16px; }\r\n .hero-buttons { gap: 6px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 6px 12px; font-size: 11px; gap: 6px; }\r\n .hero-btn-primary i, .hero-btn-secondary i { font-size: 11px; }\r\n .hero-btn-tertiary { padding: 6px 10px; font-size: 11px; }\r\n .hero-btn-tertiary i { font-size: 10px; }\r\n .hero-trust { gap: 12px; padding-top: 10px; margin-top: 16px; }\r\n .hero-trust .trust-item { font-size: 10px; gap: 4px; }\r\n .hero-trust .trust-item i { font-size: 12px; }\r\n .hero-trust .trust-item strong { font-size: 11px; }\r\n .hero-image-wrapper { max-width: 260px; }\r\n .hero-float-card.card-1 { top: -4px; right: -8px; padding: 6px 10px; }\r\n .hero-float-card.card-2 { bottom: 0; left: -8px; padding: 6px 10px; }\r\n .hero-float-card .card-icon { width: 24px; height: 24px; font-size: 11px; }\r\n .hero-float-card .card-text { font-size: 10px; }\r\n .hero-float-card .card-text small { font-size: 8px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .hero { padding: 18px 0; }\r\n .hero-heading { font-size: 20px; }\r\n .hero-subheading { font-size: 12px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 5px 10px; font-size: 10px; }\r\n .hero-btn-tertiary { padding: 5px 8px; font-size: 10px; }\r\n .hero-trust { gap: 8px; }\r\n .hero-trust .trust-item { font-size: 9px; }\r\n .hero-trust .trust-item strong { font-size: 10px; }\r\n .hero-image-wrapper { max-width: 220px; }\r\n .hero-float-card.card-1, .hero-float-card.card-2 { padding: 4px 8px; gap: 4px; }\r\n .hero-float-card .card-icon { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }\r\n .hero-float-card .card-text { font-size: 8px; }\r\n .hero-float-card .card-text small { font-size: 7px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-inner\">\r\n\r\n <div class=\"hero-content\">\r\n \r\n \r\n \r\n \r\n\r\n <h1 class=\"hero-heading\">\r\n Connecting the World with <span class=\"highlight\">Intelligent Telecom Solutions<\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-subheading\">\r\n Global Voice, Cloud Communications, Network Infrastructure, \r\n and Digital Transformation Services.\r\n <\/p>\r\n\r\n <div class=\"hero-buttons\">\r\n <a href=\"#\" class=\"hero-btn-primary\">\r\n <span>Request a Quote<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"hero-btn-secondary\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <span>Contact Sales<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"hero-btn-tertiary\">\r\n <span>Explore Solutions<\/span>\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-trust\">\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>99.9%<\/strong> Uptime\r\n <\/span>\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>150+<\/strong> Countries\r\n <\/span>\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>24\/7<\/strong> Support\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"hero-visual-wrapper\">\r\n\r\n <div class=\"ring-pulse\"><\/div>\r\n <div class=\"ring-outer\"><\/div>\r\n <div class=\"ring-inner\"><\/div>\r\n\r\n <div class=\"hero-image-wrapper\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/1st-Section-scaled.webp\" \r\n alt=\"UK Telecom Network Infrastructure\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n \/>\r\n <div class=\"hero-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Global Voice\r\n <small>HD Quality<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-cloud\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Cloud Comms\r\n <small>Secure & Scalable<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-3\">\r\n <div class=\"card-icon orange\">\r\n <i class=\"fas fa-network-wired\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n UK Infrastructure\r\n <small>Nationwide Coverage<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const img = document.querySelector('.hero-image-wrapper img');\r\n if (img && img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n <\/script>\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-17c541f e-con-full e-flex e-con e-parent\" data-id=\"17c541f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12e4626 elementor-widget elementor-widget-html\" data-id=\"12e4626\" 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 - About Section<\/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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n body, .about, .about-content, .about-badge, .about-heading, .about-sub-heading,\r\n .about-description, .about-stats, .stat, .about-btn-primary, .about-float-card,\r\n .card-text, .about-visual, .about-ring, h1, h2, h3, p, a, span, li,\r\n .about-decoration, .about-image, .about-image-overlay {\r\n font-family: 'Inter', sans-serif !important;\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 --dark-light: #15273f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n }\r\n\r\n .about {\r\n padding: 100px 0 40px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .about-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 display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* LEFT VISUAL *\/\r\n .about-visual {\r\n animation: fadeInLeft 0.8s ease 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 @keyframes fadeInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n .about-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n \/* IMAGE WITH BLUR-UP *\/\r\n .about-image {\r\n width: 100%;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n position: relative;\r\n background: #e8edf3;\r\n }\r\n\r\n .about-image .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #b8cce0 0%, #d5dce6 100%);\r\n border-radius: 20px;\r\n z-index: 0;\r\n }\r\n\r\n .about-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n position: relative;\r\n z-index: 1;\r\n transition: transform 0.8s ease, filter 0.8s ease-out;\r\n filter: blur(20px);\r\n transform: scale(1.05);\r\n }\r\n\r\n .about-image img.loaded {\r\n filter: blur(0);\r\n transform: scale(1);\r\n }\r\n\r\n .about-image:hover img {\r\n transform: scale(1.02);\r\n }\r\n\r\n .about-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(142, 36, 170, 0.05), rgba(0, 159, 227, 0.03));\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n \/* RINGS *\/\r\n .about-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 2px solid rgba(142, 36, 170, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .about-ring.r1 {\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 25s linear infinite;\r\n }\r\n\r\n .about-ring.r1::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--purple);\r\n box-shadow: 0 0 20px rgba(142, 36, 170, 0.3);\r\n }\r\n\r\n .about-ring.r2 {\r\n width: 130%;\r\n height: 130%;\r\n top: -15%;\r\n left: -15%;\r\n border: 1.5px dashed rgba(0, 159, 227, 0.06);\r\n animation: spinReverse 30s linear infinite;\r\n }\r\n\r\n .about-ring.r2::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 30%;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--blue);\r\n box-shadow: 0 0 15px rgba(0, 159, 227, 0.3);\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes spinReverse {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(-360deg); }\r\n }\r\n\r\n \/* FLOATING CARDS *\/\r\n .about-float-card {\r\n position: absolute;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 14px 18px;\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n animation: floatCard 6s ease-in-out infinite;\r\n z-index: 3;\r\n }\r\n\r\n .about-float-card .card-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 18px;\r\n color: var(--white);\r\n flex-shrink: 0;\r\n }\r\n\r\n .about-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n\r\n .about-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n\r\n .about-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .about-float-card .card-text {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n\r\n .about-float-card .card-text small {\r\n display: block;\r\n font-weight: 400;\r\n font-size: 11px;\r\n color: var(--gray-light);\r\n }\r\n\r\n .about-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .about-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .about-float-card.card-3 {\r\n bottom: -15px;\r\n right: -10px;\r\n animation-delay: 4s;\r\n }\r\n\r\n @keyframes floatCard {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-12px); }\r\n }\r\n\r\n \/* RIGHT CONTENT *\/\r\n .about-content {\r\n animation: fadeInRight 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes fadeInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n .about-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: 24px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .about-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 .about-heading {\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: 6px;\r\n }\r\n\r\n .about-heading .highlight {\r\n color: #864ABA;\r\n }\r\n\r\n .about-sub-heading {\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .about-description {\r\n font-size: 16px;\r\n line-height: 1.9;\r\n color: var(--gray);\r\n margin-bottom: 24px;\r\n max-width: 540px;\r\n }\r\n\r\n .about-description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n .about-stats {\r\n display: flex;\r\n gap: 40px;\r\n margin-bottom: 32px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .about-stats .stat {\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .about-stats .stat:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .about-stats .stat .number {\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.2;\r\n }\r\n\r\n .about-stats .stat .number .highlight {\r\n color: #864ABA;\r\n }\r\n\r\n .about-stats .stat .label {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n font-weight: 500;\r\n }\r\n\r\n .about-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 14px;\r\n }\r\n\r\n .about-btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 32px;\r\n font-size: 14px;\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 .about-btn-primary::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 .about-btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .about-btn-primary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n }\r\n\r\n .about-btn-primary i {\r\n font-size: 14px;\r\n transition: transform 0.3s ease;\r\n color: var(--white);\r\n }\r\n\r\n .about-btn-primary:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n .about-btn-primary span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1199px) {\r\n .about-inner { gap: 40px; }\r\n .about-heading { font-size: clamp(30px, 3.5vw, 38px); }\r\n .about-float-card.card-1 { top: -10px; right: -10px; }\r\n .about-float-card.card-2 { bottom: 15px; left: -20px; }\r\n .about-float-card.card-3 { bottom: -10px; right: -5px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .about { padding: 70px 0; }\r\n .about-inner {\r\n grid-template-columns: 1fr;\r\n gap: 50px;\r\n text-align: center;\r\n }\r\n .about-content { order: 1; max-width: 100%; margin: 0 auto; }\r\n .about-visual { order: 2; }\r\n .about-description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .about-stats { justify-content: center; }\r\n .about-buttons { justify-content: center; }\r\n .about-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .about-float-card.card-1 { top: -10px; right: 0px; }\r\n .about-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .about-float-card.card-3 { bottom: -10px; right: 0px; }\r\n .about-ring.r1 { width: 115%; height: 115%; top: -7.5%; left: -7.5%; }\r\n .about-ring.r2 { width: 125%; height: 125%; top: -12.5%; left: -12.5%; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .about { padding: 50px 0; }\r\n .about-inner { padding: 0 20px; gap: 40px; }\r\n .about-heading { font-size: clamp(28px, 6vw, 32px); }\r\n .about-sub-heading { font-size: 16px; }\r\n .about-description { font-size: 15px; }\r\n .about-stats { gap: 24px; }\r\n .about-stats .stat .number { font-size: 24px; }\r\n .about-stats .stat .label { font-size: 12px; }\r\n .about-btn-primary { padding: 10px 24px; font-size: 13px; }\r\n .about-visual-wrapper { max-width: 360px; }\r\n .about-float-card { padding: 10px 14px; gap: 10px; }\r\n .about-float-card .card-icon { width: 34px; height: 34px; font-size: 15px; }\r\n .about-float-card .card-text { font-size: 12px; }\r\n .about-float-card .card-text small { font-size: 10px; }\r\n .about-float-card.card-1 { top: -5px; right: -5px; }\r\n .about-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .about-float-card.card-3 { display: none; }\r\n .about-ring.r1 { width: 110%; height: 110%; top: -5%; left: -5%; }\r\n .about-ring.r2 { width: 120%; height: 120%; top: -10%; left: -10%; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .about { padding: 40px 0; }\r\n .about-inner { padding: 0 16px; gap: 30px; }\r\n .about-heading { font-size: 24px; }\r\n .about-sub-heading { font-size: 14px; }\r\n .about-description { font-size: 14px; }\r\n .about-stats { gap: 16px; }\r\n .about-stats .stat .number { font-size: 20px; }\r\n .about-stats .stat .label { font-size: 11px; }\r\n .about-btn-primary { padding: 8px 20px; font-size: 12px; gap: 8px; }\r\n .about-visual-wrapper { max-width: 280px; }\r\n .about-float-card.card-1 { top: -5px; right: -10px; padding: 8px 12px; }\r\n .about-float-card.card-2 { bottom: 0; left: -10px; padding: 8px 12px; }\r\n .about-float-card .card-icon { width: 28px; height: 28px; font-size: 12px; }\r\n .about-float-card .card-text { font-size: 10px; }\r\n .about-float-card .card-text small { font-size: 9px; }\r\n .about-ring.r1 { width: 108%; height: 108%; top: -4%; left: -4%; }\r\n .about-ring.r2 { width: 116%; height: 116%; top: -8%; left: -8%; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .about-heading { font-size: 22px; }\r\n .about-stats { gap: 12px; }\r\n .about-stats .stat .number { font-size: 18px; }\r\n .about-visual-wrapper { max-width: 240px; }\r\n .about-float-card.card-1,\r\n .about-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .about-float-card .card-icon {\r\n width: 24px;\r\n height: 24px;\r\n font-size: 10px;\r\n border-radius: 8px;\r\n }\r\n .about-float-card .card-text { font-size: 9px; }\r\n .about-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"about\">\r\n <div class=\"about-inner\">\r\n\r\n <div class=\"about-visual\">\r\n <div class=\"about-visual-wrapper\">\r\n\r\n <div class=\"about-ring r1\"><\/div>\r\n <div class=\"about-ring r2\"><\/div>\r\n\r\n <div class=\"about-image\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/2nd-section-scaled.webp\" \r\n alt=\"Infinexy Global Technology\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n \/>\r\n <div class=\"about-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Global Reach\r\n <small>150+ Countries<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-cloud\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Cloud Solutions\r\n <small>Enterprise Ready<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Secure Network\r\n <small>99.9% Uptime<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-content\">\r\n\r\n <div class=\"about-badge\">\r\n <span class=\"dot\"><\/span>\r\n About Infinexy\r\n <\/div>\r\n\r\n <h2 class=\"about-heading\">\r\n Who We Are\r\n <\/h2>\r\n <p class=\"about-sub-heading\">Global Technology & Telecommunications Leader<\/p>\r\n\r\n <p class=\"about-description\">\r\n <strong>Infinexy Technologies<\/strong> is a global technology and telecommunications \r\n company delivering innovative communication solutions, international voice services, \r\n cloud infrastructure, and enterprise technology solutions for businesses worldwide.\r\n <\/p>\r\n\r\n <div class=\"about-stats\">\r\n <div class=\"stat\">\r\n <span class=\"number\"><span class=\"highlight\">10+<\/span><\/span>\r\n <span class=\"label\">Years of Excellence<\/span>\r\n <\/div>\r\n <div class=\"stat\">\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\">\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\r\n <div class=\"about-buttons\">\r\n <a href=\"#\" class=\"about-btn-primary\">\r\n <span>Know More<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const img = document.querySelector('.about-image img');\r\n if (img && img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n <\/script>\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-1f4316d e-con-full e-flex e-con e-parent\" data-id=\"1f4316d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d1e3c9 elementor-widget elementor-widget-html\" data-id=\"2d1e3c9\" 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 \u00b7 Why Choose 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 \/* ===== 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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .why-section, .why-inner, .why-header, .why-badge,\r\n .why-title, .why-subtitle, .why-grid, .why-card,\r\n .why-card-title, .why-card-desc, .why-icon-wrapper,\r\n .shine, .glow-overlay, .data-flow, .why-particles,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n WHY CHOOSE US SECTION\r\n ======================================== *\/\r\n .why-section {\r\n padding: 50px 0 50px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .why-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 .why-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .why-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 .why-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 .why-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .why-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 .why-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .why-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n GRID \u2013 4 columns\r\n ======================================== *\/\r\n .why-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n CARD \u2013 same style as services\r\n ======================================== *\/\r\n .why-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 .why-card:nth-child(1) { animation-delay: 0.05s; }\r\n .why-card:nth-child(2) { animation-delay: 0.10s; }\r\n .why-card:nth-child(3) { animation-delay: 0.15s; }\r\n .why-card:nth-child(4) { animation-delay: 0.20s; }\r\n .why-card:nth-child(5) { animation-delay: 0.25s; }\r\n .why-card:nth-child(6) { animation-delay: 0.30s; }\r\n .why-card:nth-child(7) { animation-delay: 0.35s; }\r\n .why-card:nth-child(8) { animation-delay: 0.40s; }\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 .why-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 .why-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .why-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 \/* Data flow line *\/\r\n .why-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .why-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON \u2013 #4D7DD1 background ===== *\/\r\n .why-card .why-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n .why-card .why-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 .why-card .why-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 .why-card:hover .why-icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .why-card:hover .why-icon-wrapper::before {\r\n opacity: 1;\r\n border-color: currentColor;\r\n transform: scale(1.05);\r\n }\r\n\r\n .why-card:hover .why-icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .why-card .why-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 .why-card:hover .why-icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .why-card .why-card-title {\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 .why-card:hover .why-card-title {\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 .why-card .why-card-desc {\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 .why-card:hover .why-card-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .why-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 .why-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .why-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 .why-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n @media (max-width: 1199px) {\r\n .why-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .why-section {\r\n padding: 70px 0;\r\n }\r\n .why-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .why-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .why-section {\r\n padding: 50px 0;\r\n }\r\n .why-inner {\r\n padding: 0 20px;\r\n }\r\n .why-header {\r\n margin-bottom: 36px;\r\n }\r\n .why-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .why-subtitle {\r\n font-size: 15px;\r\n }\r\n .why-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .why-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .why-card .why-card-title {\r\n font-size: 15px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .why-section {\r\n padding: 40px 0;\r\n }\r\n .why-inner {\r\n padding: 0 16px;\r\n }\r\n .why-header {\r\n margin-bottom: 28px;\r\n }\r\n .why-title {\r\n font-size: 24px;\r\n }\r\n .why-subtitle {\r\n font-size: 14px;\r\n }\r\n .why-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .why-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .why-card .why-icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .why-card .why-card-title {\r\n font-size: 13px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .why-grid {\r\n gap: 10px;\r\n }\r\n .why-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .why-card .why-card-title {\r\n font-size: 12px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"why-section\">\r\n <div class=\"why-inner\">\r\n\r\n <div class=\"why-header\">\r\n <div class=\"why-badge\">\r\n <span class=\"dot\"><\/span> Why Infinexy\r\n <\/div>\r\n <h2 class=\"why-title\">\r\n Why <span class=\"highlight\">Choose Us<\/span>\r\n <\/h2>\r\n <p class=\"why-subtitle\">\r\n We combine global reach, premium infrastructure, and dedicated support \r\n to deliver unmatched telecom services.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"why-grid\">\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Global Carrier Network<\/h3>\r\n <p class=\"why-card-desc\">Direct interconnections with top-tier carriers worldwide for seamless routing.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-headset\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Premium Voice Quality<\/h3>\r\n <p class=\"why-card-desc\">HD voice, low jitter, and minimal latency for crystal-clear calls every time.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-clock\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">24\u00d77 Technical Support<\/h3>\r\n <p class=\"why-card-desc\">Round-the-clock expert assistance to keep your operations running smoothly.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-tag\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Competitive Pricing<\/h3>\r\n <p class=\"why-card-desc\">Cost-effective rates without compromising on quality or reliability.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Reliable Infrastructure<\/h3>\r\n <p class=\"why-card-desc\">Carrier-grade network with redundant paths and failover protection.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Secure Network<\/h3>\r\n <p class=\"why-card-desc\">Enterprise-grade encryption, DDoS protection, and rigorous security protocols.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">High Availability<\/h3>\r\n <p class=\"why-card-desc\">99.99% uptime SLA with auto-failover and disaster recovery planning.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Fast Deployment<\/h3>\r\n <p class=\"why-card-desc\">Rapid provisioning and integration, so you can go live in record time.<\/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-eea9958 e-con-full e-flex e-con e-parent\" data-id=\"eea9958\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6f14ec elementor-widget elementor-widget-html\" data-id=\"b6f14ec\" 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 \u00b7 Technology Partners<\/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 !important;\r\n background: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n body, .partners-section, .partners-inner, .partners-header,\r\n .partners-badge, .partners-title, .partners-subtitle,\r\n .category-tabs, .tab-btn, .partners-grid, .partner-item,\r\n .partner-logo-wrapper, h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n :root {\r\n --blue: #009FE3;\r\n --blue-dark: #0077B6;\r\n --blue-light: #38bdf8;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #009FE3;\r\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .partners-section {\r\n padding: 40px 0 50px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .partners-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 .partners-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .partners-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n margin-bottom: 14px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .partners-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 .partners-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 .partners-title .highlight {\r\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .partners-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n .category-tabs {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .tab-btn {\r\n padding: 12px 32px;\r\n border-radius: 100px;\r\n border: none;\r\n background: var(--dark);\r\n color: var(--white);\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n font-family: 'Inter', sans-serif !important;\r\n letter-spacing: 0.3px;\r\n position: relative;\r\n overflow: hidden;\r\n z-index: 1;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .tab-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(--blue), var(--blue-dark));\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 .tab-btn:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .tab-btn:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(0, 159, 227, 0.35);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tab-btn i {\r\n font-size: 14px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn .count {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 20px;\r\n padding: 0 10px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n margin-left: 4px;\r\n line-height: 20px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn.active {\r\n background: var(--dark);\r\n border-color: var(--dark);\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(10, 26, 47, 0.15);\r\n }\r\n\r\n .tab-btn.active::before {\r\n transform: translateX(0);\r\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\r\n }\r\n\r\n .tab-btn.active:hover {\r\n box-shadow: 0 8px 35px rgba(0, 159, 227, 0.35);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tab-btn.active .count {\r\n background: rgba(255,255,255,0.20);\r\n }\r\n\r\n .partners-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 28px;\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n\r\n .partners-grid.switching {\r\n opacity: 0;\r\n transform: scale(0.96);\r\n }\r\n\r\n .partner-item {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 28px 16px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n text-align: center;\r\n cursor: default;\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n animation: fadeScale 0.7s ease forwards;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 140px;\r\n }\r\n\r\n .partner-item:nth-child(1) { animation-delay: 0.04s; }\r\n .partner-item:nth-child(2) { animation-delay: 0.08s; }\r\n .partner-item:nth-child(3) { animation-delay: 0.12s; }\r\n .partner-item:nth-child(4) { animation-delay: 0.16s; }\r\n .partner-item:nth-child(5) { animation-delay: 0.20s; }\r\n .partner-item:nth-child(6) { animation-delay: 0.24s; }\r\n .partner-item:nth-child(7) { animation-delay: 0.28s; }\r\n .partner-item:nth-child(8) { animation-delay: 0.32s; }\r\n\r\n @keyframes fadeScale {\r\n from { opacity: 0; transform: scale(0.92) translateY(20px); }\r\n to { opacity: 1; transform: scale(1) translateY(0); }\r\n }\r\n\r\n .partner-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(--blue), var(--blue-dark), 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 .partner-item:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .partner-item:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n .partner-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.05) 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 .partner-item:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== LOGO WRAPPER - PNG TRANSPARENT BACKGROUND ===== *\/\r\n .partner-logo-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: 8px;\r\n position: relative;\r\n z-index: 1;\r\n min-height: 80px;\r\n background: transparent;\r\n border-radius: 10px;\r\n }\r\n\r\n \/* Very subtle placeholder - barely visible for PNG *\/\r\n .partner-logo-wrapper .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0, 159, 227, 0.03);\r\n border-radius: 10px;\r\n z-index: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .partner-logo-wrapper img {\r\n max-width: 100%;\r\n max-height: 80px;\r\n width: auto;\r\n height: auto;\r\n object-fit: contain;\r\n filter: blur(6px) brightness(0.98);\r\n transform: scale(1.03);\r\n transition: all 0.6s ease-out;\r\n display: block;\r\n position: relative;\r\n z-index: 1;\r\n opacity: 0.6;\r\n background: transparent;\r\n }\r\n\r\n .partner-logo-wrapper img.loaded {\r\n filter: blur(0) brightness(1);\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n .partner-item:hover .partner-logo-wrapper img {\r\n transform: scale(1.06);\r\n filter: blur(0) brightness(1) drop-shadow(0 4px 12px rgba(0,0,0,0.04));\r\n }\r\n\r\n \/* When image loads, hide placeholder *\/\r\n .partner-logo-wrapper img.loaded + .placeholder {\r\n opacity: 0;\r\n }\r\n\r\n .empty-state {\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: var(--gray-light);\r\n font-size: 16px;\r\n background: var(--light-bg);\r\n border-radius: 16px;\r\n border: 1px dashed var(--border);\r\n }\r\n\r\n .empty-state i {\r\n font-size: 36px;\r\n color: var(--border);\r\n margin-bottom: 12px;\r\n display: block;\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (min-width: 1200px) {\r\n .partners-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }\r\n .partner-item { min-height: 160px; padding: 32px 20px; }\r\n .partner-logo-wrapper img { max-height: 90px; }\r\n .partner-logo-wrapper { min-height: 90px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n .partner-item { min-height: 140px; padding: 24px 16px; }\r\n .partner-logo-wrapper img { max-height: 70px; }\r\n .partner-logo-wrapper { min-height: 70px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .partners-section { padding: 70px 0; }\r\n .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }\r\n .partners-title { font-size: clamp(30px, 4vw, 38px); }\r\n .tab-btn { padding: 10px 26px; font-size: 13px; }\r\n .partner-item { min-height: 130px; padding: 20px 14px; }\r\n .partner-logo-wrapper img { max-height: 60px; }\r\n .partner-logo-wrapper { min-height: 60px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .partners-section { padding: 56px 0 48px; }\r\n .partners-inner { padding: 0 20px; }\r\n .partners-header { margin-bottom: 32px; }\r\n .partners-title { font-size: clamp(28px, 6vw, 32px); }\r\n .partners-subtitle { font-size: 15px; }\r\n .category-tabs { gap: 10px; margin-bottom: 32px; }\r\n .tab-btn { padding: 8px 20px; font-size: 12px; gap: 6px; }\r\n .tab-btn i { font-size: 12px; }\r\n .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\r\n .partner-item { min-height: 110px; padding: 16px 12px; border-radius: 14px; }\r\n .partner-logo-wrapper img { max-height: 50px; }\r\n .partner-logo-wrapper { min-height: 50px; }\r\n }\r\n\r\n @media (max-width: 575px) {\r\n .partners-section { padding: 44px 0 36px; }\r\n .partners-inner { padding: 0 16px; }\r\n .partners-header { margin-bottom: 24px; }\r\n .partners-title { font-size: 24px; }\r\n .partners-subtitle { font-size: 14px; }\r\n .category-tabs { gap: 8px; margin-bottom: 24px; }\r\n .tab-btn { padding: 6px 16px; font-size: 11px; gap: 4px; }\r\n .tab-btn i { font-size: 10px; }\r\n .tab-btn .count { font-size: 10px; padding: 0 7px; line-height: 18px; }\r\n .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\r\n .partner-item { min-height: 90px; padding: 12px 10px; border-radius: 12px; }\r\n .partner-logo-wrapper img { max-height: 40px; }\r\n .partner-logo-wrapper { min-height: 40px; }\r\n }\r\n\r\n @media (max-width: 374px) {\r\n .partners-grid { gap: 10px; }\r\n .partner-item { min-height: 75px; padding: 10px 8px; border-radius: 10px; }\r\n .partner-logo-wrapper img { max-height: 34px; }\r\n .partner-logo-wrapper { min-height: 34px; }\r\n .tab-btn { padding: 4px 12px; font-size: 10px; gap: 3px; }\r\n .tab-btn i { font-size: 9px; }\r\n .tab-btn .count { font-size: 8px; padding: 0 5px; line-height: 14px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"partners-section\">\r\n <div class=\"partners-inner\">\r\n\r\n <div class=\"partners-header\">\r\n <div class=\"partners-badge\">\r\n <span class=\"dot\"><\/span> Our Ecosystem\r\n <\/div>\r\n <h2 class=\"partners-title\">\r\n Trusted Partners\r\n <\/h2>\r\n <p class=\"partners-subtitle\">\r\n We collaborate with world-class telecom operators, technology leaders, and cloud providers to deliver excellence.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"category-tabs\">\r\n <button class=\"tab-btn active\" data-category=\"technology\">\r\n <i class=\"fas fa-microchip\"><\/i> <span>Technology Partners<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"cloud\">\r\n <i class=\"fas fa-cloud\"><\/i> <span>Cloud & Data Center<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"telecom\">\r\n <i class=\"fas fa-satellite-dish\"><\/i> <span>Telecom Operators<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"career\">\r\n <i class=\"fas fa-briefcase\"><\/i> <span>Carrier Partner<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"partnersGridContainer\" class=\"partners-grid\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n const partnersData = {\r\n technology: [\r\n { name: 'Tech Partner 1', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/32ad30cf-0366-4a6b-91f5-b5ea0a0b3e7a-1-1.jpg' },\r\n { name: 'Tech Partner 2', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/32ad30cf-0366-4a6b-91f5-b5ea0a0b3e7a-1-2.jpg' },\r\n { name: 'Tech Partner 3', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/bigrock.png' },\r\n { name: 'Tech Partner 4', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/imgi_1_opensips.png' }\r\n ],\r\n telecom: [\r\n { name: 'Airtel', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/airtel.png' },\r\n { name: 'Aussie Broadband', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/aussie-brodbrand.png' },\r\n { name: 'Giacom', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/giacom.png' },\r\n { name: 'IDT', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/idt.jpg' }\r\n ],\r\n cloud: [\r\n { name: 'AWS', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/aws.png' },\r\n { name: 'Ionos Cloud', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/ionos-cloud.png' },\r\n { name: 'GCP', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/imgi_1_gcp.png' },\r\n { name: 'Database Mart', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/databasemart-logo.png' }\r\n ],\r\n career: [\r\n { name: 'Career Partner 1', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/cropped-Carrier2-smaller-1.png' },\r\n { name: 'Career Partner 2', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/06afe99c-f67f-4839-9670-2798669b4fff.png' },\r\n { name: 'Maniphone', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/maniphone.webp' },\r\n { name: 'Career Partner 4', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/12524989-0384-4aeb-a5d5-21104bc41b2b.png' }\r\n ]\r\n };\r\n\r\n const container = document.getElementById('partnersGridContainer');\r\n const tabs = document.querySelectorAll('.tab-btn');\r\n\r\n function renderPartners(category) {\r\n const partners = partnersData[category] || [];\r\n\r\n if (partners.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"empty-state\">\r\n <i class=\"fas fa-building\"><\/i>\r\n No partners found in this category.\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n let html = '';\r\n partners.forEach((partner, index) => {\r\n html += `\r\n <div class=\"partner-item\" style=\"animation-delay: ${0.04 + (index * 0.04)}s\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"partner-logo-wrapper\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"${partner.logo}\" \r\n alt=\"${partner.name} logo\" \r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n onerror=\"this.style.display='none'\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n container.innerHTML = html;\r\n }\r\n\r\n function switchTab(category) {\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n if (tab.dataset.category === category) {\r\n tab.classList.add('active');\r\n }\r\n });\r\n\r\n container.classList.add('switching');\r\n\r\n setTimeout(() => {\r\n renderPartners(category);\r\n container.classList.remove('switching');\r\n }, 300);\r\n }\r\n\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function(e) {\r\n const category = this.dataset.category;\r\n if (!category) return;\r\n if (!this.classList.contains('active')) {\r\n switchTab(category);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const images = document.querySelectorAll('.partner-logo-wrapper img');\r\n images.forEach(img => {\r\n if (img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Initial render - technology tab\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n if (tab.dataset.category === 'technology') {\r\n tab.classList.add('active');\r\n }\r\n });\r\n renderPartners('technology');\r\n\r\n })();\r\n <\/script>\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-a01ed94 e-con-full e-flex e-con e-parent\" data-id=\"a01ed94\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acd72dd elementor-widget elementor-widget-html\" data-id=\"acd72dd\" 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 - Services 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: #F8F9FB;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .services, .services-inner, .services-header, .services-badge,\r\n .services-title, .services-subtitle, .services-grid, .service-card,\r\n .service-title, .service-desc, .icon-wrapper, .shine, .glow-overlay,\r\n .data-flow, .services-particles, .demo-spacer,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n SERVICES SECTION\r\n ======================================== *\/\r\n .services {\r\n padding: 50px 0;\r\n background: #F8F9FB;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .services::before {\r\n display: none;\r\n }\r\n\r\n .services-particles {\r\n display: none;\r\n }\r\n\r\n .services-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 .services-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .services-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 .services-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 .services-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .services-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 .services-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .services-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n SERVICES GRID\r\n ======================================== *\/\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n SERVICE CARD\r\n ======================================== *\/\r\n .service-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 .service-card:nth-child(1) { animation-delay: 0.05s; }\r\n .service-card:nth-child(2) { animation-delay: 0.10s; }\r\n .service-card:nth-child(3) { animation-delay: 0.15s; }\r\n .service-card:nth-child(4) { animation-delay: 0.20s; }\r\n .service-card:nth-child(5) { animation-delay: 0.25s; }\r\n .service-card:nth-child(6) { animation-delay: 0.30s; }\r\n .service-card:nth-child(7) { animation-delay: 0.35s; }\r\n .service-card:nth-child(8) { animation-delay: 0.40s; }\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 .service-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 .service-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .service-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 \/* ===== DATA FLOW ===== *\/\r\n .service-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .service-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON - #4D7DD1 BACKGROUND ===== *\/\r\n .service-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n .service-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 .service-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 .service-card:hover .icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .service-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 .service-card:hover .icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .service-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 .service-card:hover .icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .service-card .service-title {\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 .service-card:hover .service-title {\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 .service-card .service-desc {\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 .service-card:hover .service-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .service-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 .service-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .service-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 .service-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .services-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .services {\r\n padding: 60px 0;\r\n }\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .services-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .services {\r\n padding: 50px 0;\r\n }\r\n .services-inner {\r\n padding: 0 20px;\r\n }\r\n .services-header {\r\n margin-bottom: 36px;\r\n }\r\n .services-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .services-subtitle {\r\n font-size: 15px;\r\n }\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .service-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .service-card .service-title {\r\n font-size: 15px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .services {\r\n padding: 40px 0;\r\n }\r\n .services-inner {\r\n padding: 0 16px;\r\n }\r\n .services-header {\r\n margin-bottom: 28px;\r\n }\r\n .services-title {\r\n font-size: 24px;\r\n }\r\n .services-subtitle {\r\n font-size: 14px;\r\n }\r\n .services-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .service-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .service-card .icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .service-card .service-title {\r\n font-size: 13px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .services-grid {\r\n gap: 10px;\r\n }\r\n .service-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .service-card .service-title {\r\n font-size: 12px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"services\">\r\n <div class=\"services-inner\">\r\n\r\n <div class=\"services-header\">\r\n <div class=\"services-badge\">\r\n <span class=\"dot\"><\/span>Our Services\r\n <\/div>\r\n <h2 class=\"services-title\">\r\n What We <span class=\"highlight\">Offer<\/span>\r\n <\/h2>\r\n <p class=\"services-subtitle\">\r\n Comprehensive telecom solutions designed to power your business \r\n with reliability, security, and innovation.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">International Voice Termination<\/h3>\r\n <p class=\"service-desc\">High-quality voice termination with global reach and low latency<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-hashtag\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">DID Numbers<\/h3>\r\n <p class=\"service-desc\">Local virtual numbers in 150+ countries for global presence<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-link\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SIP Trunking<\/h3>\r\n <p class=\"service-desc\">Scalable SIP trunk solutions for seamless business communication<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-sms\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SMS Solutions<\/h3>\r\n <p class=\"service-desc\">Bulk SMS, OTP, and enterprise messaging with high deliverability<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-database\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Data Center Services<\/h3>\r\n <p class=\"service-desc\">Secure, scalable data center solutions with 99.9% uptime SLA<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-network-wired\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Managed Network Services<\/h3>\r\n <p class=\"service-desc\">End-to-end network management, monitoring, and optimization<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Cyber Security<\/h3>\r\n <p class=\"service-desc\">Advanced threat protection, DDoS mitigation, and security audits<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-sim-card\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">e-SIM<\/h3>\r\n <p class=\"service-desc\">Digital SIM solutions for travel, business, IoT, and M2M connectivity<\/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-7bf51f8 e-con-full e-flex e-con e-parent\" data-id=\"7bf51f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdacdf9 elementor-widget elementor-widget-html\" data-id=\"bdacdf9\" 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 - Industries Served<\/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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .industries, .industries-inner, .industries-header, .industries-badge,\r\n .industries-title, .industries-subtitle, .industries-grid, .industry-card,\r\n .industry-name, .icon-wrapper, .shine, .glow-overlay,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRIES SECTION\r\n ======================================== *\/\r\n .industries {\r\n padding: 40px 0;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .industries::before {\r\n display: none;\r\n }\r\n\r\n .industries-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 .industries-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n \/* Badge - Same as Others *\/\r\n .industries-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 .industries-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 .industries-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .industries-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 .industries-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .industries-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRIES GRID\r\n ======================================== *\/\r\n .industries-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRY CARD - Same as Services\r\n ======================================== *\/\r\n .industry-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 .industry-card:nth-child(1) { animation-delay: 0.05s; }\r\n .industry-card:nth-child(2) { animation-delay: 0.10s; }\r\n .industry-card:nth-child(3) { animation-delay: 0.15s; }\r\n .industry-card:nth-child(4) { animation-delay: 0.20s; }\r\n .industry-card:nth-child(5) { animation-delay: 0.25s; }\r\n .industry-card:nth-child(6) { animation-delay: 0.30s; }\r\n .industry-card:nth-child(7) { animation-delay: 0.35s; }\r\n .industry-card:nth-child(8) { animation-delay: 0.40s; }\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 - Same as Services *\/\r\n .industry-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 .industry-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .industry-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 \/* ===== DATA FLOW ANIMATION ===== *\/\r\n .industry-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .industry-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAPPER - #4D7DD1 BACKGROUND ===== *\/\r\n .industry-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n \/* Animated Glow Ring *\/\r\n .industry-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 .industry-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 .industry-card:hover .icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .industry-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 .industry-card:hover .icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .industry-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 .industry-card:hover .icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== INDUSTRY NAME ===== *\/\r\n .industry-card .industry-name {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .industry-card:hover .industry-name {\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 \/* ===== SHINE EFFECT ===== *\/\r\n .industry-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 .industry-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .industry-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 .industry-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .industries-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .industries {\r\n padding: 60px 0;\r\n }\r\n .industries-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .industries-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .industries {\r\n padding: 50px 0;\r\n }\r\n .industries-inner {\r\n padding: 0 20px;\r\n }\r\n .industries-header {\r\n margin-bottom: 36px;\r\n }\r\n .industries-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .industries-subtitle {\r\n font-size: 15px;\r\n }\r\n .industries-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .industry-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .industry-card .industry-name {\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .industries {\r\n padding: 40px 0;\r\n }\r\n .industries-inner {\r\n padding: 0 16px;\r\n }\r\n .industries-header {\r\n margin-bottom: 28px;\r\n }\r\n .industries-title {\r\n font-size: 24px;\r\n }\r\n .industries-subtitle {\r\n font-size: 14px;\r\n }\r\n .industries-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .industry-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .industry-card .icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .industry-card .industry-name {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .industries-grid {\r\n gap: 10px;\r\n }\r\n .industry-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .industry-card .industry-name {\r\n font-size: 12px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"industries\">\r\n <div class=\"industries-inner\">\r\n\r\n <div class=\"industries-header\">\r\n <div class=\"industries-badge\">\r\n <span class=\"dot\"><\/span>\r\n Industries We Serve\r\n <\/div>\r\n <h2 class=\"industries-title\">\r\n Industries <span class=\"highlight\">Served<\/span>\r\n <\/h2>\r\n <p class=\"industries-subtitle\">\r\n Empowering businesses across diverse sectors with reliable \r\n telecom and technology solutions.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"industries-grid\">\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-tower-broadcast\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Telecom Operators<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Enterprises<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-university\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Financial Services<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-heartbeat\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Healthcare<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-landmark\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Government<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-hotel\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Hospitality<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Education<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-store\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Retail<\/h3>\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-47777be e-con-full e-flex e-con e-parent\" data-id=\"47777be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbe6e8c elementor-widget elementor-widget-html\" data-id=\"fbe6e8c\" 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 - Global Presence<\/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 \r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .global, .global-inner, .global-header, .global-badge,\r\n .global-title, .global-subtitle, .map-wrapper, .legend,\r\n .legend-item, .location-cards, .location-card,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --hq-color: #4D7DD1;\r\n --pop-color: #932DB9;\r\n }\r\n\r\n \/* ========================================\r\n GLOBAL PRESENCE SECTION\r\n ======================================== *\/\r\n .global {\r\n padding: 40px 0 60px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .global::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 .global-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 .global-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .global-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 .global-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 .global-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .global-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 .global-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n MAP WRAPPER\r\n ======================================== *\/\r\n .map-wrapper {\r\n position: relative;\r\n width: 100%;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n border: 1px solid var(--border);\r\n background: #e8edf2;\r\n margin-bottom: 32px;\r\n }\r\n\r\n #map {\r\n width: 100%;\r\n height: 480px;\r\n z-index: 1;\r\n }\r\n\r\n \/* Leaflet popup styles *\/\r\n .leaflet-popup-content-wrapper {\r\n border-radius: 12px !important;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n .leaflet-popup-content {\r\n font-family: 'Inter', sans-serif !important;\r\n padding: 8px 4px !important;\r\n }\r\n\r\n .leaflet-popup-content strong {\r\n color: var(--dark);\r\n font-size: 15px;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .leaflet-popup-content span {\r\n color: var(--gray);\r\n font-size: 13px;\r\n }\r\n\r\n .leaflet-popup-content .popup-tag {\r\n display: inline-block;\r\n color: #fff;\r\n font-size: 10px;\r\n font-weight: 600;\r\n padding: 2px 10px;\r\n border-radius: 100px;\r\n margin-top: 4px;\r\n }\r\n\r\n .leaflet-popup-content .popup-tag.hq { background: var(--hq-color); }\r\n .leaflet-popup-content .popup-tag.pop { background: var(--pop-color); }\r\n\r\n .leaflet-popup-tip {\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;\r\n }\r\n\r\n \/* Custom Marker Icons *\/\r\n .custom-marker {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 18px;\r\n color: #fff;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\r\n border: 3px solid #fff;\r\n transition: transform 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .custom-marker::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 0;\r\n border-left: 8px solid transparent;\r\n border-right: 8px solid transparent;\r\n border-top: 10px solid currentColor;\r\n opacity: 0.8;\r\n }\r\n\r\n .custom-marker:hover {\r\n transform: scale(1.15);\r\n }\r\n\r\n .custom-marker.hq {\r\n background: var(--hq-color);\r\n color: var(--hq-color);\r\n box-shadow: 0 4px 20px rgba(77, 125, 209, 0.35);\r\n }\r\n\r\n .custom-marker.pop {\r\n background: var(--pop-color);\r\n color: var(--pop-color);\r\n box-shadow: 0 4px 20px rgba(147, 45, 185, 0.35);\r\n }\r\n\r\n .custom-marker i {\r\n font-size: 16px;\r\n color: #fff;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== LEGEND ===== *\/\r\n .legend {\r\n display: flex;\r\n justify-content: center;\r\n gap: 28px;\r\n flex-wrap: wrap;\r\n padding: 16px 0 0;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n color: var(--gray);\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n border: 2px solid rgba(255, 255, 255, 0.8);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .legend-item .color-dot.hq { background: var(--hq-color); }\r\n .legend-item .color-dot.pop { background: var(--pop-color); }\r\n\r\n \/* ========================================\r\n LOCATION CARDS\r\n ======================================== *\/\r\n .location-cards {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n margin-top: 8px;\r\n }\r\n\r\n .location-card {\r\n background: var(--white);\r\n padding: 30px 22px 26px;\r\n border-radius: 16px;\r\n border: 1px solid var(--border);\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\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 .location-card:nth-child(1) { animation-delay: 0.2s; }\r\n .location-card:nth-child(2) { animation-delay: 0.3s; }\r\n .location-card:nth-child(3) { animation-delay: 0.4s; }\r\n .location-card:nth-child(4) { animation-delay: 0.5s; }\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 .location-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 .location-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .location-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n \/* Data flow line *\/\r\n .location-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .location-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAP - HQ (Blue) ===== *\/\r\n .location-card[data-type=\"hq\"] .icon-wrap {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .icon-wrap::after {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .icon-wrap::before {\r\n border-color: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .tag {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"]:hover h3 {\r\n background: linear-gradient(135deg, var(--hq-color), #6B8FD4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== ICON WRAP - POP (Purple) ===== *\/\r\n .location-card[data-type=\"pop\"] .icon-wrap {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .icon-wrap::after {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .icon-wrap::before {\r\n border-color: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .tag {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"]:hover h3 {\r\n background: linear-gradient(135deg, var(--pop-color), #B84AD4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== ICON WRAP - COMMON STYLES ===== *\/\r\n .location-card .icon-wrap {\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 }\r\n\r\n .location-card .icon-wrap::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 .location-card .icon-wrap::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\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 .location-card:hover .icon-wrap {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .location-card:hover .icon-wrap::before {\r\n opacity: 1;\r\n transform: scale(1.05);\r\n }\r\n\r\n .location-card:hover .icon-wrap::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .location-card .icon-wrap 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 .location-card:hover .icon-wrap i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .location-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 .location-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .location-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 .location-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 2px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .location-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 .location-card:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n .location-card .tag {\r\n display: inline-block;\r\n font-size: 10px;\r\n font-weight: 600;\r\n padding: 2px 12px;\r\n border-radius: 100px;\r\n margin-top: 8px;\r\n color: #fff;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .global {\r\n padding: 60px 0;\r\n }\r\n\r\n #map {\r\n height: 380px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .legend {\r\n gap: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .global {\r\n padding: 50px 0;\r\n }\r\n\r\n .global-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .global-header {\r\n margin-bottom: 32px;\r\n }\r\n\r\n .global-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n #map {\r\n height: 300px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .location-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 20px;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 15px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 13px;\r\n }\r\n\r\n .legend {\r\n gap: 14px;\r\n }\r\n\r\n .legend-item {\r\n font-size: 12px;\r\n gap: 6px;\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .global {\r\n padding: 40px 0;\r\n }\r\n\r\n .global-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .global-header {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .global-title {\r\n font-size: 24px;\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .global-badge {\r\n font-size: 10px;\r\n }\r\n\r\n #map {\r\n height: 280px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .location-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 16px;\r\n }\r\n\r\n .location-card .icon-wrap::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .location-card .tag {\r\n font-size: 8px;\r\n padding: 1px 8px;\r\n margin-top: 4px;\r\n }\r\n\r\n .legend {\r\n gap: 10px;\r\n padding-top: 10px;\r\n }\r\n\r\n .legend-item {\r\n font-size: 10px;\r\n gap: 4px;\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .location-cards {\r\n gap: 10px;\r\n }\r\n\r\n .location-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 13px;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 12px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n .custom-marker-icon {\r\n background: none !important;\r\n border: none !important;\r\n }\r\n\r\n \/* Leaflet attribution hidden *\/\r\n .leaflet-control-attribution {\r\n display: none !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"global\">\r\n <div class=\"global-inner\">\r\n\r\n \r\n <div class=\"global-header\">\r\n <div class=\"global-badge\">\r\n <span class=\"dot\"><\/span>\r\n Global Presence\r\n <\/div>\r\n <h2 class=\"global-title\">\r\n Our <span class=\"highlight\">Global Footprint<\/span>\r\n <\/h2>\r\n <p class=\"global-subtitle\">\r\n Connecting businesses worldwide with our headquarters and \r\n network POP locations across the globe.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"map-wrapper\">\r\n <div id=\"map\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"legend\">\r\n <div class=\"legend-item\">\r\n <span class=\"color-dot hq\"><\/span>\r\n Headquarters\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <span class=\"color-dot pop\"><\/span>\r\n POP Locations (Network POP)\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-cards\">\r\n\r\n \r\n <div class=\"location-card\" data-type=\"hq\" data-lat=\"51.530648\" data-lng=\"-0.0961285\" data-zoom=\"15\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <h3>London, UK<\/h3>\r\n <p>20-22 Wenlock Road<\/p>\r\n <span class=\"tag\">Headquarters<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"38.8951\" data-lng=\"-77.0369\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>USA<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"1.3521\" data-lng=\"103.8198\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>Singapore<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"52.3555\" data-lng=\"-1.1743\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>UK<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ ===== INITIALIZE MAP =====\r\n var map = L.map('map', {\r\n center: [20, 0],\r\n zoom: 2,\r\n zoomControl: true,\r\n scrollWheelZoom: true,\r\n attributionControl: false\r\n });\r\n\r\n \/\/ ===== TILE LAYER =====\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n maxZoom: 19,\r\n minZoom: 2,\r\n attribution: ''\r\n }).addTo(map);\r\n\r\n \/\/ ===== CUSTOM ICON FUNCTION =====\r\n function createCustomIcon(type) {\r\n var isHQ = type === 'hq';\r\n var iconHtml = `\r\n <div class=\"custom-marker ${type}\">\r\n <i class=\"fas ${isHQ ? 'fa-building' : 'fa-server'}\"><\/i>\r\n <\/div>\r\n `;\r\n return L.divIcon({\r\n html: iconHtml,\r\n className: 'custom-marker-icon',\r\n iconSize: [40, 40],\r\n iconAnchor: [20, 40],\r\n popupAnchor: [0, -40]\r\n });\r\n }\r\n\r\n \/\/ ===== LOCATIONS =====\r\n var locations = [\r\n {\r\n lat: 51.530648,\r\n lng: -0.0961285,\r\n name: 'Infinexy Technologies Ltd',\r\n address: '20-22 Wenlock Road, London, UK',\r\n type: 'hq',\r\n tag: 'Headquarters',\r\n phone: '+44 7875 213516',\r\n website: 'infinexy.com'\r\n },\r\n {\r\n lat: 38.8951,\r\n lng: -77.0369,\r\n name: 'Network POP',\r\n address: 'USA - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n },\r\n {\r\n lat: 1.3521,\r\n lng: 103.8198,\r\n name: 'Network POP',\r\n address: 'Singapore - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n },\r\n {\r\n lat: 52.3555,\r\n lng: -1.1743,\r\n name: 'Network POP',\r\n address: 'UK - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n }\r\n ];\r\n\r\n \/\/ ===== ADD MARKERS =====\r\n locations.forEach(function(loc) {\r\n var icon = createCustomIcon(loc.type);\r\n var marker = L.marker([loc.lat, loc.lng], { icon: icon }).addTo(map);\r\n\r\n var popupContent = `\r\n <div style=\"min-width:200px; padding:4px 0;\">\r\n <strong style=\"font-size:15px; color:#0a1a2f; display:block; margin-bottom:2px;\">${loc.name}<\/strong>\r\n <span style=\"font-size:13px; color:#475569; display:block;\">${loc.address}<\/span>\r\n `;\r\n\r\n if (loc.phone) {\r\n popupContent += `\r\n <span style=\"font-size:12px; color:#94a3b8; display:block; margin-top:4px;\">\r\n <i class=\"fas fa-phone\" style=\"font-size:11px;\"><\/i> ${loc.phone}\r\n <\/span>\r\n `;\r\n }\r\n\r\n if (loc.website) {\r\n popupContent += `\r\n <span style=\"font-size:12px; color:#94a3b8; display:block; margin-top:2px;\">\r\n <i class=\"fas fa-globe\" style=\"font-size:11px;\"><\/i> ${loc.website}\r\n <\/span>\r\n `;\r\n }\r\n\r\n popupContent += `\r\n <span class=\"popup-tag ${loc.type}\">${loc.tag}<\/span>\r\n <\/div>\r\n `;\r\n\r\n marker.bindPopup(popupContent, {\r\n maxWidth: 300,\r\n className: 'custom-popup'\r\n });\r\n });\r\n\r\n \/\/ ===== FIX MAP SIZE =====\r\n function fixMapSize() {\r\n setTimeout(function() {\r\n map.invalidateSize();\r\n }, 100);\r\n }\r\n\r\n window.addEventListener('load', fixMapSize);\r\n window.addEventListener('resize', function() {\r\n setTimeout(function() {\r\n map.invalidateSize();\r\n }, 200);\r\n });\r\n\r\n if (document.fonts) {\r\n document.fonts.ready.then(function() {\r\n fixMapSize();\r\n });\r\n }\r\n\r\n \/\/ ===== ZOOM TO LOCATION ON CARD CLICK =====\r\n var cards = document.querySelectorAll('.location-card');\r\n cards.forEach(function(card) {\r\n card.addEventListener('click', function() {\r\n var lat = parseFloat(this.dataset.lat);\r\n var lng = parseFloat(this.dataset.lng);\r\n var zoom = parseInt(this.dataset.zoom) || 6;\r\n \r\n if (!isNaN(lat) && !isNaN(lng)) {\r\n map.flyTo([lat, lng], zoom, {\r\n duration: 1.5\r\n });\r\n \r\n setTimeout(function() {\r\n map.eachLayer(function(layer) {\r\n if (layer instanceof L.Marker) {\r\n var latLng = layer.getLatLng();\r\n if (Math.abs(latLng.lat - lat) < 0.01 && Math.abs(latLng.lng - lng) < 0.01) {\r\n layer.openPopup();\r\n }\r\n }\r\n });\r\n }, 1600);\r\n }\r\n });\r\n });\r\n\r\n setTimeout(fixMapSize, 1000);\r\n\r\n });\r\n <\/script>\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-00ea230 e-con-full e-flex e-con e-parent\" data-id=\"00ea230\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a445b elementor-widget elementor-widget-html\" data-id=\"d5a445b\" 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 - Contact CTA<\/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 !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .cta, .cta-wrapper, .cta-badge, .cta-title, \r\n .cta-subtitle, .cta-btn, .cta-stats, .cta-stat,\r\n .cta-contact-info {\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --sky: #1BAEEE;\r\n --stat-color: #864ABA;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n }\r\n .cta {\r\n padding: 50px 0;\r\n background: #F8F9FB;\r\n position: relative;\r\n }\r\n\r\n .cta-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n }\r\n\r\n \/* ===== CTA WRAPPER ===== *\/\r\n .cta-wrapper {\r\n background: var(--white);\r\n border-radius: 24px;\r\n padding: 64px 40px;\r\n border: 1px solid var(--border);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 50px;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .cta-wrapper:hover {\r\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n \/* ===== LEFT SIDE ===== *\/\r\n .cta-left {\r\n position: relative;\r\n }\r\n\r\n \/* Title - Full Black *\/\r\n .cta-title {\r\n font-size: clamp(28px, 3.2vw, 38px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.15;\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* \"telecom business\" - Black, Hover Color Change Only *\/\r\n .cta-title .highlight {\r\n color: var(--dark);\r\n transition: color 0.3s ease;\r\n cursor: default;\r\n }\r\n\r\n .cta-title:hover .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* Subtitle *\/\r\n .cta-subtitle {\r\n font-size: 16px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n max-width: 420px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* ===== STATS - Numbers #864ABA ===== *\/\r\n .cta-stats {\r\n display: flex;\r\n gap: 40px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 24px;\r\n font-weight: 800;\r\n color: var(--stat-color);\r\n line-height: 1.2;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n font-weight: 400;\r\n }\r\n\r\n \/* ===== RIGHT SIDE ===== *\/\r\n .cta-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 20px;\r\n }\r\n\r\n \/* ===== BUTTON - NO RISE ON HOVER ===== *\/\r\n .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 16px 44px;\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 width: 100%;\r\n justify-content: center;\r\n max-width: 320px;\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 40px rgba(142, 36, 170, 0.30);\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 \/* ===== CONTACT INFO ===== *\/\r\n .cta-contact-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-contact-info .divider {\r\n color: var(--border);\r\n }\r\n\r\n .cta-contact-info a {\r\n color: var(--gray);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .cta-contact-info a:hover {\r\n color: var(--purple);\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .cta-wrapper {\r\n padding: 50px 50px;\r\n gap: 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .cta {\r\n padding: 70px 0;\r\n }\r\n\r\n .cta-wrapper {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n padding: 40px 36px;\r\n text-align: center;\r\n }\r\n\r\n .cta-left {\r\n text-align: center;\r\n }\r\n\r\n .cta-subtitle {\r\n max-width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-stats {\r\n justify-content: center;\r\n }\r\n\r\n .cta-right {\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n \/* Button smaller on tablet *\/\r\n .cta-btn {\r\n padding: 14px 32px;\r\n font-size: 14px;\r\n max-width: 280px;\r\n }\r\n\r\n .cta-contact-info {\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .cta {\r\n padding: 50px 0;\r\n }\r\n\r\n .cta-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .cta-wrapper {\r\n padding: 30px 24px;\r\n border-radius: 20px;\r\n }\r\n\r\n .cta-title {\r\n font-size: clamp(24px, 6vw, 28px);\r\n }\r\n\r\n .cta-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .cta-stats {\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 20px;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 12px;\r\n }\r\n\r\n \/* Button smaller on mobile *\/\r\n .cta-btn {\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n max-width: 260px;\r\n }\r\n\r\n .cta-contact-info {\r\n font-size: 12px;\r\n gap: 8px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .cta {\r\n padding: 40px 0;\r\n }\r\n\r\n .cta-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .cta-wrapper {\r\n padding: 24px 16px;\r\n border-radius: 16px;\r\n }\r\n\r\n .cta-title {\r\n font-size: 22px;\r\n }\r\n\r\n .cta-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .cta-stats {\r\n gap: 14px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat {\r\n text-align: center;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 18px;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 11px;\r\n }\r\n\r\n \/* Button smaller on mobile small *\/\r\n .cta-btn {\r\n padding: 10px 18px;\r\n font-size: 13px;\r\n max-width: 220px;\r\n gap: 8px;\r\n }\r\n\r\n .cta-btn i {\r\n font-size: 12px;\r\n }\r\n\r\n \/* Email & Phone side by side *\/\r\n .cta-contact-info {\r\n font-size: 11px;\r\n gap: 6px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-contact-info .divider {\r\n display: none;\r\n }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"cta\">\r\n <div class=\"cta-inner\">\r\n\r\n <div class=\"cta-wrapper\">\r\n\r\n \r\n <div class=\"cta-left\">\r\n\r\n \r\n <h2 class=\"cta-title\">\r\n Ready to grow your <span class=\"highlight\">telecom business<\/span>?\r\n <\/h2>\r\n\r\n \r\n <p class=\"cta-subtitle\">\r\n Partner with Infinexy to scale your operations globally \r\n with reliable, secure, and innovative telecom solutions.\r\n <\/p>\r\n\r\n \r\n <div class=\"cta-stats\">\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">500+<\/span>\r\n <span class=\"label\">Carrier Partners<\/span>\r\n <\/div>\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">150+<\/span>\r\n <span class=\"label\">Countries<\/span>\r\n <\/div>\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">99.9%<\/span>\r\n <span class=\"label\">Uptime<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-right\">\r\n\r\n \r\n <a href=\"#\" class=\"cta-btn\">\r\n <span>Contact Sales<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n\r\n \r\n <div class=\"cta-contact-info\">\r\n <span>\ud83d\udce7 <a href=\"mailto:sales@infinexy.net\">sales@infinexy.net<\/a><\/span>\r\n <span class=\"divider\">|<\/span>\r\n <span>\ud83d\udcde <a href=\"tel:+44 20 8058 7982\">+44 20 8058 7982<\/a><\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infinexy – Hero Section Connecting the World with Intelligent Telecom Solutions Global Voice, Cloud Communications, Network Infrastructure, and Digital Transformation Services. Request a Quote Contact Sales Explore Solutions 99.9% Uptime 150+ Countries 24\/7 Support Global Voice HD Quality Cloud Comms Secure & Scalable UK Infrastructure Nationwide Coverage Infinexy – About Section Global Reach 150+ Countries […]<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8","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=8"}],"version-history":[{"count":315,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":2293,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8\/revisions\/2293"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Infinexy - Hero Section<\/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: #ffffff;\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 --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n min-height: 70vh;\r\n display: flex;\r\n align-items: center;\r\n background: var(--white);\r\n overflow: hidden;\r\n padding: 30px 0;\r\n }\r\n\r\n .hero-inner {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n\r\n .hero-content {\r\n max-width: 600px;\r\n }\r\n\r\n .hero-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: 14px;\r\n animation: fadeInUp 0.8s ease forwards;\r\n }\r\n\r\n .hero-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 .hero-heading {\r\n font-size: clamp(28px, 3.8vw, 44px);\r\n font-weight: 900;\r\n line-height: 1.1;\r\n color: var(--dark);\r\n margin-bottom: 12px;\r\n animation: fadeInUp 0.8s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-heading .highlight {\r\n color: var(--dark);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .hero-heading:hover .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .hero-subheading {\r\n font-size: clamp(13px, 0.9vw, 16px);\r\n line-height: 1.7;\r\n color: var(--gray);\r\n max-width: 500px;\r\n margin-bottom: 20px;\r\n animation: fadeInUp 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n animation: fadeInUp 0.8s ease 0.3s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n font-size: 13px;\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 white-space: nowrap;\r\n }\r\n\r\n .hero-btn-primary::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 .hero-btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-primary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n }\r\n\r\n .hero-btn-primary i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n color: var(--white);\r\n }\r\n\r\n .hero-btn-primary:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border-radius: 100px;\r\n border: 2px solid var(--border);\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: var(--dark);\r\n background: transparent;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n z-index: 1;\r\n white-space: nowrap;\r\n }\r\n\r\n .hero-btn-secondary::before {\r\n content: '';\r\n position: absolute;\r\n inset: -2px;\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 .hero-btn-secondary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-secondary:hover {\r\n color: var(--white);\r\n border-color: transparent;\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.25);\r\n }\r\n\r\n .hero-btn-secondary i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n color: var(--dark);\r\n }\r\n\r\n .hero-btn-secondary:hover i {\r\n color: var(--white);\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-btn-tertiary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 16px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: var(--gray);\r\n background: transparent;\r\n transition: all 0.4s ease;\r\n border-radius: 100px;\r\n position: relative;\r\n white-space: nowrap;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-btn-tertiary::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 .hero-btn-tertiary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .hero-btn-tertiary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.25);\r\n }\r\n\r\n .hero-btn-tertiary i {\r\n font-size: 12px;\r\n transition: transform 0.3s ease;\r\n color: var(--gray);\r\n }\r\n\r\n .hero-btn-tertiary:hover i {\r\n color: var(--white);\r\n transform: translateX(3px);\r\n }\r\n\r\n .hero-trust {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n margin-top: 24px;\r\n padding-top: 18px;\r\n border-top: 1px solid var(--border);\r\n animation: fadeInUp 0.8s ease 0.4s forwards;\r\n opacity: 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .hero-trust .trust-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n color: var(--gray);\r\n }\r\n\r\n .hero-trust .trust-item i {\r\n color: var(--green);\r\n font-size: 14px;\r\n }\r\n\r\n .hero-trust .trust-item strong {\r\n color: var(--dark);\r\n font-weight: 700;\r\n font-size: 14px;\r\n }\r\n\r\n \/* HERO VISUAL *\/\r\n .hero-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .hero-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n \/* IMAGE WITH OPTIMIZED LOADING *\/\r\n .hero-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 460px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n z-index: 2;\r\n transition: transform 0.8s ease;\r\n background: #e8edf3;\r\n }\r\n\r\n .hero-image-wrapper:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Placeholder - shows instantly *\/\r\n .hero-image-wrapper .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #b8cce0 0%, #d5dce6 100%);\r\n border-radius: 20px;\r\n z-index: 0;\r\n }\r\n\r\n .hero-image-wrapper img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n position: relative;\r\n z-index: 1;\r\n \/* Blur-up effect *\/\r\n filter: blur(20px);\r\n transform: scale(1.05);\r\n transition: filter 0.8s ease-out, transform 0.8s ease-out;\r\n }\r\n\r\n .hero-image-wrapper img.loaded {\r\n filter: blur(0);\r\n transform: scale(1);\r\n }\r\n\r\n .hero-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(142, 36, 170, 0.05), rgba(0, 159, 227, 0.03));\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n \/* RINGS *\/\r\n .ring-outer {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 2px solid rgba(142, 36, 170, 0.06);\r\n pointer-events: none;\r\n z-index: 1;\r\n width: 116%;\r\n height: 116%;\r\n top: -8%;\r\n left: -8%;\r\n animation: spin 25s linear infinite;\r\n }\r\n\r\n .ring-outer::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--purple);\r\n box-shadow: 0 0 20px rgba(142, 36, 170, 0.3);\r\n }\r\n\r\n .ring-inner {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px dashed rgba(0, 159, 227, 0.06);\r\n pointer-events: none;\r\n z-index: 1;\r\n width: 124%;\r\n height: 124%;\r\n top: -12%;\r\n left: -12%;\r\n animation: spinReverse 30s linear infinite;\r\n }\r\n\r\n .ring-inner::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 30%;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--blue);\r\n box-shadow: 0 0 15px rgba(0, 159, 227, 0.3);\r\n }\r\n\r\n .ring-pulse {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(142, 36, 170, 0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 132%;\r\n height: 132%;\r\n top: -16%;\r\n left: -16%;\r\n animation: pulseRing 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes spinReverse {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(-360deg); }\r\n }\r\n\r\n @keyframes pulseRing {\r\n 0%, 100% { transform: scale(1); opacity: 0.3; }\r\n 50% { transform: scale(1.05); opacity: 0.7; }\r\n }\r\n\r\n \/* FLOATING CARDS *\/\r\n .hero-float-card {\r\n position: absolute;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 12px 16px;\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n animation: floatCard 6s ease-in-out infinite;\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n z-index: 3;\r\n }\r\n\r\n .hero-float-card .card-icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n color: var(--white);\r\n flex-shrink: 0;\r\n }\r\n\r\n .hero-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n\r\n .hero-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n\r\n .hero-float-card .card-icon.orange {\r\n background: linear-gradient(135deg, var(--orange), #fbbf24);\r\n }\r\n\r\n .hero-float-card .card-text {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n\r\n .hero-float-card .card-text small {\r\n display: block;\r\n font-weight: 400;\r\n font-size: 10px;\r\n color: var(--gray-light);\r\n }\r\n\r\n .hero-float-card.card-1 {\r\n top: -12px;\r\n right: -16px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .hero-float-card.card-2 {\r\n bottom: 16px;\r\n left: -24px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .hero-float-card.card-3 {\r\n bottom: -12px;\r\n right: -8px;\r\n animation-delay: 4s;\r\n }\r\n\r\n @keyframes floatCard {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\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 \/* RESPONSIVE *\/\r\n @media (min-width: 1400px) {\r\n .hero { padding: 30px 0; min-height: 65vh; }\r\n .hero-inner { gap: 50px; }\r\n .hero-image-wrapper { max-width: 500px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .hero { padding: 30px 0; min-height: 60vh; }\r\n .hero-inner { gap: 30px; }\r\n .hero-heading { font-size: clamp(28px, 3.5vw, 38px); }\r\n .hero-image-wrapper { max-width: 400px; }\r\n .hero-float-card.card-1 { top: -10px; right: -10px; }\r\n .hero-float-card.card-2 { bottom: 12px; left: -16px; }\r\n .hero-float-card.card-3 { bottom: -10px; right: -5px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .hero { padding: 35px 0; min-height: auto; }\r\n .hero-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }\r\n .hero-content { max-width: 100%; margin: 0 auto; }\r\n .hero-subheading { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .hero-buttons { justify-content: center; }\r\n .hero-trust { justify-content: center; }\r\n .hero-image-wrapper { max-width: 380px; margin: 0 auto; }\r\n .hero-float-card.card-1 { top: -10px; right: 0px; }\r\n .hero-float-card.card-2 { bottom: 8px; left: -8px; }\r\n .hero-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .hero { padding: 30px 0; }\r\n .hero-inner { padding: 0 20px; gap: 25px; }\r\n .hero-heading { font-size: clamp(24px, 5vw, 30px); }\r\n .hero-subheading { font-size: 14px; }\r\n .hero-buttons { justify-content: center; gap: 8px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 8px 16px; font-size: 12px; }\r\n .hero-btn-tertiary { padding: 8px 12px; font-size: 12px; }\r\n .hero-trust { justify-content: center; gap: 16px; padding-top: 14px; margin-top: 20px; }\r\n .hero-trust .trust-item { font-size: 11px; }\r\n .hero-trust .trust-item strong { font-size: 13px; }\r\n .hero-image-wrapper { max-width: 320px; }\r\n .hero-float-card { padding: 8px 12px; gap: 8px; }\r\n .hero-float-card .card-icon { width: 30px; height: 30px; font-size: 14px; }\r\n .hero-float-card .card-text { font-size: 11px; }\r\n .hero-float-card .card-text small { font-size: 9px; }\r\n .hero-float-card.card-1 { top: -5px; right: -5px; }\r\n .hero-float-card.card-2 { bottom: 4px; left: -12px; }\r\n .hero-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero { padding: 24px 0; }\r\n .hero-inner { padding: 0 16px; gap: 20px; }\r\n .hero-heading { font-size: clamp(20px, 6vw, 24px); }\r\n .hero-badge { font-size: 10px; margin-bottom: 10px; }\r\n .hero-subheading { font-size: 13px; margin-bottom: 16px; }\r\n .hero-buttons { gap: 6px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 6px 12px; font-size: 11px; gap: 6px; }\r\n .hero-btn-primary i, .hero-btn-secondary i { font-size: 11px; }\r\n .hero-btn-tertiary { padding: 6px 10px; font-size: 11px; }\r\n .hero-btn-tertiary i { font-size: 10px; }\r\n .hero-trust { gap: 12px; padding-top: 10px; margin-top: 16px; }\r\n .hero-trust .trust-item { font-size: 10px; gap: 4px; }\r\n .hero-trust .trust-item i { font-size: 12px; }\r\n .hero-trust .trust-item strong { font-size: 11px; }\r\n .hero-image-wrapper { max-width: 260px; }\r\n .hero-float-card.card-1 { top: -4px; right: -8px; padding: 6px 10px; }\r\n .hero-float-card.card-2 { bottom: 0; left: -8px; padding: 6px 10px; }\r\n .hero-float-card .card-icon { width: 24px; height: 24px; font-size: 11px; }\r\n .hero-float-card .card-text { font-size: 10px; }\r\n .hero-float-card .card-text small { font-size: 8px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .hero { padding: 18px 0; }\r\n .hero-heading { font-size: 20px; }\r\n .hero-subheading { font-size: 12px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 5px 10px; font-size: 10px; }\r\n .hero-btn-tertiary { padding: 5px 8px; font-size: 10px; }\r\n .hero-trust { gap: 8px; }\r\n .hero-trust .trust-item { font-size: 9px; }\r\n .hero-trust .trust-item strong { font-size: 10px; }\r\n .hero-image-wrapper { max-width: 220px; }\r\n .hero-float-card.card-1, .hero-float-card.card-2 { padding: 4px 8px; gap: 4px; }\r\n .hero-float-card .card-icon { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }\r\n .hero-float-card .card-text { font-size: 8px; }\r\n .hero-float-card .card-text small { font-size: 7px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-inner\">\r\n\r\n <div class=\"hero-content\">\r\n \r\n \r\n \r\n \r\n\r\n <h1 class=\"hero-heading\">\r\n Connecting the World with <span class=\"highlight\">Intelligent Telecom Solutions<\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-subheading\">\r\n Global Voice, Cloud Communications, Network Infrastructure, \r\n and Digital Transformation Services.\r\n <\/p>\r\n\r\n <div class=\"hero-buttons\">\r\n <a href=\"#\" class=\"hero-btn-primary\">\r\n <span>Request a Quote<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"hero-btn-secondary\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <span>Contact Sales<\/span>\r\n <\/a>\r\n <a href=\"#\" class=\"hero-btn-tertiary\">\r\n <span>Explore Solutions<\/span>\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-trust\">\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>99.9%<\/strong> Uptime\r\n <\/span>\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>150+<\/strong> Countries\r\n <\/span>\r\n <span class=\"trust-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <strong>24\/7<\/strong> Support\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"hero-visual-wrapper\">\r\n\r\n <div class=\"ring-pulse\"><\/div>\r\n <div class=\"ring-outer\"><\/div>\r\n <div class=\"ring-inner\"><\/div>\r\n\r\n <div class=\"hero-image-wrapper\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/1st-Section-scaled.webp\" \r\n alt=\"UK Telecom Network Infrastructure\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n \/>\r\n <div class=\"hero-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Global Voice\r\n <small>HD Quality<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-cloud\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Cloud Comms\r\n <small>Secure & Scalable<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-float-card card-3\">\r\n <div class=\"card-icon orange\">\r\n <i class=\"fas fa-network-wired\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n UK Infrastructure\r\n <small>Nationwide Coverage<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const img = document.querySelector('.hero-image-wrapper img');\r\n if (img && img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n <\/script>\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-17c541f e-con-full e-flex e-con e-parent\" data-id=\"17c541f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12e4626 elementor-widget elementor-widget-html\" data-id=\"12e4626\" 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 - About Section<\/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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n body, .about, .about-content, .about-badge, .about-heading, .about-sub-heading,\r\n .about-description, .about-stats, .stat, .about-btn-primary, .about-float-card,\r\n .card-text, .about-visual, .about-ring, h1, h2, h3, p, a, span, li,\r\n .about-decoration, .about-image, .about-image-overlay {\r\n font-family: 'Inter', sans-serif !important;\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 --dark-light: #15273f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n }\r\n\r\n .about {\r\n padding: 100px 0 40px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .about-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 display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* LEFT VISUAL *\/\r\n .about-visual {\r\n animation: fadeInLeft 0.8s ease 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 @keyframes fadeInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n .about-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n \/* IMAGE WITH BLUR-UP *\/\r\n .about-image {\r\n width: 100%;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n position: relative;\r\n background: #e8edf3;\r\n }\r\n\r\n .about-image .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #b8cce0 0%, #d5dce6 100%);\r\n border-radius: 20px;\r\n z-index: 0;\r\n }\r\n\r\n .about-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n position: relative;\r\n z-index: 1;\r\n transition: transform 0.8s ease, filter 0.8s ease-out;\r\n filter: blur(20px);\r\n transform: scale(1.05);\r\n }\r\n\r\n .about-image img.loaded {\r\n filter: blur(0);\r\n transform: scale(1);\r\n }\r\n\r\n .about-image:hover img {\r\n transform: scale(1.02);\r\n }\r\n\r\n .about-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(142, 36, 170, 0.05), rgba(0, 159, 227, 0.03));\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n \/* RINGS *\/\r\n .about-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 2px solid rgba(142, 36, 170, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .about-ring.r1 {\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 25s linear infinite;\r\n }\r\n\r\n .about-ring.r1::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--purple);\r\n box-shadow: 0 0 20px rgba(142, 36, 170, 0.3);\r\n }\r\n\r\n .about-ring.r2 {\r\n width: 130%;\r\n height: 130%;\r\n top: -15%;\r\n left: -15%;\r\n border: 1.5px dashed rgba(0, 159, 227, 0.06);\r\n animation: spinReverse 30s linear infinite;\r\n }\r\n\r\n .about-ring.r2::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 30%;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--blue);\r\n box-shadow: 0 0 15px rgba(0, 159, 227, 0.3);\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes spinReverse {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(-360deg); }\r\n }\r\n\r\n \/* FLOATING CARDS *\/\r\n .about-float-card {\r\n position: absolute;\r\n background: var(--white);\r\n border-radius: 14px;\r\n padding: 14px 18px;\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n animation: floatCard 6s ease-in-out infinite;\r\n z-index: 3;\r\n }\r\n\r\n .about-float-card .card-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 18px;\r\n color: var(--white);\r\n flex-shrink: 0;\r\n }\r\n\r\n .about-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n\r\n .about-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n\r\n .about-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .about-float-card .card-text {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n\r\n .about-float-card .card-text small {\r\n display: block;\r\n font-weight: 400;\r\n font-size: 11px;\r\n color: var(--gray-light);\r\n }\r\n\r\n .about-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .about-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .about-float-card.card-3 {\r\n bottom: -15px;\r\n right: -10px;\r\n animation-delay: 4s;\r\n }\r\n\r\n @keyframes floatCard {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-12px); }\r\n }\r\n\r\n \/* RIGHT CONTENT *\/\r\n .about-content {\r\n animation: fadeInRight 0.8s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes fadeInRight {\r\n from {\r\n opacity: 0;\r\n transform: translateX(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n .about-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: 24px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .about-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 .about-heading {\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: 6px;\r\n }\r\n\r\n .about-heading .highlight {\r\n color: #864ABA;\r\n }\r\n\r\n .about-sub-heading {\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .about-description {\r\n font-size: 16px;\r\n line-height: 1.9;\r\n color: var(--gray);\r\n margin-bottom: 24px;\r\n max-width: 540px;\r\n }\r\n\r\n .about-description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n .about-stats {\r\n display: flex;\r\n gap: 40px;\r\n margin-bottom: 32px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .about-stats .stat {\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .about-stats .stat:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .about-stats .stat .number {\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.2;\r\n }\r\n\r\n .about-stats .stat .number .highlight {\r\n color: #864ABA;\r\n }\r\n\r\n .about-stats .stat .label {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n font-weight: 500;\r\n }\r\n\r\n .about-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 14px;\r\n }\r\n\r\n .about-btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 32px;\r\n font-size: 14px;\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 .about-btn-primary::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 .about-btn-primary:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .about-btn-primary:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n }\r\n\r\n .about-btn-primary i {\r\n font-size: 14px;\r\n transition: transform 0.3s ease;\r\n color: var(--white);\r\n }\r\n\r\n .about-btn-primary:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n .about-btn-primary span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1199px) {\r\n .about-inner { gap: 40px; }\r\n .about-heading { font-size: clamp(30px, 3.5vw, 38px); }\r\n .about-float-card.card-1 { top: -10px; right: -10px; }\r\n .about-float-card.card-2 { bottom: 15px; left: -20px; }\r\n .about-float-card.card-3 { bottom: -10px; right: -5px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .about { padding: 70px 0; }\r\n .about-inner {\r\n grid-template-columns: 1fr;\r\n gap: 50px;\r\n text-align: center;\r\n }\r\n .about-content { order: 1; max-width: 100%; margin: 0 auto; }\r\n .about-visual { order: 2; }\r\n .about-description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .about-stats { justify-content: center; }\r\n .about-buttons { justify-content: center; }\r\n .about-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .about-float-card.card-1 { top: -10px; right: 0px; }\r\n .about-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .about-float-card.card-3 { bottom: -10px; right: 0px; }\r\n .about-ring.r1 { width: 115%; height: 115%; top: -7.5%; left: -7.5%; }\r\n .about-ring.r2 { width: 125%; height: 125%; top: -12.5%; left: -12.5%; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .about { padding: 50px 0; }\r\n .about-inner { padding: 0 20px; gap: 40px; }\r\n .about-heading { font-size: clamp(28px, 6vw, 32px); }\r\n .about-sub-heading { font-size: 16px; }\r\n .about-description { font-size: 15px; }\r\n .about-stats { gap: 24px; }\r\n .about-stats .stat .number { font-size: 24px; }\r\n .about-stats .stat .label { font-size: 12px; }\r\n .about-btn-primary { padding: 10px 24px; font-size: 13px; }\r\n .about-visual-wrapper { max-width: 360px; }\r\n .about-float-card { padding: 10px 14px; gap: 10px; }\r\n .about-float-card .card-icon { width: 34px; height: 34px; font-size: 15px; }\r\n .about-float-card .card-text { font-size: 12px; }\r\n .about-float-card .card-text small { font-size: 10px; }\r\n .about-float-card.card-1 { top: -5px; right: -5px; }\r\n .about-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .about-float-card.card-3 { display: none; }\r\n .about-ring.r1 { width: 110%; height: 110%; top: -5%; left: -5%; }\r\n .about-ring.r2 { width: 120%; height: 120%; top: -10%; left: -10%; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .about { padding: 40px 0; }\r\n .about-inner { padding: 0 16px; gap: 30px; }\r\n .about-heading { font-size: 24px; }\r\n .about-sub-heading { font-size: 14px; }\r\n .about-description { font-size: 14px; }\r\n .about-stats { gap: 16px; }\r\n .about-stats .stat .number { font-size: 20px; }\r\n .about-stats .stat .label { font-size: 11px; }\r\n .about-btn-primary { padding: 8px 20px; font-size: 12px; gap: 8px; }\r\n .about-visual-wrapper { max-width: 280px; }\r\n .about-float-card.card-1 { top: -5px; right: -10px; padding: 8px 12px; }\r\n .about-float-card.card-2 { bottom: 0; left: -10px; padding: 8px 12px; }\r\n .about-float-card .card-icon { width: 28px; height: 28px; font-size: 12px; }\r\n .about-float-card .card-text { font-size: 10px; }\r\n .about-float-card .card-text small { font-size: 9px; }\r\n .about-ring.r1 { width: 108%; height: 108%; top: -4%; left: -4%; }\r\n .about-ring.r2 { width: 116%; height: 116%; top: -8%; left: -8%; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .about-heading { font-size: 22px; }\r\n .about-stats { gap: 12px; }\r\n .about-stats .stat .number { font-size: 18px; }\r\n .about-visual-wrapper { max-width: 240px; }\r\n .about-float-card.card-1,\r\n .about-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .about-float-card .card-icon {\r\n width: 24px;\r\n height: 24px;\r\n font-size: 10px;\r\n border-radius: 8px;\r\n }\r\n .about-float-card .card-text { font-size: 9px; }\r\n .about-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"about\">\r\n <div class=\"about-inner\">\r\n\r\n <div class=\"about-visual\">\r\n <div class=\"about-visual-wrapper\">\r\n\r\n <div class=\"about-ring r1\"><\/div>\r\n <div class=\"about-ring r2\"><\/div>\r\n\r\n <div class=\"about-image\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/2nd-section-scaled.webp\" \r\n alt=\"Infinexy Global Technology\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n \/>\r\n <div class=\"about-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Global Reach\r\n <small>150+ Countries<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-cloud\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Cloud Solutions\r\n <small>Enterprise Ready<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Secure Network\r\n <small>99.9% Uptime<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-content\">\r\n\r\n <div class=\"about-badge\">\r\n <span class=\"dot\"><\/span>\r\n About Infinexy\r\n <\/div>\r\n\r\n <h2 class=\"about-heading\">\r\n Who We Are\r\n <\/h2>\r\n <p class=\"about-sub-heading\">Global Technology & Telecommunications Leader<\/p>\r\n\r\n <p class=\"about-description\">\r\n <strong>Infinexy Technologies<\/strong> is a global technology and telecommunications \r\n company delivering innovative communication solutions, international voice services, \r\n cloud infrastructure, and enterprise technology solutions for businesses worldwide.\r\n <\/p>\r\n\r\n <div class=\"about-stats\">\r\n <div class=\"stat\">\r\n <span class=\"number\"><span class=\"highlight\">10+<\/span><\/span>\r\n <span class=\"label\">Years of Excellence<\/span>\r\n <\/div>\r\n <div class=\"stat\">\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\">\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\r\n <div class=\"about-buttons\">\r\n <a href=\"#\" class=\"about-btn-primary\">\r\n <span>Know More<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const img = document.querySelector('.about-image img');\r\n if (img && img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n <\/script>\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-1f4316d e-con-full e-flex e-con e-parent\" data-id=\"1f4316d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d1e3c9 elementor-widget elementor-widget-html\" data-id=\"2d1e3c9\" 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 \u00b7 Why Choose 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 \/* ===== 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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .why-section, .why-inner, .why-header, .why-badge,\r\n .why-title, .why-subtitle, .why-grid, .why-card,\r\n .why-card-title, .why-card-desc, .why-icon-wrapper,\r\n .shine, .glow-overlay, .data-flow, .why-particles,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n WHY CHOOSE US SECTION\r\n ======================================== *\/\r\n .why-section {\r\n padding: 50px 0 50px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .why-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 .why-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .why-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 .why-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 .why-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .why-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 .why-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .why-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n GRID \u2013 4 columns\r\n ======================================== *\/\r\n .why-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n CARD \u2013 same style as services\r\n ======================================== *\/\r\n .why-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 .why-card:nth-child(1) { animation-delay: 0.05s; }\r\n .why-card:nth-child(2) { animation-delay: 0.10s; }\r\n .why-card:nth-child(3) { animation-delay: 0.15s; }\r\n .why-card:nth-child(4) { animation-delay: 0.20s; }\r\n .why-card:nth-child(5) { animation-delay: 0.25s; }\r\n .why-card:nth-child(6) { animation-delay: 0.30s; }\r\n .why-card:nth-child(7) { animation-delay: 0.35s; }\r\n .why-card:nth-child(8) { animation-delay: 0.40s; }\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 .why-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 .why-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .why-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 \/* Data flow line *\/\r\n .why-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .why-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON \u2013 #4D7DD1 background ===== *\/\r\n .why-card .why-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n .why-card .why-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 .why-card .why-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 .why-card:hover .why-icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .why-card:hover .why-icon-wrapper::before {\r\n opacity: 1;\r\n border-color: currentColor;\r\n transform: scale(1.05);\r\n }\r\n\r\n .why-card:hover .why-icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .why-card .why-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 .why-card:hover .why-icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .why-card .why-card-title {\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 .why-card:hover .why-card-title {\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 .why-card .why-card-desc {\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 .why-card:hover .why-card-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .why-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 .why-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .why-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 .why-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n @media (max-width: 1199px) {\r\n .why-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .why-section {\r\n padding: 70px 0;\r\n }\r\n .why-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .why-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .why-section {\r\n padding: 50px 0;\r\n }\r\n .why-inner {\r\n padding: 0 20px;\r\n }\r\n .why-header {\r\n margin-bottom: 36px;\r\n }\r\n .why-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .why-subtitle {\r\n font-size: 15px;\r\n }\r\n .why-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .why-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .why-card .why-card-title {\r\n font-size: 15px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .why-section {\r\n padding: 40px 0;\r\n }\r\n .why-inner {\r\n padding: 0 16px;\r\n }\r\n .why-header {\r\n margin-bottom: 28px;\r\n }\r\n .why-title {\r\n font-size: 24px;\r\n }\r\n .why-subtitle {\r\n font-size: 14px;\r\n }\r\n .why-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .why-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .why-card .why-icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .why-card .why-card-title {\r\n font-size: 13px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .why-grid {\r\n gap: 10px;\r\n }\r\n .why-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .why-card .why-icon-wrapper {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n .why-card .why-icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .why-card .why-card-title {\r\n font-size: 12px;\r\n }\r\n .why-card .why-card-desc {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"why-section\">\r\n <div class=\"why-inner\">\r\n\r\n <div class=\"why-header\">\r\n <div class=\"why-badge\">\r\n <span class=\"dot\"><\/span> Why Infinexy\r\n <\/div>\r\n <h2 class=\"why-title\">\r\n Why <span class=\"highlight\">Choose Us<\/span>\r\n <\/h2>\r\n <p class=\"why-subtitle\">\r\n We combine global reach, premium infrastructure, and dedicated support \r\n to deliver unmatched telecom services.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"why-grid\">\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Global Carrier Network<\/h3>\r\n <p class=\"why-card-desc\">Direct interconnections with top-tier carriers worldwide for seamless routing.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-headset\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Premium Voice Quality<\/h3>\r\n <p class=\"why-card-desc\">HD voice, low jitter, and minimal latency for crystal-clear calls every time.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-clock\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">24\u00d77 Technical Support<\/h3>\r\n <p class=\"why-card-desc\">Round-the-clock expert assistance to keep your operations running smoothly.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-tag\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Competitive Pricing<\/h3>\r\n <p class=\"why-card-desc\">Cost-effective rates without compromising on quality or reliability.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Reliable Infrastructure<\/h3>\r\n <p class=\"why-card-desc\">Carrier-grade network with redundant paths and failover protection.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Secure Network<\/h3>\r\n <p class=\"why-card-desc\">Enterprise-grade encryption, DDoS protection, and rigorous security protocols.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">High Availability<\/h3>\r\n <p class=\"why-card-desc\">99.99% uptime SLA with auto-failover and disaster recovery planning.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"why-icon-wrapper\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <\/div>\r\n <h3 class=\"why-card-title\">Fast Deployment<\/h3>\r\n <p class=\"why-card-desc\">Rapid provisioning and integration, so you can go live in record time.<\/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-eea9958 e-con-full e-flex e-con e-parent\" data-id=\"eea9958\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6f14ec elementor-widget elementor-widget-html\" data-id=\"b6f14ec\" 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 \u00b7 Technology Partners<\/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 !important;\r\n background: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n body, .partners-section, .partners-inner, .partners-header,\r\n .partners-badge, .partners-title, .partners-subtitle,\r\n .category-tabs, .tab-btn, .partners-grid, .partner-item,\r\n .partner-logo-wrapper, h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n :root {\r\n --blue: #009FE3;\r\n --blue-dark: #0077B6;\r\n --blue-light: #38bdf8;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #009FE3;\r\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .partners-section {\r\n padding: 40px 0 50px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .partners-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 .partners-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .partners-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n margin-bottom: 14px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .partners-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 .partners-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 .partners-title .highlight {\r\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .partners-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n .category-tabs {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .tab-btn {\r\n padding: 12px 32px;\r\n border-radius: 100px;\r\n border: none;\r\n background: var(--dark);\r\n color: var(--white);\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n font-family: 'Inter', sans-serif !important;\r\n letter-spacing: 0.3px;\r\n position: relative;\r\n overflow: hidden;\r\n z-index: 1;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .tab-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(--blue), var(--blue-dark));\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 .tab-btn:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .tab-btn:hover {\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(0, 159, 227, 0.35);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tab-btn i {\r\n font-size: 14px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn .count {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 20px;\r\n padding: 0 10px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n margin-left: 4px;\r\n line-height: 20px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .tab-btn.active {\r\n background: var(--dark);\r\n border-color: var(--dark);\r\n color: var(--white);\r\n box-shadow: 0 8px 30px rgba(10, 26, 47, 0.15);\r\n }\r\n\r\n .tab-btn.active::before {\r\n transform: translateX(0);\r\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\r\n }\r\n\r\n .tab-btn.active:hover {\r\n box-shadow: 0 8px 35px rgba(0, 159, 227, 0.35);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tab-btn.active .count {\r\n background: rgba(255,255,255,0.20);\r\n }\r\n\r\n .partners-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 28px;\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n\r\n .partners-grid.switching {\r\n opacity: 0;\r\n transform: scale(0.96);\r\n }\r\n\r\n .partner-item {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 28px 16px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n text-align: center;\r\n cursor: default;\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n animation: fadeScale 0.7s ease forwards;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 140px;\r\n }\r\n\r\n .partner-item:nth-child(1) { animation-delay: 0.04s; }\r\n .partner-item:nth-child(2) { animation-delay: 0.08s; }\r\n .partner-item:nth-child(3) { animation-delay: 0.12s; }\r\n .partner-item:nth-child(4) { animation-delay: 0.16s; }\r\n .partner-item:nth-child(5) { animation-delay: 0.20s; }\r\n .partner-item:nth-child(6) { animation-delay: 0.24s; }\r\n .partner-item:nth-child(7) { animation-delay: 0.28s; }\r\n .partner-item:nth-child(8) { animation-delay: 0.32s; }\r\n\r\n @keyframes fadeScale {\r\n from { opacity: 0; transform: scale(0.92) translateY(20px); }\r\n to { opacity: 1; transform: scale(1) translateY(0); }\r\n }\r\n\r\n .partner-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(--blue), var(--blue-dark), 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 .partner-item:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .partner-item:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n .partner-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.05) 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 .partner-item:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== LOGO WRAPPER - PNG TRANSPARENT BACKGROUND ===== *\/\r\n .partner-logo-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: 8px;\r\n position: relative;\r\n z-index: 1;\r\n min-height: 80px;\r\n background: transparent;\r\n border-radius: 10px;\r\n }\r\n\r\n \/* Very subtle placeholder - barely visible for PNG *\/\r\n .partner-logo-wrapper .placeholder {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0, 159, 227, 0.03);\r\n border-radius: 10px;\r\n z-index: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .partner-logo-wrapper img {\r\n max-width: 100%;\r\n max-height: 80px;\r\n width: auto;\r\n height: auto;\r\n object-fit: contain;\r\n filter: blur(6px) brightness(0.98);\r\n transform: scale(1.03);\r\n transition: all 0.6s ease-out;\r\n display: block;\r\n position: relative;\r\n z-index: 1;\r\n opacity: 0.6;\r\n background: transparent;\r\n }\r\n\r\n .partner-logo-wrapper img.loaded {\r\n filter: blur(0) brightness(1);\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n .partner-item:hover .partner-logo-wrapper img {\r\n transform: scale(1.06);\r\n filter: blur(0) brightness(1) drop-shadow(0 4px 12px rgba(0,0,0,0.04));\r\n }\r\n\r\n \/* When image loads, hide placeholder *\/\r\n .partner-logo-wrapper img.loaded + .placeholder {\r\n opacity: 0;\r\n }\r\n\r\n .empty-state {\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: var(--gray-light);\r\n font-size: 16px;\r\n background: var(--light-bg);\r\n border-radius: 16px;\r\n border: 1px dashed var(--border);\r\n }\r\n\r\n .empty-state i {\r\n font-size: 36px;\r\n color: var(--border);\r\n margin-bottom: 12px;\r\n display: block;\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (min-width: 1200px) {\r\n .partners-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }\r\n .partner-item { min-height: 160px; padding: 32px 20px; }\r\n .partner-logo-wrapper img { max-height: 90px; }\r\n .partner-logo-wrapper { min-height: 90px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n .partner-item { min-height: 140px; padding: 24px 16px; }\r\n .partner-logo-wrapper img { max-height: 70px; }\r\n .partner-logo-wrapper { min-height: 70px; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .partners-section { padding: 70px 0; }\r\n .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }\r\n .partners-title { font-size: clamp(30px, 4vw, 38px); }\r\n .tab-btn { padding: 10px 26px; font-size: 13px; }\r\n .partner-item { min-height: 130px; padding: 20px 14px; }\r\n .partner-logo-wrapper img { max-height: 60px; }\r\n .partner-logo-wrapper { min-height: 60px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .partners-section { padding: 56px 0 48px; }\r\n .partners-inner { padding: 0 20px; }\r\n .partners-header { margin-bottom: 32px; }\r\n .partners-title { font-size: clamp(28px, 6vw, 32px); }\r\n .partners-subtitle { font-size: 15px; }\r\n .category-tabs { gap: 10px; margin-bottom: 32px; }\r\n .tab-btn { padding: 8px 20px; font-size: 12px; gap: 6px; }\r\n .tab-btn i { font-size: 12px; }\r\n .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\r\n .partner-item { min-height: 110px; padding: 16px 12px; border-radius: 14px; }\r\n .partner-logo-wrapper img { max-height: 50px; }\r\n .partner-logo-wrapper { min-height: 50px; }\r\n }\r\n\r\n @media (max-width: 575px) {\r\n .partners-section { padding: 44px 0 36px; }\r\n .partners-inner { padding: 0 16px; }\r\n .partners-header { margin-bottom: 24px; }\r\n .partners-title { font-size: 24px; }\r\n .partners-subtitle { font-size: 14px; }\r\n .category-tabs { gap: 8px; margin-bottom: 24px; }\r\n .tab-btn { padding: 6px 16px; font-size: 11px; gap: 4px; }\r\n .tab-btn i { font-size: 10px; }\r\n .tab-btn .count { font-size: 10px; padding: 0 7px; line-height: 18px; }\r\n .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\r\n .partner-item { min-height: 90px; padding: 12px 10px; border-radius: 12px; }\r\n .partner-logo-wrapper img { max-height: 40px; }\r\n .partner-logo-wrapper { min-height: 40px; }\r\n }\r\n\r\n @media (max-width: 374px) {\r\n .partners-grid { gap: 10px; }\r\n .partner-item { min-height: 75px; padding: 10px 8px; border-radius: 10px; }\r\n .partner-logo-wrapper img { max-height: 34px; }\r\n .partner-logo-wrapper { min-height: 34px; }\r\n .tab-btn { padding: 4px 12px; font-size: 10px; gap: 3px; }\r\n .tab-btn i { font-size: 9px; }\r\n .tab-btn .count { font-size: 8px; padding: 0 5px; line-height: 14px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"partners-section\">\r\n <div class=\"partners-inner\">\r\n\r\n <div class=\"partners-header\">\r\n <div class=\"partners-badge\">\r\n <span class=\"dot\"><\/span> Our Ecosystem\r\n <\/div>\r\n <h2 class=\"partners-title\">\r\n Trusted Partners\r\n <\/h2>\r\n <p class=\"partners-subtitle\">\r\n We collaborate with world-class telecom operators, technology leaders, and cloud providers to deliver excellence.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"category-tabs\">\r\n <button class=\"tab-btn active\" data-category=\"technology\">\r\n <i class=\"fas fa-microchip\"><\/i> <span>Technology Partners<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"cloud\">\r\n <i class=\"fas fa-cloud\"><\/i> <span>Cloud & Data Center<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"telecom\">\r\n <i class=\"fas fa-satellite-dish\"><\/i> <span>Telecom Operators<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" data-category=\"career\">\r\n <i class=\"fas fa-briefcase\"><\/i> <span>Carrier Partner<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"partnersGridContainer\" class=\"partners-grid\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n const partnersData = {\r\n technology: [\r\n { name: 'Tech Partner 1', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/32ad30cf-0366-4a6b-91f5-b5ea0a0b3e7a-1-1.jpg' },\r\n { name: 'Tech Partner 2', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/32ad30cf-0366-4a6b-91f5-b5ea0a0b3e7a-1-2.jpg' },\r\n { name: 'Tech Partner 3', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/bigrock.png' },\r\n { name: 'Tech Partner 4', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/imgi_1_opensips.png' }\r\n ],\r\n telecom: [\r\n { name: 'Airtel', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/airtel.png' },\r\n { name: 'Aussie Broadband', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/aussie-brodbrand.png' },\r\n { name: 'Giacom', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/giacom.png' },\r\n { name: 'IDT', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/idt.jpg' }\r\n ],\r\n cloud: [\r\n { name: 'AWS', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/aws.png' },\r\n { name: 'Ionos Cloud', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/ionos-cloud.png' },\r\n { name: 'GCP', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/imgi_1_gcp.png' },\r\n { name: 'Database Mart', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/databasemart-logo.png' }\r\n ],\r\n career: [\r\n { name: 'Career Partner 1', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/cropped-Carrier2-smaller-1.png' },\r\n { name: 'Career Partner 2', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/06afe99c-f67f-4839-9670-2798669b4fff.png' },\r\n { name: 'Maniphone', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/maniphone.webp' },\r\n { name: 'Career Partner 4', logo: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/12524989-0384-4aeb-a5d5-21104bc41b2b.png' }\r\n ]\r\n };\r\n\r\n const container = document.getElementById('partnersGridContainer');\r\n const tabs = document.querySelectorAll('.tab-btn');\r\n\r\n function renderPartners(category) {\r\n const partners = partnersData[category] || [];\r\n\r\n if (partners.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"empty-state\">\r\n <i class=\"fas fa-building\"><\/i>\r\n No partners found in this category.\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n let html = '';\r\n partners.forEach((partner, index) => {\r\n html += `\r\n <div class=\"partner-item\" style=\"animation-delay: ${0.04 + (index * 0.04)}s\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"partner-logo-wrapper\">\r\n <div class=\"placeholder\"><\/div>\r\n <img \r\n src=\"${partner.logo}\" \r\n alt=\"${partner.name} logo\" \r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n onload=\"this.classList.add('loaded')\"\r\n onerror=\"this.style.display='none'\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n container.innerHTML = html;\r\n }\r\n\r\n function switchTab(category) {\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n if (tab.dataset.category === category) {\r\n tab.classList.add('active');\r\n }\r\n });\r\n\r\n container.classList.add('switching');\r\n\r\n setTimeout(() => {\r\n renderPartners(category);\r\n container.classList.remove('switching');\r\n }, 300);\r\n }\r\n\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function(e) {\r\n const category = this.dataset.category;\r\n if (!category) return;\r\n if (!this.classList.contains('active')) {\r\n switchTab(category);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Handle cached images\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const images = document.querySelectorAll('.partner-logo-wrapper img');\r\n images.forEach(img => {\r\n if (img.complete) {\r\n img.classList.add('loaded');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Initial render - technology tab\r\n tabs.forEach(tab => {\r\n tab.classList.remove('active');\r\n if (tab.dataset.category === 'technology') {\r\n tab.classList.add('active');\r\n }\r\n });\r\n renderPartners('technology');\r\n\r\n })();\r\n <\/script>\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-a01ed94 e-con-full e-flex e-con e-parent\" data-id=\"a01ed94\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acd72dd elementor-widget elementor-widget-html\" data-id=\"acd72dd\" 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 - Services 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: #F8F9FB;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .services, .services-inner, .services-header, .services-badge,\r\n .services-title, .services-subtitle, .services-grid, .service-card,\r\n .service-title, .service-desc, .icon-wrapper, .shine, .glow-overlay,\r\n .data-flow, .services-particles, .demo-spacer,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n SERVICES SECTION\r\n ======================================== *\/\r\n .services {\r\n padding: 50px 0;\r\n background: #F8F9FB;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .services::before {\r\n display: none;\r\n }\r\n\r\n .services-particles {\r\n display: none;\r\n }\r\n\r\n .services-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 .services-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .services-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 .services-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 .services-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .services-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 .services-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .services-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n SERVICES GRID\r\n ======================================== *\/\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n SERVICE CARD\r\n ======================================== *\/\r\n .service-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 .service-card:nth-child(1) { animation-delay: 0.05s; }\r\n .service-card:nth-child(2) { animation-delay: 0.10s; }\r\n .service-card:nth-child(3) { animation-delay: 0.15s; }\r\n .service-card:nth-child(4) { animation-delay: 0.20s; }\r\n .service-card:nth-child(5) { animation-delay: 0.25s; }\r\n .service-card:nth-child(6) { animation-delay: 0.30s; }\r\n .service-card:nth-child(7) { animation-delay: 0.35s; }\r\n .service-card:nth-child(8) { animation-delay: 0.40s; }\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 .service-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 .service-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .service-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 \/* ===== DATA FLOW ===== *\/\r\n .service-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .service-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON - #4D7DD1 BACKGROUND ===== *\/\r\n .service-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n .service-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 .service-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 .service-card:hover .icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .service-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 .service-card:hover .icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .service-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 .service-card:hover .icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .service-card .service-title {\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 .service-card:hover .service-title {\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 .service-card .service-desc {\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 .service-card:hover .service-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .service-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 .service-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .service-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 .service-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .services-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .services {\r\n padding: 60px 0;\r\n }\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .services-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .services {\r\n padding: 50px 0;\r\n }\r\n .services-inner {\r\n padding: 0 20px;\r\n }\r\n .services-header {\r\n margin-bottom: 36px;\r\n }\r\n .services-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .services-subtitle {\r\n font-size: 15px;\r\n }\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .service-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .service-card .service-title {\r\n font-size: 15px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .services {\r\n padding: 40px 0;\r\n }\r\n .services-inner {\r\n padding: 0 16px;\r\n }\r\n .services-header {\r\n margin-bottom: 28px;\r\n }\r\n .services-title {\r\n font-size: 24px;\r\n }\r\n .services-subtitle {\r\n font-size: 14px;\r\n }\r\n .services-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .service-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .service-card .icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .service-card .service-title {\r\n font-size: 13px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .services-grid {\r\n gap: 10px;\r\n }\r\n .service-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .service-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 .service-card .icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .service-card .service-title {\r\n font-size: 12px;\r\n }\r\n .service-card .service-desc {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"services\">\r\n <div class=\"services-inner\">\r\n\r\n <div class=\"services-header\">\r\n <div class=\"services-badge\">\r\n <span class=\"dot\"><\/span>Our Services\r\n <\/div>\r\n <h2 class=\"services-title\">\r\n What We <span class=\"highlight\">Offer<\/span>\r\n <\/h2>\r\n <p class=\"services-subtitle\">\r\n Comprehensive telecom solutions designed to power your business \r\n with reliability, security, and innovation.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">International Voice Termination<\/h3>\r\n <p class=\"service-desc\">High-quality voice termination with global reach and low latency<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-hashtag\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">DID Numbers<\/h3>\r\n <p class=\"service-desc\">Local virtual numbers in 150+ countries for global presence<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-link\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SIP Trunking<\/h3>\r\n <p class=\"service-desc\">Scalable SIP trunk solutions for seamless business communication<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-sms\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SMS Solutions<\/h3>\r\n <p class=\"service-desc\">Bulk SMS, OTP, and enterprise messaging with high deliverability<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-database\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Data Center Services<\/h3>\r\n <p class=\"service-desc\">Secure, scalable data center solutions with 99.9% uptime SLA<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-network-wired\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Managed Network Services<\/h3>\r\n <p class=\"service-desc\">End-to-end network management, monitoring, and optimization<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Cyber Security<\/h3>\r\n <p class=\"service-desc\">Advanced threat protection, DDoS mitigation, and security audits<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-sim-card\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">e-SIM<\/h3>\r\n <p class=\"service-desc\">Digital SIM solutions for travel, business, IoT, and M2M connectivity<\/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-7bf51f8 e-con-full e-flex e-con e-parent\" data-id=\"7bf51f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdacdf9 elementor-widget elementor-widget-html\" data-id=\"bdacdf9\" 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 - Industries Served<\/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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .industries, .industries-inner, .industries-header, .industries-badge,\r\n .industries-title, .industries-subtitle, .industries-grid, .industry-card,\r\n .industry-name, .icon-wrapper, .shine, .glow-overlay,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --icon-bg: #4D7DD1;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRIES SECTION\r\n ======================================== *\/\r\n .industries {\r\n padding: 40px 0;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .industries::before {\r\n display: none;\r\n }\r\n\r\n .industries-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 .industries-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n \/* Badge - Same as Others *\/\r\n .industries-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 .industries-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 .industries-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .industries-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 .industries-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .industries-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRIES GRID\r\n ======================================== *\/\r\n .industries-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n INDUSTRY CARD - Same as Services\r\n ======================================== *\/\r\n .industry-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 .industry-card:nth-child(1) { animation-delay: 0.05s; }\r\n .industry-card:nth-child(2) { animation-delay: 0.10s; }\r\n .industry-card:nth-child(3) { animation-delay: 0.15s; }\r\n .industry-card:nth-child(4) { animation-delay: 0.20s; }\r\n .industry-card:nth-child(5) { animation-delay: 0.25s; }\r\n .industry-card:nth-child(6) { animation-delay: 0.30s; }\r\n .industry-card:nth-child(7) { animation-delay: 0.35s; }\r\n .industry-card:nth-child(8) { animation-delay: 0.40s; }\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 - Same as Services *\/\r\n .industry-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 .industry-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .industry-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 \/* ===== DATA FLOW ANIMATION ===== *\/\r\n .industry-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .industry-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAPPER - #4D7DD1 BACKGROUND ===== *\/\r\n .industry-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(--icon-bg);\r\n color: var(--icon-bg);\r\n }\r\n\r\n \/* Animated Glow Ring *\/\r\n .industry-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 .industry-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 .industry-card:hover .icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .industry-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 .industry-card:hover .icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .industry-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 .industry-card:hover .icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== INDUSTRY NAME ===== *\/\r\n .industry-card .industry-name {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .industry-card:hover .industry-name {\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 \/* ===== SHINE EFFECT ===== *\/\r\n .industry-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 .industry-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .industry-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 .industry-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .industries-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .industries {\r\n padding: 60px 0;\r\n }\r\n .industries-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .industries-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .industries {\r\n padding: 50px 0;\r\n }\r\n .industries-inner {\r\n padding: 0 20px;\r\n }\r\n .industries-header {\r\n margin-bottom: 36px;\r\n }\r\n .industries-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .industries-subtitle {\r\n font-size: 15px;\r\n }\r\n .industries-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .industry-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .industry-card .industry-name {\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .industries {\r\n padding: 40px 0;\r\n }\r\n .industries-inner {\r\n padding: 0 16px;\r\n }\r\n .industries-header {\r\n margin-bottom: 28px;\r\n }\r\n .industries-title {\r\n font-size: 24px;\r\n }\r\n .industries-subtitle {\r\n font-size: 14px;\r\n }\r\n .industries-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .industry-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .industry-card .icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .industry-card .industry-name {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .industries-grid {\r\n gap: 10px;\r\n }\r\n .industry-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .industry-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 .industry-card .icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .industry-card .industry-name {\r\n font-size: 12px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"industries\">\r\n <div class=\"industries-inner\">\r\n\r\n <div class=\"industries-header\">\r\n <div class=\"industries-badge\">\r\n <span class=\"dot\"><\/span>\r\n Industries We Serve\r\n <\/div>\r\n <h2 class=\"industries-title\">\r\n Industries <span class=\"highlight\">Served<\/span>\r\n <\/h2>\r\n <p class=\"industries-subtitle\">\r\n Empowering businesses across diverse sectors with reliable \r\n telecom and technology solutions.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"industries-grid\">\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-tower-broadcast\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Telecom Operators<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Enterprises<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-university\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Financial Services<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-heartbeat\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Healthcare<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-landmark\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Government<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-hotel\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Hospitality<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Education<\/h3>\r\n <\/div>\r\n\r\n \r\n <div class=\"industry-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrapper\">\r\n <i class=\"fas fa-store\"><\/i>\r\n <\/div>\r\n <h3 class=\"industry-name\">Retail<\/h3>\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-47777be e-con-full e-flex e-con e-parent\" data-id=\"47777be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbe6e8c elementor-widget elementor-widget-html\" data-id=\"fbe6e8c\" 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 - Global Presence<\/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 \r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.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: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .global, .global-inner, .global-header, .global-badge,\r\n .global-title, .global-subtitle, .map-wrapper, .legend,\r\n .legend-item, .location-cards, .location-card,\r\n h1, h2, h3, h4, p, a, span, li, div {\r\n font-family: 'Inter', sans-serif !important;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #4D7CD1;\r\n --hq-color: #4D7DD1;\r\n --pop-color: #932DB9;\r\n }\r\n\r\n \/* ========================================\r\n GLOBAL PRESENCE SECTION\r\n ======================================== *\/\r\n .global {\r\n padding: 40px 0 60px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .global::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 .global-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 .global-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .global-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 .global-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 .global-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .global-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 .global-title .highlight {\r\n color: var(--dark);\r\n background: none;\r\n -webkit-background-clip: unset;\r\n -webkit-text-fill-color: unset;\r\n background-clip: unset;\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n MAP WRAPPER\r\n ======================================== *\/\r\n .map-wrapper {\r\n position: relative;\r\n width: 100%;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);\r\n border: 1px solid var(--border);\r\n background: #e8edf2;\r\n margin-bottom: 32px;\r\n }\r\n\r\n #map {\r\n width: 100%;\r\n height: 480px;\r\n z-index: 1;\r\n }\r\n\r\n \/* Leaflet popup styles *\/\r\n .leaflet-popup-content-wrapper {\r\n border-radius: 12px !important;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n .leaflet-popup-content {\r\n font-family: 'Inter', sans-serif !important;\r\n padding: 8px 4px !important;\r\n }\r\n\r\n .leaflet-popup-content strong {\r\n color: var(--dark);\r\n font-size: 15px;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .leaflet-popup-content span {\r\n color: var(--gray);\r\n font-size: 13px;\r\n }\r\n\r\n .leaflet-popup-content .popup-tag {\r\n display: inline-block;\r\n color: #fff;\r\n font-size: 10px;\r\n font-weight: 600;\r\n padding: 2px 10px;\r\n border-radius: 100px;\r\n margin-top: 4px;\r\n }\r\n\r\n .leaflet-popup-content .popup-tag.hq { background: var(--hq-color); }\r\n .leaflet-popup-content .popup-tag.pop { background: var(--pop-color); }\r\n\r\n .leaflet-popup-tip {\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;\r\n }\r\n\r\n \/* Custom Marker Icons *\/\r\n .custom-marker {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 18px;\r\n color: #fff;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\r\n border: 3px solid #fff;\r\n transition: transform 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .custom-marker::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 0;\r\n border-left: 8px solid transparent;\r\n border-right: 8px solid transparent;\r\n border-top: 10px solid currentColor;\r\n opacity: 0.8;\r\n }\r\n\r\n .custom-marker:hover {\r\n transform: scale(1.15);\r\n }\r\n\r\n .custom-marker.hq {\r\n background: var(--hq-color);\r\n color: var(--hq-color);\r\n box-shadow: 0 4px 20px rgba(77, 125, 209, 0.35);\r\n }\r\n\r\n .custom-marker.pop {\r\n background: var(--pop-color);\r\n color: var(--pop-color);\r\n box-shadow: 0 4px 20px rgba(147, 45, 185, 0.35);\r\n }\r\n\r\n .custom-marker i {\r\n font-size: 16px;\r\n color: #fff;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== LEGEND ===== *\/\r\n .legend {\r\n display: flex;\r\n justify-content: center;\r\n gap: 28px;\r\n flex-wrap: wrap;\r\n padding: 16px 0 0;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n color: var(--gray);\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n border: 2px solid rgba(255, 255, 255, 0.8);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .legend-item .color-dot.hq { background: var(--hq-color); }\r\n .legend-item .color-dot.pop { background: var(--pop-color); }\r\n\r\n \/* ========================================\r\n LOCATION CARDS\r\n ======================================== *\/\r\n .location-cards {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n margin-top: 8px;\r\n }\r\n\r\n .location-card {\r\n background: var(--white);\r\n padding: 30px 22px 26px;\r\n border-radius: 16px;\r\n border: 1px solid var(--border);\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\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 .location-card:nth-child(1) { animation-delay: 0.2s; }\r\n .location-card:nth-child(2) { animation-delay: 0.3s; }\r\n .location-card:nth-child(3) { animation-delay: 0.4s; }\r\n .location-card:nth-child(4) { animation-delay: 0.5s; }\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 .location-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 .location-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .location-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n \/* Data flow line *\/\r\n .location-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--purple), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .location-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAP - HQ (Blue) ===== *\/\r\n .location-card[data-type=\"hq\"] .icon-wrap {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .icon-wrap::after {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .icon-wrap::before {\r\n border-color: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"] .tag {\r\n background: var(--hq-color);\r\n }\r\n\r\n .location-card[data-type=\"hq\"]:hover h3 {\r\n background: linear-gradient(135deg, var(--hq-color), #6B8FD4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== ICON WRAP - POP (Purple) ===== *\/\r\n .location-card[data-type=\"pop\"] .icon-wrap {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .icon-wrap::after {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .icon-wrap::before {\r\n border-color: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"] .tag {\r\n background: var(--pop-color);\r\n }\r\n\r\n .location-card[data-type=\"pop\"]:hover h3 {\r\n background: linear-gradient(135deg, var(--pop-color), #B84AD4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== ICON WRAP - COMMON STYLES ===== *\/\r\n .location-card .icon-wrap {\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 }\r\n\r\n .location-card .icon-wrap::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 .location-card .icon-wrap::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\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 .location-card:hover .icon-wrap {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .location-card:hover .icon-wrap::before {\r\n opacity: 1;\r\n transform: scale(1.05);\r\n }\r\n\r\n .location-card:hover .icon-wrap::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .location-card .icon-wrap 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 .location-card:hover .icon-wrap i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .location-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 .location-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .location-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 .location-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 2px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .location-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 .location-card:hover p {\r\n color: var(--gray);\r\n }\r\n\r\n .location-card .tag {\r\n display: inline-block;\r\n font-size: 10px;\r\n font-weight: 600;\r\n padding: 2px 12px;\r\n border-radius: 100px;\r\n margin-top: 8px;\r\n color: #fff;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .global {\r\n padding: 60px 0;\r\n }\r\n\r\n #map {\r\n height: 380px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .legend {\r\n gap: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .global {\r\n padding: 50px 0;\r\n }\r\n\r\n .global-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .global-header {\r\n margin-bottom: 32px;\r\n }\r\n\r\n .global-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n #map {\r\n height: 300px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .location-card {\r\n padding: 22px 16px 18px;\r\n border-radius: 14px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 20px;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 15px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 13px;\r\n }\r\n\r\n .legend {\r\n gap: 14px;\r\n }\r\n\r\n .legend-item {\r\n font-size: 12px;\r\n gap: 6px;\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .global {\r\n padding: 40px 0;\r\n }\r\n\r\n .global-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .global-header {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .global-title {\r\n font-size: 24px;\r\n }\r\n\r\n .global-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .global-badge {\r\n font-size: 10px;\r\n }\r\n\r\n #map {\r\n height: 280px;\r\n }\r\n\r\n .location-cards {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .location-card {\r\n padding: 18px 12px 14px;\r\n border-radius: 12px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 16px;\r\n }\r\n\r\n .location-card .icon-wrap::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .location-card .tag {\r\n font-size: 8px;\r\n padding: 1px 8px;\r\n margin-top: 4px;\r\n }\r\n\r\n .legend {\r\n gap: 10px;\r\n padding-top: 10px;\r\n }\r\n\r\n .legend-item {\r\n font-size: 10px;\r\n gap: 4px;\r\n }\r\n\r\n .legend-item .color-dot {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .location-cards {\r\n gap: 10px;\r\n }\r\n\r\n .location-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n\r\n .location-card .icon-wrap {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .location-card .icon-wrap i {\r\n font-size: 13px;\r\n }\r\n\r\n .location-card h3 {\r\n font-size: 12px;\r\n }\r\n\r\n .location-card p {\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n .custom-marker-icon {\r\n background: none !important;\r\n border: none !important;\r\n }\r\n\r\n \/* Leaflet attribution hidden *\/\r\n .leaflet-control-attribution {\r\n display: none !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"global\">\r\n <div class=\"global-inner\">\r\n\r\n \r\n <div class=\"global-header\">\r\n <div class=\"global-badge\">\r\n <span class=\"dot\"><\/span>\r\n Global Presence\r\n <\/div>\r\n <h2 class=\"global-title\">\r\n Our <span class=\"highlight\">Global Footprint<\/span>\r\n <\/h2>\r\n <p class=\"global-subtitle\">\r\n Connecting businesses worldwide with our headquarters and \r\n network POP locations across the globe.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"map-wrapper\">\r\n <div id=\"map\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"legend\">\r\n <div class=\"legend-item\">\r\n <span class=\"color-dot hq\"><\/span>\r\n Headquarters\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <span class=\"color-dot pop\"><\/span>\r\n POP Locations (Network POP)\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-cards\">\r\n\r\n \r\n <div class=\"location-card\" data-type=\"hq\" data-lat=\"51.530648\" data-lng=\"-0.0961285\" data-zoom=\"15\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <h3>London, UK<\/h3>\r\n <p>20-22 Wenlock Road<\/p>\r\n <span class=\"tag\">Headquarters<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"38.8951\" data-lng=\"-77.0369\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>USA<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"1.3521\" data-lng=\"103.8198\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>Singapore<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"location-card\" data-type=\"pop\" data-lat=\"52.3555\" data-lng=\"-1.1743\" data-zoom=\"4\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"icon-wrap\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <h3>UK<\/h3>\r\n <p>Network POP Location<\/p>\r\n <span class=\"tag\">POP<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ ===== INITIALIZE MAP =====\r\n var map = L.map('map', {\r\n center: [20, 0],\r\n zoom: 2,\r\n zoomControl: true,\r\n scrollWheelZoom: true,\r\n attributionControl: false\r\n });\r\n\r\n \/\/ ===== TILE LAYER =====\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n maxZoom: 19,\r\n minZoom: 2,\r\n attribution: ''\r\n }).addTo(map);\r\n\r\n \/\/ ===== CUSTOM ICON FUNCTION =====\r\n function createCustomIcon(type) {\r\n var isHQ = type === 'hq';\r\n var iconHtml = `\r\n <div class=\"custom-marker ${type}\">\r\n <i class=\"fas ${isHQ ? 'fa-building' : 'fa-server'}\"><\/i>\r\n <\/div>\r\n `;\r\n return L.divIcon({\r\n html: iconHtml,\r\n className: 'custom-marker-icon',\r\n iconSize: [40, 40],\r\n iconAnchor: [20, 40],\r\n popupAnchor: [0, -40]\r\n });\r\n }\r\n\r\n \/\/ ===== LOCATIONS =====\r\n var locations = [\r\n {\r\n lat: 51.530648,\r\n lng: -0.0961285,\r\n name: 'Infinexy Technologies Ltd',\r\n address: '20-22 Wenlock Road, London, UK',\r\n type: 'hq',\r\n tag: 'Headquarters',\r\n phone: '+44 7875 213516',\r\n website: 'infinexy.com'\r\n },\r\n {\r\n lat: 38.8951,\r\n lng: -77.0369,\r\n name: 'Network POP',\r\n address: 'USA - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n },\r\n {\r\n lat: 1.3521,\r\n lng: 103.8198,\r\n name: 'Network POP',\r\n address: 'Singapore - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n },\r\n {\r\n lat: 52.3555,\r\n lng: -1.1743,\r\n name: 'Network POP',\r\n address: 'UK - Network Point of Presence',\r\n type: 'pop',\r\n tag: 'POP Location'\r\n }\r\n ];\r\n\r\n \/\/ ===== ADD MARKERS =====\r\n locations.forEach(function(loc) {\r\n var icon = createCustomIcon(loc.type);\r\n var marker = L.marker([loc.lat, loc.lng], { icon: icon }).addTo(map);\r\n\r\n var popupContent = `\r\n <div style=\"min-width:200px; padding:4px 0;\">\r\n <strong style=\"font-size:15px; color:#0a1a2f; display:block; margin-bottom:2px;\">${loc.name}<\/strong>\r\n <span style=\"font-size:13px; color:#475569; display:block;\">${loc.address}<\/span>\r\n `;\r\n\r\n if (loc.phone) {\r\n popupContent += `\r\n <span style=\"font-size:12px; color:#94a3b8; display:block; margin-top:4px;\">\r\n <i class=\"fas fa-phone\" style=\"font-size:11px;\"><\/i> ${loc.phone}\r\n <\/span>\r\n `;\r\n }\r\n\r\n if (loc.website) {\r\n popupContent += `\r\n <span style=\"font-size:12px; color:#94a3b8; display:block; margin-top:2px;\">\r\n <i class=\"fas fa-globe\" style=\"font-size:11px;\"><\/i> ${loc.website}\r\n <\/span>\r\n `;\r\n }\r\n\r\n popupContent += `\r\n <span class=\"popup-tag ${loc.type}\">${loc.tag}<\/span>\r\n <\/div>\r\n `;\r\n\r\n marker.bindPopup(popupContent, {\r\n maxWidth: 300,\r\n className: 'custom-popup'\r\n });\r\n });\r\n\r\n \/\/ ===== FIX MAP SIZE =====\r\n function fixMapSize() {\r\n setTimeout(function() {\r\n map.invalidateSize();\r\n }, 100);\r\n }\r\n\r\n window.addEventListener('load', fixMapSize);\r\n window.addEventListener('resize', function() {\r\n setTimeout(function() {\r\n map.invalidateSize();\r\n }, 200);\r\n });\r\n\r\n if (document.fonts) {\r\n document.fonts.ready.then(function() {\r\n fixMapSize();\r\n });\r\n }\r\n\r\n \/\/ ===== ZOOM TO LOCATION ON CARD CLICK =====\r\n var cards = document.querySelectorAll('.location-card');\r\n cards.forEach(function(card) {\r\n card.addEventListener('click', function() {\r\n var lat = parseFloat(this.dataset.lat);\r\n var lng = parseFloat(this.dataset.lng);\r\n var zoom = parseInt(this.dataset.zoom) || 6;\r\n \r\n if (!isNaN(lat) && !isNaN(lng)) {\r\n map.flyTo([lat, lng], zoom, {\r\n duration: 1.5\r\n });\r\n \r\n setTimeout(function() {\r\n map.eachLayer(function(layer) {\r\n if (layer instanceof L.Marker) {\r\n var latLng = layer.getLatLng();\r\n if (Math.abs(latLng.lat - lat) < 0.01 && Math.abs(latLng.lng - lng) < 0.01) {\r\n layer.openPopup();\r\n }\r\n }\r\n });\r\n }, 1600);\r\n }\r\n });\r\n });\r\n\r\n setTimeout(fixMapSize, 1000);\r\n\r\n });\r\n <\/script>\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-00ea230 e-con-full e-flex e-con e-parent\" data-id=\"00ea230\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a445b elementor-widget elementor-widget-html\" data-id=\"d5a445b\" 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 - Contact CTA<\/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 !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Force Inter on all elements *\/\r\n body, .cta, .cta-wrapper, .cta-badge, .cta-title, \r\n .cta-subtitle, .cta-btn, .cta-stats, .cta-stat,\r\n .cta-contact-info {\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --sky: #1BAEEE;\r\n --stat-color: #864ABA;\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 --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n }\r\n .cta {\r\n padding: 50px 0;\r\n background: #F8F9FB;\r\n position: relative;\r\n }\r\n\r\n .cta-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n }\r\n\r\n \/* ===== CTA WRAPPER ===== *\/\r\n .cta-wrapper {\r\n background: var(--white);\r\n border-radius: 24px;\r\n padding: 64px 40px;\r\n border: 1px solid var(--border);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 50px;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .cta-wrapper:hover {\r\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n \/* ===== LEFT SIDE ===== *\/\r\n .cta-left {\r\n position: relative;\r\n }\r\n\r\n \/* Title - Full Black *\/\r\n .cta-title {\r\n font-size: clamp(28px, 3.2vw, 38px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.15;\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* \"telecom business\" - Black, Hover Color Change Only *\/\r\n .cta-title .highlight {\r\n color: var(--dark);\r\n transition: color 0.3s ease;\r\n cursor: default;\r\n }\r\n\r\n .cta-title:hover .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* Subtitle *\/\r\n .cta-subtitle {\r\n font-size: 16px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n max-width: 420px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* ===== STATS - Numbers #864ABA ===== *\/\r\n .cta-stats {\r\n display: flex;\r\n gap: 40px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 24px;\r\n font-weight: 800;\r\n color: var(--stat-color);\r\n line-height: 1.2;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n font-weight: 400;\r\n }\r\n\r\n \/* ===== RIGHT SIDE ===== *\/\r\n .cta-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 20px;\r\n }\r\n\r\n \/* ===== BUTTON - NO RISE ON HOVER ===== *\/\r\n .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 16px 44px;\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 width: 100%;\r\n justify-content: center;\r\n max-width: 320px;\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 40px rgba(142, 36, 170, 0.30);\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 \/* ===== CONTACT INFO ===== *\/\r\n .cta-contact-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 13px;\r\n color: var(--gray-light);\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-contact-info .divider {\r\n color: var(--border);\r\n }\r\n\r\n .cta-contact-info a {\r\n color: var(--gray);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .cta-contact-info a:hover {\r\n color: var(--purple);\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .cta-wrapper {\r\n padding: 50px 50px;\r\n gap: 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .cta {\r\n padding: 70px 0;\r\n }\r\n\r\n .cta-wrapper {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n padding: 40px 36px;\r\n text-align: center;\r\n }\r\n\r\n .cta-left {\r\n text-align: center;\r\n }\r\n\r\n .cta-subtitle {\r\n max-width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-stats {\r\n justify-content: center;\r\n }\r\n\r\n .cta-right {\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n \/* Button smaller on tablet *\/\r\n .cta-btn {\r\n padding: 14px 32px;\r\n font-size: 14px;\r\n max-width: 280px;\r\n }\r\n\r\n .cta-contact-info {\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .cta {\r\n padding: 50px 0;\r\n }\r\n\r\n .cta-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .cta-wrapper {\r\n padding: 30px 24px;\r\n border-radius: 20px;\r\n }\r\n\r\n .cta-title {\r\n font-size: clamp(24px, 6vw, 28px);\r\n }\r\n\r\n .cta-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .cta-stats {\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 20px;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 12px;\r\n }\r\n\r\n \/* Button smaller on mobile *\/\r\n .cta-btn {\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n max-width: 260px;\r\n }\r\n\r\n .cta-contact-info {\r\n font-size: 12px;\r\n gap: 8px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .cta {\r\n padding: 40px 0;\r\n }\r\n\r\n .cta-inner {\r\n padding: 0 16px;\r\n }\r\n\r\n .cta-wrapper {\r\n padding: 24px 16px;\r\n border-radius: 16px;\r\n }\r\n\r\n .cta-title {\r\n font-size: 22px;\r\n }\r\n\r\n .cta-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .cta-stats {\r\n gap: 14px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-stat {\r\n text-align: center;\r\n }\r\n\r\n .cta-stat .number {\r\n font-size: 18px;\r\n }\r\n\r\n .cta-stat .label {\r\n font-size: 11px;\r\n }\r\n\r\n \/* Button smaller on mobile small *\/\r\n .cta-btn {\r\n padding: 10px 18px;\r\n font-size: 13px;\r\n max-width: 220px;\r\n gap: 8px;\r\n }\r\n\r\n .cta-btn i {\r\n font-size: 12px;\r\n }\r\n\r\n \/* Email & Phone side by side *\/\r\n .cta-contact-info {\r\n font-size: 11px;\r\n gap: 6px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-contact-info .divider {\r\n display: none;\r\n }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"cta\">\r\n <div class=\"cta-inner\">\r\n\r\n <div class=\"cta-wrapper\">\r\n\r\n \r\n <div class=\"cta-left\">\r\n\r\n \r\n <h2 class=\"cta-title\">\r\n Ready to grow your <span class=\"highlight\">telecom business<\/span>?\r\n <\/h2>\r\n\r\n \r\n <p class=\"cta-subtitle\">\r\n Partner with Infinexy to scale your operations globally \r\n with reliable, secure, and innovative telecom solutions.\r\n <\/p>\r\n\r\n \r\n <div class=\"cta-stats\">\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">500+<\/span>\r\n <span class=\"label\">Carrier Partners<\/span>\r\n <\/div>\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">150+<\/span>\r\n <span class=\"label\">Countries<\/span>\r\n <\/div>\r\n <div class=\"cta-stat\">\r\n <span class=\"number\">99.9%<\/span>\r\n <span class=\"label\">Uptime<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-right\">\r\n\r\n \r\n <a href=\"#\" class=\"cta-btn\">\r\n <span>Contact Sales<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n\r\n \r\n <div class=\"cta-contact-info\">\r\n <span>\ud83d\udce7 <a href=\"mailto:sales@infinexy.net\">sales@infinexy.net<\/a><\/span>\r\n <span class=\"divider\">|<\/span>\r\n <span>\ud83d\udcde <a href=\"tel:+44 20 8058 7982\">+44 20 8058 7982<\/a><\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infinexy – Hero Section Connecting the World with Intelligent Telecom Solutions Global Voice, Cloud Communications, Network Infrastructure, and Digital Transformation Services. Request a Quote Contact Sales Explore Solutions 99.9% Uptime 150+ Countries 24\/7 Support Global Voice HD Quality Cloud Comms Secure & Scalable UK Infrastructure Nationwide Coverage Infinexy – About Section Global Reach 150+ Countries […]<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8","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=8"}],"version-history":[{"count":315,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":2293,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/8\/revisions\/2293"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}