/* 
  Custom Styles - Edit this file to add your own CSS
  This file is loaded after the main styles, so you can override them here
*/

/* Example: Custom animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

/* Add your custom CSS below */

/* Hero Background */
#home {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/hero-background.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}