/* Custom Styles & Tailwind Configuration */

/* --- Animations --- */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-in forwards;
}

/* --- Root Variables --- */
:root {
  --primary-color: #20b2aa; /* Light Sea Green / Teal from logo */
}

/* --- Base Styles --- */
html {
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
}

/* --- Hero Background --- */
.hero-bg {
  background: linear-gradient(135deg, #e0f2f1 0%, #ffffff 100%);
}

/* --- Text & Background Helpers --- */
.text-primary {
  color: var(--primary-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.hover\:bg-primary-dark:hover {
  background-color: #1a9e96;
}

/* --- Shadows --- */
.shadow-lg-primary {
  box-shadow: 0 10px 15px -3px rgba(32, 178, 170, 0.2),
    0 4px 6px -2px rgba(32, 178, 170, 0.1);
}

/* --- Smooth scrolling for anchor links --- */
nav a {
  transition: color 0.2s;
}

/* ===================================================
   Custom Hover Fix for "Contact Us" & "Get Started"
   =================================================== */

button.contact-us:hover,
button.get-started:hover,
a.contact-us:hover,
a.get-started:hover {
  background-color: #20b2aa ; /* Keep brand teal on hover */
  color: #fff ; /* Keep text white */
  transition: background-color 0.3s ease, transform 0.2s ease;
  transform: scale(1.02); /* Subtle lift effect */
}

/* Optional: smooth hover for all buttons */
button,
a.button {
  transition: all 0.3s ease;
}