/* Image Optimization Performance Improvements */

/* 1. Add loading spinner for lazy-loaded images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* 2. Optimize background image loading */
.body-with-bg {
  background-image: url("Assets/top_banner_bg.png"), url("Assets/footer bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top right, bottom;
  background-size: 89% auto, 100% auto;
  background-color: #e3dfa2 !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Add smooth background loading */
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 3. Gallery image optimizations */
.gallery img {
  filter: brightness(0.95);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.02);
  filter: brightness(1);
}

/* 4. Responsive image containers */
.img-container {
  position: relative;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 5. Critical image preloading indicator */
.critical-img {
  animation: criticalLoad 0.8s ease-out;
}

@keyframes criticalLoad {
  0% { 
    transform: scale(1.05);
    opacity: 0;
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}