Infinexy - News<\/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\r\n \/* ========================================\r\n NEWS BANNER\r\n ======================================== *\/\r\n .news-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 \/* ===== ANIMATIONS ===== *\/\r\n\r\n \/* 1. FLOATING ORBS *\/\r\n .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 \/* ========================================\r\n BANNER INNER - FLEX LAYOUT WITH IMAGE\r\n ======================================== *\/\r\n .news-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 .news-banner .banner-content {\r\n flex: 1 1 50%;\r\n max-width: 600px;\r\n animation: fadeInUp 0.7s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Right image container *\/\r\n .news-banner .banner-image {\r\n flex: 1 1 40%;\r\n max-width: 500px;\r\n margin-left: 20px;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .news-banner .banner-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .news-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 .news-banner .breadcrumb {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .news-banner .breadcrumb a {\r\n color: rgba(255,255,255,0.5);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .news-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.8);\r\n }\r\n\r\n .news-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n }\r\n\r\n .news-banner .breadcrumb .current {\r\n color: rgba(255,255,255,0.8);\r\n font-weight: 500;\r\n }\r\n\r\n \/* ===== CONTENT ===== *\/\r\n .news-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 .news-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 .news-banner .description {\r\n font-size: clamp(16px, 1.1vw, 19px);\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.7);\r\n max-width: 560px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .news-banner .stats {\r\n display: flex;\r\n gap: 40px;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .news-banner .stats .stat-item {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .news-banner .stats .stat-item .number {\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.2;\r\n }\r\n\r\n .news-banner .stats .stat-item .number .highlight {\r\n background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.6));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .news-banner .stats .stat-item .label {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n font-weight: 400;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (min-width: 1400px) {\r\n .news-banner { padding: 120px 0 100px; min-height: 70vh; }\r\n .news-banner .heading { font-size: 62px; }\r\n .news-banner .ring-1 { width: 500px; height: 500px; }\r\n .news-banner .ring-2 { width: 700px; height: 700px; }\r\n }\r\n\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .news-banner { padding: 100px 0 80px; min-height: 65vh; }\r\n .news-banner .heading { font-size: 52px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .news-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .news-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .news-banner .ring-2 { display: none; }\r\n .news-banner .glow-ring { display: none; }\r\n .news-banner .banner-image { flex: 1 1 45%; max-width: 45%; }\r\n .news-banner .banner-content { flex: 1 1 50%; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .news-banner { min-height: auto; padding: 70px 0 50px; }\r\n .news-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .news-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .news-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 .news-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .news-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .news-banner .stats { justify-content: center; }\r\n .news-banner .breadcrumb { justify-content: center; }\r\n .news-banner .orb-2 { display: none; }\r\n .news-banner .ring-1 { display: none; }\r\n .news-banner .ring-3 { display: none; }\r\n .news-banner .shooting-star { display: none; }\r\n .news-banner .tech-shape { display: none; }\r\n .news-banner .grid-overlay { display: none; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .news-banner { padding: 50px 0 40px; }\r\n .news-banner .banner-inner { padding: 0 20px; }\r\n .news-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .news-banner .description { font-size: 15px; line-height: 1.7; }\r\n .news-banner .stats { gap: 24px; flex-direction: row; flex-wrap: wrap; justify-content: center; }\r\n .news-banner .stats .stat-item .number { font-size: 24px; }\r\n .news-banner .stats .stat-item .label { font-size: 12px; }\r\n .news-banner .breadcrumb { font-size: 12px; }\r\n .news-banner .orb-1 { width: 120px; height: 120px; }\r\n .news-banner .orb-3 { display: none; }\r\n .news-banner .particle { display: none; }\r\n .news-banner .pulse-dot { display: none; }\r\n .news-banner .banner-image img { max-width: 320px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .news-banner { padding: 40px 0 30px; }\r\n .news-banner .banner-inner { padding: 0 16px; }\r\n .news-banner .heading { font-size: 26px; }\r\n .news-banner .description { font-size: 14px; }\r\n .news-banner .stats { gap: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; }\r\n .news-banner .stats .stat-item { text-align: center; min-width: 80px; }\r\n .news-banner .stats .stat-item .number { font-size: 22px; }\r\n .news-banner .stats .stat-item .label { font-size: 11px; }\r\n .news-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; }\r\n .news-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .news-banner .banner-image img { max-width: 260px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .news-banner { padding: 30px 0 24px; }\r\n .news-banner .heading { font-size: 22px; }\r\n .news-banner .description { font-size: 13px; }\r\n .news-banner .stats .stat-item .number { font-size: 18px; }\r\n .news-banner .stats .stat-item .label { font-size: 10px; }\r\n .news-banner .breadcrumb { font-size: 10px; }\r\n .news-banner .stats { gap: 10px; }\r\n .news-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"news-banner\">\r\n\r\n \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 \r\n <div class=\"banner-content\">\r\n\r\n \r\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n <a href=\"#\">Home<\/a>\r\n <span class=\"separator\"><i class=\"fas fa-chevron-right\"><\/i><\/span>\r\n <span class=\"current\">News<\/span>\r\n <\/nav>\r\n\r\n \r\n <h1 class=\"heading\">\r\n Latest <span class=\"highlight\">News & Updates<\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"description\">\r\n Stay informed with the latest news, announcements, and press releases \r\n from Infinexy \u2014 covering innovations, partnerships, awards, and key \r\n developments in the telecom and cloud communications industry.\r\n <\/p>\r\n\r\n \r\n <div class=\"stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">25+<\/span><\/span>\r\n <span class=\"label\">News Articles<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">15+<\/span><\/span>\r\n <span class=\"label\">Press Releases<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">8<\/span><\/span>\r\n <span class=\"label\">Industry Awards<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"banner-image\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/08\/news-image.png\" \r\n alt=\"Infinexy - News & Updates\"\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-efb3e89 e-con-full e-flex e-con e-parent\" data-id=\"efb3e89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2efcb5d elementor-widget elementor-widget-html\" data-id=\"2efcb5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.infinexy-blog-wrapper * {\r\n font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.infinexy-blog-wrapper {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 60px 28px;\r\n}\r\n\r\n.infinexy-blog-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 56px;\r\n}\r\n\r\n.infinexy-blog-header .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 6px 16px 6px 8px;\r\n border-radius: 100px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: #4D7CD1;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.infinexy-blog-header .badge .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #4D7CD1;\r\n}\r\n\r\n.infinexy-blog-header h2 {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: #0a1a2f;\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.infinexy-blog-header h2 span {\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.infinexy-blog-header p {\r\n font-size: 17px;\r\n color: #475569;\r\n line-height: 1.7;\r\n}\r\n\r\n.infinexy-loader {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 80px 0;\r\n}\r\n\r\n.infinexy-loader .spinner {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n border: 4px solid #e5e7eb;\r\n border-top-color: #8E24AA;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.infinexy-blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n}\r\n\r\n.infinexy-blog-card {\r\n background: #ffffff;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);\r\n border: 1px solid #e5e7eb;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n}\r\n\r\n.infinexy-blog-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3, #8BC34A);\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n z-index: 1;\r\n}\r\n\r\n.infinexy-blog-card:hover::before {\r\n opacity: 1;\r\n}\r\n\r\n.infinexy-blog-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: rgba(142, 36, 170, 0.08);\r\n}\r\n\r\n.infinexy-blog-card .blog-image {\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: 56.25%;\r\n background: #f1f5f9;\r\n}\r\n\r\n.infinexy-blog-card .blog-image img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.infinexy-blog-card:hover .blog-image img {\r\n transform: scale(1.05);\r\n}\r\n\r\n.infinexy-blog-card .blog-category {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n color: #ffffff;\r\n padding: 4px 14px;\r\n border-radius: 100px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n z-index: 2;\r\n}\r\n\r\n.infinexy-blog-card .blog-content {\r\n padding: 24px 22px 22px;\r\n}\r\n\r\n.infinexy-blog-card .blog-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #0a1a2f;\r\n margin-bottom: 10px;\r\n line-height: 1.3;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.infinexy-blog-card .blog-title a {\r\n color: #0a1a2f;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.infinexy-blog-card .blog-title a:hover {\r\n color: #8E24AA;\r\n}\r\n\r\n.infinexy-blog-card .blog-excerpt {\r\n font-size: 14px;\r\n color: #475569;\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n font-size: 13px;\r\n color: #94a3b8;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta .date {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta .date i {\r\n font-size: 13px;\r\n color: #8E24AA;\r\n}\r\n\r\n.infinexy-blog-card .read-more {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border-radius: 100px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: #ffffff;\r\n background: #0a1a2f;\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.infinexy-blog-card .read-more::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 100px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\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.infinexy-blog-card .read-more:hover::before {\r\n transform: translateX(0);\r\n}\r\n\r\n.infinexy-blog-card .read-more:hover {\r\n color: #ffffff;\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n}\r\n\r\n.infinexy-blog-card .read-more i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.infinexy-blog-card .read-more:hover i {\r\n transform: translateX(3px);\r\n}\r\n\r\n.infinexy-no-posts {\r\n text-align: center;\r\n padding: 80px 0;\r\n color: #94a3b8;\r\n font-size: 18px;\r\n}\r\n\r\n.infinexy-pagination {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 48px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.infinexy-pagination button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 42px;\r\n height: 42px;\r\n padding: 0 14px;\r\n border-radius: 10px;\r\n border: 1px solid #e5e7eb;\r\n background: #ffffff;\r\n color: #0a1a2f;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.infinexy-pagination button:hover {\r\n border-color: #8E24AA;\r\n color: #8E24AA;\r\n transform: translateY(-2px);\r\n}\r\n\r\n.infinexy-pagination button.active {\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n border-color: transparent;\r\n color: #ffffff;\r\n}\r\n\r\n.infinexy-pagination button:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n.infinexy-pagination button:disabled:hover {\r\n border-color: #e5e7eb;\r\n color: #0a1a2f;\r\n transform: none;\r\n}\r\n\r\n.infinexy-pagination button .arrow-icon {\r\n font-size: 12px;\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (min-width: 1400px) {\r\n .infinexy-blog-wrapper {\r\n padding: 80px 40px;\r\n }\r\n .infinexy-blog-grid {\r\n gap: 32px;\r\n }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n .infinexy-blog-grid {\r\n gap: 24px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 17px;\r\n }\r\n}\r\n\r\n@media (max-width: 991px) {\r\n .infinexy-blog-wrapper {\r\n padding: 50px 20px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n }\r\n .infinexy-blog-header {\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n .infinexy-blog-wrapper {\r\n padding: 40px 16px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n .infinexy-blog-header h2 {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .infinexy-blog-header p {\r\n font-size: 15px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 18px 16px 16px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 15px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 13px;\r\n -webkit-line-clamp: 2;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 8px 18px;\r\n font-size: 12px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n padding: 0 10px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .infinexy-blog-wrapper {\r\n padding: 30px 12px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .infinexy-blog-header .badge {\r\n font-size: 10px;\r\n padding: 4px 12px 4px 6px;\r\n }\r\n .infinexy-blog-header h2 {\r\n font-size: 24px;\r\n }\r\n .infinexy-blog-header p {\r\n font-size: 14px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 14px 12px 14px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 13px;\r\n margin-bottom: 6px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 12px;\r\n -webkit-line-clamp: 2;\r\n margin-bottom: 10px;\r\n }\r\n .infinexy-blog-card .blog-meta {\r\n font-size: 11px;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n }\r\n .infinexy-blog-card .blog-meta .date i {\r\n font-size: 11px;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 6px 14px;\r\n font-size: 11px;\r\n gap: 6px;\r\n }\r\n .infinexy-blog-card .read-more i {\r\n font-size: 11px;\r\n }\r\n .infinexy-blog-card .blog-category {\r\n font-size: 9px;\r\n padding: 3px 10px;\r\n top: 10px;\r\n left: 10px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 32px;\r\n height: 32px;\r\n font-size: 12px;\r\n padding: 0 8px;\r\n border-radius: 8px;\r\n }\r\n .infinexy-pagination {\r\n gap: 6px;\r\n margin-top: 32px;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .infinexy-blog-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 10px 10px 12px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 12px;\r\n margin-bottom: 4px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 11px;\r\n -webkit-line-clamp: 2;\r\n margin-bottom: 8px;\r\n }\r\n .infinexy-blog-card .blog-meta {\r\n font-size: 10px;\r\n gap: 8px;\r\n margin-bottom: 8px;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 5px 12px;\r\n font-size: 10px;\r\n gap: 4px;\r\n }\r\n .infinexy-blog-card .read-more i {\r\n font-size: 10px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 28px;\r\n height: 28px;\r\n font-size: 11px;\r\n padding: 0 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"infinexy-blog-wrapper\" id=\"infinexyBlogApp\">\r\n\r\n <div class=\"infinexy-blog-header\">\r\n <div class=\"badge\">\r\n <span class=\"dot\"><\/span>\r\n News\r\n <\/div>\r\n <h2>Latest <span>News<\/span><\/h2>\r\n <p>Stay updated with the latest news from Infinexy and the telecom industry<\/p>\r\n <\/div>\r\n\r\n <div class=\"infinexy-loader\" id=\"blogLoader\">\r\n <div class=\"spinner\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"infinexy-blog-grid\" id=\"blogGrid\" style=\"display:none;\"><\/div>\r\n\r\n <div class=\"infinexy-no-posts\" id=\"noPosts\" style=\"display:none;\">\r\n No news found.\r\n <\/div>\r\n\r\n <div class=\"infinexy-pagination\" id=\"blogPagination\" style=\"display:none;\"><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n 'use strict';\r\n\r\n \/\/ ===== CONFIGURATION =====\r\n const CONFIG = {\r\n API_URL: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/posts',\r\n PER_PAGE: 6, \/\/ 6 posts per page (3 columns x 2 rows)\r\n \/\/ ===== News Category Slug =====\r\n NEWS_CATEGORY_SLUG: 'news', \/\/ <-- \u0986\u09aa\u09a8\u09be\u09b0 News \u0995\u09cd\u09af\u09be\u099f\u09be\u0997\u09b0\u09bf\u09b0 \u09b8\u09cd\u09b2\u09be\u0997 \u09a6\u09bf\u09a8\r\n };\r\n\r\n let currentPage = 1;\r\n let totalPages = 1;\r\n let isLoading = false;\r\n let categoryId = null;\r\n\r\n const grid = document.getElementById('blogGrid');\r\n const loader = document.getElementById('blogLoader');\r\n const noPosts = document.getElementById('noPosts');\r\n const pagination = document.getElementById('blogPagination');\r\n\r\n \/\/ ===== SHOW LOADER =====\r\n loader.style.display = 'flex';\r\n grid.style.display = 'none';\r\n noPosts.style.display = 'none';\r\n pagination.style.display = 'none';\r\n\r\n \/\/ ===== FETCH CATEGORY ID BY SLUG =====\r\n async function fetchCategoryId() {\r\n try {\r\n const url = 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/categories?slug=' + CONFIG.NEWS_CATEGORY_SLUG;\r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n if (!response.ok) throw new Error('Failed to fetch category');\r\n const categories = await response.json();\r\n if (categories && categories.length > 0) {\r\n categoryId = categories[0].id;\r\n console.log('News Category ID found:', categoryId);\r\n return categoryId;\r\n }\r\n throw new Error('Category not found');\r\n } catch(error) {\r\n console.error('Error fetching category:', error);\r\n return null;\r\n }\r\n }\r\n\r\n \/\/ ===== FETCH ALL CHILD CATEGORY IDs =====\r\n async function fetchAllChildCategoryIds(parentId) {\r\n try {\r\n const url = 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/categories?parent=' + parentId;\r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n if (!response.ok) throw new Error('Failed to fetch child categories');\r\n const children = await response.json();\r\n return children.map(function(cat) { return cat.id; });\r\n } catch(error) {\r\n console.error('Error fetching child categories:', error);\r\n return [];\r\n }\r\n }\r\n\r\n \/\/ ===== GET ALL CATEGORY IDs (Parent + Children) =====\r\n async function getAllCategoryIds() {\r\n if (categoryId === null) {\r\n await fetchCategoryId();\r\n }\r\n if (categoryId === null) {\r\n return [];\r\n }\r\n const childIds = await fetchAllChildCategoryIds(categoryId);\r\n return [categoryId, ...childIds];\r\n }\r\n\r\n \/\/ ===== FETCH POSTS - NO CACHE =====\r\n async function fetchPosts(page = 1) {\r\n if (isLoading) return;\r\n isLoading = true;\r\n\r\n loader.style.display = 'flex';\r\n grid.style.display = 'none';\r\n noPosts.style.display = 'none';\r\n pagination.style.display = 'none';\r\n\r\n const timeoutId = setTimeout(function() {\r\n if (isLoading) {\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'Loading is taking longer than expected. Please refresh.';\r\n isLoading = false;\r\n }\r\n }, 8000);\r\n\r\n try {\r\n const allCategoryIds = await getAllCategoryIds();\r\n \r\n if (allCategoryIds.length === 0) {\r\n clearTimeout(timeoutId);\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'News category not found. Please check the category slug.';\r\n isLoading = false;\r\n return;\r\n }\r\n\r\n const categoryIdsString = allCategoryIds.join(',');\r\n\r\n \/\/ ===== FETCH ONLY NEWS CATEGORY POSTS =====\r\n const url = CONFIG.API_URL + \r\n '?page=' + page + \r\n '&per_page=' + CONFIG.PER_PAGE + \r\n '&categories=' + categoryIdsString + \r\n '&_embed&orderby=date&order=desc';\r\n \r\n console.log('Fetching News from:', url);\r\n \r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n \r\n const totalPagesHeader = response.headers.get('X-WP-TotalPages');\r\n if (totalPagesHeader) {\r\n totalPages = parseInt(totalPagesHeader);\r\n }\r\n\r\n if (!response.ok) {\r\n throw new Error('HTTP ' + response.status);\r\n }\r\n\r\n const posts = await response.json();\r\n console.log('News posts fetched:', posts.length);\r\n\r\n clearTimeout(timeoutId);\r\n loader.style.display = 'none';\r\n\r\n if (!posts || posts.length === 0) {\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'No news posts found.';\r\n return;\r\n }\r\n\r\n renderPosts(posts);\r\n grid.style.display = 'grid';\r\n renderPagination(page);\r\n\r\n } catch(error) {\r\n clearTimeout(timeoutId);\r\n console.error('Error:', error);\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'Could not load news. Please refresh the page.';\r\n } finally {\r\n isLoading = false;\r\n }\r\n }\r\n\r\n \/\/ ===== RENDER POSTS =====\r\n function renderPosts(posts) {\r\n let html = '';\r\n \r\n posts.forEach(function(post) {\r\n let imageUrl = 'https:\/\/via.placeholder.com\/600x400\/8E24AA\/ffffff?text=No+Image';\r\n if (post._embedded && post._embedded['wp:featuredmedia']) {\r\n const media = post._embedded['wp:featuredmedia'][0];\r\n if (media && media.source_url) {\r\n imageUrl = media.source_url;\r\n }\r\n }\r\n\r\n let categoryName = 'News';\r\n if (post._embedded && post._embedded['wp:term']) {\r\n const terms = post._embedded['wp:term'][0];\r\n if (terms && terms.length > 0) {\r\n categoryName = terms[0].name;\r\n }\r\n }\r\n\r\n const date = new Date(post.date);\r\n const formattedDate = date.toLocaleDateString('en-US', {\r\n month: 'short',\r\n day: 'numeric',\r\n year: 'numeric'\r\n });\r\n\r\n let excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, '');\r\n if (excerpt.length > 120) {\r\n excerpt = excerpt.substring(0, 120) + '...';\r\n }\r\n\r\n html += `\r\n <div class=\"infinexy-blog-card\">\r\n <div class=\"blog-image\">\r\n <a href=\"${post.link}\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${post.title.rendered}\" loading=\"lazy\" \/>\r\n <\/a>\r\n <span class=\"blog-category\">${categoryName}<\/span>\r\n <\/div>\r\n <div class=\"blog-content\">\r\n <h3 class=\"blog-title\">\r\n <a href=\"${post.link}\" target=\"_blank\">${post.title.rendered}<\/a>\r\n <\/h3>\r\n <div class=\"blog-excerpt\">${excerpt}<\/div>\r\n <div class=\"blog-meta\">\r\n <span class=\"date\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n ${formattedDate}\r\n <\/span>\r\n <\/div>\r\n <a href=\"${post.link}\" target=\"_blank\" class=\"read-more\">\r\n <span>Read More<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n grid.innerHTML = html;\r\n }\r\n\r\n \/\/ ===== PAGINATION =====\r\n function renderPagination(current) {\r\n if (totalPages <= 1) {\r\n pagination.style.display = 'none';\r\n return;\r\n }\r\n\r\n let html = '';\r\n\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${current - 1})\" ${current <= 1 ? 'disabled' : ''}>\r\n <i class=\"fas fa-chevron-left arrow-icon\"><\/i> Prev\r\n <\/button>\r\n `;\r\n\r\n const startPage = Math.max(1, current - 2);\r\n const endPage = Math.min(totalPages, current + 2);\r\n\r\n if (startPage > 1) {\r\n html += `<button onclick=\"window.infinexyBlog.goToPage(1)\">1<\/button>`;\r\n if (startPage > 2) {\r\n html += `<button disabled>...<\/button>`;\r\n }\r\n }\r\n\r\n for (let i = startPage; i <= endPage; i++) {\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${i})\" class=\"${i === current ? 'active' : ''}\">\r\n ${i}\r\n <\/button>\r\n `;\r\n }\r\n\r\n if (endPage < totalPages) {\r\n if (endPage < totalPages - 1) {\r\n html += `<button disabled>...<\/button>`;\r\n }\r\n html += `<button onclick=\"window.infinexyBlog.goToPage(${totalPages})\">${totalPages}<\/button>`;\r\n }\r\n\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${current + 1})\" ${current >= totalPages ? 'disabled' : ''}>\r\n Next <i class=\"fas fa-chevron-right arrow-icon\"><\/i>\r\n <\/button>\r\n `;\r\n\r\n pagination.innerHTML = html;\r\n pagination.style.display = 'flex';\r\n }\r\n\r\n \/\/ ===== GO TO PAGE =====\r\n function goToPage(page) {\r\n if (page < 1 || page > totalPages || page === currentPage) return;\r\n currentPage = page;\r\n fetchPosts(page);\r\n document.getElementById('infinexyBlogApp').scrollIntoView({ \r\n behavior: 'smooth', \r\n block: 'start' \r\n });\r\n }\r\n\r\n \/\/ ===== REFRESH =====\r\n function refresh() {\r\n currentPage = 1;\r\n fetchPosts(1);\r\n }\r\n\r\n \/\/ ===== EXPOSE =====\r\n window.infinexyBlog = {\r\n goToPage: goToPage,\r\n refresh: refresh\r\n };\r\n\r\n \/\/ ===== INIT =====\r\n document.addEventListener('DOMContentLoaded', function() {\r\n fetchPosts(1);\r\n });\r\n\r\n})();\r\n<\/script>\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 – News Home News Latest News & Updates Stay informed with the latest news, announcements, and press releases from Infinexy \u2014 covering innovations, partnerships, awards, and key developments in the telecom and cloud communications industry. 25+ News Articles 15+ Press Releases 8 Industry Awards News Latest News Stay updated with the latest news from […]<\/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-1858","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858","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=1858"}],"version-history":[{"count":16,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858\/revisions"}],"predecessor-version":[{"id":2179,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858\/revisions\/2179"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=1858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Infinexy - News<\/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\r\n \/* ========================================\r\n NEWS BANNER\r\n ======================================== *\/\r\n .news-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 \/* ===== ANIMATIONS ===== *\/\r\n\r\n \/* 1. FLOATING ORBS *\/\r\n .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 .news-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 \/* ========================================\r\n BANNER INNER - FLEX LAYOUT WITH IMAGE\r\n ======================================== *\/\r\n .news-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 .news-banner .banner-content {\r\n flex: 1 1 50%;\r\n max-width: 600px;\r\n animation: fadeInUp 0.7s ease 0.1s forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Right image container *\/\r\n .news-banner .banner-image {\r\n flex: 1 1 40%;\r\n max-width: 500px;\r\n margin-left: 20px;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .news-banner .banner-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .news-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 .news-banner .breadcrumb {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n margin-bottom: 24px;\r\n animation: fadeInUp 0.7s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .news-banner .breadcrumb a {\r\n color: rgba(255,255,255,0.5);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .news-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.8);\r\n }\r\n\r\n .news-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n }\r\n\r\n .news-banner .breadcrumb .current {\r\n color: rgba(255,255,255,0.8);\r\n font-weight: 500;\r\n }\r\n\r\n \/* ===== CONTENT ===== *\/\r\n .news-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 .news-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 .news-banner .description {\r\n font-size: clamp(16px, 1.1vw, 19px);\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.7);\r\n max-width: 560px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .news-banner .stats {\r\n display: flex;\r\n gap: 40px;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.7s ease 0.2s forwards;\r\n opacity: 0;\r\n }\r\n\r\n .news-banner .stats .stat-item {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .news-banner .stats .stat-item .number {\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.2;\r\n }\r\n\r\n .news-banner .stats .stat-item .number .highlight {\r\n background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.6));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .news-banner .stats .stat-item .label {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.5);\r\n font-weight: 400;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (min-width: 1400px) {\r\n .news-banner { padding: 120px 0 100px; min-height: 70vh; }\r\n .news-banner .heading { font-size: 62px; }\r\n .news-banner .ring-1 { width: 500px; height: 500px; }\r\n .news-banner .ring-2 { width: 700px; height: 700px; }\r\n }\r\n\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .news-banner { padding: 100px 0 80px; min-height: 65vh; }\r\n .news-banner .heading { font-size: 52px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .news-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .news-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .news-banner .ring-2 { display: none; }\r\n .news-banner .glow-ring { display: none; }\r\n .news-banner .banner-image { flex: 1 1 45%; max-width: 45%; }\r\n .news-banner .banner-content { flex: 1 1 50%; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .news-banner { min-height: auto; padding: 70px 0 50px; }\r\n .news-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .news-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .news-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 .news-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .news-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .news-banner .stats { justify-content: center; }\r\n .news-banner .breadcrumb { justify-content: center; }\r\n .news-banner .orb-2 { display: none; }\r\n .news-banner .ring-1 { display: none; }\r\n .news-banner .ring-3 { display: none; }\r\n .news-banner .shooting-star { display: none; }\r\n .news-banner .tech-shape { display: none; }\r\n .news-banner .grid-overlay { display: none; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .news-banner { padding: 50px 0 40px; }\r\n .news-banner .banner-inner { padding: 0 20px; }\r\n .news-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .news-banner .description { font-size: 15px; line-height: 1.7; }\r\n .news-banner .stats { gap: 24px; flex-direction: row; flex-wrap: wrap; justify-content: center; }\r\n .news-banner .stats .stat-item .number { font-size: 24px; }\r\n .news-banner .stats .stat-item .label { font-size: 12px; }\r\n .news-banner .breadcrumb { font-size: 12px; }\r\n .news-banner .orb-1 { width: 120px; height: 120px; }\r\n .news-banner .orb-3 { display: none; }\r\n .news-banner .particle { display: none; }\r\n .news-banner .pulse-dot { display: none; }\r\n .news-banner .banner-image img { max-width: 320px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .news-banner { padding: 40px 0 30px; }\r\n .news-banner .banner-inner { padding: 0 16px; }\r\n .news-banner .heading { font-size: 26px; }\r\n .news-banner .description { font-size: 14px; }\r\n .news-banner .stats { gap: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; }\r\n .news-banner .stats .stat-item { text-align: center; min-width: 80px; }\r\n .news-banner .stats .stat-item .number { font-size: 22px; }\r\n .news-banner .stats .stat-item .label { font-size: 11px; }\r\n .news-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; }\r\n .news-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .news-banner .banner-image img { max-width: 260px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .news-banner { padding: 30px 0 24px; }\r\n .news-banner .heading { font-size: 22px; }\r\n .news-banner .description { font-size: 13px; }\r\n .news-banner .stats .stat-item .number { font-size: 18px; }\r\n .news-banner .stats .stat-item .label { font-size: 10px; }\r\n .news-banner .breadcrumb { font-size: 10px; }\r\n .news-banner .stats { gap: 10px; }\r\n .news-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"news-banner\">\r\n\r\n \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 \r\n <div class=\"banner-content\">\r\n\r\n \r\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n <a href=\"#\">Home<\/a>\r\n <span class=\"separator\"><i class=\"fas fa-chevron-right\"><\/i><\/span>\r\n <span class=\"current\">News<\/span>\r\n <\/nav>\r\n\r\n \r\n <h1 class=\"heading\">\r\n Latest <span class=\"highlight\">News & Updates<\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"description\">\r\n Stay informed with the latest news, announcements, and press releases \r\n from Infinexy \u2014 covering innovations, partnerships, awards, and key \r\n developments in the telecom and cloud communications industry.\r\n <\/p>\r\n\r\n \r\n <div class=\"stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">25+<\/span><\/span>\r\n <span class=\"label\">News Articles<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">15+<\/span><\/span>\r\n <span class=\"label\">Press Releases<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"number\"><span class=\"highlight\">8<\/span><\/span>\r\n <span class=\"label\">Industry Awards<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"banner-image\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-content\/uploads\/2026\/08\/news-image.png\" \r\n alt=\"Infinexy - News & Updates\"\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-efb3e89 e-con-full e-flex e-con e-parent\" data-id=\"efb3e89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2efcb5d elementor-widget elementor-widget-html\" data-id=\"2efcb5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.infinexy-blog-wrapper * {\r\n font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.infinexy-blog-wrapper {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 60px 28px;\r\n}\r\n\r\n.infinexy-blog-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 56px;\r\n}\r\n\r\n.infinexy-blog-header .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 6px 16px 6px 8px;\r\n border-radius: 100px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: #4D7CD1;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.infinexy-blog-header .badge .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #4D7CD1;\r\n}\r\n\r\n.infinexy-blog-header h2 {\r\n font-size: clamp(32px, 3.8vw, 44px);\r\n font-weight: 800;\r\n color: #0a1a2f;\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.infinexy-blog-header h2 span {\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.infinexy-blog-header p {\r\n font-size: 17px;\r\n color: #475569;\r\n line-height: 1.7;\r\n}\r\n\r\n.infinexy-loader {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 80px 0;\r\n}\r\n\r\n.infinexy-loader .spinner {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n border: 4px solid #e5e7eb;\r\n border-top-color: #8E24AA;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.infinexy-blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n}\r\n\r\n.infinexy-blog-card {\r\n background: #ffffff;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);\r\n border: 1px solid #e5e7eb;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n}\r\n\r\n.infinexy-blog-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3, #8BC34A);\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n z-index: 1;\r\n}\r\n\r\n.infinexy-blog-card:hover::before {\r\n opacity: 1;\r\n}\r\n\r\n.infinexy-blog-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: rgba(142, 36, 170, 0.08);\r\n}\r\n\r\n.infinexy-blog-card .blog-image {\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: 56.25%;\r\n background: #f1f5f9;\r\n}\r\n\r\n.infinexy-blog-card .blog-image img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.infinexy-blog-card:hover .blog-image img {\r\n transform: scale(1.05);\r\n}\r\n\r\n.infinexy-blog-card .blog-category {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n color: #ffffff;\r\n padding: 4px 14px;\r\n border-radius: 100px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n z-index: 2;\r\n}\r\n\r\n.infinexy-blog-card .blog-content {\r\n padding: 24px 22px 22px;\r\n}\r\n\r\n.infinexy-blog-card .blog-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #0a1a2f;\r\n margin-bottom: 10px;\r\n line-height: 1.3;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.infinexy-blog-card .blog-title a {\r\n color: #0a1a2f;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.infinexy-blog-card .blog-title a:hover {\r\n color: #8E24AA;\r\n}\r\n\r\n.infinexy-blog-card .blog-excerpt {\r\n font-size: 14px;\r\n color: #475569;\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n font-size: 13px;\r\n color: #94a3b8;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta .date {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n}\r\n\r\n.infinexy-blog-card .blog-meta .date i {\r\n font-size: 13px;\r\n color: #8E24AA;\r\n}\r\n\r\n.infinexy-blog-card .read-more {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border-radius: 100px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n color: #ffffff;\r\n background: #0a1a2f;\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.infinexy-blog-card .read-more::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 100px;\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\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.infinexy-blog-card .read-more:hover::before {\r\n transform: translateX(0);\r\n}\r\n\r\n.infinexy-blog-card .read-more:hover {\r\n color: #ffffff;\r\n box-shadow: 0 8px 30px rgba(142, 36, 170, 0.35);\r\n}\r\n\r\n.infinexy-blog-card .read-more i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.infinexy-blog-card .read-more:hover i {\r\n transform: translateX(3px);\r\n}\r\n\r\n.infinexy-no-posts {\r\n text-align: center;\r\n padding: 80px 0;\r\n color: #94a3b8;\r\n font-size: 18px;\r\n}\r\n\r\n.infinexy-pagination {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 48px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.infinexy-pagination button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 42px;\r\n height: 42px;\r\n padding: 0 14px;\r\n border-radius: 10px;\r\n border: 1px solid #e5e7eb;\r\n background: #ffffff;\r\n color: #0a1a2f;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.infinexy-pagination button:hover {\r\n border-color: #8E24AA;\r\n color: #8E24AA;\r\n transform: translateY(-2px);\r\n}\r\n\r\n.infinexy-pagination button.active {\r\n background: linear-gradient(135deg, #8E24AA, #009FE3);\r\n border-color: transparent;\r\n color: #ffffff;\r\n}\r\n\r\n.infinexy-pagination button:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n.infinexy-pagination button:disabled:hover {\r\n border-color: #e5e7eb;\r\n color: #0a1a2f;\r\n transform: none;\r\n}\r\n\r\n.infinexy-pagination button .arrow-icon {\r\n font-size: 12px;\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (min-width: 1400px) {\r\n .infinexy-blog-wrapper {\r\n padding: 80px 40px;\r\n }\r\n .infinexy-blog-grid {\r\n gap: 32px;\r\n }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n .infinexy-blog-grid {\r\n gap: 24px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 17px;\r\n }\r\n}\r\n\r\n@media (max-width: 991px) {\r\n .infinexy-blog-wrapper {\r\n padding: 50px 20px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n }\r\n .infinexy-blog-header {\r\n margin-bottom: 40px;\r\n }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n .infinexy-blog-wrapper {\r\n padding: 40px 16px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n }\r\n .infinexy-blog-header h2 {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .infinexy-blog-header p {\r\n font-size: 15px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 18px 16px 16px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 15px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 13px;\r\n -webkit-line-clamp: 2;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 8px 18px;\r\n font-size: 12px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n padding: 0 10px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .infinexy-blog-wrapper {\r\n padding: 30px 12px;\r\n }\r\n .infinexy-blog-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .infinexy-blog-header .badge {\r\n font-size: 10px;\r\n padding: 4px 12px 4px 6px;\r\n }\r\n .infinexy-blog-header h2 {\r\n font-size: 24px;\r\n }\r\n .infinexy-blog-header p {\r\n font-size: 14px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 14px 12px 14px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 13px;\r\n margin-bottom: 6px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 12px;\r\n -webkit-line-clamp: 2;\r\n margin-bottom: 10px;\r\n }\r\n .infinexy-blog-card .blog-meta {\r\n font-size: 11px;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n }\r\n .infinexy-blog-card .blog-meta .date i {\r\n font-size: 11px;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 6px 14px;\r\n font-size: 11px;\r\n gap: 6px;\r\n }\r\n .infinexy-blog-card .read-more i {\r\n font-size: 11px;\r\n }\r\n .infinexy-blog-card .blog-category {\r\n font-size: 9px;\r\n padding: 3px 10px;\r\n top: 10px;\r\n left: 10px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 32px;\r\n height: 32px;\r\n font-size: 12px;\r\n padding: 0 8px;\r\n border-radius: 8px;\r\n }\r\n .infinexy-pagination {\r\n gap: 6px;\r\n margin-top: 32px;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .infinexy-blog-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n }\r\n .infinexy-blog-card .blog-content {\r\n padding: 10px 10px 12px;\r\n }\r\n .infinexy-blog-card .blog-title {\r\n font-size: 12px;\r\n margin-bottom: 4px;\r\n }\r\n .infinexy-blog-card .blog-excerpt {\r\n font-size: 11px;\r\n -webkit-line-clamp: 2;\r\n margin-bottom: 8px;\r\n }\r\n .infinexy-blog-card .blog-meta {\r\n font-size: 10px;\r\n gap: 8px;\r\n margin-bottom: 8px;\r\n }\r\n .infinexy-blog-card .read-more {\r\n padding: 5px 12px;\r\n font-size: 10px;\r\n gap: 4px;\r\n }\r\n .infinexy-blog-card .read-more i {\r\n font-size: 10px;\r\n }\r\n .infinexy-pagination button {\r\n min-width: 28px;\r\n height: 28px;\r\n font-size: 11px;\r\n padding: 0 6px;\r\n border-radius: 6px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"infinexy-blog-wrapper\" id=\"infinexyBlogApp\">\r\n\r\n <div class=\"infinexy-blog-header\">\r\n <div class=\"badge\">\r\n <span class=\"dot\"><\/span>\r\n News\r\n <\/div>\r\n <h2>Latest <span>News<\/span><\/h2>\r\n <p>Stay updated with the latest news from Infinexy and the telecom industry<\/p>\r\n <\/div>\r\n\r\n <div class=\"infinexy-loader\" id=\"blogLoader\">\r\n <div class=\"spinner\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"infinexy-blog-grid\" id=\"blogGrid\" style=\"display:none;\"><\/div>\r\n\r\n <div class=\"infinexy-no-posts\" id=\"noPosts\" style=\"display:none;\">\r\n No news found.\r\n <\/div>\r\n\r\n <div class=\"infinexy-pagination\" id=\"blogPagination\" style=\"display:none;\"><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n 'use strict';\r\n\r\n \/\/ ===== CONFIGURATION =====\r\n const CONFIG = {\r\n API_URL: 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/posts',\r\n PER_PAGE: 6, \/\/ 6 posts per page (3 columns x 2 rows)\r\n \/\/ ===== News Category Slug =====\r\n NEWS_CATEGORY_SLUG: 'news', \/\/ <-- \u0986\u09aa\u09a8\u09be\u09b0 News \u0995\u09cd\u09af\u09be\u099f\u09be\u0997\u09b0\u09bf\u09b0 \u09b8\u09cd\u09b2\u09be\u0997 \u09a6\u09bf\u09a8\r\n };\r\n\r\n let currentPage = 1;\r\n let totalPages = 1;\r\n let isLoading = false;\r\n let categoryId = null;\r\n\r\n const grid = document.getElementById('blogGrid');\r\n const loader = document.getElementById('blogLoader');\r\n const noPosts = document.getElementById('noPosts');\r\n const pagination = document.getElementById('blogPagination');\r\n\r\n \/\/ ===== SHOW LOADER =====\r\n loader.style.display = 'flex';\r\n grid.style.display = 'none';\r\n noPosts.style.display = 'none';\r\n pagination.style.display = 'none';\r\n\r\n \/\/ ===== FETCH CATEGORY ID BY SLUG =====\r\n async function fetchCategoryId() {\r\n try {\r\n const url = 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/categories?slug=' + CONFIG.NEWS_CATEGORY_SLUG;\r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n if (!response.ok) throw new Error('Failed to fetch category');\r\n const categories = await response.json();\r\n if (categories && categories.length > 0) {\r\n categoryId = categories[0].id;\r\n console.log('News Category ID found:', categoryId);\r\n return categoryId;\r\n }\r\n throw new Error('Category not found');\r\n } catch(error) {\r\n console.error('Error fetching category:', error);\r\n return null;\r\n }\r\n }\r\n\r\n \/\/ ===== FETCH ALL CHILD CATEGORY IDs =====\r\n async function fetchAllChildCategoryIds(parentId) {\r\n try {\r\n const url = 'https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/categories?parent=' + parentId;\r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n if (!response.ok) throw new Error('Failed to fetch child categories');\r\n const children = await response.json();\r\n return children.map(function(cat) { return cat.id; });\r\n } catch(error) {\r\n console.error('Error fetching child categories:', error);\r\n return [];\r\n }\r\n }\r\n\r\n \/\/ ===== GET ALL CATEGORY IDs (Parent + Children) =====\r\n async function getAllCategoryIds() {\r\n if (categoryId === null) {\r\n await fetchCategoryId();\r\n }\r\n if (categoryId === null) {\r\n return [];\r\n }\r\n const childIds = await fetchAllChildCategoryIds(categoryId);\r\n return [categoryId, ...childIds];\r\n }\r\n\r\n \/\/ ===== FETCH POSTS - NO CACHE =====\r\n async function fetchPosts(page = 1) {\r\n if (isLoading) return;\r\n isLoading = true;\r\n\r\n loader.style.display = 'flex';\r\n grid.style.display = 'none';\r\n noPosts.style.display = 'none';\r\n pagination.style.display = 'none';\r\n\r\n const timeoutId = setTimeout(function() {\r\n if (isLoading) {\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'Loading is taking longer than expected. Please refresh.';\r\n isLoading = false;\r\n }\r\n }, 8000);\r\n\r\n try {\r\n const allCategoryIds = await getAllCategoryIds();\r\n \r\n if (allCategoryIds.length === 0) {\r\n clearTimeout(timeoutId);\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'News category not found. Please check the category slug.';\r\n isLoading = false;\r\n return;\r\n }\r\n\r\n const categoryIdsString = allCategoryIds.join(',');\r\n\r\n \/\/ ===== FETCH ONLY NEWS CATEGORY POSTS =====\r\n const url = CONFIG.API_URL + \r\n '?page=' + page + \r\n '&per_page=' + CONFIG.PER_PAGE + \r\n '&categories=' + categoryIdsString + \r\n '&_embed&orderby=date&order=desc';\r\n \r\n console.log('Fetching News from:', url);\r\n \r\n const response = await fetch(url, {\r\n cache: 'no-cache',\r\n headers: {\r\n 'Cache-Control': 'no-cache, no-store, must-revalidate',\r\n 'Pragma': 'no-cache',\r\n 'Expires': '0'\r\n }\r\n });\r\n \r\n const totalPagesHeader = response.headers.get('X-WP-TotalPages');\r\n if (totalPagesHeader) {\r\n totalPages = parseInt(totalPagesHeader);\r\n }\r\n\r\n if (!response.ok) {\r\n throw new Error('HTTP ' + response.status);\r\n }\r\n\r\n const posts = await response.json();\r\n console.log('News posts fetched:', posts.length);\r\n\r\n clearTimeout(timeoutId);\r\n loader.style.display = 'none';\r\n\r\n if (!posts || posts.length === 0) {\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'No news posts found.';\r\n return;\r\n }\r\n\r\n renderPosts(posts);\r\n grid.style.display = 'grid';\r\n renderPagination(page);\r\n\r\n } catch(error) {\r\n clearTimeout(timeoutId);\r\n console.error('Error:', error);\r\n loader.style.display = 'none';\r\n noPosts.style.display = 'block';\r\n noPosts.innerHTML = 'Could not load news. Please refresh the page.';\r\n } finally {\r\n isLoading = false;\r\n }\r\n }\r\n\r\n \/\/ ===== RENDER POSTS =====\r\n function renderPosts(posts) {\r\n let html = '';\r\n \r\n posts.forEach(function(post) {\r\n let imageUrl = 'https:\/\/via.placeholder.com\/600x400\/8E24AA\/ffffff?text=No+Image';\r\n if (post._embedded && post._embedded['wp:featuredmedia']) {\r\n const media = post._embedded['wp:featuredmedia'][0];\r\n if (media && media.source_url) {\r\n imageUrl = media.source_url;\r\n }\r\n }\r\n\r\n let categoryName = 'News';\r\n if (post._embedded && post._embedded['wp:term']) {\r\n const terms = post._embedded['wp:term'][0];\r\n if (terms && terms.length > 0) {\r\n categoryName = terms[0].name;\r\n }\r\n }\r\n\r\n const date = new Date(post.date);\r\n const formattedDate = date.toLocaleDateString('en-US', {\r\n month: 'short',\r\n day: 'numeric',\r\n year: 'numeric'\r\n });\r\n\r\n let excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, '');\r\n if (excerpt.length > 120) {\r\n excerpt = excerpt.substring(0, 120) + '...';\r\n }\r\n\r\n html += `\r\n <div class=\"infinexy-blog-card\">\r\n <div class=\"blog-image\">\r\n <a href=\"${post.link}\" target=\"_blank\">\r\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${post.title.rendered}\" loading=\"lazy\" \/>\r\n <\/a>\r\n <span class=\"blog-category\">${categoryName}<\/span>\r\n <\/div>\r\n <div class=\"blog-content\">\r\n <h3 class=\"blog-title\">\r\n <a href=\"${post.link}\" target=\"_blank\">${post.title.rendered}<\/a>\r\n <\/h3>\r\n <div class=\"blog-excerpt\">${excerpt}<\/div>\r\n <div class=\"blog-meta\">\r\n <span class=\"date\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n ${formattedDate}\r\n <\/span>\r\n <\/div>\r\n <a href=\"${post.link}\" target=\"_blank\" class=\"read-more\">\r\n <span>Read More<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n grid.innerHTML = html;\r\n }\r\n\r\n \/\/ ===== PAGINATION =====\r\n function renderPagination(current) {\r\n if (totalPages <= 1) {\r\n pagination.style.display = 'none';\r\n return;\r\n }\r\n\r\n let html = '';\r\n\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${current - 1})\" ${current <= 1 ? 'disabled' : ''}>\r\n <i class=\"fas fa-chevron-left arrow-icon\"><\/i> Prev\r\n <\/button>\r\n `;\r\n\r\n const startPage = Math.max(1, current - 2);\r\n const endPage = Math.min(totalPages, current + 2);\r\n\r\n if (startPage > 1) {\r\n html += `<button onclick=\"window.infinexyBlog.goToPage(1)\">1<\/button>`;\r\n if (startPage > 2) {\r\n html += `<button disabled>...<\/button>`;\r\n }\r\n }\r\n\r\n for (let i = startPage; i <= endPage; i++) {\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${i})\" class=\"${i === current ? 'active' : ''}\">\r\n ${i}\r\n <\/button>\r\n `;\r\n }\r\n\r\n if (endPage < totalPages) {\r\n if (endPage < totalPages - 1) {\r\n html += `<button disabled>...<\/button>`;\r\n }\r\n html += `<button onclick=\"window.infinexyBlog.goToPage(${totalPages})\">${totalPages}<\/button>`;\r\n }\r\n\r\n html += `\r\n <button onclick=\"window.infinexyBlog.goToPage(${current + 1})\" ${current >= totalPages ? 'disabled' : ''}>\r\n Next <i class=\"fas fa-chevron-right arrow-icon\"><\/i>\r\n <\/button>\r\n `;\r\n\r\n pagination.innerHTML = html;\r\n pagination.style.display = 'flex';\r\n }\r\n\r\n \/\/ ===== GO TO PAGE =====\r\n function goToPage(page) {\r\n if (page < 1 || page > totalPages || page === currentPage) return;\r\n currentPage = page;\r\n fetchPosts(page);\r\n document.getElementById('infinexyBlogApp').scrollIntoView({ \r\n behavior: 'smooth', \r\n block: 'start' \r\n });\r\n }\r\n\r\n \/\/ ===== REFRESH =====\r\n function refresh() {\r\n currentPage = 1;\r\n fetchPosts(1);\r\n }\r\n\r\n \/\/ ===== EXPOSE =====\r\n window.infinexyBlog = {\r\n goToPage: goToPage,\r\n refresh: refresh\r\n };\r\n\r\n \/\/ ===== INIT =====\r\n document.addEventListener('DOMContentLoaded', function() {\r\n fetchPosts(1);\r\n });\r\n\r\n})();\r\n<\/script>\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 – News Home News Latest News & Updates Stay informed with the latest news, announcements, and press releases from Infinexy \u2014 covering innovations, partnerships, awards, and key developments in the telecom and cloud communications industry. 25+ News Articles 15+ Press Releases 8 Industry Awards News Latest News Stay updated with the latest news from […]<\/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-1858","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858","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=1858"}],"version-history":[{"count":16,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858\/revisions"}],"predecessor-version":[{"id":2179,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/1858\/revisions\/2179"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=1858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}