.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-14788 .elementor-element.elementor-element-2eb5e7f .gallery-item .gallery-caption{text-align:center;}@media(max-width:1024px){.elementor-widget-image-gallery .gallery-item .gallery-caption{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:767px){.elementor-widget-image-gallery .gallery-item .gallery-caption{font-size:var( --e-global-typography-accent-font-size );}}/* Start custom CSS for image-gallery, class: .elementor-element-2eb5e7f *//* Neat Elementor Image Gallery: equal-size grid, no hover effects
   Setup: select the Image Gallery widget, go to Advanced > CSS Classes and add: neat-gallery
   Then paste this into Appearance > Customize > Additional CSS.
   Keep the widget on Columns: 4 and Link: Media File (lightbox) as it is now. */

.neat-gallery {
  --ng-cols: 4;
  --ng-gap: 20px;
  --ng-ratio: 16 / 15;     /* same shape as the carousel above; try 4 / 3 for taller photos */
  --ng-radius: 14px;
  margin-top: 12px;
}

/* The grid */
.neat-gallery .elementor-image-gallery .gallery {
  display: grid !important;
  grid-template-columns: repeat(var(--ng-cols), minmax(0, 1fr));
  gap: var(--ng-gap);
  margin: 0 !important;
}

/* Reset the widths and spacing Elementor puts on each item */
.neat-gallery .elementor-image-gallery .gallery-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.neat-gallery .elementor-image-gallery .gallery-icon {
  margin: 0;
  padding: 0;
}

/* Every photo gets the same box, whatever its original size */
.neat-gallery .elementor-image-gallery .gallery-icon a {
  display: block;
  aspect-ratio: var(--ng-ratio);
  border: 1px solid #E4E7F2;
  border-radius: var(--ng-radius);
  overflow: hidden;
  background: #EEF0F8;
  line-height: 0;
}

.neat-gallery .elementor-image-gallery .gallery-icon img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0;
  object-fit: cover;          /* crops to fill the box without stretching */
  object-position: center;
}

/* No hover effects: keep everything exactly as it is */
.neat-gallery .elementor-image-gallery .gallery-item,
.neat-gallery .elementor-image-gallery .gallery-icon a,
.neat-gallery .elementor-image-gallery .gallery-icon img {
  transition: none !important;
}

.neat-gallery .elementor-image-gallery .gallery-item:hover,
.neat-gallery .elementor-image-gallery .gallery-icon a:hover,
.neat-gallery .elementor-image-gallery .gallery-icon a:hover img {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Keyboard focus (not a hover effect, needed for accessibility) */
.neat-gallery .elementor-image-gallery .gallery-icon a:focus-visible {
  outline: 3px solid #2E3192;
  outline-offset: 3px;
}

/* Tablet and phone */
@media (max-width: 1024px) {
  .neat-gallery { --ng-cols: 3; }
}

@media (max-width: 767px) {
  .neat-gallery {
    --ng-cols: 2;
    --ng-gap: 12px;
    --ng-ratio: 4 / 3;
    --ng-radius: 10px;
  }
}/* End custom CSS */