/* Animated Gradient / Mesh Background Feature */ .kng-agm-bg-yes { position: relative; --kng-agm-speed: 40; --kng-agm-opacity: 1; --kng-agm-blur: 0px; --kng-agm-noise-opacity: 0.18; --kng-agm-blend-mode: normal; --kng-agm-easing: ease-in-out; --kng-agm-angle: 135deg; --kng-agm-bg-size: 200%; --kng-agm-base: #0b1020; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0b1020 0%, #1c3c68 45%, #3dd6d0 100%); --kng-agm-mesh: radial-gradient(circle at 15% 20%, rgba(61, 214, 208, 0.65) 0%, rgba(61, 214, 208, 0) 55%), radial-gradient(circle at 80% 25%, rgba(88, 120, 255, 0.6) 0%, rgba(88, 120, 255, 0) 55%), radial-gradient(circle at 45% 85%, rgba(8, 14, 30, 0.9) 0%, rgba(8, 14, 30, 0) 60%); --kng-agm-image: var(--kng-agm-gradient); } .kng-agm-type-mesh { --kng-agm-image: var(--kng-agm-mesh); } .kng-agm-direction-left-right { --kng-agm-from: 0% 50%; --kng-agm-to: 100% 50%; } .kng-agm-direction-right-left { --kng-agm-from: 100% 50%; --kng-agm-to: 0% 50%; } .kng-agm-direction-top-bottom { --kng-agm-from: 50% 0%; --kng-agm-to: 50% 100%; } .kng-agm-direction-bottom-top { --kng-agm-from: 50% 100%; --kng-agm-to: 50% 0%; } .kng-agm-direction-diag-lr { --kng-agm-from: 0% 0%; --kng-agm-to: 100% 100%; } .kng-agm-direction-diag-rl { --kng-agm-from: 100% 0%; --kng-agm-to: 0% 100%; } .kng-agm-bg-yes:not(.elementor-column)::before, .kng-agm-bg-yes:not(.elementor-column)::after, .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before, .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; } .kng-agm-bg-yes:not(.elementor-column)::before, .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before { background-color: var(--kng-agm-base); background-image: var(--kng-agm-image); background-size: var(--kng-agm-bg-size) var(--kng-agm-bg-size); background-position: var(--kng-agm-from, 0% 50%); opacity: var(--kng-agm-opacity); filter: blur(var(--kng-agm-blur)); mix-blend-mode: var(--kng-agm-blend-mode); animation: none; } .kng-agm-bg-yes.kng-agm-animate-yes:not(.elementor-column)::before, .elementor-column.kng-agm-bg-yes.kng-agm-animate-yes > .elementor-widget-wrap::before { animation: kng-agm-shift calc(400s / var(--kng-agm-speed, 40)) var(--kng-agm-easing) infinite; } .kng-agm-bg-yes.kng-agm-scroll-sync:not(.elementor-column)::before, .elementor-column.kng-agm-bg-yes.kng-agm-scroll-sync > .elementor-widget-wrap::before { background-position: var(--kng-agm-scroll-x, 0%) var(--kng-agm-scroll-y, 50%); animation: none; } .kng-agm-bg-yes:not(.elementor-column)::after, .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::after { opacity: 0; mix-blend-mode: soft-light; } /* Noise Type: Grain (default) */ .kng-agm-noise-yes.kng-agm-noise-type-grain:not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes.kng-agm-noise-type-grain > .elementor-widget-wrap::after, .kng-agm-noise-yes:not([class*="kng-agm-noise-type-"]):not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes:not([class*="kng-agm-noise-type-"]) > .elementor-widget-wrap::after { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 4px); opacity: var(--kng-agm-noise-opacity); } /* Noise Type: Lines */ .kng-agm-noise-yes.kng-agm-noise-type-lines:not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes.kng-agm-noise-type-lines > .elementor-widget-wrap::after { background-image: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 4px ); opacity: var(--kng-agm-noise-opacity); } /* Noise Type: Dots */ .kng-agm-noise-yes.kng-agm-noise-type-dots:not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes.kng-agm-noise-type-dots > .elementor-widget-wrap::after { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 6px 6px; opacity: var(--kng-agm-noise-opacity); } /* Noise Type: Crosshatch */ .kng-agm-noise-yes.kng-agm-noise-type-crosshatch:not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes.kng-agm-noise-type-crosshatch > .elementor-widget-wrap::after { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 5px); opacity: var(--kng-agm-noise-opacity); } .kng-agm-noise-yes:not(.elementor-column)::after, .elementor-column.kng-agm-noise-yes > .elementor-widget-wrap::after { opacity: var(--kng-agm-noise-opacity); } .kng-agm-bg-yes > .elementor-container, .kng-agm-bg-yes > .e-con-inner { position: relative; z-index: 1; } .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap { position: relative; z-index: 0; } .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap > .elementor-element { position: relative; z-index: 1; } .kng-agm-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background-size: 200% 200%; background-position: 0% 50%; animation: kng-agm-shift 24s ease-in-out infinite; } .kng-agm-layer.is-static { animation: none; } .kng-agm-export { position: absolute; top: 12px; right: 12px; z-index: 6; padding: 10px; border-radius: 10px; background: rgba(15, 17, 22, 0.85); color: #f2f2f2; width: 220px; font-size: 12px; } .kng-agm-export button { width: 100%; border: 0; padding: 6px 10px; border-radius: 8px; background: #ffffff; color: #0f1116; cursor: pointer; font-weight: 600; } .kng-agm-export textarea { margin-top: 6px; width: 100%; height: 80px; resize: none; padding: 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.25); color: #e9e9e9; font-size: 11px; } @keyframes kng-agm-shift { 0% { background-position: var(--kng-agm-from, 0% 50%); } 100% { background-position: var(--kng-agm-to, 100% 50%); } } @media (prefers-reduced-motion: reduce) { .kng-agm-bg-yes:not(.elementor-column)::before, .elementor-column.kng-agm-bg-yes > .elementor-widget-wrap::before, .kng-agm-layer { animation: none !important; } } @media (max-width: 1024px) { .kng-agm-disable-tablet-yes:not(.elementor-column)::before, .kng-agm-disable-tablet-yes:not(.elementor-column)::after, .elementor-column.kng-agm-disable-tablet-yes > .elementor-widget-wrap::before, .elementor-column.kng-agm-disable-tablet-yes > .elementor-widget-wrap::after { opacity: 0; } } @media (max-width: 767px) { .kng-agm-disable-mobile-yes:not(.elementor-column)::before, .kng-agm-disable-mobile-yes:not(.elementor-column)::after, .elementor-column.kng-agm-disable-mobile-yes > .elementor-widget-wrap::before, .elementor-column.kng-agm-disable-mobile-yes > .elementor-widget-wrap::after { opacity: 0; } .kng-agm-adaptive-yes { --kng-agm-speed: 28; --kng-agm-noise-opacity: 0.1; --kng-agm-blur: 0px; } } .kng-agm-preset-aurora { --kng-agm-base: #0b1020; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0b1020 0%, #1c3c68 45%, #3dd6d0 100%); --kng-agm-mesh: radial-gradient(circle at 15% 20%, rgba(61, 214, 208, 0.65) 0%, rgba(61, 214, 208, 0) 55%), radial-gradient(circle at 80% 25%, rgba(88, 120, 255, 0.6) 0%, rgba(88, 120, 255, 0) 55%), radial-gradient(circle at 45% 85%, rgba(8, 14, 30, 0.9) 0%, rgba(8, 14, 30, 0) 60%); } .kng-agm-preset-sunset { --kng-agm-base: #1d0c08; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #2c0f09 0%, #ff7a59 45%, #ffd082 100%); --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(255, 122, 89, 0.65) 0%, rgba(255, 122, 89, 0) 60%), radial-gradient(circle at 80% 30%, rgba(255, 208, 130, 0.6) 0%, rgba(255, 208, 130, 0) 60%), radial-gradient(circle at 50% 80%, rgba(55, 15, 8, 0.85) 0%, rgba(55, 15, 8, 0) 60%); } .kng-agm-preset-ocean { --kng-agm-base: #061a2e; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #061a2e 0%, #0d5c7f 45%, #39d2c0 100%); --kng-agm-mesh: radial-gradient(circle at 18% 30%, rgba(57, 210, 192, 0.6) 0%, rgba(57, 210, 192, 0) 60%), radial-gradient(circle at 80% 20%, rgba(13, 92, 127, 0.7) 0%, rgba(13, 92, 127, 0) 60%), radial-gradient(circle at 50% 85%, rgba(5, 16, 34, 0.9) 0%, rgba(5, 16, 34, 0) 60%); } .kng-agm-preset-violet-mist { --kng-agm-base: #190c2d; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #1c0d33 0%, #7a3bff 45%, #f4b9ff 100%); --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(244, 185, 255, 0.6) 0%, rgba(244, 185, 255, 0) 60%), radial-gradient(circle at 80% 30%, rgba(122, 59, 255, 0.6) 0%, rgba(122, 59, 255, 0) 60%), radial-gradient(circle at 45% 80%, rgba(20, 8, 40, 0.9) 0%, rgba(20, 8, 40, 0) 60%); } .kng-agm-preset-lime-neon { --kng-agm-base: #0a1506; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0a1506 0%, #59ff6f 45%, #d7ff5c 100%); --kng-agm-mesh: radial-gradient(circle at 25% 25%, rgba(89, 255, 111, 0.6) 0%, rgba(89, 255, 111, 0) 60%), radial-gradient(circle at 75% 30%, rgba(215, 255, 92, 0.6) 0%, rgba(215, 255, 92, 0) 60%), radial-gradient(circle at 50% 85%, rgba(10, 21, 6, 0.85) 0%, rgba(10, 21, 6, 0) 60%); } .kng-agm-preset-mono-glass { --kng-agm-base: #0f1115; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0f1115 0%, #3d3f44 45%, #a8aab0 100%); --kng-agm-mesh: radial-gradient(circle at 20% 30%, rgba(168, 170, 176, 0.55) 0%, rgba(168, 170, 176, 0) 60%), radial-gradient(circle at 80% 25%, rgba(61, 63, 68, 0.6) 0%, rgba(61, 63, 68, 0) 60%), radial-gradient(circle at 50% 80%, rgba(15, 17, 22, 0.9) 0%, rgba(15, 17, 22, 0) 60%); } .kng-agm-preset-forest-dew { --kng-agm-base: #0a1a12; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #0a1a12 0%, #1e5a3a 45%, #7ee8a5 100%); --kng-agm-mesh: radial-gradient(circle at 20% 25%, rgba(126, 232, 165, 0.6) 0%, rgba(126, 232, 165, 0) 60%), radial-gradient(circle at 75% 35%, rgba(30, 90, 58, 0.7) 0%, rgba(30, 90, 58, 0) 60%), radial-gradient(circle at 50% 80%, rgba(10, 26, 18, 0.9) 0%, rgba(10, 26, 18, 0) 60%); } .kng-agm-preset-candy-pop { --kng-agm-base: #2d0a2a; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #2d0a2a 0%, #ff6b9d 45%, #ffc857 100%); --kng-agm-mesh: radial-gradient(circle at 25% 20%, rgba(255, 107, 157, 0.65) 0%, rgba(255, 107, 157, 0) 60%), radial-gradient(circle at 80% 30%, rgba(255, 200, 87, 0.6) 0%, rgba(255, 200, 87, 0) 60%), radial-gradient(circle at 50% 85%, rgba(45, 10, 42, 0.9) 0%, rgba(45, 10, 42, 0) 60%); } .kng-agm-preset-midnight-blue { --kng-agm-base: #050a1a; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #050a1a 0%, #0a2463 45%, #247ba0 100%); --kng-agm-mesh: radial-gradient(circle at 20% 30%, rgba(36, 123, 160, 0.6) 0%, rgba(36, 123, 160, 0) 60%), radial-gradient(circle at 80% 20%, rgba(10, 36, 99, 0.7) 0%, rgba(10, 36, 99, 0) 60%), radial-gradient(circle at 50% 85%, rgba(5, 10, 26, 0.9) 0%, rgba(5, 10, 26, 0) 60%); } .kng-agm-preset-rose-gold { --kng-agm-base: #1a0f0f; --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), #1a0f0f 0%, #b76e79 45%, #f7d1ba 100%); --kng-agm-mesh: radial-gradient(circle at 25% 25%, rgba(247, 209, 186, 0.6) 0%, rgba(247, 209, 186, 0) 60%), radial-gradient(circle at 75% 30%, rgba(183, 110, 121, 0.65) 0%, rgba(183, 110, 121, 0) 60%), radial-gradient(circle at 50% 80%, rgba(26, 15, 15, 0.9) 0%, rgba(26, 15, 15, 0) 60%); } /* Custom Colors Override */ .kng-agm-custom-yes.kng-agm-type-gradient { --kng-agm-gradient: linear-gradient(var(--kng-agm-angle), var(--kng-agm-color-1, #0b1020) 0%, var(--kng-agm-color-2, #3dd6d0) 50%, var(--kng-agm-color-3, #5878ff) 100%); --kng-agm-base: var(--kng-agm-color-1, #0b1020); } .kng-agm-custom-yes.kng-agm-type-mesh { --kng-agm-mesh: radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--kng-agm-color-2, #3dd6d0) 65%, transparent) 0%, transparent 60%), radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--kng-agm-color-3, #5878ff) 60%, transparent) 0%, transparent 60%), radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--kng-agm-color-1, #0b1020) 90%, transparent) 0%, transparent 60%); --kng-agm-base: var(--kng-agm-color-1, #0b1020); }