/* Image Optimization Styles */

/* Lazy loading for images */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[data-src].loaded {
  opacity: 1;
}

/* Image loading placeholder */
.image-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
}

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

/* Optimize image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: auto;
}

/* Responsive images */
.responsive-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* Hero carousel images optimization */
.carousel-item img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: center;
}

/* Product images optimization */
.product-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #1E88E5;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

/* Feature icons optimization */
.feature-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  transition: transform 0.4s ease;
}

/* Preload critical images */
.preload-critical {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Image compression hints */
img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Progressive image loading */
.progressive-img {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.progressive-img.loaded {
  filter: blur(0);
}