/* /////////////////////////////////////////////// */
/* #region  Generals */
html {
    height: 100%;
}
body {
    height: 100%;
    font-family: roboto;
    font-weight: 400;
    background: #040d21;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  scrols */
body::-webkit-scrollbar-track {
    background: #909dac;
}
body::-webkit-scrollbar-thumb {
    background: #293547;
}
body::-webkit-scrollbar {
    width: 5px;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Fonts */
@font-face {
    font-family: main-bold;
    src: url(fonts/Alliance-No-1-Bold.woff2);
}
@font-face {
    font-family: main-e-bold;
    src: url(fonts/Alliance-No-1-ExtraBold.woff2);
}
@font-face {
    font-family: main-medium;
    src: url(fonts/Alliance-No-1-Medium.woff2);
}
@font-face {
    font-family: main-regular;
    src: url(fonts/Alliance-No-1-Regular.woff2);
}
@font-face {
    font-family: main-s-bold;
    src: url(fonts/Alliance-No-1-SemiBold.woff2);
}
@font-face {
    font-family: "Smooch_Sans";
    src: url(fonts/Smooch_Sans/SmoochSans-VariableFont_wght.ttf);
}
@font-face {
    font-family: "Cartograph_CF";
    src: url(fonts/Cartograph_CF/cartograph-mono-cf.otf);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  backgrounds */
.main_bg {
    background-color: rgb(4, 13, 33);
}
.bg-white {
    background: white;
}
.main-page .bg-bluer {
    width: 796px;
    height: 898px;
    left: 0;
    top: 0;
    background: radial-gradient(
        transparent,
        #12007499,
        transparent,
        transparent
    );
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 14px 0px #0c0553 inset;
}
.main-page .bg-purpoler {
    width: 796px;
    height: 898px;
    right: 0;
    bottom: 0;
    background: radial-gradient(#481f49, transparent);
    transform: translate(50%, 50%);
    border-radius: 50%;
}
.main-page .bg-footer {
    width: 167%;
    height: 893px;
    left: 50%;
    top: 105px;
    border-radius: 50% 50% 0 0;
    transform: translate(-50%, 0);
    box-shadow: 0 -8px 11px -11px #100e5a;
    background: linear-gradient(180deg, #030a1a, #210024);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Slogan */
.fnt-slogen {
    font-family: main-e-bold;
    font-size: 75px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    background: -webkit-linear-gradient(-70deg, #ffffff 0%, #8d07d3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
}
.fnt-slogen-desc {
    font-family: main-regular;
    font-size: 34px;
    font-feature-settings: "ss02" on,"ss01" on;
    color: #6d65e3;
    font-weight: 400;
    line-height: 0.9;
    text-align: justify;
}
.fnt-slogen-sm-desc{
    font-family: "Smooch_Sans";
    font-size: 25px;
    color: #6d65e3;
    font-weight: 300;
    line-height: 0.9;
    text-align: justify;
}
.ftn-main-word {
    font-family: "Cartograph_CF";
    display: inline-block;
    color: lightblue;
    font-size: 25px;
}
.fnt-head{
    font-family: main-e-bold;
    font-size: 55px;
    color: #d95fe7;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
}
.fnt-mid-head{
    font-family: main-e-bold;
    font-size: 40px;
    color: #d95fe7;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Global */
#global_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#global_container canvas {
    width: 1366px;
    height: 635px;
    transform: translate(-300px, 40px);
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    background: #030a1a;
    width: 100%;
}
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: white;
    font-size: 20px;
    font-family: "Neon 80s";
}
/* #endregion */
/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */
/* #region  Services */
.services_page {
    height: calc(100% + 100px);
}
.services_page .title{
    color: #9300df;
    font-size: 150px;
    text-align: center;
    font-family: fantasy;
}
.services_page .bg {
    top: 200px !important;
    height: calc(100% - 100px);
    background: linear-gradient(180deg, #030a1a, #210024);
}
/* ############################################### */
/* #region  Atom */
:root {
    --atom-size: 180px;
    --atom-color-hex: #00d8ff;
    --atom-color-rgb: 243, 131, 255;
    --nucleus-size: calc(var(--atom-size) / 5);
    --electron-color-hex: #f383ff;
    --electron-size: calc(var(--atom-size) / 25);
    --electron-orbit-size: calc(var(--atom-size) / 2.1);
    --electron-speed: 1.2s;
    --electron-speed-alpha: 1s;
    --electron-speed-omega: 0.8s;
}
.atom {
    position: relative;
    width: var(--atom-size);
    height: var(--atom-size);
    animation: 8s atom infinite cubic-bezier(1, 0.25, 0, 0.75);
}
@keyframes atom {
    0% {
        transform: rotate(0deg) scale(1);
    }
    12.5% {
        transform: rotate(-45deg) scale(0.9);
    }
    25% {
        transform: rotate(-90deg) scale(1);
    }
    37.5% {
        transform: rotate(-135deg) scale(0.9);
    }
    50% {
        transform: rotate(-180deg) scale(1);
    }
    62.5% {
        transform: rotate(-225deg) scale(0.9);
    }
    75% {
        transform: rotate(-270deg) scale(1);
    }
    87.5% {
        transform: rotate(-315deg) scale(0.9);
    }
    100% {
        transform: rotate(-360deg) scale(1);
    }
}

/* Nucleus */
.atom::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nucleus-size);
    height: var(--nucleus-size);
    margin-top: calc(var(--nucleus-size) / -2);
    margin-left: calc(var(--nucleus-size) / -2);
    background: var(--electron-color-hex); /* var(--atom-color-hex); */
    border-radius: 100%;
    box-shadow: 0 0 3px 0 var(--atom-color-hex);
    animation: 2s nucleus infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes nucleus {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* Electron Orbit */
.atom > [class^="electron"] {
    border-top: solid rgba(var(--atom-color-rgb), 0.5) 1px;
    border-right: solid rgba(var(--atom-color-rgb), 0.35) 2px;
    border-bottom: solid rgba(var(--atom-color-rgb), 0.2) 4px;
    border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
    border-radius: 100%;
    width: 100%;
    height: var(--electron-orbit-size);
    position: absolute;
    top: 50%;
    margin-top: calc(var(--electron-orbit-size) / -2);
    animation: var(--electron-speed) electron-orbit infinite linear;
}
.atom > .electron-alpha {
    transform: rotate(60deg);
    animation: var(--electron-speed-alpha) electron-orbit infinite linear;
}
.atom > .electron-omega {
    transform: rotate(-60deg);
    animation: var(--electron-speed-omega) electron-orbit infinite linear;
}
@keyframes electron-orbit {
    0% {
        border-top: solid rgba(var(--atom-color-rgb), 0.5) 1px;
        border-right: solid rgba(var(--atom-color-rgb), 0.35) 2px;
        border-bottom: solid rgba(var(--atom-color-rgb), 0.2) 4px;
        border-left: solid rgba(var(--atom-color-rgb), 0.5) 2px;
    }
    25% {
        border-top: solid rgba(var(--atom-color-rgb), 0.35) 1px;
        border-right: solid rgba(var(--atom-color-rgb), 0.2) 2px;
        border-bottom: solid rgba(var(--atom-color-rgb), 0.5) 4px;
        border-left: solid rgba(var(--atom-color-rgb), 0.5) 2px;
    }
    50% {
        border-top: solid rgba(var(--atom-color-rgb), 0.2) 1px;
        border-right: solid rgba(var(--atom-color-rgb), 0.5) 2px;
        border-bottom: solid rgba(var(--atom-color-rgb), 0.5) 4px;
        border-left: solid rgba(var(--atom-color-rgb), 0.35) 2px;
    }
    75% {
        border-top: solid rgba(var(--atom-color-rgb), 0.5) 1px;
        border-right: solid rgba(var(--atom-color-rgb), 0.5) 2px;
        border-bottom: solid rgba(var(--atom-color-rgb), 0.35) 4px;
        border-left: solid rgba(var(--atom-color-rgb), 0.2) 2px;
    }
    100% {
        border-top: solid rgba(var(--atom-color-rgb), 0.5) 1px;
        border-right: solid rgba(var(--atom-color-rgb), 0.35) 2px;
        border-bottom: solid rgba(var(--atom-color-rgb), 0.2) 4px;
        border-left: solid rgba(var(--atom-color-rgb), 0.5) 2px;
    }
}

/* Electron Unit */
.atom [class^="electron"]::after {
    content: "";
    display: block;
    width: var(--electron-size);
    height: var(--electron-size);
    background: var(--electron-color-hex);
    border-radius: 50%;
    margin-top: calc(var(--electron-size) / -2);
    position: absolute;
    top: 50%;
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
    animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
}
.atom .electron-alpha::after {
    animation: calc(var(--electron-speed-alpha) * 2) electron infinite
        ease-in-out;
}
.atom .electron-omega::after {
    animation: calc(var(--electron-speed-omega) * 2) electron infinite
        ease-in-out;
}
@keyframes electron {
    0% {
        left: calc(var(--electron-size) / -1);
        transform: scale(1);
    }
    12.5% {
        top: 100%;
        transform: scale(1.5);
    }
    25% {
        left: 100%;
        transform: scale(1);
    }
    37.5% {
        top: 0%;
        transform: scale(0.25);
    }
    50% {
        left: calc(var(--electron-size) / -1);
        transform: scale(1);
    }
    62.5% {
        top: 100%;
        transform: scale(1.5);
    }
    75% {
        left: 100%;
        transform: scale(1);
    }
    87.5% {
        top: 0%;
        transform: scale(0.25);
    }
    100% {
        left: calc(var(--electron-size) / -1);
        transform: scale(1);
    }
}

/* Shadow */
main {
    position: relative;
}
main::after {
    content: "";
    display: block;
    position: absolute;
    top: 115%;
    left: 0;
    width: var(--atom-size);
    height: var(--nucleus-size);
    background-image: radial-gradient(
        closest-side,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0)
    );
    border-radius: 100%;
    transform: scale(1, 0.8);
    animation: 8s shadow infinite cubic-bezier(1, 0.25, 0, 0.75);
}
@keyframes shadow {
    0% {
        transform: scale(1, 0.8) translateY(0);
    }
    12.5% {
        transform: scale(0.7, 0.7) translateY(-20px);
    }
    25% {
        transform: scale(1, 0.8) translateY(0);
    }
    37.5% {
        transform: scale(0.7, 0.7) translateY(-20px);
    }
    50% {
        transform: scale(1, 0.8) translateY(0);
    }
    62.5% {
        transform: scale(0.7, 0.7) translateY(-20px);
    }
    75% {
        transform: scale(1, 0.8) translateY(0);
    }
    87.5% {
        transform: scale(0.7, 0.7) translateY(-20px);
    }
    100% {
        transform: scale(1, 0.8) translateY(0);
    }
}
/* #endregion */
/* ############################################### */
/* #endregion */
/* /////////////////////////////////////////////// */

.categories_lamb{
    height: 560px;
    overflow: visible;
}