.elementor-8 .elementor-element.elementor-element-82b212c{--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;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-82b212c.e-con{--align-self:center;}.elementor-8 .elementor-element.elementor-element-7431328{--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;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-b390b19{width:100%;max-width:100%;}.elementor-8 .elementor-element.elementor-element-ada1c8d{--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-8 .elementor-element.elementor-element-42fc26d{--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-8 .elementor-element.elementor-element-a15dc1d{--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-8 .elementor-element.elementor-element-bcd5059{--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-8 .elementor-element.elementor-element-a7cffbc{--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-8 .elementor-element.elementor-element-00f33a6{--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;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-71b4f43 *//* ================================
   سکشن اینفوگرافیک – نسخه نهایی
   هماهنگ با رنگ سازمانی سبز
   فونت استعداد
================================ */

/* پس‌زمینه سکشن */
.eco-infographic-section {
  padding: 70px 20px;
  background: radial-gradient(circle at top, rgba(25,35,55,0.96), #0f1525);
  border-top: 1px solid rgba(155,201,126,0.25);
  direction: rtl;
  color: #e8fbe9;
  font-family: 'استعداد', sans-serif !important;
}

/* چیدمان اصلی */
.eco-container {
  max-width: 1300px;
  margin: auto;
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

/* متن سمت چپ */
.eco-left-text {
  flex: 1;
  min-width: 300px;
  background: rgba(25,35,55,0.55);
  padding: 28px 32px;
  border-radius: 22px;
  border: 1px solid rgba(86,169,52,0.45);
  box-shadow: 0 0 25px rgba(86,169,52,0.35);
  backdrop-filter: blur(12px);
  font-family: 'استعداد' !important;
}

.eco-left-text p {
  font-size: 15.5px;
  line-height: 2.1;
  color: #d6f7d1;
}

/* بخش SVG */
.eco-svg-wrap {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
}

.eco-svg-container {
  width: 100%;
  max-width: 520px;
}

/* --- توجه خیلی مهم: این کلاس تو HTML نبود --- */
/* برای اعمال دقیق رنگ‌ها باید اضافه شود */
.eco-svg-container svg {
  width: 100%;
  height: auto;
}

/* رنگ‌های قسمت‌های مختلف SVG */
.eco-svg-container svg .st1,
.eco-svg-container svg .st2,
.eco-svg-container svg .st6,
.eco-svg-container svg .st7,
.eco-svg-container svg .st10,
.eco-svg-container svg .st11,
.eco-svg-container svg .st14,
.eco-svg-container svg .st15,
.eco-svg-container svg .st18,
.eco-svg-container svg .st19,
.eco-svg-container svg .st22,
.eco-svg-container svg .st23,
.eco-svg-container svg .st26,
.eco-svg-container svg .st27 {
  fill: rgba(86,169,52,0.25); /* سبز اصلی به صورت شفاف */
}

/* حلقه‌های مرکزی */
.eco-svg-container svg .st3,
.eco-svg-container svg .st4,
.eco-svg-container svg .st8,
.eco-svg-container svg .st9,
.eco-svg-container svg .st12,
.eco-svg-container svg .st13,
.eco-svg-container svg .st16,
.eco-svg-container svg .st17,
.eco-svg-container svg .st20,
.eco-svg-container svg .st21,
.eco-svg-container svg .st24,
.eco-svg-container svg .st25,
.eco-svg-container svg .st28,
.eco-svg-container svg .st29 {
  fill: rgba(74,222,128,0.1);
  stroke: #4ade80;
  stroke-width: 1.4;
}

/* متن‌ها داخل SVG */
.eco-svg-container svg text {
  fill: #4ade80 !important;
  font-family: 'استعداد', sans-serif !important;
  font-weight: 700;
}

/* ریسپانسیو */
@media(max-width: 900px) {
  .eco-container {
    flex-direction: column;
    text-align: center;
  }
  .eco-left-text {
    margin-bottom: 24px;
  }
}

#x30_1,
    #x30_2,
    #x30_3,
    #x30_4,
    #x30_5,
    #x30_6,
    #x30_7{
        transition: transform .2s;
        cursor: pointer;
    }

    #x30_1:hover {
        transform: translate3d(-68px, -69px, 10rem) scale(1.1);
    }

    #x30_2:hover {
        transform: translate3d(-46px, -79px, 10rem) scale(1.1);
    }

    #x30_3:hover {
        transform: translate3d(-21px, -68px, 10rem) scale(1.1);
    }

    #x30_4:hover {
        transform: translate3d(-12px, -45px, 10rem) scale(1.1);
    }

    #x30_5:hover {
        transform: translate3d(-21px, -22px, 10rem) scale(1.1);
    }

    #x30_6:hover {
        transform: translate3d(-45px, -12px, 10rem) scale(1.1);
    }

    #x30_7:hover {
        transform: translate3d(-69px, -22px, 10rem) scale(1.1);
    }

  

    .st0 {
        fill: #CCFFFF;
        stroke: #000000;
        stroke-miterlimit: 10;
    }

    .st1 {
        fill: #5D256B;
        stroke: #5D256B;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st2 {
        fill: #FFFFFF;
        stroke: #5D256B;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st3 {
        fill: #5D256B;
    }

    .st4 {
        fill: none;
        stroke: #5D256B;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st5 {
        fill: #FFFFFF;
    }

    .st6 {
        fill: #D11388;
        stroke: #D11388;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st7 {
        fill: #FFFFFF;
        stroke: #D11388;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st8 {
        fill: #D11388;
    }

    .st9 {
        fill: none;
        stroke: #D11388;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st10 {
        fill: #F6911E;
        stroke: #F6911E;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st11 {
        fill: #FFFFFF;
        stroke: #F6911E;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st12 {
        fill: #F6911E;
    }

    .st13 {
        fill: none;
        stroke: #F6911E;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st14 {
        fill: #FDD500;
        stroke: #FDD500;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st15 {
        fill: #FFFFFF;
        stroke: #FDD500;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st16 {
        fill: #FDD500;
    }

    .st17 {
        fill: none;
        stroke: #FDD500;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st18 {
        fill: #63BB46;
        stroke: #63BB46;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st19 {
        fill: #FFFFFF;
        stroke: #63BB46;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st20 {
        fill: #63BB46;
    }

    .st21 {
        fill: none;
        stroke: #63BB46;
        stroke-miterlimit: 10;
    }

    .st22 {
        fill: #00ABCD;
        stroke: #00ABCD;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st23 {
        fill: #FFFFFF;
        stroke: #00ABCD;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st24 {
        fill: #00ABCD;
    }

    .st25 {
        fill: none;
        stroke: #00ABCD;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st26 {
        fill: #527991;
        stroke: #527991;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st27 {
        fill: #FFFFFF;
        stroke: #527991;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st28 {
        fill: #527991;
    }

    .st29 {
        fill: none;
        stroke: #527991;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st30 {
        fill: #172A53;
        stroke: #172A53;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st31 {
        fill: #FFFFFF;
        stroke: #172A53;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }

    .st32 {
        fill: #172A53;
    }

    .st33 {
        fill: none;
        stroke: #172A53;
        stroke-width: 2.5;
        stroke-miterlimit: 10;
    }/* End custom CSS */