@charset "utf-8";

body {
  background-color: #FFFFFF;
}

.btn-info {
  background-color: #fff100;
  border-color: #fff100;
  color: #000;
}

.btn-info:hover {
  background-color: #e6d400;
  border-color: #e6d400;
  color: #000;
}

.hero-section {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.0)),
    url('https://espipools.com/static/hero-1.jpg'); 
  background-size: cover;
  background-position:top center;
  background-repeat: no-repeat;
  position: relative;
}

.hero-title {
  position: relative;
  z-index: 2;
}

@media screen and (max-width:576px) {
	
.hero-section {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,1.0), rgba(255,255,255,0.0)),
    url('https://espipools.com/static/hero-1.jpg'); 
  background-size: cover;
  background-position:bottom left;
  background-repeat: no-repeat;
  position: relative;
}

	
}

/* Simple fade-in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Optional delays so elements don't all pop at once */
.fade-delay-1 {
  animation-delay: 0.15s;
}
.fade-delay-2 {
  animation-delay: 0.30s;
}
.fade-delay-3 {
  animation-delay: 0.45s;
}