{"id":101,"date":"2022-08-31T09:32:46","date_gmt":"2022-08-31T09:32:46","guid":{"rendered":"https:\/\/de.hedj.co\/index.php\/home\/"},"modified":"2025-04-13T09:08:12","modified_gmt":"2025-04-13T09:08:12","slug":"home","status":"publish","type":"page","link":"https:\/\/de.hedj.co\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n All Titles in a Loop - Neon Hieroglyphs<\/title>\n <!-- Load a font supporting Egyptian Hieroglyphs -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\" rel=\"stylesheet\" \/>\n <style>\n \/* Base Styles *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n }\n \/* 16:9 Container on desktop\/tablet; full-height on mobile *\/\n .container {\n width: 100%;\n aspect-ratio: 16\/9; \/* Maintains 16:9 ratio on larger screens *\/\n position: relative;\n overflow: hidden;\n background: #000;\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-auto-rows: minmax(80px, auto);\n justify-items: center;\n align-items: center;\n }\n \/* Mobile adjustments: full viewport height & smaller grid columns *\/\n @media (max-width: 600px) {\n .container {\n height: 100vh;\n aspect-ratio: unset;\n grid-template-columns: repeat(5, 1fr);\n }\n }\n \/* Tablet: 8 grid columns *\/\n @media (min-width: 601px) and (max-width: 1024px) {\n .container {\n grid-template-columns: repeat(8, 1fr);\n }\n }\n \/* Background Neon Symbols *\/\n .symbol {\n font-size: 3rem;\n color: #fc2662;\n text-shadow:\n 0 0 5px #fc2662,\n 0 0 10px #fc2662,\n 0 0 20px #fc2662,\n 0 0 30px #fc2662;\n opacity: 0;\n animation: fadeIn 1s ease forwards;\n position: relative;\n z-index: 1;\n transition: color 0.3s, text-shadow 0.3s;\n }\n .symbol:hover {\n color: #FFFFFF;\n text-shadow:\n 0 0 5px #FFFFFF,\n 0 0 10px #FFFFFF,\n 0 0 20px #FFFFFF,\n 0 0 30px #FFFFFF;\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \/* Overlay for the Dynamic Title *\/\n .overlay {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n z-index: 10;\n width: 100%;\n pointer-events: none;\n \/* Dimmed black background with padding *\/\n background: rgba(0, 0, 0, 0.5);\n padding: 10px;\n \/* Position slightly up on desktop; center on mobile\/tablet *\/\n top: 40%;\n transform: translate(-50%, -50%);\n }\n @media (min-width: 1025px) {\n .overlay {\n top: 40%;\n }\n }\n \/* Title Styling *\/\n .title {\n color: #FFF;\n text-shadow:\n 0 0 10px #FFF,\n 0 0 20px #FFF,\n 0 0 30px #FFF,\n 0 0 40px #FFF;\n line-height: 1.2;\n font-size: 90px; \/* Desktop default *\/\n opacity: 0; \/* Start hidden *\/\n }\n \/* Tablet: 50px *\/\n @media (min-width: 601px) and (max-width: 1024px) {\n .title {\n font-size: 50px;\n }\n }\n \/* Mobile: 35px *\/\n @media (max-width: 600px) {\n .title {\n font-size: 35px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- Container with background symbols & overlayed dynamic title -->\n <div class=\"container\">\n <div class=\"overlay\">\n <div id=\"dynamic-title\" class=\"title\"><\/div>\n <\/div>\n <\/div>\n\n <!-- Dummy filler to enable scrolling -->\n <!--<div style=\"height: 200vh;\"><\/div>-->\n\n <script>\n \/* --- Background Neon Symbols --- *\/\n const hieroglyphs = [];\n for (let codePoint = 0x13000; codePoint <= 0x131FF; codePoint++) {\n hieroglyphs.push(String.fromCodePoint(codePoint));\n }\n const container = document.querySelector('.container');\n const NUMBER_OF_SYMBOLS = 100;\n for (let i = 0; i < NUMBER_OF_SYMBOLS; i++) {\n const randomIndex = Math.floor(Math.random() * hieroglyphs.length);\n const glyphChar = hieroglyphs[randomIndex];\n const span = document.createElement('span');\n span.className = 'symbol';\n span.textContent = glyphChar;\n span.style.animationDelay = (Math.random() * 2).toFixed(2) + 's';\n span.dataset.dx = (Math.random() * 2 - 1);\n span.dataset.dy = (Math.random() * 2 - 1);\n container.appendChild(span);\n }\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n const factorSymbols = 0.1;\n document.querySelectorAll('.symbol').forEach(symbol => {\n const dx = parseFloat(symbol.dataset.dx);\n const dy = parseFloat(symbol.dataset.dy);\n const offsetX = dx * scrollY * factorSymbols;\n const offsetY = dy * scrollY * factorSymbols;\n symbol.style.transform = `translate(${offsetX}px, ${offsetY}px)`;\n });\n \/\/ Fade out the overlay (and title) gradually when scrolling down\n const fadeThreshold = 300; \/\/ Adjust threshold as needed\n const newOpacity = Math.max(1 - scrollY \/ fadeThreshold, 0);\n document.querySelector('.overlay').style.opacity = newOpacity;\n });\n\n \/* --- Dynamic Title with Cinematic Fade In\/Out --- *\/\n const titles = [\n \"WELCOME TO HEDJ\",\n \"SOFTWARE DEVELOPMENT\",\n \"AI AGENTS\",\n \"BLOCKCHAIN DEVELOPMENT\",\n \"ARTIFICIAL INTELLIGENCE DEVELOPMENT\",\n \"SAAS SYSTEMS DEVELOPMENT\",\n \"CRM \/ ERP SYSTEMS\"\n ];\n let currentTitleIndex = 0;\n const fadeInDuration = 1000; \/\/ 1 second fade in\n const fadeOutDuration = 1000; \/\/ 1 second fade out\n const pauseAfterVisible = 2500; \/\/ Pause time when fully visible\n\n const titleElement = document.getElementById(\"dynamic-title\");\n\n function showTitle(text, callback) {\n \/\/ Set the new title text and prepare for fade in\n titleElement.innerHTML = text;\n titleElement.style.transition = `opacity ${fadeInDuration}ms ease-in-out`;\n titleElement.style.opacity = 0;\n \/\/ Trigger fade in\n setTimeout(() => {\n titleElement.style.opacity = 1;\n \/\/ Pause while fully visible, then fade out\n setTimeout(() => {\n titleElement.style.transition = `opacity ${fadeOutDuration}ms ease-in-out`;\n titleElement.style.opacity = 0;\n \/\/ After fade out, call the callback to proceed to the next title\n setTimeout(callback, fadeOutDuration);\n }, pauseAfterVisible);\n }, 50);\n }\n\n function loopTitles() {\n showTitle(titles[currentTitleIndex], () => {\n currentTitleIndex = (currentTitleIndex + 1) % titles.length;\n loopTitles();\n });\n }\n\n \/\/ Start looping titles after a short delay\n setTimeout(loopTitles, 500);\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-5c644d1 e-flex e-con-boxed e-con e-parent\" data-id=\"5c644d1\" data-element_type=\"container\" data-e-type=\"container\" id=\"our_services\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e060f2b elementor-widget elementor-widget-html\" data-id=\"e060f2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>HEDJ Services - Targeted Directions<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for a paronic flair -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\" rel=\"stylesheet\" \/>\n <style>\n \/* Base Reset \/ Page Background *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000; \/* Black background *\/\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n }\n\n \/* Section Container *\/\n .hedj-services-section {\n position: relative;\n width: 100%;\n min-height: 100vh; \/* Full viewport height for demonstration *\/\n padding: 60px 20px;\n box-sizing: border-box;\n background: #000;\n }\n\n \/* Section Title *\/\n .hedj-services-title {\n text-align: center;\n color: #fff; \n font-size: 3.5rem; \/* Bigger font size *\/\n font-weight: bold; \/* Bold text *\/\n margin: 80px 0; \/* Extra top & bottom padding *\/\n text-shadow:\n 0 0 5px #fff,\n 0 0 10px #fff,\n 0 0 20px #fff,\n 0 0 30px #fff;\n opacity: 0; \/* Start hidden for fade-in animation *\/\n animation: fadeTitle 2s ease forwards; \/* Fade animation *\/\n }\n\n \/* Title fade-in keyframes *\/\n @keyframes fadeTitle {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Cards Grid Layout (4 columns) *\/\n .hedj-cards-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr); \/* 4 columns on desktop *\/\n gap: 30px;\n }\n \/* Responsive fallback for smaller screens *\/\n @media (max-width: 1024px) {\n \/* 2 columns on tablets *\/\n .hedj-cards-container {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n @media (max-width: 600px) {\n \/* 1 column on phones *\/\n .hedj-cards-container {\n grid-template-columns: repeat(1, 1fr);\n }\n }\n\n \/* Individual Card *\/\n .hedj-card {\n position: relative;\n background: #111; \/* Slightly lighter black inside the card *\/\n border-radius: 10px;\n color: #fc2662;\n padding: 20px;\n min-height: 150px;\n box-sizing: border-box;\n overflow: hidden;\n \/* Default invisible + transform offset; will vary by direction class *\/\n opacity: 0;\n transition: transform 3.8s ease, opacity 3.8s ease;\n }\n\n \/* Card Header Titles in White *\/\n .hedj-card h3 {\n color: #fff;\n margin-top: 0;\n }\n\n \/* Neon Animated Border with #fc2662 *\/\n .hedj-card::before {\n content: \"\";\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n border-radius: 10px;\n background: linear-gradient(\n 90deg,\n #fc2662,\n #000,\n #fc2662\n );\n background-size: 200% 200%;\n animation: borderFlow 3s linear infinite;\n z-index: -1;\n filter: drop-shadow(0 0 10px #fc2662);\n box-sizing: border-box;\n padding: 2px; \/* thickness of border *\/\n }\n \/* Inset to reveal corners *\/\n .hedj-card::after {\n content: \"\";\n position: absolute;\n top: 4px; left: 4px; right: 4px; bottom: 4px;\n border-radius: 6px;\n background: #111;\n z-index: -1;\n }\n\n \/* Animate border's gradient flow *\/\n @keyframes borderFlow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n \/* Direction Classes *\/\n .fade-from-left {\n transform: translateX(-60px);\n }\n .fade-from-right {\n transform: translateX(60px);\n }\n .fade-from-top {\n transform: translateY(-60px);\n }\n .fade-from-bottom {\n transform: translateY(60px);\n }\n\n \/* When card \"appears\", set transform\/opacity to fully visible *\/\n .appear {\n opacity: 1;\n transform: translate(0, 0);\n }\n <\/style>\n<\/head>\n<body>\n <!-- Scrollable container with cards -->\n <section class=\"hedj-services-section\">\n <h2 class=\"hedj-services-title\">OUR SERVICES<\/h2>\n <div class=\"hedj-cards-container\">\n <!-- 8 cards total; directions assigned below in JS:\n 1st & 5th -> left\n 2nd & 3rd -> top\n 4th & 8th -> right\n 6th & 7th -> bottom\n -->\n <div class=\"hedj-card\">\n <h3>Software Development<\/h3>\n <p>Custom solutions for web, desktop, and more. Build from scratch or refine existing apps.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>WordPress Websites<\/h3>\n <p>Installation, customization, and advanced plugin development to power your online presence.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>Custom WP Plugins<\/h3>\n <p>Tailor-made WordPress plugins to extend functionality & meet unique business needs.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>Mobile Applications<\/h3>\n <p>Robust iOS & Android apps with seamless user experiences and modern designs.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>CRM & ERP Systems<\/h3>\n <p>Streamline operations with integrated solutions that help manage data and automate tasks.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>Blockchain & Crypto<\/h3>\n <p>Create, manage, and launch crypto coins. Secure blockchain solutions for next-gen finance.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>Artificial Intelligence<\/h3>\n <p>AI-driven strategies & solutions: from predictive analytics to advanced ML models.<\/p>\n <\/div>\n <div class=\"hedj-card\">\n <h3>Custom Systems Development<\/h3>\n <p>We build custom integrated solutions to meet specific business requirements at scale.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/* \n 1) Assign specific direction classes to each card as requested:\n 1st & 5th -> fade-from-left\n 2nd & 3rd -> fade-from-top\n 4th & 8th -> fade-from-right\n 6th & 7th -> fade-from-bottom\n 2) Use Intersection Observer to fade them in\/out when scrolling.\n *\/\n const cards = document.querySelectorAll('.hedj-card');\n\n \/\/ Indices: 0,1,2,3,4,5,6,7\n cards[0].classList.add('fade-from-left'); \/\/ 1st\n cards[1].classList.add('fade-from-top'); \/\/ 2nd\n cards[2].classList.add('fade-from-top'); \/\/ 3rd\n cards[3].classList.add('fade-from-right'); \/\/ 4th\n cards[4].classList.add('fade-from-left'); \/\/ 5th\n cards[5].classList.add('fade-from-bottom'); \/\/ 6th\n cards[6].classList.add('fade-from-bottom'); \/\/ 7th\n cards[7].classList.add('fade-from-right'); \/\/ 8th\n\n const options = {\n root: null, \/\/ use browser viewport\n threshold: 0.1 \/\/ trigger when 10% of card is visible\n };\n\n function handleIntersect(entries) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n \/\/ fade\/slide in\n entry.target.classList.add('appear');\n } else {\n \/\/ fade\/slide out\n entry.target.classList.remove('appear');\n }\n });\n }\n\n const observer = new IntersectionObserver(handleIntersect, options);\n cards.forEach(card => observer.observe(card));\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-03d23ee e-flex e-con-boxed e-con e-parent\" data-id=\"03d23ee\" data-element_type=\"container\" data-e-type=\"container\" id=\"why_choosing_us\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01e4774 elementor-widget elementor-widget-html\" data-id=\"01e4774\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Why Choose Us - HEDJ (Responsive with Hover Popups)<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for a pharaonic flair -->\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Basic Reset & Background *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n }\n\n \/* Fade-in Animation *\/\n .fade-section {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 1s ease-out, transform 1s ease-out;\n }\n .fade-section.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Section Container *\/\n .why-choose-us {\n position: relative;\n width: 100%;\n min-height: 100vh;\n padding: 60px 20px;\n box-sizing: border-box;\n background: #000;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n \/* Circle Area: Responsive sizing *\/\n .circle-area {\n position: relative;\n width: 80vw;\n height: 80vw;\n max-width: 600px;\n max-height: 600px;\n margin: 0 auto;\n }\n\n \/* Center Circle *\/\n .center-circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 250px;\n height: 250px;\n border-radius: 50%;\n background: #000;\n border: 3px solid #fc2662;\n box-shadow:\n 0 0 10px #fc2662,\n 0 0 20px #fc2662,\n 0 0 30px #fc2662 inset;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n }\n .center-title {\n color: #fff;\n font-size: 1.3rem;\n font-weight: bold;\n text-align: center;\n text-shadow:\n 0 0 5px #fff,\n 0 0 10px #fff,\n 0 0 20px #fff,\n 0 0 30px #fff;\n padding: 0 10px;\n }\n\n \/* Orbit Container for reason circles *\/\n .orbit-container {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n transform: translate(-50%, -50%);\n animation: orbitRotate 120s linear infinite;\n z-index: 0;\n }\n @keyframes orbitRotate {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n \/* Reason Circles *\/\n .reason-circle {\n position: absolute;\n width: 130px;\n height: 130px;\n border-radius: 50%;\n background: #111;\n border: 3px solid #fc2662;\n box-shadow: 0 0 5px #fc2662, 0 0 10px #fc2662 inset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .reason-content {\n color: #fff;\n text-align: center;\n padding: 5px;\n \/* Reverse orbit effect so text stays upright *\/\n animation: reverseOrbit 120s linear infinite;\n }\n @keyframes reverseOrbit {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-360deg); }\n }\n .reason-circle h4 {\n margin: 0;\n font-size: 1rem;\n text-shadow: 0 0 5px #fff, 0 0 10px #fff;\n }\n\n \/* Hover Popup with Animated Neon Border *\/\n .hover-popup {\n position: absolute;\n bottom: 120%;\n left: 50%;\n transform: translateX(-50%);\n background: #111;\n color: #fff;\n padding: 10px;\n width: 250px;\n text-align: center;\n border: 3px solid #fc2662;\n border-radius: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 10;\n animation: neon-border 3s linear infinite;\n }\n @keyframes neon-border {\n 0% {\n border-color: #fc2662;\n box-shadow: 0 0 5px #fc2662;\n }\n 50% {\n border-color: #39ff14;\n box-shadow: 0 0 20px #39ff14;\n }\n 100% {\n border-color: #fc2662;\n box-shadow: 0 0 5px #fc2662;\n }\n }\n .reason-circle:hover .hover-popup {\n opacity: 1;\n }\n\n \/* Positioning of the 7 circles evenly around the center *\/\n \/* Desktop Positions (using translate value 300px) *\/\n .circle-1 { transform: rotate(-90deg) translate(370px) rotate(90deg); }\n .circle-2 { transform: rotate(-39deg) translate(300px) rotate(39deg); }\n .circle-3 { transform: rotate(13deg) translate(300px) rotate(-13deg); }\n .circle-4 { transform: rotate(64deg) translate(300px) rotate(-64deg); }\n .circle-5 { transform: rotate(116deg) translate(300px) rotate(-116deg); }\n .circle-6 { transform: rotate(167deg) translate(360px) rotate(-167deg); }\n .circle-7 { transform: rotate(219deg) translate(410px) rotate(-219deg); }\n\n \/* MEDIA QUERIES *\/\n @media (max-width: 768px) {\n .center-circle { width: 200px; height: 200px; }\n .center-title { font-size: 1rem; }\n .reason-circle { width: 100px; height: 100px; }\n .reason-circle h4 { font-size: 0.85rem; }\n \/* Adjust orbit distances for tablet view *\/\n .circle-1 { transform: rotate(-90deg) translate(200px) rotate(90deg); }\n .circle-2 { transform: rotate(-39deg) translate(200px) rotate(39deg); }\n .circle-3 { transform: rotate(13deg) translate(200px) rotate(-13deg); }\n .circle-4 { transform: rotate(64deg) translate(200px) rotate(-64deg); }\n .circle-5 { transform: rotate(116deg) translate(200px) rotate(-116deg); }\n .circle-6 { transform: rotate(167deg) translate(200px) rotate(-167deg); }\n .circle-7 { transform: rotate(219deg) translate(200px) rotate(-219deg); }\n .hover-popup { width: 200px; }\n }\n @media (max-width: 500px) {\n .center-circle { width: 160px; height: 160px; }\n .center-title { font-size: 0.9rem; }\n .reason-circle { width: 80px; height: 80px; }\n .reason-circle h4 { font-size: 0.7rem; }\n \/* Further reduce orbit distances for small screens *\/\n .circle-1 { transform: rotate(-90deg) translate(200px) rotate(90deg); }\n .circle-2 { transform: rotate(-39deg) translate(160px) rotate(39deg); }\n .circle-3 { transform: rotate(13deg) translate(130px) rotate(-13deg); }\n .circle-4 { transform: rotate(64deg) translate(130px) rotate(-64deg); }\n .circle-5 { transform: rotate(116deg) translate(150px) rotate(-116deg); }\n .circle-6 { transform: rotate(167deg) translate(190px) rotate(-167deg); }\n .circle-7 { transform: rotate(219deg) translate(220px) rotate(-219deg); }\n .hover-popup { width: 180px; }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"why-choose-us fade-section\">\n <div class=\"circle-area\">\n <!-- Main center circle with title -->\n <div class=\"center-circle\">\n <div class=\"center-title\">WHY DO YOU CHOOSE US?<\/div>\n <\/div>\n\n <!-- Orbit container for reason circles -->\n <div class=\"orbit-container\">\n <!-- Reason Circle 1: Speed & Security -->\n <div class=\"reason-circle circle-1\" data-reason=\"Speed & Security\">\n <div class=\"reason-content\">\n <h4>SPEED & SECURITY<\/h4>\n <div class=\"hover-popup\">\n We provide lightning-fast performance paired with state-of-the-art security measures. Our robust infrastructure ensures your operations remain smooth and safeguarded at all times.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 2: Global & Local -->\n <div class=\"reason-circle circle-2\" data-reason=\"Global & Local\">\n <div class=\"reason-content\">\n <h4>GLOBAL & LOCAL<\/h4>\n <div class=\"hover-popup\">\n Our services bridge the gap between global reach and local expertise. We tailor our approach to meet the unique demands of each market, ensuring personalized and effective solutions.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 3: Cutting-edge Tech -->\n <div class=\"reason-circle circle-3\" data-reason=\"Cutting-edge Tech\">\n <div class=\"reason-content\">\n <h4>CUTTING-EDGE TECH<\/h4>\n <div class=\"hover-popup\">\n Stay ahead with our integration of the latest technological innovations. We continually adopt emerging tools that enhance efficiency and propel your business forward.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 4: Ancient Luxury -->\n <div class=\"reason-circle circle-4\" data-reason=\"Ancient Luxury\">\n <div class=\"reason-content\">\n <h4>ANCIENT LUXURY<\/h4>\n <div class=\"hover-popup\">\n Inspired by the elegance of ancient civilizations, our designs exude timeless luxury. We merge historical motifs with modern aesthetics to create uniquely opulent experiences.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 5: Custom Solutions -->\n <div class=\"reason-circle circle-5\" data-reason=\"Custom Solutions\">\n <div class=\"reason-content\">\n <h4>CUSTOM SOLUTIONS<\/h4>\n <div class=\"hover-popup\">\n Every solution we offer is tailor-made to suit your specific needs. We prioritize personalization, ensuring that your experience is as unique as your business.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 6: Innovation & Creativity (New) -->\n <div class=\"reason-circle circle-6\" data-reason=\"Innovation & Creativity\">\n <div class=\"reason-content\">\n <h4>INNOVATION & CREATIVITY<\/h4>\n <div class=\"hover-popup\">\n Our approach is rooted in creativity and a relentless pursuit of innovation. We transform challenges into opportunities, crafting unique solutions that fuel growth and success.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Reason Circle 7: Expert Support (New) -->\n <div class=\"reason-circle circle-7\" data-reason=\"Expert Support\">\n <div class=\"reason-content\">\n <h4>EXPERT SUPPORT<\/h4>\n <div class=\"hover-popup\">\n Our dedicated support team is available 24\/7 to ensure your success. With extensive expertise and prompt assistance, we guarantee seamless and reliable service every step of the way.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ Fade-in on scroll using IntersectionObserver\n document.addEventListener('DOMContentLoaded', function () {\n const fadeSection = document.querySelector('.fade-section');\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n });\n observer.observe(fadeSection);\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-8f52473 e-flex e-con-boxed e-con e-parent\" data-id=\"8f52473\" data-element_type=\"container\" data-e-type=\"container\" id=\"process\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c84105c elementor-widget elementor-widget-html\" data-id=\"c84105c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Software Development Process<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for a pharaonic flair (optional) -->\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Basic Reset & Background *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n color: #fff;\n }\n\n \/*********************************\n * SOFTWARE DEVELOPMENT PROCESS SECTION\n *********************************\/\n .software-steps {\n width: 100%;\n padding: 60px 20px;\n box-sizing: border-box;\n background: #000;\n }\n\n .steps-title {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 50px;\n color: #fc2662;\n text-shadow: 0 0 10px #fc2662, 0 0 20px #fc2662;\n }\n\n .steps-container {\n max-width: 800px;\n margin: 0 auto;\n position: relative;\n }\n\n \/* Each step is wrapped in a container with a vertical timeline style *\/\n .step-wrapper {\n margin: 40px 0;\n position: relative;\n padding-left: 60px;\n }\n\n \/* Vertical line for the timeline *\/\n .step-wrapper::before {\n content: '';\n position: absolute;\n left: 30px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #fc2662;\n }\n\n \/* Step number circle *\/\n .step-number {\n position: absolute;\n left: 18px;\n top: 0;\n width: 25px;\n height: 25px;\n background: #fc2662;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #000;\n font-weight: bold;\n box-shadow: 0 0 10px #fc2662, 0 0 20px #fc2662;\n }\n\n \/* Step heading *\/\n .step-heading {\n margin: 0 0 10px;\n font-size: 1.4rem;\n color: #fc2662;\n text-shadow: 0 0 5px #fc2662;\n }\n\n \/* Step paragraph *\/\n .step-description {\n font-size: 1rem;\n line-height: 1.6;\n color: #fff;\n margin: 0;\n }\n\n \/*********************************\n * FADE-IN ANIMATION (directional)\n *********************************\/\n .step-wrapper {\n \/* start hidden *\/\n opacity: 0;\n transition: transform 4s ease-out, opacity 4s ease-out;\n }\n \/* Odd steps (1,3,5...) slide in from the left *\/\n .step-wrapper:nth-of-type(odd) {\n transform: translateX(-50px);\n }\n \/* Even steps (2,4,6...) slide in from the right *\/\n .step-wrapper:nth-of-type(even) {\n transform: translateX(50px);\n }\n \/* Visible class applied via IntersectionObserver *\/\n .step-wrapper.visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n \/*********************************\n * MEDIA QUERIES\n *********************************\/\n @media (max-width: 768px) {\n .steps-title {\n font-size: 1.5rem;\n }\n .step-heading {\n font-size: 1.2rem;\n }\n .step-wrapper {\n margin: 30px 0;\n padding-left: 50px;\n }\n .step-wrapper::before {\n left: 25px;\n }\n .step-number {\n left: 13px;\n width: 20px;\n height: 20px;\n font-size: 0.9rem;\n }\n }\n\n @media (max-width: 500px) {\n .steps-title {\n font-size: 1.3rem;\n }\n .step-heading {\n font-size: 1rem;\n }\n .step-wrapper {\n margin: 25px 0;\n padding-left: 45px;\n }\n .step-wrapper::before {\n left: 22px;\n }\n .step-number {\n left: 10px;\n width: 18px;\n height: 18px;\n font-size: 0.8rem;\n }\n .step-description {\n font-size: 0.95rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- SOFTWARE DEVELOPMENT PROCESS SECTION -->\n <section class=\"software-steps\">\n <h2 class=\"steps-title\">Our Software Development Process<\/h2>\n <div class=\"steps-container\">\n <!-- Step 1 -->\n <div class=\"step-wrapper\">\n <div class=\"step-number\">1<\/div>\n <h3 class=\"step-heading\">Contact Us<\/h3>\n <p class=\"step-description\">\n Begin by emailing us at \n <strong>dev@de.hedj.co<\/strong> \n to start the conversation. Our team is ready to address your inquiries and guide you toward the next steps.\n <\/p>\n <\/div>\n\n <!-- Step 2 -->\n <div class=\"step-wrapper\">\n <div class=\"step-number\">2<\/div>\n <h3 class=\"step-heading\">Schedule a Meeting<\/h3>\n <p class=\"step-description\">\n We arrange a detailed discussion to understand your specific requirements and goals. This ensures we capture your vision accurately.\n <\/p>\n <\/div>\n\n <!-- Step 3 -->\n <div class=\"step-wrapper\">\n <div class=\"step-number\">3<\/div>\n <h3 class=\"step-heading\">Contract Signing<\/h3>\n <p class=\"step-description\">\n Next, we prepare clear and transparent contracts. This step outlines project scope, timelines, and deliverables to keep everyone aligned.\n <\/p>\n <\/div>\n\n <!-- Step 4 -->\n <div class=\"step-wrapper\">\n <div class=\"step-number\">4<\/div>\n <h3 class=\"step-heading\">Building the System<\/h3>\n <p class=\"step-description\">\n Our expert developers then get to work, leveraging cutting-edge technology to create a robust, secure, and high-performing solution.\n <\/p>\n <\/div>\n\n <!-- Step 5 -->\n <div class=\"step-wrapper\">\n <div class=\"step-number\">5<\/div>\n <h3 class=\"step-heading\">Enjoy Your System<\/h3>\n <p class=\"step-description\">\n Finally, we deliver a fully functional software system tailored to your needs. You can now enjoy a seamless solution designed to elevate your business.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ Directional fade-in on scroll using IntersectionObserver\n document.addEventListener('DOMContentLoaded', function () {\n const steps = document.querySelectorAll('.step-wrapper');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target); \/\/ Stop observing once visible\n }\n });\n }, { threshold: 0.1 });\n\n steps.forEach(step => {\n observer.observe(step);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-b9afc89 e-flex e-con-boxed e-con e-parent\" data-id=\"b9afc89\" data-element_type=\"container\" data-e-type=\"container\" id=\"our_Portfolio\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f172b3 elementor-widget elementor-widget-html\" data-id=\"1f172b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Our Portfolio \/ Case Studies \/ Projects<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for brand consistency -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\" rel=\"stylesheet\" \/>\n <style>\n \/* Basic Reset & Global Styles *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n color: #fff;\n }\n \/* Fade-In Base Classes *\/\n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 2s ease, transform 2s ease;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n \/* Portfolio Slider Section *\/\n .portfolio-section {\n width: 100%;\n padding: 60px 20px;\n box-sizing: border-box;\n background: #000;\n position: relative;\n }\n .portfolio-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n }\n .portfolio-title {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 40px;\n color: #fc2662;\n text-shadow: 0 0 10px #fc2662, 0 0 20px #fc2662;\n }\n \/* Carousel Container *\/\n .carousel {\n overflow: hidden;\n position: relative;\n cursor: grab;\n }\n .carousel-track {\n display: flex;\n \/* Continuous movement is handled by JavaScript (via requestAnimationFrame) *\/\n }\n \/* Project Card Styles (Border removed) *\/\n .project-card {\n flex: 0 0 25%; \/* 4 cards visible on desktop *\/\n box-sizing: border-box;\n padding: 10px;\n position: relative;\n background: #111;\n border-radius: 10px;\n color: #fc2662;\n min-height: 250px;\n overflow: hidden;\n margin: 0 10px;\n }\n \/* Content inside each card *\/\n .project-content {\n padding: 20px;\n }\n .project-content h3 {\n margin: 0 0 10px;\n font-size: 1.2rem;\n color: #fc2662;\n text-shadow: 0 0 5px #fc2662;\n }\n .project-content p {\n font-size: 0.95rem;\n line-height: 1.4;\n color: #ddd;\n margin-bottom: 15px;\n }\n \/* Visit Project Button (White Neon) *\/\n .project-content a {\n color: #fff;\n text-decoration: none;\n font-weight: bold;\n text-shadow: 0 0 10px #fff, 0 0 20px #fff;\n }\n .project-content a:hover {\n text-decoration: underline;\n }\n \/* Responsive Adjustments *\/\n @media (max-width: 1024px) {\n .project-card {\n flex: 0 0 33.33%; \/* 3 cards visible *\/\n }\n }\n @media (max-width: 768px) {\n .project-card {\n flex: 0 0 50%; \/* 2 cards visible *\/\n }\n }\n @media (max-width: 480px) {\n .project-card {\n flex: 0 0 50%; \/* 2 cards visible on mobile *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- Portfolio Slider Section -->\n <section class=\"portfolio-section fade-in\" id=\"portfolioSection\">\n <div class=\"portfolio-container\">\n <h2 class=\"portfolio-title\">Our Portfolio \/ Case Studies \/ Projects<\/h2>\n <div class=\"carousel\" id=\"carousel\">\n <div class=\"carousel-track\" id=\"carouselTrack\">\n <!-- Card 1: Maroufturk -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Maroufturk (Turkey)<\/h3>\n <p>A dynamic platform tailored for Turkish markets. Robust eCommerce system for high traffic and multilingual support.<\/p>\n <a href=\"https:\/\/maroufturk.com\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 2: Winsterland -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Winsterland (UK)<\/h3>\n <p>An innovative online marketplace with seamless booking and interactive features in the United Kingdom.<\/p>\n <a href=\"https:\/\/winsterland.uk\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 2.1: LIVERPOOL COLLAGE -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Liverpool Collage LPC (UK)<\/h3>\n <p>A professional website and e-learning system that supports 10s of premium features for LiverpoolCollage LPC in the United Kingdom.<\/p>\n <a href=\"https:\/\/liverpool-college.uk\/\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 2.2: Aquisition -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Acquisition (UK)<\/h3>\n <p>A Professional landing page of one of the biggest acquisition companies in the United Kingdom.<\/p>\n <a href=\"https:\/\/acquisition.winsterland.uk\/\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 3: iStay -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>iStay (UK)<\/h3>\n <p>A modern property rental and listing platform providing secure payment processing and robust management.<\/p>\n <a href=\"https:\/\/istay.winsterland.uk\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 4: iTravel -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>iTravel (UK)<\/h3>\n <p>A tourism and travel site offering holiday packages, booking tools, and location-based recommendations.<\/p>\n <a href=\"https:\/\/itravel.winsterland.uk\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 5: Diar United -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Diar United (Saudi Arabia)<\/h3>\n <p>A comprehensive solution for real estate investments with detailed listings and streamlined management.<\/p>\n <a href=\"https:\/\/diarunited.com\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 6: Autocart Bahrain -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>Autocart Bahrain (Bahrain)<\/h3>\n <p>An automotive marketplace focused on vehicle listings, user reviews, and real-time bidding features.<\/p>\n <a href=\"https:\/\/autocartbahrain.com\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <!-- Card 7: RayaStone -->\n <div class=\"project-card fade-in\">\n <div class=\"project-content\">\n <h3>RayaStone (Germany)<\/h3>\n <p>A sophisticated B2B platform for stone trading featuring advanced catalogs, secure transactions, and global shipping.<\/p>\n <a href=\"https:\/\/rayastone.com\/\" target=\"_blank\" rel=\"noopener\">Visit Project<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/****************************************************\n * Continuous Auto-Sliding & Draggable Carousel Script\n ****************************************************\/\n document.addEventListener('DOMContentLoaded', () => {\n const carousel = document.getElementById('carousel');\n const track = document.getElementById('carouselTrack');\n let isDragging = false;\n let startX = 0;\n let currentTranslate = 0;\n let prevTranslate = 0;\n const speed = 0.5; \/\/ pixels per frame for continuous movement\n\n \/\/ Duplicate slides for seamless looping\n track.innerHTML += track.innerHTML;\n \n \/\/ Calculate the width of the original set of slides\n const originalWidth = track.scrollWidth \/ 2;\n \n \/\/ Continuous animation using requestAnimationFrame\n function animate() {\n if (!isDragging) {\n currentTranslate -= speed;\n }\n \/\/ Loop back for infinite effect\n if (Math.abs(currentTranslate) >= originalWidth) {\n currentTranslate = 0;\n }\n track.style.transform = `translateX(${currentTranslate}px)`;\n requestAnimationFrame(animate);\n }\n animate(); \/\/ start animation\n\n \/\/ Dragging functionality for mouse & touch\n carousel.addEventListener('mousedown', pointerDown);\n carousel.addEventListener('touchstart', pointerDown);\n carousel.addEventListener('mouseup', pointerUp);\n carousel.addEventListener('mouseleave', pointerUp);\n carousel.addEventListener('touchend', pointerUp);\n carousel.addEventListener('mousemove', pointerMove);\n carousel.addEventListener('touchmove', pointerMove);\n\n function pointerDown(event) {\n isDragging = true;\n startX = getPositionX(event);\n prevTranslate = currentTranslate;\n carousel.style.cursor = 'grabbing';\n }\n function pointerMove(event) {\n if (!isDragging) return;\n const currentPosition = getPositionX(event);\n const diff = currentPosition - startX;\n currentTranslate = prevTranslate + diff;\n track.style.transform = `translateX(${currentTranslate}px)`;\n }\n function pointerUp() {\n if (!isDragging) return;\n isDragging = false;\n carousel.style.cursor = 'grab';\n }\n function getPositionX(event) {\n return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;\n }\n\n \/****************************************************\n * Fade-In on Scroll (for Section and Cards)\n ****************************************************\/\n const fadeElements = document.querySelectorAll('.fade-in');\n const fadeObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n fadeObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n fadeElements.forEach(el => fadeObserver.observe(el));\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-5b21043 e-flex e-con-boxed e-con e-parent\" data-id=\"5b21043\" data-element_type=\"container\" data-e-type=\"container\" id=\"faqs\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab1fdcb elementor-widget elementor-widget-html\" data-id=\"ab1fdcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>FAQ Section<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for brand consistency (optional) -->\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Basic Reset & Background *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n color: #fff;\n }\n\n \/*********************************\n * FAQ SECTION\n *********************************\/\n .faq-section {\n width: 100%;\n padding: 60px 20px;\n box-sizing: border-box;\n background: #000;\n }\n .faq-container {\n max-width: 800px;\n margin: 0 auto;\n }\n .faq-title {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 40px;\n color: #fc2662;\n text-shadow: 0 0 10px #fc2662, 0 0 20px #fc2662;\n }\n\n \/*********************************\n * FAQ ITEMS (Accordion style)\n *********************************\/\n .faq-item {\n margin-bottom: 15px;\n border: 1px solid #fc2662;\n border-radius: 5px;\n overflow: hidden;\n background: #111;\n box-shadow: 0 0 10px #fc2662, inset 0 0 10px #111;\n \/* Start hidden for fade-in on scroll *\/\n opacity: 0;\n transform: translateY(30px);\n transition: transform 3.8s ease, opacity 3.8s ease;\n }\n\n \/* When visible on scroll, reset position & opacity *\/\n .faq-item.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* FAQ Question Row *\/\n .faq-question {\n cursor: pointer;\n padding: 15px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #111;\n }\n .faq-question h3 {\n margin: 0;\n font-size: 1.1rem;\n color: #fc2662;\n text-shadow: 0 0 5px #fc2662;\n }\n\n \/* Toggle icon (plus\/minus) *\/\n .toggle-icon {\n font-size: 1.3rem;\n transition: transform 0.3s;\n color: #fc2662;\n }\n \/* Rotate icon when open *\/\n .faq-item.open .toggle-icon {\n transform: rotate(45deg);\n }\n\n \/* FAQ Answer (collapsible) *\/\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s ease;\n padding: 0 20px;\n line-height: 1.6;\n }\n .faq-item.open .faq-answer {\n padding: 15px 20px; \/* add padding once open for better layout *\/\n }\n\n \/*********************************\n * MEDIA QUERIES\n *********************************\/\n @media (max-width: 768px) {\n .faq-title {\n font-size: 1.6rem;\n }\n .faq-item {\n margin-bottom: 10px;\n }\n .faq-question h3 {\n font-size: 1rem;\n }\n .toggle-icon {\n font-size: 1.2rem;\n }\n }\n @media (max-width: 500px) {\n .faq-title {\n font-size: 1.3rem;\n }\n .faq-question h3 {\n font-size: 0.95rem;\n }\n .toggle-icon {\n font-size: 1.1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- FAQ SECTION -->\n <section class=\"faq-section\">\n <div class=\"faq-container\">\n <h2 class=\"faq-title\">Frequently Asked Questions<\/h2>\n\n <!-- FAQ ITEM 1 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>1. How long does it typically take to develop a custom software solution?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n The timeline varies depending on the scope and complexity of the project. \n Smaller applications may take a few weeks, while larger ones can extend to several months.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 2 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>2. What is your typical pricing structure for projects?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n We offer both fixed-price and time-and-materials models. \n We\u2019ll discuss your requirements and recommend the pricing approach that best fits your needs.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 3 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>3. Do you provide ongoing maintenance or post-launch support?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n Yes. After your project goes live, we can continue to provide updates, bug fixes, and new features as needed.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 4 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>4. Which programming languages or frameworks do you specialize in?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n Our team has experience in a wide range of technologies, including JavaScript (React, Node.js), Python, PHP (Laravel), and more. \n We choose the best stack for each project\u2019s unique requirements.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 5 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>5. How do you handle data security and privacy?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n We follow industry best practices such as encryption, secure coding, and regular testing to keep your data safe and secure.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 6 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>6. Can you integrate third-party services into my project?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n Absolutely. We frequently incorporate third-party APIs (payment gateways, social platforms, analytics, etc.) \n to extend your application\u2019s capabilities.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 7 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>7. What if my requirements change during the development process?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n We embrace flexibility. If your requirements evolve, we\u2019ll work with you to adjust the project scope \n and timeline accordingly, ensuring the final product meets your needs.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 8 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>8. How do you manage project updates and communication?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n We keep you informed through regular progress meetings, milestone deliverables, \n and open channels like email or Slack to provide timely updates and gather feedback.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 9 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>9. Do you offer any guarantees or warranties for your work?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n We stand behind the quality of our code. In most cases, we include a warranty period after launch \n for addressing unforeseen bugs or performance issues.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- FAQ ITEM 10 -->\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n <h3>10. How can I get started with your services?<\/h3>\n <span class=\"toggle-icon\">+<\/span>\n <\/div>\n <div class=\"faq-answer\">\n <p>\n Simply reach out to us at <strong>dev@de.hedj.co<\/strong>. \n We\u2019ll discuss your vision, scope your project, and outline next steps to get started.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- SCRIPT FOR ACCORDION & FADE-IN ON SCROLL -->\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const faqItems = document.querySelectorAll('.faq-item');\n const observerOptions = {\n threshold: 0.1\n };\n\n \/\/ IntersectionObserver for fade-in effect\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n faqItems.forEach((item) => {\n \/\/ Observe each FAQ item for fade-in\n observer.observe(item);\n\n \/\/ Toggle FAQ answer on click\n const question = item.querySelector('.faq-question');\n question.addEventListener('click', () => {\n item.classList.toggle('open');\n const answer = item.querySelector('.faq-answer');\n\n if (item.classList.contains('open')) {\n \/\/ Expand answer\n answer.style.maxHeight = answer.scrollHeight + 'px';\n } else {\n \/\/ Collapse answer\n answer.style.maxHeight = 0;\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-b91a0cb e-flex e-con-boxed e-con e-parent\" data-id=\"b91a0cb\" data-element_type=\"container\" data-e-type=\"container\" id=\"contact_us\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d308bd elementor-widget elementor-widget-html\" data-id=\"9d308bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Contact \/ Call to Action Section<\/title>\n <!-- Noto Sans Egyptian Hieroglyphs for brand consistency -->\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Basic Reset & Global Styles *\/\n html, body {\n margin: 0;\n padding: 0;\n background: #000; \/* Dark background *\/\n font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;\n overflow-x: hidden;\n color: #fff;\n }\n\n \/* Fade-In Base Class *\/\n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 2s ease, transform 2s ease;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/******************************************\n * CONTACT \/ CTA SECTION\n ******************************************\/\n .cta-section {\n position: relative;\n width: 100%;\n padding: 80px 20px;\n box-sizing: border-box;\n background: #000; \/* black background *\/\n text-align: center;\n }\n .cta-container {\n max-width: 1000px;\n margin: 0 auto;\n }\n .cta-title {\n font-size: 2.5rem;\n margin-bottom: 20px;\n color: #fc2662;\n text-shadow:\n 0 0 5px #fc2662,\n 0 0 10px #fc2662;\n }\n .cta-subtitle {\n font-size: 1rem;\n max-width: 650px;\n margin: 0 auto 40px;\n color: #ddd;\n line-height: 1.6;\n }\n\n \/* Neon Button *\/\n .cta-button {\n display: inline-block;\n padding: 15px 30px;\n margin-top: 10px;\n margin-right: 10px; \/* small spacing between the two buttons *\/\n font-size: 1rem;\n font-weight: bold;\n text-transform: uppercase;\n text-decoration: none;\n color: #fff;\n background: transparent;\n border: 2px solid #fc2662;\n border-radius: 5px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n box-shadow: 0 0 10px #fc2662, inset 0 0 10px #000;\n transition: background 0.3s ease;\n }\n .cta-button:hover {\n background: #fc2662;\n color: #000;\n text-shadow: none;\n }\n\n \/* Responsive Styles *\/\n @media (max-width: 768px) {\n .cta-title {\n font-size: 2rem;\n }\n .cta-subtitle {\n font-size: 0.9rem;\n }\n .cta-button {\n font-size: 0.95rem;\n padding: 12px 25px;\n }\n }\n @media (max-width: 480px) {\n .cta-title {\n font-size: 1.8rem;\n }\n .cta-subtitle {\n font-size: 0.85rem;\n }\n .cta-button {\n font-size: 0.9rem;\n padding: 10px 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <!-- CONTACT \/ CALL TO ACTION SECTION -->\n <section class=\"cta-section fade-in\" id=\"ctaSection\">\n <div class=\"cta-container\">\n <h2 class=\"cta-title\">Ready to Elevate Your Business?<\/h2>\n <p class=\"cta-subtitle\">\n Whether you're looking for a custom software solution, a stunning website, or expert consultation, we\u2019ve got you covered.\n Let us help transform your vision into reality.\n <\/p>\n <!-- Updated Buttons -->\n <a class=\"cta-button\" href=\"mailto:info@de.hedj.co\">\n Contact Us by Email\n <\/a>\n <a class=\"cta-button\" href=\"https:\/\/wa.me\/491745270901\">\n Contact Us on WhatsApp\n <\/a>\n <\/div>\n <\/section>\n\n <script>\n \/* \n FADE-IN ON SCROLL \n Using IntersectionObserver to reveal the CTA section smoothly\n *\/\n document.addEventListener('DOMContentLoaded', () => {\n const fadeElements = document.querySelectorAll('.fade-in');\n const fadeObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n\n fadeElements.forEach(el => {\n fadeObserver.observe(el);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>All Titles in a Loop – Neon Hieroglyphs HEDJ Services – Targeted Directions OUR SERVICES Software Development Custom solutions for web, desktop, and more. Build from scratch or refine existing apps. WordPress Websites Installation, customization, and advanced plugin development to power your online presence. Custom WP Plugins Tailor-made WordPress plugins to extend functionality & meet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/page-builder-content.php","meta":{"footnotes":""},"class_list":["post-101","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/pages\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":722,"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions"}],"predecessor-version":[{"id":903,"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions\/903"}],"wp:attachment":[{"href":"https:\/\/de.hedj.co\/index.php\/wp-json\/wp\/v2\/media?parent=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}