MASDAR ENERGY – Our Services Section<\/title>\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);\n overflow-x: hidden;\n }\n \n \/* Original Logo Colors *\/\n :root {\n --primary: #0a2b5e; \/* Deep Navy from logo *\/\n --primary-dark: #051c3f;\n --primary-light: #1e3a7a;\n --secondary: #f39c12; \/* Fiery Orange from logo *\/\n --secondary-dark: #e67e22;\n --secondary-light: #f5b041;\n --accent-grey: #f8fafc;\n --text-dark: #0f172a;\n --text-light: #475569;\n --white: #ffffff;\n --shadow-sm: 0 10px 30px -15px rgba(0,0,0,0.1);\n --shadow-md: 0 20px 40px -12px rgba(0,0,0,0.15);\n --shadow-hover: 0 25px 50px -12px rgba(0,0,0,0.25);\n --transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }\n \n \/* Services Section Main *\/\n .services-section {\n padding: 100px 0;\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #ffffff 0%, #fef9f0 100%);\n }\n \n \/* Animated background with logo colors *\/\n .services-section::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(243,156,18,0.04) 0%, rgba(10,43,94,0.02) 70%);\n animation: rotateBg 40s linear infinite;\n pointer-events: none;\n z-index: 0;\n }\n \n @keyframes rotateBg {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .container {\n max-width: 1300px;\n margin: 0 auto;\n padding: 0 24px;\n position: relative;\n z-index: 1;\n }\n \n \/* Section Header *\/\n .section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n }\n \n .section-subtitle {\n color: var(--secondary);\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 15px;\n display: inline-block;\n background: linear-gradient(135deg, var(--secondary-light), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n \n .section-title {\n font-size: 2.8rem;\n font-weight: 800;\n color: var(--primary);\n margin-bottom: 20px;\n position: relative;\n display: inline-block;\n }\n \n .section-title span {\n color: var(--secondary);\n position: relative;\n display: inline-block;\n animation: titleGlow 3s ease-in-out infinite;\n }\n \n @keyframes titleGlow {\n 0%, 100% { text-shadow: 0 0 0px rgba(243,156,18,0); }\n 50% { text-shadow: 0 0 15px rgba(243,156,18,0.5); }\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--secondary), var(--primary));\n border-radius: 4px;\n animation: lineExpand 2s ease-out infinite;\n }\n \n @keyframes lineExpand {\n 0% { width: 80px; opacity: 1; }\n 50% { width: 120px; opacity: 0.7; }\n 100% { width: 80px; opacity: 1; }\n }\n \n .section-description {\n max-width: 700px;\n margin: 25px auto 0;\n color: var(--text-light);\n font-size: 1.1rem;\n line-height: 1.8;\n }\n \n \/* Services Grid *\/\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n margin-top: 30px;\n }\n \n \/* Service Card *\/\n .service-card {\n background: var(--white);\n border-radius: 30px;\n padding: 35px 25px;\n text-align: center;\n position: relative;\n transition: var(--transition);\n box-shadow: var(--shadow-sm);\n border: 1px solid rgba(243,156,18,0.1);\n overflow: hidden;\n z-index: 1;\n cursor: pointer;\n }\n \n \/* Gradient background effect on hover - with logo colors *\/\n .service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n opacity: 0;\n transition: var(--transition);\n z-index: -1;\n border-radius: 30px;\n }\n \n .service-card:hover::before {\n opacity: 1;\n }\n \n .service-card:hover {\n transform: translateY(-15px) scale(1.02);\n box-shadow: var(--shadow-hover);\n }\n \n \/* Icon - with logo colors *\/\n .service-icon {\n width: 85px;\n height: 85px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n border-radius: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 25px;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(10,43,94,0.3);\n }\n \n .service-icon::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);\n transform: rotate(45deg);\n transition: var(--transition);\n opacity: 0;\n }\n \n .service-card:hover .service-icon::after {\n opacity: 1;\n animation: shine 0.6s ease-out;\n }\n \n @keyframes shine {\n 0% { transform: translateX(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) rotate(45deg); }\n }\n \n .service-card:hover .service-icon {\n background: var(--white);\n transform: rotateY(180deg);\n box-shadow: 0 5px 20px rgba(243,156,18,0.4);\n }\n \n .service-icon i {\n font-size: 3rem;\n color: var(--white);\n transition: var(--transition);\n }\n \n .service-card:hover .service-icon i {\n color: var(--secondary);\n transform: rotateY(-180deg);\n }\n \n \/* Service Title *\/\n .service-title {\n font-size: 1.6rem;\n font-weight: 700;\n margin-bottom: 15px;\n transition: var(--transition);\n color: var(--primary);\n }\n \n .service-card:hover .service-title {\n color: var(--white);\n }\n \n \/* Service Description *\/\n .service-desc {\n color: var(--text-light);\n line-height: 1.7;\n margin-bottom: 20px;\n transition: var(--transition);\n font-size: 0.95rem;\n }\n \n .service-card:hover .service-desc {\n color: rgba(255,255,255,0.95);\n }\n \n \/* Features List *\/\n .service-features {\n list-style: none;\n margin: 20px 0;\n text-align: left;\n }\n \n .service-features li {\n padding: 8px 0;\n color: var(--text-light);\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 10px;\n transition: var(--transition);\n border-bottom: 1px dashed rgba(0,0,0,0.05);\n }\n \n .service-features li i {\n color: var(--secondary);\n font-size: 0.85rem;\n transition: var(--transition);\n }\n \n .service-card:hover .service-features li {\n color: rgba(255,255,255,0.9);\n }\n \n .service-card:hover .service-features li i {\n color: var(--white);\n transform: translateX(5px);\n }\n \n \/* Button - with logo colors *\/\n .service-btn {\n margin-top: 20px;\n padding: 12px 30px;\n background: transparent;\n border: 2px solid var(--secondary);\n border-radius: 50px;\n color: var(--secondary);\n font-weight: 700;\n cursor: pointer;\n transition: var(--transition);\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.95rem;\n }\n \n .service-card:hover .service-btn {\n background: var(--white);\n border-color: var(--white);\n color: var(--primary);\n transform: translateX(5px);\n }\n \n .service-btn i {\n transition: var(--transition);\n }\n \n .service-btn:hover i {\n transform: translateX(5px);\n }\n \n \/* Service Image *\/\n .service-image {\n width: 100%;\n height: 180px;\n margin-top: 20px;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n }\n \n .service-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--transition);\n }\n \n .service-card:hover .service-image img {\n transform: scale(1.08);\n }\n \n \/* Cinematic effect on images *\/\n .cinematic-effect {\n position: relative;\n overflow: hidden;\n border-radius: 20px;\n }\n \n .cinematic-effect::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(125deg, rgba(243,156,18,0.2) 0%, rgba(10,43,94,0.1) 40%, transparent 70%);\n pointer-events: none;\n z-index: 1;\n border-radius: inherit;\n }\n \n \/* Card entry animation *\/\n @keyframes cardFloat {\n 0% {\n opacity: 0;\n transform: translateY(50px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @media (max-width: 768px) {\n .services-section { padding: 60px 0; }\n .section-title { font-size: 2rem; }\n .services-grid { grid-template-columns: 1fr; gap: 25px; }\n .service-card { padding: 25px 20px; }\n .service-image { height: 150px; }\n }\n \n \/* Scroll reveal effect *\/\n .scroll-reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.8s ease;\n }\n \n .scroll-reveal.revealed {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* Light watermark *\/\n .watermark {\n position: absolute;\n bottom: 20px;\n right: 20px;\n opacity: 0.03;\n font-size: 4rem;\n font-weight: 800;\n color: var(--primary);\n pointer-events: none;\n z-index: 0;\n }\n <\/style>\n<\/head>\n<body>\n\n\n\n\n<section class=\"services-section\" id=\"services\">\n <div class=\"watermark\">MASDAR ENERGY<\/div>\n <div class=\"container\">\n \n \n <div class=\"section-header\" data-aos=\"fade-up\" data-aos-duration=\"1000\">\n <div class=\"section-subtitle\">\n <i class=\"fas fa-cogs\"><\/i> WHAT WE DO\n <\/div>\n <h2 class=\"section-title\">\n Our <span>Professional Services<\/span>\n <\/h2>\n <p class=\"section-description\">\n We provide integrated solutions in water and electricity infrastructure with the highest quality and safety standards\n <\/p>\n <\/div>\n \n \n <div class=\"services-grid\">\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"100\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-water\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Water & Wastewater Networks<\/h3>\n <p class=\"service-desc\">\n Execution of water and wastewater networks with latest technologies and international standards\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Construction of water and wastewater network<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Construction of all types of water tanks<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Related facilities and connections<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('water')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541888946425-d81bb19240f5?w=600&h=400&fit=crop\" alt=\"Water and Wastewater Networks\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"200\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-tools\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Operation & Maintenance (O&M)<\/h3>\n <p class=\"service-desc\">\n Comprehensive services for operating and maintaining all water systems and stations\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> O&M for potable water systems<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Irrigation systems maintenance<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Sewer systems operation<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('om')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/masdarenergy.net\/main\/wp-content\/uploads\/2026\/03\/Untitled-design.jpg\" alt=\"Operation and Maintenance\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"300\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-building\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Civil Works<\/h3>\n <p class=\"service-desc\">\n Execution of service buildings and civil projects with highest quality\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Residential buildings construction<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Public services buildings<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Civil maintenance works<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('civil')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1487958449943-2429e8be8625?w=600&h=400&fit=crop\" alt=\"Civil Works\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"400\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-tree\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Landscape Works<\/h3>\n <p class=\"service-desc\">\n Design and execution of landscaping and aesthetics for various sites\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Landscape works<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Green areas design<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Irrigation systems<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('landscape')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558904541-efa843a96f01?w=600&h=400&fit=crop\" alt=\"Landscape Works\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"500\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-road\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Road Protection & FOC Laying<\/h3>\n <p class=\"service-desc\">\n Road protection works and fiber optic cable laying and fixing\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Road protection works<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> FOC laying and fixing<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Cable trenching and backfilling<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('road')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/masdarenergy.net\/main\/wp-content\/uploads\/2026\/03\/Untitled-design.jpg\" alt=\"Road Protection and FOC Laying\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"600\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-bolt\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Power & Electricity Projects<\/h3>\n <p class=\"service-desc\">\n Execution of electrical networks and substations with highest specifications\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Electrical networks construction<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Substations and transformers<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Cable laying and testing<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('power')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092160607-ee22621dd758?w=600&h=400&fit=crop\" alt=\"Power and Electricity Projects\">\n <\/div>\n <\/div>\n \n <\/div>\n \n \n <div style=\"text-align: center; margin-top: 60px;\" data-aos=\"zoom-in\" data-aos-duration=\"1000\">\n <button class=\"service-btn\" onclick=\"contactUs()\" style=\"background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 15px 45px; font-size: 1.1rem; box-shadow: 0 10px 25px rgba(10,43,94,0.3);\">\n <i class=\"fas fa-headset\"><\/i> Request a Service Now\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n \n <\/div>\n<\/section>\n\n\n<script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n\n<script>\n \/\/ Initialize AOS for animations\n AOS.init({\n duration: 1000,\n once: false,\n mirror: true,\n offset: 100,\n easing: 'ease-out-cubic'\n });\n \n \/\/ Custom scroll reveal effect\n const revealElements = document.querySelectorAll('.scroll-reveal');\n \n const revealOnScroll = () => {\n revealElements.forEach(element => {\n const elementTop = element.getBoundingClientRect().top;\n const windowHeight = window.innerHeight;\n \n if (elementTop < windowHeight - 100) {\n element.classList.add('revealed');\n }\n });\n };\n \n window.addEventListener('scroll', revealOnScroll);\n revealOnScroll();\n \n \/\/ Function to show service details with animation\n function showServiceDetails(serviceType) {\n const messages = {\n 'water': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Water & Wastewater Networks<\/strong><br><br>\u2705 Construction of water and wastewater network<br>\u2705 Construction of all types of water tanks<br>\u2705 Related facilities and connections<br>\u2705 Connection works for facilities<br>\u2705 Use of high quality HDPE materials',\n 'om': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Operation & Maintenance (O&M)<\/strong><br><br>\u2705 O&M for potable water systems<br>\u2705 Irrigation systems maintenance<br>\u2705 Sewer systems operation<br>\u2705 Station and pump operation & maintenance<br>\u2705 Regular maintenance according to schedules',\n 'civil': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Civil Works<\/strong><br><br>\u2705 Residential buildings construction<br>\u2705 Public services buildings<br>\u2705 Civil maintenance works<br>\u2705 Service buildings construction<br>\u2705 Renovation and rehabilitation works',\n 'landscape': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Landscape Works<\/strong><br><br>\u2705 Landscape works<br>\u2705 Green areas design<br>\u2705 Irrigation systems<br>\u2705 Design and execution of green spaces<br>\u2705 Automatic irrigation networks',\n 'road': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Road Protection & FOC Laying<\/strong><br><br>\u2705 Road protection works<br>\u2705 FOC laying and fixing<br>\u2705 Cable trenching and backfilling<br>\u2705 Utility lines protection<br>\u2705 Excavation and backfilling works',\n 'power': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Power & Electricity Projects<\/strong><br><br>\u2705 Electrical networks construction<br>\u2705 Substations and transformers<br>\u2705 Cable laying and testing<br>\u2705 Medium and low voltage networks execution<br>\u2705 Electrical maintenance works'\n };\n \n const message = messages[serviceType] || 'Please contact us for more details about our services';\n \n \/\/ Create custom modal popup with animation\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(10,43,94,0.9);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.3s ease;\n cursor: pointer;\n `;\n \n const modalContent = document.createElement('div');\n modalContent.style.cssText = `\n background: linear-gradient(135deg, #fff, #fef9f0);\n border-radius: 30px;\n padding: 40px;\n max-width: 500px;\n width: 90%;\n text-align: center;\n animation: slideUp 0.4s ease;\n box-shadow: 0 30px 60px rgba(0,0,0,0.3);\n border-top: 5px solid var(--secondary);\n border-bottom: 5px solid var(--primary);\n cursor: default;\n `;\n \n modalContent.innerHTML = `\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;\">\n <i class=\"fas fa-info-circle\" style=\"font-size: 2.5rem; color: white;\"><\/i>\n <\/div>\n <div style=\"font-size: 1.1rem; line-height: 1.8; text-align: left; color: var(--text-dark);\">${message}<\/div>\n <button onclick=\"this.closest('div').parentElement.remove()\" style=\"margin-top: 30px; padding: 12px 30px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer; transition: 0.3s;\">\n <i class=\"fas fa-times\"><\/i> Close\n <\/button>\n `;\n \n modal.appendChild(modalContent);\n document.body.appendChild(modal);\n \n modal.addEventListener('click', (e) => {\n if (e.target === modal) modal.remove();\n });\n }\n \n \/\/ Contact us function\n function contactUs() {\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(10,43,94,0.9);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.3s ease;\n `;\n \n const modalContent = document.createElement('div');\n modalContent.style.cssText = `\n background: linear-gradient(135deg, #fff, #fef9f0);\n border-radius: 30px;\n padding: 40px;\n max-width: 450px;\n width: 90%;\n text-align: center;\n animation: slideUp 0.4s ease;\n border-top: 5px solid var(--secondary);\n border-bottom: 5px solid var(--primary);\n `;\n \n modalContent.innerHTML = `\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;\">\n <i class=\"fas fa-phone-alt\" style=\"font-size: 2rem; color: white;\"><\/i>\n <\/div>\n <h3 style=\"color: var(--primary); margin-bottom: 20px; font-size: 1.5rem;\">Contact Our Sales Team<\/h3>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-phone\" style=\"color: var(--secondary);\"><\/i> <strong>+968 99422943<\/strong><\/p>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-phone-alt\" style=\"color: var(--secondary);\"><\/i> <strong>+968 99321968<\/strong><\/p>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-envelope\" style=\"color: var(--secondary);\"><\/i> <strong>Management@masdarenergy-om.com<\/strong><\/p>\n <p style=\"margin: 20px 0 0; color: var(--text-light);\">Please contact us for a detailed quote<\/p>\n <button onclick=\"this.closest('div').parentElement.remove()\" style=\"margin-top: 30px; padding: 12px 30px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer;\">\n Close\n <\/button>\n `;\n \n modal.appendChild(modalContent);\n document.body.appendChild(modal);\n \n modal.addEventListener('click', (e) => {\n if (e.target === modal) modal.remove();\n });\n }\n \n \/\/ Add additional animation styles\n const style = document.createElement('style');\n style.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n \/* Additional hover effects *\/\n .service-card {\n animation: cardFloat 0.6s ease backwards;\n }\n `;\n document.head.appendChild(style);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MASDAR ENERGY – Our Services Section MASDAR ENERGY WHAT WE DO Our Professional Services We provide integrated solutions in water and electricity infrastructure with the highest quality and safety standards Water & Wastewater Networks Execution of water and wastewater networks with latest technologies and international standards Construction of water and wastewater network Construction of all […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3312","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/comments?post=3312"}],"version-history":[{"count":8,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312\/revisions"}],"predecessor-version":[{"id":3424,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312\/revisions\/3424"}],"wp:attachment":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/media?parent=3312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3312,"date":"2026-04-14T12:59:17","date_gmt":"2026-04-14T09:59:17","guid":{"rendered":"https:\/\/masdarenergy.net\/main\/?page_id=3312"},"modified":"2026-04-14T18:52:20","modified_gmt":"2026-04-14T15:52:20","slug":"our-services-in-masdar-2","status":"publish","type":"page","link":"https:\/\/masdarenergy.net\/main\/our-services-in-masdar-2\/","title":{"rendered":"Our Services in Masdar Energy"},"content":{"rendered":"\n\n\n\n \n \n MASDAR ENERGY – Our Services Section<\/title>\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);\n overflow-x: hidden;\n }\n \n \/* Original Logo Colors *\/\n :root {\n --primary: #0a2b5e; \/* Deep Navy from logo *\/\n --primary-dark: #051c3f;\n --primary-light: #1e3a7a;\n --secondary: #f39c12; \/* Fiery Orange from logo *\/\n --secondary-dark: #e67e22;\n --secondary-light: #f5b041;\n --accent-grey: #f8fafc;\n --text-dark: #0f172a;\n --text-light: #475569;\n --white: #ffffff;\n --shadow-sm: 0 10px 30px -15px rgba(0,0,0,0.1);\n --shadow-md: 0 20px 40px -12px rgba(0,0,0,0.15);\n --shadow-hover: 0 25px 50px -12px rgba(0,0,0,0.25);\n --transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }\n \n \/* Services Section Main *\/\n .services-section {\n padding: 100px 0;\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #ffffff 0%, #fef9f0 100%);\n }\n \n \/* Animated background with logo colors *\/\n .services-section::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(243,156,18,0.04) 0%, rgba(10,43,94,0.02) 70%);\n animation: rotateBg 40s linear infinite;\n pointer-events: none;\n z-index: 0;\n }\n \n @keyframes rotateBg {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .container {\n max-width: 1300px;\n margin: 0 auto;\n padding: 0 24px;\n position: relative;\n z-index: 1;\n }\n \n \/* Section Header *\/\n .section-header {\n text-align: center;\n margin-bottom: 60px;\n position: relative;\n }\n \n .section-subtitle {\n color: var(--secondary);\n font-size: 1rem;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 15px;\n display: inline-block;\n background: linear-gradient(135deg, var(--secondary-light), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n \n .section-title {\n font-size: 2.8rem;\n font-weight: 800;\n color: var(--primary);\n margin-bottom: 20px;\n position: relative;\n display: inline-block;\n }\n \n .section-title span {\n color: var(--secondary);\n position: relative;\n display: inline-block;\n animation: titleGlow 3s ease-in-out infinite;\n }\n \n @keyframes titleGlow {\n 0%, 100% { text-shadow: 0 0 0px rgba(243,156,18,0); }\n 50% { text-shadow: 0 0 15px rgba(243,156,18,0.5); }\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--secondary), var(--primary));\n border-radius: 4px;\n animation: lineExpand 2s ease-out infinite;\n }\n \n @keyframes lineExpand {\n 0% { width: 80px; opacity: 1; }\n 50% { width: 120px; opacity: 0.7; }\n 100% { width: 80px; opacity: 1; }\n }\n \n .section-description {\n max-width: 700px;\n margin: 25px auto 0;\n color: var(--text-light);\n font-size: 1.1rem;\n line-height: 1.8;\n }\n \n \/* Services Grid *\/\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n margin-top: 30px;\n }\n \n \/* Service Card *\/\n .service-card {\n background: var(--white);\n border-radius: 30px;\n padding: 35px 25px;\n text-align: center;\n position: relative;\n transition: var(--transition);\n box-shadow: var(--shadow-sm);\n border: 1px solid rgba(243,156,18,0.1);\n overflow: hidden;\n z-index: 1;\n cursor: pointer;\n }\n \n \/* Gradient background effect on hover - with logo colors *\/\n .service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n opacity: 0;\n transition: var(--transition);\n z-index: -1;\n border-radius: 30px;\n }\n \n .service-card:hover::before {\n opacity: 1;\n }\n \n .service-card:hover {\n transform: translateY(-15px) scale(1.02);\n box-shadow: var(--shadow-hover);\n }\n \n \/* Icon - with logo colors *\/\n .service-icon {\n width: 85px;\n height: 85px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n border-radius: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 25px;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(10,43,94,0.3);\n }\n \n .service-icon::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);\n transform: rotate(45deg);\n transition: var(--transition);\n opacity: 0;\n }\n \n .service-card:hover .service-icon::after {\n opacity: 1;\n animation: shine 0.6s ease-out;\n }\n \n @keyframes shine {\n 0% { transform: translateX(-100%) rotate(45deg); }\n 100% { transform: translateX(100%) rotate(45deg); }\n }\n \n .service-card:hover .service-icon {\n background: var(--white);\n transform: rotateY(180deg);\n box-shadow: 0 5px 20px rgba(243,156,18,0.4);\n }\n \n .service-icon i {\n font-size: 3rem;\n color: var(--white);\n transition: var(--transition);\n }\n \n .service-card:hover .service-icon i {\n color: var(--secondary);\n transform: rotateY(-180deg);\n }\n \n \/* Service Title *\/\n .service-title {\n font-size: 1.6rem;\n font-weight: 700;\n margin-bottom: 15px;\n transition: var(--transition);\n color: var(--primary);\n }\n \n .service-card:hover .service-title {\n color: var(--white);\n }\n \n \/* Service Description *\/\n .service-desc {\n color: var(--text-light);\n line-height: 1.7;\n margin-bottom: 20px;\n transition: var(--transition);\n font-size: 0.95rem;\n }\n \n .service-card:hover .service-desc {\n color: rgba(255,255,255,0.95);\n }\n \n \/* Features List *\/\n .service-features {\n list-style: none;\n margin: 20px 0;\n text-align: left;\n }\n \n .service-features li {\n padding: 8px 0;\n color: var(--text-light);\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 10px;\n transition: var(--transition);\n border-bottom: 1px dashed rgba(0,0,0,0.05);\n }\n \n .service-features li i {\n color: var(--secondary);\n font-size: 0.85rem;\n transition: var(--transition);\n }\n \n .service-card:hover .service-features li {\n color: rgba(255,255,255,0.9);\n }\n \n .service-card:hover .service-features li i {\n color: var(--white);\n transform: translateX(5px);\n }\n \n \/* Button - with logo colors *\/\n .service-btn {\n margin-top: 20px;\n padding: 12px 30px;\n background: transparent;\n border: 2px solid var(--secondary);\n border-radius: 50px;\n color: var(--secondary);\n font-weight: 700;\n cursor: pointer;\n transition: var(--transition);\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 0.95rem;\n }\n \n .service-card:hover .service-btn {\n background: var(--white);\n border-color: var(--white);\n color: var(--primary);\n transform: translateX(5px);\n }\n \n .service-btn i {\n transition: var(--transition);\n }\n \n .service-btn:hover i {\n transform: translateX(5px);\n }\n \n \/* Service Image *\/\n .service-image {\n width: 100%;\n height: 180px;\n margin-top: 20px;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n }\n \n .service-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: var(--transition);\n }\n \n .service-card:hover .service-image img {\n transform: scale(1.08);\n }\n \n \/* Cinematic effect on images *\/\n .cinematic-effect {\n position: relative;\n overflow: hidden;\n border-radius: 20px;\n }\n \n .cinematic-effect::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(125deg, rgba(243,156,18,0.2) 0%, rgba(10,43,94,0.1) 40%, transparent 70%);\n pointer-events: none;\n z-index: 1;\n border-radius: inherit;\n }\n \n \/* Card entry animation *\/\n @keyframes cardFloat {\n 0% {\n opacity: 0;\n transform: translateY(50px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @media (max-width: 768px) {\n .services-section { padding: 60px 0; }\n .section-title { font-size: 2rem; }\n .services-grid { grid-template-columns: 1fr; gap: 25px; }\n .service-card { padding: 25px 20px; }\n .service-image { height: 150px; }\n }\n \n \/* Scroll reveal effect *\/\n .scroll-reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.8s ease;\n }\n \n .scroll-reveal.revealed {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* Light watermark *\/\n .watermark {\n position: absolute;\n bottom: 20px;\n right: 20px;\n opacity: 0.03;\n font-size: 4rem;\n font-weight: 800;\n color: var(--primary);\n pointer-events: none;\n z-index: 0;\n }\n <\/style>\n<\/head>\n<body>\n\n\n\n\n<section class=\"services-section\" id=\"services\">\n <div class=\"watermark\">MASDAR ENERGY<\/div>\n <div class=\"container\">\n \n \n <div class=\"section-header\" data-aos=\"fade-up\" data-aos-duration=\"1000\">\n <div class=\"section-subtitle\">\n <i class=\"fas fa-cogs\"><\/i> WHAT WE DO\n <\/div>\n <h2 class=\"section-title\">\n Our <span>Professional Services<\/span>\n <\/h2>\n <p class=\"section-description\">\n We provide integrated solutions in water and electricity infrastructure with the highest quality and safety standards\n <\/p>\n <\/div>\n \n \n <div class=\"services-grid\">\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"100\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-water\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Water & Wastewater Networks<\/h3>\n <p class=\"service-desc\">\n Execution of water and wastewater networks with latest technologies and international standards\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Construction of water and wastewater network<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Construction of all types of water tanks<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Related facilities and connections<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('water')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541888946425-d81bb19240f5?w=600&h=400&fit=crop\" alt=\"Water and Wastewater Networks\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"200\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-tools\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Operation & Maintenance (O&M)<\/h3>\n <p class=\"service-desc\">\n Comprehensive services for operating and maintaining all water systems and stations\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> O&M for potable water systems<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Irrigation systems maintenance<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Sewer systems operation<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('om')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/masdarenergy.net\/main\/wp-content\/uploads\/2026\/03\/Untitled-design.jpg\" alt=\"Operation and Maintenance\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"300\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-building\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Civil Works<\/h3>\n <p class=\"service-desc\">\n Execution of service buildings and civil projects with highest quality\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Residential buildings construction<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Public services buildings<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Civil maintenance works<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('civil')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1487958449943-2429e8be8625?w=600&h=400&fit=crop\" alt=\"Civil Works\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"400\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-tree\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Landscape Works<\/h3>\n <p class=\"service-desc\">\n Design and execution of landscaping and aesthetics for various sites\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Landscape works<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Green areas design<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Irrigation systems<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('landscape')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558904541-efa843a96f01?w=600&h=400&fit=crop\" alt=\"Landscape Works\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"500\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-road\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Road Protection & FOC Laying<\/h3>\n <p class=\"service-desc\">\n Road protection works and fiber optic cable laying and fixing\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Road protection works<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> FOC laying and fixing<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Cable trenching and backfilling<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('road')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/masdarenergy.net\/main\/wp-content\/uploads\/2026\/03\/Untitled-design.jpg\" alt=\"Road Protection and FOC Laying\">\n <\/div>\n <\/div>\n \n \n <div class=\"service-card\" data-aos=\"fade-up\" data-aos-delay=\"600\" data-aos-duration=\"800\">\n <div class=\"service-icon\">\n <i class=\"fas fa-bolt\"><\/i>\n <\/div>\n <h3 class=\"service-title\">Power & Electricity Projects<\/h3>\n <p class=\"service-desc\">\n Execution of electrical networks and substations with highest specifications\n <\/p>\n <ul class=\"service-features\">\n <li><i class=\"fas fa-check-circle\"><\/i> Electrical networks construction<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Substations and transformers<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Cable laying and testing<\/li>\n <\/ul>\n <button class=\"service-btn\" onclick=\"showServiceDetails('power')\">\n Service Details <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <div class=\"service-image cinematic-effect\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092160607-ee22621dd758?w=600&h=400&fit=crop\" alt=\"Power and Electricity Projects\">\n <\/div>\n <\/div>\n \n <\/div>\n \n \n <div style=\"text-align: center; margin-top: 60px;\" data-aos=\"zoom-in\" data-aos-duration=\"1000\">\n <button class=\"service-btn\" onclick=\"contactUs()\" style=\"background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 15px 45px; font-size: 1.1rem; box-shadow: 0 10px 25px rgba(10,43,94,0.3);\">\n <i class=\"fas fa-headset\"><\/i> Request a Service Now\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n \n <\/div>\n<\/section>\n\n\n<script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n\n<script>\n \/\/ Initialize AOS for animations\n AOS.init({\n duration: 1000,\n once: false,\n mirror: true,\n offset: 100,\n easing: 'ease-out-cubic'\n });\n \n \/\/ Custom scroll reveal effect\n const revealElements = document.querySelectorAll('.scroll-reveal');\n \n const revealOnScroll = () => {\n revealElements.forEach(element => {\n const elementTop = element.getBoundingClientRect().top;\n const windowHeight = window.innerHeight;\n \n if (elementTop < windowHeight - 100) {\n element.classList.add('revealed');\n }\n });\n };\n \n window.addEventListener('scroll', revealOnScroll);\n revealOnScroll();\n \n \/\/ Function to show service details with animation\n function showServiceDetails(serviceType) {\n const messages = {\n 'water': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Water & Wastewater Networks<\/strong><br><br>\u2705 Construction of water and wastewater network<br>\u2705 Construction of all types of water tanks<br>\u2705 Related facilities and connections<br>\u2705 Connection works for facilities<br>\u2705 Use of high quality HDPE materials',\n 'om': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Operation & Maintenance (O&M)<\/strong><br><br>\u2705 O&M for potable water systems<br>\u2705 Irrigation systems maintenance<br>\u2705 Sewer systems operation<br>\u2705 Station and pump operation & maintenance<br>\u2705 Regular maintenance according to schedules',\n 'civil': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Civil Works<\/strong><br><br>\u2705 Residential buildings construction<br>\u2705 Public services buildings<br>\u2705 Civil maintenance works<br>\u2705 Service buildings construction<br>\u2705 Renovation and rehabilitation works',\n 'landscape': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Landscape Works<\/strong><br><br>\u2705 Landscape works<br>\u2705 Green areas design<br>\u2705 Irrigation systems<br>\u2705 Design and execution of green spaces<br>\u2705 Automatic irrigation networks',\n 'road': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Road Protection & FOC Laying<\/strong><br><br>\u2705 Road protection works<br>\u2705 FOC laying and fixing<br>\u2705 Cable trenching and backfilling<br>\u2705 Utility lines protection<br>\u2705 Excavation and backfilling works',\n 'power': '\ud83d\udccb <strong style=\"color: #0a2b5e;\">Power & Electricity Projects<\/strong><br><br>\u2705 Electrical networks construction<br>\u2705 Substations and transformers<br>\u2705 Cable laying and testing<br>\u2705 Medium and low voltage networks execution<br>\u2705 Electrical maintenance works'\n };\n \n const message = messages[serviceType] || 'Please contact us for more details about our services';\n \n \/\/ Create custom modal popup with animation\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(10,43,94,0.9);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.3s ease;\n cursor: pointer;\n `;\n \n const modalContent = document.createElement('div');\n modalContent.style.cssText = `\n background: linear-gradient(135deg, #fff, #fef9f0);\n border-radius: 30px;\n padding: 40px;\n max-width: 500px;\n width: 90%;\n text-align: center;\n animation: slideUp 0.4s ease;\n box-shadow: 0 30px 60px rgba(0,0,0,0.3);\n border-top: 5px solid var(--secondary);\n border-bottom: 5px solid var(--primary);\n cursor: default;\n `;\n \n modalContent.innerHTML = `\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;\">\n <i class=\"fas fa-info-circle\" style=\"font-size: 2.5rem; color: white;\"><\/i>\n <\/div>\n <div style=\"font-size: 1.1rem; line-height: 1.8; text-align: left; color: var(--text-dark);\">${message}<\/div>\n <button onclick=\"this.closest('div').parentElement.remove()\" style=\"margin-top: 30px; padding: 12px 30px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer; transition: 0.3s;\">\n <i class=\"fas fa-times\"><\/i> Close\n <\/button>\n `;\n \n modal.appendChild(modalContent);\n document.body.appendChild(modal);\n \n modal.addEventListener('click', (e) => {\n if (e.target === modal) modal.remove();\n });\n }\n \n \/\/ Contact us function\n function contactUs() {\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(10,43,94,0.9);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.3s ease;\n `;\n \n const modalContent = document.createElement('div');\n modalContent.style.cssText = `\n background: linear-gradient(135deg, #fff, #fef9f0);\n border-radius: 30px;\n padding: 40px;\n max-width: 450px;\n width: 90%;\n text-align: center;\n animation: slideUp 0.4s ease;\n border-top: 5px solid var(--secondary);\n border-bottom: 5px solid var(--primary);\n `;\n \n modalContent.innerHTML = `\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;\">\n <i class=\"fas fa-phone-alt\" style=\"font-size: 2rem; color: white;\"><\/i>\n <\/div>\n <h3 style=\"color: var(--primary); margin-bottom: 20px; font-size: 1.5rem;\">Contact Our Sales Team<\/h3>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-phone\" style=\"color: var(--secondary);\"><\/i> <strong>+968 99422943<\/strong><\/p>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-phone-alt\" style=\"color: var(--secondary);\"><\/i> <strong>+968 99321968<\/strong><\/p>\n <p style=\"margin: 15px 0; font-size: 1.1rem;\"><i class=\"fas fa-envelope\" style=\"color: var(--secondary);\"><\/i> <strong>Management@masdarenergy-om.com<\/strong><\/p>\n <p style=\"margin: 20px 0 0; color: var(--text-light);\">Please contact us for a detailed quote<\/p>\n <button onclick=\"this.closest('div').parentElement.remove()\" style=\"margin-top: 30px; padding: 12px 30px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer;\">\n Close\n <\/button>\n `;\n \n modal.appendChild(modalContent);\n document.body.appendChild(modal);\n \n modal.addEventListener('click', (e) => {\n if (e.target === modal) modal.remove();\n });\n }\n \n \/\/ Add additional animation styles\n const style = document.createElement('style');\n style.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n \/* Additional hover effects *\/\n .service-card {\n animation: cardFloat 0.6s ease backwards;\n }\n `;\n document.head.appendChild(style);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MASDAR ENERGY – Our Services Section MASDAR ENERGY WHAT WE DO Our Professional Services We provide integrated solutions in water and electricity infrastructure with the highest quality and safety standards Water & Wastewater Networks Execution of water and wastewater networks with latest technologies and international standards Construction of water and wastewater network Construction of all […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3312","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/comments?post=3312"}],"version-history":[{"count":8,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312\/revisions"}],"predecessor-version":[{"id":3424,"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/pages\/3312\/revisions\/3424"}],"wp:attachment":[{"href":"https:\/\/masdarenergy.net\/main\/wp-json\/wp\/v2\/media?parent=3312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}