/* Retro Slider Styles */
.hero-slider {
  width: 100%;
  margin: 0 auto 30px auto; /* Remove top margin, keep bottom margin for spacing */
  max-width: 960px; /* Match main content max-width */
  overflow: hidden;
  position: relative;
  border: 4px solid #3a3a3a;
  border-top: none; /* Remove top border to connect with slogan header */
  box-shadow: 4px 4px 0px #000000;
  height: 550px; /* Fixed height for the slider */
  box-sizing: border-box; /* Include border in width calculation */
}

.swiper-slide {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* First slide with synthwave theme (based on attached image) */
.slide-first {
  background-color: #160440;
  position: relative;
}

.slide-first:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(27, 3, 51, 0.9) 0%, 
    rgba(27, 3, 51, 0.5) 30%, 
    rgba(27, 3, 51, 0) 60%);
  z-index: 1;
  animation: gradientShift 8s ease infinite alternate;
}

@keyframes gradientShift {
  0% {
    background: linear-gradient(90deg, 
      rgba(27, 3, 51, 0.9) 0%, 
      rgba(27, 3, 51, 0.5) 30%, 
      rgba(27, 3, 51, 0) 60%);
  }
  50% {
    background: linear-gradient(90deg, 
      rgba(35, 5, 65, 0.9) 0%, 
      rgba(35, 5, 65, 0.5) 30%, 
      rgba(35, 5, 65, 0) 60%);
  }
  100% {
    background: linear-gradient(90deg, 
      rgba(20, 2, 40, 0.9) 0%, 
      rgba(20, 2, 40, 0.5) 30%, 
      rgba(20, 2, 40, 0) 60%);
  }
}

/* Horizontal neon lines */
.slide-first .horizon-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0deg, 
      transparent 0%, transparent 70%, 
      rgba(162, 0, 255, 0.1) 70%, rgba(162, 0, 255, 0.1) 71%,
      transparent 71%, transparent 74%,
      rgba(162, 0, 255, 0.1) 74%, rgba(162, 0, 255, 0.1) 75%,
      transparent 75%, transparent 79%,
      rgba(162, 0, 255, 0.1) 79%, rgba(162, 0, 255, 0.1) 80%,
      transparent 80%, transparent 100%
    );
  z-index: 1;
  pointer-events: none;
  animation: horizonPulse 3s ease-in-out infinite;
}

@keyframes horizonPulse {
  0%, 100% {
    opacity: 0.3;
    background-image: 
      linear-gradient(0deg, 
        transparent 0%, transparent 70%, 
        rgba(162, 0, 255, 0.1) 70%, rgba(162, 0, 255, 0.1) 71%,
        transparent 71%, transparent 74%,
        rgba(162, 0, 255, 0.1) 74%, rgba(162, 0, 255, 0.1) 75%,
        transparent 75%, transparent 79%,
        rgba(162, 0, 255, 0.1) 79%, rgba(162, 0, 255, 0.1) 80%,
        transparent 80%, transparent 100%
      );
  }
  50% {
    opacity: 0.7;
    background-image: 
      linear-gradient(0deg, 
        transparent 0%, transparent 70%, 
        rgba(162, 0, 255, 0.2) 70%, rgba(162, 0, 255, 0.2) 71%,
        transparent 71%, transparent 74%,
        rgba(162, 0, 255, 0.2) 74%, rgba(162, 0, 255, 0.2) 75%,
        transparent 75%, transparent 79%,
        rgba(162, 0, 255, 0.2) 79%, rgba(162, 0, 255, 0.2) 80%,
        transparent 80%, transparent 100%
      );
  }
}

/* Moving stars effect */
.slide-first:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 3px),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 2px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 3px);
  background-size: 550px 550px, 350px 350px, 250px 250px;
  background-position: 0 0, 40px 60px, 130px 270px;
  z-index: 1;
  opacity: 0.2;
  animation: starsMove 60s linear infinite;
}

@keyframes starsMove {
  from {
    background-position: 0 0, 40px 60px, 130px 270px;
  }
  to {
    background-position: 550px 550px, 390px 410px, 380px 520px;
  }
}

/* Mountain silhouettes */
.slide-first .mountains {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 0;
  width: 100%;
  height: 10%;
  background-image: 
    linear-gradient(180deg, transparent 0%, transparent 50%, #160440 50%, #160440 100%),
    linear-gradient(210deg, transparent 0%, transparent 80%, #160440 80%, #160440 100%),
    linear-gradient(150deg, transparent 0%, transparent 70%, #160440 70%, #160440 100%);
  z-index: 2;
  animation: mountainParallax 20s ease-in-out infinite alternate;
}

@keyframes mountainParallax {
  0% {
    transform: translateX(0) scale(1);
  }
  100% {
    transform: translateX(-20px) scale(1.05);
  }
}

/* Animated grid */
.slide-first .retro-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: 
    linear-gradient(0deg, rgba(255, 103, 231, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 103, 231, 0.3) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center bottom;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  z-index: 2;
  animation: gridFlow 10s linear infinite;
}

@keyframes gridFlow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}

.slide-first .slide-content {
  position: absolute;
  width: 50%;
  padding: 25px;
  margin-left: 0;
  color: #ffffff;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 103, 231, 0.2);
  backdrop-filter: blur(5px);
  bottom: 40px;
  left: 40px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
    border-color: rgba(255, 103, 231, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
    border-color: rgba(255, 103, 231, 0.4);
  }
}

.slide-first .slide-title {
  font-family: 'Orbitron', cursive;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #ff71e3;
  letter-spacing: 3px;
  text-shadow: 
    0 0 10px rgba(255, 0, 255, 0.8),
    3px 3px 0 #39e6e0,
    -3px -3px 0 #ff00ff;
  animation: neonFlicker 5s linear infinite;
}

.slide-first .slide-text {
  font-family: 'Orbitron', cursive;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #5affef;
  letter-spacing: 1px;
  text-shadow: 
    0 0 8px rgba(0, 255, 255, 0.8),
    2px 2px 0 #005555;
  animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonFlicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(255, 0, 255, 0.8),
      3px 3px 0 #39e6e0,
      -3px -3px 0 #ff00ff;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.8;
    text-shadow: 
      0 0 5px rgba(255, 0, 255, 0.5),
      2px 2px 0 rgba(57, 230, 224, 0.7),
      -2px -2px 0 rgba(255, 0, 255, 0.7);
  }
}

@keyframes neonPulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 8px rgba(0, 255, 255, 0.8),
      2px 2px 0 #005555;
  }
  50% {
    opacity: 0.9;
    text-shadow: 
      0 0 14px rgba(0, 255, 255, 1),
      2px 2px 0 #005555;
  }
}

/* Tech support slide styles */
.slide-tech {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 
    0 0 40px rgba(0, 100, 200, 0.7),
    inset 0 0 100px rgba(0, 0, 0, 0.9);
  border: none;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none !important; /* Override background image loading */
}

