/* Image Optimization CSS
   Applied immediately to prevent large image loads
*/

/* Optimize logo display size */
.navbar-logo,
.navbar img[src*="logo"],
img[src*="white_logo2"],
img[src*="black_logo2"] {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}

/* Use CSS to constrain oversized images */
img {
  max-width: 100%;
  height: auto;
}

/* Lazy loading for non-critical images */
.carousel-item img,
.testimonial img,
.build-image img {
  loading: lazy;
  content-visibility: auto;
}

/* Use lower quality for backgrounds until needed */
.carousel-item[style*="background-image"],
.slide-image[style*="background-image"] {
  filter: blur(0);
  transition: filter 0.3s;
}

/* Placeholder for lazy images */
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Optimize carousel images with image-rendering */
.carousel-container img {
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
}

/* Force hardware acceleration for better performance */
.carousel-item,
.slide-image {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Responsive image sizing */
@media (max-width: 768px) {
  .carousel-item img,
  .slide-image {
    max-resolution: 150dpi;
  }
}

/* Preload critical images with lower quality first */
.hero-image {
  background-image:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20"%3E%3Crect width="20" height="20" fill="%23333"/%3E%3C/svg%3E');
  background-size: cover;
  background-position: center;
}