/* CLS (Cumulative Layout Shift) Fixes */

/* Fix carousel images - reserve space before loading */
.carousel-inner .item {
    min-height: 400px;
    background-color: #f5f5f5;
}

.carousel-inner .item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Fix gallery images - add aspect ratio */
.in-gallery-item {
    aspect-ratio: 4 / 3; /* Changed from 16/9 to 4/3 to show more height */
    overflow: hidden;
}

.in-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain to show full image */
    object-position: center;
    background: #f5f5f5; /* Add background for letterboxing */
}

/* Fix why choose us images */
.why-item .image-container {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f5f5f5;
}

.why-item .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix solution cards images */
.solution-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Fix customer logos */
.abu-customer-logo {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abu-customer-logo img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Fix brand sprite */
.brand-sprite {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-sprite-img {
    max-width: 100%;
    height: auto;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .carousel-inner .item {
        min-height: 250px;
    }
    
    .carousel-inner .item img {
        height: 250px;
        object-position: center top !important; /* Show top of image (person's head) */
    }
}

@media (max-width: 480px) {
    .carousel-inner .item {
        min-height: 200px;
    }
    
    .carousel-inner .item img {
        height: 200px;
        object-position: center top !important; /* Show top of image (person's head) */
    }
}