.hero {
  position: relative;
  padding: 80px 0;
}

.hero .hero-visual {
  position: relative;
}

.hero .hero-visual .hero-image-wrapper {
  position: relative;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.hero .hero-visual .hero-image-wrapper .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-visual .floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hero .hero-visual .floating-elements .floating-card {
  position: absolute;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: floating 3s ease-in-out infinite;
}

.hero .hero-visual .floating-elements .floating-card i {
  font-size: 1.125rem;
  color: #0d6efd; /* Bootstrap primary color */
}

.hero .hero-visual .floating-elements .floating-card span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #212529; /* Bootstrap heading color */
  white-space: nowrap;
}

.hero .floating-card.card-1 {
  top: 10px;
  left: 40%;
  animation-delay: 0s;
}

.hero .floating-card.card-2 {
  top: 50%;
  right: 15px;
  animation-delay: -1s;
}

.hero .floating-card.card-3 {
  bottom: 25%;
  left: 15px;
  animation-delay: -2s;
}

/* Floating animation */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0;
  }

  .hero .floating-elements .floating-card {
    padding: 12px 16px;
  }

  .hero .floating-elements .floating-card span {
    font-size: 0.75rem;
  }

  .hero .floating-card.card-1 { left: 5px; }
  .hero .floating-card.card-2 { right: 5px; }
  .hero .floating-card.card-3 { left: 10px; }
}