.elementor-429 .elementor-element.elementor-element-26f554b{--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-429 .elementor-element.elementor-element-175816d{--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-429 .elementor-element.elementor-element-66e2538{--display:flex;}.elementor-429 .elementor-element.elementor-element-ee8044f .dina-story-thumbnail img{border-color:#ff0066;}.elementor-429 .elementor-element.elementor-element-ee8044f .dina-story-progress-bar::after{background:#ff0066;}.elementor-429 .elementor-element.elementor-element-ee8044f .dina-story-group-link{color:#333333;}.elementor-429 .elementor-element.elementor-element-ee8044f .dina-story-link-container{background:#ffffff;}.elementor-429 .elementor-element.elementor-element-d790af3{--display:flex;}.elementor-429 .elementor-element.elementor-element-31b92c8{--display:flex;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );}/* Start custom CSS for dina-story-bar, class: .elementor-element-ee8044f *//* --- کلاس مادر بخش استوری‌ها --- */
.product-story-section {
    /* 1. حذف یا اصلاح کادر صورتی (اگر از نوع border باشد) */
    border: none !important; /* کادر صورتی را حذف می‌کند */
    padding: 0; /* اگر کادر به دلیل پدینگ اضافه شده باشد، آن را حذف می‌کند */
    
    /* 2. استایل کلی پس زمینه اگر در این ویجت تنظیم شده باشد */
    background-color: #f6f6f6; /* اگر پس‌زمینه خود ویجت سفید است، این را بردارید */
    direction: rtl; 
    text-align: center;
}

/* --- استایل برای هر یک از آیتم‌های داخلی اسلایدر (دایره و متن زیر آن) --- */

/* استایل کانتینر تصویر و متن */
.product-story-section .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
}

/* استایل تصویر دایره‌ای */
.product-story-section .elementor-image-box-wrapper .elementor-image {
    position: relative;
    overflow: visible; /* برای اینکه سایه و کادر بیرون بزند */
}

/* استایلینگ دایره و حاشیه */
.product-story-section img {
    /* اطمینان از اینکه تصاویر کاملاً دایره‌ای هستند */
    border-radius: 50%;
    
    /* حذف حاشیه صورتی فعلی و اعمال یک حاشیه ظریف */
    border: 3px solid #ff7fa6; /* رنگ صورتی ملایم‌تر یا رنگ اصلی برند شما */
    box-shadow: 0 0 0 5px #FFFFFF, /* لایه سفید بیرون دایره */
                0 4px 12px rgba(0, 0, 0, 0.1); /* سایه جذاب برای جلوه سه‌بعدی */
    transition: transform 0.3s ease;
}

/* افکت هاور (جذابیت بیشتر) */
.product-story-section img:hover {
    transform: scale(1.05); /* کمی بزرگ شدن در هاور */
    box-shadow: 0 0 0 5px #FFE6CC, /* تغییر رنگ سایه به هلویی در هاور */
                0 6px 15px rgba(0, 0, 0, 0.2); 
}


/* --- استایل عنوان زیر دایره --- */
.product-story-section .elementor-image-box-content {
    margin-top: 10px;
}

.product-story-section .elementor-image-box-title {
    font-size: 1.1rem; /* کمی بزرگتر برای خوانایی */
    font-weight: 700; /* ضخیم‌تر */
    color: #444444; /* رنگ متن تیره برای کنتراست */
    line-height: 1.2;
    margin-top: 5px; /* فاصله بیشتر از تصویر */
}

/* --- بهبود نوار پیمایش اسلایدر (اگر از دکمه‌های چپ و راست استفاده می‌شود) --- */
/* اگر نوار پیمایش وجود دارد، آن را هم شیک‌تر می‌کنیم. */
.product-story-section .swiper-button-next,
.product-story-section .swiper-button-prev {
    color: #D84293; /* رنگ سرخابی برای فلش‌ها */
    opacity: 0.8;
}/* End custom CSS */