{"id":8,"date":"2024-02-13T14:44:10","date_gmt":"2024-02-13T13:44:10","guid":{"rendered":"http:\/\/ddevops.wifimakesmoney.com\/?page_id=8"},"modified":"2026-02-05T13:26:17","modified_gmt":"2026-02-05T12:26:17","slug":"home","status":"publish","type":"page","link":"https:\/\/ddevops.de\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93c7051 e-flex e-con-boxed e-con e-parent\" data-id=\"93c7051\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a978105 elementor-widget elementor-widget-html\" data-id=\"a978105\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- design inspired by https:\/\/www.authkit.com\/ -->\n<div class=\"header\">\n  <h2><a href=\"https:\/\/codepen.io\/RAFA3L\" target=\"_blank\" rel=\"noopener noreferrer\">RAFA<\/a><\/h2>\n  <div class=\"mid-spot\" onclick=\"document.body.classList.toggle('gold');\"><\/div>\n  <button class=\"contact-btn\">\n    <span class=\"glow\"><\/span>\n    <span class=\"contact-btn-content\">Contact Us<\/span>\n  <\/button>\n\n  <div class=\"spotlight\">\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n<\/div>\n\n<canvas id=\"particleCanvas\"><\/canvas>\n\n<div class=\"accent-lines\">\n  <div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n  <div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n<\/div>\n<div class=\"heroSubP\">\n  <p>Introducing<\/p>\n<\/div>\n<div class=\"hero\">\n  <div class=\"heroT\">\n    <h2>Eclipx<\/h2>\n    <h2>Eclipx<\/h2>\n  <\/div>\n<\/div>\n<p class=\"heroP\">The world's best platform, <br>\n  powered by EclipxOS + React.<\/p>\n<div class=\"mountains\">\n  <div><\/div>\n  <div><\/div>\n  <div><\/div>\n<\/div>\n<div class=\"hero-spacer\"><\/div>\n\n<div class=\"content-section\">\n  <div class=\"content-acc\">\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n  <p class=\"subt\">Revolutionary by design<\/p>\n  <h3 class=\"title\">Harness. Empower.<br>\n    Unmatched Versatility.<\/h3>\n  <p class=\"subp\">At the core lies our revolutionary framework, <br>ensuring adaptability across all application architectures.<\/p>\n<\/div>\n\n@import url('https:\/\/fonts.cdnfonts.com\/css\/hubot-sans');\n*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}\nhtml, body { height: 100%; }\n\nhtml::-webkit-scrollbar { display: none; }\nhtml { -ms-overflow-style: none; scrollbar-width: none; }\n\nbody {\n    margin: 0;\n    font-family: Untitled Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;\n    background: #05060f linear-gradient(0deg,rgba(216,236,248,.06),rgba(152,192,239,.06));\n\n    font-size: max(calc(var(--_size) * 0.03), 10px);\n    --_factor: min(600px, 80vh);\n    --_size: min(var(--_factor), 80vw);\n}\n\nbody.gold .header h2 ,\nbody.gold p,\nbody.gold > * > * :not(.contact-btn) {\n    filter: invert(1) brightness(4.7);\n}\nbody.gold .header h2 a{\n    filter: hue-rotate(0deg);\n}\nbody.gold canvas {\n    filter: drop-shadow(2em 4em 0px #d8bd10) drop-shadow(-8em -14em 0px #d8bd10);\n}\nbody.gold .header .spotlight {\n    filter: invert(1) brightness(4.7) opacity(0.5);\n}\nbody.gold .mountains > div {\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #d8a910,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.2em 10.3em 2em -10em #d4e6ff2f;\n}\n\nbody.gold .content-section,\nbody.gold .content-section ::before,\nbody.gold .content-section ::after{\n    filter: invert(1) brightness(4.4) opacity(1);\n}\n\nh2 {\n    font-family: 'Hubot-Sans', sans-serif;\n}\nh2, p {\n    margin: 0; padding: 0;\n}\nh2 a {\n    text-decoration: none;\n    color: unset;\n}\n\n.header {\n    display: flex; width: 100%;\n    justify-content: center;\n    color: #bad6f7;\n    padding: 2em;\n    position: absolute;\n    top: 0; left: 0; right: 0; margin: 0 auto;\n\n    opacity: 0;\n    translate: 0 -1em;\n    animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards;\n}\n.header > :nth-child(1) {\n    font-size: 1em;\n    position: absolute; left: 0; right: 29em; margin: 0.2em auto;\n    width: fit-content;\n}\n.header > :nth-child(2) {\n    position: absolute; left: 0; right: 0; margin: 0 auto;\n    width: fit-content;\n}\n.header > h2{\n    opacity: 0.5;\n    cursor: pointer;\n    transition: opacity 0.04s ease-in-out;\n}\n.header > h2:hover {\n    opacity: 1;\n    text-shadow: 0 2px 16px rgba(174,207,242, 0.6);\n    width: fit-content;\n}\n\n.header > div.mid-spot {\n    width: 1.8em; height: 1.8em;\n    border-radius: 50%;\n    background: black;\n    box-shadow: 0 0 1em 0 #98c0ef;\n    cursor: pointer;\n    transition: box-shadow 1s ease-in-out;\n}\n.header > div.mid-spot:hover {\n    box-shadow: -0.3em 0.1em 0.2em 0 #d8bd10;\n}\nbody.gold .header > div.mid-spot:hover {\n    box-shadow: -0.3em 0.1em 0.2em 0 #98c0ef;\n}\n\nbody.gold .header > div.mid-spot {\n    box-shadow: 0 0 1em 0 #d8bd10;\n}\n\n.header > :nth-child(2):hover ~ .spotlight {\n    animation: colorize 10s linear infinite;\n}\n@keyframes colorize {\n    0%{filter: hue-rotate(0deg); }\n    100% {filter: hue-rotate(-380deg);}\n}\n\nbutton.contact-btn {\n    position: absolute; left: min(46em, 60vw); right: 0; margin: 0 auto;\n    width: 8em; height: 2.4em;\n    cursor: pointer;\n    border-radius: 20em;\n    border: none;\n    transition: background 0.5s, transform 0.5s;\n    \n    border: 1px solid #c2ccff33;\n    opacity: 1;\n    padding-top: 0.3em;\n\n    background: #121521;\n    color: #9dc3f7;\n    white-space:nowrap;\n}\nbutton.contact-btn::before {\n    content: ''; display: block; position:absolute; left: 0; top:0; border-radius: 20em;\n    width: 100%; height: 100%;\n    background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);\n    opacity: 0.1;\n    transition: all 0.4s ease-in-out;\n}\nbutton.contact-btn:hover::before {\n    background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);\n    opacity: 0.3;\n}\n.contact-btn .glow {\n    --border-width: 1px;\n    --loop-cycle: 24s;\n    position: absolute;\n    inset: calc(var(--border-width)* -1);\n    border-radius: 50px;\n    border: var(--border-width) solid transparent;\n    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n    -webkit-mask-clip: padding-box, border-box;\n    mask-clip: padding-box, border-box;\n    -webkit-mask-composite: source-in, xor;\n    mask-composite: intersect;\n    pointer-events: none;\n}\nbutton.contact-btn:hover .glow {\n    --loop-cycle: 2s;\n}\n.contact-btn .glow::after, .contact-btn .glow::before {\n    content: \"\";\n    height: 100%;\n    offset-anchor: 100% 50%;\n    background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);\n    opacity: 0.4;\n    offset-path: rect(0 100% 100% 0 round 33px);\n    position: absolute;\n    display: inline-block;\n    -webkit-animation: loop 4s linear infinite;\n    animation: loop var(--loop-cycle) linear infinite;\n    aspect-ratio: 1 \/ 1;\n    transition: opacity 1s ease-in-out;\n}\n.contact-btn .glow::before {\n    animation-delay: calc( var(--loop-cycle) \/ -2 );\n}\n@keyframes loop {\n    100% {\n        offset-distance: 100%;\n    }    \n}\n.contact-btn-content {\n    background: linear-gradient(0deg, #d8ecf8, #98c0ef);\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    font-size: 1.2em;\n    line-height: 142%;\n}\nbutton.contact-btn:hover .glow::after, button.contact-btn:hover .glow::before {\n    opacity: 0.6;\n}\n@keyframes btn-rot {\n    0% { rotate: 0deg; }\n    100% { rotate: 360deg; } \n}\n\n.header .spotlight {\n    pointer-events: none;\n    position: absolute; left: 0; right: 0; top:0; margin: 0 auto;\n    transition: filter 1s ease-in-out;\n\n    height: 42em; width: 100%;\n    overflow: hidden;\n}\n.header .spotlight > div {\n    border-radius: 0 0 50% 50%;\n    position: absolute; left: 0; right: 0; margin: 0 auto; \n    top: 3em;\n    width: 30em; height: max(42em, 86vh);\n    background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%);\n    transform-origin: 50% 0;\n    filter: blur(15px) opacity(0.5);\n    z-index: -1;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse;\n}\n.header .spotlight > div:nth-child(1){ \n    rotate: 20deg;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite;\n}\n.header .spotlight > div:nth-child(2){ \n    rotate: -20deg;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite;\n}\n@keyframes loadrot {\n    0% { rotate: 0deg; scale: 0;}\n    100% { scale: 1;}\n}\n@keyframes spotlight {\n    0% {\n        transform: rotateZ(0deg) scale(1);\n        filter: blur(15px) opacity(0.5);\n    }\n    20% {\n        transform: rotateZ(-1deg) scale(1.2);\n        filter: blur(16px) opacity(0.6);\n    }    \n    40% {\n        transform: rotateZ(2deg) scale(1.3);\n        filter: blur(14px) opacity(0.4);\n    }    \n    60% {\n        transform: rotateZ(-2deg) scale(1.2);\n        filter: blur(15px) opacity(0.6);\n    }    \n    80% {\n        transform: rotateZ(1deg) scale(1.1);\n        filter: blur(13px) opacity(0.4);\n    }    \n    100% {\n        transform: rotateZ(0deg) scale(1);\n        filter: blur(15px) opacity(0.5);\n    }    \n}\n\ncanvas#particleCanvas {\n    position: absolute; pointer-events: none;\n    animation: load 0.4s ease-in-out forwards;\n    z-index: 1;\n    width: 100%;\n}\n\np {\n    font-size: 1.5em;\n}\n\n.hero {\n    width: 100%;\n    height: 100%;\n    max-height: 140px;\n    position: absolute; top: 16em;\n}\n\n.heroT {\n    position: absolute; left: 0; right: 0; margin: auto;\n    height: 20em;\n    padding-top: 2em;\n    translate: 0 -1.6em;\n    opacity: 0;\n    animation: load 2s ease-in-out 0.6s forwards;\n}\n@keyframes load {  \n    0% { opacity: 0;}    \n    100% { opacity: 1;}    \n}\n.heroT > h2 {\n    position: absolute;left: 0; right: 0; margin: auto;\n    width: fit-content;\n    \n    font-size: 7em;\n    font-weight: 600;\n    color: #9dc3f7;\n    background:\n    radial-gradient( 2em 2em at 50% 50%,\n        transparent calc(var(--p) - 2em),\n        #fff calc(var(--p) - 1em), \n        #fff calc(var(--p) - 0.4em), \n        transparent var(--p) \n    ),\n    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n\n    --p:0%;\n    transition:--p 3s linear;\n    \n    animation: pulse 10s linear 1.2s infinite;\n}\n\n.heroT h2:nth-child(2) {\n    background:\n    radial-gradient( 2em 2em at 50% 50%,\n        transparent calc(var(--p) - 2em),\n        transparent calc(var(--p) - 1em),\n        #fff calc(var(--p) - 1em), \n        #fff calc(var(--p) - 0.4em), \n        transparent calc(var(--p) - 0.4em), \n        transparent var(--p) \n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    filter: blur(16px) opacity(0.4);\n}\n@keyframes pulse { \n    0% { --p:0%; }\n    50% { --p:300%;}\n    100% { --p:300%;}\n}\n@property --p {\n    syntax: '<percentage>';\n    inherits: false;\n    initial-value: 0%;\n}\n\n.heroP {\n    font-size: 1.2em;\n    position: absolute; left: 0; right: 0; top: 20.6em; margin: auto;\n    height: fit-content; width: fit-content; text-align: center;\n    opacity: 0;\n    translate: 0 1em;\n    animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n@keyframes up {      \n    100% { translate: 0; }    \n}\n\n.heroSubP {\n    position: absolute; left: 0; right: 0; top: 13em; margin: auto;\n    height: fit-content;\n    opacity: 0;\n    translate: 0 -1em;\n    animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;\n}\n@keyframes load3 {  \n    0% { opacity: 0;}    \n    100% { opacity: 0.7;}    \n}\n.heroSubP p {\n    font-size: 1em;\n    position: relative; width: fit-content; margin: auto;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n.heroSubP p::before,\n.heroSubP p::after {\n    position: absolute; top: 60%; \n    display: block; content: '';\n    width: 5em; height: 1px;\n    opacity: 0;\n    animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;\n}\n@keyframes load2 {  \n    0% { opacity: 0;}    \n    100% { opacity: 0.3;}    \n}\n.heroSubP p::before{\n    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);\n    right: 120%;\n    translate: -5em 0;\n}\n.heroSubP p::after {\n    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);\n    left: 120%;\n    translate: 5em 0;\n}\n\n.accent-lines {\n    pointer-events: none;\n    position: absolute; top: 0; left: 0; right: 0;\n    width: 100%; height: 42em;\n    z-index: -2;\n    --accent-lines-clr: rgba(186, 215, 247, .18);\n}\n.accent-lines > div {\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    height: 100%; width: 100%;\n}\n.accent-lines > div:nth-child(1) > div{\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    width: 100%; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--accent-lines-clr), transparent);\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 2.4s forwards;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1){ top: 6em; }\n.accent-lines > div:nth-child(1) > div:nth-child(2){ top: 11em; }\n.accent-lines > div:nth-child(1) > div:nth-child(3){ top: 16em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4){ top: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5){ top: 29em; }\n.accent-lines > div:nth-child(2) > div{\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    width: 1px; height: 100%;\n    background: var(--accent-lines-clr);\n}\n@keyframes accentload {\n    0% {\n        opacity: 0; scale: 0;\n    }\n    100% {\n        opacity: 1; scale: 1;\n    }\n}\n\n.accent-lines > div:nth-child(2) > div {\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 2s forwards;\n}\n.accent-lines > div:nth-child(2) > div:nth-child(1){ left: 24em; }\n.accent-lines > div:nth-child(2) > div:nth-child(2){ left: 34em; }\n.accent-lines > div:nth-child(2) > div:nth-child(3){ right: 24em; }\n.accent-lines > div:nth-child(2) > div:nth-child(4){ right: 34em; }\n\n.accent-lines > div:nth-child(1) > div::before, \n.accent-lines > div:nth-child(1) > div::after { \n    content: ''; display: none; position: absolute;\n    width: 0.2em; height: 0.2em; border-radius: 1em;\n    background: #9dc3f7;\n    left: 0; right: 0; margin: auto;\n    translate: 0 -1px;\n\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 4.4s forwards;\n}\n\n.accent-lines > div:nth-child(1) > div:nth-child(3)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(3)::after{ display: block; right: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4)::after{ display: block; right: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5)::after{ display: block; right: 24em; }\n\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after{ \n    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before{\n    right: 24em; rotate: 45deg; translate: -2.5em 2.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after{\n    right: 24em; rotate: -45deg; translate: -2.5em 2.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after{ \n    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before{\n    left: 24em; rotate: 45deg; translate: 2.5em 7.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after{\n    left: 24em; rotate: -45deg; translate: 2.5em 7.5em;\n}\n\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after {\n    opacity: 0; scale: 0;\n    animation: accentload2 2s ease-out 2.4s forwards;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after {\n    opacity: 0; scale: 0;\n    animation: accentload3 2s ease-out 2.4s forwards;\n} \n@keyframes accentload2 {\n    0% {\n        opacity: 0; scale: 0; transform: rotate(360deg);\n    }\n    50% { scale: 0; }\n    100% {\n        opacity: 0.12; scale: 1; transform: rotate(0deg);\n    }\n}\n@keyframes accentload3 {\n    0% {\n        opacity: 0; scale: 0; transform: rotate(-360deg);\n    }\n    50% { scale: 0; }\n    100% {\n        opacity: 0.12; scale: 1; transform: rotate(0deg);\n    }\n}\n\n.mountains {\n    position: absolute; left: 0; right: 0; top: 31em; margin: auto;\n    width: 100%; height: 10em;\n    pointer-events: none;\n}\n.mountains::before {\n    content: ''; display: block;\n    width: 100%; height: 500%;\n    position: absolute; top: 0%;\n    background: linear-gradient(90deg, #121521 0%, transparent 50%);\n    background: linear-gradient(0deg, #121521 80%, transparent 90%);\n    z-index: 2;\n}\n.mountains > div {\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.2em 10.3em 2em -10em #d4e6ff2f;\n    background: #121521;\n    z-index: 1;\n    filter: brightness(0.8);\n    position: absolute; left: 0; right: 0; margin: auto;\n    width: 20em; height: 20em;\n    rotate: 45deg;\n}\n.mountains > div:nth-child(1) {\n    bottom: -240%; \n    translate: -6em 2em;\n    animation: mountainload1 2s ease-out 2.4s forwards;\n}\n.mountains > div:nth-child(2) {\n    bottom: -240%;\n    translate: -2em 0em;\n    width: 14em; height: 20em;\n    animation: mountainload2 2s ease-out 2.2s forwards;\n}\n.mountains > div:nth-child(3) {\n    bottom: -240%; \n    translate: 6em 3em;\n    animation: mountainload1 2s ease-out 2s forwards;\n}\n@keyframes mountainload1 {\n    0% { bottom: -240%; }\n    100% { bottom: -140%; }\n}\n@keyframes mountainload2 {\n    0% { bottom: -240%; }\n    100% { bottom: -108%; }\n}\n.mountains > div::before {\n    content: ''; display: block;\n    background: repeating-radial-gradient( at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px);\n    width: 12em; height: 12em;\n    position: absolute;\n    left: 0; top: 0;\n    border-bottom-right-radius: 100%;\n}\n\n.hero-spacer {\n    height: 40em;\n    pointer-events: none;\n}\n\n.content-section {\n    position: relative;\n    z-index: 1112;\n    color: #fff;\n    width: 100%;\n    text-align: center;\n    padding: 16em 0 12em 0;\n    overflow: hidden;\n}\n\n.content-section p.subt {\n    color: #d8ecf8be;\n    font-size: 0.8em;\n    font-weight: 200;\n    position: relative;\n    width: fit-content;\n    margin: auto;\n}\n.content-section h3 {\n    margin: 0.4em 0 0.6em 0;\n    font-size: 2.3em;\n    font-weight: 600;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n.content-section p.subp {\n    color: #d8ecf8be;\n    font-size: 1em;\n    font-weight: 400;\n    max-width: 26em;\n    margin: auto;\n}\n\n.content-section p.subt::before,\n.content-section p.subt::after {\n    position: absolute; top: 60%; \n    display: block; content: '';\n    width: 5em; height: 1px;\n    opacity: 0.5;\n}\n.content-section p.subt::before{\n    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);\n    right: 120%;\n    top: 50%;\n}\n.content-section p.subt::after {\n    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);\n    left: 120%;\n    top: 50%;\n}\n\n.content-section .content-acc {\n    position: absolute;\n    left: 0; right: 0; top: 25%; margin: auto;\n    display: flex; justify-content: center;\n}\n.content-section .content-acc div{\n    width: 10em; height: 10em;\n    border-radius: 50%;\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset -1.2em 2.3em 2em -0.5em #d4e6ff2f;\n    background: #121521;\n    z-index: 1;\n    filter: brightness(0.8);\n    background: repeating-radial-gradient( at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px);\n    translate: -18em;\n}\n.content-section .content-acc div:nth-child(2){\n    translate: 18em 12em;\n    border-radius: 2em;\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;\n}\n\nconst canvas = document.getElementById('particleCanvas');\nconst ctx = canvas.getContext('2d');\n\n\/\/ Initial canvas size\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nlet particles = [];\nlet particleCount = calculateParticleCount();\n\nclass Particle {\n    constructor() {\n        this.reset();\n        this.y = Math.random() * canvas.height;\n        this.fadeDelay = Math.random() * 600 + 100;\n        this.fadeStart = Date.now() + this.fadeDelay;\n        this.fadingOut = false;\n    }\n\n    reset() {\n        this.x = Math.random() * canvas.width;\n        this.y = Math.random() * canvas.height;\n        this.speed = Math.random() \/ 5 + 0.1;\n        this.opacity = 1;\n        this.fadeDelay = Math.random() * 600 + 100;\n        this.fadeStart = Date.now() + this.fadeDelay;\n        this.fadingOut = false;\n    }\n\n    update() {\n        this.y -= this.speed;\n        if (this.y < 0) {\n            this.reset();\n        }\n\n        if (!this.fadingOut && Date.now() > this.fadeStart) {\n            this.fadingOut = true;\n        }\n        \n        if (this.fadingOut) {\n            this.opacity -= 0.008;\n            if (this.opacity <= 0) {\n                this.reset();\n            }\n        }\n    }\n\n    draw() {\n        ctx.fillStyle = `rgba(${255 - (Math.random() * 255\/2)}, 255, 255, ${this.opacity})`;\n        ctx.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1);\n    }\n}\n\nfunction initParticles() {\n    particles = [];\n    for (let i = 0; i < particleCount; i++) {\n        particles.push(new Particle());\n    }\n}\n\nfunction animate() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    particles.forEach(particle => {\n        particle.update();\n        particle.draw();\n    });\n    requestAnimationFrame(animate);\n}\n\nfunction calculateParticleCount() {\n    return Math.floor((canvas.width * canvas.height) \/ 6000);\n}\n\nfunction onResize() {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n    particleCount = calculateParticleCount();\n    initParticles();\n}\n\nwindow.addEventListener('resize', onResize);\n\ninitParticles();\nanimate();\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e6c7157 e-flex e-con-boxed e-con e-parent\" data-id=\"e6c7157\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-146e067 elementor-widget elementor-widget-shortcode\" data-id=\"146e067\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!-- design inspired by https:\/\/www.authkit.com\/ -->\n<div class=\"header\">\n  <h2><a href=\"https:\/\/codepen.io\/RAFA3L\" target=\"_blank\" rel=\"noopener noreferrer\">RAFA<\/a><\/h2>\n  <div class=\"mid-spot\" onclick=\"document.body.classList.toggle('gold');\"><\/div>\n  <button class=\"contact-btn\">\n    <span class=\"glow\"><\/span>\n    <span class=\"contact-btn-content\">Contact Us<\/span>\n  <\/button>\n\n  <div class=\"spotlight\">\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n<\/div>\n\n<canvas id=\"particleCanvas\"><\/canvas>\n\n<div class=\"accent-lines\">\n  <div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n  <div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n<\/div>\n<div class=\"heroSubP\">\n  <p>Introducing<\/p>\n<\/div>\n<div class=\"hero\">\n  <div class=\"heroT\">\n    <h2>Eclipx<\/h2>\n    <h2>Eclipx<\/h2>\n  <\/div>\n<\/div>\n<p class=\"heroP\">The world's best platform, <br>\n  powered by EclipxOS + React.<\/p>\n<div class=\"mountains\">\n  <div><\/div>\n  <div><\/div>\n  <div><\/div>\n<\/div>\n<div class=\"hero-spacer\"><\/div>\n\n<div class=\"content-section\">\n  <div class=\"content-acc\">\n    <div><\/div>\n    <div><\/div>\n  <\/div>\n  <p class=\"subt\">Revolutionary by design<\/p>\n  <h3 class=\"title\">Harness. Empower.<br>\n    Unmatched Versatility.<\/h3>\n  <p class=\"subp\">At the core lies our revolutionary framework, <br>ensuring adaptability across all application architectures.<\/p>\n<\/div>\n\n@import url('https:\/\/fonts.cdnfonts.com\/css\/hubot-sans');\n*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}\nhtml, body { height: 100%; }\n\nhtml::-webkit-scrollbar { display: none; }\nhtml { -ms-overflow-style: none; scrollbar-width: none; }\n\nbody {\n    margin: 0;\n    font-family: Untitled Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;\n    background: #05060f linear-gradient(0deg,rgba(216,236,248,.06),rgba(152,192,239,.06));\n\n    font-size: max(calc(var(--_size) * 0.03), 10px);\n    --_factor: min(600px, 80vh);\n    --_size: min(var(--_factor), 80vw);\n}\n\nbody.gold .header h2 ,\nbody.gold p,\nbody.gold > * > * :not(.contact-btn) {\n    filter: invert(1) brightness(4.7);\n}\nbody.gold .header h2 a{\n    filter: hue-rotate(0deg);\n}\nbody.gold canvas {\n    filter: drop-shadow(2em 4em 0px #d8bd10) drop-shadow(-8em -14em 0px #d8bd10);\n}\nbody.gold .header .spotlight {\n    filter: invert(1) brightness(4.7) opacity(0.5);\n}\nbody.gold .mountains > div {\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #d8a910,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.2em 10.3em 2em -10em #d4e6ff2f;\n}\n\nbody.gold .content-section,\nbody.gold .content-section ::before,\nbody.gold .content-section ::after{\n    filter: invert(1) brightness(4.4) opacity(1);\n}\n\nh2 {\n    font-family: 'Hubot-Sans', sans-serif;\n}\nh2, p {\n    margin: 0; padding: 0;\n}\nh2 a {\n    text-decoration: none;\n    color: unset;\n}\n\n.header {\n    display: flex; width: 100%;\n    justify-content: center;\n    color: #bad6f7;\n    padding: 2em;\n    position: absolute;\n    top: 0; left: 0; right: 0; margin: 0 auto;\n\n    opacity: 0;\n    translate: 0 -1em;\n    animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards;\n}\n.header > :nth-child(1) {\n    font-size: 1em;\n    position: absolute; left: 0; right: 29em; margin: 0.2em auto;\n    width: fit-content;\n}\n.header > :nth-child(2) {\n    position: absolute; left: 0; right: 0; margin: 0 auto;\n    width: fit-content;\n}\n.header > h2{\n    opacity: 0.5;\n    cursor: pointer;\n    transition: opacity 0.04s ease-in-out;\n}\n.header > h2:hover {\n    opacity: 1;\n    text-shadow: 0 2px 16px rgba(174,207,242, 0.6);\n    width: fit-content;\n}\n\n.header > div.mid-spot {\n    width: 1.8em; height: 1.8em;\n    border-radius: 50%;\n    background: black;\n    box-shadow: 0 0 1em 0 #98c0ef;\n    cursor: pointer;\n    transition: box-shadow 1s ease-in-out;\n}\n.header > div.mid-spot:hover {\n    box-shadow: -0.3em 0.1em 0.2em 0 #d8bd10;\n}\nbody.gold .header > div.mid-spot:hover {\n    box-shadow: -0.3em 0.1em 0.2em 0 #98c0ef;\n}\n\nbody.gold .header > div.mid-spot {\n    box-shadow: 0 0 1em 0 #d8bd10;\n}\n\n.header > :nth-child(2):hover ~ .spotlight {\n    animation: colorize 10s linear infinite;\n}\n@keyframes colorize {\n    0%{filter: hue-rotate(0deg); }\n    100% {filter: hue-rotate(-380deg);}\n}\n\nbutton.contact-btn {\n    position: absolute; left: min(46em, 60vw); right: 0; margin: 0 auto;\n    width: 8em; height: 2.4em;\n    cursor: pointer;\n    border-radius: 20em;\n    border: none;\n    transition: background 0.5s, transform 0.5s;\n    \n    border: 1px solid #c2ccff33;\n    opacity: 1;\n    padding-top: 0.3em;\n\n    background: #121521;\n    color: #9dc3f7;\n    white-space:nowrap;\n}\nbutton.contact-btn::before {\n    content: ''; display: block; position:absolute; left: 0; top:0; border-radius: 20em;\n    width: 100%; height: 100%;\n    background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);\n    opacity: 0.1;\n    transition: all 0.4s ease-in-out;\n}\nbutton.contact-btn:hover::before {\n    background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);\n    opacity: 0.3;\n}\n.contact-btn .glow {\n    --border-width: 1px;\n    --loop-cycle: 24s;\n    position: absolute;\n    inset: calc(var(--border-width)* -1);\n    border-radius: 50px;\n    border: var(--border-width) solid transparent;\n    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);\n    -webkit-mask-clip: padding-box, border-box;\n    mask-clip: padding-box, border-box;\n    -webkit-mask-composite: source-in, xor;\n    mask-composite: intersect;\n    pointer-events: none;\n}\nbutton.contact-btn:hover .glow {\n    --loop-cycle: 2s;\n}\n.contact-btn .glow::after, .contact-btn .glow::before {\n    content: \"\";\n    height: 100%;\n    offset-anchor: 100% 50%;\n    background: radial-gradient(circle at 50% 50%, hsla(0, 0%, 100%, 0.75), transparent 50%), radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);\n    opacity: 0.4;\n    offset-path: rect(0 100% 100% 0 round 33px);\n    position: absolute;\n    display: inline-block;\n    -webkit-animation: loop 4s linear infinite;\n    animation: loop var(--loop-cycle) linear infinite;\n    aspect-ratio: 1 \/ 1;\n    transition: opacity 1s ease-in-out;\n}\n.contact-btn .glow::before {\n    animation-delay: calc( var(--loop-cycle) \/ -2 );\n}\n@keyframes loop {\n    100% {\n        offset-distance: 100%;\n    }    \n}\n.contact-btn-content {\n    background: linear-gradient(0deg, #d8ecf8, #98c0ef);\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    font-size: 1.2em;\n    line-height: 142%;\n}\nbutton.contact-btn:hover .glow::after, button.contact-btn:hover .glow::before {\n    opacity: 0.6;\n}\n@keyframes btn-rot {\n    0% { rotate: 0deg; }\n    100% { rotate: 360deg; } \n}\n\n.header .spotlight {\n    pointer-events: none;\n    position: absolute; left: 0; right: 0; top:0; margin: 0 auto;\n    transition: filter 1s ease-in-out;\n\n    height: 42em; width: 100%;\n    overflow: hidden;\n}\n.header .spotlight > div {\n    border-radius: 0 0 50% 50%;\n    position: absolute; left: 0; right: 0; margin: 0 auto; \n    top: 3em;\n    width: 30em; height: max(42em, 86vh);\n    background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(124, 145, 182, .3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%);\n    transform-origin: 50% 0;\n    filter: blur(15px) opacity(0.5);\n    z-index: -1;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse;\n}\n.header .spotlight > div:nth-child(1){ \n    rotate: 20deg;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite;\n}\n.header .spotlight > div:nth-child(2){ \n    rotate: -20deg;\n    animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite;\n}\n@keyframes loadrot {\n    0% { rotate: 0deg; scale: 0;}\n    100% { scale: 1;}\n}\n@keyframes spotlight {\n    0% {\n        transform: rotateZ(0deg) scale(1);\n        filter: blur(15px) opacity(0.5);\n    }\n    20% {\n        transform: rotateZ(-1deg) scale(1.2);\n        filter: blur(16px) opacity(0.6);\n    }    \n    40% {\n        transform: rotateZ(2deg) scale(1.3);\n        filter: blur(14px) opacity(0.4);\n    }    \n    60% {\n        transform: rotateZ(-2deg) scale(1.2);\n        filter: blur(15px) opacity(0.6);\n    }    \n    80% {\n        transform: rotateZ(1deg) scale(1.1);\n        filter: blur(13px) opacity(0.4);\n    }    \n    100% {\n        transform: rotateZ(0deg) scale(1);\n        filter: blur(15px) opacity(0.5);\n    }    \n}\n\ncanvas#particleCanvas {\n    position: absolute; pointer-events: none;\n    animation: load 0.4s ease-in-out forwards;\n    z-index: 1;\n    width: 100%;\n}\n\np {\n    font-size: 1.5em;\n}\n\n.hero {\n    width: 100%;\n    height: 100%;\n    max-height: 140px;\n    position: absolute; top: 16em;\n}\n\n.heroT {\n    position: absolute; left: 0; right: 0; margin: auto;\n    height: 20em;\n    padding-top: 2em;\n    translate: 0 -1.6em;\n    opacity: 0;\n    animation: load 2s ease-in-out 0.6s forwards;\n}\n@keyframes load {  \n    0% { opacity: 0;}    \n    100% { opacity: 1;}    \n}\n.heroT > h2 {\n    position: absolute;left: 0; right: 0; margin: auto;\n    width: fit-content;\n    \n    font-size: 7em;\n    font-weight: 600;\n    color: #9dc3f7;\n    background:\n    radial-gradient( 2em 2em at 50% 50%,\n        transparent calc(var(--p) - 2em),\n        #fff calc(var(--p) - 1em), \n        #fff calc(var(--p) - 0.4em), \n        transparent var(--p) \n    ),\n    linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n\n    --p:0%;\n    transition:--p 3s linear;\n    \n    animation: pulse 10s linear 1.2s infinite;\n}\n\n.heroT h2:nth-child(2) {\n    background:\n    radial-gradient( 2em 2em at 50% 50%,\n        transparent calc(var(--p) - 2em),\n        transparent calc(var(--p) - 1em),\n        #fff calc(var(--p) - 1em), \n        #fff calc(var(--p) - 0.4em), \n        transparent calc(var(--p) - 0.4em), \n        transparent var(--p) \n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    filter: blur(16px) opacity(0.4);\n}\n@keyframes pulse { \n    0% { --p:0%; }\n    50% { --p:300%;}\n    100% { --p:300%;}\n}\n@property --p {\n    syntax: '<percentage>';\n    inherits: false;\n    initial-value: 0%;\n}\n\n.heroP {\n    font-size: 1.2em;\n    position: absolute; left: 0; right: 0; top: 20.6em; margin: auto;\n    height: fit-content; width: fit-content; text-align: center;\n    opacity: 0;\n    translate: 0 1em;\n    animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n@keyframes up {      \n    100% { translate: 0; }    \n}\n\n.heroSubP {\n    position: absolute; left: 0; right: 0; top: 13em; margin: auto;\n    height: fit-content;\n    opacity: 0;\n    translate: 0 -1em;\n    animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;\n}\n@keyframes load3 {  \n    0% { opacity: 0;}    \n    100% { opacity: 0.7;}    \n}\n.heroSubP p {\n    font-size: 1em;\n    position: relative; width: fit-content; margin: auto;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n.heroSubP p::before,\n.heroSubP p::after {\n    position: absolute; top: 60%; \n    display: block; content: '';\n    width: 5em; height: 1px;\n    opacity: 0;\n    animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;\n}\n@keyframes load2 {  \n    0% { opacity: 0;}    \n    100% { opacity: 0.3;}    \n}\n.heroSubP p::before{\n    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);\n    right: 120%;\n    translate: -5em 0;\n}\n.heroSubP p::after {\n    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);\n    left: 120%;\n    translate: 5em 0;\n}\n\n.accent-lines {\n    pointer-events: none;\n    position: absolute; top: 0; left: 0; right: 0;\n    width: 100%; height: 42em;\n    z-index: -2;\n    --accent-lines-clr: rgba(186, 215, 247, .18);\n}\n.accent-lines > div {\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    height: 100%; width: 100%;\n}\n.accent-lines > div:nth-child(1) > div{\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    width: 100%; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--accent-lines-clr), transparent);\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 2.4s forwards;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1){ top: 6em; }\n.accent-lines > div:nth-child(1) > div:nth-child(2){ top: 11em; }\n.accent-lines > div:nth-child(1) > div:nth-child(3){ top: 16em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4){ top: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5){ top: 29em; }\n.accent-lines > div:nth-child(2) > div{\n    position: absolute; top: 0; right: 0; left: 0; margin: auto;\n    width: 1px; height: 100%;\n    background: var(--accent-lines-clr);\n}\n@keyframes accentload {\n    0% {\n        opacity: 0; scale: 0;\n    }\n    100% {\n        opacity: 1; scale: 1;\n    }\n}\n\n.accent-lines > div:nth-child(2) > div {\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 2s forwards;\n}\n.accent-lines > div:nth-child(2) > div:nth-child(1){ left: 24em; }\n.accent-lines > div:nth-child(2) > div:nth-child(2){ left: 34em; }\n.accent-lines > div:nth-child(2) > div:nth-child(3){ right: 24em; }\n.accent-lines > div:nth-child(2) > div:nth-child(4){ right: 34em; }\n\n.accent-lines > div:nth-child(1) > div::before, \n.accent-lines > div:nth-child(1) > div::after { \n    content: ''; display: none; position: absolute;\n    width: 0.2em; height: 0.2em; border-radius: 1em;\n    background: #9dc3f7;\n    left: 0; right: 0; margin: auto;\n    translate: 0 -1px;\n\n    opacity: 0; scale: 0;\n    animation: accentload 2s ease-out 4.4s forwards;\n}\n\n.accent-lines > div:nth-child(1) > div:nth-child(3)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(3)::after{ display: block; right: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(4)::after{ display: block; right: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5)::before{ display: block; left: 24em; }\n.accent-lines > div:nth-child(1) > div:nth-child(5)::after{ display: block; right: 24em; }\n\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after{ \n    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before{\n    right: 24em; rotate: 45deg; translate: -2.5em 2.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after{\n    right: 24em; rotate: -45deg; translate: -2.5em 2.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after{ \n    display: block; width: 5em; height: 1px; border-radius: 0; opacity: 0.12;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before{\n    left: 24em; rotate: 45deg; translate: 2.5em 7.5em;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after{\n    left: 24em; rotate: -45deg; translate: 2.5em 7.5em;\n}\n\n.accent-lines > div:nth-child(1) > div:nth-child(2)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(2)::after {\n    opacity: 0; scale: 0;\n    animation: accentload2 2s ease-out 2.4s forwards;\n}\n.accent-lines > div:nth-child(1) > div:nth-child(1)::before,\n.accent-lines > div:nth-child(1) > div:nth-child(1)::after {\n    opacity: 0; scale: 0;\n    animation: accentload3 2s ease-out 2.4s forwards;\n} \n@keyframes accentload2 {\n    0% {\n        opacity: 0; scale: 0; transform: rotate(360deg);\n    }\n    50% { scale: 0; }\n    100% {\n        opacity: 0.12; scale: 1; transform: rotate(0deg);\n    }\n}\n@keyframes accentload3 {\n    0% {\n        opacity: 0; scale: 0; transform: rotate(-360deg);\n    }\n    50% { scale: 0; }\n    100% {\n        opacity: 0.12; scale: 1; transform: rotate(0deg);\n    }\n}\n\n.mountains {\n    position: absolute; left: 0; right: 0; top: 31em; margin: auto;\n    width: 100%; height: 10em;\n    pointer-events: none;\n}\n.mountains::before {\n    content: ''; display: block;\n    width: 100%; height: 500%;\n    position: absolute; top: 0%;\n    background: linear-gradient(90deg, #121521 0%, transparent 50%);\n    background: linear-gradient(0deg, #121521 80%, transparent 90%);\n    z-index: 2;\n}\n.mountains > div {\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.2em 10.3em 2em -10em #d4e6ff2f;\n    background: #121521;\n    z-index: 1;\n    filter: brightness(0.8);\n    position: absolute; left: 0; right: 0; margin: auto;\n    width: 20em; height: 20em;\n    rotate: 45deg;\n}\n.mountains > div:nth-child(1) {\n    bottom: -240%; \n    translate: -6em 2em;\n    animation: mountainload1 2s ease-out 2.4s forwards;\n}\n.mountains > div:nth-child(2) {\n    bottom: -240%;\n    translate: -2em 0em;\n    width: 14em; height: 20em;\n    animation: mountainload2 2s ease-out 2.2s forwards;\n}\n.mountains > div:nth-child(3) {\n    bottom: -240%; \n    translate: 6em 3em;\n    animation: mountainload1 2s ease-out 2s forwards;\n}\n@keyframes mountainload1 {\n    0% { bottom: -240%; }\n    100% { bottom: -140%; }\n}\n@keyframes mountainload2 {\n    0% { bottom: -240%; }\n    100% { bottom: -108%; }\n}\n.mountains > div::before {\n    content: ''; display: block;\n    background: repeating-radial-gradient( at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px);\n    width: 12em; height: 12em;\n    position: absolute;\n    left: 0; top: 0;\n    border-bottom-right-radius: 100%;\n}\n\n.hero-spacer {\n    height: 40em;\n    pointer-events: none;\n}\n\n.content-section {\n    position: relative;\n    z-index: 1112;\n    color: #fff;\n    width: 100%;\n    text-align: center;\n    padding: 16em 0 12em 0;\n    overflow: hidden;\n}\n\n.content-section p.subt {\n    color: #d8ecf8be;\n    font-size: 0.8em;\n    font-weight: 200;\n    position: relative;\n    width: fit-content;\n    margin: auto;\n}\n.content-section h3 {\n    margin: 0.4em 0 0.6em 0;\n    font-size: 2.3em;\n    font-weight: 600;\n    color: #d8ecf8;\n    text-shadow: 0 2px 16px rgba(174,207,242,.24);\n    background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n.content-section p.subp {\n    color: #d8ecf8be;\n    font-size: 1em;\n    font-weight: 400;\n    max-width: 26em;\n    margin: auto;\n}\n\n.content-section p.subt::before,\n.content-section p.subt::after {\n    position: absolute; top: 60%; \n    display: block; content: '';\n    width: 5em; height: 1px;\n    opacity: 0.5;\n}\n.content-section p.subt::before{\n    background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);\n    right: 120%;\n    top: 50%;\n}\n.content-section p.subt::after {\n    background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);\n    left: 120%;\n    top: 50%;\n}\n\n.content-section .content-acc {\n    position: absolute;\n    left: 0; right: 0; top: 25%; margin: auto;\n    display: flex; justify-content: center;\n}\n.content-section .content-acc div{\n    width: 10em; height: 10em;\n    border-radius: 50%;\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset -1.2em 2.3em 2em -0.5em #d4e6ff2f;\n    background: #121521;\n    z-index: 1;\n    filter: brightness(0.8);\n    background: repeating-radial-gradient( at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px);\n    translate: -18em;\n}\n.content-section .content-acc div:nth-child(2){\n    translate: 18em 12em;\n    border-radius: 2em;\n    box-shadow: \n    -1em -0.2em 0.4em -1.1em #c2ccff,\n    inset 0em 0em 0em 2px #c2ccff,\n    inset 0.2em 0.3em 0.2em -0.2em #c2ccff,\n    inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;\n}\n\nconst canvas = document.getElementById('particleCanvas');\nconst ctx = canvas.getContext('2d');\n\n\/\/ Initial canvas size\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nlet particles = [];\nlet particleCount = calculateParticleCount();\n\nclass Particle {\n    constructor() {\n        this.reset();\n        this.y = Math.random() * canvas.height;\n        this.fadeDelay = Math.random() * 600 + 100;\n        this.fadeStart = Date.now() + this.fadeDelay;\n        this.fadingOut = false;\n    }\n\n    reset() {\n        this.x = Math.random() * canvas.width;\n        this.y = Math.random() * canvas.height;\n        this.speed = Math.random() \/ 5 + 0.1;\n        this.opacity = 1;\n        this.fadeDelay = Math.random() * 600 + 100;\n        this.fadeStart = Date.now() + this.fadeDelay;\n        this.fadingOut = false;\n    }\n\n    update() {\n        this.y -= this.speed;\n        if (this.y < 0) {\n            this.reset();\n        }\n\n        if (!this.fadingOut && Date.now() > this.fadeStart) {\n            this.fadingOut = true;\n        }\n        \n        if (this.fadingOut) {\n            this.opacity -= 0.008;\n            if (this.opacity <= 0) {\n                this.reset();\n            }\n        }\n    }\n\n    draw() {\n        ctx.fillStyle = `rgba(${255 - (Math.random() * 255\/2)}, 255, 255, ${this.opacity})`;\n        ctx.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1);\n    }\n}\n\nfunction initParticles() {\n    particles = [];\n    for (let i = 0; i < particleCount; i++) {\n        particles.push(new Particle());\n    }\n}\n\nfunction animate() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    particles.forEach(particle => {\n        particle.update();\n        particle.draw();\n    });\n    requestAnimationFrame(animate);\n}\n\nfunction calculateParticleCount() {\n    return Math.floor((canvas.width * canvas.height) \/ 6000);\n}\n\nfunction onResize() {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n    particleCount = calculateParticleCount();\n    initParticles();\n}\n\nwindow.addEventListener('resize', onResize);\n\ninitParticles();\nanimate();\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\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>RAFA Contact Us Introducing Eclipx Eclipx The world&#8217;s best platform, powered by EclipxOS + React. Revolutionary by design Harness. Empower. Unmatched Versatility. At the core lies our revolutionary framework, ensuring adaptability across all application architectures. @import url(&#8218;https:\/\/fonts.cdnfonts.com\/css\/hubot-sans&#8216;); *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;} html, body { height: 100%; } html::-webkit-scrollbar { display: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":8,"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/ddevops.de\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}