.elementor-kit-15{--e-global-color-primary:#4876AF;--e-global-color-secondary:#54595F;--e-global-color-text:#93A5B8;--e-global-color-accent:#7CB6D9;--e-global-color-61c01e98:#0F121A;--e-global-color-7a1ccbe5:#000000;--e-global-color-13ed1179:#FFFFFF;--e-global-color-2ea6b78:#93A5B8;--e-global-typography-primary-font-family:"Quantify";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-letter-spacing:1px;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 button,.elementor-kit-15 input[type="button"],.elementor-kit-15 input[type="submit"],.elementor-kit-15 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-weight:400;color:#0F131A;border-style:none;border-radius:10px 10px 10px 10px;}.elementor-kit-15 button:hover,.elementor-kit-15 button:focus,.elementor-kit-15 input[type="button"]:hover,.elementor-kit-15 input[type="button"]:focus,.elementor-kit-15 input[type="submit"]:hover,.elementor-kit-15 input[type="submit"]:focus,.elementor-kit-15 .elementor-button:hover,.elementor-kit-15 .elementor-button:focus{background-color:var( --e-global-color-accent );color:#0F131A;border-style:none;border-radius:10px 10px 10px 10px;}.elementor-kit-15 e-page-transition{background-color:var( --e-global-color-61c01e98 );}.elementor-kit-15 a{font-family:"Poppins", Sans-serif;}.elementor-kit-15 h1{font-family:"Quantify", Sans-serif;letter-spacing:4px;}.elementor-kit-15 h2{font-family:"Quantify", Sans-serif;letter-spacing:4px;}.elementor-kit-15 h3{font-family:"Quantify", Sans-serif;letter-spacing:4px;}.elementor-kit-15 h4{font-family:"Quantify", Sans-serif;letter-spacing:4px;}.elementor-kit-15 h5{font-family:"Poppins", Sans-serif;}.elementor-kit-15 h6{font-family:"Poppins", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1279px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-15 h1{font-size:22px;}.elementor-kit-15 h2{font-size:20px;}.elementor-kit-15 h3{font-size:18px;}.elementor-kit-15 h4{font-size:18px;}.elementor-kit-15 h5{font-size:18px;}.elementor-kit-15 h6{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Your starfield section */
.spacefield{
  --bg:#0b1118;
  --purple:#ab60d8;
  --blue:#70bbfe;
  --haze1: rgba(112,187,254,.18);
  --haze2: rgba(172,95,216,.12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 600px at 60% 55%, var(--haze1), transparent 60%),
    radial-gradient(900px 500px at 40% 45%, var(--haze2), transparent 60%),
    var(--bg);
}

/* Stars */
.spacefield:before,
.spacefield:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background-repeat:no-repeat;
}
.spacefield:before{
  background-image:
    radial-gradient(1px 1px at 5% 8%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 18% 72%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 92% 22%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 22% 58%, #fff 60%, transparent 61%),
    radial-gradient(1.8px 1.8px at 44% 38%, #fff 60%, transparent 61%);
  background-size: 400% 400%;
  animation: starDrift 60s linear infinite, starTwinkle 6s steps(60,end) infinite;
  opacity:.9;
}
.spacefield:after{
  background-image:
    radial-gradient(7px 7px at 22% 12%, var(--purple) 60%, transparent 61%),
    radial-gradient(6px 6px at 68% 40%, var(--blue) 60%, transparent 61%);
  background-size: 200% 200%;
  animation: driftDots 40s linear infinite, dotsPulse 6s ease-in-out infinite;
}

/* --- the blend to the next section --- */
.spacefield.blend-bottom::marker,
.spacefield.blend-bottom:after{ /* keep the dots, but we’ll add a new overlay below */
}
.spacefield.blend-bottom::before{ /* leave stars as-is */ }

/* add one more pseudo just for the fade (Elementor allows it via custom CSS) */
.spacefield.blend-bottom > .elementor-container::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:160px;                  /* tweak height */
  z-index:1;                     /* above stars, below your content */
  pointer-events:none;
  background: linear-gradient(to bottom,
      rgba(11,17,24,0) 0%,
      rgba(11,17,24,.75) 60%,
      var(--below-bg) 100%);
}

/* Section after: make sure its bg matches the fade end */
.section-after{
  background: var(--below-bg);
}

/* Titles helper (optional) */
.title-section{ display:grid; place-items:center; gap:1rem; padding:clamp(64px,10vw,144px) 16px 96px; text-align:center; position:relative; z-index:2; }
.title-section h1{ font-size:clamp(36px,4.5vw,64px); line-height:1.1; }
.title-section p{ max-width:960px; margin:0 auto; font-size:clamp(16px,1.4vw,22px); opacity:.9; }

/* Animations you already had */
@keyframes starDrift { 0%{background-position:0% 0%} 100%{background-position:100% 100%} }
@keyframes starTwinkle { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes driftDots { 0%{background-position:0% 0%} 100%{background-position:120% 120%} }
@keyframes dotsPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }



/* Animated Gradient Title Effect */
.title-animate {
  background: linear-gradient(
    90deg,
    #70BBFE 0%,
    #EDF5FC 30%,
    #AC5FD8 65%,
    #AB60D8 100%
  );
  background-size: 300% auto;   /* oversized gradient so it can move */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;

  animation: titleGradientMove 8s ease-in-out infinite;
}

/* Keyframes for smooth continuous shimmer */
@keyframes titleGradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/* Float animation */
.float {
  animation: floatUpDown 6s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px); /* adjust distance */
  }
}

/* Make the starfield fade into whatever is underneath */
.spacefield.blend-any{
  position: relative;
  z-index: 2;                 /* sit above the next section */
  overflow: visible !important;

  /* pull this section over the next one so the fade happens "on top" */
  margin-bottom: -120px;      /* overlap amount (tweak) */
  padding-bottom: 120px;      /* keep layout spacing the same */

  /* universal dissolve: no need to know the next section's color */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* keep Elementor sections stackable */
.elementor-section{ position: relative; }

/* Fallback for very old browsers that don't support mask-image */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000))){
  .spacefield.blend-any{
    /* remove the mask, use a soft overlay that extends over the next section */
  }
  .spacefield.blend-any > .elementor-container::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-120px; height:200px;
    pointer-events:none; z-index:1;
    /* fade from transparent to the starfield base; it will sit on top
       of the next section so it still looks blended */
    background: linear-gradient(to bottom,
      rgba(11,17,24,0) 0%,
      rgba(11,17,24,.75) 55%,
      rgba(11,17,24,1) 100%);
  }
}

/* Container sets perspective-free, masked stack */
.elementor-nav-menu--main .elementor-nav-menu a.elementor-item .swap-ticker{
  display: inline-flex;
  flex-direction: column;
  line-height: 1;          /* keeps both lines perfectly tight */
  height: 1em;             /* mask height = one line */
  overflow: hidden; 
  transition: transform .26s ease;
  will-change: transform;  /* smooth on hover */
}

/* On hover, slide the stack up by exactly one line */
.elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover .swap-ticker{
  transform: translateY(-1em);
}

/* Optional polish: fade the non-visible line slightly */
.elementor-nav-menu--main .elementor-nav-menu a.elementor-item .line{
  display: inline-block;
  padding-bottom: .04em; /* micro spacing to avoid clip artifacts */
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Quantify';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://inspace.agency/wp-content/uploads/2025/02/Quantify.ttf') format('truetype');
}
/* End Custom Fonts CSS */