/* ===== BUTTON HOVER ANIMATION FIX ===== */

/* Fix hero actions container to accommodate button movement */
.hero__actions {
  padding-top: 10px !important; /* Add space for upward movement */
  padding-bottom: 10px !important; /* Add space for visual balance */
  margin-top: 10px !important; /* Extra margin for safety */
  overflow: visible !important; /* Ensure buttons are always visible */
}

/* Ensure hero content has enough space */
.hero__content {
  padding-bottom: 20px !important; /* Extra space at bottom */
  overflow: visible !important;
}

/* Fix hero container to accommodate button animations */
.hero__container {
  overflow: visible !important; /* Allow buttons to move freely */
  padding-bottom: 3rem !important; /* Extra space at bottom */
}

/* Ensure hero section has enough space */
.hero {
  overflow: visible !important;
  padding-bottom: 2rem !important; /* Extra space for button animations */
}

/* Button specific fixes */
.hero__button {
  margin: 5px 0 !important; /* Add vertical margin for movement space */
  position: relative !important;
  z-index: 10 !important; /* Ensure buttons stay on top */
}

/* Ensure button hover animations work properly */
.hero__button:hover {
  transform: translateY(-3px) !important; /* Slightly more movement for better effect */
  z-index: 20 !important; /* Higher z-index on hover */
}

/* Fix for primary button */
.hero__button--primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4) !important;
}

/* Fix for secondary button */
.hero__button--secondary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure parent containers don't clip the buttons */
.section,
.hero,
.container {
  overflow: visible !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .hero__actions {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 15px !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .hero__button {
    margin: 8px 0 !important;
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }
  
  .hero__container {
    padding-bottom: 4rem !important;
  }
  
  .hero {
    padding-bottom: 3rem !important;
  }
}

/* Small mobile fixes */
@media (max-width: 480px) {
  .hero__actions {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 20px !important;
  }
  
  .hero__button {
    margin: 10px 0 !important;
    max-width: 250px !important;
  }
  
  .hero__container {
    padding-bottom: 5rem !important;
  }
  
  .hero {
    padding-bottom: 4rem !important;
  }
}

/* Ensure features section doesn't interfere */
.features {
  margin-top: 2rem !important;
  padding-top: 3rem !important;
}

/* Additional safety for button visibility */
.hero__button {
  box-sizing: border-box !important;
  will-change: transform !important; /* Optimize for animations */
  backface-visibility: hidden !important; /* Smooth animations */
}

/* Ensure smooth transitions */
.hero__button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix any potential clipping issues */
.hero__content,
.hero__actions,
.hero__button {
  transform-style: preserve-3d !important;
}

/* Ensure buttons don't get cut off at container edges */
.hero__actions::before,
.hero__actions::after {
  content: '' !important;
  display: block !important;
  height: 5px !important;
  width: 100% !important;
}

/* Additional container fixes for button animations */
.hero__container {
  position: relative !important;
  z-index: 1 !important;
}

.hero__content {
  position: relative !important;
  z-index: 2 !important;
}

.hero__actions {
  position: relative !important;
  z-index: 3 !important;
}

/* Ensure no parent element clips the animated buttons */
body,
html,
.hero,
.hero__container,
.hero__content,
.hero__actions {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Special fix for very large screens */
@media (min-width: 1400px) {
  .hero__actions {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 15px !important;
  }
  
  .hero__container {
    padding-bottom: 4rem !important;
  }
}

/* Debug: Ensure buttons are always visible (remove in production) */
.hero__button {
  outline: none !important;
  border: none !important;
  background-clip: padding-box !important;
}