.slide-tech .tv-screen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  /* Apply border-radius to create subtle CRT curvature */
  border-radius: 20px / 15px;
  /* Apply shadow to enhance the depth */
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.slide-tech .tv-screen-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.1s linear;
  transform-origin: center center;
  /* Apply subtle vignette */
  mask-image: radial-gradient(ellipse at center, black 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 80%, transparent 100%);
  /* Reduce contrast and adjust other properties for a more authentic CRT look */
  filter: contrast(0.85) brightness(1.05) saturate(0.9);
}

/* CRT collapse animation class */
.tv-screen-collapse {
  animation: crtCollapse 0.3s cubic-bezier(0.2, 0, 0.1, 1) forwards !important;
}

/* CRT expand animation class */
.tv-screen-expand {
  animation: crtExpand 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards !important;
}

@keyframes crtCollapse {
  0% {
    transform: scaleX(1);
    filter: brightness(1.05) contrast(0.85) saturate(0.9);
    opacity: 1;
  }
  20% {
    transform: scaleX(0.9) scaleY(0.95);
    filter: brightness(1.2) contrast(0.85) saturate(1.1);
    opacity: 0.9;
  }
  60% {
    transform: scaleX(0.2) scaleY(0.8);
    filter: brightness(0.8) contrast(0.85) saturate(0.5) blur(1px);
    opacity: 0.6;
  }
  100% {
    transform: scaleX(0.05) scaleY(0.5);
    filter: brightness(0.1) contrast(0.85) saturate(0) blur(2px);
    opacity: 0;
  }
}

@keyframes crtExpand {
  0% {
    transform: scaleX(0.05) scaleY(0.5);
    filter: brightness(0.1) contrast(0.85) saturate(0) blur(2px);
    opacity: 0;
  }
  50% {
    transform: scaleX(0.5) scaleY(0.9);
    filter: brightness(0.8) contrast(0.85) saturate(0.7) blur(1px);
    opacity: 0.7;
  }
  80% {
    transform: scaleX(1.05) scaleY(1.02);
    filter: brightness(1.2) contrast(0.85) saturate(1.1) blur(0.5px);
    opacity: 0.9;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    filter: brightness(1.05) contrast(0.85) saturate(0.9);
    opacity: 1;
  }
}

/* Add horizontal scanlines */
.slide-tech:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 2px,
    rgba(255, 255, 255, 0.08) 3px,
    rgba(255, 255, 255, 0) 4px
  );
  background-size: 100% 5px;
  z-index: 16;
  pointer-events: none;
  animation: horizontalScanMove 20s linear infinite;
}

/* Add RGB color shift effect */
.slide-tech .rgb-shift {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03) 0%,
    rgba(0, 255, 0, 0.03) 50%,
    rgba(0, 0, 255, 0.03) 100%
  );
  mix-blend-mode: screen;
  z-index: 7;
  opacity: 1;
  pointer-events: none;
  animation: rgbShift 10s ease-in-out infinite alternate;
}

@keyframes rgbShift {
  0% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(5px);
  }
}

@keyframes horizontalScanMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* CRT screen curvature and border */
.slide-tech:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  box-shadow: 
    inset 0 0 30px rgba(0, 150, 255, 0.3),
    0 0 30px rgba(0, 150, 255, 0.1),
    inset 0 0 80px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
  pointer-events: none;
  border-radius: 0;
  z-index: 15; /* Ensure it appears above content but below the black overlay */
  background: transparent;
}

/* Radial screen gradient to simulate CRT curvature and vignette */
.slide-tech .crt-curvature {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 50%, 
    rgba(0, 0, 0, 0.3) 80%, 
    rgba(0, 0, 0, 0.5) 90%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 1;
  pointer-events: none;
  z-index: 4;
  border-radius: 0;
}

/* Enhanced CRT lens effect with pincushion distortion */
.slide-tech .crt-lens {
  z-index: 5; /* Make sure it's above the image */
  border-radius: 20px / 15px; /* Match the screen container */
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(0, 150, 200, 0.1);
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: overlay;
}

/* TV scanlines - make them more visible and curved */
.slide-tech .circuit-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(255, 255, 255, 0.05) 1px,
    rgba(255, 255, 255, 0.05) 2px
  );
  background-size: 100% 3px;
  z-index: 4;
  opacity: 1;
  pointer-events: none;
  border-radius: 0;
  transform: scale(1.05);
}

/* TV static noise */
.slide-tech .server-racks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  z-index: 3; /* Make sure they're above the image */
  opacity: 0.1;
  mix-blend-mode: screen; /* Better blending with the image */
  animation: tvStaticOpacity 0.1s steps(2, end) infinite;
  pointer-events: none;
  border-radius: 0;
}

@keyframes tvStaticOpacity {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.15;
  }
}

/* Screen flicker and shutdown effect */
.slide-tech .digital-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.02);
  z-index: 4;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Brightness flicker */
.slide-tech .server-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
}

/* TV horizontal distortion */
.slide-tech .tv-distortion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 0, 0, 0.1) 30%,
    rgba(0, 255, 0, 0.1) 50%,
    rgba(0, 0, 255, 0.1) 70%,
    transparent 100%
  );
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 0;
}

/* TV off effect - black screen */
.slide-tech .tv-off {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0;
  z-index: 15; /* Changed from 10 to 15 to ensure it's above all screen effects */
  pointer-events: none;
  border-radius: 20px / 15px; /* Match the screen container */
  transform: scale(1);
}

@keyframes tvOffEffect {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.3;
  }
  15% {
    opacity: 0.7;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* TV on bright flash */
.slide-tech .tv-on {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(0, 80, 150, 0.5) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  z-index: 15; /* Changed from 12 to 15 to ensure it's above all screen effects */
  pointer-events: none;
  border-radius: 20px / 15px; /* Match the screen container */
  transform: scale(1);
}

@keyframes tvOnEffect {
  0% {
    opacity: 0;
    transform: scale(0.01);
  }
  10% {
    opacity: 0.8;
    transform: scale(0.05);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Vertical roll effect */
.slide-tech .vertical-roll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  border-radius: 0;
}

.vertical-roll-effect {
  animation: verticalRoll 0.8s ease-in-out forwards !important;
  opacity: 1 !important;
}

@keyframes verticalRoll {
  0% {
    background-position: 0 0;
    opacity: 0.5;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 100%
    );
  }
  30% {
    opacity: 0.8;
    background: linear-gradient(
      to bottom,
      transparent 0%, 
      #ffffff 40%,
      transparent 60%,
      transparent 100%
    );
    background-size: 100% 200%;
    background-position: 0 -150px;
  }
  70% {
    opacity: 0.6;
    background: linear-gradient(
      to bottom,
      transparent 0%, 
      #ffffff 40%,
      transparent 60%,
      transparent 100%
    );
    background-size: 100% 200%;
    background-position: 0 150px;
  }
  100% {
    opacity: 0;
    background-position: 0 0;
  }
}

/* CRT vignette */
.slide-tech .power-cable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 3;
  opacity: 0.7;
}

