/**
 * Floating Technology Cards Styles
 * Styling for the floating technology cards that appear around particles
 */

.floating-card {
  position: absolute;
  background-color: rgba(240, 244, 255, 0.712);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 15px rgba(78, 114, 223, 0.3);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.floating-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 25px rgba(78, 114, 223, 0.4);
  background-color: rgba(78, 114, 223, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.floating-card i {
  font-size: 18px;
  color: #4e72df;
}

/* Animation classes for different cards */
.floating-card.card-1 {
  animation: float1 20s ease-in-out infinite;
  top: 15%;
  left: 15%;
}

.floating-card.card-2 {
  animation: float2 25s ease-in-out infinite;
  top: 10%;
  right: 25%;
}

.floating-card.card-3 {
  animation: float3 22s ease-in-out infinite;
  bottom: 30%;
  left: 40%;
}

.floating-card.card-4 {
  animation: float4 28s ease-in-out infinite;
  top: 40%;
  right: 15%;
}

.floating-card.card-5 {
  animation: float5 24s ease-in-out infinite;
  bottom: 20%;
  left: 20%;
}

/* Floating animations */
@keyframes float1 {
  0%, 100% { transform: translate(15%, 15%); }
  25% { transform: translate(20%, 25%); }
  50% { transform: translate(25%, 20%); }
  75% { transform: translate(10%, 30%); }
}

@keyframes float2 {
  0%, 100% { transform: translate(65%, 10%); }
  25% { transform: translate(70%, 15%); }
  50% { transform: translate(60%, 20%); }
  75% { transform: translate(75%, 5%); }
}

@keyframes float3 {
  0%, 100% { transform: translate(40%, 60%); }
  25% { transform: translate(35%, 55%); }
  50% { transform: translate(45%, 65%); }
  75% { transform: translate(30%, 50%); }
}

@keyframes float4 {
  0%, 100% { transform: translate(75%, 40%); }
  25% { transform: translate(70%, 45%); }
  50% { transform: translate(80%, 35%); }
  75% { transform: translate(65%, 50%); }
}

@keyframes float5 {
  0%, 100% { transform: translate(20%, 35%); }
  25% { transform: translate(25%, 30%); }
  50% { transform: translate(15%, 40%); }
  75% { transform: translate(30%, 25%); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-card {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .floating-card i {
    font-size: 16px;
  }
}