.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4305 .elementor-element.elementor-element-fd2cc56{width:100%;max-width:100%;}.elementor-4305 .elementor-element.elementor-element-fd2cc56 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:46px;font-weight:600;line-height:55px;letter-spacing:-2.7px;word-spacing:0px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-4305 .elementor-element.elementor-element-5b52895 .elementor-icon-box-wrapper{gap:15px;}.elementor-4305 .elementor-element.elementor-element-6c7f49d .elementor-icon-box-wrapper{gap:15px;}.elementor-4305 .elementor-element.elementor-element-a240e50 .elementor-icon-box-wrapper{gap:15px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for icon-box, class: .elementor-element-5b52895 *//* 1. إعداد شكل الصندوق وإضافة انتقال ناعم */
.elementor-4305 .elementor-element.elementor-element-5b52895 .elementor-icon-box-wrapper {
    transition: all 0.4s ease-in-out;
    padding: 20px;
    border-radius: 12px;
    background-color: transparent;
}

/* 2. رفع الصندوق وإضافة ظل خفيف عند تمرير الماوس */
.elementor-4305 .elementor-element.elementor-element-5b52895:hover .elementor-icon-box-wrapper {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
    background-color: #ffffff; /* يمكنك تغييره ليناسب خلفية موقعك */
}

/* 3. إعداد حركة الأيقونة وانتقال اللون */
.elementor-4305 .elementor-element.elementor-element-5b52895 .elementor-icon {
    transition: color 0.3s ease;
}

/* 4. دوران أيقونة إعادة التدوير بشكل مستمر وتغيير لونها للأخضر عند التمرير */
.elementor-4305 .elementor-element.elementor-element-5b52895:hover .elementor-icon {
    animation: spinRecycle 2s linear infinite;
    color: #2ecc71; /* لون أخضر زاهي يعبر عن البيئة */
}

/* كود حركة الدوران */
@keyframes spinRecycle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. تغيير لون النص (اختياري) ليتماشى مع الأيقونة عند التمرير */
.elementor-4305 .elementor-element.elementor-element-5b52895 .elementor-icon-box-title span {
    transition: color 0.3s ease;
}

.elementor-4305 .elementor-element.elementor-element-5b52895:hover .elementor-icon-box-title span {
    color: #27ae60; /* لون أخضر داكن قليلاً للنص */
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-6c7f49d *//* 1. إعداد شكل الصندوق وإضافة انتقال ناعم */
.elementor-4305 .elementor-element.elementor-element-6c7f49d .elementor-icon-box-wrapper {
    transition: all 0.4s ease-in-out;
    padding: 20px;
    border-radius: 12px;
    background-color: transparent;
}

/* 2. رفع الصندوق وإضافة ظل خفيف عند تمرير الماوس */
.elementor-4305 .elementor-element.elementor-element-6c7f49d:hover .elementor-icon-box-wrapper {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
    background-color: #ffffff; /* يمكنك تغييره ليناسب خلفية موقعك */
}

/* 3. إعداد حركة الأيقونة وانتقال اللون */
.elementor-4305 .elementor-element.elementor-element-6c7f49d .elementor-icon {
    transition: color 0.3s ease;
}

/* 4. دوران أيقونة إعادة التدوير بشكل مستمر وتغيير لونها للأخضر عند التمرير */
.elementor-4305 .elementor-element.elementor-element-6c7f49d:hover .elementor-icon {
    animation: spinRecycle 2s linear infinite;
    color: #2ecc71; /* لون أخضر زاهي يعبر عن البيئة */
}

/* كود حركة الدوران */
@keyframes spinRecycle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. تغيير لون النص (اختياري) ليتماشى مع الأيقونة عند التمرير */
.elementor-4305 .elementor-element.elementor-element-6c7f49d .elementor-icon-box-title span {
    transition: color 0.3s ease;
}

.elementor-4305 .elementor-element.elementor-element-6c7f49d:hover .elementor-icon-box-title span {
    color: #27ae60; /* لون أخضر داكن قليلاً للنص */
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-a240e50 *//* 1. إعداد شكل الصندوق وإضافة انتقال ناعم */
.elementor-4305 .elementor-element.elementor-element-a240e50 .elementor-icon-box-wrapper {
    transition: all 0.4s ease-in-out;
    padding: 20px;
    border-radius: 12px;
    background-color: transparent;
}

/* 2. رفع الصندوق وإضافة ظل خفيف عند تمرير الماوس */
.elementor-4305 .elementor-element.elementor-element-a240e50:hover .elementor-icon-box-wrapper {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
    background-color: #ffffff; /* يمكنك تغييره ليناسب خلفية موقعك */
}

/* 3. إعداد حركة الأيقونة وانتقال اللون */
.elementor-4305 .elementor-element.elementor-element-a240e50 .elementor-icon {
    transition: color 0.3s ease;
}

/* 4. دوران أيقونة إعادة التدوير بشكل مستمر وتغيير لونها للأخضر عند التمرير */
.elementor-4305 .elementor-element.elementor-element-a240e50:hover .elementor-icon {
    animation: spinRecycle 2s linear infinite;
    color: #2ecc71; /* لون أخضر زاهي يعبر عن البيئة */
}

/* كود حركة الدوران */
@keyframes spinRecycle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. تغيير لون النص (اختياري) ليتماشى مع الأيقونة عند التمرير */
.elementor-4305 .elementor-element.elementor-element-a240e50 .elementor-icon-box-title span {
    transition: color 0.3s ease;
}

.elementor-4305 .elementor-element.elementor-element-a240e50:hover .elementor-icon-box-title span {
    color: #27ae60; /* لون أخضر داكن قليلاً للنص */
}/* End custom CSS */