/* CSS لتحسين أداء الصور في جميع أنحاء الموقع */

/* تحسين عام لجميع صور الموقع */
img {
    transition: opacity 0.3s ease;
    max-width: 100%;
    height: auto;
    will-change: transform; /* تحسين الأداء أثناء التحريك */
}

/* تحسين محدد لصور المشاريع */
.single-project img {
    transform: translateZ(0); /* تسريع GPU */
}

/* تطبيق أسلوب تحميل تدريجي للصور */
.project-main-wrap .owl-item:not(.active) img {
    opacity: 0.5;
}

.project-main-wrap .owl-item.active img,
.image-loaded {
    opacity: 1;
}

/* تحسين أداء صور المدونة */
.single-blog img {
    transition: transform 0.3s ease;
}

.single-blog:hover img {
    transform: scale(1.02);
}

/* تحسين أداء صور السلايدر */
.prevoz-slider-item {
    background-size: cover !important;
    background-position: center center !important;
}

/* تحسين العرض على الأجهزة المختلفة */
@media (max-width: 768px) {
    .project-main-wrap .single-project,
    .single-blog {
        max-height: 200px;
        overflow: hidden;
    }
    
    .project-main-wrap img,
    .single-blog img {
        height: 180px;
        object-fit: cover;
    }
}

/* تحسينات عامة لكل الصور المستخدمة في Carousels */
.owl-carousel .owl-item img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* تأثير بصري أثناء تحميل الصور */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image-loaded {
    animation: fadeIn 0.5s ease;
}

/* تحسين صور الشعارات والأيقونات */
.brand-item img, 
.logo img,
.icon img {
    max-width: 100%;
    height: auto;
}