/* 
Theme Name: UnSecretAgents-child-hello-elementor
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: UnSecretAgents-child-hello-elementor
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/*
.js-es-single-property-layout .es-gallery--sm, .es-gallery--xsm, .es-slider--sm, .es-slider--xsm {
	display: flex !important;
}

*/

.es-gallery {
	display: flex !important;
}





.grid-container-items-of-interest {
  display: grid; /* Activates the grid layout */
  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal fraction width */
  gap: 16px; /* Adds spacing between the rows and columns */
}

/* Optional styling just to make the items visible */
.grid-item-items-of-interest {
  background-color: #000000;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}


/* Box sizing reset for easier spacing math */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Wrapper wrapper to constrain the overall layout size */
.gallery-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Space between the main image and the thumbnails */
}

/* Base image rules to ensure responsiveness and aspect ratio */
.gallery-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents distortion by cropping excess edges */
  display: block;
}

/* Main image display aspect ratio */
.main-image {
  width: 100%;
  aspect-ratio: 16 / 9; /* Keeps a consistent widescreen proportion */
  background-color: #f0f0f0;
}

/* Mobile first layout: Thumbs stack in a 2x2 grid on small viewports */
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; /* Uniform spacing between images */
}

.thumb {
  aspect-ratio: 1 / 1; /* Squarifies thumbnails uniformly */
  background-color: #e0e0e0;
}

/* Thumbnail grid layout */
.sub-images {
  display: grid;
  /* Creates 4 equal columns on desktop */
  gap: 16px; /* Equal spacing between thumbnails */
}

/* Desktop layout: Adjusts to a 4-column row above mobile sizes */
@media (min-width: 768px) {
  .thumbnail-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 equally-spaced columns */
    gap: 16px; /* Slightly wider spacing on larger displays */
  }
}

.es-slider .slick-arrow.slick-next {
    background: rgba(0,0,0,0.4);
    padding: 8px 0 8px 16px;
    border-radius: 35px;
}

.es-slider .slick-arrow.slick-prev {
    background: rgba(0,0,0,0.4);
    padding: 8px 4px 8px 12px;
    border-radius: 35px;
}

.slick-slide {
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

@media screen and (min-width: 1024px){
  .elementor-sticky--effects {
    max-height: 7.5vh !important;
    transition: max-height 0.3s ease;
  }  

  .elementor-sticky--effects a img {
    max-height: 150px;
    transition: max-height 0.3s ease;
  }
}