.elementor-62249 .elementor-element.elementor-element-5e24064{--display:flex;--min-height:35em;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-62249 .elementor-element.elementor-element-4369538{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}@media(max-width:767px){.elementor-62249 .elementor-element.elementor-element-5e24064{--min-height:25em;}.elementor-62249 .elementor-element.elementor-element-4369538{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for container, class: .elementor-element-4369538 */.circle-container {
    position: relative;
    width: 500px; /* عرض دایره برای دسکتاپ */
    height: 500px; /* ارتفاع دایره */
    margin: 0 auto; /* وسط‌چین افقی */
    z-index: 10;
}

.center-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; /* اندازه عکس مرکزی */
    height: 200px;
    border-radius: 50%;
    z-index: 15; /* بالاتر از عکس‌های اطراف */
}

.image-1, .image-2, .image-3, .image-4, .image-5, .image-6,
.image-7, .image-8, .image-9, .image-10, .image-11, .image-12 {
    position: absolute;
    width: 70px; /* اندازه عکس‌های اطراف */
    height: 70px;
    border-radius: 50%;
    z-index: 12; /* بالاتر از کانتینر */
}

/* موقعیت اولیه هر عکس در دایره */
.image-1 { transform: rotate(0deg) translate(170px); }
.image-2 { transform: rotate(30deg) translate(170px); }
.image-3 { transform: rotate(60deg) translate(170px); }
.image-4 { transform: rotate(90deg) translate(170px); }
.image-5 { transform: rotate(120deg) translate(170px); }
.image-6 { transform: rotate(150deg) translate(170px); }
.image-7 { transform: rotate(180deg) translate(170px); }
.image-8 { transform: rotate(210deg) translate(170px); }
.image-9 { transform: rotate(240deg) translate(170px); }
.image-10 { transform: rotate(270deg) translate(170px); }
.image-11 { transform: rotate(300deg) translate(170px); }
.image-12 { transform: rotate(330deg) translate(170px); }

/* تنظیمات برای موبایل */
@media (max-width: 767px) {
    .circle-container {
        width: 300px;
        height: 300px;
    }
    .center-image {
        width: 130px;
        height: 130px;
    }
    .image-1, .image-2, .image-3, .image-4, .image-5, .image-6,
    .image-7, .image-8, .image-9, .image-10, .image-11, .image-12 {
        width: 50px;
        height: 50px;
    }
    .image-1 { transform: rotate(0deg) translate(120px); }
    .image-2 { transform: rotate(30deg) translate(120px); }
    .image-3 { transform: rotate(60deg) translate(120px); }
    .image-4 { transform: rotate(90deg) translate(120px); }
    .image-5 { transform: rotate(120deg) translate(120px); }
    .image-6 { transform: rotate(150deg) translate(120px); }
    .image-7 { transform: rotate(180deg) translate(120px); }
    .image-8 { transform: rotate(210deg) translate(120px); }
    .image-9 { transform: rotate(240deg) translate(120px); }
    .image-10 { transform: rotate(270deg) translate(120px); }
    .image-11 { transform: rotate(300deg) translate(120px); }
    .image-12 { transform: rotate(330deg) translate(120px); }
}

/* وسط‌چین کردن کانتینر در کل صفحه */
.circle-container-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* پر کردن ارتفاع صفحه */
    position: relative;
    z-index: 10;
}

/* تصاویر اطراف */
.image-1, .image-2, .image-3, .image-4, .image-5, .image-6,
.image-7, .image-8, .image-9, .image-10, .image-11, .image-12 {
  transition: transform 0.5s ease;
}

/* بزرگ شدن تصاویر در دسکتاپ */
.image-1:hover { transform: rotate(0deg) translate(170px) scale(1.2); }
.image-2:hover { transform: rotate(30deg) translate(170px) scale(1.2); }
.image-3:hover { transform: rotate(60deg) translate(170px) scale(1.2); }
.image-4:hover { transform: rotate(90deg) translate(170px) scale(1.2); }
.image-5:hover { transform: rotate(120deg) translate(170px) scale(1.2); }
.image-6:hover { transform: rotate(150deg) translate(170px) scale(1.2); }
.image-7:hover { transform: rotate(180deg) translate(170px) scale(1.2); }
.image-8:hover { transform: rotate(210deg) translate(170px) scale(1.2); }
.image-9:hover { transform: rotate(240deg) translate(170px) scale(1.2); }
.image-10:hover { transform: rotate(270deg) translate(170px) scale(1.2); }
.image-11:hover { transform: rotate(300deg) translate(170px) scale(1.2); }
.image-12:hover { transform: rotate(330deg) translate(170px) scale(1.2); }

/* تنظیمات برای موبایل */
@media (max-width: 767px) {
  .image-1:hover { transform: rotate(0deg) translate(120px) scale(1.2); }
  .image-2:hover { transform: rotate(30deg) translate(120px) scale(1.2); }
  .image-3:hover { transform: rotate(60deg) translate(120px) scale(1.2); }
  .image-4:hover { transform: rotate(90deg) translate(120px) scale(1.2); }
  .image-5:hover { transform: rotate(120deg) translate(120px) scale(1.2); }
  .image-6:hover { transform: rotate(150deg) translate(120px) scale(1.2); }
  .image-7:hover { transform: rotate(180deg) translate(120px) scale(1.2); }
  .image-8:hover { transform: rotate(210deg) translate(120px) scale(1.2); }
  .image-9:hover { transform: rotate(240deg) translate(120px) scale(1.2); }
  .image-10:hover { transform: rotate(270deg) translate(120px) scale(1.2); }
  .image-11:hover { transform: rotate(300deg) translate(120px) scale(1.2); }
  .image-12:hover { transform: rotate(330deg) translate(120px) scale(1.2); }
}/* End custom CSS */