@charset "utf-8";
/* CSS Document */
/* DEFAULT TEXT */

header, main, footer {width: 100%;}
.container, .sparkcontainer {width: 100%;}
html {max-width: 100vw;}














/* Glass Cookie Banner */
.cookie-glass {position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10000;
    background: rgba(10, 15, 30, 0.6); backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.1);box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); padding: 15px 0;}
.cookie-glass.visible {transform: translateY(0);}
.cookie-flex {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.cookie-content p {color: #e0e0e0; font-size: 0.85rem; margin: 0;font-family: 'RobotoMono', monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);}
.cookie-content a {color: #00FFFF; text-decoration: none;
    border-bottom: 1px dotted #00FFFF; transition: 0.3s;}
.cookie-content a:hover {color: #fff;text-shadow: 0 0 8px #00FFFF;}
.btn-glass-small { background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.5); color: #fff; padding: 8px 20px; border-radius: 4px;
    cursor: pointer;font-family: 'RobotoMono', monospace;font-size: 0.8rem;
    white-space: nowrap;transition: all 0.3s ease;text-transform: uppercase; letter-spacing: 1px;}
.btn-glass-small:hover {background: rgba(0, 255, 255, 0.2); border-color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);text-shadow: 0 0 5px #fff;}
@media (max-width: 768px) {.cookie-flex { flex-direction: column; text-align: center; }
   .btn-glass-small { width: 100%;max-width: 300px;}}




.tnc_overlay {z-index: 100;}
.tnc_overlay {position: fixed; top: 0;left: 0;width: 100vw; height: 100%; background-color: rgba(4, 20, 36, 0.85);overflow: auto; padding-top: 15px;display: flex; align-items: center; justify-content: center; max-width: 100vw !important; }
.tnc_overlay article.terms {padding:0px 0px;}



















/********************* ANIMATIONS ******************/
@keyframes cloudDrift {0% {background-position-x: 0%;}100% {background-position-x: 100%;}}
@keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
  @-webkit-keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
.spark3, .spark-pos1, .spark-pos2, .spark-pos3 {display: block; position: absolute; animation: sparkle-pulse 11s infinite ease-in-out;}

  @keyframes sparkle-pulse {
  0%, 90% {transform:scale(1) rotate(0deg);opacity: 1;}
  95% {transform:scale(1.2) rotate(-10deg);opacity: 1;}
  100% {transform:scale(1) rotate(0deg);opacity: 1;}}
.spark {animation: sparkLoop 60s linear infinite; }
@keyframes scroll { 0% {transform: translateX(var(--scroll-distance, -3000px));}
100% {transform: translateX(0px);}}
@keyframes rotates {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
.rotate {animation-name: rotates; animation-duration: 2s;
animation-timing-function: linear; animation-iteration-count: infinite;}
@keyframes bulges { 0% {transform: scale(1);  }
50% {transform: scale(1.3); } 100% {transform: scale(1);}}
.bulge {animation: bulges 1.5s ease-in-out infinite;}
@keyframes shrinks { 0% {transform: scale(0.8);  }
50% {transform: scale(0.7); } 100% {transform: scale(0.8);}}
.shrink {animation: shrinks 1.5s ease-in-out infinite;}
@keyframes spinY {0% {transform: perspective(600px) rotateY(0deg);}100% {transform: perspective(600px) rotateY(360deg);}}
.spinonY {animation: spinY 3s linear infinite;}
@keyframes intermittent-shake {
  0%, 60% {transform: translate(0, 0);} 61% {transform: translate(-2px, 0);}
  62% {transform: translate(2px, 0);} 63% {transform: translate(-3px, 0);}
  64% {transform: translate(3px, 0);} 65% {transform: translate(-2px, 0);}
  66% {transform: translate(3px, 0);} 67% {transform: translate(-3px, 0);}
  68% {transform: translate(3px, 0);} 69%, 100% {transform: translate(0, 0); }}
.shaker {animation: intermittent-shake 3s ease-in-out infinite;}
@keyframes squash {0%, 100% {transform: scale(1, 1);}
  50% {transform: scale(1.3, 0.7); }}
.squish {animation: squash 1s ease-in-out infinite;}
@keyframes dot-flash {
  0% {background-color: rgb(255, 56, 180);filter: drop-shadow(0 0 6px rgba(255, 56, 180, 1)) drop-shadow(0 0 6px rgba(255, 56, 180, 1)); }
  5% {background-color: rgb(253, 100, 195);filter: drop-shadow(0 0 6px rgba(255, 56, 180, 1)) drop-shadow(0 0 6px rgba(255, 56, 180, 1));}
  6% {background-color: rgb(236, 166, 209);filter: drop-shadow(0 0 6px rgba(255, 56, 180, 1));}
  55% {background-color: transparent; filter: none;}
  100% {background-color: transparent;filter: none;}}
.delay01, .dot-one.delay01 { animation-delay: 0.1s !important; animation-play-state: running !important;}
.delay02 { animation-delay: 0.2s !important;animation-play-state: running !important; }
.delay03 { animation-delay: 0.3s !important;animation-play-state: running !important; }
.delay04, .dot-two.delay01 { animation-delay: 0.4s !important;animation-play-state: running !important; }
.delay05, .dot-one.delay05 { -webkit-animation-delay: 0.5s;animation-delay: 0.5s !important; animation-play-state: running !important;}
.delay06 { animation-delay: 0.6s !important;animation-play-state: running !important; }
.delay07, .dot-three.delay01 {animation-delay: 0.7s !important;animation-play-state: running !important; }
.dot-two.delay05 {animation-delay: 0.8s !important;animation-play-state: running !important; }
.dot-three.delay05 {animation-delay: 1.1s !important;animation-play-state: running !important; }
.dot-one.delay23 { animation-delay: 2.3s !important; animation-play-state: running !important;}
.dot-two.delay23 { animation-delay: 2.6s !important; animation-play-state: running !important;}
.dot-three.delay23 { animation-delay: 2.9s !important; animation-play-state: running !important;}
.dots-container { display: flex; justify-content: center; align-items: center; min-height: 70px; min-width: 50px; }
.dots {background-color:transparent; border-radius: 50%; margin: 0 4px;display: inline-block;
    animation-name: dot-flash;
    animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear;
    animation-play-state: paused; transition: background-color 0.05s ease-in-out; }
.dot-one {animation-play-state: running; animation-delay: 0s;width: 6px; height: 6px;}
.dot-two {animation-play-state: running; animation-delay: 0.3s;width: 9px; height: 9px; }
.dot-three {animation-play-state: running;  animation-delay: 0.6s;width: 12px; height: 12px; }
.colours {background-image: linear-gradient(to right, #090017, #4756C1 ,#242d72, #090017);
  background-size: 600%; background-position: 0 0; animation-duration: 70s; animation-iteration-count: infinite; animation-name: gradients; }
@keyframes gradients { 0% {background-position: 0 0;} 25% {background-position: 50% 0;} 50% {background-position: 90% 0;}
  60% {background-position: 60%;} 75% {background-position: 40%;} 100%  {background-position: 0 0;}}

/********************* LAYER CONTROL ******************/
footer {z-index: 110;}
.top, .mini-nav, .main-nav1{z-index: 100;}
header {z-index: 90;}
.CloudCTA, .belt {z-index: 81; display: block;position: relative;}
.container, .main{z-index: 80;}
main {z-index:75}
.Attention {z-index:74}
.burger-nav {z-index: 72;}
.mini-nav {z-index: 71;}
.texttop {z-index: 101; position: relative;}


.hero .container {z-index: 64;}
.BigSilverButton{z-index: 63;}
.BigPinkButton{z-index: 62;}

.clouds2 {z-index: 60;}
.dots-container{z-index: 58;}
.slider {z-index: 56;}
.clouds {z-index: 54;}
.spark3, .spark-pos1, .spark-pos2, .spark-pos3 {z-index: 52;}
.spark {z-index: 50; }

.clouds3 {z-index: 10;}
.fancyborder, .videoborder, .fancyinner {z-index: 80;}
.aboutheight {min-height: 350px;}
#g-recaptcha-response{ z-index: -100;}


/********************* RESPONSIVE COMPONENTS ******************/
.logo-img {height:60px;}
.clouds {background-image: url("/static/images//brand/cloudsv1.avif");}
.clouds2 {background-image: url("/static/images//brand/cloudsv1.avif");}
.clouds3 {background-image: url("/static/images//brand/cloudsv1.avif");}
.avatar {background-image: url("/static/images//brand/avatar-alex3.avif"); background-size: cover; width: 100%; height: 100%; background-position:center;}
.fancyinner:has(.avatar) {padding:0px;}
.fancyinner:has(.FULL-Form) {}



.clouds { min-height: 600px; height: 600px;}



.hero.home { min-height: 600px; height: 600px;}


.hero.short, .hero.short .clouds { min-height: 600px; height: 600px;}
.hero.short, .hero.short .clouds { margin-top:-170px;}


.hero.short .clouds2 {display: none;}





.short .clouds2 {bottom:171px;}
.hero.short h1 {margin-top: 170px;}

.spark3 {width: 55px;  top: -22px; left: 33px;}
.spark-pos1 {width: 55px;  top: 0px; left: 58px;}
.spark-pos2 {width: 55px;  top: 0px; left: 69px;}
.spark-pos3 {width: 55px;  top: 20px; left: 116px;}






.burger-nav .spark3 {width: 45px;  top: 35px; left: 50px;}
.hero .container, .lesscontain {width: 100%;}
.lesscontain{padding: 0 20px;}
.top {padding:10px 20px;}
.slider.cloudicos {bottom: 150px;}
.slider {height: 80px;}
.main-nav1 {display: none;}
#bottom .container { display: grid; grid-template-areas: "a";}
.slide.cloudico img {height:90px;}
.dot {height:25px;}
.container {padding:20px 20px;}
.container.main {margin-top: 60px;}
header .top {grid-template-columns: 1fr;}
.mini-nav, .lesscontain {right:0; left:0;top:0; margin-left: auto; margin-right: auto; }
.mini-nav {width: min-content;}
.CloudCTA {right:0; left:0;bottom:-40px; margin-left: auto; margin-right: auto; width: max-content;}
.linebreaker {display: none;}
.breaker {display: inline;}
body {font-size: 0.7em; color:#ffffff;}
main {margin-bottom: 80px;}

/********************* MAIN LAYOUT ******************/
header {background-color: transparent;}
main.short{margin-top: -171px;}
body {display: grid; grid-template-rows: auto auto 1fr auto;  grid-gap:0px;
   font-weight: 400; line-height: 1.5; letter-spacing: 0.03em; font-weight: 300;
   font-family: "Roboto", sans-serif; font-size: 0.8em; color: #fff;	margin:0;
    min-height: 100vh; margin:0;
    grid-template-columns: 100%;}
header .top {display: grid; grid-row-gap: 0; align-items: center;
  column-gap: 20px;}
  header .logo a {max-width: 250px;}
.spark3, .spark-pos1, .spark-pos2, .spark-pos3 {display: block; width: 70px; position: absolute;}
.cloud-layers-container {position: absolute; top: 0; left: 0; width: 100%;  bottom: 0; overflow-x: hidden;}
.container {margin-left: auto; margin-right: auto; max-width: 1820px;}
.sparkcontainer   { margin-left: auto;  margin-right: auto; height: 5px;width:70%; }
.bar { background: linear-gradient(90deg,rgba(0, 255, 255, 1) 0%, rgba(253, 100, 195, 1) 100%);}
header .bar, main .bar {height:5px;}
.spark, #bottom .spark {width: 55px; top: -16px; left: 75%;}
.sme {margin-bottom: 25px;}

/********************* FOOTER ******************/
#bottom {background-color:#090017; margin-top:auto; }
.links a  {padding:10px; color: ghostwhite; text-decoration: none;}
.legals  {text-align: right;}

/******* RESET  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none;}
.hide, .hidden {display: none; visibility: hidden;}
.show  {display:block;}
.showflex, .flex  {display:flex;}
ul {margin:0 0 10px 0;padding-left: 20px;}
li {margin:0 0 10px 0; padding-left: 10px;}

/******* FONTS ******/
.CloudCTA {color: #000; position: absolute;}
a {text-decoration: none;}
h1{ text-transform: uppercase;
    letter-spacing: 2px;
    color: #3b3b3b;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;}
    h1.home {color: #fff !important;}
h2.whitetitle, h3.whitetitle{ text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: 1.8em;
    margin-bottom: 10px; letter-spacing: 0.08em;}
h2.whitetitle{color: #cacaca;}
h3.whitetitle, h1.termsheader {color: #fff;}
.terms h2 {font-size: 1.3em;}
h2 {font-weight: 400;  letter-spacing: 0.04em;}
h3, h4, .heading {font-weight: 400;  letter-spacing: 0.08em;}
p, h1, h2, h3,h4,h5 {margin-bottom: 10px;}
b, strong {font-weight: 600;}
h1, h2.whitetitle{font-size: 1.85em; line-height: normal;}
h1.home {font-size: 1.65em;}
h1.home span.regular {text-transform: capitalize; font-size: 0.8em;}
h2 {font-size: 1.8em; line-height: 1.5; }
h2.sub {font-size: 1.1em;}
h3 {font-size: 1.3em; line-height: normal;}
h3.big, .big {font-size: 1.8em;}
h4, h5, .heading {font-size:1.3em; line-height:normal;}
footer .bottom, .overlay-cookie-text {font-size: 0.7em;}
small, .overlay-cookie-text {font-size: 0.9em;}
header, footer{font-weight: 400; }
header a, footer a {color: whitesmoke;}
.textmid{ text-align: center;}
a:hover {color:#FF38B4;}
.darktext {color: #000 !important; filter: drop-shadow(0px 0px 7px #ffffff); filter: drop-shadow(0px 0px 7px #ffffff);}
.textmid {text-align: center;}
.massive {font-size: 3em; font-weight: 900; background: -webkit-linear-gradient(45deg, #090017, #4756C1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)); margin-bottom: 30px;
 }
 .masslight {font-size: 3em; font-weight: 900; background: -webkit-linear-gradient(45deg, #9686b3, #ffffff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)); margin-bottom: 10px;}
.biglight {font-size: 1.8em;}
.massive, h1 { filter: drop-shadow(0px 0px 7px #ffffff); filter: drop-shadow(0px 0px 7px #ffffff);}
h1.home, h1.termsheader { filter: drop-shadow(0px 0px 0px #ffffff); filter: drop-shadow(0px 0px 0px #ffffff);}

.header-separator {height: 4px; width: 300px;  background: linear-gradient(to right, #00FFFF, #FF38B4);
margin: 20px auto; border-radius: 2px;}


/********************* BUTTONS ******************/
.main-nav1 li:last-child a{background-color: #00FFFF;
	  background-image: linear-gradient(
    to bottom right,
    #94f3ee 5%,
    #00FFFF 30%,
    rgb(0, 200, 200) 50%,
    rgba(1, 80, 90, 0.7) 100%) ; color:#000; border-bottom-right-radius: 12px;}
 .main-nav1 li a, .burger-nav .mainlinks a, .burger-nav .othlinks a, .mini-nav a {background-color: #00FFFF;
	  background-image: linear-gradient(
    to bottom right,
    #94f3ee 5%,
    #00FFFF 30%,
    rgb(0, 200, 200) 100%);
     color:#000;}
.BigPinkButton, a.BigPinkButton:hover, .main-nav1 li a:hover, .main-nav1 li a.active, .burger-nav .mainlinks a:hover, .burger-nav .othlinks a:hover, .mini-nav a:hover, .button, input[type="submit"], input[type="button"] {
    background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 1.0) 0%,
    #cc6ba7 25%,
    #bb3c8a 55%,
    #FF38B4 100% ); }
  .BigSilverButton {
    background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 1.0) 0%,
    #e3e3e3 25%,
    #b0b0b0 55%,
    #808080 100% );
    border:1px solid #fff;
  }

  a.button.disabled, a.button.disabled:hover {pointer-events: none; cursor: pointer; background: linear-gradient(
    to bottom right,
    rgb(145, 145, 145) 0%,
    #707070 25%,
    #5e5e5e 55%,
    #414141 100% );}

  a.BigSilverButton:hover {background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 50%, #cccccc 100%);}

.main-nav1 li a.active:hover{box-shadow: 0 0 0px #fafaf9, 0 0 0px #fafaf9; pointer-events: none; cursor: pointer;}

a.BigPinkButton:hover, .main-nav1 li a:hover,  .burger-nav .mainlinks a:hover, .burger-nav .othlinks a:hover, .mini-nav a:hover, a.BigSilverButton:hover, a.button:hover, input[type="submit"]:hover, input[type="button"]:hover{box-shadow: 0px 1px 4px -2px #333;
    box-shadow: 0 0 20px #fafaf9, 0 0 10px #fafaf9;}
.main-nav1 li a.active {color: #fff; text-shadow: -1px -1px #000; }
a.BigPinkButton:hover, .main-nav1 li a:hover,  .burger-nav .mainlinks a:hover, .burger-nav .othlinks a:hover, .mini-nav a:hover, .BigPinkButton, a.button:hover, input[type="submit"], input[type="button"] {text-shadow: -1px -1px #000;}
a.button {box-shadow:-7px 7px 6px rgba(32,5,58,0.3), rgba(32,5,58,0.3) -7px 7px 15px;}
a.BigPinkButton:hover, .main-nav1 li a:hover,  .burger-nav .mainlinks a:hover, .burger-nav .othlinks a:hover, .mini-nav a:hover, a.button:hover, a.button, input[type="submit"], input[type="button"] {color: #fff; }
a.BigSilverButton:hover, .BigSilverButton {color:#1f1f1f;}
a.BigPinkButton:hover svg path, .main-nav1 li a:hover svg path, .main-nav1 li a.active svg path, .mini-nav a:hover svg path{fill:#fff;}
 a.BigSilverButton:hover svg path{fill:#333;}

a.BigPinkButton:after, .main-nav1 li a:after, .burger-nav .othlinks a:after, .burger-nav .mainlinks a:after, .mini-nav a:after, a.BigSilverButton:after
 {background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  content: ''; position: absolute; top: 2px; left: 2px;	width: calc(100% - 4px); height: 50%;}
.burger-nav .othlinks a:after, .burger-nav .mainlinks a:after
{border-top-right-radius: 12px;border-top-left-radius: 12px;}
a.BigPinkButton:after, a.BigSilverButton:after
{border-top-right-radius: 50px;border-top-left-radius: 50px;}

.BigPinkButton, .BigSilverButton, a.button, input[type="submit"], input[type="button"] {display: flex; flex-direction: column; align-items: center; justify-content: center;
   pointer-events: auto; overflow: hidden;
  min-width: 90%;max-width: 100%;
  padding: 15px 20px; margin: 20px auto;
  font-weight: 700;letter-spacing: 0.05em; font-size: 1.3em;
  text-align: center; text-shadow: none; border-radius: 50px;
  cursor: pointer; transition: all 0.3s ease-in-out;
  /** OVERRIDES FOR BUTTON AND INPUT  ***/
appearance: none;
    -webkit-appearance: none;
    border: none;
    font-family: inherit; }

.BigPinkButton, a.button {text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);}
.BigPinkButton{color: #fff; }
.BigSilverButton {box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8);}

a.BigPinkButton:hover, a.BigSilverButton:hover, a.button:hover {transform: translateY(-2px) scale(1.1);}

.tech-stack {display: flex; flex-wrap: wrap; gap: 10px; padding: 5px 0 10px 0;}
.tech-stack span {font-size: 0.8rem;color: #00ffff; border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 5px 10px;border-radius: 20px; background: rgba(0, 255, 255, 0.05);}
.card-body {padding-top:20px; border-top: 1px solid #ccc; margin-top:20px; }
.card-header {display: flex; grid-gap:5px; max-height: 65px; min-height: 65px;}
.card-header {align-items: center;}
.card-header h3 {margin-bottom: 0;}
.cardicon {height:50px;}


.dotdesc p {padding-left: 34px;margin-bottom: 20px;}
.dottext {display: flex; grid-gap:8px; align-items: center;margin-bottom: 5px;}
.tick {height:15px;}
.stripe {display: flex; align-items: center; justify-content: end; grid-gap:8px; padding-right: 10px;}
.stripe img {height:25px;}

.faq-item { border-bottom: 1px solid #C73FAD;}
.faq-item:last-child { border-bottom: none;}
.faq-question { padding: 20px 0;width: 100%;   cursor: pointer; font-size: 1em;  outline: none; display: flex; justify-content: space-between;    align-items: center;}
.faq-question.active::after {transform: rotate(180deg);}
.faq-question:focus-visible {outline: 2px solid #01F49F; outline-offset: 2px;}
.faq-answer {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out;}
.faq-answer p { margin-bottom: 15px;}
ol  {padding-left: 30px; margin-bottom:20px;}
.faq-answer li {padding-bottom: 15px;}
.faq-answer.active {padding-top: 10px; padding-bottom: 40px;}
.faq-question .dot {transition: transform 0.3s ease-out; transform: rotate(0deg);}
.faq-question.active .dot { transform: rotate(180deg);}


.alert-box-wrapper {display: flex; align-items: center;gap: 30px; background: linear-gradient(to right, rgba(20, 10, 0, 0.9), rgba(0, 0, 0, 0.9));
    border: 2px solid #ffaa00; box-shadow: 0 0 15px rgba(255, 170, 0, 0.2); border-radius: 12px;
    padding: 30px;margin-bottom: 80px; position: relative;}
.alert-icon {font-size: 3rem; font-weight: 900;font-family: monospace; color: #000; background: #ffaa00; width: 60px; height: 60px;
    border-radius: 8px; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 0 20px rgba(255, 170, 0, 0.6); flex-shrink: 0;}
.alert-content h3 {color: #ffaa00; margin-bottom: 10px;text-transform: uppercase;letter-spacing: 1px;font-size: 1.2rem;}
.alert-content p {color: #ffffff; line-height: 1.6;font-size: 1rem;}
.highlight-amber {color: #ffcc00;}
.alert-btn {margin-left: auto;background: transparent;color: #ffaa00;
    border: 1px solid #ffaa00;text-decoration: none;padding: 12px 30px; border-radius: 50px;font-weight: bold;
    text-transform: uppercase;font-size: 0.9rem; transition: all 0.2s ease; white-space: nowrap;}
.alert-btn:hover { background: #ffaa00; color: #000; box-shadow: 0 0 20px rgba(255, 170, 0, 0.6);}





.hero,.clouds, .clouds2, .slider, .spark, .spark3, .spark-pos1, .spark-pos2, .spark-pos3,.dots-container, .slide.cloudico img {pointer-events: none;}


.clouds, .clouds2, .clouds3 {  animation-name: cloudDrift; background-repeat: no-repeat;
animation-timing-function: linear;
animation-direction: alternate;


animation-iteration-count: infinite;background-position: right 0px bottom 0px; }



.hero {margin-top: 0px; text-align: center;}

.clouds2 {
  background-size: cover;
  position: absolute;
  transform: scaleX(-1);
animation-duration: 80s;
  top: 0; left: 0; width: 100%; height:100%;
  }

.clouds {background-repeat: no-repeat;
  background-size: cover;
 top:0;
animation-duration: 150s;
}
  .clouds3 {position: absolute; background-repeat: no-repeat;
  background-size: cover;
  transform: scale(-1, -1);
animation-duration: 180s;
  top: -1px; left: 0; width: 100%;height: 700px;}

.fancyborder, .videoborder {background: linear-gradient(135deg, #00FFFF, #FF38B4); padding:2px 2px 3px 2px; border-radius: 16px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255, 56, 180, 0.15); }

.videoborder .fancyinner {padding: 12px 25px 25px 25px;}
.fancyinner { padding:15px;
    position: relative; border: 2px solid transparent; background-clip: padding-box;
    border-radius: 16px; height:100%;}
.fancyinner .card-body { display: flex; flex-direction: column; justify-content: space-between; }
    .fancyinner.middle {text-align: center; place-items: center;}
.fancyinner:hover {box-shadow: 0 10px 30px rgba(255,56,180,0.9),  0 10px 30px rgba(255,56,180,0.9); }
.videoborder .fancyinner:hover  {box-shadow: 0 10px 30px rgba(255,56,180,0.0),  0 10px 30px rgba(255,56,180,0.0);}


.fancyinner, .fancyborder{transition: transform 0.3s ease, box-shadow 0.3s ease;}
.fancyborder:hover{transform: translateY(-5px);}


.threecols, .twocols {display:grid; grid-auto-columns: auto;  grid-template-columns: 1fr; justify-content: space-between; margin-bottom: 30px;}
.padded {margin-top: 70px;}
.threecols {grid-gap:20px;}
.twocols {grid-gap:30px;}
main, .main.container, .logo, .main-nav1 li a, .mini-nav a, .cart, .burger-nav .mainlinks a, .burger-nav .othlinks a, .spark, .hero, .clouds, .BigPinkButton, .BigSilverButton, body, header .top {position: relative;}

.slider { width: 95vw; display: grid; place-items: center; }
.slider.clients {overflow: hidden;}
.slide-track {display: flex;}
.slide {height: 80px; place-items: center; transition: 0.5s; width: max-content;}
.slide.cloudico img {filter: drop-shadow(0px 0px 7px #ffffff) drop-shadow(0px 0px 4px #ffffff);}
.slide-track {display: flex; animation-name: scroll; animation-timing-function: linear; animation-iteration-count: infinite;}
.slider.clients .slide-track { gap:30px; animation-duration: 40s;}
.slider.cloudicos {position:absolute;}
.slider.cloudicos .slide-track{ gap: 50px; animation-duration: 120s;}

.slider:hover .slide-track {animation-play-state: paused;}

.logo {display: inline-block;}
.logo-img {width:auto; display: block; filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.9))
            drop-shadow(0px 0px 10px rgba(25, 15, 109, 0.7));}
.box-logo-img {width:200px; }
.box-logo-img1 {width:180px; }
.top {padding:65px 20px 20px 20px;}
.top .logo {margin-left: auto; margin-right: auto;}

.spark {left:90% !important;}

/********************* NAV ******************/
.mini-nav { transition: all 0.5s ease; position: fixed;}
.mini-nav, .main-nav1{backdrop-filter: blur(10px); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;  padding: 0 10px 10px 10px;}
.burger-nav.active {right: 0; opacity: 1; visibility: visible; }
.burger-nav {width: 100%; right: -100vw;padding: 18px 20px;
      position: fixed !important; top: 0;  height: 100%;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); border-left: 2px solid #FF38B4;
      flex-direction: column; justify-content: flex-start; align-items: stretch;
      grid-template-columns: none !important; grid-column-gap: 0; justify-self: stretch;
      transition: right 0.6s ease 0.5s, opacity 0.6s ease 0.5s, visibility 0.6s ease 0.5s; opacity: 0;
    box-shadow:-7px 7px 6px rgba(32,5,58,0.3), rgba(32,5,58,0.3) -7px 7px 15px;}
.burger-header .logo-img {height:50px; }
.burger-header {margin-top: 30px;}
.burger-nav .Attention {position: absolute; right:10px; top:12px;}
.burger-nav .logo {height: 40px; margin:0 0 20px 0; display: block;}
.burger-nav .close-menu-btn {position: absolute; top: 20px; right: 20px; cursor: pointer;}
.burger-nav{background: linear-gradient(90deg, #090017, #4756C1);}
.burger-nav .mainlinks a, .burger-nav .othlinks a {
  margin: 0 0 15px 0; padding: 15px 20px; font-size: 1.2em; display: flex; align-items: center; justify-content: center;
border-radius: 15px;}
.burger-nav .mainlinks {border-bottom: 1px solid #FF38B4; padding: 0 0 20px 0; margin: 30px 0 20px 0; }
.burger-nav .mainlinks a:last-child {margin-bottom: 0;}

.main-nav1 ul, .mini-nav {display: flex; overflow: visible; grid-gap: 4px;  border-bottom-left-radius: 13px;border-bottom-right-radius: 13px; }
.main-nav1 ul, .mini-nav a {box-shadow: 7px 7px 5px rgba(32,5,58,0.3);}
.main-nav1 li:first-child > a, .mini-nav a:first-child {border-bottom-left-radius: 13px;}
.main-nav1 li:last-child > a, .mini-nav a:last-child  {border-bottom-right-radius: 13px;}
.main-nav1 li a, .mini-nav a {
display: flex; align-items: center; justify-content: space-between;min-width: max-content; grid-gap: 10px; transition: all 0.6s ease; font-size: 0.9em; font-weight: 600; height: 40px;
padding: 0 20px;}
 .Attention {position: absolute; right:5px; height:30px; width: 30px;}


 /********************* FOOTER ******************/
#bottom, .fancyinner {background: linear-gradient(to bottom, #090017, #202d8a);}
.separator, .topborder{border-top: 1px solid #FF38B4;  padding: 5px 0;}

.topborder.links a {display: block; width: 100%; text-align: center;}


a.circled {border: 1px solid #FF38B4; border-radius: 50%; padding: 3px; display: grid; place-items: center; width:40px; height:40px;}
a.circled svg {width:20px; height:20px;}
a.circled:hover, a.butt:hover {background:  rgba(255,56,180,0.9) ; filter: drop-shadow(0px 0px 7px #ffffff);}
a.circled:hover svg path {fill:#fff;}
.cyan {color:#00FFFF;}
.left:has(.phone) {max-width:100%; min-width:100%; text-align: center;}
.builtby {height:30px;}

.phone {font-weight: 500; font-size: 1.2em; }
#bottom .flex {grid-gap:20px; align-items: center; }
#bottom p {margin:0;}
#bottom .textright {text-align: center; align-content:center; justify-items: center;}
#bottom .right, #bottom .right .topborder {min-width: 100%; justify-content: center;}
.padtop{padding-top: 20px;}
.padbot{padding-bottom: 10px;}
a.butt {border: 1px solid #FF38B4; border-radius: 12px; padding:10px 30px; width: 180px; display: block; text-align: center; margin-top: 20px;}
a.butt:hover {color: #fff;}
.links a.butt {width:100%;}
.links a{width:180px; margin-left: auto; margin-right: auto;}
#bottom .dots-container {min-height: max-content !important;}
#bottom .dot-one {width: 3px; height: 3px;}
#bottom .dot-two {width: 6px; height: 6px; }
#bottom .dot-three {width: 9px; height: 9px; }

#bottom .container {grid-row-gap:30px;}
#bottom .spark2 {width: 50px; top: -50px; left: 121px;}
.spark2 {display: block; position: relative; animation: sparkle-pulse 11s infinite ease-in-out;}
#bottom .right {position: relative; }
.cutoff {height:40px; }









@media (min-width: 2300px)
{
.hero.home .clouds, .hero.home .clouds2 {background-size: 100% 100%;}
}


@media (min-width: 1999px)
{
 .videoborder {width:50% !important;}
.clouds {
  animation-duration: 12s !important;}
  .clouds3 {
  animation-duration: 35s !important;}
}



@media (min-width: 1400px)
{
  .threecols, .twocols {grid-gap:40px !important;}
  .container, .sparkcontainer {width: 70% !important;}
  .container  { padding: 60px 60px; }
  .top {padding:60px 150px 30px 150px !important;}
  .main-nav1 {right: 150px !important; }
  .hero .container, .lesscontain {width: 60% !important;}
  .lesscontain
  .videoborder {width:65%;}
.clouds {
  animation-duration: 50s;}
  .clouds3 {
  animation-duration: 45s;}
}

@media (min-width: 1023px)
{.linebreaker {display: inline;}
.breaker {display: none;}
 .threecols {display:grid; grid-gap:30px; grid-template-columns: 1fr 1fr 1fr !important;}
  .twocols {display:grid; grid-gap:30px; grid-template-columns: 1fr 1fr !important;}

       .hero.home, .hero.short, .hero.short .clouds,.clouds { min-height: 500px; height: 500px;}
}

@media (min-width: 901px)
{
  .massive, .masslight {font-size: 3.5em;}

  .top {padding: 20px 40px;}
  .container {width:90%; padding: 40px 40px;}
  .hero .container, .lesscontain {width: 65%;}

  .burger-nav, .nav-header .logo, .mini-nav {display: none!important; visibility: hidden;}
  nav {display: grid; justify-content: right;}
  .main-nav1 {display: flex;}

  .container {width:90%;}
  .spark3 {top: -21px; left: 50px;}
  .logo-img {height:80px !important;}
  .top {padding: 50px 55px 20px 40px;}

  .main-nav1 { transition: all 0.5s ease; position: fixed; top:0; right:40px;}
  .main-nav1 ul, .main-nav1 li {list-style-type: none; margin: 0; padding: 0;}

   .videoborder {width:80%; margin-right: auto; margin-left: auto;}
   .dotdesc p {padding-left: 33px !important;}
   .clouds {background-image: url("/static/images//brand/cloudsv2.avif");}
.clouds2 {background-image: url("/static/images//brand/cloudsv2.avif");}
.clouds3 {background-image: url("/static/images//brand/cloudsv2.avif");}

}

@media (max-width: 768px) {
    .alert-box-wrapper {flex-direction: column; text-align: center; gap: 20px;}
    .alert-btn {margin-left: 0; width: 100%;text-align: center;}
}

@media (min-width: 600px)
{
#bottom .container { display: grid; grid-template-areas: "a a";}
.left:has(.phone) {max-width:180px; min-width:180px; }
#bottom .container {padding:15px 40px; justify-content: space-between;}
.links a{width:180px;}
#bottom .right, #bottom .right .topborder {min-width: 250px; justify-content: end; text-align: right;}
#bottom .textright {text-align: right; align-content:center; justify-items: end;}
.topborder.links a {text-align: right;}
.links a.butt {width:180px;}
.spark2 {display: block;
  width: 55px; position: absolute; top: 3px; left: 105px;}
  #bottom .spark2 {top: -13px; left: 173px;}
  #bottom .separator{margin-top: 25px;}
  .BigPinkButton, .BigSilverButton {
  padding: 15px 50px; min-width: 300px;max-width: 530px; font-size: 1.5em;}
  .sme {max-width: 550px;}

}

@media (min-width: 480px)
{
  .tech-stack {justify-content: center;}

  .linebreakerB {display: none;}
  header .top {grid-template-columns: 1fr auto;}
  .top .logo {margin-left: 0; margin-right: 0;}
  .hero .container, .lesscontain {padding: 40px 40px;}
  .burger-nav {right: -300px; width: 280px; padding: 20px 20px 20px 20px; }
  .burger-nav .mainlinks a, .burger-nav .othlinks a {font-size: 1em;}
  body {font-size: 0.9em;}
  .BigPinkButton, .BigSilverButton {
  min-width: 400px;max-width: 530px;}
  .fancyinner { padding:25px; }
  .stripe img {height:35px;}
  .stripe {padding-right: 20px;}
}