.elementor-4284 .elementor-element.elementor-element-89bbfe1{--display:flex;--min-height:350px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4284 .elementor-element.elementor-element-89bbfe1:hover{--border-radius:10px 10px 10px 10px;--border-top-left-radius:10px;--border-top-right-radius:10px;--border-bottom-right-radius:10px;--border-bottom-left-radius:10px;}.elementor-4284 .elementor-element.elementor-element-89bbfe1, .elementor-4284 .elementor-element.elementor-element-89bbfe1::before{--border-transition:0.3s;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;}.elementor-4284 .elementor-element.elementor-element-684810c img{width:100%;border-radius:15px 15px 15px 15px;}.jet-listing-item.single-jet-engine.elementor-page-4284 > .elementor{width:330px;margin-left:auto;margin-right:auto;}/* Start custom CSS for container, class: .elementor-element-89bbfe1 *//* ------------------------------------ */
/* A. استایل‌های اولیه کانتینر (والد) */
/* ------------------------------------ */
.image-zoom-container {
    /* ابعاد کانتینر را تعیین کنید (مثلاً ابعادی که تصویر در سایت شما دارد) */
    width: 300px;
    height:400px;
    
    position: relative; /* برای قرارگیری صحیح آیکون ذره‌بین */
    overflow: hidden; /* برای جلوگیری از بریده شدن بزرگنمایی تصویر */
    cursor: zoom-in; /* تغییر نشانگر ماوس به حالت بزرگنمایی */
    
    /* انیمیشن نرم برای آیکون و پس‌زمینه */
    transition: all 0.3s ease-in-out;
}

/* ------------------------------------ */
/* B. استایل‌های تصویر */
/* ------------------------------------ */
.image-zoom-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* مطمئن شدن از پوشش کامل کانتینر */
    display: block;
    transition: transform 0.4s ease-in-out; /* انیمیشن نرم بزرگنمایی */
}

/* ------------------------------------ */
/* C. استایل‌های آیکون ذره‌بین (شبه عنصر ::after) */
/* ------------------------------------ */
.image-zoom-container::after {
    content: "\f00e"; /* کد هگز آیکون ذره‌بین در Font Awesome */
    
    /* برای نمایش این آیکون نیاز به اتصال به کتابخانه Font Awesome دارید */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; /* برای نمایش صحیح آیکون */

    /* تنظیمات موقعیت و رنگ آیکون */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* قرارگیری دقیق در مرکز */
    
    font-size: 20px;
    color: white;
     /* پس‌زمینه تاریک نیمه شفاف */
    padding:10px;
    border-radius: 50%; /* گرد کردن پس‌زمینه */
    
    opacity: 0; /* <<-- آیکون در حالت عادی مخفی است */
    transition: opacity 0.3s ease-in-out;
    z-index: 10; /* قرارگیری آیکون روی تصویر */
}

/* ------------------------------------ */
/* D. افکت‌های هنگام هاور (Hover Effects) */
/* ------------------------------------ */

.image-zoom-container:hover img {
    /* بزرگنمایی تصویر */
    transform: scale(1.15); /* <<-- تصویر 15% بزرگتر می‌شود */
    border-radius: 20px;
}

.image-zoom-container:hover::after {
    /* نمایش آیکون ذره‌بین و پس‌زمینه تاریک */
    opacity: 1; 
}/* End custom CSS */