.slide-tech .power-tip {
  display: none;
}

.slide-tech .slide-content {
  position: absolute;
  width: 70%;
  padding: 25px;
  color: #ffffff;
  z-index: 7;
  background-color: transparent;
  border: none;
  backdrop-filter: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 0 5px rgba(255, 150, 0, 0.8);
  box-shadow: none;
  transition: all 0.4s ease-in-out;
}

/* TV text shrink animation when turning off */
.tv-text-off {
  animation: tvTextOffEffect 0.15s cubic-bezier(0.22, 0, 0.1, 0) forwards !important;
  transition: opacity 0.08s ease-out;
  transform-origin: center center;
}

/* Text fade out with TV off effect - ultra realistic CRT collapse */
@keyframes tvTextOffEffect {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 1);
    filter: brightness(1) blur(0);
    color: #ff9800;
    text-shadow: 
      0 0 10px rgba(255, 150, 0, 0.7),
      2px 2px 0 rgba(150, 60, 0, 0.8);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -49%) scale(1.05, 0.9);
    filter: brightness(1.2) blur(0.5px);
    color: #ffaf40;
    text-shadow: 
      0 0 12px rgba(255, 150, 0, 0.9),
      2px 2px 0 rgba(150, 60, 0, 0.9);
  }
  25% {
    opacity: 0.9;
    transform: translate(-50%, -48%) scale(0.5, 0.3);
    filter: brightness(1.1) blur(1px);
    color: #40a0ff;
    text-shadow: 
      0 0 5px rgba(100, 150, 255, 0.7),
      1px 1px 0 rgba(0, 50, 150, 0.6);
  }
  40% {
    opacity: 0.7;
    transform: translate(-50%, -47%) scale(0.3, 0.08);
    filter: brightness(0.9) blur(1.5px);
    color: #2080ff;
  }
  60% {
    opacity: 0.3;
    transform: translate(-50%, -46%) scale(0.15, 0.03);
    filter: brightness(0.7) blur(2px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.01, 0.001);
    filter: brightness(0) blur(3px);
  }
}

/* TV text grow animation when turning on */
.tv-text-on {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  animation: textGrow 0.4s ease-out;
}

@keyframes textGrow {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.slide-tech .slide-title {
  font-family: 'Silkscreen', 'VT323', monospace;
  font-size: 3em;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #ff9800;
  letter-spacing: 2px;
  text-shadow: 
    0 0 10px rgba(255, 150, 0, 0.7),
    2px 2px 0 rgba(150, 60, 0, 0.8),
    -1px -1px 0 #000000;
  font-weight: 700;
}

.slide-tech .slide-text {
  font-family: 'Silkscreen', 'VT323', monospace;
  font-size: 2.2em;
  line-height: 1.3;
  margin-bottom: 0;
  color: #ff9800;
  letter-spacing: 1px;
  text-shadow: 
    0 0 8px rgba(255, 150, 0, 0.7),
    1px 1px 0 rgba(150, 60, 0, 0.8);
  text-transform: uppercase;
  font-weight: 600;
}

/* Custom navigation buttons for the TV slide */
.slide-tech .swiper-button-next,
.slide-tech .swiper-button-prev {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background-color: #d9534f;
  border-radius: 5px;
}

.slide-tech .swiper-button-next:hover,
.slide-tech .swiper-button-prev:hover {
  box-shadow: 
    0 0 20px rgba(217, 83, 79, 0.8),
    inset 0 0 15px rgba(0, 0, 0, 0.4);
  background-color: #c9302c;
}

/* TV static animation classes - will be toggled with JS */
.tv-static-high {
  opacity: 0.3 !important;
  animation: tvStaticHigh 0.1s steps(2, end) infinite !important;
}

@keyframes tvStaticHigh {
  0% {
    background-position: 0 0;
    opacity: 0.3;
  }
  50% {
    background-position: -20px 10px;
    opacity: 0.35;
  }
  100% {
    background-position: 20px -10px;
    opacity: 0.3;
  }
}

.tv-flicker {
  animation: tvFlicker 0.15s steps(3, end) infinite !important;
  opacity: 1 !important;
}

@keyframes tvFlicker {
  0% {
    opacity: 0.05;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.05;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.05;
  }
  60% {
    opacity: 0.15;
  }
  70% {
    opacity: 0.05;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.05;
  }
}

.tv-horizontal-offset {
  animation: tvHorizontalOffset 0.2s ease-in-out !important;
  opacity: 1 !important;
}

@keyframes tvHorizontalOffset {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 0;
  }
  10% {
    transform: translateX(30px) skewX(2deg);
    opacity: 1;
  }
  20% {
    transform: translateX(-20px) skewX(-2deg);
    opacity: 1;
  }
  30% {
    transform: translateX(10px) skewX(1deg);
    opacity: 0.8;
  }
  40% {
    transform: translateX(-5px) skewX(-1deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 0;
  }
}

.tv-off-effect {
  animation: tvOffEffect 0.8s ease-out forwards !important;
  opacity: 1 !important;
}

.tv-on-effect {
  animation: tvOnEffect 0.5s ease-out forwards !important;
  opacity: 1 !important;
}

.tv-power-flicker {
  animation: tvPowerFlicker 5s ease-in-out infinite !important;
}

@keyframes tvPowerFlicker {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 
      inset 0 0 30px rgba(0, 150, 255, 0.3),
      0 0 30px rgba(0, 150, 255, 0.1);
  }
  50% {
    opacity: 0.6;
    box-shadow: 
      inset 0 0 20px rgba(0, 150, 255, 0.2),
      0 0 20px rgba(0, 150, 255, 0.05);
  }
}

/* Enhanced scanline animation */
@keyframes scanlineMove {
  0% {
    background-position: 0 0;
    opacity: 0.7;
  }
  50% {
    background-position: 0 50px;
    opacity: 0.9;
  }
  100% {
    background-position: 0 100px;
    opacity: 0.7;
  }
}

/* Add a scanline animation that moves across the screen */
.scanning-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.05);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 10px 3px rgba(120, 220, 255, 0.05);
  opacity: 0;
  transform: translateY(-10px);
}

.scanning-active {
  animation: scanningLine 8s linear infinite;
  opacity: 1;
}

@keyframes scanningLine {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Retro developer/gaming slide styles */
.slide-retro-dev {
  background-color: #140808;
  position: relative;
  overflow: hidden;
}

/* Dark room gradient overlay */
.slide-retro-dev:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(20, 8, 8, 0.2) 0%,
    rgba(20, 8, 8, 0.6) 60%,
    rgba(20, 8, 8, 0.8) 100%
  );
  z-index: 1;
  animation: roomBreathe 10s ease-in-out infinite;
}

