/* Responsive Images CSS */

/* Make all images responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optimize service images specifically */
.service-img img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
    transition: transform 0.3s ease;
}

/* Add progressive loading effect */
@keyframes imageLoadAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

img[loading] {
    animation: imageLoadAnimation 0.5s ease-in;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
    .service-img img {
        aspect-ratio: 16/9;
    }
}

/* Add blur-up effect for lazy loaded images */
.blur-up {
    filter: blur(5px);
    transition: filter 0.3s ease-out;
}

.blur-up.lazyloaded {
    filter: blur(0);
}