{"id":1476,"date":"2026-07-27T09:23:03","date_gmt":"2026-07-27T09:23:03","guid":{"rendered":"https:\/\/w3webhelp.in\/sample\/Infinexy\/?page_id=1476"},"modified":"2026-08-19T13:07:07","modified_gmt":"2026-08-19T13:07:07","slug":"support","status":"publish","type":"page","link":"https:\/\/w3webhelp.in\/sample\/Infinexy\/support\/","title":{"rendered":"Support"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Infinexy - Support<\/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: #f0f4f8;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --mix-color: #864ABA;\r\n --border: #e5e7eb;\r\n }\r\n .support-banner {\r\n position: relative;\r\n min-height: 65vh;\r\n display: flex;\r\n align-items: center;\r\n background: linear-gradient(135deg, var(--badge-color) 0%, var(--mix-color) 100%);\r\n overflow: hidden;\r\n padding: 100px 0 80px;\r\n }\r\n\r\n \/* 1. FLOATING ORBS *\/\r\n .support-banner .orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: orbFloat 8s ease-in-out infinite;\r\n }\r\n\r\n .support-banner .orb-1 {\r\n width: 200px;\r\n height: 200px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\r\n top: -50px;\r\n right: -50px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-banner .orb-2 {\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);\r\n bottom: -100px;\r\n left: -100px;\r\n animation-delay: 3s;\r\n }\r\n\r\n .support-banner .orb-3 {\r\n width: 150px;\r\n height: 150px;\r\n background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);\r\n top: 40%;\r\n left: 60%;\r\n animation-delay: 5s;\r\n }\r\n\r\n @keyframes orbFloat {\r\n 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }\r\n 50% { transform: translate(30px, -40px) scale(1.2); opacity: 1; }\r\n }\r\n\r\n \/* 2. ROTATING RING *\/\r\n .support-banner .ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: ringSpin 20s linear infinite;\r\n }\r\n\r\n .support-banner .ring-1 {\r\n width: 400px;\r\n height: 400px;\r\n top: -100px;\r\n right: -100px;\r\n animation-duration: 25s;\r\n }\r\n\r\n .support-banner .ring-2 {\r\n width: 600px;\r\n height: 600px;\r\n bottom: -200px;\r\n left: -200px;\r\n animation-duration: 35s;\r\n animation-direction: reverse;\r\n }\r\n\r\n .support-banner .ring-3 {\r\n width: 250px;\r\n height: 250px;\r\n top: 50%;\r\n left: 70%;\r\n animation-duration: 15s;\r\n border-color: rgba(255,255,255,0.05);\r\n }\r\n\r\n .support-banner .ring::before {\r\n content: '';\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2);\r\n top: -4px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n box-shadow: 0 0 30px rgba(255,255,255,0.1);\r\n }\r\n\r\n @keyframes ringSpin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* 3. SHOOTING STARS *\/\r\n .support-banner .shooting-star {\r\n position: absolute;\r\n width: 2px;\r\n height: 2px;\r\n background: #fff;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: shootStar 4s linear infinite;\r\n }\r\n\r\n .support-banner .shooting-star::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n width: 60px;\r\n height: 1px;\r\n background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);\r\n transform: translateY(-50%);\r\n }\r\n\r\n .support-banner .shooting-star:nth-child(1) {\r\n top: 15%;\r\n left: 10%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-banner .shooting-star:nth-child(2) {\r\n top: 25%;\r\n right: 15%;\r\n animation-delay: 2s;\r\n animation-duration: 5s;\r\n }\r\n\r\n .support-banner .shooting-star:nth-child(3) {\r\n top: 55%;\r\n left: 5%;\r\n animation-delay: 4s;\r\n animation-duration: 3.5s;\r\n }\r\n\r\n .support-banner .shooting-star:nth-child(4) {\r\n top: 70%;\r\n right: 10%;\r\n animation-delay: 1.5s;\r\n animation-duration: 4.5s;\r\n }\r\n\r\n @keyframes shootStar {\r\n 0% { transform: translate(0, 0) scale(1); opacity: 0; }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 1; }\r\n 100% { transform: translate(-200px, 200px) scale(0); opacity: 0; }\r\n }\r\n\r\n \/* 4. FLOATING PARTICLES *\/\r\n .support-banner .particle {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.05);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: particleFloat 12s ease-in-out infinite;\r\n }\r\n\r\n .support-banner .particle:nth-child(1) {\r\n width: 4px;\r\n height: 4px;\r\n top: 10%;\r\n left: 20%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-banner .particle:nth-child(2) {\r\n width: 6px;\r\n height: 6px;\r\n top: 20%;\r\n right: 30%;\r\n animation-delay: 2s;\r\n }\r\n\r\n .support-banner .particle:nth-child(3) {\r\n width: 3px;\r\n height: 3px;\r\n bottom: 15%;\r\n left: 40%;\r\n animation-delay: 4s;\r\n }\r\n\r\n .support-banner .particle:nth-child(4) {\r\n width: 5px;\r\n height: 5px;\r\n bottom: 10%;\r\n right: 25%;\r\n animation-delay: 6s;\r\n }\r\n\r\n .support-banner .particle:nth-child(5) {\r\n width: 4px;\r\n height: 4px;\r\n top: 45%;\r\n left: 55%;\r\n animation-delay: 8s;\r\n }\r\n\r\n .support-banner .particle:nth-child(6) {\r\n width: 3px;\r\n height: 3px;\r\n top: 60%;\r\n right: 40%;\r\n animation-delay: 10s;\r\n }\r\n\r\n @keyframes particleFloat {\r\n 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.03; }\r\n 25% { transform: translate(80px, -60px) scale(2); opacity: 0.08; }\r\n 50% { transform: translate(-40px, 40px) scale(0.5); opacity: 0.01; }\r\n 75% { transform: translate(60px, 80px) scale(1.5); opacity: 0.06; }\r\n }\r\n\r\n \/* 5. PULSE DOTS *\/\r\n .support-banner .pulse-dot {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: pulseDot 3s ease-in-out infinite;\r\n }\r\n\r\n .support-banner .pulse-dot:nth-child(1) {\r\n width: 12px;\r\n height: 12px;\r\n top: 8%;\r\n left: 8%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-banner .pulse-dot:nth-child(2) {\r\n width: 8px;\r\n height: 8px;\r\n top: 30%;\r\n right: 12%;\r\n animation-delay: 0.8s;\r\n }\r\n\r\n .support-banner .pulse-dot:nth-child(3) {\r\n width: 16px;\r\n height: 16px;\r\n bottom: 20%;\r\n left: 5%;\r\n animation-delay: 1.6s;\r\n }\r\n\r\n .support-banner .pulse-dot:nth-child(4) {\r\n width: 10px;\r\n height: 10px;\r\n bottom: 40%;\r\n right: 8%;\r\n animation-delay: 2.4s;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%, 100% { transform: scale(1); opacity: 0.05; }\r\n 50% { transform: scale(2.5); opacity: 0.15; box-shadow: 0 0 40px rgba(255,255,255,0.05); }\r\n }\r\n\r\n \/* 6. TECH SHAPES *\/\r\n .support-banner .tech-shape {\r\n position: absolute;\r\n border: 1.5px solid rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n z-index: 0;\r\n animation: techShapeFloat 15s ease-in-out infinite;\r\n }\r\n\r\n .support-banner .tech-shape:nth-child(1) {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 20px;\r\n top: 20%;\r\n right: 15%;\r\n animation-delay: 0s;\r\n transform: rotate(45deg);\r\n }\r\n\r\n .support-banner .tech-shape:nth-child(2) {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n bottom: 25%;\r\n left: 20%;\r\n animation-delay: 3s;\r\n }\r\n\r\n .support-banner .tech-shape:nth-child(3) {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n top: 55%;\r\n right: 30%;\r\n animation-delay: 6s;\r\n transform: rotate(30deg);\r\n }\r\n\r\n @keyframes techShapeFloat {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.04; }\r\n 33% { transform: translate(50px, -40px) rotate(15deg) scale(1.1); opacity: 0.08; }\r\n 66% { transform: translate(-30px, 30px) rotate(-8deg) scale(0.9); opacity: 0.05; }\r\n }\r\n\r\n \/* 7. GLOW PULSE RING *\/\r\n .support-banner .glow-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);\r\n animation: glowRingPulse 5s ease-in-out infinite;\r\n }\r\n\r\n .support-banner .glow-ring:nth-child(1) {\r\n width: 350px;\r\n height: 350px;\r\n top: 10%;\r\n right: 5%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-banner .glow-ring:nth-child(2) {\r\n width: 450px;\r\n height: 450px;\r\n bottom: 5%;\r\n left: 5%;\r\n animation-delay: 2.5s;\r\n }\r\n\r\n @keyframes glowRingPulse {\r\n 0%, 100% { transform: scale(0.8); opacity: 0.3; }\r\n 50% { transform: scale(1.2); opacity: 0.8; }\r\n }\r\n\r\n \/* 8. GRID OVERLAY *\/\r\n .support-banner .grid-overlay {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n opacity: 0.03;\r\n background-image: \r\n linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n animation: gridMove 30s linear infinite;\r\n }\r\n\r\n @keyframes gridMove {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(50px, 50px); }\r\n }\r\n\r\n .support-banner .banner-inner {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n width: 100%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n \/* Left content (text) *\/\r\n .support-banner .banner-content {\r\n flex: 1 1 55%;\r\n max-width: 680px;\r\n animation: fadeInUp 0.7s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Right image container *\/\r\n .support-banner .banner-image {\r\n flex: 1 1 35%;\r\n max-width: 450px;\r\n margin-left: 30px;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .support-banner .banner-image img {\r\n width: 90%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .support-banner .banner-image img:hover {\r\n transform: scale(1.02);\r\n box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n \/* ===== BREADCRUMB ===== *\/\r\n .support-banner .breadcrumb {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease forwards;\r\n opacity: 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .support-banner .breadcrumb a {\r\n color: rgba(255,255,255,0.6);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n font-weight: 400;\r\n }\r\n\r\n .support-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.9);\r\n }\r\n\r\n .support-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n font-size: 10px;\r\n }\r\n\r\n .support-banner .breadcrumb .current {\r\n color: rgba(255,255,255,0.9);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== CONTENT ===== *\/\r\n .support-banner .heading {\r\n font-size: clamp(36px, 5vw, 56px);\r\n font-weight: 900;\r\n line-height: 1.08;\r\n color: #ffffff;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .support-banner .heading .highlight {\r\n background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.6));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .support-banner .description {\r\n font-size: clamp(16px, 1.1vw, 19px);\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.7);\r\n max-width: 600px;\r\n margin-bottom: 28px;\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\r\n @media (min-width: 1400px) {\r\n .support-banner { padding: 120px 0 100px; min-height: 70vh; }\r\n .support-banner .heading { font-size: 62px; }\r\n .support-banner .ring-1 { width: 500px; height: 500px; }\r\n .support-banner .ring-2 { width: 700px; height: 700px; }\r\n }\r\n\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .support-banner { padding: 100px 0 80px; min-height: 65vh; }\r\n .support-banner .heading { font-size: 52px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .support-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .support-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .support-banner .ring-2 { display: none; }\r\n .support-banner .glow-ring { display: none; }\r\n .support-banner .banner-image { flex: 1 1 40%; max-width: 400px; }\r\n .support-banner .banner-content { flex: 1 1 55%; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .support-banner { min-height: auto; padding: 70px 0 50px; }\r\n .support-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .support-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .support-banner .banner-image { \r\n flex: 1 1 100%; \r\n max-width: 100%; \r\n margin-left: 0; \r\n margin-top: 40px;\r\n }\r\n .support-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .support-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .support-banner .breadcrumb { justify-content: center; }\r\n .support-banner .orb-2 { display: none; }\r\n .support-banner .ring-1 { display: none; }\r\n .support-banner .ring-3 { display: none; }\r\n .support-banner .shooting-star { display: none; }\r\n .support-banner .tech-shape { display: none; }\r\n .support-banner .grid-overlay { display: none; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .support-banner { padding: 50px 0 40px; }\r\n .support-banner .banner-inner { padding: 0 20px; }\r\n .support-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .support-banner .description { font-size: 15px; line-height: 1.7; }\r\n .support-banner .breadcrumb { font-size: 12px; }\r\n .support-banner .orb-1 { width: 120px; height: 120px; }\r\n .support-banner .orb-3 { display: none; }\r\n .support-banner .particle { display: none; }\r\n .support-banner .pulse-dot { display: none; }\r\n .support-banner .banner-image img { max-width: 320px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .support-banner { padding: 40px 0 30px; }\r\n .support-banner .banner-inner { padding: 0 16px; }\r\n .support-banner .heading { font-size: 26px; }\r\n .support-banner .description { font-size: 14px; }\r\n .support-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; }\r\n .support-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .support-banner .banner-image img { max-width: 260px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .support-banner { padding: 30px 0 24px; }\r\n .support-banner .heading { font-size: 22px; }\r\n .support-banner .description { font-size: 13px; }\r\n .support-banner .breadcrumb { font-size: 10px; }\r\n .support-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"support-banner\">\r\n\r\n <!-- Decorative elements -->\r\n <div class=\"orb orb-1\"><\/div>\r\n <div class=\"orb orb-2\"><\/div>\r\n <div class=\"orb orb-3\"><\/div>\r\n <div class=\"ring ring-1\"><\/div>\r\n <div class=\"ring ring-2\"><\/div>\r\n <div class=\"ring ring-3\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"shooting-star\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"pulse-dot\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"tech-shape\"><\/div>\r\n <div class=\"glow-ring\"><\/div>\r\n <div class=\"glow-ring\"><\/div>\r\n <div class=\"grid-overlay\"><\/div>\r\n\r\n <div class=\"banner-inner\">\r\n\r\n <!-- LEFT: Content -->\r\n <div class=\"banner-content\">\r\n\r\n <!-- Breadcrumb -->\r\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n <a href=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/\">Home<\/a>\r\n <span class=\"separator\"><i class=\"fas fa-chevron-right\"><\/i><\/span>\r\n <span class=\"current\">Support<\/span>\r\n <\/nav>\r\n\r\n <h1 class=\"heading\">\r\n We're Here to <span class=\"highlight\">Help<\/span>\r\n <\/h1>\r\n\r\n <p class=\"description\">\r\n Infinexy Technologies provides dedicated support to keep your business running smoothly. \r\n Whether you need technical assistance, service updates, or guidance, our support team is \r\n available 24\/7 to ensure your success.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <!-- RIGHT: Image -->\r\n <div class=\"banner-image\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/08\/support.png\" \r\n alt=\"Infinexy Support\"\r\n loading=\"lazy\"\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-3c98ce0 e-con-full e-flex e-con e-parent\" data-id=\"3c98ce0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e93b5a elementor-widget elementor-widget-html\" data-id=\"0e93b5a\" 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 - Support Portal<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\r\n <style>\r\n \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif !important;\r\n background: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n\r\n \/* ========================================\r\n SUPPORT PORTAL SECTION\r\n ======================================== *\/\r\n .support-section {\r\n padding: 60px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .support-section::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 .support-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n SUPPORT CONTENT\r\n ======================================== *\/\r\n .support-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* ===== LEFT: TEXT ===== *\/\r\n .support-text {\r\n max-width: 600px;\r\n }\r\n\r\n .support-text .description {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .support-text .description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== SUPPORT FEATURES ===== *\/\r\n .support-features {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .support-features .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--gray);\r\n padding: 6px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .support-features .feature-item:hover {\r\n color: var(--dark);\r\n transform: translateX(4px);\r\n }\r\n\r\n .support-features .feature-item i {\r\n color: var(--badge-color);\r\n font-size: 16px;\r\n width: 20px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ===== RIGHT: VISUAL ===== *\/\r\n .support-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .support-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n .support-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: #f8fafc;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .support-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n }\r\n\r\n .support-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(77, 125, 209, 0.05), rgba(134, 74, 186, 0.03));\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== FLOATING CARDS ===== *\/\r\n .support-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: 2;\r\n }\r\n\r\n .support-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 .support-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n .support-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n .support-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .support-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 .support-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 .support-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .support-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .support-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 \/* ===== ANIMATED RING ===== *\/\r\n .support-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(77, 125, 209, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 30s linear infinite;\r\n }\r\n\r\n .support-ring::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(--badge-color);\r\n box-shadow: 0 0 20px rgba(77, 125, 209, 0.2);\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 \/* ========================================\r\n ANIMATIONS\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 \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .support-section { padding: 60px 0; }\r\n .support-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n text-align: center;\r\n }\r\n .support-text { max-width: 100%; margin: 0 auto; }\r\n .support-features { justify-content: center; max-width: 400px; margin: 20px auto 0; }\r\n .support-features .feature-item { justify-content: center; }\r\n .support-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .support-float-card.card-1 { top: -10px; right: 0px; }\r\n .support-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .support-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .support-section { padding: 50px 0; }\r\n .support-inner { padding: 0 20px; }\r\n .section-title { font-size: clamp(28px, 6vw, 32px); }\r\n .support-text .description { font-size: 15px; }\r\n .support-features { grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 100%; }\r\n .support-features .feature-item { font-size: 13px; padding: 4px 0; }\r\n .support-visual-wrapper { max-width: 360px; }\r\n .support-float-card {\r\n padding: 10px 14px;\r\n gap: 10px;\r\n }\r\n .support-float-card .card-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 15px;\r\n }\r\n .support-float-card .card-text { font-size: 12px; }\r\n .support-float-card .card-text small { font-size: 10px; }\r\n .support-float-card.card-1 { top: -5px; right: -5px; }\r\n .support-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .support-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .support-section { padding: 40px 0; }\r\n .support-inner { padding: 0 16px; }\r\n .section-title { font-size: 24px; }\r\n .section-badge { font-size: 10px; }\r\n .section-subtitle { font-size: 14px; }\r\n .support-text .description { font-size: 14px; }\r\n .support-features { grid-template-columns: 1fr; gap: 6px; }\r\n .support-features .feature-item { font-size: 13px; justify-content: flex-start; }\r\n .support-visual-wrapper { max-width: 280px; }\r\n .support-float-card.card-1 {\r\n top: -5px;\r\n right: -10px;\r\n padding: 8px 12px;\r\n }\r\n .support-float-card.card-2 {\r\n bottom: 0;\r\n left: -10px;\r\n padding: 8px 12px;\r\n }\r\n .support-float-card .card-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .support-float-card .card-text { font-size: 10px; }\r\n .support-float-card .card-text small { font-size: 9px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .support-visual-wrapper { max-width: 240px; }\r\n .support-float-card.card-1,\r\n .support-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .support-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 .support-float-card .card-text { font-size: 9px; }\r\n .support-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"support-section\">\r\n <div class=\"support-inner\">\r\n\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Support Portal\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Your <span class=\"highlight\">Support<\/span> Hub\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Everything you need to manage, track, and resolve support requests \u2014 all in one place, available 24\/7.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"support-grid\">\r\n\r\n <div class=\"support-text\">\r\n\r\n <p class=\"description\">\r\n <strong>Welcome to the Infinexy Support Portal<\/strong> \u2014 your centralised platform for managing all support-related activities. Designed with simplicity and efficiency in mind, the portal gives you real-time access to your support tickets, service status updates, and a wealth of knowledge resources, all from a single dashboard.\r\n <\/p>\r\n\r\n <p class=\"description\" style=\"margin-bottom:0;\">\r\n Whether you need to <strong>raise a new ticket, track an existing request, check service health, or browse our knowledge base<\/strong>, the Support Portal empowers your team to resolve issues faster and stay informed. With <strong>single sign-on, real-time notifications, and seamless integration<\/strong> with our support systems, we make it easy to get the help you need \u2014 when you need it.\r\n <\/p>\r\n\r\n <!-- Support Features -->\r\n <div class=\"support-features\">\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Centralised Dashboard\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Real-Time Ticket Tracking\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Knowledge Base Integration\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Service Status Monitoring\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Multi-User Access\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Secure & Encrypted\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ===== RIGHT: VISUAL ===== -->\r\n <div class=\"support-visual\">\r\n <div class=\"support-visual-wrapper\">\r\n\r\n <div class=\"support-ring\"><\/div>\r\n\r\n <div class=\"support-image\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/support-lines-selfservice-portal-allowing-customers-track-manage-their-support-tickets.webp\"\r\n alt=\"Infinexy Support Portal\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"support-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"support-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-user-circle\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Single Sign-On\r\n <small>One login, all access<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"support-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-ticket-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Ticket Management\r\n <small>Track & resolve<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"support-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-book\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Knowledge Base\r\n <small>Find answers fast<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db9002e e-con-full e-flex e-con e-parent\" data-id=\"db9002e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d29a40 elementor-widget elementor-widget-html\" data-id=\"0d29a40\" 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 - Ticket System<\/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 \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n .ticket-section {\r\n padding: 60px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ticket-section::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 .ticket-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 text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n .ticket-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* ===== LEFT: VISUAL ===== *\/\r\n .ticket-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .ticket-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n .ticket-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: #f8fafc;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .ticket-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n }\r\n\r\n .ticket-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(77, 125, 209, 0.05), rgba(134, 74, 186, 0.03));\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== FLOATING CARDS ===== *\/\r\n .ticket-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: 2;\r\n }\r\n\r\n .ticket-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 .ticket-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n .ticket-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n .ticket-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .ticket-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 .ticket-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 .ticket-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .ticket-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .ticket-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 \/* ===== ANIMATED RING ===== *\/\r\n .ticket-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(77, 125, 209, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 30s linear infinite;\r\n }\r\n\r\n .ticket-ring::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(--badge-color);\r\n box-shadow: 0 0 20px rgba(77, 125, 209, 0.2);\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 \/* ===== RIGHT: TEXT ===== *\/\r\n .ticket-text {\r\n max-width: 600px;\r\n }\r\n\r\n .ticket-text .description {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ticket-text .description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== FEATURES ===== *\/\r\n .ticket-features {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .ticket-features .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--gray);\r\n padding: 6px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .ticket-features .feature-item:hover {\r\n color: var(--dark);\r\n transform: translateX(4px);\r\n }\r\n\r\n .ticket-features .feature-item i {\r\n color: var(--badge-color);\r\n font-size: 16px;\r\n width: 20px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\r\n ======================================== *\/\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/*-- RESPONSIVE --*\/\r\n\r\n @media (max-width: 991px) {\r\n .ticket-section { padding: 60px 0; }\r\n .ticket-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n text-align: center;\r\n }\r\n .ticket-text { max-width: 100%; margin: 0 auto; }\r\n .ticket-features { justify-content: center; max-width: 400px; margin: 20px auto 0; }\r\n .ticket-features .feature-item { justify-content: center; }\r\n .ticket-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .ticket-float-card.card-1 { top: -10px; right: 0px; }\r\n .ticket-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .ticket-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .ticket-section { padding: 50px 0; }\r\n .ticket-inner { padding: 0 20px; }\r\n .section-title { font-size: clamp(28px, 6vw, 32px); }\r\n .ticket-text .description { font-size: 15px; }\r\n .ticket-features { grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 100%; }\r\n .ticket-features .feature-item { font-size: 13px; padding: 4px 0; }\r\n .ticket-visual-wrapper { max-width: 360px; }\r\n .ticket-float-card {\r\n padding: 10px 14px;\r\n gap: 10px;\r\n }\r\n .ticket-float-card .card-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 15px;\r\n }\r\n .ticket-float-card .card-text { font-size: 12px; }\r\n .ticket-float-card .card-text small { font-size: 10px; }\r\n .ticket-float-card.card-1 { top: -5px; right: -5px; }\r\n .ticket-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .ticket-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ticket-section { padding: 40px 0; }\r\n .ticket-inner { padding: 0 16px; }\r\n .section-title { font-size: 24px; }\r\n .section-badge { font-size: 10px; }\r\n .section-subtitle { font-size: 14px; }\r\n .ticket-text .description { font-size: 14px; }\r\n .ticket-features { grid-template-columns: 1fr; gap: 6px; }\r\n .ticket-features .feature-item { font-size: 13px; justify-content: flex-start; }\r\n .ticket-visual-wrapper { max-width: 280px; }\r\n .ticket-float-card.card-1 {\r\n top: -5px;\r\n right: -10px;\r\n padding: 8px 12px;\r\n }\r\n .ticket-float-card.card-2 {\r\n bottom: 0;\r\n left: -10px;\r\n padding: 8px 12px;\r\n }\r\n .ticket-float-card .card-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .ticket-float-card .card-text { font-size: 10px; }\r\n .ticket-float-card .card-text small { font-size: 9px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .ticket-visual-wrapper { max-width: 240px; }\r\n .ticket-float-card.card-1,\r\n .ticket-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .ticket-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 .ticket-float-card .card-text { font-size: 9px; }\r\n .ticket-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"ticket-section\">\r\n <div class=\"ticket-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Ticket System\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Streamlined <span class=\"highlight\">Ticket<\/span> Management\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Raise, track, and resolve support tickets with ease \u2014 powered by intelligent prioritisation and real-time updates.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== CONTENT ===== -->\r\n <div class=\"ticket-grid\">\r\n <div class=\"ticket-visual\">\r\n <div class=\"ticket-visual-wrapper\">\r\n\r\n <div class=\"ticket-ring\"><\/div>\r\n\r\n <div class=\"ticket-image\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/img3394544.webp\"\r\n alt=\"Infinexy Ticket System\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"ticket-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-ticket-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Priority Routing\r\n <small>Smart ticketing<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-clock\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Real-Time Updates\r\n <small>Always informed<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Fast Resolution\r\n <small>SLA backed<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-text\">\r\n\r\n <p class=\"description\">\r\n <strong>Our Ticket System<\/strong> is designed to streamline your support experience from start to finish. Whether you're reporting an issue, requesting a new feature, or need technical assistance, our intelligent ticketing platform ensures your request is captured, categorised, and routed to the right team instantly.\r\n <\/p>\r\n\r\n <p class=\"description\" style=\"margin-bottom:0;\">\r\n With <strong>real-time status tracking, automated prioritisation, and multi-level escalation<\/strong>, you'll never be left wondering about the progress of your ticket. Every request is handled with transparency, accountability, and a commitment to delivering <strong>fast, effective resolutions<\/strong> \u2014 backed by our SLA guarantees.\r\n <\/p>\r\n\r\n <!-- Ticket Features -->\r\n <div class=\"ticket-features\">\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Automated Ticket Creation\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Priority-Based Queues\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Real-Time Status Updates\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Multi-Level Escalation\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Historical Ticket View\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n SLA-Backed Resolution\r\n <\/div>\r\n <\/div>\r\n\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-7e5d2b4 e-con-full e-flex e-con e-parent\" data-id=\"7e5d2b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a9b74b elementor-widget elementor-widget-html\" data-id=\"3a9b74b\" 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 - Service Status<\/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 \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n .status-section {\r\n padding: 60px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .status-section::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 .status-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n CONTENT\r\n ======================================== *\/\r\n .status-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* ===== LEFT: TEXT ===== *\/\r\n .status-text {\r\n max-width: 600px;\r\n }\r\n\r\n .status-text .description {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .status-text .description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== FEATURES ===== *\/\r\n .status-features {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .status-features .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--gray);\r\n padding: 6px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .status-features .feature-item:hover {\r\n color: var(--dark);\r\n transform: translateX(4px);\r\n }\r\n\r\n .status-features .feature-item i {\r\n color: var(--badge-color);\r\n font-size: 16px;\r\n width: 20px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ===== RIGHT: VISUAL ===== *\/\r\n .status-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .status-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n .status-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: #f8fafc;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .status-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n }\r\n\r\n .status-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(77, 125, 209, 0.05), rgba(134, 74, 186, 0.03));\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== FLOATING CARDS ===== *\/\r\n .status-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: 2;\r\n }\r\n\r\n .status-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 .status-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n .status-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n .status-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .status-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 .status-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 .status-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .status-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .status-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 \/* ===== ANIMATED RING ===== *\/\r\n .status-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(77, 125, 209, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 30s linear infinite;\r\n }\r\n\r\n .status-ring::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(--badge-color);\r\n box-shadow: 0 0 20px rgba(77, 125, 209, 0.2);\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 \/* ========================================\r\n ANIMATIONS\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 \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .status-section { padding: 60px 0; }\r\n .status-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n text-align: center;\r\n }\r\n .status-text { max-width: 100%; margin: 0 auto; }\r\n .status-features { justify-content: center; max-width: 400px; margin: 20px auto 0; }\r\n .status-features .feature-item { justify-content: center; }\r\n .status-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .status-float-card.card-1 { top: -10px; right: 0px; }\r\n .status-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .status-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .status-section { padding: 50px 0; }\r\n .status-inner { padding: 0 20px; }\r\n .section-title { font-size: clamp(28px, 6vw, 32px); }\r\n .status-text .description { font-size: 15px; }\r\n .status-features { grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 100%; }\r\n .status-features .feature-item { font-size: 13px; padding: 4px 0; }\r\n .status-visual-wrapper { max-width: 360px; }\r\n .status-float-card {\r\n padding: 10px 14px;\r\n gap: 10px;\r\n }\r\n .status-float-card .card-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 15px;\r\n }\r\n .status-float-card .card-text { font-size: 12px; }\r\n .status-float-card .card-text small { font-size: 10px; }\r\n .status-float-card.card-1 { top: -5px; right: -5px; }\r\n .status-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .status-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .status-section { padding: 40px 0; }\r\n .status-inner { padding: 0 16px; }\r\n .section-title { font-size: 24px; }\r\n .section-badge { font-size: 10px; }\r\n .section-subtitle { font-size: 14px; }\r\n .status-text .description { font-size: 14px; }\r\n .status-features { grid-template-columns: 1fr; gap: 6px; }\r\n .status-features .feature-item { font-size: 13px; justify-content: flex-start; }\r\n .status-visual-wrapper { max-width: 280px; }\r\n .status-float-card.card-1 {\r\n top: -5px;\r\n right: -10px;\r\n padding: 8px 12px;\r\n }\r\n .status-float-card.card-2 {\r\n bottom: 0;\r\n left: -10px;\r\n padding: 8px 12px;\r\n }\r\n .status-float-card .card-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .status-float-card .card-text { font-size: 10px; }\r\n .status-float-card .card-text small { font-size: 9px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .status-visual-wrapper { max-width: 240px; }\r\n .status-float-card.card-1,\r\n .status-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .status-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 .status-float-card .card-text { font-size: 9px; }\r\n .status-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"status-section\">\r\n <div class=\"status-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Service Status\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Real-Time <span class=\"highlight\">Service<\/span> Health\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Stay informed with live updates on platform performance, incident tracking, and proactive service monitoring.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== CONTENT ===== -->\r\n <div class=\"status-grid\">\r\n\r\n <!-- ===== LEFT: TEXT ===== -->\r\n <div class=\"status-text\">\r\n\r\n <p class=\"description\">\r\n <strong>Real-time service visibility<\/strong> is at the core of our commitment to reliability. The Infinexy Service Status page provides a live overview of platform health, ongoing incidents, and scheduled maintenance \u2014 so you're always in the know.\r\n <\/p>\r\n\r\n <p class=\"description\" style=\"margin-bottom:0;\">\r\n With <strong>automated monitoring, proactive alerts, and detailed incident reports<\/strong>, we ensure complete transparency across all services. Whether it's voice, messaging, or cloud infrastructure, you can trust that our systems are continuously tracked and optimised for <strong>maximum performance and uptime<\/strong>.\r\n <\/p>\r\n\r\n <!-- Status Features -->\r\n <div class=\"status-features\">\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Live Service Dashboard\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Incident Tracking\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Scheduled Maintenance Alerts\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Historical Performance Data\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Automated Monitoring\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Proactive Notification System\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ===== RIGHT: VISUAL ===== -->\r\n <div class=\"status-visual\">\r\n <div class=\"status-visual-wrapper\">\r\n\r\n <div class=\"status-ring\"><\/div>\r\n\r\n <div class=\"status-image\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/08\/img8922107-scaled.webp\"\r\n alt=\"Infinexy Service Status\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"status-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"status-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-server\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Real-Time Monitoring\r\n <small>Always connected<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"status-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Performance Analytics\r\n <small>Data-driven insights<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"status-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n 99.9% Uptime\r\n <small>Reliability guaranteed<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d4662c e-con-full e-flex e-con e-parent\" data-id=\"2d4662c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f51719 elementor-widget elementor-widget-html\" data-id=\"8f51719\" 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 - Knowledge Base<\/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 \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n .kb-section {\r\n padding: 60px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .kb-section::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 .kb-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n .kb-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* ===== LEFT: VISUAL ===== *\/\r\n .kb-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .kb-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n .kb-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: #f8fafc;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .kb-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n }\r\n\r\n .kb-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(77, 125, 209, 0.05), rgba(134, 74, 186, 0.03));\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== FLOATING CARDS ===== *\/\r\n .kb-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: 2;\r\n }\r\n\r\n .kb-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 .kb-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n .kb-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n .kb-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .kb-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 .kb-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 .kb-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .kb-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .kb-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 \/* ===== ANIMATED RING ===== *\/\r\n .kb-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(77, 125, 209, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 30s linear infinite;\r\n }\r\n\r\n .kb-ring::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(--badge-color);\r\n box-shadow: 0 0 20px rgba(77, 125, 209, 0.2);\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 \/* ===== RIGHT: TEXT ===== *\/\r\n .kb-text {\r\n max-width: 600px;\r\n }\r\n\r\n .kb-text .description {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .kb-text .description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== FEATURES ===== *\/\r\n .kb-features {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .kb-features .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--gray);\r\n padding: 6px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .kb-features .feature-item:hover {\r\n color: var(--dark);\r\n transform: translateX(4px);\r\n }\r\n\r\n .kb-features .feature-item i {\r\n color: var(--badge-color);\r\n font-size: 16px;\r\n width: 20px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ========================================\r\n ANIMATIONS\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 \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 991px) {\r\n .kb-section { padding: 60px 0; }\r\n .kb-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n text-align: center;\r\n }\r\n .kb-text { max-width: 100%; margin: 0 auto; }\r\n .kb-features { justify-content: center; max-width: 400px; margin: 20px auto 0; }\r\n .kb-features .feature-item { justify-content: center; }\r\n .kb-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .kb-float-card.card-1 { top: -10px; right: 0px; }\r\n .kb-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .kb-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .kb-section { padding: 50px 0; }\r\n .kb-inner { padding: 0 20px; }\r\n .section-title { font-size: clamp(28px, 6vw, 32px); }\r\n .kb-text .description { font-size: 15px; }\r\n .kb-features { grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 100%; }\r\n .kb-features .feature-item { font-size: 13px; padding: 4px 0; }\r\n .kb-visual-wrapper { max-width: 360px; }\r\n .kb-float-card {\r\n padding: 10px 14px;\r\n gap: 10px;\r\n }\r\n .kb-float-card .card-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 15px;\r\n }\r\n .kb-float-card .card-text { font-size: 12px; }\r\n .kb-float-card .card-text small { font-size: 10px; }\r\n .kb-float-card.card-1 { top: -5px; right: -5px; }\r\n .kb-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .kb-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .kb-section { padding: 40px 0; }\r\n .kb-inner { padding: 0 16px; }\r\n .section-title { font-size: 24px; }\r\n .section-badge { font-size: 10px; }\r\n .section-subtitle { font-size: 14px; }\r\n .kb-text .description { font-size: 14px; }\r\n .kb-features { grid-template-columns: 1fr; gap: 6px; }\r\n .kb-features .feature-item { font-size: 13px; justify-content: flex-start; }\r\n .kb-visual-wrapper { max-width: 280px; }\r\n .kb-float-card.card-1 {\r\n top: -5px;\r\n right: -10px;\r\n padding: 8px 12px;\r\n }\r\n .kb-float-card.card-2 {\r\n bottom: 0;\r\n left: -10px;\r\n padding: 8px 12px;\r\n }\r\n .kb-float-card .card-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .kb-float-card .card-text { font-size: 10px; }\r\n .kb-float-card .card-text small { font-size: 9px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .kb-visual-wrapper { max-width: 240px; }\r\n .kb-float-card.card-1,\r\n .kb-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .kb-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 .kb-float-card .card-text { font-size: 9px; }\r\n .kb-float-card .card-text small { font-size: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"kb-section\">\r\n <div class=\"kb-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n Knowledge Base\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Your <span class=\"highlight\">Knowledge<\/span> Hub\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Access comprehensive guides, tutorials, and technical documentation to help you get the most from our services.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== CONTENT ===== -->\r\n <div class=\"kb-grid\">\r\n\r\n <!-- ===== LEFT: VISUAL ===== -->\r\n <div class=\"kb-visual\">\r\n <div class=\"kb-visual-wrapper\">\r\n\r\n <div class=\"kb-ring\"><\/div>\r\n\r\n <div class=\"kb-image\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/07\/07231249-31-businessman-modern-office-holding-glowing-light-bulb-with-floating-virtual-ebook-icons-surrounding-it-symbolizing-electronic-books-online-vast-knowledge-base-internet-1-1-scaled.webp\"\r\n alt=\"Infinexy Knowledge Base\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"kb-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"kb-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-book\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Comprehensive Guides\r\n <small>Step-by-step tutorials<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"kb-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Searchable Content\r\n <small>Find answers fast<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"kb-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Technical Docs\r\n <small>Detailed & up-to-date<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== RIGHT: TEXT ===== -->\r\n <div class=\"kb-text\">\r\n\r\n <p class=\"description\">\r\n <strong>Welcome to the Infinexy Knowledge Base<\/strong> \u2014 your go-to resource for everything you need to know about our products and services. Whether you're a new user getting started, an administrator managing your account, or a developer integrating our APIs, you'll find clear, actionable information here.\r\n <\/p>\r\n\r\n <p class=\"description\" style=\"margin-bottom:0;\">\r\n Our Knowledge Base is organised into <strong>step-by-step guides, video tutorials, FAQs, and in-depth technical documentation<\/strong>. We regularly update our content to ensure you have access to the latest information and best practices. Save time, reduce support tickets, and empower your team with the knowledge they need \u2014 all available 24\/7.\r\n <\/p>\r\n\r\n <!-- Knowledge Base Features -->\r\n <div class=\"kb-features\">\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Getting Started Guides\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Video Tutorials\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n FAQs & Troubleshooting\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n API Documentation\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Best Practice Articles\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Regular Content Updates\r\n <\/div>\r\n <\/div>\r\n\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-6df82eb e-con-full e-flex e-con e-parent\" data-id=\"6df82eb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dd684e elementor-widget elementor-widget-html\" data-id=\"8dd684e\" 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 - SLA Information<\/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 \/* ===== COLOR VARIABLES ===== *\/\r\n :root {\r\n --purple: #8E24AA;\r\n --blue: #009FE3;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --badge-color: #4D7DD1;\r\n --border: #e5e7eb;\r\n }\r\n \r\n .sla-section {\r\n padding: 60px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .sla-section::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 .sla-inner {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 28px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== SECTION HEADER ===== *\/\r\n .section-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: var(--badge-color);\r\n margin-bottom: 16px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n }\r\n\r\n .section-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--badge-color);\r\n display: inline-block;\r\n }\r\n\r\n .section-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: var(--dark);\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .section-title .highlight {\r\n background: linear-gradient(135deg, var(--purple), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n .sla-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* ===== LEFT: TEXT ===== *\/\r\n .sla-text {\r\n max-width: 600px;\r\n }\r\n\r\n .sla-text .description {\r\n font-size: 16px;\r\n line-height: 1.8;\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .sla-text .description strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== FEATURES ===== *\/\r\n .sla-features {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .sla-features .feature-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--gray);\r\n padding: 6px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .sla-features .feature-item:hover {\r\n color: var(--dark);\r\n transform: translateX(4px);\r\n }\r\n\r\n .sla-features .feature-item i {\r\n color: var(--badge-color);\r\n font-size: 16px;\r\n width: 20px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ===== RIGHT: VISUAL ===== *\/\r\n .sla-visual {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .sla-visual-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 520px;\r\n }\r\n\r\n .sla-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: #f8fafc;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .sla-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 20px;\r\n }\r\n\r\n .sla-image-overlay {\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, rgba(77, 125, 209, 0.05), rgba(134, 74, 186, 0.03));\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== FLOATING CARDS ===== *\/\r\n .sla-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: 2;\r\n }\r\n\r\n .sla-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 .sla-float-card .card-icon.purple {\r\n background: linear-gradient(135deg, var(--purple), #a855f7);\r\n }\r\n .sla-float-card .card-icon.blue {\r\n background: linear-gradient(135deg, var(--blue), #38bdf8);\r\n }\r\n .sla-float-card .card-icon.green {\r\n background: linear-gradient(135deg, var(--green), #a3e635);\r\n }\r\n\r\n .sla-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 .sla-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 .sla-float-card.card-1 {\r\n top: -15px;\r\n right: -20px;\r\n animation-delay: 0s;\r\n }\r\n\r\n .sla-float-card.card-2 {\r\n bottom: 20px;\r\n left: -30px;\r\n animation-delay: 2s;\r\n }\r\n\r\n .sla-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 \/* ===== ANIMATED RING ===== *\/\r\n .sla-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(77, 125, 209, 0.06);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: 120%;\r\n height: 120%;\r\n top: -10%;\r\n left: -10%;\r\n animation: spin 30s linear infinite;\r\n }\r\n\r\n .sla-ring::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(--badge-color);\r\n box-shadow: 0 0 20px rgba(77, 125, 209, 0.2);\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 fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/*-- reaponsive -- *\/\r\n\r\n @media (max-width: 991px) {\r\n .sla-section { padding: 60px 0; }\r\n .sla-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n text-align: center;\r\n }\r\n .sla-text { max-width: 100%; margin: 0 auto; }\r\n .sla-features { justify-content: center; max-width: 400px; margin: 20px auto 0; }\r\n .sla-features .feature-item { justify-content: center; }\r\n .sla-visual-wrapper { max-width: 420px; margin: 0 auto; }\r\n .sla-float-card.card-1 { top: -10px; right: 0px; }\r\n .sla-float-card.card-2 { bottom: 10px; left: -10px; }\r\n .sla-float-card.card-3 { bottom: -10px; right: 0px; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .sla-section { padding: 50px 0; }\r\n .sla-inner { padding: 0 20px; }\r\n .section-title { font-size: clamp(28px, 6vw, 32px); }\r\n .sla-text .description { font-size: 15px; }\r\n .sla-features { grid-template-columns: 1fr 1fr; gap: 8px 16px; max-width: 100%; }\r\n .sla-features .feature-item { font-size: 13px; padding: 4px 0; }\r\n .sla-visual-wrapper { max-width: 360px; }\r\n .sla-float-card {\r\n padding: 10px 14px;\r\n gap: 10px;\r\n }\r\n .sla-float-card .card-icon {\r\n width: 34px;\r\n height: 34px;\r\n font-size: 15px;\r\n }\r\n .sla-float-card .card-text { font-size: 12px; }\r\n .sla-float-card .card-text small { font-size: 10px; }\r\n .sla-float-card.card-1 { top: -5px; right: -5px; }\r\n .sla-float-card.card-2 { bottom: 5px; left: -15px; }\r\n .sla-float-card.card-3 { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .sla-section { padding: 40px 0; }\r\n .sla-inner { padding: 0 16px; }\r\n .section-title { font-size: 24px; }\r\n .section-badge { font-size: 10px; }\r\n .section-subtitle { font-size: 14px; }\r\n .sla-text .description { font-size: 14px; }\r\n .sla-features { grid-template-columns: 1fr; gap: 6px; }\r\n .sla-features .feature-item { font-size: 13px; justify-content: flex-start; }\r\n .sla-visual-wrapper { max-width: 280px; }\r\n .sla-float-card.card-1 {\r\n top: -5px;\r\n right: -10px;\r\n padding: 8px 12px;\r\n }\r\n .sla-float-card.card-2 {\r\n bottom: 0;\r\n left: -10px;\r\n padding: 8px 12px;\r\n }\r\n .sla-float-card .card-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .sla-float-card .card-text { font-size: 10px; }\r\n .sla-float-card .card-text small { font-size: 9px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .sla-visual-wrapper { max-width: 240px; }\r\n .sla-float-card.card-1,\r\n .sla-float-card.card-2 {\r\n padding: 6px 10px;\r\n gap: 6px;\r\n }\r\n .sla-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 .sla-float-card .card-text { font-size: 9px; }\r\n .sla-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=\"sla-section\">\r\n <div class=\"sla-inner\">\r\n\r\n <!-- ===== HEADER ===== -->\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\r\n <span class=\"dot\"><\/span>\r\n SLA Information\r\n <\/div>\r\n <h2 class=\"section-title\">\r\n Service Level <span class=\"highlight\">Agreements<\/span>\r\n <\/h2>\r\n <p class=\"section-subtitle\">\r\n Transparent, reliable, and guaranteed \u2014 our SLAs are designed to give you confidence and peace of mind.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- ===== CONTENT ===== -->\r\n <div class=\"sla-grid\">\r\n\r\n <!-- ===== LEFT: TEXT ===== -->\r\n <div class=\"sla-text\">\r\n\r\n <p class=\"description\">\r\n <strong>At Infinexy Technologies,<\/strong> we stand behind our commitments with clear, transparent Service Level Agreements (SLAs). Our SLAs define the performance standards, response times, and resolution guarantees you can expect from our services and support teams.\r\n <\/p>\r\n\r\n <p class=\"description\" style=\"margin-bottom:0;\">\r\n We offer <strong>priority-based response times, 99.9% uptime guarantees, and multi-level escalation paths<\/strong> to ensure your business remains operational and supported at all times. With regular performance reporting, proactive monitoring, and a commitment to continuous improvement, our SLAs give you the confidence to focus on your business, knowing that your infrastructure is in safe hands.\r\n <\/p>\r\n\r\n <!-- SLA Features -->\r\n <div class=\"sla-features\">\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n 99.9% Uptime Guarantee\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Priority-Based Response Times\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Multi-Level Escalation\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Regular Performance Reporting\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Proactive Incident Management\r\n <\/div>\r\n <div class=\"feature-item\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n Transparent & Accountable\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- ===== RIGHT: VISUAL ===== -->\r\n <div class=\"sla-visual\">\r\n <div class=\"sla-visual-wrapper\">\r\n\r\n <div class=\"sla-ring\"><\/div>\r\n\r\n <div class=\"sla-image\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/res.cloudinary.com\/gm1vtogb\/image\/upload\/v1787142252\/2149256146_1.webp\"\r\n alt=\"Infinexy SLA Information\"\r\n loading=\"lazy\"\r\n \/>\r\n <div class=\"sla-image-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"sla-float-card card-1\">\r\n <div class=\"card-icon purple\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n 99.9% Uptime\r\n <small>Reliability guaranteed<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sla-float-card card-2\">\r\n <div class=\"card-icon blue\">\r\n <i class=\"fas fa-clock\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Fast Response Times\r\n <small>Priority-based<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sla-float-card card-3\">\r\n <div class=\"card-icon green\">\r\n <i class=\"fas fa-clipboard-check\"><\/i>\r\n <\/div>\r\n <div class=\"card-text\">\r\n Transparent Reporting\r\n <small>Clear & accountable<\/small>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc3bc55 e-con-full e-flex e-con e-parent\" data-id=\"dc3bc55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-214bac4 elementor-widget elementor-widget-html\" data-id=\"214bac4\" 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 - Messaging Solutions<\/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, .faq-section, .faq-inner, .faq-header,\r\n .faq-badge, .faq-title, .faq-subtitle,\r\n .faq-accordion, .faq-item, .faq-question,\r\n .faq-q-text, .faq-answer, .faq-cta,\r\n .cta-title, .cta-desc, .cta-btn,\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 --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 \/* ========================================\r\n FAQ SECTION\r\n ======================================== *\/\r\n .faq-section {\r\n padding: 50px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .faq-section::before {\r\n display: none;\r\n }\r\n\r\n .faq-inner {\r\n max-width: 900px;\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 \/* ===== HEADER ===== *\/\r\n .faq-header {\r\n text-align: center;\r\n max-width: 650px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .faq-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 .faq-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 animation: pulseDot 2s ease-in-out infinite;\r\n }\r\n\r\n .faq-badge i {\r\n font-size: 12px;\r\n color: var(--badge-color);\r\n }\r\n\r\n .faq-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 .faq-title .highlight {\r\n background: #864ABA;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n }\r\n\r\n .faq-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ========================================\r\n FAQ ACCORDION\r\n ======================================== *\/\r\n .faq-accordion {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .faq-item {\r\n background: var(--white);\r\n border-radius: 16px;\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.02);\r\n }\r\n\r\n .faq-item:hover {\r\n border-color: rgba(77, 124, 209, 0.15);\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.04);\r\n }\r\n\r\n .faq-item.active {\r\n border-color: var(--badge-color);\r\n box-shadow: 0 8px 30px rgba(77, 124, 209, 0.08);\r\n }\r\n\r\n .faq-question {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 20px 24px;\r\n cursor: pointer;\r\n gap: 16px;\r\n transition: all 0.3s ease;\r\n user-select: none;\r\n }\r\n\r\n .faq-question:hover {\r\n background: rgba(77, 124, 209, 0.02);\r\n }\r\n\r\n .faq-question .faq-q-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n\r\n .faq-question .faq-q-icon {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n color: var(--white);\r\n flex-shrink: 0;\r\n background: var(--badge-color);\r\n }\r\n\r\n .faq-question .faq-q-text {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .faq-item.active .faq-q-text {\r\n color: var(--badge-color);\r\n }\r\n\r\n .faq-question .faq-toggle {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n background: #f1f5f9;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n flex-shrink: 0;\r\n }\r\n\r\n .faq-item.active .faq-toggle {\r\n background: var(--badge-color);\r\n color: var(--white);\r\n transform: rotate(180deg);\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),\r\n padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n padding: 0 24px;\r\n }\r\n\r\n .faq-item.active .faq-answer {\r\n max-height: 300px;\r\n padding: 0 24px 24px;\r\n }\r\n\r\n .faq-answer p {\r\n font-size: 15px;\r\n color: var(--gray);\r\n line-height: 1.8;\r\n }\r\n\r\n \/* ========================================\r\n CTA \/ READY TO GO DIGITAL\r\n ======================================== *\/\r\n .faq-cta {\r\n background: var(--white);\r\n border-radius: 20px;\r\n padding: 48px 40px 40px;\r\n border: 1px solid var(--border);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.02);\r\n }\r\n\r\n .faq-cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));\r\n border-radius: 20px 20px 0 0;\r\n }\r\n\r\n \/* Floating decoration *\/\r\n .faq-cta::after {\r\n content: '';\r\n position: absolute;\r\n top: -100px;\r\n right: -100px;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n background: radial-gradient(ellipse, rgba(77, 124, 209, 0.03), transparent 70%);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .faq-cta .cta-content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .faq-cta .cta-icon {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 26px;\r\n color: var(--white);\r\n margin: 0 auto 16px;\r\n background: var(--badge-color);\r\n box-shadow: 0 8px 24px rgba(77, 124, 209, 0.15);\r\n }\r\n\r\n .faq-cta .cta-title {\r\n font-size: 24px;\r\n font-weight: 800;\r\n color: var(--dark);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .faq-cta .cta-desc {\r\n font-size: 16px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n max-width: 600px;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n .faq-cta .cta-desc strong {\r\n color: var(--dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* ===== BUTTON ===== *\/\r\n .faq-cta .cta-btn {\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 .faq-cta .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 .faq-cta .cta-btn:hover::before {\r\n transform: translateX(0);\r\n }\r\n\r\n .faq-cta .cta-btn: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 .faq-cta .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 .faq-cta .cta-btn:hover i {\r\n transform: translateX(3px);\r\n }\r\n\r\n .faq-cta .cta-btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 767px) {\r\n .faq-section {\r\n padding: 70px 0 50px;\r\n }\r\n .faq-inner {\r\n padding: 0 20px;\r\n }\r\n .faq-header {\r\n margin-bottom: 36px;\r\n }\r\n .faq-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .faq-subtitle {\r\n font-size: 15px;\r\n }\r\n .faq-question {\r\n padding: 16px 18px;\r\n }\r\n .faq-question .faq-q-text {\r\n font-size: 14px;\r\n }\r\n .faq-question .faq-q-icon {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .faq-answer p {\r\n font-size: 14px;\r\n }\r\n .faq-cta {\r\n padding: 32px 20px 28px;\r\n border-radius: 16px;\r\n }\r\n .faq-cta .cta-title {\r\n font-size: 20px;\r\n }\r\n .faq-cta .cta-desc {\r\n font-size: 14px;\r\n }\r\n .faq-cta .cta-btn {\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n }\r\n .faq-cta .cta-icon {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .faq-section {\r\n padding: 50px 0 40px;\r\n }\r\n .faq-inner {\r\n padding: 0 16px;\r\n }\r\n .faq-title {\r\n font-size: 24px;\r\n }\r\n .faq-subtitle {\r\n font-size: 14px;\r\n }\r\n .faq-question {\r\n padding: 14px 14px;\r\n }\r\n .faq-question .faq-q-text {\r\n font-size: 13px;\r\n }\r\n .faq-question .faq-q-icon {\r\n width: 24px;\r\n height: 24px;\r\n font-size: 10px;\r\n }\r\n .faq-question .faq-toggle {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .faq-answer p {\r\n font-size: 13px;\r\n }\r\n .faq-cta {\r\n padding: 24px 16px 20px;\r\n border-radius: 14px;\r\n }\r\n .faq-cta .cta-title {\r\n font-size: 18px;\r\n }\r\n .faq-cta .cta-desc {\r\n font-size: 13px;\r\n }\r\n .faq-cta .cta-btn {\r\n padding: 8px 20px;\r\n font-size: 12px;\r\n gap: 8px;\r\n }\r\n .faq-cta .cta-icon {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 18px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ========================================\r\n FAQ SECTION\r\n ======================================== -->\r\n <section class=\"faq-section\">\r\n <div class=\"faq-inner\">\r\n <!-- CTA \/ Ready to Go Digital -->\r\n <div class=\"faq-cta\">\r\n <div class=\"cta-content\">\r\n <div class=\"cta-icon\">\r\n <i class=\"fas fa-rocket\"><\/i>\r\n <\/div>\r\n <h3 class=\"cta-title\">Ready to Go Digital?<\/h3>\r\n <p class=\"cta-desc\">\r\n Scale your business communications with <strong>Infinexy Messaging Solutions<\/strong>.\r\n From <strong>Bulk SMS<\/strong> campaigns to <strong>OTP verification<\/strong>,\r\n <strong>WhatsApp Business API<\/strong>, and <strong>Rich Messaging<\/strong> \u2014\r\n we help you connect with your customers instantly, reliably, and securely.\r\n <\/p>\r\n <!-- Button with email mailto link -->\r\n <a href=\"#\" class=\"cta-btn\">\r\n <span>Contact Our Team<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infinexy – Support Home Support We’re Here to Help Infinexy Technologies provides dedicated support to keep your business running smoothly. Whether you need technical assistance, service updates, or guidance, our support team is available 24\/7 to ensure your success. Infinexy – Support Portal Support Portal Your Support Hub Everything you need to manage, track, and […]<\/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-1476","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1476","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=1476"}],"version-history":[{"count":64,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1476\/revisions"}],"predecessor-version":[{"id":2274,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1476\/revisions\/2274"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=1476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}