/* NEW HOMEPAGE HERO */

.container-hero {
	max-width: 1440px;
	width: 100%;
	margin: 70px auto 0;
	padding: 0;
  }
  .ratio-custom {
    --bs-aspect-ratio: calc(500 / 1440 * 100%);
  }
  /* Invisible overlay to block clicks, hide YouTube title links, and catch hover events */
  .video-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    cursor: default;
  }
    
/* SERVICE BUCKETS */
.service-bucket-wrap {
  margin: -280px auto 0;
  width: 100%;
  height: auto;
}

.service-bucket {
  height: 450px;
  padding: 0;
  margin: 0;
  text-align: center;
  color:#12374A;
  font-family: 'ubuntu', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  position: relative;
  z-index: 10;
  overflow: visible;
}
.service-bucket a {
  color:#12374A;
}
.service-bucket a:hover {
  color:#ffffff;
}
.service-bucket-label {
  position: absolute;
  bottom: 90px;
  width: 100%;
}

.lavendar {
  background-image:url(/sites/576b0ad55918ad610b2ded37/theme/images/pot-lavendar.png),url(/sites/576b0ad55918ad610b2ded37/theme/images/flower-blue-test.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 280px 253px, 163px auto;
  background-position: center bottom, center bottom; 
}
.lavendar:hover {
  background-position: center bottom, center top; 
}

.green {
  background-image:url(/sites/576b0ad55918ad610b2ded37/theme/images/pot-green.png),url(/sites/576b0ad55918ad610b2ded37/theme/images/flower-blue-test.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 280px 253px, 163px auto;
  background-position: center bottom, center bottom; 
}
.green:hover {
  background-position: center bottom, center top; 
}

.blue {
  background-image:url(/sites/576b0ad55918ad610b2ded37/theme/images/pot-blue.png),url(/sites/576b0ad55918ad610b2ded37/theme/images/flower-blue-test.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 280px 253px, 163px auto;
  background-position: center bottom, center bottom; 
}
.blue:hover {
  background-position: center bottom, center top; 
}

/* BEGIN NEW LAVENDAR TEST */

.lavendar-new {
 
  /* 1. Define the 3 images (Top, Middle, Bottom) */
  background-image: 
    url(/sites/576b0ad55918ad610b2ded37/theme/images/pot-lavendar.png),
    url(/sites/576b0ad55918ad610b2ded37/theme/images/flower-blue-test.png), /* Middle: fast */
    url(/sites/576b0ad55918ad610b2ded37/theme/images/flower-blue-test.png); /* Bottom: delayed */

  /* 2. Set the starting positions (X Y) */
  background-position: 
    center bottom,   /* Top: static */
    center 50px,    /* Middle: starts lower */
    center 100px;    /* Bottom: starts lowest */

  background-repeat: no-repeat;
  background-size: 280px 253px;

  /* 3. Configure transitions individually for each background-position */
  /* Syntax: transition: [property] [duration] [timing-function] [delay] */
  transition: background-position 0.6s ease-in-out;
  
  /* We break out transition-delay to target each layer precisely */
  transition-delay: 
    0s,    /* Top: static (delay doesn't matter) */
    0s,    /* Middle: moves immediately */
    0.3s;  /* Bottom: waits 0.4 seconds before moving */
}

/* Hover States */
.lavendar-new:hover {
  background-position: 
    center bottom,   /* Top: stays exactly where it is */
    center top,      /* Middle: moves upward immediately */
    center top;      /* Bottom: moves upward after the 0.3s delay */
}
/* END NEW LAVENDAR TEST */