/* Cybersecurity Themed Backgrounds */

/* Base cyber background class */
.cyber-bg {
  position: relative;
  color: white;
  overflow: hidden;
  background-color: #121212;
}

.cyber-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.cyber-bg > .container {
  position: relative;
  z-index: 1;
}

/* Shield pattern background */
.cyber-bg-shield {
  background-color: #0a1128;
  background-image: linear-gradient(135deg, #0a1128 0%, #001f54 100%);
}

.cyber-bg-shield::before {
  background-image: radial-gradient(circle at 15% 50%, rgba(0, 150, 255, 0.2) 0%, transparent 50%), 
                    radial-gradient(circle at 85% 30%, rgba(0, 150, 255, 0.2) 0%, transparent 50%);
  animation: shieldPulse 8s infinite alternate;
}

/* Matrix-like background */
.cyber-bg-matrix {
  background-color: #0a192f;
  background-image: linear-gradient(to bottom, #0a192f 0%, #051937 100%);
}

.cyber-bg-matrix::before {
  background: 
    linear-gradient(90deg, rgba(0, 255, 70, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(0deg, rgba(0, 255, 70, 0.07) 1px, transparent 1px) 0 0 / 20px 20px;
  animation: matrixScroll 20s linear infinite;
}

/* Circuit board background */
.cyber-bg-circuit {
  background-color: #1e2749;
  background-image: linear-gradient(to top, #1e2749 0%, #162447 100%);
}

.cyber-bg-circuit::before {
  background: 
    radial-gradient(circle at 50% 50%, transparent 2px, rgba(255, 160, 0, 0.1) 2px, transparent 4px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(255, 160, 0, 0.05) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(0deg, rgba(255, 160, 0, 0.05) 1px, transparent 1px) 0 0 / 30px 30px;
  animation: circuitGlow 10s ease-in-out infinite alternate;
}

/* Binary code background */
.cyber-bg-binary {
  background-color: #161b22;
  background-image: linear-gradient(to right, #161b22 0%, #0d1117 100%);
}

.cyber-bg-binary::before {
  content: '10101010010101001010010101001010';
  font-family: monospace;
  font-size: 20px;
  line-height: 1;
  color: rgba(200, 200, 255, 0.05);
  letter-spacing: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: hidden;
  animation: binaryFade 15s ease infinite;
}

/* Text color on light backgrounds */
.text-dark-on-light {
  color: #212529 !important;
}

/* Card styling in cyber backgrounds */
.cyber-bg .card {
  backdrop-filter: blur(5px);
  background-color: rgba(22, 28, 45, 0.7) !important;
  border: 1px solid rgba(100, 100, 255, 0.1);
}

.cyber-bg .text-white {
  color: #f8f9fa !important;
}

/* Dark card styling for replacing bg-light */
.dark-card {
  background-color: #1a1f2e !important;
  border: 1px solid rgba(100, 100, 255, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  color: white !important;
}

.dark-card h1, .dark-card h2, .dark-card h3, 
.dark-card h4, .dark-card h5, .dark-card h6,
.dark-card p, .dark-card li, .dark-card span {
  color: white !important;
}

.dark-card .text-secondary {
  color: #adb5bd !important;
}

/* Make all card text white in these sections */
.cyber-bg .card {
  color: white;
}

.cyber-bg .card h3,
.cyber-bg .card h4,
.cyber-bg .card h5,
.cyber-bg .card p,
.cyber-bg .card .text-secondary {
  color: white !important;
}

/* Animations */
@keyframes shieldPulse {
  0% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
}

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

@keyframes circuitGlow {
  0% {
    opacity: 0.3;
    filter: hue-rotate(0deg);
  }
  50% {
    opacity: 0.5;
    filter: hue-rotate(90deg);
  }
  100% {
    opacity: 0.3;
    filter: hue-rotate(180deg);
  }
}

@keyframes binaryFade {
  0% {
    opacity: 0.03;
    transform: translateY(0);
  }
  50% {
    opacity: 0.08;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0.03;
    transform: translateY(0);
  }
}

/* Add responsive adjustments */
@media (max-width: 767px) {
  .cyber-bg {
    padding: 2rem 0;
  }
  
  .cyber-bg::before {
    background-size: 100px;
  }
}

/* Step number styling */
.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.25rem;
}