.elementor-1059 .elementor-element.elementor-element-2d8bc32{--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;--padding-top:150px;--padding-bottom:80px;--padding-left:15px;--padding-right:15px;}.elementor-1059 .elementor-element.elementor-element-cf94148{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1059 .elementor-element.elementor-element-b4523d9 .ekit-heading__description{max-width:82%;}.elementor-1059 .elementor-element.elementor-element-b4523d9 .elementskit-section-title-wraper .elementskit-section-title{color:var( --e-global-color-c4de033 );font-family:"Noto Naskh Arabic", Sans-serif;font-size:60px;font-weight:700;line-height:90px;}.elementor-1059 .elementor-element.elementor-element-b4523d9 .elementskit-section-title-wraper .elementskit-section-title > span{color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-b4523d9 .elementskit-section-title-wraper .elementskit-section-title:hover > span{color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-b4523d9 .elementskit-section-title-wraper p{color:var( --e-global-color-02f7d73 );font-family:"Noto Naskh Arabic", Sans-serif;font-size:20px;font-weight:400;line-height:32px;}.elementor-1059 .elementor-element.elementor-element-f1e95a3{--display:flex;--padding-top:15px;--padding-bottom:80px;--padding-left:15px;--padding-right:15px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1059 .elementor-element.elementor-element-b4a2612{--display:flex;}.elementor-1059 .elementor-element.elementor-element-6cbb634{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-7bd03ec{--display:flex;}.elementor-widget-image-box .elementor-image-box-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-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-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-1059 .elementor-element.elementor-element-9ba46dd.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-9ba46dd.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-9ba46dd.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.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-1059 .elementor-element.elementor-element-dae63d8{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-2585888{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-9473293{--display:flex;}.elementor-1059 .elementor-element.elementor-element-1182c74.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-1182c74.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-1182c74.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-ede1271{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-864ce7b{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-22ed799{--display:flex;}.elementor-1059 .elementor-element.elementor-element-69e16f1.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-69e16f1.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-69e16f1.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-7d93a77{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-58b7a63{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-71891d7{--display:flex;}.elementor-1059 .elementor-element.elementor-element-3243817{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-f9f3bfc{--display:flex;}.elementor-1059 .elementor-element.elementor-element-6622787.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-6622787.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-6622787.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-5dd8805{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-6871e91{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-605d224{--display:flex;}.elementor-1059 .elementor-element.elementor-element-4ba9ed7{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-bdbb5dd{--display:flex;}.elementor-1059 .elementor-element.elementor-element-8d1e119.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-8d1e119.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-8d1e119.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-3d2370d{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-52fa4db{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-e7f2f13{--display:flex;}.elementor-1059 .elementor-element.elementor-element-1dcf935.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-1dcf935.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-1dcf935.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-bd283c6{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-58709d9{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-bdae1c2{--display:flex;}.elementor-1059 .elementor-element.elementor-element-57bce54{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-983c922{--display:flex;}.elementor-1059 .elementor-element.elementor-element-5dec2a0.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-5dec2a0.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-5dec2a0.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-da0167d{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-e7d4b0d{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-e868506{--display:flex;}.elementor-1059 .elementor-element.elementor-element-fb02c94.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-fb02c94.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-fb02c94.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-64ae136{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-d122cf1{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-015660d{--display:flex;}.elementor-1059 .elementor-element.elementor-element-21d9646{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-97e17e9{--display:flex;}.elementor-1059 .elementor-element.elementor-element-ef54ee7.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-ef54ee7.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-ef54ee7.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-9ecbc56{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-4a25124{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-2859e20{--display:flex;}.elementor-1059 .elementor-element.elementor-element-b280be7{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-6b05551{--display:flex;}.elementor-1059 .elementor-element.elementor-element-4e303d4.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-4e303d4.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-4e303d4.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-3f750c7{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-b1c8578{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-465f387{--display:flex;}.elementor-1059 .elementor-element.elementor-element-a0e9c8e{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-317e8ce{--display:flex;}.elementor-1059 .elementor-element.elementor-element-2dfbb43.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-2dfbb43.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-2dfbb43.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-ffd9800{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-f2140db{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-bf7bfe5{--display:flex;}.elementor-1059 .elementor-element.elementor-element-31efe1f{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-572f088{--display:flex;}.elementor-1059 .elementor-element.elementor-element-b5a84a2.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1059 .elementor-element.elementor-element-b5a84a2.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1059 .elementor-element.elementor-element-b5a84a2.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-wrapper .elementor-image-box-img{width:40%;}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img{height:100%;object-fit:cover;object-position:center center;transition-duration:0.3s;}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-title{font-family:"Noto Naskh Arabic", Sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var( --e-global-color-c4de033 );}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-description{font-family:"Noto Naskh Arabic", Sans-serif;font-size:15px;font-weight:500;line-height:20px;color:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-8a440c5{text-align:center;font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:22.5px;color:var( --e-global-color-02f7d73 );}.elementor-1059 .elementor-element.elementor-element-11a0578{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button{font-family:"Noto Naskh Arabic", Sans-serif;font-size:14px;font-weight:400;line-height:14px;padding:6px 12px 6px 12px;}.elementor-1059 .elementor-element.elementor-element-c90bcd9{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:4px;--n-tabs-title-padding-top:3px;--n-tabs-title-padding-right:6px;--n-tabs-title-padding-bottom:3px;--n-tabs-title-padding-left:6px;--n-tabs-title-font-size:18px;}.elementor-1059 .elementor-element.elementor-element-c90bcd9 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#02010100;}.elementor-1059 .elementor-element.elementor-element-c90bcd9.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-81f580c );}.elementor-1059 .elementor-element.elementor-element-c90bcd9.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1059 .elementor-element.elementor-element-c90bcd9.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#61CE7000;}.elementor-1059 .elementor-element.elementor-element-c90bcd9.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Noto Naskh Arabic", Sans-serif;font-weight:400;}body.elementor-page-1059:not(.elementor-motion-effects-element-type-background), body.elementor-page-1059 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#022C22;}@media(max-width:1024px){.elementor-1059 .elementor-element.elementor-element-6cbb634{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-3243817{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-4ba9ed7{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-57bce54{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-21d9646{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-b280be7{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-a0e9c8e{--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-31efe1f{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-1059 .elementor-element.elementor-element-2d8bc32{--padding-top:130px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1059 .elementor-element.elementor-element-cf94148{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1059 .elementor-element.elementor-element-b4523d9 .ekit-heading__description{max-width:100%;}.elementor-1059 .elementor-element.elementor-element-b4523d9 .elementskit-section-title-wraper .elementskit-section-title{font-size:48px;}.elementor-1059 .elementor-element.elementor-element-6cbb634{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-3243817{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-4ba9ed7{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-57bce54{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-21d9646{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-b280be7{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-a0e9c8e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-31efe1f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img{margin-bottom:15px;}.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-wrapper .elementor-image-box-img{width:60%;}.elementor-1059 .elementor-element.elementor-element-c90bcd9{--n-tabs-heading-wrap:nowrap;--n-tabs-heading-overflow-x:scroll;--n-tabs-title-white-space:nowrap;--n-tabs-title-gap:15px;}}/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-9ba46dd *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9ba46dd {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-9ba46dd .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9ba46dd:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0683fcb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-0683fcb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8df9317 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-8df9317 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bd03ec *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-7bd03ec .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-7bd03ec:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1182c74 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1182c74 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1182c74:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1182c74 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1182c74:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-9698c45 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-9698c45 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5101a75 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-5101a75 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9473293 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-9473293:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-9473293 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-9473293:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-69e16f1 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-69e16f1 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-69e16f1:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-69e16f1 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-69e16f1:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3a46d90 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3a46d90 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-af87f8a *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-af87f8a .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-22ed799 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-22ed799 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-22ed799:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-6622787 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6622787 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-6622787:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-6622787 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6622787:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-52150cc *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-52150cc .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7c37911 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-7c37911 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f9f3bfc *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-f9f3bfc:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d1e119 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-8d1e119 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-8d1e119:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-8d1e119 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-8d1e119:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f43dbac *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-f43dbac .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-91a9e21 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-91a9e21 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bdbb5dd *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-bdbb5dd:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1dcf935 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-1dcf935 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-1dcf935:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-1dcf935 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-1dcf935:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-409fb15 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-409fb15 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-031b21c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-031b21c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7f2f13 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e7f2f13 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e7f2f13:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-5dec2a0 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-5dec2a0 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-5dec2a0:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-e6fddb6 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-e6fddb6 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-dd6cf5c *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-dd6cf5c .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-983c922 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-983c922:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-983c922 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-983c922:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-fb02c94 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-fb02c94 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-fb02c94:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-fb02c94 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-fb02c94:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-60d2ebd *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-60d2ebd .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-89f5d00 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-89f5d00 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e868506 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-e868506:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-e868506 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-e868506:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-ef54ee7 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-ef54ee7 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-ef54ee7:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1bf4cf1 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-1bf4cf1 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cd574c0 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cd574c0 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-97e17e9 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-97e17e9 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-97e17e9:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-4e303d4 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-4e303d4 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-4e303d4:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-4e303d4 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-4e303d4:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b80f9c7 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-b80f9c7 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3d0c909 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-3d0c909 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b05551 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-6b05551 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-6b05551:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-2dfbb43 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-2dfbb43 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-2dfbb43:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cbd21e3 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-cbd21e3 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-18d21e8 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-18d21e8 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-317e8ce *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-317e8ce .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-317e8ce:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-b5a84a2 *//* 1. تأثير حركة الويدجت بالكامل للأعلى عند التمرير */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 {
    transition: transform 0.5s ease;
    cursor: pointer;
}

.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover {
    transform: translateY(-10px);
}

/* 2. إجبار الحاوية لتكون دائرية تماماً (حتى للصور المستطيلة) */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img {
    width: 150px; 
    height: 150px; 
    aspect-ratio: 1 / 1; /* يجبر الحاوية أن تكون مربعة كنسبة وتناسب */
    border-radius: 50% !important; /* تحويلها لدائرة */
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 3. تنسيق الصورة لتملا الدائرة بدون تشوه */
.elementor-1059 .elementor-element.elementor-element-b5a84a2 .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* يضمن قص الأطراف الزائدة للحفاظ على النسبة */
    object-position: center top; /* يركز على أعلى/منتصف الصورة لعدم قص الرأس */
    opacity: 0.8;
    filter: grayscale(40%);
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 4. تأثيرات الـ Hover عند التمرير على الويدجت */
/* ========================================= */

/* أ) تغيير لون الإطار مع ظل خفيف وناعم جداً */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.08); /* تم تخفيف الظل والانتشار */
}

/* ب) تكبير الصورة وإعادة ألوانها الطبيعية */
.elementor-1059 .elementor-element.elementor-element-b5a84a2:hover .elementor-image-box-img img {
    transform: scale(1.1); 
    opacity: 1;
    filter: grayscale(0%);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-284b723 *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-284b723 .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-baf5ccb *//* 1. التأثير الزجاجي الأساسي للزر */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button {
    /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.05) !important; 
    
    /* تأثير التغبيش/الضبابية للخلفية (السر في التأثير الزجاجي) */
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; /* لدعم متصفحات سفاري */
    
    /* إطار زجاجي رفيع وشفاف */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    
    /* ظل ناعم لإعطاء عمق للزر */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; 
    
    color: #ffffff !important; /* لون النص */
    border-radius: 30px !important; /* حواف دائرية (يمكنك تعديل الرقم) */
    transition: all 0.4s ease !important; /* انتقال سلس */
}

/* 2. تأثير عند تمرير الماوس (Hover) */
.elementor-1059 .elementor-element.elementor-element-baf5ccb .elementor-button:hover {
    /* زيادة إضاءة الزر قليلاً */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* تغيير لون الإطار للذهبي الخاص بك */
    border-color: rgba(212, 175, 55, 0.6) !important; 
    
    /* توهج ذهبي خفيف للظل */
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15) !important; 
    
    /* رفع الزر للأعلى قليلاً */
    transform: translateY(-3px); 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-572f088 *//* ========================================= */
/* 1. التأثير الزجاجي للحاوية (Glassmorphism) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 {
    background: rgba(255, 255, 255, 0.03); /* لون خلفية شفاف جداً */
    backdrop-filter: blur(16px); /* قوة تأثير الزجاج (البلور) */
    -webkit-backdrop-filter: blur(16px); /* لدعم متصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار زجاجي رفيع */
    border-radius: 24px; /* حواف دائرية ناعمة للحاوية */
    padding: 30px 20px; /* مسافات داخلية */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ظل ناعم للعمق */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* حركة الحاوية ولمعان الإطار عند تمرير الماوس */
.elementor-1059 .elementor-element.elementor-element-572f088:hover {
    transform: translateY(-10px); /* رفع البطاقة لأعلى */
    background: rgba(255, 255, 255, 0.06); /* زيادة الإضاءة الزجاجية قليلاً */
    border-color: rgba(212, 175, 55, 0.4); /* توهج الإطار باللون الذهبي */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); /* ظل ذهبي خفيف */
}

/* ========================================= */
/* 2. تنسيق الصورة الدائرية داخل الويدجت */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img {
    width: 140px; 
    height: 140px;
    margin: 0 auto 24px auto; 
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(40%); /* تأثير فني باهت للصورة */
    transition: transform 0.7s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* ========================================= */
/* 3. تأثيرات الصورة عند تمرير الماوس على الحاوية */
/* ========================================= */

/* تغيير لون إطار الصورة للذهبي */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

/* تكبير الصورة وإعادة الألوان الطبيعية */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-img img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);
}

/* ========================================= */
/* 4. تنسيق نصوص الويدجت (اختياري لضبط الألوان) */
/* ========================================= */
.elementor-1059 .elementor-element.elementor-element-572f088 .elementor-image-box-title {
    transition: color 0.4s ease;
}

/* توهج العنوان باللون الذهبي عند التمرير */
.elementor-1059 .elementor-element.elementor-element-572f088:hover .elementor-image-box-title {
    color: #d4af37 !important; 
}/* End custom CSS */
/* Start custom CSS *//* إضاءة الخلفية العائمة وتأثيرات التدرج */
body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 1000px;
    height: 1000px;
    background-color: #047857;
    border-radius: 50%;
    filter: blur(120px);
    mix-blend-mode: screen;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}
body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 800px;
    height: 800px;
    background-color: #d4af37;
    border-radius: 50%;
    filter: blur(100px);
    mix-blend-mode: screen;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}
/* ضمان بقاء المحتوى فوق الإضاءة */
.elementor-section-wrap, .elementor-location-header {
    position: relative;
    z-index: 10;
}

body,
body * {
    direction: ltr !important;
    unicode-bidi: embed;
}/* End custom CSS */