.image-container {
   
    /* حالت اولیه (خارج از صفحه و نامرئی) */
    opacity: 0;
    transform: translateX(-100%);
    /* اجرای انیمیشن */
    animation: slideIn 2s ease-in-out 2.3s forwards;
    /* 2s زمان اجرا، ease-in-out حرکت نرم، 2s تاخیر، forwards یعنی در حالت آخر بماند */
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.image-container img:hover {
    transform: scale(1.15) rotateX(5deg) rotateY(-5deg);
    transition: transform 1.5s ease, box-shadow 1.5s ease; /* 🔹 زمان حرکت زیاد شد */
}

/* فقط در تبلت و دسکتاپ نمایش بده */
@media (max-width:914px) {
    .image-container {
        display: none;
    }
}