Infinexy - Resources<\/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 RESOURCES BANNER \/ HERO\r\n ======================================== *\/\r\n .resources-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 \/* ===== VISIBLE ANIMATIONS - PREMIUM ===== *\/\r\n\r\n \/* 1. FLOATING ORBS *\/\r\n .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 \/ DATA FLOW *\/\r\n .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.8);\r\n }\r\n\r\n .resources-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n }\r\n\r\n .resources-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 .resources-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 .resources-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 .resources-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 @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 - ALL SCREENS\r\n ======================================== *\/\r\n\r\n @media (min-width: 1400px) {\r\n .resources-banner { padding: 120px 0 100px; min-height: 70vh; }\r\n .resources-banner .heading { font-size: 62px; }\r\n .resources-banner .ring-1 { width: 500px; height: 500px; }\r\n .resources-banner .ring-2 { width: 700px; height: 700px; }\r\n }\r\n\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .resources-banner { padding: 100px 0 80px; min-height: 65vh; }\r\n .resources-banner .heading { font-size: 52px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .resources-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .resources-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .resources-banner .ring-2 { display: none; }\r\n .resources-banner .glow-ring { display: none; }\r\n .resources-banner .banner-image { flex: 1 1 45%; max-width: 45%; }\r\n .resources-banner .banner-content { flex: 1 1 50%; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .resources-banner { min-height: auto; padding: 70px 0 50px; }\r\n .resources-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .resources-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .resources-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 .resources-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .resources-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .resources-banner .breadcrumb { justify-content: center; }\r\n .resources-banner .orb-2 { display: none; }\r\n .resources-banner .ring-1 { display: none; }\r\n .resources-banner .ring-3 { display: none; }\r\n .resources-banner .shooting-star { display: none; }\r\n .resources-banner .tech-shape { display: none; }\r\n .resources-banner .grid-overlay { display: none; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .resources-banner { padding: 50px 0 40px; }\r\n .resources-banner .banner-inner { padding: 0 20px; }\r\n .resources-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .resources-banner .description { font-size: 15px; line-height: 1.7; }\r\n .resources-banner .breadcrumb { font-size: 12px; }\r\n .resources-banner .orb-1 { width: 120px; height: 120px; }\r\n .resources-banner .orb-3 { display: none; }\r\n .resources-banner .particle { display: none; }\r\n .resources-banner .pulse-dot { display: none; }\r\n .resources-banner .banner-image img { max-width: 320px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .resources-banner { padding: 40px 0 30px; }\r\n .resources-banner .banner-inner { padding: 0 16px; }\r\n .resources-banner .heading { font-size: 26px; }\r\n .resources-banner .description { font-size: 14px; }\r\n .resources-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; }\r\n .resources-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .resources-banner .banner-image img { max-width: 260px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .resources-banner { padding: 30px 0 24px; }\r\n .resources-banner .heading { font-size: 22px; }\r\n .resources-banner .description { font-size: 13px; }\r\n .resources-banner .breadcrumb { font-size: 10px; }\r\n .resources-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"resources-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\">Resources<\/span>\r\n <\/nav>\r\n\r\n <h1 class=\"heading\">\r\n <span class=\"highlight\">Resources<\/span>\r\n <\/h1>\r\n\r\n <p class=\"description\">\r\n Explore our comprehensive library of resources designed to help you stay informed, \r\n make better decisions, and get the most out of our telecom and cloud solutions. \r\n From technical documentation to industry insights \u2014 we've got you covered.\r\n <\/p>\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\/Resources-image.webp\" \r\n alt=\"Infinexy - Resources Library\"\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-9d5692c e-con-full e-flex e-con e-parent\" data-id=\"9d5692c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-713c833 elementor-widget elementor-widget-html\" data-id=\"713c833\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy \u00b7 Resources<\/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 RESET & BASE\r\n ======================================== *\/\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, .resources-section, .resources-inner, .resources-header,\r\n .resources-badge, .resources-title, .resources-subtitle,\r\n .resources-grid, .resource-card, .resource-icon-wrapper,\r\n .resource-card-title, .resource-card-desc, .resource-link,\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 --blue-dark: #0077B6;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #3278D1;\r\n --icon-bg: #3278D1;\r\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ========================================\r\n RESOURCES SECTION\r\n ======================================== *\/\r\n .resources-section {\r\n padding: 90px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .resources-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 .resources-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .resources-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n margin-bottom: 14px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .resources-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 .resources-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 .resources-title .highlight {\r\n background: linear-gradient(135deg, var(--badge-color), 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 .resources-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n RESOURCES GRID\r\n ======================================== *\/\r\n .resources-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n RESOURCE CARD\r\n ======================================== *\/\r\n .resource-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 32px 22px 28px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: pointer;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n text-decoration: none;\r\n display: block;\r\n }\r\n\r\n .resource-card:nth-child(1) { animation-delay: 0.04s; }\r\n .resource-card:nth-child(2) { animation-delay: 0.08s; }\r\n .resource-card:nth-child(3) { animation-delay: 0.12s; }\r\n .resource-card:nth-child(4) { animation-delay: 0.16s; }\r\n .resource-card:nth-child(5) { animation-delay: 0.20s; }\r\n .resource-card:nth-child(6) { animation-delay: 0.24s; }\r\n .resource-card:nth-child(7) { animation-delay: 0.28s; }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Animated Gradient Border *\/\r\n .resource-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--badge-color), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .resource-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .resource-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n \/* Data flow line *\/\r\n .resource-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--badge-color), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .resource-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAPPER - #3278D1 ===== *\/\r\n .resource-card .resource-icon-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n color: var(--white);\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--icon-bg);\r\n }\r\n\r\n .resource-card .resource-icon-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .resource-card .resource-icon-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: var(--icon-bg);\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper::before {\r\n opacity: 1;\r\n border-color: var(--icon-bg);\r\n transform: scale(1.05);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .resource-card .resource-icon-wrapper i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .resource-card .resource-card-title {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resource-card:hover .resource-card-title {\r\n background: linear-gradient(135deg, var(--badge-color), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION ===== *\/\r\n .resource-card .resource-card-desc {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .resource-card:hover .resource-card-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== LINK ===== *\/\r\n .resource-card .resource-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n }\r\n\r\n .resource-card .resource-link i {\r\n font-size: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .resource-card:hover .resource-link i {\r\n transform: translateX(4px);\r\n }\r\n\r\n .resource-card .resource-link:hover {\r\n color: var(--blue-dark);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .resource-card .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .resource-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .resource-card .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(50, 120, 209, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .resource-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .resources-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .resources-section {\r\n padding: 70px 0;\r\n }\r\n .resources-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .resources-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .resources-section {\r\n padding: 56px 0 48px;\r\n }\r\n .resources-inner {\r\n padding: 0 20px;\r\n }\r\n .resources-header {\r\n margin-bottom: 32px;\r\n }\r\n .resources-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .resources-subtitle {\r\n font-size: 15px;\r\n }\r\n .resources-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .resource-card {\r\n padding: 24px 16px 20px;\r\n border-radius: 14px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 15px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .resources-section {\r\n padding: 40px 0;\r\n }\r\n .resources-inner {\r\n padding: 0 16px;\r\n }\r\n .resources-header {\r\n margin-bottom: 24px;\r\n }\r\n .resources-title {\r\n font-size: 24px;\r\n }\r\n .resources-subtitle {\r\n font-size: 14px;\r\n }\r\n .resources-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .resource-card {\r\n padding: 18px 12px 16px;\r\n border-radius: 12px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .resource-card .resource-icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 13px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 11px;\r\n margin-bottom: 10px;\r\n }\r\n .resource-card .resource-link {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .resources-grid {\r\n gap: 10px;\r\n }\r\n .resource-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 12px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 10px;\r\n }\r\n .resource-card .resource-link {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"resources-section\">\r\n <div class=\"resources-inner\">\r\n\r\n \r\n <div class=\"resources-header\">\r\n <div class=\"resources-badge\">\r\n <span class=\"dot\"><\/span> Knowledge Hub\r\n <\/div>\r\n <h2 class=\"resources-title\">\r\n Resources Library<\/h2>\r\n <p class=\"resources-subtitle\">\r\n Explore our collection of blogs, news, documentation, white papers, and more\r\n to stay informed and empowered.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"resources-grid\">\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-pen-fancy\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Blog<\/h3>\r\n <p class=\"resource-card-desc\">Insights, trends, and stories from our experts.<\/p>\r\n <span class=\"resource-link\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-newspaper\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">News<\/h3>\r\n <p class=\"resource-card-desc\">Latest updates and announcements from Infinexy.<\/p>\r\n <span class=\"resource-link\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">White Papers<\/h3>\r\n <p class=\"resource-card-desc\">In-depth research and technical analysis.<\/p>\r\n <span class=\"resource-link\">Download <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-book\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Documentation<\/h3>\r\n <p class=\"resource-card-desc\">Comprehensive guides and API references.<\/p>\r\n <span class=\"resource-link\">View Docs <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-download\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Downloads<\/h3>\r\n <p class=\"resource-card-desc\">Software, tools, and resources for your needs.<\/p>\r\n <span class=\"resource-link\">Download <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-question-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">FAQs<\/h3>\r\n <p class=\"resource-card-desc\">Answers to the most commonly asked questions.<\/p>\r\n <span class=\"resource-link\">View FAQs <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-file-pdf\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Product Sheets<\/h3>\r\n <p class=\"resource-card-desc\">Detailed product specifications and features.<\/p>\r\n <span class=\"resource-link\">View Sheets <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infinexy – Resources Home Resources Resources Explore our comprehensive library of resources designed to help you stay informed, make better decisions, and get the most out of our telecom and cloud solutions. From technical documentation to industry insights \u2014 we’ve got you covered. Infinexy \u00b7 Resources Knowledge Hub Resources Library Explore our collection of blogs, […]<\/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-869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869","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=869"}],"version-history":[{"count":13,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869\/revisions"}],"predecessor-version":[{"id":2300,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869\/revisions\/2300"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=869"}],"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 - Resources<\/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 RESOURCES BANNER \/ HERO\r\n ======================================== *\/\r\n .resources-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 \/* ===== VISIBLE ANIMATIONS - PREMIUM ===== *\/\r\n\r\n \/* 1. FLOATING ORBS *\/\r\n .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 \/ DATA FLOW *\/\r\n .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-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 .resources-banner .breadcrumb a:hover {\r\n color: rgba(255,255,255,0.8);\r\n }\r\n\r\n .resources-banner .breadcrumb .separator {\r\n color: rgba(255,255,255,0.2);\r\n }\r\n\r\n .resources-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 .resources-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 .resources-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 .resources-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 @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 - ALL SCREENS\r\n ======================================== *\/\r\n\r\n @media (min-width: 1400px) {\r\n .resources-banner { padding: 120px 0 100px; min-height: 70vh; }\r\n .resources-banner .heading { font-size: 62px; }\r\n .resources-banner .ring-1 { width: 500px; height: 500px; }\r\n .resources-banner .ring-2 { width: 700px; height: 700px; }\r\n }\r\n\r\n @media (max-width: 1399px) and (min-width: 1200px) {\r\n .resources-banner { padding: 100px 0 80px; min-height: 65vh; }\r\n .resources-banner .heading { font-size: 52px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .resources-banner { min-height: 55vh; padding: 80px 0 60px; }\r\n .resources-banner .heading { font-size: clamp(36px, 4.5vw, 46px); }\r\n .resources-banner .ring-2 { display: none; }\r\n .resources-banner .glow-ring { display: none; }\r\n .resources-banner .banner-image { flex: 1 1 45%; max-width: 45%; }\r\n .resources-banner .banner-content { flex: 1 1 50%; }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .resources-banner { min-height: auto; padding: 70px 0 50px; }\r\n .resources-banner .banner-inner { flex-direction: column; text-align: center; }\r\n .resources-banner .banner-content { max-width: 100%; flex: 1 1 100%; }\r\n .resources-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 .resources-banner .banner-image img { max-width: 400px; margin: 0 auto; }\r\n .resources-banner .description { max-width: 100%; margin-left: auto; margin-right: auto; }\r\n .resources-banner .breadcrumb { justify-content: center; }\r\n .resources-banner .orb-2 { display: none; }\r\n .resources-banner .ring-1 { display: none; }\r\n .resources-banner .ring-3 { display: none; }\r\n .resources-banner .shooting-star { display: none; }\r\n .resources-banner .tech-shape { display: none; }\r\n .resources-banner .grid-overlay { display: none; }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .resources-banner { padding: 50px 0 40px; }\r\n .resources-banner .banner-inner { padding: 0 20px; }\r\n .resources-banner .heading { font-size: clamp(30px, 6vw, 36px); }\r\n .resources-banner .description { font-size: 15px; line-height: 1.7; }\r\n .resources-banner .breadcrumb { font-size: 12px; }\r\n .resources-banner .orb-1 { width: 120px; height: 120px; }\r\n .resources-banner .orb-3 { display: none; }\r\n .resources-banner .particle { display: none; }\r\n .resources-banner .pulse-dot { display: none; }\r\n .resources-banner .banner-image img { max-width: 320px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .resources-banner { padding: 40px 0 30px; }\r\n .resources-banner .banner-inner { padding: 0 16px; }\r\n .resources-banner .heading { font-size: 26px; }\r\n .resources-banner .description { font-size: 14px; }\r\n .resources-banner .breadcrumb { font-size: 11px; flex-wrap: wrap; }\r\n .resources-banner .orb-1 { width: 80px; height: 80px; top: -30px; right: -30px; }\r\n .resources-banner .banner-image img { max-width: 260px; }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .resources-banner { padding: 30px 0 24px; }\r\n .resources-banner .heading { font-size: 22px; }\r\n .resources-banner .description { font-size: 13px; }\r\n .resources-banner .breadcrumb { font-size: 10px; }\r\n .resources-banner .banner-image img { max-width: 220px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"resources-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\">Resources<\/span>\r\n <\/nav>\r\n\r\n <h1 class=\"heading\">\r\n <span class=\"highlight\">Resources<\/span>\r\n <\/h1>\r\n\r\n <p class=\"description\">\r\n Explore our comprehensive library of resources designed to help you stay informed, \r\n make better decisions, and get the most out of our telecom and cloud solutions. \r\n From technical documentation to industry insights \u2014 we've got you covered.\r\n <\/p>\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\/Resources-image.webp\" \r\n alt=\"Infinexy - Resources Library\"\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-9d5692c e-con-full e-flex e-con e-parent\" data-id=\"9d5692c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-713c833 elementor-widget elementor-widget-html\" data-id=\"713c833\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Infinexy \u00b7 Resources<\/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 RESET & BASE\r\n ======================================== *\/\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, .resources-section, .resources-inner, .resources-header,\r\n .resources-badge, .resources-title, .resources-subtitle,\r\n .resources-grid, .resource-card, .resource-icon-wrapper,\r\n .resource-card-title, .resource-card-desc, .resource-link,\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 --blue-dark: #0077B6;\r\n --green: #8BC34A;\r\n --orange: #FB8C00;\r\n --yellow: #FFC107;\r\n --dark: #0a1a2f;\r\n --gray: #475569;\r\n --gray-light: #94a3b8;\r\n --white: #ffffff;\r\n --light-bg: #f8fafc;\r\n --border: #e5e7eb;\r\n --badge-color: #3278D1;\r\n --icon-bg: #3278D1;\r\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n \/* ========================================\r\n RESOURCES SECTION\r\n ======================================== *\/\r\n .resources-section {\r\n padding: 90px 0 80px;\r\n background: var(--white);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .resources-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 .resources-header {\r\n text-align: center;\r\n max-width: 680px;\r\n margin: 0 auto 48px;\r\n }\r\n\r\n .resources-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n margin-bottom: 14px;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .resources-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 .resources-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 .resources-title .highlight {\r\n background: linear-gradient(135deg, var(--badge-color), 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 .resources-subtitle {\r\n font-size: 17px;\r\n color: var(--gray);\r\n line-height: 1.7;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ========================================\r\n RESOURCES GRID\r\n ======================================== *\/\r\n .resources-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* ========================================\r\n RESOURCE CARD\r\n ======================================== *\/\r\n .resource-card {\r\n background: var(--white);\r\n border-radius: 16px;\r\n padding: 32px 22px 28px;\r\n border: 1px solid var(--border);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-align: center;\r\n cursor: pointer;\r\n overflow: hidden;\r\n animation: fadeInUp 0.8s ease forwards;\r\n opacity: 0;\r\n text-decoration: none;\r\n display: block;\r\n }\r\n\r\n .resource-card:nth-child(1) { animation-delay: 0.04s; }\r\n .resource-card:nth-child(2) { animation-delay: 0.08s; }\r\n .resource-card:nth-child(3) { animation-delay: 0.12s; }\r\n .resource-card:nth-child(4) { animation-delay: 0.16s; }\r\n .resource-card:nth-child(5) { animation-delay: 0.20s; }\r\n .resource-card:nth-child(6) { animation-delay: 0.24s; }\r\n .resource-card:nth-child(7) { animation-delay: 0.28s; }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* Animated Gradient Border *\/\r\n .resource-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n border-radius: 16px;\r\n padding: 1.5px;\r\n background: linear-gradient(135deg, var(--badge-color), var(--blue), var(--green), var(--orange));\r\n background-size: 300% 300%;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n animation: gradientMove 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .resource-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .resource-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.06);\r\n border-color: transparent;\r\n }\r\n\r\n \/* Data flow line *\/\r\n .resource-card .data-flow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--badge-color), var(--blue), var(--green), transparent);\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 0.8s ease;\r\n transform-origin: left;\r\n }\r\n\r\n .resource-card:hover .data-flow {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n animation: dataFlowPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes dataFlowPulse {\r\n 0%, 100% { opacity: 0.6; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n \/* ===== ICON WRAPPER - #3278D1 ===== *\/\r\n .resource-card .resource-icon-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n font-size: 26px;\r\n color: var(--white);\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--icon-bg);\r\n }\r\n\r\n .resource-card .resource-icon-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n opacity: 0;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n animation: ringRotate 3s linear infinite;\r\n }\r\n\r\n @keyframes ringRotate {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .resource-card .resource-icon-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n inset: -12px;\r\n border-radius: 50%;\r\n background: var(--icon-bg);\r\n opacity: 0;\r\n filter: blur(20px);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n transform: scale(0.8);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper::before {\r\n opacity: 1;\r\n border-color: var(--icon-bg);\r\n transform: scale(1.05);\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper::after {\r\n opacity: 0.15;\r\n transform: scale(1);\r\n }\r\n\r\n .resource-card .resource-icon-wrapper i {\r\n position: relative;\r\n z-index: 1;\r\n color: var(--white);\r\n font-size: 26px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resource-card:hover .resource-icon-wrapper i {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .resource-card .resource-card-title {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 6px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .resource-card:hover .resource-card-title {\r\n background: linear-gradient(135deg, var(--badge-color), var(--blue));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* ===== DESCRIPTION ===== *\/\r\n .resource-card .resource-card-desc {\r\n font-size: 14px;\r\n color: var(--gray-light);\r\n line-height: 1.6;\r\n transition: color 0.4s ease;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .resource-card:hover .resource-card-desc {\r\n color: var(--gray);\r\n }\r\n\r\n \/* ===== LINK ===== *\/\r\n .resource-card .resource-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--badge-color);\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n }\r\n\r\n .resource-card .resource-link i {\r\n font-size: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .resource-card:hover .resource-link i {\r\n transform: translateX(4px);\r\n }\r\n\r\n .resource-card .resource-link:hover {\r\n color: var(--blue-dark);\r\n }\r\n\r\n \/* ===== SHINE ===== *\/\r\n .resource-card .shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: linear-gradient(\r\n 45deg,\r\n transparent 35%,\r\n rgba(255, 255, 255, 0.04) 50%,\r\n transparent 65%\r\n );\r\n transform: rotate(45deg) translateX(-100%);\r\n transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .resource-card:hover .shine {\r\n transform: rotate(45deg) translateX(100%);\r\n }\r\n\r\n \/* ===== GLOW OVERLAY ===== *\/\r\n .resource-card .glow-overlay {\r\n position: absolute;\r\n top: -30%;\r\n left: 50%;\r\n width: 150%;\r\n height: 150%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(50, 120, 209, 0.02), transparent 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n pointer-events: none;\r\n border-radius: 50%;\r\n }\r\n\r\n .resource-card:hover .glow-overlay {\r\n opacity: 1;\r\n }\r\n\r\n \/* ========================================\r\n RESPONSIVE\r\n ======================================== *\/\r\n\r\n @media (max-width: 1199px) {\r\n .resources-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .resources-section {\r\n padding: 70px 0;\r\n }\r\n .resources-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n .resources-title {\r\n font-size: clamp(30px, 4vw, 38px);\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .resources-section {\r\n padding: 56px 0 48px;\r\n }\r\n .resources-inner {\r\n padding: 0 20px;\r\n }\r\n .resources-header {\r\n margin-bottom: 32px;\r\n }\r\n .resources-title {\r\n font-size: clamp(28px, 6vw, 32px);\r\n }\r\n .resources-subtitle {\r\n font-size: 15px;\r\n }\r\n .resources-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n }\r\n .resource-card {\r\n padding: 24px 16px 20px;\r\n border-radius: 14px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 20px;\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 15px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .resources-section {\r\n padding: 40px 0;\r\n }\r\n .resources-inner {\r\n padding: 0 16px;\r\n }\r\n .resources-header {\r\n margin-bottom: 24px;\r\n }\r\n .resources-title {\r\n font-size: 24px;\r\n }\r\n .resources-subtitle {\r\n font-size: 14px;\r\n }\r\n .resources-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .resource-card {\r\n padding: 18px 12px 16px;\r\n border-radius: 12px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 16px;\r\n }\r\n .resource-card .resource-icon-wrapper::after {\r\n inset: -6px;\r\n filter: blur(12px);\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 13px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 11px;\r\n margin-bottom: 10px;\r\n }\r\n .resource-card .resource-link {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 375px) {\r\n .resources-grid {\r\n gap: 10px;\r\n }\r\n .resource-card {\r\n padding: 14px 10px 12px;\r\n border-radius: 10px;\r\n }\r\n .resource-card .resource-icon-wrapper {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n }\r\n .resource-card .resource-icon-wrapper i {\r\n font-size: 13px;\r\n }\r\n .resource-card .resource-card-title {\r\n font-size: 12px;\r\n }\r\n .resource-card .resource-card-desc {\r\n font-size: 10px;\r\n }\r\n .resource-card .resource-link {\r\n font-size: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"resources-section\">\r\n <div class=\"resources-inner\">\r\n\r\n \r\n <div class=\"resources-header\">\r\n <div class=\"resources-badge\">\r\n <span class=\"dot\"><\/span> Knowledge Hub\r\n <\/div>\r\n <h2 class=\"resources-title\">\r\n Resources Library<\/h2>\r\n <p class=\"resources-subtitle\">\r\n Explore our collection of blogs, news, documentation, white papers, and more\r\n to stay informed and empowered.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"resources-grid\">\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-pen-fancy\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Blog<\/h3>\r\n <p class=\"resource-card-desc\">Insights, trends, and stories from our experts.<\/p>\r\n <span class=\"resource-link\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-newspaper\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">News<\/h3>\r\n <p class=\"resource-card-desc\">Latest updates and announcements from Infinexy.<\/p>\r\n <span class=\"resource-link\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">White Papers<\/h3>\r\n <p class=\"resource-card-desc\">In-depth research and technical analysis.<\/p>\r\n <span class=\"resource-link\">Download <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-book\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Documentation<\/h3>\r\n <p class=\"resource-card-desc\">Comprehensive guides and API references.<\/p>\r\n <span class=\"resource-link\">View Docs <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-download\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Downloads<\/h3>\r\n <p class=\"resource-card-desc\">Software, tools, and resources for your needs.<\/p>\r\n <span class=\"resource-link\">Download <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-question-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">FAQs<\/h3>\r\n <p class=\"resource-card-desc\">Answers to the most commonly asked questions.<\/p>\r\n <span class=\"resource-link\">View FAQs <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n \r\n <a href=\"#\" class=\"resource-card\">\r\n <div class=\"shine\"><\/div>\r\n <div class=\"glow-overlay\"><\/div>\r\n <div class=\"data-flow\"><\/div>\r\n <div class=\"resource-icon-wrapper\">\r\n <i class=\"fas fa-file-pdf\"><\/i>\r\n <\/div>\r\n <h3 class=\"resource-card-title\">Product Sheets<\/h3>\r\n <p class=\"resource-card-desc\">Detailed product specifications and features.<\/p>\r\n <span class=\"resource-link\">View Sheets <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infinexy – Resources Home Resources Resources Explore our comprehensive library of resources designed to help you stay informed, make better decisions, and get the most out of our telecom and cloud solutions. From technical documentation to industry insights \u2014 we’ve got you covered. Infinexy \u00b7 Resources Knowledge Hub Resources Library Explore our collection of blogs, […]<\/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-869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869","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=869"}],"version-history":[{"count":13,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869\/revisions"}],"predecessor-version":[{"id":2300,"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/pages\/869\/revisions\/2300"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/Infinexy\/wp-json\/wp\/v2\/media?parent=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}