@keyframes roomBreathe {
  0%, 100% {
    background: radial-gradient(
      ellipse at center,
      rgba(20, 8, 8, 0.2) 0%,
      rgba(20, 8, 8, 0.6) 60%,
      rgba(20, 8, 8, 0.8) 100%
    );
  }
  50% {
    background: radial-gradient(
      ellipse at center,
      rgba(20, 8, 8, 0.1) 0%,
      rgba(20, 8, 8, 0.5) 60%,
      rgba(20, 8, 8, 0.7) 100%
    );
  }
}

/* Screen glow effect */
.slide-retro-dev .screen-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(
    ellipse at center right,
    rgba(255, 100, 50, 0.4) 0%,
    rgba(255, 100, 50, 0.1) 40%,
    transparent 70%
  );
  z-index: 2;
  mix-blend-mode: screen;
  animation: screenPulse 4s ease-in-out infinite alternate;
}

@keyframes screenPulse {
  0% {
    opacity: 0.8;
    background: radial-gradient(
      ellipse at center right,
      rgba(255, 100, 50, 0.4) 0%,
      rgba(255, 100, 50, 0.1) 40%,
      transparent 70%
    );
  }
  33% {
    opacity: 0.9;
    background: radial-gradient(
      ellipse at center right,
      rgba(180, 255, 100, 0.3) 0%,
      rgba(180, 255, 100, 0.05) 40%,
      transparent 70%
    );
  }
  66% {
    opacity: 0.85;
    background: radial-gradient(
      ellipse at center right,
      rgba(255, 50, 50, 0.35) 0%,
      rgba(255, 50, 50, 0.08) 40%,
      transparent 70%
    );
  }
  100% {
    opacity: 0.8;
    background: radial-gradient(
      ellipse at center right,
      rgba(255, 100, 50, 0.4) 0%,
      rgba(255, 100, 50, 0.1) 40%,
      transparent 70%
    );
  }
}

/* Scanlines effect for CRT monitors */
.slide-retro-dev .scanlines {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 2px
  );
  background-size: 100% 4px;
  z-index: 3;
  opacity: 0.1;
  pointer-events: none;
  animation: scanlineMove 10s linear infinite;
}

@keyframes scanlineMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* Key press animation effect */
.slide-retro-dev .key-press {
  position: absolute;
  width: 25%;
  height: 5px;
  background-color: rgba(255, 150, 100, 0.2);
  bottom: 30%;
  right: 25%;
  z-index: 3;
  opacity: 0;
  border-radius: 2px;
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(255, 150, 100, 0.3);
  animation: keyPressEffect 1.5s ease-in-out infinite;
}

@keyframes keyPressEffect {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  10%, 15% {
    opacity: 0.8;
    transform: translateY(2px);
  }
  20% {
    opacity: 0;
    transform: translateY(0);
  }
  60%, 65% {
    opacity: 0.8;
    transform: translateY(2px);
  }
  70% {
    opacity: 0;
    transform: translateY(0);
  }
  85%, 90% {
    opacity: 0.8;
    transform: translateY(2px);
  }
}

/* CRT monitor flicker effect */
.slide-retro-dev .crt-flicker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: crtFlicker 0.2s steps(4, end) infinite;
}

@keyframes crtFlicker {
  0%, 100% {
    opacity: 0;
  }
  33% {
    opacity: 0.01;
  }
  66% {
    opacity: 0.03;
    background-color: rgba(100, 255, 100, 0.02);
  }
  77% {
    opacity: 0.02;
    background-color: rgba(255, 100, 100, 0.02);
  }
}

/* Game sprites animation (like doom characters moving) */
.slide-retro-dev .game-sprites {
  position: absolute;
  width: 15%;
  height: 8%;
  top: 45%;
  right: 30%;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 100, 50, 0.4) 0%, rgba(255, 100, 50, 0) 70%),
    radial-gradient(circle at 40% 30%, rgba(255, 100, 50, 0.1) 0%, rgba(255, 100, 50, 0) 40%);
  z-index: 3;
  filter: blur(1px);
  opacity: 0.7;
  animation: gameSpriteMove 5s ease-in-out infinite alternate;
}

@keyframes gameSpriteMove {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.7;
    background-image: 
      radial-gradient(circle at 50% 50%, rgba(255, 100, 50, 0.4) 0%, rgba(255, 100, 50, 0) 70%),
      radial-gradient(circle at 40% 30%, rgba(255, 100, 50, 0.1) 0%, rgba(255, 100, 50, 0) 40%);
  }
  25% {
    transform: translateX(-20px) translateY(5px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-30px) translateY(0);
    opacity: 0.75;
    background-image: 
      radial-gradient(circle at 50% 50%, rgba(180, 255, 100, 0.3) 0%, rgba(180, 255, 100, 0) 70%),
      radial-gradient(circle at 40% 30%, rgba(180, 255, 100, 0.1) 0%, rgba(180, 255, 100, 0) 40%);
  }
  75% {
    transform: translateX(-10px) translateY(-5px);
    opacity: 0.8;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 0.7;
  }
}

.slide-retro-dev .slide-content {
  position: absolute;
  width: 45%;
  padding: 25px;
  margin-left: 0;
  color: #ffffff;
  z-index: 4;
  background-color: rgba(20, 8, 8, 0.6);
  border: 2px solid rgba(255, 100, 50, 0.2);
  backdrop-filter: blur(2px);
  top: 40%;
  left: 40px;
  transform: translateY(-50%);
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(255, 100, 50, 0.15);
  animation: contentGlow 6s ease-in-out infinite alternate;
}

@keyframes contentGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 100, 50, 0.15);
    border-color: rgba(255, 100, 50, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 100, 50, 0.3);
    border-color: rgba(255, 100, 50, 0.3);
  }
}

.slide-retro-dev .slide-title {
  font-family: 'Silkscreen', cursive;
  font-size: 2.3em;
  line-height: 1.3;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #ff6432;
  letter-spacing: 1px;
  text-shadow: 
    0 0 10px rgba(255, 100, 50, 0.8),
    3px 3px 0 #601500,
    -1px -1px 0 #200800;
  animation: gameTitleFlicker 10s linear infinite;
}

.slide-retro-dev .slide-text {
  font-family: 'Silkscreen', cursive;
  font-size: 1.4em;
  line-height: 1.5;
  margin-bottom: 0;
  color: #ff6432;
  letter-spacing: 1px;
  text-shadow: 
    0 0 8px rgba(255, 100, 50, 0.7),
    2px 2px 0 #601500;
  animation: gameTextGlow 4s ease-in-out infinite;
}

@keyframes gameTitleFlicker {
  0%, 9.999%, 14%, 29.999%, 33%, 49.999%, 83%, 89.999%, 96%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(255, 100, 50, 0.8),
      3px 3px 0 #601500,
      -1px -1px 0 #200800;
  }
  10%, 20%, 90% {
    opacity: 0.85;
    text-shadow: 
      0 0 5px rgba(255, 100, 50, 0.4),
      2px 2px 0 #601500,
      -1px -1px 0 #200800;
  }
}

