.cta-button {
  display: inline-block !important;
  background-color: #8e24aa !important; /* Brighter purple for better visibility */
  color: white !important; /* White text for contrast */
  padding: 15px 30px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  transition: all 0.3s !important;
  margin-top: 20px !important;
  font-size: 18px !important;
  border: 3px solid white !important; /* Thicker white border for better visibility */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; /* Add shadow for depth */
  text-decoration: none !important;
  position: relative !important;
  z-index: 10 !important; /* Ensure it's above other elements */
}

.cta-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
  background-color: white !important; /* Change to white on hover */
  color: #8e24aa !important; /* Change text to purple on hover */
}

/* Override any conflicting mobile styles */
@media (max-width: 768px) {
  .cta-button {
    display: inline-block !important;
    background-color: #8e24aa !important; /* Brighter purple for better visibility */
    color: white !important; /* White text for contrast */
    padding: 15px 30px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    margin: 20px auto !important;
    font-size: 18px !important;
    border: 3px solid white !important; /* Thicker white border for better visibility */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; /* Add shadow for depth */
    text-decoration: none !important;
  }
  
  .cta-button:hover {
    background-color: white !important; /* Change to white on hover */
    color: #8e24aa !important; /* Change text to purple on hover */
  }
}

/* Ensure the button is visible in the hero section specifically */
.hero .cta-button {
  background-color: #8e24aa !important; /* Brighter purple for better visibility */
  color: white !important; /* White text for contrast */
  border: 3px solid white !important; /* Thicker white border for better visibility */
  display: inline-block !important;
  margin: 20px auto !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; /* Add shadow for depth */
}