/* Mobile Overrides for Hero Section (Index Page) */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column !important;
    padding: 60px 1rem 60px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .hero-text {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Typography */
  h1 {
    font-size: 2.6rem !important;
    letter-spacing: -1px !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
  }

  .hero-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    max-width: 100% !important;
  }

  /* CTA Buttons - Single horizontal row */
  .hero-buttons {
    order: 2 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    width: 100% !important;
    margin-bottom: 2.5rem !important;
  }

  .hero-buttons button {
    flex: 1 !important;
    padding: 0.8rem 0.5rem !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Stats Section - All 3 in one row */
  .hero-stats {
    order: 3 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
    margin-bottom: 3rem !important;
  }

  .stat-item {
    flex: 1 !important;
    text-align: center !important;
  }

  .stat-number {
    font-size: 1.6rem !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-label {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Hero Image - Bottom */
  .hero-image {
    order: 4 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    animation: fadeInUp 1s ease-out 0.8s both !important;
  }

  .building-container {
    width: 100% !important;
    max-width: 320px !important;
    height: 320px !important;
    margin: 0 auto !important;
  }

  /* Floating Cards - Refined for Mobile */
  .floating-card {
    display: grid !important; /* Use grid for 2-column, 2-row text layout */
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 0.8rem !important;
    row-gap: 0 !important;
    padding: 0.6rem 1rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 145, 255, 0.15) !important;
    width: auto !important;
    min-width: 140px !important;
    transform: none !important;
    animation: floatCard 4s ease-in-out infinite !important;
    z-index: 20 !important;
  }

  .card-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important; /* Span across both title and value rows */
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .card-icon svg {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 0 !important;
  }

  .card-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
  }

  .card-value {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .card-1 {
    top: 15px !important;
    left: 10px !important;
    animation-delay: 0s !important;
  }

  .card-2 {
    bottom: 15px !important;
    right: 10px !important;
    animation-delay: 1s !important;
  }

  /* Scroll Indicator Fix */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .scroll-indicator {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0px auto 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 5 !important;
    animation: bounceMobile 2s infinite !important;
    order: 5 !important; /* Ensure it's last in the flex flow */
  }

  /* Mobile-specific bounce animation to avoid translateX conflict */
  @keyframes bounceMobile {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px);
    }
  }
}