@keyframes gameTextGlow {
  0%, 100% {
    opacity: 0.95;
    text-shadow: 
      0 0 8px rgba(255, 100, 50, 0.7),
      2px 2px 0 #601500;
  }
  50% {
    opacity: 1;
    text-shadow: 
      0 0 12px rgba(255, 100, 50, 0.9),
      2px 2px 0 #601500;
  }
}

/* Fallout theme slide styles */
.slide-fallout {
  background-color: #201a10;
  position: relative;
  overflow: hidden;
}

/* Sepia/aged paper overlay */
.slide-fallout:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(32, 26, 16, 0.9) 0%,
    rgba(32, 26, 16, 0.7) 30%,
    rgba(32, 26, 16, 0.5) 60%,
    rgba(32, 26, 16, 0.3) 100%
  );
  z-index: 1;
  animation: fadeAmbient 10s ease-in-out infinite alternate;
}

@keyframes fadeAmbient {
  0% {
    background: linear-gradient(
      to right,
      rgba(32, 26, 16, 0.9) 0%,
      rgba(32, 26, 16, 0.7) 30%,
      rgba(32, 26, 16, 0.5) 60%,
      rgba(32, 26, 16, 0.3) 100%
    );
  }
  50% {
    background: linear-gradient(
      to right,
      rgba(40, 30, 15, 0.9) 0%,
      rgba(40, 30, 15, 0.7) 30%,
      rgba(40, 30, 15, 0.5) 60%,
      rgba(40, 30, 15, 0.3) 100%
    );
  }
  100% {
    background: linear-gradient(
      to right,
      rgba(36, 24, 12, 0.9) 0%,
      rgba(36, 24, 12, 0.7) 30%,
      rgba(36, 24, 12, 0.5) 60%,
      rgba(36, 24, 12, 0.3) 100%
    );
  }
}

/* Radiation particles */
.slide-fallout .radiation-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 220, 130, 0.5) 0px, transparent 13px),
    radial-gradient(circle at 25% 45%, rgba(255, 220, 130, 0.5) 0px, transparent 9px),
    radial-gradient(circle at 40% 30%, rgba(255, 220, 130, 0.5) 0px, transparent 12px),
    radial-gradient(circle at 60% 70%, rgba(255, 220, 130, 0.5) 0px, transparent 8px),
    radial-gradient(circle at 75% 40%, rgba(255, 220, 130, 0.5) 0px, transparent 10px),
    radial-gradient(circle at 90% 60%, rgba(255, 220, 130, 0.5) 0px, transparent 9px);
  z-index: 2;
  opacity: 0.1; /* Slight visibility at all times */
  animation: radiationPulse 10s ease infinite;
  filter: drop-shadow(0 0 3px rgba(255, 220, 130, 0.3)); /* Subtle glow */
}

@keyframes radiationPulse {
  0%, 100% {
    opacity: 0.1;
    transform: translateY(0);
  }
  25%, 75% {
    opacity: 0.3;
    transform: translateY(-15px);
  }
  50% {
    opacity: 0.45;
    transform: translateY(-30px);
  }
}

/* Dust overlay */
.slide-fallout .dust-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  z-index: 2;
  opacity: 0.15;
  mix-blend-mode: overlay;
  animation: dustDrift 30s linear infinite alternate;
}

@keyframes dustDrift {
  0% {
    background-position: 0 0;
    opacity: 0.15;
  }
  33% {
    opacity: 0.2;
  }
  66% {
    opacity: 0.15;
  }
  100% {
    background-position: 100px -100px;
    opacity: 0.2;
  }
}

/* Vault door frame effect - improved alignment and added percentage counter */
.slide-fallout .vault-door-frame {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  border: 12px solid rgba(255, 204, 0, 0.2);
  border-radius: 50%;
  z-index: 2;
  animation: vaultDoorPulse 8s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.slide-fallout .vault-door-frame:before {
  content: '';
  position: absolute;
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
  border: 4px dashed rgba(255, 204, 0, 0.1);
  border-radius: 50%;
  animation: vaultRotate 30s linear infinite;
  box-sizing: border-box;
}

/* Add percentage counter inside the vault door */
.slide-fallout .vault-door-frame:after {
  content: attr(data-percentage);
  font-family: 'VT323', monospace;
  font-size: 3.5em;
  font-weight: bold;
  color: rgba(255, 204, 0, 0.8);
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
  z-index: 3;
  text-align: center;
}

/* Add blinking cursor after percentage */
.slide-fallout .vault-backup-cursor {
  position: absolute;
  width: 14px;
  height: 30px;
  background-color: rgba(255, 204, 0, 0.8);
  bottom: calc(50% - 15px);
  right: calc(50% - 40px);
  animation: cursorBlink 1s step-start infinite;
  z-index: 3;
}

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

@keyframes vaultDoorPulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 204, 0, 0.1),
      inset 0 0 30px rgba(255, 204, 0, 0.05);
    border-color: rgba(255, 204, 0, 0.2);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 204, 0, 0.2),
      inset 0 0 50px rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.3);
  }
}

@keyframes vaultRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Glowing backup drive effect */
.slide-fallout .glowing-backup {
  position: absolute;
  bottom: 15%;
  left: 10%; /* Changed from right: 18% to left: 10% */
  width: 20px;
  height: 30px;
  background-color: rgba(255, 204, 0, 0.2);
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
  animation: backupGlow 2s ease-in-out infinite alternate;
}

.slide-fallout .glowing-backup:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 6px;
  width: 8px;
  height: 5px;
  background-color: rgba(255, 204, 0, 0.2);
  border-radius: 1px;
}

@keyframes backupGlow {
  0% {
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
    opacity: 0.9;
  }
  100% {
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.9);
    opacity: 1;
  }
}

.slide-fallout .slide-content {
  position: absolute;
  width: 40%; /* Increased from 30% to 40% */
  padding: 25px;
  color: #ffffff;
  z-index: 4;
  background-color: rgba(40, 30, 15, 0.7);
  border: 2px solid rgba(255, 204, 0, 0.3);
  backdrop-filter: blur(3px);
  bottom: 40px;
  right: 40px; /* Changed from left: 40px to right: 40px */
  left: auto; /* Added to override any other positioning */
  border-radius: 5px;
  box-shadow: 
    0 0 20px rgba(255, 204, 0, 0.1),
    inset 0 0 30px rgba(20, 15, 8, 0.3);
  transform: perspective(500px) rotateX(5deg);
  transform-origin: bottom;
  animation: falloutContentPulse 6s ease-in-out infinite alternate;
}

@keyframes falloutContentPulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 204, 0, 0.1),
      inset 0 0 30px rgba(20, 15, 8, 0.3);
    border-color: rgba(255, 204, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 204, 0, 0.2),
      inset 0 0 40px rgba(20, 15, 8, 0.2);
    border-color: rgba(255, 204, 0, 0.4);
  }
}

.slide-fallout .slide-title {
  font-family: 'VT323', monospace;
  font-size: 2.4em;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #ffc400;
  letter-spacing: 1px;
  text-shadow: 
    0 0 10px rgba(255, 196, 0, 0.5),
    2px 2px 0 #603c00,
    -1px -1px 0 #000000;
  animation: falloutTextGlow 4s steps(1, end) infinite;
}

