/* Portfolio image clarity and tile adjustments */
    .my-shuffle-container .picture-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      /* tighter spacing */
    }

    .my-shuffle-container .picture-item img {
      max-width: 100%;
      height: auto;
      object-fit: contain;

      /* sharper rendering */
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: pixelated;
    }

    /* Auto tile width adapts to content but max 3 per row */
    @media (min-width: 768px) {
      .my-shuffle-container .picture-item {
        flex: 0 0 auto;
        width: auto;
        /* adapts to image */
        max-width: 33%;
        /* up to 3 per row */
      }
    }

       /* Portfolio image clarity and tile adjustments - full width tiles */
    .my-shuffle-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
    }

    .my-shuffle-container .picture-item {
      flex: 1 1 calc(33% - 15px);
      /* 3 per row */
      max-width: calc(33% - 15px);
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 992px) {
      .my-shuffle-container .picture-item {
        flex: 1 1 calc(50% - 15px);
        /* 2 per row on medium screens */
        max-width: calc(50% - 15px);
      }
    }

    @media (max-width: 600px) {
      .my-shuffle-container .picture-item {
        flex: 1 1 100%;
        /* 1 per row on small screens */
        max-width: 100%;
      }
    }

    .my-shuffle-container .picture-item img {
      width: 100%;
      height: auto;
      object-fit: contain;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: pixelated;
    }

        /* Lightbox overlay */
    #lightbox {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
    }

    #lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      background: #fff;
      padding: 5px;
    }
/*Main top banner sections.css*/
.hero-section {
  --hero-background: linear-gradient(180deg, rgba(227, 161, 48, 0.95), rgba(255, 255, 255, .92));
}

/*how we work sections.css*/
.lite-hero {
   --lite-hero-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .92));
}

/*bottom cta section sections.css*/
.cta-banner {
  --cta-banner-bg: linear-gradient(180deg, rgba(227, 161, 48, 0.95), rgba(255, 255, 255, .92));
}


/* ============================
   Portfolio Hover Animation (Fixed)
   ============================ */
.my-shuffle-container .picture-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.my-shuffle-container .picture-item img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease, filter 0.3s ease;
  border-radius: 8px;
  cursor: zoom-in; /* reinforces click interaction */
}

/* Hover effect */
.my-shuffle-container .picture-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.1);
}

.my-shuffle-container .picture-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Optional gradient overlay - now non-blocking */
.my-shuffle-container .picture-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(0,0,0,0.15));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  pointer-events: none; /* 👈 crucial fix */
}

.my-shuffle-container .picture-item:hover::after {
  opacity: 1;
}