.elementor-3221 .elementor-element.elementor-element-7ae9bf4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3221 .elementor-element.elementor-element-ff76b1b{--display:flex;}/* Start custom CSS for html, class: .elementor-element-a804e0a */.banner {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: #020408;
  display: flex;
  align-items: center;
  justify-content: center;
}

.base-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #0a1520 0%, #020408 100%);
  z-index: 1;
}

/* Container for animated flows */
.gradient-flows {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Cyan flow from top-left */
.flow-cyan {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ellipse 100% 100% at 30% 20%, 
    rgba(0, 200, 255, 0.9) 0%, 
    rgba(0, 150, 200, 0.5) 30%,
    rgba(0, 100, 150, 0.2) 50%,
    transparent 70%
  );
  filter: blur(60px);
  animation: floatCyan 15s infinite ease-in-out;
  mix-blend-mode: screen;
}

/* Red flow from bottom-right */
.flow-red {
  position: absolute;
  bottom: -30%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ellipse 100% 100% at 70% 80%, 
    rgba(255, 50, 80, 0.9) 0%, 
    rgba(200, 30, 60, 0.5) 30%,
    rgba(150, 20, 40, 0.2) 50%,
    transparent 70%
  );
  filter: blur(60px);
  animation: floatRed 18s infinite ease-in-out;
  mix-blend-mode: screen;
}

@keyframes floatCyan {
  0%, 100% { 
    transform: translate(0, 0) scale(1) rotate(0deg); 
    opacity: 0.8;
  }
  33% { 
    transform: translate(10%, 15%) scale(1.1) rotate(5deg); 
    opacity: 1;
  }
  66% { 
    transform: translate(-5%, 20%) scale(0.95) rotate(-3deg); 
    opacity: 0.9;
  }
}

@keyframes floatRed {
  0%, 100% { 
    transform: translate(0, 0) scale(1) rotate(0deg); 
    opacity: 0.8;
  }
  33% { 
    transform: translate(-10%, -15%) scale(1.1) rotate(-5deg); 
    opacity: 1;
  }
  66% { 
    transform: translate(5%, -20%) scale(0.95) rotate(3deg); 
    opacity: 0.9;
  }
}

/* Mouse repel - creates transparent clearing */
.repel-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  
  /* Dark overlay that gets transparent at mouse */
  background: radial-gradient(
    circle 200px at var(--mx, 50%) var(--my, 50%),
    rgba(2, 4, 8, 0) 0%,
    rgba(2, 4, 8, 0.1) 30%,
    rgba(2, 4, 8, 0.6) 60%,
    rgba(2, 4, 8, 0.9) 100%
  );
  
  transition: background 0.15s ease-out;
}

.content {
  position: relative;
  z-index: 10;
  color: #ffffff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  padding: 0 40px;
}

.content h1 {
  font-size: 3.5rem;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}/* End custom CSS */