.slide-fallout .slide-text {
  font-family: 'VT323', monospace;
  font-size: 1.8em;
  line-height: 1.3;
  margin-bottom: 0;
  color: #ffc400;
  letter-spacing: 1px;
  text-shadow: 
    0 0 8px rgba(255, 196, 0, 0.4),
    1px 1px 0 #603c00;
  animation: falloutTextPulse 3s ease-in-out infinite;
}

@keyframes falloutTextGlow {
  0%, 9%, 11%, 19%, 21%, 89%, 91%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(255, 196, 0, 0.5),
      2px 2px 0 #603c00,
      -1px -1px 0 #000000;
  }
  10%, 20%, 90% {
    opacity: 0.85;
    text-shadow: 
      0 0 5px rgba(255, 196, 0, 0.3),
      2px 2px 0 #603c00,
      -1px -1px 0 #000000;
  }
}

@keyframes falloutTextPulse {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 
      0 0 8px rgba(255, 196, 0, 0.4),
      1px 1px 0 #603c00;
  }
  50% {
    opacity: 1;
    text-shadow: 
      0 0 12px rgba(255, 196, 0, 0.7),
      1px 1px 0 #603c00;
  }
}

/* TV convex corner effect */
.slide-tech .corner-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0.25) 0%, 
    rgba(255, 255, 255, 0.22) 8%,
    rgba(255, 255, 255, 0.18) 15%,
    rgba(255, 255, 255, 0.12) 25%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 85%
  );
  border-radius: 0 0 150% 0;
  z-index: 20; /* Ensure it's on top */
  pointer-events: none;
  box-shadow: 
    inset 5px 5px 10px rgba(255, 255, 255, 0.18),
    0 0 15px rgba(120, 180, 255, 0.15);
  filter: blur(3px);
  mix-blend-mode: screen; /* Makes it more visible on black background */
  /* animation: cornerGlowTV 8s ease-in-out infinite alternate; */
}

@keyframes cornerGlowTV {
  0%, 100% {
    opacity: 0.98;
    background: radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.25) 0%, 
      rgba(255, 255, 255, 0.22) 8%,
      rgba(255, 255, 255, 0.18) 15%,
      rgba(255, 255, 255, 0.12) 25%,
      rgba(255, 255, 255, 0.08) 40%,
      rgba(255, 255, 255, 0.04) 60%,
      transparent 85%
    );
    box-shadow: 
      inset 5px 5px 10px rgba(255, 255, 255, 0.18),
      0 0 15px rgba(120, 180, 255, 0.15);
  }
  50% {
    opacity: 0.9;
    background: radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.2) 0%, 
      rgba(255, 255, 255, 0.18) 8%,
      rgba(255, 255, 255, 0.15) 15%,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(255, 255, 255, 0.03) 60%,
      transparent 85%
    );
    box-shadow: 
      inset 4px 4px 8px rgba(255, 255, 255, 0.15),
      0 0 10px rgba(120, 180, 255, 0.1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-slider {
    height: 650px;
    margin: 0 10px 20px 10px; /* Remove top margin, keep horizontal and bottom margins */
    width: auto; /* Let it size based on margins */
    max-width: none; /* Remove max-width constraint */
    box-sizing: border-box; /* Include borders in width calculation */
    border: 2px solid #3a3a3a; /* Thinner border on mobile */
    border-top: none; /* Still remove top border to connect with slogan */
    box-shadow: 2px 2px 0px #000000; /* Proportional shadow for mobile */
  }
  
  .swiper-slide {
    background-position: center;
  }
  
  .slide-content, .slide-first .slide-content, .slide-tech .slide-content, .slide-retro-dev .slide-content, .slide-fallout .slide-content {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
  }
  
  .slide-first .slide-content {
    bottom: 30px;
    left: 15px;
    text-align: left;
    width: calc(100% - 60px);
  }
  
  .slide-tech .slide-content {
    top: auto;
    bottom: 30px;
    left: 15px;
    transform: none;
    text-align: left;
    width: calc(100% - 60px);
  }
  
  .slide-retro-dev .slide-content {
    top: auto;
    bottom: 30px;
    left: 15px;
    transform: none;
    text-align: left;
    width: calc(100% - 60px);
  }
  
  .slide-fallout .slide-content {
    bottom: 30px;
    right: 15px; /* Changed from left: 15px to right: 15px */
    left: auto; /* Added to ensure no conflict */
    transform: none;
    text-align: left;
    width: calc(100% - 60px);
  }
  
  .slide-title, .slide-first .slide-title {
    font-size: 1.8em;
    margin-top: 20px;
  }
  
  .slide-text, .slide-first .slide-text {
    font-size: 1em;
  }
  
  .slide-tech .slide-title {
    font-size: 2em;
  }
  
  .slide-tech .slide-text {
    font-size: 1.6em;
  }
  
  .slide-retro-dev .slide-title {
    font-size: 1.6em;
  }
  
  .slide-retro-dev .slide-text {
    font-size: 1em;
  }
  
  .slide-fallout .slide-title {
    font-size: 1.7em;
  }
  
  .slide-fallout .slide-text {
    font-size: 1.2em;
  }
  
  .slide-tech .power-cable {
    height: 150px;
    left: auto;
    right: 50px;
    bottom: 60px;
  }
  
  .slide-retro-dev .screen-glow,
  .slide-retro-dev .scanlines {
    width: 100%;
  }
  
  .slide-retro-dev .game-sprites {
    right: 20%;
  }
  
  .slide-fallout .vault-door-frame {
    top: 5%;
    right: 5%;
    width: 100px;
    height: 100px;
    border-width: 8px;
  }
  
  .slide-fallout .glowing-backup {
    bottom: 15%;
    left: 10%; /* Changed from right: 15% to left: 10% */
    width: 15px;
    height: 25px;
  }
}

/* Responsive styles for the slider and TV effect */
@media (max-width: 991px) {
  .hero-slider {
    height: 450px;
  }
  
  .slide-tech {
    border-width: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  
  .slide-tech .slide-content {
    width: 80%;
  }
  
  .slide-tech .slide-title {
    font-size: 2.2em;
  }
  
  .slide-tech .slide-text {
    font-size: 1.8em;
  }
}

@media (max-width: 767px) {
  .hero-slider {
    height: 400px;
  }
  
  .slide-tech {
    border-width: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }
  
  .slide-tech .slide-content {
    width: 90%;
  }
  
  .slide-tech .slide-title {
    font-size: 1.8em;
  }
  
  .slide-tech .slide-text {
    font-size: 1.4em;
  }
  
  /* Simplify some effects for better mobile performance */
  .slide-tech .crt-lens {
    opacity: 0.3;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    height: 350px;
    margin: 0 0 15px 0;
  }
  
  .slide-tech {
    border-width: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
  }
  
  .slide-tech .slide-content {
    width: 95%;
    padding: 15px;
  }
  
  .slide-tech .slide-title {
    font-size: 1.5em;
    margin-bottom: 8px;
  }
  
  .slide-tech .slide-text {
    font-size: 1.2em;
  }
  
  /* Further optimize effects for mobile */
  .scanning-line {
    height: 3px;
  }
  
  .slide-tech .circuit-grid {
    background-size: 100% 2px;
  }
}

/* Better touch interaction for mobile */
@media (hover: none) and (pointer: coarse) {
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    width: 36px;
    height: 36px;
    opacity: 0.7;
  }
  
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}

