.elementor-2333 .elementor-element.elementor-element-d12afa9{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:1px 6px;--row-gap:1px;--column-gap:6px;--grid-auto-flow:row;--overflow:auto;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-2333 .elementor-element.elementor-element-f2f2a84{--grid-columns:3;--grid-row-gap:5px;--grid-column-gap:10px;}.elementor-2333 .elementor-element.elementor-element-f2f2a84 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2333 .elementor-element.elementor-element-f2f2a84.elementor-element{--flex-grow:1;--flex-shrink:0;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-2333 .elementor-element.elementor-element-d12afa9{--grid-auto-flow:row;}.elementor-2333 .elementor-element.elementor-element-f2f2a84{--grid-columns:2;}}@media(min-width:768px){.elementor-2333 .elementor-element.elementor-element-d12afa9{--width:100%;}}@media(max-width:767px){.elementor-2333 .elementor-element.elementor-element-d12afa9{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2333 .elementor-element.elementor-element-f2f2a84{--grid-columns:1;}}/* Start custom CSS for loop-grid, class: .elementor-element-f2f2a84 *//* Force the Loop Grid to use CSS Grid (3 columns) */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 0;
  grid-auto-flow: row dense;
  gap: 5px !important; /* Force your desired gap */
  column-gap: 10px !important;
  row-gap: 5px !important;
  align-items: start;
}

/* Remove any margin from items */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .e-loop-item {
  align-self: start;
  min-height: 0;
  margin: 0 !important; /* Force no margin */
}

/* Make images responsive */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .e-loop-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}

/* Hide the helper ACF output */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .acf-grid-span {
  display: none !important;
}

/* Mobile: single column */
@media (max-width: 767px) {
  .elementor-2333 .elementor-element.elementor-element-f2f2a84 .elementor-loop-container {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-auto-rows: 10px;
    gap: 10px !important;
  }
  .elementor-2333 .elementor-element.elementor-element-f2f2a84 .e-loop-item {
    grid-column: span 1 !important;
  }
}





/* ----------------------------------
 * 1. (hover) SET UP THE HOVER CONTAINER
 * ---------------------------------- */
 .elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item {
    position: relative;
    overflow: hidden; 
    cursor: pointer;
}

/* ----------------------------------
 * 2. CREATE THE OVERLAY LAYER
 * ---------------------------------- */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); 
    transition: background-color 0.95s ease-in-out; 
    z-index: 5; 
    /* NEW ADDITION: Ensure overlay covers the entire box */
    pointer-events: none; 
}

/* ----------------------------------
 * 3. STYLE, POSITION, AND HIDE THE TEXT
 * ---------------------------------- */
/* Target the specific Elementor Text Editor Widget */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item .elementor-widget-text-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10;
    color: #333;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    
    /* Allow hover and click through unless on the link */
    pointer-events: none;
}

/* Re-enable clicks specifically on links inside */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item .elementor-widget-text-editor a {
    pointer-events: auto;
    position: relative;
    z-index: 20;
}

/* ----------------------------------
 * 4. HOVER EFFECT (Show Overlay and Text)
 * ---------------------------------- */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item:hover::before {
    background-color: rgba(255, 255, 255, 0.95); 
}

.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item:hover .elementor-widget-text-editor {
    opacity: 1; 
}

/* ----------------------------------
 * 5. IMAGE ZOOM
 * ---------------------------------- */
.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

.elementor-2333 .elementor-element.elementor-element-f2f2a84 .hover-item:hover img {
    transform: scale(1.05); 
}/* End custom CSS */
/* Start custom CSS */style {
  display: none !important;
}/* End custom CSS */