.elementor-8587 .elementor-element.elementor-element-9e22e26{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8587 .elementor-element.elementor-element-c0ce890{--display:flex;--margin-top:2%;--margin-bottom:2%;--margin-left:0%;--margin-right:0%;}.elementor-8587 .elementor-element.elementor-element-c0ce890.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8587 .elementor-element.elementor-element-9e7f126 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-8587 .elementor-element.elementor-element-9e7f126{text-align:center;}.elementor-8587 .elementor-element.elementor-element-2de047c{--divider-border-style:solid;--divider-color:#000;--divider-border-width:2px;}.elementor-8587 .elementor-element.elementor-element-2de047c > .elementor-widget-container{margin:-10px 0px 0px 0px;}.elementor-8587 .elementor-element.elementor-element-2de047c .elementor-divider-separator{width:100%;}.elementor-8587 .elementor-element.elementor-element-2de047c .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-8587 .elementor-element.elementor-element-2ab0cde > .elementor-widget-container{margin:0px 0px 0px 0px;padding:15px 15px 15px 15px;}.elementor-8587 .elementor-element.elementor-element-b543748{--display:flex;}/* Start custom CSS for container, class: .elementor-element-b543748 *//* Container holds the images exactly stacked over each other */
.image-morph-container {
  position: relative;
  width: 100%;
  max-width: 25%; /* Adjust maximum width to fit your design */
  height: 325px;    /* Adjust height to match your images aspect ratio */
  margin: 0 auto;
  overflow: hidden;
}

/* Stack all images absolutely and set the base transition state */
.morph-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images scale cleanly without distortion */
  opacity: 0;
  animation: morphAnimation 16s infinite ease-in-out;
}

/* Assign delays to each image so they cycle consecutively; 8/26/26 855pm changed order to reduce, reuse, recycle - more common order */
.morph-img:nth-child(1) { animation-delay: 0s; }
.morph-img:nth-child(3) { animation-delay: 4s; }
.morph-img:nth-child(4) { animation-delay: 8s; }
.morph-img:nth-child(2) { animation-delay: 12s; }

/* 
  Animation Logic: Total cycle is 16 seconds. Each image gets a 4s window.
  It transitions from transparent (0%) to fully visible (5%), stays 
  visible (25%), then morphs/fades out into the next image (30%).
*/
@keyframes morphAnimation {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}/* End custom CSS */