.elementor-kit-16{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-284b1be:#44795C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Target each figure in the grid */
.jltma-image-hover-effect figure {
  position: relative;
  z-index: 1;
  transition: transform 0.1s ease, box-shadow 0.3s ease, z-index 0s;
}

/* When you hover on one */
.jltma-image-hover-effect figure:hover {
  z-index: 99; /* Bring above others */
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(68, 121, 92, 0.50);
}

/* Optional: make sure parent doesn't clip the overflow */
.jltma-image-hover-effect {
  overflow: visible !important;
}

.hover-logo {
  width: 120px !important;
  height: auto !important;
  object-fit: contain;
  display: inline-block;
}
.jltma-image-hover-effect-sadie figure:hover::before {
  background-color: rgba(68, 128, 92, 0.3);
}

/* Base: make sure the overlay exists & is invisible initially */
.jltma-effect-sadie figcaption::before {
  content: "";
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  background: rgba(68, 128, 92, 0.3) !important; /* your 68,128,92 at 0.3 */
  opacity: 0;
  transition: opacity 0.1s ease, background-color 0.1s ease;
  pointer-events: none;
  z-index: 0;
}

/* On hover: reveal overlay */
.jltma-effect-sadie:hover figcaption::before {
  opacity: 1;
}

/* Ensure the overlay content aligns left */
.jltma-image-hover-effect-sadie figcaption {
  text-align: left !important;
  padding-left: 20px !important; /* adjust as needed to match your paragraph */
}

/* Align the logo (header) to the same left as text */
.jltma-image-hover-effect-sadie .elementor-widget-heading,
.jltma-image-hover-effect-sadie h2,
.jltma-image-hover-effect-sadie h3,
.jltma-image-hover-effect-sadie h4,
.jltma-image-hover-effect-sadie .hover-logo {
  text-align: left !important;
  margin-left: 0px !important;
  margin-bottom: 20px!important;
  /* same padding as text */
  display: block !important;
  width: 120px !important;
  height: auto !important;
}

/* Align description text and maintain spacing */
.jltma-image-hover-effect-sadie figcaption p {
  text-align: justify !important;
  margin-left: 20px !important;
  margin-top: 10px !important;
  margin-right: 20px !important;
  color: #fff !important;
  line-height: 1.6;
}/* End custom CSS */