.elementor-958 .elementor-element.elementor-element-a82e4e7 > .elementor-container{max-width:1500px;}.elementor-958 .elementor-element.elementor-element-a82e4e7{margin:0px 0px 0px 0px;padding:0px 0px 0px 10px;}.elementor-958 .elementor-element.elementor-element-5e9b65e.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-958 .elementor-element.elementor-element-5e9b65e > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:10px;}.elementor-958 .elementor-element.elementor-element-79741f8 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-79741f8 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-79741f8 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-36d28ca > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-36d28ca .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-36d28ca .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-9789565 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-9789565 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-9789565 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-012eab4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-012eab4 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-012eab4 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-2501d17 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-2501d17 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-2501d17 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-ed070e1 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-ed070e1 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-ed070e1 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-a28467d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-a28467d .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-a28467d .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-0e5ec7b > .elementor-container{max-width:1500px;}.elementor-958 .elementor-element.elementor-element-0e5ec7b{margin:0px 0px 0px 0px;padding:0px 0px 0px 10px;}.elementor-958 .elementor-element.elementor-element-589a23c.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-958 .elementor-element.elementor-element-589a23c > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:10px;}.elementor-958 .elementor-element.elementor-element-aedac89 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-aedac89 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-aedac89 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-f5485f9 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-f5485f9 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-f5485f9 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-73eded3 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-73eded3 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-73eded3 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-6ac8dd4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-6ac8dd4 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-6ac8dd4 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-df71eec > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-df71eec .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-df71eec .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-bb86c9d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-bb86c9d .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-bb86c9d .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-1364ae1 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-1364ae1 .banner-title{font-size:22px;font-weight:700;}.elementor-958 .elementor-element.elementor-element-1364ae1 .banner-inner{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:400;line-height:28px;}.elementor-958 .elementor-element.elementor-element-3dc6c8a > .elementor-container{max-width:1500px;}.elementor-958 .elementor-element.elementor-element-3dc6c8a{margin:0px 0px 0px 0px;padding:0px 0px 0px 10px;}.elementor-958 .elementor-element.elementor-element-5d720bb.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-958 .elementor-element.elementor-element-5d720bb > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:10px;}.elementor-958 .elementor-element.elementor-element-59824e3 .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-59824e3 .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-69b94f0 .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-69b94f0 .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-7ada844 .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-7ada844 .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-3539e87 .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-3539e87 .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-a3348dd .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-a3348dd .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-c31a124 .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-c31a124 .banner-inner{font-family:"Kufam", Sans-serif;}.elementor-958 .elementor-element.elementor-element-bf19f0b .wrapper-content-banner{background-color:#859B5B;}.elementor-958 .elementor-element.elementor-element-bf19f0b .banner-inner{font-family:"Kufam", Sans-serif;}@media(max-width:1024px) and (min-width:768px){.elementor-958 .elementor-element.elementor-element-b523d7c{width:50%;}.elementor-958 .elementor-element.elementor-element-db63b0b{width:50%;}.elementor-958 .elementor-element.elementor-element-ba16bb3{width:50%;}.elementor-958 .elementor-element.elementor-element-dfd1ad1{width:50%;}.elementor-958 .elementor-element.elementor-element-bf471d0{width:50%;}.elementor-958 .elementor-element.elementor-element-2210cd0{width:50%;}.elementor-958 .elementor-element.elementor-element-781eaf2{width:50%;}}@media(max-width:1024px){.elementor-958 .elementor-element.elementor-element-aedac89 .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-f5485f9 .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-73eded3 .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-6ac8dd4 .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-df71eec .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-bb86c9d .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-1364ae1 .banner-title{font-size:18px;}.elementor-958 .elementor-element.elementor-element-59824e3 .elementor-repeater-item-b3dc905 .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-59824e3 .elementor-repeater-item-b3dc905 .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-59824e3 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-59824e3 .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-59824e3 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-69b94f0 .elementor-repeater-item-a860e40 .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-69b94f0 .elementor-repeater-item-a860e40 .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-69b94f0 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-69b94f0 .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-69b94f0 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-7ada844 .elementor-repeater-item-723b7fb .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-7ada844 .elementor-repeater-item-723b7fb .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-7ada844 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-7ada844 .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-7ada844 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-3539e87 .elementor-repeater-item-12925d6 .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-3539e87 .elementor-repeater-item-12925d6 .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-3539e87 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-3539e87 .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-3539e87 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-a3348dd .elementor-repeater-item-27b0c66 .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-a3348dd .elementor-repeater-item-27b0c66 .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-a3348dd > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-a3348dd .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-a3348dd .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-c31a124 .elementor-repeater-item-e69ed1d .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-c31a124 .elementor-repeater-item-e69ed1d .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-c31a124 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-c31a124 .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-c31a124 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-bf19f0b .elementor-repeater-item-ebf8477 .promo-banner:not(.banner-content-background) .content-banner, .elementor-958 .elementor-element.elementor-element-bf19f0b .elementor-repeater-item-ebf8477 .promo-banner.banner-content-background .wrapper-content-banner{max-width:85%;}.elementor-958 .elementor-element.elementor-element-bf19f0b > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-bf19f0b .banner-title{font-size:15px;}.elementor-958 .elementor-element.elementor-element-bf19f0b .banner-inner{font-size:12px;}}@media(max-width:767px){.elementor-958 .elementor-element.elementor-element-3dc6c8a{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-59824e3 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-59824e3 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-69b94f0 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-69b94f0 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-7ada844 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-7ada844 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-3539e87 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-3539e87 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-a3348dd > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-a3348dd .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-c31a124 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-c31a124 .banner-inner{font-size:12px;}.elementor-958 .elementor-element.elementor-element-bf19f0b > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-958 .elementor-element.elementor-element-bf19f0b .banner-inner{font-size:12px;}}/* Start custom CSS for wd_banner_carousel, class: .elementor-element-79741f8 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-36d28ca *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-9789565 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-012eab4 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-2501d17 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-ed070e1 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-a28467d *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-aedac89 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-f5485f9 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-73eded3 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-6ac8dd4 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-df71eec *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-bb86c9d *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-1364ae1 *//* =================================== CSS-ONLY Promo Banner Hover Effect No JavaScript Required! =================================== */ /* Base styling for the banner */ section#desktop-carsouel .promo-banner { position: relative; cursor: pointer; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } section#desktop-carsouel .promo-banner .content-banner { position: relative; } /* Fix z-index to ensure description appears above everything */ section#desktop-carsouel .promo-banner .main-wrapp-img { position: relative; z-index: 1; } /* =================================== HEADING - Hide on Hover =================================== */ section#desktop-carsouel .promo-banner .banner-title { position: relative; z-index: 2; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; transform: translateY(0); } section#desktop-carsouel .promo-banner:hover .banner-title { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* =================================== DESCRIPTION BOX - Show on Hover =================================== */ /*carousel desc hover start*/ .elementor-repeater-item-abfe824 .promo-banner .content-banner::after { content: 'نستخدم أفضل المواد وأحدث التقنيات لضمان تدفق المياه بسلاسة وصوت مريح، مع مراعاة الجمالية والوظيفية في كل تصميم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-d548027 .promo-banner .content-banner::after { content: 'توريد وتركيب عشب صناعي عالي الجودة بمظهر طبيعي ولمسة جمالية تدوم طويلًا، مناسب للحدائق، الأسطح، الملاعب والممرات.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0f88010 .promo-banner .content-banner::after { content: 'تنفيذ ديكورات زراعية مبتكرة تضيف طابع جمالي فريد للمكان، تشمل الجدران الخضراء، الممرات، الأحجار الزخرفية وأحواض الزراعة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-a848d1f .promo-banner .content-banner::after { content: 'زراعة وتركيب ثيل طبيعي بأفضل الأنواع المناسبة للمناخ، مع تجهيز التربة والاهتمام بالتفاصيل لضمان نمو صحي ومظهر أخضر جذاب يدوم لفترة طويلة.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-0d6648f .promo-banner .content-banner::after { content: 'تنفيذ مظلات وسواتر بأشكال وتصاميم متنوعة لتوفير الخصوصية والحماية من الشمس والعوامل الجوية، بالإضافة إلى تصميم وتركيب غرف زجاجية أنيقة وعملية.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-64b89a0 .promo-banner .content-banner::after { content: 'تصميم وتنفيذ شبكات ري حديثة (يدوية وآلية) تساعد على ترشيد استهلاك المياه وضمان توزيع متوازن للنباتات، مع سهولة التحكم.'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .elementor-repeater-item-01ded8c .promo-banner .content-banner::after { content: 'نقدّم خدمات تصميم وتنسيق الحدائق بأفكار عصرية تناسب المساحات المختلفة، مع اختيار النباتات المناسبة وتنسيقها بشكل جمالي يضفي لمسة مميزة'; /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } /*carousel desc hover end*/ .desktop-carsouel .promo-banner .content-banner::after { /* Positioning - centered over the whole banner */ position: absolute; top: -20%; left: 50%; transform: translate(-50%, -50%) translateY(50px) scale(0.95); /* Sizing */ width: calc(100% - 50px); max-width: 500px; padding: 20px 15px; /* Styling */ background: rgba(139, 161, 96, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px !important; /* Typography */ color: #ffffff; font-size: 16px; line-height: 1.8; text-align: center; font-family: inherit; /* Effects */ opacity: 0; z-index: 10; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .promo-banner:hover .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; } /* =================================== ARROW ICON - Top Right =================================== */ .promo-banner:hover .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== IMAGE OVERLAY - Darken on Hover =================================== */ .promo-banner .banner-image { position: relative; transition: all 0.5s ease; } .promo-banner .banner-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; pointer-events: none; } .promo-banner:hover .banner-image::after { opacity: 1; } /* Optional: Slight zoom on image */ .promo-banner .banner-image img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .promo-banner:hover .banner-image img { transform: scale(1.05); } /* Keyboard focus state */ .promo-banner:focus-within .banner-title { opacity: 0; transform: translateY(-20px); } .promo-banner:focus-within .content-banner::after { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } .promo-banner:focus-within .wrapper-content-banner::before { opacity: 1; transform: scale(1) rotate(0deg); } /* =================================== PERFORMANCE OPTIMIZATION =================================== */ .promo-banner { will-change: transform; } .promo-banner .banner-title, .promo-banner .content-banner::after, .promo-banner .wrapper-content-banner::before { will-change: opacity, transform; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal { margin-top: 35px; } ul.wd-nav-pagin.wd-clickable.wd-type-bullets.wd-horizontal span { width : 70px; height : 6px }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-59824e3 */.elementor-958 .elementor-element.elementor-element-59824e3 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-59824e3 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-59824e3 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-59824e3 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-69b94f0 */.elementor-958 .elementor-element.elementor-element-69b94f0 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-69b94f0 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-69b94f0 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-69b94f0 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-7ada844 */.elementor-958 .elementor-element.elementor-element-7ada844 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-7ada844 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-7ada844 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-7ada844 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-3539e87 */.elementor-958 .elementor-element.elementor-element-3539e87 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-3539e87 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-3539e87 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-3539e87 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-a3348dd */.elementor-958 .elementor-element.elementor-element-a3348dd .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-a3348dd .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-a3348dd .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-a3348dd .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-c31a124 */.elementor-958 .elementor-element.elementor-element-c31a124 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-c31a124 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-c31a124 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-c31a124 .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */ /* Start custom CSS for wd_banner_carousel, class: .elementor-element-bf19f0b */.elementor-958 .elementor-element.elementor-element-bf19f0b .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 12px; } @media(max-width:767px){ .elementor-958 .elementor-element.elementor-element-bf19f0b .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 150px; display: flex; align-items: center; } } @media(min-width:768px) and (max-width : 1200px){ .elementor-958 .elementor-element.elementor-element-bf19f0b .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { min-height: 145px; display: flex; align-items: center; } .elementor-958 .elementor-element.elementor-element-bf19f0b .wrapper-content-banner.wd-fill.wd-items-bottom.wd-justify-center { padding: 20px 15px; } }/* End custom CSS */