We Simplify
Testing | Diagnostics | Monitoring
High quality product that you can count on us.
EXPLORE
/* =====================================
INFINITY HERO - BUTTON HOVER EFFECT
===================================== */
#infinity-hero-custom .infinity-explore {
background-color: #FFC011;
color: #182C64 !important;
border: 1px solid transparent;
transition:
background-color 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
#infinity-hero-custom .infinity-explore:hover,
#infinity-hero-custom .infinity-explore:focus-visible {
background-color: #283C8F;
color: #FFFFFF !important;
box-shadow: 0 5px 16px rgba(40, 60, 143, 0.25);
transform: translateY(-2px);
}
/* =====================================
INFINITY HERO - FADE IN UP ANIMATION
===================================== */
@keyframes infinityFadeInUp {
from {
opacity: 0;
transform: translateY(35px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Heading 1 */
#infinity-hero-custom .infinity-hero-content h1 {
animation: infinityFadeInUp 0.9s ease-out 0.2s both;
}
/* Heading 2 */
#infinity-hero-custom .infinity-hero-content h2 {
animation: infinityFadeInUp 0.9s ease-out 0.4s both;
}
/* Description */
#infinity-hero-custom .infinity-hero-content p {
animation: infinityFadeInUp 0.9s ease-out 0.6s both;
}
/* Explore Button */
#infinity-hero-custom .infinity-explore {
animation: infinityFadeInUp 0.9s ease-out 0.8s both;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
#infinity-hero-custom .infinity-hero-content h1,
#infinity-hero-custom .infinity-hero-content h2,
#infinity-hero-custom .infinity-hero-content p,
#infinity-hero-custom .infinity-explore {
animation: none !important;
}
#infinity-hero-custom .infinity-explore {
transition: none;
}
}
/* MAIN HERO SECTION */
#infinity-hero-custom {
position: relative;
width: 100%;
min-height: 570px;
background: #f8f8f8;
overflow: hidden;
display: flex;
align-items: center;
isolation: isolate;
}
/* PARTICLE BACKGROUND */
#infinity-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
#infinity-particles canvas {
display: block;
width: 100%;
height: 100%;
}
/* HERO CONTENT */
.infinity-hero-content {
position: relative;
z-index: 2;
width: min(1140px, calc(100% - 40px));
margin: 0 auto;
}
/* BLUE HEADING */
.infinity-hero-content h1 {
font-family: Arial, sans-serif;
font-size: clamp(30px, 3vw, 44px);
font-weight: 700;
line-height: 1.2;
color: #101761;
margin: 0 0 16px;
}
/* YELLOW HEADING */
.infinity-hero-content h2 {
font-family: Arial, sans-serif;
font-size: clamp(30px, 3.8vw, 52px);
font-weight: 800;
line-height: 1.2;
color: #FFC011;
margin: 0 0 40px;
}
/* DESCRIPTION */
.infinity-hero-content p {
font-family: Arial, sans-serif;
font-size: 20px;
line-height: 1.6;
color: #111111;
margin: 0 0 60px;
}
/* EXPLORE BUTTON */
.infinity-explore {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 160px;
padding: 14px 30px;
background: #FFC011;
color: #182c64 !important;
border-radius: 50px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 2px 8px rgba(255,192,17,0.3);
transition: transform .25s, box-shadow .25s;
}
.infinity-explore:hover {
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(255,192,17,0.4);
}
/* TABLET */
@media (max-width: 1024px) {
#infinity-hero-custom {
min-height: 540px;
}
.infinity-hero-content {
padding: 0 15px;
}
.infinity-hero-content h2 {
font-size: clamp(30px, 4.5vw, 44px);
}
}
/* MOBILE */
@media (max-width: 767px) {
#infinity-hero-custom {
min-height: 480px;
}
.infinity-hero-content {
width: calc(100% - 40px);
padding: 0;
}
.infinity-hero-content h1 {
font-size: 30px;
}
.infinity-hero-content h2 {
font-size: clamp(28px, 7vw, 38px);
margin-bottom: 25px;
}
.infinity-hero-content p {
font-size: 16px;
margin-bottom: 35px;
}
.infinity-explore {
min-width: 130px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.infinity-explore {
transition: none;
}
}
(function () {
"use strict";
const containerId = "infinity-particles";
// Original reference website particle configuration
const particleConfig = {
particles: {
number: {
value: 43,
density: {
enable: true,
value_area: 1122.388442605866
}
},
color: {
value: "#0000FF"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#0000FF",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: false,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 1259,
size: 72,
duration: 2,
opacity: 0.1,
speed: 1.2
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
};
let initialized = false;
function initializeParticles() {
const container = document.getElementById(containerId);
if (!container) return;
if (initialized || container.querySelector("canvas")) {
return;
}
if (typeof window.particlesJS !== "function") {
return;
}
if (
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches
) {
return;
}
initialized = true;
window.particlesJS(containerId, particleConfig);
}
// Initialize once after the particle library is available.
function startParticles() {
if (typeof window.particlesJS === "function") {
initializeParticles();
}
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
startParticles,
{ once: true }
);
} else {
startParticles();
}
const libraryScript = document.querySelector(
'script[src*="particles.js@2.0.0/particles.min.js"]'
);
if (libraryScript) {
libraryScript.addEventListener(
"load",
startParticles,
{ once: true }
);
}
})();
