/* BETTER HERO SPACING - More Breathing Room */

.hero-crafts {
  padding: 8rem 2rem 5rem !important;
}

/* Make Background Image More Visible */
.hero-image-overlay {
  background: linear-gradient(135deg, rgba(0, 128, 128, 0.65), rgba(0, 102, 102, 0.6)) !important;
}

.hero-content {
  max-width: 700px !important;
}

.hero-badge-animated {
  margin-bottom: 2rem !important;
}

.hero-title {
  margin-bottom: 2.5rem !important;
}

.title-small {
  display: block;
  margin-bottom: 0.75rem !important;
}

.title-large {
  display: block;
  margin: 1rem 0 !important;
  line-height: 1.2 !important;
}

.title-tagline {
  display: block;
  margin-top: 1rem !important;
}

.hero-subtitle {
  margin: 0 auto 3rem !important;
  line-height: 1.8 !important;
  max-width: 600px;
}

.hero-cta-group {
  margin-bottom: 3rem !important;
  gap: 1.5rem !important;
}

.cta-primary,
.cta-secondary {
  padding: 1.25rem 3rem !important;
  font-size: 1.05rem !important;
}

.hero-features-bar {
  margin-top: 3rem !important;
  gap: 1.5rem !important;
}

.feature-badge {
  padding: 0.875rem 1.5rem !important;
}

/* Mobile Spacing */
@media (max-width: 768px) {
  .hero-crafts {
    padding: 7rem 1.5rem 8rem !important;
  }
  
  .hero-badge-animated {
    margin-bottom: 1.5rem !important;
  }
  
  .hero-title {
    margin-bottom: 2rem !important;
  }
  
  .title-large {
    margin: 0.75rem 0 !important;
  }
  
  .hero-subtitle {
    margin-bottom: 2.5rem !important;
  }
  
  .hero-cta-group {
    margin-bottom: 2.5rem !important;
  }
  
  .cta-primary,
  .cta-secondary {
    padding: 1.125rem 2.5rem !important;
  }
  
  /* Hide scroll indicator on mobile - causes overlap */
  .scroll-down {
    display: none !important;
  }
  
  /* Adjust WhatsApp button position on mobile to avoid conflict */
  .whatsapp-float {
    bottom: 85px !important;
    right: 20px !important;
  }
}

/* Tablet Spacing */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-crafts {
    padding: 8rem 3rem 5rem !important;
  }
  
  .hero-subtitle {
    font-size: 1.15rem !important;
  }
}

/* Desktop Large */
@media (min-width: 1025px) {
  .hero-crafts {
    padding: 10rem 4rem 6rem !important;
  }
  
  .hero-content {
    max-width: 800px !important;
  }
  
  .title-large {
    margin: 1.5rem 0 !important;
  }
  
  .hero-subtitle {
    margin-bottom: 3.5rem !important;
    font-size: 1.2rem !important;
  }
  
  .hero-features-bar {
    margin-top: 4rem !important;
  }
}
