/*
 * DYNAMIC HOVER EFFECT (FOR SINGLE ZOHO COMPONENT)
 * Applies to parent containers with the "dynamic-hover-card" class.
*/

/* 1. Main Container Styling */
.dynamic-hover-card {
  position: relative !important;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER: Main container background and shadow change */
.dynamic-hover-card:hover {
  background-color: #000000;
}

/* 2. Styling the Component's Inner Content */
.dynamic-hover-card .z-element-wrapper { 
  position: relative;
  z-index: 10; /* Keep content above the background SVG */
}

/* Target the image, heading, and text inside the component */
.dynamic-hover-card img {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dynamic-hover-card h1, .dynamic-hover-card h2, .dynamic-hover-card h3, .dynamic-hover-card h4 {
  transition: color 0.3s ease;
  color: #111827; /* Default heading color */
}
.dynamic-hover-card p {
  color: #4b5563; /* Default text color */
  transition: color 0.3s ease;
}

/* HOVER: Change colors of the inner content */
.dynamic-hover-card:hover img {
  opacity: 0.9; /* Optional: Make image slightly transparent */
}
.dynamic-hover-card:hover h1, .dynamic-hover-card:hover h2, .dynamic-hover-card:hover h3, .dynamic-hover-card:hover h4 {
  color: #ffffff !important;
}
.dynamic-hover-card:hover p {
  color: #d1d5db !important;
}

.dynamic-hover-card .gradient-start {
  stop-opacity: 0.05;
  transition: stop-opacity 0.3s ease;
}
.dynamic-hover-card .gradient-end {
  stop-opacity: 0.3;
  transition: stop-opacity 0.3s ease;
}

.dynamic-hover-card:hover .gradient-start {
  stop-opacity: 0.3;
}
.dynamic-hover-card:hover .gradient-end {
  stop-opacity: 0.8;
}

.dynamic-hover-card:hover *,
.dynamic-hover-card:hover h1 span *,
.dynamic-hover-card:hover h2 span *,
.dynamic-hover-card:hover h3 span *,
.dynamic-hover-card:hover h4 span * {
  color: #ffffff !important;
}