/* Custom styled navigation buttons for all slides */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #d9534f;
  color: #fff;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 
    0 0 15px rgba(217, 83, 79, 0.6),
    inset 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  opacity: 0.8;
  transform: scale(1);
}

.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background-color: #c9302c;
  border-color: #ffffff;
  box-shadow: 
    0 0 20px rgba(217, 83, 79, 0.8),
    inset 0 0 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
  opacity: 1;
}

.hero-slider .swiper-button-next:active,
.hero-slider .swiper-button-prev:active {
  transform: scale(0.95);
  box-shadow: 
    0 0 10px rgba(217, 83, 79, 0.5),
    inset 0 0 8px rgba(0, 0, 0, 0.5);
}

/* Square pagination bullets in the same style */
.hero-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #d9534f;
  opacity: 0.7;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(217, 83, 79, 0.4);
  margin: 0 6px;
}

.hero-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #d9534f;
  transform: scale(1.2);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 0 12px rgba(217, 83, 79, 0.7),
    inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.hero-slider .swiper-pagination-bullet:hover {
  opacity: 0.9;
  background-color: #c9302c;
  transform: scale(1.1);
}

/* Override the specific slide button styles to maintain consistency */
.slide-tech .swiper-button-next,
.slide-tech .swiper-button-prev {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background-color: #d9534f;
  border-radius: 5px;
}

.slide-tech .swiper-button-next:hover,
.slide-tech .swiper-button-prev:hover {
  box-shadow: 
    0 0 20px rgba(217, 83, 79, 0.8),
    inset 0 0 15px rgba(0, 0, 0, 0.4);
  background-color: #c9302c;
}

/* Spy-themed slide styles inspired by Austin Powers */
.slide-spy {
  background-color: #302244;
  position: relative;
  overflow: hidden;
}

/* Overlay with light color grain */
.slide-spy:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(65, 36, 76, 0.85) 0%,
    rgba(65, 36, 76, 0.65) 40%,
    rgba(107, 53, 131, 0.45) 80%,
    rgba(107, 53, 131, 0.35) 100%
  );
  z-index: 1;
  mix-blend-mode: overlay;
  animation: spyAmbient 12s ease-in-out infinite alternate;
}

@keyframes spyAmbient {
  0% {
    opacity: 0.9;
    background: linear-gradient(
      135deg,
      rgba(65, 36, 76, 0.85) 0%,
      rgba(65, 36, 76, 0.65) 40%,
      rgba(107, 53, 131, 0.45) 80%,
      rgba(107, 53, 131, 0.35) 100%
    );
  }
  50% {
    opacity: 0.8;
    background: linear-gradient(
      135deg,
      rgba(76, 36, 65, 0.85) 0%,
      rgba(76, 36, 65, 0.65) 40%,
      rgba(131, 53, 107, 0.45) 80%,
      rgba(131, 53, 107, 0.35) 100%
    );
  }
  100% {
    opacity: 0.9;
    background: linear-gradient(
      135deg,
      rgba(55, 30, 85, 0.85) 0%,
      rgba(55, 30, 85, 0.65) 40%,
      rgba(85, 45, 140, 0.45) 80%,
      rgba(85, 45, 140, 0.35) 100%
    );
  }
}

/* Surveillance grid lines */
.slide-spy .surveillance-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0deg, transparent 98%, rgba(0, 255, 0, 0.2) 98%, rgba(0, 255, 0, 0.2) 100%),
    linear-gradient(90deg, transparent 98%, rgba(0, 255, 0, 0.2) 98%, rgba(0, 255, 0, 0.2) 100%);
  background-size: 50px 50px;
  z-index: 2;
  opacity: 0.4;
  pointer-events: none;
  animation: gridScan 15s linear infinite;
}

@keyframes gridScan {
  0% {
    background-position: 0 0;
    opacity: 0.3;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    background-position: 25px 25px;
    opacity: 0.3;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    background-position: 50px 50px;
    opacity: 0.3;
  }
}

/* Slide content styling */
.slide-spy .slide-content {
  position: absolute;
  width: 45%;
  padding: 25px;
  color: #ffffff;
  z-index: 4;
  background-color: rgba(40, 22, 55, 0.75);
  border: 2px solid rgba(255, 105, 180, 0.4);
  backdrop-filter: blur(5px);
  bottom: 40px;
  right: 40px;
  border-radius: 8px;
  box-shadow: 
    0 0 20px rgba(255, 105, 180, 0.3),
    inset 0 0 30px rgba(40, 22, 55, 0.4);
  animation: spyContentGlow 6s ease-in-out infinite alternate;
}

@keyframes spyContentGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 105, 180, 0.3),
      inset 0 0 30px rgba(40, 22, 55, 0.4);
    border-color: rgba(255, 105, 180, 0.4);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 105, 180, 0.5),
      inset 0 0 40px rgba(40, 22, 55, 0.3);
    border-color: rgba(255, 105, 180, 0.6);
  }
}

.slide-spy .slide-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2em;
  line-height: 1.2;
  margin-bottom: 15px;
  color: #ff69b4;
  letter-spacing: 1px;
  text-shadow: 
    0 0 10px rgba(255, 105, 180, 0.6),
    2px 2px 0 rgba(60, 30, 80, 0.8);
  animation: spyTitleGlow 4s steps(1, end) infinite;
}

.slide-spy .slide-text {
  font-family: 'VT323', monospace;
  font-size: 1.8em;
  line-height: 1.3;
  margin-bottom: 0;
  color: #00ffaa;
  letter-spacing: 1px;
  text-shadow: 
    0 0 8px rgba(0, 255, 170, 0.6),
    1px 1px 0 rgba(30, 80, 60, 0.8);
  animation: spyTextPulse 3s ease-in-out infinite;
}

@keyframes spyTitleGlow {
  0%, 9%, 11%, 19%, 21%, 89%, 91%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(255, 105, 180, 0.6),
      2px 2px 0 rgba(60, 30, 80, 0.8);
  }
  10%, 20%, 90% {
    opacity: 0.9;
    text-shadow: 
      0 0 5px rgba(255, 105, 180, 0.4),
      2px 2px 0 rgba(60, 30, 80, 0.8);
  }
}

@keyframes spyTextPulse {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 
      0 0 8px rgba(0, 255, 170, 0.6),
      1px 1px 0 rgba(30, 80, 60, 0.8);
  }
  50% {
    opacity: 1;
    text-shadow: 
      0 0 12px rgba(0, 255, 170, 0.8),
      1px 1px 0 rgba(30, 80, 60, 0.8);
  }
}

