.elementor-20523 .elementor-element.elementor-element-4de6948{--display:flex;--min-height:528px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-20523 .elementor-element.elementor-element-5de84da{width:var( --container-widget-width, 42.774% );max-width:42.774%;--container-widget-width:42.774%;--container-widget-flex-grow:0;}.elementor-20523 .elementor-element.elementor-element-5de84da.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}@media(max-width:1024px){.elementor-20523 .elementor-element.elementor-element-5de84da{width:var( --container-widget-width, 777.25px );max-width:777.25px;--container-widget-width:777.25px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-20523 .elementor-element.elementor-element-5de84da{width:var( --container-widget-width, 395px );max-width:395px;--container-widget-width:395px;--container-widget-flex-grow:0;}}/* Start custom CSS */<style>
.cyberpunk-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #000;
  overflow: hidden;
}

.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.pulse-dots {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pulse-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ff00;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

.energy-beams {
  position: absolute;
  width: 100%;
  height: 100%;
}

.energy-beam {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff00, transparent);
  animation: beamMove 3s linear infinite;
}

@keyframes beamMove {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Audio reactive elements */
.audio-bars {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.audio-bar {
  width: 4px;
  background: linear-gradient(to top, #00ff00, #ff00ff);
  border-radius: 2px 2px 0 0;
  transition: height 0.1s ease;
}

.floating-text {
  position: absolute;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  opacity: 0.7;
  animation: floatText 10s linear infinite;
}

@keyframes floatText {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff00, transparent);
  animation: scan 3s linear infinite;
  box-shadow: 0 0 10px #00ff00;
}

@keyframes scan {
  0% { top: 0%; }
  100% { top: 100%; }
}

.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(255, 0, 255, 0.1) 50%, transparent 50%),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 50%, transparent 50%);
  background-size: 100px 100px, 100px 100px;
  mix-blend-mode: overlay;
  opacity: 0.1;
  animation: glitchShift 5s infinite alternate;
}

@keyframes glitchShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 5px); }
  50% { transform: translate(5px, -5px); }
  75% { transform: translate(-5px, -5px); }
}
/* Cyberpunk styling for Elementor sections */
.elementor-section {
  position: relative;
  overflow: hidden;
}

.cyberpunk-section {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #00ff00;
  box-shadow: 
    0 0 20px rgba(0, 255, 0, 0.3),
    inset 0 0 20px rgba(0, 255, 0, 0.1);
  position: relative;
}

.cyberpunk-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
  animation: sectionScan 3s linear infinite;
}

@keyframes sectionScan {
  0% { left: -100%; }
  100% { left: 100%; }
}

.cyberpunk-header {
  font-family: 'Courier New', monospace;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
  position: relative;
  display: inline-block;
}

.cyberpunk-header::after {
  content: '_';
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cyberpunk-button {
  background: transparent;
  border: 1px solid #00ff00;
  color: #00ff00;
  padding: 12px 24px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cyberpunk-button:hover {
  background: #00ff00;
  color: #000;
  box-shadow: 0 0 20px #00ff00;
  transform: translateY(-2px);
}

.cyberpunk-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent);
  transition: left 0.5s;
}

.cyberpunk-button:hover::before {
  left: 100%;
}

/* Data stream effect for text */
.data-stream {
  position: relative;
  overflow: hidden;
}

.data-stream::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #ff00ff;
  animation: dataGlitch 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

@keyframes dataGlitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}
</style>/* End custom CSS */