/* WebP Optimization for 100% Performance Score */
/* Addresses: "Serve images in next-gen formats" */

/* WebP support detection and optimization */
.webp-support {
    background-image: url('images/Banner1.webp');
}

.no-webp-support {
    background-image: url('images/Banner1.jpg');
}

/* Hero background optimizations with WebP */
.hero-bg-1 {
    background-image: url('images/Banner1.webp');
}

.hero-bg-2 {
    background-image: url('images/Banner-2.webp');
}

.hero-bg-3 {
    background-image: url('images/Banner-3.webp');
}

/* Fallback for browsers without WebP support */
.no-webp .hero-bg-1 {
    background-image: url('images/Banner1.jpg');
}

.no-webp .hero-bg-2 {
    background-image: url('images/Banner-2.jpg');
}

.no-webp .hero-bg-3 {
    background-image: url('images/Banner-3.jpg');
}

/* Lazy loading optimization */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: #f0f0f0;
}

.lazy-image.loaded {
    opacity: 1;
}

/* Prevent layout shift during image loading */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
}

/* Critical image optimization */
.hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transform: translateZ(0);
}

/* Performance optimizations for images */
.service-image img,
.gallery-image img,
.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 350 / 250;
    background-color: #f8f9fa;
}

.gallery-image img {
    aspect-ratio: 600 / 400;
}

/* Reduce layout shift with skeleton loading */
.image-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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