/* ==== 
 --------- Banner Fixes and Enhancements ---------
 ==== */

// Trust Indicators for Banner
.about-banner .trust-indicators {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  
  .trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    
    i {
      color: #10b981;
      font-size: 1rem;
    }
  }
}

// Floating Metrics for Banner
.about-banner .floating-metrics {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .metric-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: metricFloat 6s ease-in-out infinite;
    
    .metric-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        font-size: 1rem;
        color: var(--white);
      }
    }
    
    .metric-content {
      .metric-value {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        font-family: var(--font-family-display);
        line-height: 1;
      }
      
      .metric-label {
        font-size: 0.75rem;
        color: #64748b;
        text-transform: none;
        letter-spacing: 0.05em;
        margin-top: 0.25rem;
      }
    }
    
    &.metric-1 {
      top: 10%;
      right: -20px;
      animation-delay: 0s;
    }
    
    &.metric-2 {
      top: 50%;
      left: -20px;
      animation-delay: 2s;
    }
    
    &.metric-3 {
      bottom: 20%;
      right: -20px;
      animation-delay: 4s;
    }
  }
}

// Animation for floating metrics
@keyframes metricFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

// Responsive adjustments for banner
@media (max-width: 768px) {
  .about-banner {
    .trust-indicators {
      justify-content: center;
      gap: 1rem;
      
      .trust-item {
        font-size: 0.8rem;
      }
    }
    
    .floating-metrics {
      .metric-card {
        padding: 0.75rem;
        
        .metric-icon {
          width: 32px;
          height: 32px;
          
          i {
            font-size: 0.875rem;
          }
        }
        
        .metric-content {
          .metric-value {
            font-size: 1rem;
          }
          
          .metric-label {
            font-size: 0.7rem;
          }
        }
        
        &.metric-1 {
          top: 5%;
          right: -10px;
        }
        
        &.metric-2 {
          top: 60%;
          left: -10px;
        }
        
        &.metric-3 {
          bottom: 10%;
          right: -10px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .about-banner {
    .trust-indicators {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }
    
    .floating-metrics {
      .metric-card {
        padding: 0.5rem;
        
        .metric-icon {
          width: 28px;
          height: 28px;
          
          i {
            font-size: 0.75rem;
          }
        }
        
        .metric-content {
          .metric-value {
            font-size: 0.9rem;
          }
          
          .metric-label {
            font-size: 0.65rem;
          }
        }
      }
    }
  }
}