.elementor-kit-38{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#000000;}.elementor-kit-38 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* === ExteriorOps — Global Background (Viewport-Clamped, No Footer Gap) ======== • Dark base on • Two glow layers on body::before (base field) & body::after (sprites), FIXED • Clipped to the viewport (no scroll-height inflation under footer) • Elementor sections/containers stay transparent; content renders above • Mobile-friendly intensity + perf tweaks =============================================================================== */ /* Brand & intensity knobs */ :root{ --eo-blue: #0072ce; --eo-cyan: #44b6ff; --eo-white: rgba(255,255,255,0.12); /* final “less subtle” tuning */ --eo-opacity: 0.62; /* overall glow strength (0.42–0.70) */ --eo-blur: 24px; /* softness (24–34px) */ /* extra hues for sprites */ --eo-teal: #00d8ff; --eo-violet: #7b61ff; --eo-amber: #ffb86b; } /* Base page canvas */ html{ background:#0a0f14; position:relative; height:100%; margin:0 !important; } body{ background:transparent !important; position:relative; /* content stacking context above pseudo-layers */ z-index:0; min-height:100%; margin:0 !important; } /* Elementor transparency (content floats above global canvas) */ .elementor .elementor-section, .elementor .e-con{ background:transparent !important; } .elementor .elementor-section > .elementor-background-overlay{ background:transparent !important; box-shadow:none !important; border:0 !important; } /* Ensure all widgets are above the glow layers */ .elementor, .elementor-location-header, .elementor-location-footer, .elementor .elementor-widget, .elementor .elementor-container, .elementor .elementor-column, .elementor .elementor-widget-wrap, .elementor .e-con, .elementor .e-con > .e-con-inner, .elementor .e-con > .elementor-widget-wrap{ position:relative; z-index:1; } /* Safety: no sideways scroll from big bleed */ html, body { overflow-x: clip; } /* Optional: remove any last-section default margin that can look like a gap */ .elementor-section-wrap > .elementor-section:last-child { margin-bottom:0 !important; } .elementor-location-footer, .site-footer { margin-bottom:0 !important; padding-bottom:0 !important; } /* --------------------------------------------------------------------------- Animatable custom properties (positions + alpha for base layer) --------------------------------------------------------------------------- */ @property --b1x { syntax:''; inherits:false; initial-value:12%; } @property --b1y { syntax:''; inherits:false; initial-value:18%; } @property --b1a { syntax:''; inherits:false; initial-value:0; } @property --b2x { syntax:''; inherits:false; initial-value:82%; } @property --b2y { syntax:''; inherits:false; initial-value:30%; } @property --b2a { syntax:''; inherits:false; initial-value:0; } @property --b3x { syntax:''; inherits:false; initial-value:64%; } @property --b3y { syntax:''; inherits:false; initial-value:78%; } @property --b3a { syntax:''; inherits:false; initial-value:0; } /* Animatable custom properties (positions & opacities for sprites) */ @property --p1x { syntax:''; inherits:false; initial-value:18%; } @property --p1y { syntax:''; inherits:false; initial-value:22%; } @property --a1 { syntax:''; inherits:false; initial-value:0; } @property --p2x { syntax:''; inherits:false; initial-value:80%; } @property --p2y { syntax:''; inherits:false; initial-value:28%; } @property --a2 { syntax:''; inherits:false; initial-value:0; } @property --p3x { syntax:''; inherits:false; initial-value:34%; } @property --p3y { syntax:''; inherits:false; initial-value:78%; } @property --a3 { syntax:''; inherits:false; initial-value:0; } @property --p4x { syntax:''; inherits:false; initial-value:66%; } @property --p4y { syntax:''; inherits:false; initial-value:72%; } @property --a4 { syntax:''; inherits:false; initial-value:0; } @property --p5x { syntax:''; inherits:false; initial-value:52%; } @property --p5y { syntax:''; inherits:false; initial-value:40%; } @property --a5 { syntax:''; inherits:false; initial-value:0; } /* ========================================================================== */ /* VIEWPORT-CLAMPED LAYERS (on ) */ /* ========================================================================== */ /* If any earlier CSS added html::before/after, disable them cleanly */ html::before, html::after{ display:none !important; } /* -------- Layer 1: Base field (soft, wandering) -------- */ body::before{ content:""; position:fixed; /* CLAMP to viewport (no scroll-height effect) */ inset:0; /* cover the viewport only */ z-index:0; pointer-events:none; filter: blur(var(--eo-blur)); opacity: var(--eo-opacity); mix-blend-mode: screen; will-change: transform, opacity, filter; transform: translateZ(0); backface-visibility: hidden; clip-path: inset(0); /* confine paint to viewport */ overflow: clip; /* extra belt */ background: radial-gradient(70rem 50rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(38rem 29rem at var(--b1x) var(--b1y), rgba(0,114,206, var(--b1a)) 0%, transparent 62%), radial-gradient(44rem 32rem at var(--b2x) var(--b2y), rgba(68,182,255, var(--b2a)) 0%, transparent 65%), radial-gradient(36rem 26rem at var(--b3x) var(--b3y), rgba(255,255,255, calc(var(--b3a) * 0.9)) 0%, transparent 70%), radial-gradient(28rem 22rem at 32% 78%, rgba(0,114,206,0.28), transparent 62%); animation: eoGlowDrift 26s ease-in-out infinite alternate, eoGlowPulse 14s ease-in-out infinite, eoGlowHue 36s ease-in-out infinite alternate, bWander1 120s ease-in-out infinite, bWander2 144s ease-in-out infinite -18s, bWander3 168s ease-in-out infinite -36s; } /* richer blend where supported */ @supports (color: color-mix(in srgb, #000 50%, #fff 50%)){ body::before{ background: radial-gradient(70rem 50rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(38rem 29rem at var(--b1x) var(--b1y), color-mix(in srgb, var(--eo-blue) 56%, white 0%) / var(--b1a) 0%, transparent 62%), radial-gradient(44rem 32rem at var(--b2x) var(--b2y), color-mix(in srgb, var(--eo-cyan) 46%, black 0%) / var(--b2a) 0%, transparent 65%), radial-gradient(36rem 26rem at var(--b3x) var(--b3y), var(--eo-white) / calc(var(--b3a) * 0.9) 0%, transparent 70%), radial-gradient(28rem 22rem at 32% 78%, color-mix(in srgb, var(--eo-blue) 28%, black 0%) 0%, transparent 62%); } } /* -------- Layer 2: Wandering sprite glows -------- */ body::after{ content:""; position:fixed; /* CLAMP to viewport */ inset:0; z-index:0; pointer-events:none; mix-blend-mode: screen; filter: blur(var(--eo-blur)); will-change: opacity, filter, transform; transform: translateZ(0); backface-visibility: hidden; clip-path: inset(0); overflow: clip; background: radial-gradient(circle 36rem at var(--p1x) var(--p1y), rgba(0,114,206, var(--a1)) 0%, transparent 66%), /* blue */ radial-gradient(circle 32rem at var(--p2x) var(--p2y), rgba(68,182,255, var(--a2)) 0%, transparent 66%), /* cyan */ radial-gradient(circle 30rem at var(--p3x) var(--p3y), rgba(0,216,255, var(--a3)) 0%, transparent 68%), /* teal */ radial-gradient(circle 34rem at var(--p4x) var(--p4y), rgba(123,97,255, var(--a4)) 0%, transparent 70%), /* violet */ radial-gradient(circle 26rem at var(--p5x) var(--p5y), rgba(255,184,107, var(--a5)) 0%, transparent 72%);/* amber */ animation: eoGlowPulse 24s ease-in-out infinite, eoGlowHue 40s ease-in-out infinite alternate, wander1 54s ease-in-out infinite, wander2 66s ease-in-out infinite -10s, wander3 78s ease-in-out infinite -22s, wander4 60s ease-in-out infinite -6s, wander5 88s ease-in-out infinite -18s; } /* ========================================================================== */ /* Keyframes */ /* ========================================================================== */ @keyframes bWander1{ 0% { --b1x:12%; --b1y:18%; --b1a:0; } 20% { --b1a:.12; } 55% { --b1x:40%; --b1y:32%; --b1a:.16; } 80% { --b1a:.12; } 100% { --b1x:74%; --b1y:58%; --b1a:0; } } @keyframes bWander2{ 0% { --b2x:82%; --b2y:30%; --b2a:0; } 22% { --b2a:.10; } 50% { --b2x:66%; --b2y:18%; --b2a:.14; } 78% { --b2a:.10; } 100% { --b2x:22%; --b2y:32%; --b2a:0; } } @keyframes bWander3{ 0% { --b3x:64%; --b3y:78%; --b3a:0; } 28% { --b3a:.09; } 60% { --b3x:18%; --b3y:62%; --b3a:.12; } 100% { --b3x:70%; --b3y:82%; --b3a:0; } } @keyframes wander1{ 0% { --p1x:18%; --p1y:22%; --a1:0; } 20% { --a1:.18; } 50% { --p1x:44%; --p1y:36%; --a1:.22; } 80% { --a1:.18; } 100% { --p1x:76%; --p1y:60%; --a1:0; } } @keyframes wander2{ 0% { --p2x:80%; --p2y:28%; --a2:0; } 25% { --a2:.16; } 50% { --p2x:66%; --p2y:18%; --a2:.20; } 75% { --a2:.16; } 100% { --p2x:22%; --p2y:32%; --a2:0; } } @keyframes wander3{ 0% { --p3x:34%; --p3y:78%; --a3:0; } 30% { --a3:.14; } 60% { --p3x:18%; --p3y:62%; --a3:.18; } 100% { --p3x:72%; --p3y:82%; --a3:0; } } @keyframes wander4{ 0% { --p4x:66%; --p4y:72%; --a4:0; } 35% { --a4:.14; } 55% { --p4x:78%; --p4y:44%; --a4:.18; } 100% { --p4x:38%; --p4y:68%; --a4:0; } } @keyframes wander5{ 0% { --p5x:52%; --p5y:40%; --a5:0; } 20% { --a5:.12; } 50% { --p5x:28%; --p5y:48%; --a5:.16; } 80% { --a5:.12; } 100% { --p5x:82%; --p5y:22%; --a5:0; } } /* Base motions reused by both layers */ @keyframes eoGlowDrift{ 0% { transform: translate3d(-1.8%, -1.2%, 0) scale(1.01); } 50% { transform: translate3d( 0.6%, 1.0%, 0) scale(1.05); } 100% { transform: translate3d( 1.8%, -0.6%, 0) scale(1.03); } } @keyframes eoGlowPulse{ 0%,100% { opacity: calc(var(--eo-opacity) * 0.70); } 50% { opacity: calc(var(--eo-opacity) * 1.00); } } @keyframes eoGlowHue{ 0% { filter: blur(var(--eo-blur)) hue-rotate(-6deg) saturate(1.05); } 50% { filter: blur(var(--eo-blur)) hue-rotate( 6deg) saturate(1.10); } 100% { filter: blur(var(--eo-blur)) hue-rotate(-4deg) saturate(1.06); } } /* ========================================================================== */ /* Accessibility */ /* ========================================================================== */ @media (prefers-reduced-motion: reduce){ body::before, body::after{ animation:none !important; opacity:0.45; } } /* ========================================================================== */ /* Mobile-friendly overrides */ /* ========================================================================== */ /* ---------- Tablet & down ---------- */ @media (max-width: 1024px){ :root{ --eo-opacity: 0.50; --eo-blur: 18px; } body::before{ background: radial-gradient(48rem 34rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(30rem 23rem at var(--b1x) var(--b1y), rgba(0,114,206, var(--b1a)) 0%, transparent 62%), radial-gradient(34rem 26rem at var(--b2x) var(--b2y), rgba(68,182,255, var(--b2a)) 0%, transparent 65%), radial-gradient(28rem 22rem at var(--b3x) var(--b3y), rgba(255,255,255, calc(var(--b3a) * 0.9)) 0%, transparent 70%), radial-gradient(22rem 18rem at 32% 78%, rgba(0,114,206,0.22), transparent 62%); animation: eoGlowDrift 30s ease-in-out infinite alternate, eoGlowPulse 16s ease-in-out infinite, eoGlowHue 40s ease-in-out infinite alternate, bWander1 140s ease-in-out infinite, bWander2 168s ease-in-out infinite -18s, bWander3 190s ease-in-out infinite -36s; } @supports (color: color-mix(in srgb, #000 50%, #fff 50%)){ body::before{ background: radial-gradient(48rem 34rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(30rem 23rem at var(--b1x) var(--b1y), color-mix(in srgb, var(--eo-blue) 56%, white 0%) / var(--b1a) 0%, transparent 62%), radial-gradient(34rem 26rem at var(--b2x) var(--b2y), color-mix(in srgb, var(--eo-cyan) 46%, black 0%) / var(--b2a) 0%, transparent 65%), radial-gradient(28rem 22rem at var(--b3x) var(--b3y), var(--eo-white) / calc(var(--b3a) * 0.9) 0%, transparent 70%), radial-gradient(22rem 18rem at 32% 78%, color-mix(in srgb, var(--eo-blue) 24%, black 0%) 0%, transparent 62%); } } body::after{ background: radial-gradient(circle 28rem at var(--p1x) var(--p1y), rgba(0,114,206, var(--a1)) 0%, transparent 66%), radial-gradient(circle 26rem at var(--p2x) var(--p2y), rgba(68,182,255, var(--a2)) 0%, transparent 66%), radial-gradient(circle 24rem at var(--p3x) var(--p3y), rgba(0,216,255, var(--a3)) 0%, transparent 68%), radial-gradient(circle 26rem at var(--p4x) var(--p4y), rgba(123,97,255, var(--a4)) 0%, transparent 70%), radial-gradient(circle 20rem at var(--p5x) var(--p5y), rgba(255,184,107, var(--a5)) 0%, transparent 72%); animation: eoGlowPulse 20s ease-in-out infinite, eoGlowHue 44s ease-in-out infinite alternate, wander1 64s ease-in-out infinite, wander2 78s ease-in-out infinite -10s, wander3 90s ease-in-out infinite -22s, wander4 70s ease-in-out infinite -6s, wander5 98s ease-in-out infinite -18s; } } /* ---------- Phones & small tablets ---------- */ @media (max-width: 768px){ :root{ --eo-opacity: 0.42; --eo-blur: 14px; } /* perf: cheaper blend */ body::before, body::after{ mix-blend-mode: normal; } body::before{ background: radial-gradient(34rem 24rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(24rem 18rem at var(--b1x) var(--b1y), rgba(0,114,206, var(--b1a)) 0%, transparent 62%), radial-gradient(26rem 20rem at var(--b2x) var(--b2y), rgba(68,182,255, var(--b2a)) 0%, transparent 65%), radial-gradient(22rem 16rem at var(--b3x) var(--b3y), rgba(255,255,255, calc(var(--b3a) * 0.8)) 0%, transparent 70%), radial-gradient(18rem 14rem at 32% 78%, rgba(0,114,206,0.18), transparent 62%); animation: eoGlowDrift 34s ease-in-out infinite alternate, eoGlowPulse 18s ease-in-out infinite, bWander1 150s ease-in-out infinite, bWander2 180s ease-in-out infinite -18s, bWander3 210s ease-in-out infinite -36s; filter: blur(var(--eo-blur)) hue-rotate(0deg) saturate(1.02); } @supports (color: color-mix(in srgb, #000 50%, #fff 50%)){ body::before{ background: radial-gradient(34rem 24rem at 12% 18%, transparent 0 38%, transparent 39%), radial-gradient(24rem 18rem at var(--b1x) var(--b1y), color-mix(in srgb, var(--eo-blue) 56%, white 0%) / var(--b1a) 0%, transparent 62%), radial-gradient(26rem 20rem at var(--b2x) var(--b2y), color-mix(in srgb, var(--eo-cyan) 46%, black 0%) / var(--b2a) 0%, transparent 65%), radial-gradient(22rem 16rem at var(--b3x) var(--b3y), var(--eo-white) / calc(var(--b3a) * 0.8) 0%, transparent 70%), radial-gradient(18rem 14rem at 32% 78%, color-mix(in srgb, var(--eo-blue) 18%, black 0%) 0%, transparent 62%); } } body::after{ /* fewer/smaller sprites on phones (keep 3) */ background: radial-gradient(circle 22rem at var(--p1x) var(--p1y), rgba(0,114,206, var(--a1)) 0%, transparent 66%), radial-gradient(circle 20rem at var(--p3x) var(--p3y), rgba(0,216,255, var(--a3)) 0%, transparent 68%), radial-gradient(circle 18rem at var(--p4x) var(--p4y), rgba(123,97,255, var(--a4)) 0%, transparent 70%); animation: eoGlowPulse 22s ease-in-out infinite, wander1 70s ease-in-out infinite, wander3 88s ease-in-out infinite -12s, wander4 76s ease-in-out infinite -6s; } } /* ---------- Ultra-small devices ---------- */ @media (max-width: 480px){ :root{ --eo-opacity: 0.38; --eo-blur: 12px; } }/* End custom CSS */