/* 1. SETUP: The Container */
.text-container {
  cursor: pointer;
  position: relative;
}

/* 2. LOGIC: Ensures the click hits the container, not the child elements */
.text-container * {
  pointer-events: none;
}

/* 3. BASE STATE: Text is invisible by default */
.hover-text {
  opacity: 0;
  transition: opacity 0.4s ease;
  display: block;
}

/* 4. DESKTOP ONLY: Apply the hover effect only if a mouse is detected */
@media (hover: hover) {
  .text-container:hover .hover-text {
    opacity: 1;
  }
}

/* 5. MOBILE ONLY: Text visibility and Hero Slider Fixes */
@media only screen and (max-width: 1024px) {
  
  /* Make the hover text visible on touch devices */
  .hover-text {
    opacity: 1;
  }

/* Target the hero slider specifically for mobile */
/*@media only screen and (max-width: 1024px) {
  
  .zpbanner-slider, 
  .zpbanner-slider .zp-slide, 
  .zpbanner-slider .zp-slider-item {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 60vh !important; 
    /* This forces whatever is 'grey' to be invisible if the image fails */
    background-color: transparent !important; 
  }

  /* Target the actual element holding the image */
 /* .zpbanner-slider [style*="background-image"] {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    min-height: 60vh !important; */
  }
}
}
}
  }
}