/* Media query adjustments for the spy slide */
@media (max-width: 768px) {
  .slide-spy .slide-content {
    bottom: 30px;
    right: 15px;
    width: calc(100% - 60px);
    padding: 20px;
  }
  
  .slide-spy .slide-title {
    font-size: 1.8em;
  }
  
  .slide-spy .slide-text {
    font-size: 1.3em;
  }
  
  /* Styles for removed elements are also removed here */
}

/* Existing CSS continues below */

/* Disco ball light reflections overlay */
.slide-spy .disco-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5; /* Above grid, below content */
  overflow: hidden; /* Prevent overflow */
  opacity: 0.6;
}

.slide-spy .disco-light {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: discoSparkle 4s infinite alternate;
  transform: rotate(45deg); /* Square shape */
}

/* Generate multiple disco lights with different positions and delays */
.slide-spy .disco-light:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } 
.slide-spy .disco-light:nth-child(2) { top: 30%; left: 80%; animation-delay: -0.5s; width: 8px; height: 8px; } 
.slide-spy .disco-light:nth-child(3) { top: 70%; left: 15%; animation-delay: -1s; width: 12px; height: 12px; } 
.slide-spy .disco-light:nth-child(4) { top: 50%; left: 50%; animation-delay: -1.5s; } 
.slide-spy .disco-light:nth-child(5) { top: 85%; left: 60%; animation-delay: -2s; width: 8px; height: 8px; } 
.slide-spy .disco-light:nth-child(6) { top: 25%; left: 35%; animation-delay: -2.5s; width: 10px; height: 10px; } 
.slide-spy .disco-light:nth-child(7) { top: 60%; left: 90%; animation-delay: -3s; width: 12px; height: 12px; } 
.slide-spy .disco-light:nth-child(8) { top: 5%; left: 5%; animation-delay: -3.5s; width: 9px; height: 9px; } 

@keyframes discoSparkle {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1) rotate(45deg) translateX(0);
    background-color: rgba(255, 255, 255, 0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8) rotate(45deg) translateX(10px) translateY(5px);
    background-color: rgba(200, 200, 255, 0.6);
  }
}

/* Lava lamp blobs effect (using pseudo-elements) */
.slide-spy::after, .slide-spy::before {
  content: '';
  position: absolute;
  width: 280px; /* Slightly larger */
  height: 280px;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; /* Irregular shape */
  filter: blur(50px); /* Slightly less blur */
  mix-blend-mode: screen;
  z-index: 1; /* Behind other elements */
  opacity: 0.55; /* Increased base opacity */
}

.slide-spy::before {
  background-color: #ff69b4; /* Pink */
  top: 5%;
  left: 8%;
  animation: lavaBlob1 22s ease-in-out infinite alternate; /* Slower, more complex */
}

.slide-spy::after {
  background-color: #ffae42; /* Adjusted Orange */
  bottom: 8%;
  right: 5%;
  animation: lavaBlob2 25s ease-in-out infinite alternate; /* Slower, more complex */
}

@keyframes lavaBlob1 {
  0% {
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    opacity: 0.5;
  }
  50% {
    transform: translateY(60px) translateX(40px) scale(1.15) rotate(20deg);
    border-radius: 60% 40% 50% 50% / 40% 55% 45% 60%;
    opacity: 0.65;
  }
  100% {
    transform: translateY(10px) translateX(-20px) scale(0.95) rotate(-10deg);
    border-radius: 50% 50% 45% 55% / 55% 50% 50% 45%;
    opacity: 0.5;
  }
}

@keyframes lavaBlob2 {
  0% {
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
    border-radius: 50% 50% 55% 45% / 60% 40% 45% 55%;
    opacity: 0.5;
  }
  50% {
    transform: translateY(-70px) translateX(-50px) scale(1.2) rotate(-25deg);
    border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%;
    opacity: 0.6;
  }
  100% {
    transform: translateY(-20px) translateX(30px) scale(0.9) rotate(15deg);
    border-radius: 55% 45% 50% 50% / 50% 60% 40% 50%;
    opacity: 0.5;
  }
}

/* Realistic Disco Light Beams from Top Right */
.slide-spy .disco-beams-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4; /* Above grid/lava, below sparkles/content */
  overflow: hidden;
  transform: perspective(600px); /* Add perspective */
}

.slide-spy .disco-beam {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px; /* Thinner beams */
  height: 150%; /* Extend beyond bottom */
  transform-origin: top right;
  opacity: 0.4;
  filter: blur(1px);
  mix-blend-mode: screen;
}

/* Individual beam styles and animations */
.slide-spy .disco-beam:nth-child(1) {
  background: linear-gradient(to bottom, rgba(255, 105, 180, 0.7) 0%, transparent 80%); /* Pink */
  transform: rotate(-40deg);
  animation: beamSweep1 10s linear infinite alternate;
}

.slide-spy .disco-beam:nth-child(2) {
  background: linear-gradient(to bottom, rgba(0, 255, 255, 0.7) 0%, transparent 80%); /* Cyan */
  transform: rotate(-55deg);
  width: 3px;
  animation: beamSweep2 12s linear infinite alternate;
  animation-delay: -2s;
}

.slide-spy .disco-beam:nth-child(3) {
  background: linear-gradient(to bottom, rgba(255, 255, 0, 0.6) 0%, transparent 80%); /* Yellow */
  transform: rotate(-70deg);
  width: 5px;
  animation: beamSweep3 9s linear infinite alternate;
  animation-delay: -4s;
}

.slide-spy .disco-beam:nth-child(4) {
  background: linear-gradient(to bottom, rgba(150, 100, 255, 0.7) 0%, transparent 80%); /* Purple */
  transform: rotate(-85deg);
  animation: beamSweep4 11s linear infinite alternate;
  animation-delay: -6s;
}

/* Keyframes for beam sweeping animations */
@keyframes beamSweep1 {
  0% { transform: rotate(-40deg); opacity: 0.4; }
  50% { transform: rotate(-60deg); opacity: 0.5; }
  100% { transform: rotate(-35deg); opacity: 0.45; }
}

@keyframes beamSweep2 {
  0% { transform: rotate(-55deg); opacity: 0.35; }
  50% { transform: rotate(-80deg); opacity: 0.45; }
  100% { transform: rotate(-50deg); opacity: 0.4; }
}

@keyframes beamSweep3 {
  0% { transform: rotate(-70deg); opacity: 0.45; }
  50% { transform: rotate(-45deg); opacity: 0.55; }
  100% { transform: rotate(-75deg); opacity: 0.4; }
}

@keyframes beamSweep4 {
  0% { transform: rotate(-85deg); opacity: 0.3; }
  50% { transform: rotate(-60deg); opacity: 0.4; }
  100% { transform: rotate(-90deg); opacity: 0.35; }
}


/* Slide content styling */