.elementor-848 .elementor-element.elementor-element-c61fd60{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-848 .elementor-element.elementor-element-c61fd60:not(.elementor-motion-effects-element-type-background), .elementor-848 .elementor-element.elementor-element-c61fd60 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8e92a91 );}.elementor-848 .elementor-element.elementor-element-ae3f1f5{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-848 .elementor-element.elementor-element-ae3f1f5.e-con{--flex-grow:0;--flex-shrink:0;}.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-848 .elementor-element.elementor-element-8d2b47c{text-align:center;}.elementor-848 .elementor-element.elementor-element-8d2b47c .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-secondary );}.elementor-848 .elementor-element.elementor-element-16cffc6{text-align:center;}.elementor-848 .elementor-element.elementor-element-16cffc6 .elementor-heading-title{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );}.elementor-848 .elementor-element.elementor-element-a57a3de{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:75px;--padding-right:75px;}.elementor-848 .elementor-element.elementor-element-31863fa{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 45px 0px rgba(0, 0, 0, 0.2);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-31863fa:not(.elementor-motion-effects-element-type-background), .elementor-848 .elementor-element.elementor-element-31863fa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3F5F9;}.elementor-848 .elementor-element.elementor-element-f878dad{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-848 .elementor-element.elementor-element-8155586{--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:flex-end;--padding-top:20px;--padding-bottom:20px;--padding-left:50px;--padding-right:50px;}.elementor-848 .elementor-element.elementor-element-6f39554 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-weight:700;}.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-848 .elementor-element.elementor-element-4890e34{text-align:left;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );}.elementor-848 .elementor-element.elementor-element-a7d7e15{text-align:left;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-848 .elementor-element.elementor-element-fee47fb .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );transition-duration:0.5s;border-radius:0px 0px 0px 0px;padding:15px 20px 15px 20px;}.elementor-848 .elementor-element.elementor-element-fee47fb .elementor-button:hover, .elementor-848 .elementor-element.elementor-element-fee47fb .elementor-button:focus{background-color:var( --e-global-color-text );}.elementor-848 .elementor-element.elementor-element-7fcdb59{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:25px;--padding-bottom:25px;--padding-left:75px;--padding-right:75px;}.elementor-848 .elementor-element.elementor-element-ddfdbeb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 45px 0px rgba(0, 0, 0, 0.2);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-ddfdbeb:not(.elementor-motion-effects-element-type-background), .elementor-848 .elementor-element.elementor-element-ddfdbeb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3F5F9;}.elementor-848 .elementor-element.elementor-element-c72c6ac{--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:flex-start;--padding-top:20px;--padding-bottom:20px;--padding-left:50px;--padding-right:50px;}.elementor-848 .elementor-element.elementor-element-cb30b3d{text-align:left;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );}.elementor-848 .elementor-element.elementor-element-6414df7{text-align:left;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-secondary );}.elementor-848 .elementor-element.elementor-element-0513ccf .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );transition-duration:0.5s;border-radius:0px 0px 0px 0px;padding:15px 20px 15px 20px;}.elementor-848 .elementor-element.elementor-element-0513ccf .elementor-button:hover, .elementor-848 .elementor-element.elementor-element-0513ccf .elementor-button:focus{background-color:var( --e-global-color-text );}.elementor-848 .elementor-element.elementor-element-263b6c8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-848 .elementor-element.elementor-element-a57a3de{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-31863fa{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-8155586{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-848 .elementor-element.elementor-element-6f39554{text-align:center;}.elementor-848 .elementor-element.elementor-element-6f39554 .elementor-heading-title{font-size:24px;}.elementor-848 .elementor-element.elementor-element-7fcdb59{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-ddfdbeb{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:22px 22px;--row-gap:22px;--column-gap:22px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-848 .elementor-element.elementor-element-c72c6ac{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-848 .elementor-element.elementor-element-263b6c8.e-con{--order:-99999 /* order start hack */;}}@media(min-width:768px){.elementor-848 .elementor-element.elementor-element-ae3f1f5{--width:100%;}}/* Start custom CSS for image, class: .elementor-element-4d22870 */.elementor-848 .elementor-element.elementor-element-4d22870 {
  /* ده الكونتينر الأب للـ Image Widget (الـ Widget نفسه) */
  overflow: hidden; /* مهم جداً: أي جزء من الصورة يخرج برا الـ Widget هيتخبى */
  transition: all 0.3s ease-in-out; /* عشان التأثير يكون سلس */
}

.elementor-848 .elementor-element.elementor-element-4d22870 img {
  /* دي الصورة نفسها جوه الـ Widget */
  display: block; /* لضمان إنها تتصرف كـ Block element */
  max-width: 100%; /* تأكد إنها متعديش عرض الكونتينر الأب */
  height: auto; /* تحافظ على الأبعاد */
  transition: transform 0.3s ease-in-out; /* عشان تكبير/تصغير الصورة يكون سلس */
  transform: scale(1); /* حجمها الطبيعي في البداية */
}

.elementor-848 .elementor-element.elementor-element-4d22870:hover img {
  /* التأثير عند الـ Hover: كبر الصورة من الداخل */
  transform: scale(1.25); /* كبر الصورة بنسبة 15% (تقدر تغير الرقم ده) */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31863fa */.elementor-848 .elementor-element.elementor-element-31863fa {
  /* ده الكونتينر الأب نفسه */
  position: relative; 
  overflow: hidden; /* مهم جداً عشان الخلفية المتحركة متخرجش برا الكونتينر */
  transition: background-color 0.4s ease-in-out; /* عشان لو في خلفية أساسية تتغير بسلاسة */
  background-color: #F8F8F8; /* خلفية افتراضية فاتحة (غيرها لو عايز) */
  border-radius: 8px; /* لو عايز حواف دائرية للكونتينر */
  box-shadow: 0 0px 35px rgba(0,0,0,0.20); /* ظل خفيف */
  z-index: 1; /* عشان الكونتينر يبقى فوق العناصر الأخرى في الصفحة */
}

/* العنصر الزائف اللي هيعمل تأثير الخلفية السوداء المتزحلقة */
.elementor-848 .elementor-element.elementor-element-31863fa::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* يبدأ من خارج الكونتينر من اليسار */
  width: 100%; /* عرضه نفس عرض الكونتينر */
  height: 100%; /* ارتفاعه نفس ارتفاع الكونتينر */
  background-color: #232323; /* اللون الأسود بتاعنا */
  transition: left 0.4s ease-in-out; /* حركة سلايد سلسة */
  z-index: -1; /* مهم جداً: الخلفية تكون تحت محتوى الكونتينر (النص والصورة) */
}

/* ----------------------------------------------------------- */
/* تغيير لون الهيدلاين والنص في الوضع العادي */
/* ----------------------------------------------------------- */
.elementor-848 .elementor-element.elementor-element-31863fa #container-headline,
.elementor-848 .elementor-element.elementor-element-31863fa #container-text-block {
    color: #232323; /* لون افتراضي أسود للنص والعنوان */
    transition: color 0.4s ease-in-out; /* عشان يتغير اللون بسلاسة */
}


/* ----------------------------------------------------------- */
/* التأثيرات عند الـ Hover */
/* ----------------------------------------------------------- */

.elementor-848 .elementor-element.elementor-element-31863fa:hover::before {
  left: 0; /* عند الـ Hover: الخلفية تتحرك لتغطي الكونتينر بالكامل */
}

.elementor-848 .elementor-element.elementor-element-31863fa:hover #container-headline,
.elementor-848 .elementor-element.elementor-element-31863fa:hover #container-text-block {
    color: #FFFFFF !important; /* عند الـ Hover: لون العنوان والنص يتغير للأبيض */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-223f1c0 */.elementor-848 .elementor-element.elementor-element-223f1c0 {
  /* ده الكونتينر الأب للـ Image Widget (الـ Widget نفسه) */
  overflow: hidden; /* مهم جداً: أي جزء من الصورة يخرج برا الـ Widget هيتخبى */
  transition: all 0.3s ease-in-out; /* عشان التأثير يكون سلس */
}

.elementor-848 .elementor-element.elementor-element-223f1c0 img {
  /* دي الصورة نفسها جوه الـ Widget */
  display: block; /* لضمان إنها تتصرف كـ Block element */
  max-width: 100%; /* تأكد إنها متعديش عرض الكونتينر الأب */
  height: auto; /* تحافظ على الأبعاد */
  transition: transform 0.3s ease-in-out; /* عشان تكبير/تصغير الصورة يكون سلس */
  transform: scale(1); /* حجمها الطبيعي في البداية */
}

.elementor-848 .elementor-element.elementor-element-223f1c0:hover img {
  /* التأثير عند الـ Hover: كبر الصورة من الداخل */
  transform: scale(1.25); /* كبر الصورة بنسبة 15% (تقدر تغير الرقم ده) */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ddfdbeb */.elementor-848 .elementor-element.elementor-element-ddfdbeb {
  /* ده الكونتينر الأب نفسه */
  position: relative; 
  overflow: hidden; /* مهم جداً عشان الخلفية المتحركة متخرجش برا الكونتينر */
  transition: background-color 0.4s ease-in-out; /* عشان لو في خلفية أساسية تتغير بسلاسة */
  background-color: #F8F8F8; /* خلفية افتراضية فاتحة (غيرها لو عايز) */
  border-radius: 8px; /* لو عايز حواف دائرية للكونتينر */
  box-shadow: 0 4px 35px rgba(0,0,0,0.20); /* ظل خفيف */
  z-index: 1; /* عشان الكونتينر يبقى فوق العناصر الأخرى في الصفحة */
}

/* العنصر الزائف اللي هيعمل تأثير الخلفية السوداء المتزحلقة */
.elementor-848 .elementor-element.elementor-element-ddfdbeb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%; /* يبدأ من خارج الكونتينر من اليسار */
  width: 100%; /* عرضه نفس عرض الكونتينر */
  height: 100%; /* ارتفاعه نفس ارتفاع الكونتينر */
  background-color: #232323; /* اللون الأسود بتاعنا */
  transition: left 0.4s ease-in-out; /* حركة سلايد سلسة */
  z-index: -1; /* مهم جداً: الخلفية تكون تحت محتوى الكونتينر (النص والصورة) */
}

/* ----------------------------------------------------------- */
/* تغيير لون الهيدلاين والنص في الوضع العادي */
/* ----------------------------------------------------------- */
.elementor-848 .elementor-element.elementor-element-ddfdbeb #container-headline,
.elementor-848 .elementor-element.elementor-element-ddfdbeb #container-text-block {
    color: #232323; /* لون افتراضي أسود للنص والعنوان */
    transition: color 0.4s ease-in-out; /* عشان يتغير اللون بسلاسة */
}


/* ----------------------------------------------------------- */
/* التأثيرات عند الـ Hover */
/* ----------------------------------------------------------- */

.elementor-848 .elementor-element.elementor-element-ddfdbeb:hover::before {
  left: 0; /* عند الـ Hover: الخلفية تتحرك لتغطي الكونتينر بالكامل */
}

.elementor-848 .elementor-element.elementor-element-ddfdbeb:hover #container-headline,
.elementor-848 .elementor-element.elementor-element-ddfdbeb:hover #container-text-block {
    color: #FFFFFF !important; /* عند الـ Hover: لون العنوان والنص يتغير للأبيض */
}/* End custom CSS */