/* ======================================== */
/*      Custom Styles for SBRE Pest Control */
/* ======================================== */

/* --- Keyframe Animations --- */

/* This defines the "float" animation sequence */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --- Reusable Animation & Gradient Classes --- */

/* Apply this class to any element you want to have the float animation */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* A custom gradient for hero sections */
.hero-gradient {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #f97316 100%);
}

/* --- Component-Specific Styles --- */

/* Custom styling for service cards */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  /* You can also add a box-shadow effect here if you like */
  /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
}


/* --- Custom Color Classes (Optional) --- */
/*
  Note: It's generally better to use Tailwind's built-in colors
  (e.g., `bg-orange-500`, `text-orange-500`) for consistency.
  These are here because you asked for them specifically.
*/
.bg-pest-orange {
  background-color: #f97316; /* This is the same as Tailwind's `bg-orange-500` */
}

.text-pest-orange {
  color: #f97316; /* This is the same as Tailwind's `text-orange-500` */
}