.elementor-7172 .elementor-element.elementor-element-d631c59{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7172 .elementor-element.elementor-element-33fca9a .jet-listing-dynamic-image{justify-content:center;}.elementor-7172 .elementor-element.elementor-element-33fca9a .jet-listing-dynamic-image__figure{align-items:center;}.elementor-7172 .elementor-element.elementor-element-33fca9a .jet-listing-dynamic-image a{display:flex;justify-content:center;}.elementor-7172 .elementor-element.elementor-element-33fca9a .jet-listing-dynamic-image__caption{text-align:left;}.elementor-7172 .elementor-element.elementor-element-91349ee .jet-listing-dynamic-link__link{align-self:stretch;font-family:"IRANSansWeb_Medium", Sans-serif;font-size:15px;font-weight:500;padding:5px 10px 5px 10px;border-style:dashed;border-radius:20px 20px 20px 20px;flex-direction:row;}.elementor-7172 .elementor-element.elementor-element-91349ee .jet-listing-dynamic-link__icon{order:1;}/* Start custom CSS for container, class: .elementor-element-d631c59 *//* --- 1. تنظیمات کانتینر اصلی (مادر) --- */
.listing-card-wrapper {
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
    
    /* تنظیمات پرسپکتیو برای حس عمق سه‌بعدی */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* --- 2. ساخت نوار نورانی بالایی (با استفاده از ::before) --- */

.listing-card-wrapper::before {
    content: '';
    position: absolute;
    top: 0; /* موقعیت نوار در بالای کانتینر */
    left: 50%; /* شروع از مرکز */
    width: 0; /* در حالت عادی عرض صفر دارد */
    height: 2px; /* ضخامت نوار نور */
    background: #D400AE; 
    z-index: 2;
    box-shadow: 0 0 8px rgba(212, 0, 174, 0.7); 
    
    /* ترانزیشن با منحنی خاص برای حرکت سریع و ناگهانی */
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    pointer-events: none;
}

/* --- 3. ساخت نوار نورانی پایینی (با استفاده از ::after) --- */

.listing-card-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; /* موقعیت نوار در پایین کانتینر */
    right: 50%; /* شروع از مرکز */
    width: 0; /* در حالت عادی عرض صفر دارد */
    height: 2px;
    background: #D400AE; 
    z-index: 2;
    box-shadow: 0 0 8px rgba(212, 0, 174, 0.7);
    
    /* ترانزیشن با تاخیر کم برای حس پیوستگی */
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.1s; /* 0.1s تاخیر */
    pointer-events: none;
}

/* 4. حالت هاور: نوارها از مرکز به دو طرف پر می‌شوند */

/* نوار بالایی از مرکز به سمت چپ پر می‌شود (با تغییر left و width) */
.listing-card-wrapper:hover::before {
    left: 0; 
    width: 100%; 
}

/* نوار پایینی از مرکز به سمت راست پر می‌شود (با تغییر right و width) */
.listing-card-wrapper:hover::after {
    right: 0; 
    width: 100%; 
}

/* --- 5. تغییر تصویر: زوم و چرخش پرسپکتیو --- */

/* حالت عادی تصویر (img) */
.listing-card-wrapper img {
    filter: grayscale(100%); 
    transform: scale(1.0) rotateY(0deg); 
    /* ترانزیشن‌ها برای همه تغییرات */
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    width: 100%;
    display: block;
}

/* حالت هاور تصویر (img) */
.listing-card-wrapper:hover img {
    filter: grayscale(0%); /* رنگی شدن */
    transform: scale(1.08) rotateY(-2deg); /* زوم و چرخش ملایم به سمت داخل */
}

/* --- 6. افکت تغییر رنگ عنوان --- */
.listing-card-wrapper .title-color-change,
.listing-card-wrapper .title-color-change * { 
    color: #B1B1B1 !important; 
    transition: color 0.4s ease-in-out; 
}

.listing-card-wrapper:hover .title-color-change,
.listing-card-wrapper:hover .title-color-change * { 
    color: #D400AE !important; 
}/* End custom CSS */