<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Dronify - Professional Drone Services in Malaysia</title>
    
    <!-- =============== META =============== -->
    <meta name="description" content="Professional drone services in Malaysia offering aerial photography, 3D mapping, site inspections, and progress monitoring. Certified operators delivering high-quality results.">
    <meta name="keywords" content="drone services, aerial photography, 3D mapping, site inspection, progress monitoring, Malaysia, photogrammetry, surveying, CAAM certified">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#3498db">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <meta name="author" content="Dronify Malaysia">
    <meta name="geo.region" content="MY">
    <meta name="geo.position" content="4.2105;101.9758">
    <meta name="ICBM" content="4.2105, 101.9758">
    
    <!-- =============== CACHE CONTROL =============== -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta property="og:title" content="Dronify - Professional Drone Services">
    <meta property="og:description" content="Professional drone services in Malaysia offering aerial photography, 3D mapping, site inspections, and progress monitoring.">
    <meta property="og:image" content="/img/common/dronify-logo.svg">
    <meta property="og:url" content="https://dronify.my">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Dronify">
    
    <!-- =============== TWITTER CARDS =============== -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Dronify - Professional Drone Services in Malaysia">
    <meta name="twitter:description" content="CAAM certified drone operators providing aerial photography, 3D mapping, and site inspection services across Malaysia.">
    <meta name="twitter:image" content="/img/common/dronify-logo.svg">
    
    <!-- =============== STRUCTURED DATA =============== -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Dronify",
      "description": "Professional drone services in Malaysia offering aerial photography, 3D mapping, site inspections, and progress monitoring. Certified operators delivering high-quality results.",
      "url": "https://dronify.my",
      "logo": "https://dronify.my/img/common/dronify-logo.svg",
      "image": "https://dronify.my/img/common/dronify-logo.svg",
      "address": {
        "@type": "PostalAddress",
        "addressCountry": "MY",
        "addressRegion": "Malaysia"
      },
      "areaServed": "Malaysia",
      "serviceArea": {
        "@type": "GeoCircle",
        "geoMidpoint": {
          "@type": "GeoCoordinates",
          "latitude": 4.2105,
          "longitude": 101.9758
        },
        "geoRadius": "500000"
      },
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Drone Services",
        "itemListElement": [
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Aerial Photography",
              "description": "Professional aerial photography and videography services using advanced drone technology"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "3D Mapping & Surveying",
              "description": "Precision 3D mapping, topographic surveys, and photogrammetry services"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Site Inspection",
              "description": "Comprehensive site inspections for infrastructure, construction, and safety monitoring"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Progress Monitoring",
              "description": "Real-time project progress monitoring and documentation services"
            }
          }
        ]
      },
      "knowsAbout": [
        "Drone Photography",
        "Aerial Surveying", 
        "3D Mapping",
        "Photogrammetry",
        "Site Inspection",
        "Construction Monitoring",
        "Topographic Mapping",
        "GIS Data Collection"
      ],
      "awards": [
        "Malaysia Book of Records - Longest continuous river survey in Kota Belud, Sabah"
      ],
      "hasCredential": [
        {
          "@type": "EducationalOccupationalCredential",
          "name": "Remote Certificate of Competency (RCoC-B)",
          "credentialCategory": "certification",
          "recognizedBy": {
            "@type": "Organization",
            "name": "Civil Aviation Authority Malaysia"
          }
        }
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5.0",
        "reviewCount": "50"
      },
      "priceRange": "$$"
    }
    </script>
    
    <!-- =============== PRELOAD CRITICAL ASSETS =============== -->
    <link rel="preload" href="/img/common/header/dronify-logo.svg" as="image">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link rel="preconnect" href="https://wa.me">
    
    <!-- =============== RESOURCE HINTS =============== -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
    <link rel="shortcut icon" href="/img/common/favicon.svg">
    
    <!-- =============== OPTIMIZED FONT LOADING (RENDER BLOCKING FIX) =============== -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Async load fonts to prevent render blocking -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@600&display=swap"></noscript>
    <style>
        /* Font fallbacks to prevent CLS */
        @font-face {
            font-family: 'Montserrat-fallback';
            src: local('Arial'), local('Helvetica'), local('sans-serif');
            font-display: swap;
            ascent-override: 95%;
            descent-override: 25%;
            line-gap-override: 0%;
        }
        @font-face {
            font-family: 'Poppins-fallback';
            src: local('Arial'), local('Helvetica'), local('sans-serif');
            font-display: swap;
            ascent-override: 105%;
            descent-override: 35%;
            line-gap-override: 0%;
        }
    </style>
    
    <!-- =============== CRITICAL CSS (INLINED) =============== -->
    <style>
        /*-------------------- CRITICAL ABOVE-THE-FOLD STYLES --------------------*/

        /* Essential box-sizing and flexbox for layout */
        html {
          box-sizing: border-box;
          -ms-overflow-style: scrollbar;
        }

        *,
        *::before,
        *::after {
          box-sizing: inherit;
        }

        /* Essential body styles for initial render */
        body {
          color: #a4a4a4;
          font-size: 17px;
          line-height: 1.47em;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          min-width: 320px;
          background: #131213;
          background-position: top center;
          background-size: cover;
          background-repeat: no-repeat;
          min-height: 100vh;
          margin: 0;
          padding: 0;
        }

        /* Critical bootstrap grid - container and row */
        .container {
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          margin-right: auto;
          margin-left: auto;
        }

        @media (min-width: 768px) {
          .container {
            max-width: 768px;
          }
        }

        @media (min-width: 992px) {
          .container {
            max-width: 960px;
          }
        }

        @media (min-width: 1200px) {
          .container {
            max-width: 1170px;
          }
        }

        @media (min-width: 1280px) {
          .container {
            max-width: 1200px;
          }
        }

        @media (min-width: 1366px) {
          .container {
            max-width: 1356px;
          }
        }

        .row {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          margin-right: -15px;
          margin-left: -15px;
        }

        /* Essential column classes for above-the-fold layout */
        .col-12, .col-lg-6 {
          position: relative;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
        }

        .col-12 {
          -ms-flex: 0 0 100%;
          flex: 0 0 100%;
          max-width: 100%;
        }

        @media (min-width: 992px) {
          .col-lg-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
          }
        }

        /* Bootstrap responsive utilities needed for header */
        .d-none {
          display: none !important;
        }

        .d-lg-block {
          display: none !important;
        }

        @media (min-width: 992px) {
          .d-lg-block {
            display: block !important;
          }
          .d-lg-none {
            display: none !important;
          }
        }

        /* Flexbox alignment utilities */
        .align-items-center {
          -ms-flex-align: center !important;
          align-items: center !important;
        }

        /* Header critical styles */
        .header {
          position: relative;
          z-index: 1000;
          background: rgba(19, 18, 19, 0.95);
          backdrop-filter: blur(10px);
          padding: 15px 0;
        }

        .logo {
          display: flex;
          align-items: center;
          text-decoration: none;
          color: #fff;
        }

        .logo-img {
          height: 40px;
          width: auto;
          margin-right: 12px;
        }

        .logo-text {
          font-size: 24px;
          font-weight: 700;
          color: #45a7ef;
          letter-spacing: 2px;
        }

        /* Navigation menu critical styles */
        .nav-menu {
          text-align: right;
        }

        .nav-list {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin: 0;
          padding: 0;
          list-style: none;
        }

        .nav-list li {
          margin-left: 32px;
        }

        .nav-list li a {
          color: #fff;
          text-decoration: none;
          font-weight: 500;
          font-size: 16px;
          transition: color 0.3s ease;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .nav-list li a:hover {
          color: #45a7ef;
        }

        /* Mobile hamburger menu critical styles */
        .hamburger-container {
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1001;
        }

        .nav-btn {
          width: 30px;
          height: 30px;
          position: relative;
          cursor: pointer;
          padding: 0;
          background: transparent;
          border: none;
        }

        .nav-btn span {
          position: absolute;
          width: 100%;
          height: 2px;
          background: #fff;
          border-radius: 1px;
          transition: all 0.3s ease;
        }

        .nav-btn span:nth-child(1) {
          top: 6px;
        }

        .nav-btn span:nth-child(2) {
          top: 14px;
        }

        .nav-btn span:nth-child(3) {
          top: 22px;
        }

        /* Hide non-critical elements initially */
        .mobile-overlay,
        .mobile-menu-new {
          display: none;
        }

        /* Essential typography for critical content */
        h1, h2, h3, h4, h5, h6 {
          color: #fff;
          font-weight: 700;
          line-height: 1.5em;
          text-transform: uppercase;
          margin: 0 0 1rem 0;
        }

        /* Explicit font sizes to prevent deprecation warnings */
        h1 {
          font-size: 42px;
        }

        h2 {
          font-size: 35px;
        }

        h3 {
          font-size: 28px;
        }

        h4 {
          font-size: 24px;
        }

        h5 {
          font-size: 20px;
        }

        h6 {
          font-size: 18px;
        }

        a {
          transition: 0.3s ease;
          text-decoration: none;
          color: #45a7ef;
        }

        /* Critical layout utilities */
        .text-center {
          text-align: center !important;
        }

        /* Prevent layout shift from images */
        img {
          max-width: 100%;
          height: auto;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 991px) {
          .logo-item {
            justify-content: center;
            text-align: center;
          }
          
          .nav-menu {
            display: none;
          }
        }

        /* Font loading optimization */
        body, input, button, select, textarea {
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Font swap when loaded - with fallbacks to prevent CLS */
        body, input, button, select, textarea {
          font-family: 'Montserrat', 'Montserrat-fallback', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6, .logo-text {
          font-family: 'Poppins', 'Poppins-fallback', 'Montserrat', 'Montserrat-fallback', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        /* CRITICAL: WhatsApp button fix - bypass caching */
        body .to-top, html .to-top, a.to-top {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          pointer-events: none !important;
          position: absolute !important;
          left: -9999px !important;
        }
        
        body .whatsapp-float, html .whatsapp-float, a.whatsapp-float {
          position: fixed !important;
          width: 60px !important;
          height: 60px !important;
          bottom: 20px !important;
          right: 20px !important;
          background-color: #25d366 !important;
          color: white !important;
          border-radius: 50% !important;
          text-align: center !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
          z-index: 99999 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          text-decoration: none !important;
          transition: all 0.3s ease !important;
          padding: 0 !important;
          margin: 0 !important;
          overflow: hidden !important;
          white-space: nowrap !important;
          border: none !important;
          outline: none !important;
          min-width: 60px !important;
          min-height: 60px !important;
          max-width: 60px !important;
          max-height: 60px !important;
        }
        
        body .whatsapp-float .whatsapp-icon, html .whatsapp-float .whatsapp-icon, .whatsapp-float svg.whatsapp-icon {
          width: 30px !important;
          height: 30px !important;
          min-width: 30px !important;
          min-height: 30px !important;
          max-width: 30px !important;
          max-height: 30px !important;
          fill: currentColor !important;
          flex-shrink: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          display: block !important;
          position: static !important;
        }
        
        body .whatsapp-float .whatsapp-text, html .whatsapp-float .whatsapp-text, .whatsapp-float span.whatsapp-text {
          font-size: 14px !important;
          font-weight: 600 !important;
          display: none !important;
          visibility: hidden !important;
          margin-left: 10px !important;
          opacity: 0 !important;
          transition: all 0.3s ease !important;
          position: absolute !important;
          left: -9999px !important;
          white-space: nowrap !important;
          pointer-events: none !important;
        }
        
        body .whatsapp-float:hover, html .whatsapp-float:hover, a.whatsapp-float:hover {
          background-color: #20ba5a !important;
          color: white !important;
          transform: scale(1.05) !important;
          width: auto !important;
          max-width: 200px !important;
          min-width: 150px !important;
          padding: 0 20px 0 15px !important;
          border-radius: 30px !important;
        }
        
        body .whatsapp-float:hover .whatsapp-text, html .whatsapp-float:hover .whatsapp-text, .whatsapp-float:hover span.whatsapp-text {
          display: inline !important;
          visibility: visible !important;
          opacity: 1 !important;
          position: static !important;
          left: auto !important;
          pointer-events: auto !important;
        }
    </style>
    
    <!-- =============== NON-CRITICAL CSS (DEFERRED) =============== -->
    <link rel="preload" href="/css/main.bundle.min.css?v=20250805-017" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous">
    
    <!-- Mobile Technical Display Section -->
    <link rel="preload" href="/css/sections/technical-display-mobile.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <!-- =============== NOSCRIPT FALLBACKS =============== -->
    <noscript>
        <link rel="stylesheet" href="/css/main.bundle.min.css?v=20250805-017">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous">
        <link rel="stylesheet" href="/css/sections/technical-display-mobile.css">
    </noscript>
    
    <!-- =============== PAGE SPECIFIC CSS (DEFERRED) =============== -->
    <!-- Service Page -->
    
    
    <!-- Pilot Program Page -->
    
    
    <!-- Blog Pages -->
    
    
    <!-- About Us Page -->
    
    
    <!-- Estimator Page -->
    
    
    <!-- Contact Page -->
    
    
    <!-- =============== CSS LOADING OPTIMIZATION SCRIPT =============== -->
    <script>
        // Aggressive cache clearing and service worker update
        if ('serviceWorker' in navigator) {
            // Clear all caches first
            if ('caches' in window) {
                caches.keys().then(function(cacheNames) {
                    return Promise.all(
                        cacheNames.map(function(cacheName) {
                            if (cacheName.includes('dronify-v1') || cacheName.includes('dronify-v2') || cacheName.includes('dronify-v3')) {
                                console.log('Clearing old cache:', cacheName);
                                return caches.delete(cacheName);
                            }
                        })
                    );
                });
            }
            
            // Force service worker update
            navigator.serviceWorker.getRegistrations().then(function(registrations) {
                for(let registration of registrations) {
                    registration.update();
                    // Force immediate activation
                    if (registration.waiting) {
                        registration.waiting.postMessage({type: 'SKIP_WAITING'});
                    }
                }
            });
            
            // Listen for service worker updates
            navigator.serviceWorker.addEventListener('controllerchange', function() {
                console.log('Service worker updated, reloading...');
                window.location.reload();
            });
        }
        
        // Mark when fonts are loaded for font-family swap
        if ('fonts' in document) {
            Promise.all([
                document.fonts.load('400 1em Montserrat'),
                document.fonts.load('700 1em Montserrat'),
                document.fonts.load('600 1em Poppins')
            ]).then(function() {
                document.documentElement.classList.add('fonts-loaded');
            });
        }
        
        // Polyfill for browsers that don't support rel="preload"
        (function() {
            var link = document.createElement('link');
            if (link.relList && link.relList.supports && link.relList.supports('preload')) {
                return;
            }
            
            var links = document.querySelectorAll('link[rel="preload"][as="style"]');
            for (var i = 0; i < links.length; i++) {
                var link = links[i];
                link.rel = 'stylesheet';
            }
        })();
        
        // =============== IMAGE OPTIMIZATION SCRIPT ===============
        document.addEventListener('DOMContentLoaded', function() {
            // Responsive image URL selection
            function getResponsiveImageUrl(element) {
                const width = window.innerWidth;
                
                // Check if element has responsive data attributes
                if (element.dataset.bgSm) {
                    if (width <= 768) {
                        return element.dataset.bgSm; // Small screens - most optimized
                    } else if (width <= 1200) {
                        return element.dataset.bgMd || element.dataset.bgSm; // Medium screens
                    } else {
                        // Large screens - prioritize original high-quality images for desktop
                        return element.dataset.bg || element.dataset.bgLg || element.dataset.bgMd;
                    }
                }
                
                // Fallback to single bg attribute only if no responsive versions exist
                return element.dataset.bg;
            }
            
            // Preload verification for optimized images
            function verifyOptimizedImageExists(url) {
                return new Promise((resolve) => {
                    const img = new Image();
                    img.onload = () => resolve(true);
                    img.onerror = () => resolve(false);
                    img.src = url;
                });
            }
            
            // Lazy load background images with Intersection Observer
            function initLazyImages() {
                const lazyImageElements = document.querySelectorAll('[data-bg][data-lazy="true"], [data-bg-sm][data-lazy="true"], .carousel-image[data-bg]');
                
                if ('IntersectionObserver' in window) {
                    const imageObserver = new IntersectionObserver((entries, observer) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                const element = entry.target;
                                const bgUrl = getResponsiveImageUrl(element);
                                
                                if (bgUrl) {
                                    // Preload the image for smoother loading
                                    const imageLoader = new Image();
                                    imageLoader.onload = () => {
                                        element.style.backgroundImage = `url('${bgUrl}')`;
                                        element.classList.add('loaded');
                                        element.removeAttribute('data-lazy');
                                    };
                                    imageLoader.onerror = () => {
                                        // Silent fallback - don't log to console for production
                                        const fallbackUrl = element.dataset.bg;
                                        if (fallbackUrl && fallbackUrl !== bgUrl) {
                                            const fallbackLoader = new Image();
                                            fallbackLoader.onload = () => {
                                                element.style.backgroundImage = `url('${fallbackUrl}')`;
                                                element.classList.add('loaded');
                                            };
                                            fallbackLoader.onerror = () => {
                                                // Silent fail - element remains without background
                                                element.classList.add('loaded');
                                            };
                                            fallbackLoader.src = fallbackUrl;
                                        } else {
                                            element.classList.add('loaded');
                                        }
                                    };
                                    imageLoader.src = bgUrl;
                                }
                                
                                observer.unobserve(element);
                            }
                        });
                    }, {
                        rootMargin: '50px 0px',
                        threshold: 0.1
                    });
                    
                    lazyImageElements.forEach(element => imageObserver.observe(element));
                } else {
                    // Fallback for browsers without IntersectionObserver
                    lazyImageElements.forEach(element => {
                        const bgUrl = getResponsiveImageUrl(element);
                        if (bgUrl) {
                            element.style.backgroundImage = `url('${bgUrl}')`;
                            element.classList.add('loaded');
                        }
                    });
                }
            }
            
            // Initialize lazy loading
            initLazyImages();
            
            // Handle window resize for responsive images
            let resizeTimeout;
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(() => {
                    const responsiveElements = document.querySelectorAll('[data-bg-sm].loaded');
                    responsiveElements.forEach(element => {
                        const newBgUrl = getResponsiveImageUrl(element);
                        if (newBgUrl) {
                            element.style.backgroundImage = `url('${newBgUrl}')`;
                        }
                    });
                }, 250);
            });
            
            // Preload critical above-the-fold images
            const criticalImages = [
                '/img/common/header/dronify-logo.svg'
            ];
            
            criticalImages.forEach(src => {
                const link = document.createElement('link');
                link.rel = 'preload';
                link.as = 'image';
                link.href = src;
                document.head.appendChild(link);
            });
        });
    </script>
</head> 
<body id="home" class="home">
<!--=============== HEADER ===============-->
<header class="header">
    <div class="container">
        <div class="row align-items-center">
            <!--=============== LOGO (Left on Desktop, Centered on Mobile) ===============-->
            <div class="col-12 col-lg-6 logo-item">
                <a href="/" class="logo">
                    			<img src="/img/common/header/dronify-logo.svg" alt="Dronify logo" class="logo-img" width="40" height="40">
                    <span class="logo-text">DRONIFY</span>
                </a>
            </div>
            <!--============= LOGO END =============-->
            
            <!--=============== HAMBURGER MENU BUTTON (Mobile Only) ===============-->
            <div class="d-lg-none hamburger-container">
                <button class="nav-btn" aria-label="Open navigation menu" aria-expanded="false" type="button">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <!--=========== HAMBURGER MENU BUTTON END ===========-->
            
            <!--============= DESKTOP NAV MENU =============-->
            <div class="col-lg-6 d-none d-lg-block nav-menu-cover">
                <nav class="nav-menu">
                    <ul class="nav-list">
                        <li><a href="/aboutus/">About Us</a></li>
                        <li><a href="/service/">Service</a></li>
                        <li><a href="/project/">Project</a></li>
                        <li><a href="/pilot-program/">Pilot Program</a></li>
                        <li><a href="/blog/">Blog</a></li>
                        <li><a href="/contacts/">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
            <!--=========== DESKTOP NAV MENU END ===========-->
        </div>
    </div>
</header>

<!-- Mobile menu overlay -->
<div class="mobile-overlay"></div>

<!-- New mobile menu that bypasses all conflicts -->
<div id="mobile-menu-new" class="mobile-menu-new">
    <div class="mobile-menu-close">
        <span>×</span>
    </div>
    <ul class="mobile-nav-list">
        <li><a href="/aboutus/">About Us</a></li>
        <li><a href="/service/">Service</a></li>
        <li><a href="/project/">Project</a></li>
        <li><a href="/pilot-program/">Pilot Program</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/contacts/">Contact Us</a></li>
    </ul>
    
    <!-- Social Media Links -->
    <div class="mobile-social-media" style="padding: 25px 30px 30px 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: auto; flex-shrink: 0;">
        <h4 style="color: #ffffff; font-size: 1rem; font-weight: 600; margin-bottom: 20px; text-align: center;">Connect With Us</h4>
        <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
                         <a href="https://www.facebook.com/dronify.my" target="_blank" aria-label="Follow us on Facebook" title="Follow us on Facebook" style="display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: rgba(59, 89, 152, 0.8); border-radius: 50%; transition: all 0.3s ease;" onmouseover="this.style.background='rgba(59, 89, 152, 1)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(59, 89, 152, 0.8)'; this.style.transform='scale(1)'">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
            </a>
            <a href="https://www.instagram.com/dronify.my/" target="_blank" aria-label="Follow us on Instagram" title="Follow us on Instagram" style="display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); border-radius: 50%; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                </svg>
            </a>
            <a href="https://www.linkedin.com/company/dronify-my/" target="_blank" aria-label="Connect with us on LinkedIn" title="Connect with us on LinkedIn" style="display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: rgba(0, 119, 181, 0.8); border-radius: 50%; transition: all 0.3s ease;" onmouseover="this.style.background='rgba(0, 119, 181, 1)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(0, 119, 181, 0.8)'; this.style.transform='scale(1)'">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
            </a>
            <a href="https://www.youtube.com/@dronifymy" target="_blank" aria-label="Subscribe to our YouTube channel" title="Subscribe to our YouTube channel" style="display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: rgba(255, 0, 0, 0.8); border-radius: 50%; transition: all 0.3s ease;" onmouseover="this.style.background='rgba(255, 0, 0, 1)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(255, 0, 0, 0.8)'; this.style.transform='scale(1)'">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                </svg>
            </a>
        </div>
    </div>
</div>

<!-- Force mobile nav styles and functionality -->
<style>
/* Global cursor fix for entire site */
/* Disable custom cursor system completely */
.cursor-primary,
.cursor-primary * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Force normal cursor for everything */
*, *::before, *::after {
    cursor: auto !important;
}

html, body {
    cursor: default !important;
}

body * {
    cursor: inherit !important;
}

/* Interactive elements should show pointer cursor */
a, button, input[type="button"], input[type="submit"], input[type="reset"], 
select, textarea, [role="button"], [onclick], .btn, [href], 
.slick-arrow, .slick-dots li, .carousel-control, .carousel-indicators,
.image-item, .clickable, [data-toggle], [data-target] {
    cursor: pointer !important;
}

/* Carousel and slider specific fixes */
.slick-slider, .slick-slider *, 
.carousel, .carousel *,

.image-carousel, .image-carousel *,
[class*="slider"], [class*="slider"] *,
[class*="carousel"], [class*="carousel"] * {
    cursor: default !important;
}

.slick-arrow, .slick-dots li, .carousel-control, .carousel-indicators li {
    cursor: pointer !important;
}

/* Fix any elements that might be hiding cursor */
div, section, main, article, p, span, h1, h2, h3, h4, h5, h6, 
img, picture, figure, canvas, svg, video {
    cursor: inherit !important;
}

/* Force override any cursor: none styles */
[style*="cursor: none"], [style*="cursor:none"] {
    cursor: default !important;
}

/* Disable any CSS that might set cursor to none */
body[style*="cursor"], html[style*="cursor"] {
    cursor: default !important;
}

/* Force hamburger button to show on mobile */
/* Professional mobile menu styling */
.mobile-menu-new {
    position: fixed !important;
    top: 0 !important;
    right: -100vw !important;
    bottom: 0 !important;
    width: 320px !important;
    background: rgba(19, 18, 19, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 80px 0 0 0 !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    cursor: default !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.mobile-menu-new.active {
    right: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Close button inside mobile menu */
.mobile-menu-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

.mobile-menu-close * {
    cursor: pointer !important;
    pointer-events: none !important;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
}

.mobile-menu-close span {
    color: #45a7ef !important;
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    pointer-events: none !important;
    cursor: inherit !important;
}



.mobile-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    flex-grow: 1 !important;
}

.mobile-nav-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-nav-list li:last-child {
    border-bottom: none !important;
}

.mobile-nav-list li a {
    display: block !important;
    padding: 20px 30px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.mobile-nav-list li a:hover {
    background: rgba(69, 167, 239, 0.2) !important;
    color: #45a7ef !important;
    padding-left: 35px !important;
    cursor: pointer !important;
}

/* Fix cursor for entire mobile menu container and all empty spaces */
.mobile-menu-new,
.mobile-menu-new * {
    cursor: default !important;
}

.mobile-menu-new a,
.mobile-menu-new button,
.mobile-menu-new [onclick],
.mobile-menu-close {
    cursor: pointer !important;
}

/* Ensure empty space in mobile menu has visible cursor */
.mobile-menu-new::before,
.mobile-menu-new::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: default !important;
    pointer-events: none !important;
    z-index: -1;
}

/* Desktop Navigation - Show normal menu on desktop */
@media (min-width: 992px) {
    .nav-btn {
        display: none !important;
    }
    
    .nav-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .nav-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2rem !important;
    }
    
    .nav-list li {
        margin: 0 !important;
        border-bottom: none !important;
        position: relative !important;
    }
    
    .nav-list li a {
        display: block !important;
        padding: 8px 16px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        transition: all 0.3s ease !important;
        border-radius: 4px !important;
        text-transform: capitalize !important;
    }
    
    .nav-list li a:hover {
        background: rgba(69, 167, 239, 0.2) !important;
        color: #45a7ef !important;
        padding-left: 16px !important;
    }
    
    /* Desktop dropdown styling */
    .nav-list li.dropdown ul {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 200px !important;
        background: rgba(19, 18, 19, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
        display: none !important;
        z-index: 1000 !important;
        padding: 8px 0 !important;
        margin-top: 4px !important;
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .nav-list li.dropdown:hover ul {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Add hover bridge to prevent dropdown from disappearing */
    .nav-list li.dropdown::after {
        content: '' !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: 12px !important;
        background: transparent !important;
        z-index: 999 !important;
    }
    
    .nav-list li.dropdown ul li {
        margin: 0 !important;
        border-bottom: none !important;
    }
    
    .nav-list li.dropdown ul li a {
        padding: 12px 20px !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 0 !important;
    }
    
    .nav-list li.dropdown ul li a:hover {
        background: rgba(69, 167, 239, 0.2) !important;
        color: #45a7ef !important;
        padding-left: 20px !important;
    }
    
    .mobile-overlay,
    .mobile-menu-new {
        display: none !important;
    }
}

/* Mobile Navigation - Only show hamburger menu on mobile */
@media (max-width: 991px) {
    .nav-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 4px !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: translateY(-10px) !important;
        width: 42px !important;
        height: 50px !important;
        z-index: 999999 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        gap: 3px !important;
    }
    
    /* Ensure mobile menu is visible on mobile */
    .mobile-menu-new {
        display: block !important;
        visibility: visible !important;
    }
    
    .mobile-overlay {
        display: block !important;
    }
    
    .nav-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        cursor: pointer !important;
    }
    
    .nav-btn span {
        display: block !important;
        background: #45a7ef !important;
        height: 2px !important;
        width: 24px !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 1px !important;
        position: relative !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }
    
    /* X transformation when menu is active */
    .nav-btn.active span:nth-child(1) {
        transform: rotate(45deg) translateY(8px) !important;
        background: #45a7ef !important;
    }
    
    .nav-btn.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scale(0) !important;
    }
    
    .nav-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px) !important;
        background: #45a7ef !important;
    }
    
    /* Active hamburger button styling */
    .nav-btn.active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Hide desktop nav menu on mobile */
    .nav-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Mobile overlay when menu is open */
    .mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: 9997 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .mobile-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .logo-item {
        justify-content: center !important;
    }
}
</style>

<script>
// Mobile navigation functionality - initialize for all devices but only activate on mobile
document.addEventListener('DOMContentLoaded', function() {
    // Check if mobile view
    function isMobile() {
        return window.innerWidth <= 991;
    }
    
    var navBtn = document.querySelector('.nav-btn');
    var newMenu = document.querySelector('.mobile-menu-new');
    var closeBtn = document.querySelector('.mobile-menu-close');
    var overlay = document.querySelector('.mobile-overlay');
    var body = document.body;
    var isMenuOpen = false;
    
    function openMenu() {
        if (!isMenuOpen && newMenu && overlay && navBtn) {
            newMenu.classList.add('active');
            overlay.classList.add('active');
            navBtn.classList.add('active');
            body.classList.add('no-scroll');
            isMenuOpen = true;
            
            // Force styles as backup
            setTimeout(function() {
                newMenu.style.position = 'fixed';
                newMenu.style.right = '0px';
                newMenu.style.top = '0px';
                newMenu.style.bottom = '0px';
                newMenu.style.width = '320px';
                newMenu.style.zIndex = '99999';
                newMenu.style.display = 'block';
                newMenu.style.opacity = '1';
                newMenu.style.visibility = 'visible';
    
            }, 50);
        }
    }
    
    function closeMenu() {
        if (isMenuOpen && newMenu && overlay && navBtn) {

            newMenu.classList.remove('active');
            overlay.classList.remove('active');
            navBtn.classList.remove('active');
            body.classList.remove('no-scroll');
            isMenuOpen = false;
        }
    }
    
    function toggleMenu() {
        if (isMenuOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    }
    
    // Hamburger button click
    if (navBtn) {
        navBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
    
            if (isMobile()) {
                toggleMenu();
            }
        });
    }
    
    // Close button click
    if (closeBtn) {
        closeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeMenu();
        });
    }
    
    // Overlay click to close
    if (overlay) {
        overlay.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            closeMenu();
        });
    }
    
    // ESC key to close
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && isMenuOpen) {
            closeMenu();
        }
    });
    
    // Handle window resize
    window.addEventListener('resize', function() {
        if (!isMobile() && isMenuOpen) {
            closeMenu();
        }
    });
});

// Desktop dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
    function isDesktop() {
        return window.innerWidth > 991;
    }
    
    if (!isDesktop()) {
        return;
    }
    
    
    
    var dropdownItems = document.querySelectorAll('.nav-list li.dropdown');
    var hoverTimeout;
    
    dropdownItems.forEach(function(dropdown) {
        var submenu = dropdown.querySelector('ul');
        
        if (submenu) {
            // Mouse enter on dropdown parent
            dropdown.addEventListener('mouseenter', function() {
                clearTimeout(hoverTimeout);
                submenu.style.display = 'block';
                setTimeout(function() {
                    submenu.style.opacity = '1';
                    submenu.style.transform = 'translateY(0)';
                    submenu.style.pointerEvents = 'auto';
                }, 10);
            });
            
            // Mouse leave on dropdown parent
            dropdown.addEventListener('mouseleave', function() {
                hoverTimeout = setTimeout(function() {
                    submenu.style.opacity = '0';
                    submenu.style.transform = 'translateY(-10px)';
                    submenu.style.pointerEvents = 'none';
                    setTimeout(function() {
                        submenu.style.display = 'none';
                    }, 300);
                }, 100); // 100ms delay before starting to hide
            });
            
            // Mouse enter on submenu itself
            submenu.addEventListener('mouseenter', function() {
                clearTimeout(hoverTimeout);
            });
            
            // Mouse leave on submenu
            submenu.addEventListener('mouseleave', function() {
                hoverTimeout = setTimeout(function() {
                    submenu.style.opacity = '0';
                    submenu.style.transform = 'translateY(-10px)';
                    submenu.style.pointerEvents = 'none';
                    setTimeout(function() {
                        submenu.style.display = 'none';
                    }, 300);
                }, 100);
            });
        }
    });
});
</script>
<!--============= HEADER END =============-->

<!--=============== MAIN CONTENT ===============-->
<main>
	<!--=============== PROBLEM SECTION ===============-->
	<section class="challenges-section">
    <div class="problem-images-container">
        <!-- Use optimized responsive background images -->
        <div class="problem-image problem-image-left" 
             data-bg-sm="/img/index/problem/optimized/background-left-md.webp"
             data-bg-md="/img/index/problem/optimized/background-left-lg.webp" 
             data-bg-lg="/img/index/problem/optimized/background-left-xl.webp"
             data-lazy="true"></div>
        <div class="problem-image problem-image-right" 
             data-bg-sm="/img/index/problem/optimized/background-right-md.webp"
             data-bg-md="/img/index/problem/optimized/background-right-lg.webp"
             data-bg-lg="/img/index/problem/optimized/background-right-xl.webp"
             data-lazy="true"></div>
    </div>
    <div class="container">
        <div class="challenges-content">
            <h1 class="section-title">Drone Mapping<br>Done Right</h1>
            <div class="rotating-text-container">
                <p class="static-text">Are you struggling with</p>
                <div class="rotating-text-wrapper">
                    <span class="rotating-text-item">outdated maps?</span>
                    <span class="rotating-text-item">inaccurate estimations?</span>
                    <span class="rotating-text-item">manual survey delays?</span>
                    <span class="rotating-text-item">manual data stitching?</span>
                    <span class="rotating-text-item">unreliable site accuracy?</span>
                    <span class="rotating-text-item">slow survey deliverables?</span>
                    <span class="rotating-text-item">rework on terrain data?</span>
                    <span class="rotating-text-item">unexpected site issues?</span>
                    <span class="rotating-text-item">inspection blind spots?</span>
                    <span class="rotating-text-item">field data errors?</span>
                    <span class="rotating-text-item">sharing GIS-ready outputs?</span>
                    <span class="rotating-text-item">high travel costs?</span>
                    <span class="rotating-text-item">data gaps in planning?</span>
                    <span class="rotating-text-item">CAD integration issues?</span>
                </div>
            </div>
            <p class="section-subtitle">Dronify helps you avoid costly rework<br>with fast, precise drone mapping.</p>
            <a href="/service/" class="cta-button">See How Dronify Works</a>
        </div>
    </div>
</section>

<script>
// Enhanced lazy loading with responsive images for problem section
document.addEventListener('DOMContentLoaded', function() {
    const imageElements = document.querySelectorAll('.problem-image[data-bg-sm]');
    
    function getResponsiveImageUrl(element) {
        const width = window.innerWidth;
        if (width <= 768) {
            return element.dataset.bgSm; // Small screens - most optimized
        } else if (width <= 1200) {
            return element.dataset.bgMd; // Medium screens
        } else {
            return element.dataset.bgLg; // Large screens
        }
    }
    
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    const bgUrl = getResponsiveImageUrl(img);
                    
                    // Preload the image
                    const imageLoader = new Image();
                    imageLoader.onload = () => {
                        img.style.backgroundImage = `url('${bgUrl}')`;
                        img.classList.add('loaded');
                    };
                    imageLoader.onerror = () => {
                        console.warn('Failed to load optimized image:', bgUrl);
                        // Fallback to original if optimized fails
                        const fallbackUrl = img.dataset.bg || '/img/index/problem/background-left.webp';
                        img.style.backgroundImage = `url('${fallbackUrl}')`;
                        img.classList.add('loaded');
                    };
                    imageLoader.src = bgUrl;
                    
                    observer.unobserve(img);
                }
            });
        }, {
            rootMargin: '50px 0px'
        });
        
        imageElements.forEach(img => imageObserver.observe(img));
    } else {
        // Fallback for browsers without IntersectionObserver
        imageElements.forEach(img => {
            const bgUrl = getResponsiveImageUrl(img);
            img.style.backgroundImage = `url('${bgUrl}')`;
        });
    }
    
    // Handle window resize for responsive images
    let resizeTimeout;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            imageElements.forEach(img => {
                if (!img.classList.contains('loaded')) return;
                const newBgUrl = getResponsiveImageUrl(img);
                img.style.backgroundImage = `url('${newBgUrl}')`;
            });
        }, 250);
    });
});
</script> 

	<!--=============== TECHNICAL DISPLAY SECTION (MOBILE-FRIENDLY) ===============-->
	<!-- Professional Mobile-Optimized Technical Display Section -->
<section class="technical-display-mobile" id="technicalDisplay">
    <div class="container">
        
        <!-- Section Header with Animation -->
        <div class="section-intro" data-aos="fade-up">
            <span class="section-label">ACHIEVEMENTS & EXPERTISE</span>
            <h2 class="section-title">Industry-Leading Drone Services</h2>
            <p class="section-subtitle">Certified operations with proven track record across Malaysia</p>
        </div>

        <!-- Image Showcase Carousel -->
        <div class="image-carousel-section" data-aos="fade-up" data-aos-delay="50">
            <div class="image-carousel" id="imageCarousel">
                <div class="carousel-image active" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-1-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-1-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-1-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-1-optimized.webp"></div>
                <div class="carousel-image" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-2-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-2-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-2-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-2-optimized.webp"></div>
                <div class="carousel-image" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-3-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-3-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-3-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-3-optimized.webp"></div>
                <div class="carousel-image" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-4-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-4-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-4-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-4-optimized.webp"></div>
                <div class="carousel-image" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-5-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-5-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-5-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-5-optimized.webp"></div>
                <div class="carousel-image" 
                     data-bg-sm="/img/index/technical-display/optimized/carousel-image-6-sm.webp"
                     data-bg-md="/img/index/technical-display/optimized/carousel-image-6-md.webp"
                     data-bg-lg="/img/index/technical-display/optimized/carousel-image-6-lg.webp"
                     data-bg="/img/index/technical-display/carousel-image-6-optimized.webp"></div>
                
                <div class="carousel-overlay"></div>
                
                <div class="carousel-dots">
                    <div class="carousel-dot active"></div>
                    <div class="carousel-dot"></div>
                    <div class="carousel-dot"></div>
                    <div class="carousel-dot"></div>
                    <div class="carousel-dot"></div>
                    <div class="carousel-dot"></div>
                </div>
            </div>
        </div>

        <!-- Professional Certifications Grid -->
        <div class="certifications-grid" data-aos="fade-up" data-aos-delay="200">
            <div class="cert-card primary">
                <div class="cert-icon">
                    <img src="/img/index/technical-display/caam-certification-logo.svg" alt="CAAM Logo" width="40" height="40" loading="lazy">
                </div>
                <div class="cert-content">
                    <h4>RCoC-B Certified</h4>
                    <p>Civil Aviation Authority Malaysia</p>
                </div>
            </div>
            
            <div class="cert-card">
                <div class="cert-icon">
                    <img src="/img/index/technical-display/mbor-record-logo.svg" alt="Malaysia Book of Records Logo" width="40" height="40" loading="lazy">
                </div>
                <div class="cert-content">
                    <h4>Malaysia Book of Records</h4>
                    <p>Longest River Survey Achievement</p>
                </div>
            </div>
            
            <div class="cert-card">
                <div class="cert-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                        <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </div>
                <div class="cert-content">
                    <h4>100% Safety Record</h4>
                    <p>Zero Incidents Since Operations</p>
                </div>
            </div>
        </div>

        <!-- Notable Projects Showcase with Image Carousel -->
        <div class="projects-showcase" data-aos="fade-up" data-aos-delay="300">
            <div class="showcase-header">
                <h3>Notable Projects</h3>
                <div class="showcase-controls">
                    <button class="control-btn" id="projectPrev" aria-label="Previous project">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <div class="project-indicators">
                        <span class="indicator active"></span>
                        <span class="indicator"></span>
                        <span class="indicator"></span>
                    </div>
                    <button class="control-btn" id="projectNext" aria-label="Next project">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="projects-carousel">
                <div class="carousel-track" id="projectsTrack">
                    <!-- Project 1 -->
                    <div class="project-card active">
                        <div class="project-image-container">
                            <div class="image-gradient-overlay"></div>
                            <img src="/img/project/thumbnails/kerian-project-overview.webp" alt="300km Canal Systems Mapping" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h4>300km Canal Systems Mapping</h4>
                            <div class="project-meta">
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                                        <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    Kerian, Perak
                                </span>
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                                        <line x1="12" y1="3" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
                                        <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    Survey-Grade Mapping
                                </span>
                            </div>
                            <p>Comprehensive aerial mapping of extensive canal networks with centimeter-level precision for water infrastructure monitoring.</p>
                        </div>
                    </div>
                    
                    <!-- Project 2 -->
                    <div class="project-card">
                        <div class="project-image-container">
                            <div class="image-gradient-overlay"></div>
                            <img src="/img/service/thumbnails/dsm/dsm-1-thumbnail.webp" alt="Reservoir Dam Survey" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h4>Reservoir Dam Structural Survey</h4>
                            <div class="project-meta">
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                                        <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    Pahang
                                </span>
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2"/>
                                        <path d="M14 2V8H20" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    3D Structural Analysis
                                </span>
                            </div>
                            <p>Detailed inspection and 3D modeling of critical water infrastructure for structural integrity assessment and maintenance planning.</p>
                        </div>
                    </div>
                    
                    <!-- Project 3 -->
                    <div class="project-card">
                        <div class="project-image-container">
                            <div class="image-gradient-overlay"></div>
                            <img src="/img/project/thumbnails/desaru-highway-aerial-photo-thumbnail.webp" alt="Highway Expansion Survey" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h4>26km Highway Expansion Survey</h4>
                            <div class="project-meta">
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                                        <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    Selangor
                                </span>
                                <span class="meta-item">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                        <path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Terrain Analysis
                                </span>
                            </div>
                            <p>Comprehensive topographic mapping and obstruction detection for major highway expansion project with GIS-ready deliverables.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Value Propositions - Keep as is, it's good -->
        <div class="value-propositions" data-aos="fade-up" data-aos-delay="400">
            <div class="value-header">
                <h3>Why Choose Dronify</h3>
                <p>Professional solutions tailored to your needs</p>
            </div>
            
            <div class="value-grid">
                <div class="value-card" data-aos="zoom-in" data-aos-delay="100">
                    <div class="value-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                            <path d="M9 11H3V21H9V11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M21 3H15V21H21V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h4>Proven Track Record</h4>
                    <p>500+ successful flights with perfect safety record</p>
                </div>
                
                <div class="value-card" data-aos="zoom-in" data-aos-delay="200">
                    <div class="value-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                            <path d="M12 1V7M12 17V23M4.22 4.22L8.46 8.46M15.54 15.54L19.78 19.78M1 12H7M17 12H23M4.22 19.78L8.46 15.54M15.54 8.46L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h4>Advanced Technology</h4>
                    <p>Cutting-edge solutions for precise, efficient data handling</p>
                </div>
                
                <div class="value-card" data-aos="zoom-in" data-aos-delay="300">
                    <div class="value-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                            <path d="M21 16V8C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64927 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="currentColor" stroke-width="2"/>
                            <polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke="currentColor" stroke-width="2"/>
                            <line x1="12" y1="22.08" x2="12" y2="12" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </div>
                    <h4>Complete Solutions</h4>
                    <p>From capture to CAD-ready deliverables</p>
                </div>
                
                <div class="value-card" data-aos="zoom-in" data-aos-delay="400">
                    <div class="value-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h4>Client-Focused Solutions</h4>
                    <p>Customized solutions for your specific needs</p>
                </div>
            </div>
        </div>
    </div>
</section>

	<!--================ DIGITAL WORKFLOW ================-->
	<!-- =============== WORKFLOW SECTION (RESPONSIVE) =============== -->
<section class="s-workflow" id="workflow" style="
    background: #1a1a1a;
    padding: 40px 0 20px 0;
    position: relative;
">
    <!-- Background pattern -->
    <div style="
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(69, 167, 239, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(69, 167, 239, 0.03) 0%, transparent 50%);
        pointer-events: none;
    "></div>

    <!-- Desktop Version -->
    <div class="desktop-workflow" style="position: relative; z-index: 1;">
        <!-- Section Header -->
        <div class="container">
            <div class="text-center mb-4">
            <h2 style="
                color: #fff;
                font-size: 2.2rem;
                font-weight: 700;
                margin-bottom: 15px;
                position: relative;
                padding-bottom: 8px;
                text-transform: uppercase;
                letter-spacing: 0.1em;
            " class="no-blue-line">
                How It Works
            </h2>
            
            <style>
            /* Remove all possible blue line sources with maximum specificity */
            .s-workflow .text-center.mb-4 .no-blue-line::after,
            .s-workflow .text-center .no-blue-line::after,
            .s-workflow h2.no-blue-line::after,
            h2.no-blue-line::after,
            .no-blue-line::after {
                display: none !important;
                content: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                height: 0 !important;
                width: 0 !important;
                background: transparent !important;
                background-color: transparent !important;
                border: none !important;
            }
            
            /* Additional overrides for any CSS rules that might be creating the line */
            .s-workflow .text-center h2::after,
            .s-workflow h2::after {
                display: none !important;
                content: none !important;
            }
            </style>
            <p style="
                color: #e8e8e8;
                font-size: 1.1rem;
                max-width: 700px;
                margin: 0 auto;
                line-height: 1.6;
                text-align: center;
            ">
                Transforms raw aerial data into actionable insights
            </p>
            </div>
        </div>

        <!-- Interactive Workflow -->
        <div class="container" style="padding-top: 30px;">
            <div class="row align-items-center mb-5">
                <div class="col-12">
                    <!-- Step Navigation (Modularized) -->
                    <!-- Step Navigation -->
<div style="
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 10px 0;
">
    <!-- Progress Line Segment 1: Step 1 to Step 2 -->
    <div id="progress-line-1" style="
        position: absolute;
        top: 50%;
        left: calc(16.67% + 60px + 10px);
        width: calc(33.33% - 120px - 20px);
        height: 4px;
        background: rgba(255,255,255,0.1);
        z-index: 1;
        border-radius: 4px;
        transform: translateY(-50%);
    ">
        <div id="progress-fill-1" style="
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #45a7ef 0%, #45a7ef 100%);
            border-radius: 4px;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(69, 167, 239, 0.4);
            position: relative;
        ">
        </div>
    </div>

    <!-- Progress Line Segment 2: Step 2 to Step 3 -->
    <div id="progress-line-2" style="
        position: absolute;
        top: 50%;
        left: calc(50% + 60px + 10px);
        width: calc(33.33% - 120px - 20px);
        height: 4px;
        background: rgba(255,255,255,0.1);
        z-index: 1;
        border-radius: 4px;
        transform: translateY(-50%);
    ">
        <div id="progress-fill-2" style="
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #45a7ef 0%, #45a7ef 100%);
            border-radius: 4px;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(69, 167, 239, 0.4);
            position: relative;
        ">
        </div>
    </div>

    <!-- Step 1: Capture -->
    <div class="workflow-step active" data-step="1" style="
        text-align: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 15px 10px;
        border-radius: 20px;
    ">
        <div class="step-circle" style="
            width: 120px;
            height: 120px;
            background: rgba(225, 240, 255, 0.95);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 25px rgba(69, 167, 239, 0.3), inset 0 0 0 2px #45a7ef;
            backdrop-filter: blur(10px);
        ">
            <img src="/img/index/workflow/step-capture-icon.svg" alt="Capture" style="width: 67px; height: 67px; transition: all 0.3s ease; filter: brightness(1.2);" loading="lazy" decoding="async" width="67" height="67">
        </div>
        <h4 style="
            color: #2c5282;
            font-size: 1.275rem;
            font-weight: 600;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        ">CAPTURE</h4>
    </div>

    <!-- Step 2: Process -->
    <div class="workflow-step" data-step="2" style="
        text-align: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 15px 10px;
        border-radius: 20px;
    ">
        <div class="step-circle" style="
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        ">
            <img src="/img/index/workflow/step-process-icon.svg" alt="Process" style="width: 67px; height: 67px; transition: all 0.3s ease; opacity: 0.8;" loading="lazy" decoding="async" width="67" height="67">
        </div>
        <h4 style="
            color: #e8e8e8;
            font-size: 1.275rem;
            font-weight: 600;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        ">PROCESS</h4>
    </div>

    <!-- Step 3: Deliver -->
    <div class="workflow-step" data-step="3" style="
        text-align: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 15px 10px;
        border-radius: 20px;
    ">
        <div class="step-circle" style="
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        ">
            <img src="/img/index/workflow/step-deliver-icon.svg" alt="Deliver" style="width: 67px; height: 67px; transition: all 0.3s ease; opacity: 0.8;" loading="lazy" decoding="async" width="67" height="67">
        </div>
        <h4 style="
            color: #e8e8e8;
            font-size: 1.275rem;
            font-weight: 600;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        ">DELIVER</h4>
    </div>
</div>
                </div>
            </div>

            <!-- Content Area -->
            <div class="workflow-grid" style="
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 20px !important;
                align-items: center !important;
                margin: 20px 0 0 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            ">
                <!-- Illustration -->
                <div class="workflow-illustration" style="text-align: center; padding: 10px 5px; min-height: 450px; display: flex; align-items: center; justify-content: center;">
                    <div id="step-illustration" style="
                        text-align: center;
                        padding: 10px;
                        min-height: 300px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        max-width: 650px;
                        margin: 0 auto;
                    ">
                        <!-- Step 1: Capture Illustration -->
<div class="step-content active" data-step="1" style="height: 100%; width: 100%;">
    <div style="
        width: 100%;
        height: 100%;
        border-radius: 20px;
        margin: 0;
        position: relative;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    ">
        <img src="/img/index/workflow/step-capture-illustration-optimized.webp" 
             alt="Capture Step - Drone in Action" 
             loading="lazy" 
             decoding="async" 
             width="600" 
             height="400"
             style="
                width: 100%;
                height: 100%;
                border-radius: 17px;
                transition: all 0.3s ease;
                object-fit: cover;
             ">
    </div>
</div>
                        <!-- Step 2: Process Illustration -->
<div class="step-content" data-step="2" style="display: none; height: 100%; width: 100%;">
    <div style="
        width: 100%;
        height: 100%;
        border-radius: 20px;
        margin: 0;
        position: relative;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    ">
        <img src="/img/index/workflow/step-process-illustration-optimized.webp" 
             alt="Process Step - Data Processing" 
             loading="lazy" 
             decoding="async" 
             width="600" 
             height="400"
             style="
                width: 100%;
                height: 100%;
                border-radius: 17px;
                transition: all 0.3s ease;
                object-fit: cover;
             ">
    </div>
</div>
                        <!-- Step 3: Deliver Illustration -->
<div class="step-content" data-step="3" style="display: none; height: 100%; width: 100%;">
    <div style="
        width: 100%;
        height: 100%;
        border-radius: 20px;
        margin: 0;
        position: relative;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    ">
        <img src="/img/index/workflow/step-deliver-illustration-optimized.webp" 
             alt="Deliver Step - Final Deliverables" 
             loading="lazy" 
             decoding="async" 
             width="600" 
             height="400"
             style="
                width: 100%;
                height: 100%;
                border-radius: 17px;
                transition: all 0.3s ease;
                object-fit: cover;
             ">
    </div>
</div>
                    </div>
                </div>

                <!-- Content Description -->
                <div class="workflow-description" style="
                    padding: 20px 0;
                    min-height: 450px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    <div id="step-description" style="
                        width: 100%;
                        min-height: 450px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        flex-direction: column;
                    ">
                        <!-- Step 1: Capture Content -->
<div class="step-content active" data-step="1">
    <h3 style="
        color: #45a7ef;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 15px;
    ">
        <span style="
            width: 4px;
            height: 35px;
            background: linear-gradient(180deg, #45a7ef 0%, transparent 100%);
            border-radius: 2px;
        "></span>
        Capture
    </h3>
    <p style="
        color: #e8e8e8;
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 35px;
        padding: 20px;
        background: rgba(69, 167, 239, 0.05);
        border-left: 3px solid #45a7ef;
        border-radius: 8px;
    ">
        Automated drones follow pre-planned flight routes to capture thousands of overlapping images. Each photo is geotagged with precise GPS coordinates, while ground control points serve as reference anchors for survey-grade accuracy across your entire mapping area.
    </p>
    <div style="
        display: grid;
        gap: 20px;
        margin-top: 30px;
    ">
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">01</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Automated Flight Planning</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Pre-programmed routes ensure complete coverage with adequate image overlap throughout the target mapping area
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">02</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Ground Control Points</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Strategically placed markers that anchor the entire dataset to real-world coordinates for maximum accuracy
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">03</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">RTK/GPS Technology</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Real-time kinematic positioning corrects GPS signals to achieve centimeter-level precision
                </p>
            </div>
        </div>
    </div>
</div>
                        <!-- Step 2: Process Content -->
<div class="step-content" data-step="2">
    <h3 style="
        color: #45a7ef;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 15px;
    ">
        <span style="
            width: 4px;
            height: 35px;
            background: linear-gradient(180deg, #45a7ef 0%, transparent 100%);
            border-radius: 2px;
        "></span>
        Process
    </h3>
    <p style="
        color: #e8e8e8;
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 35px;
        padding: 20px;
        background: rgba(69, 167, 239, 0.05);
        border-left: 3px solid #45a7ef;
        border-radius: 8px;
    ">
        Advanced photogrammetry software processes thousands of images using sophisticated algorithms to reconstruct precise 3D models, orthomosaics, and digital surface models with survey-grade accuracy.
    </p>
    <div style="display: grid; gap: 20px; margin-top: 30px;">
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">01</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Photogrammetric Processing</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Advanced algorithms analyze overlapping images to generate accurate 3D point clouds and models
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">02</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Quality Assurance & Validation</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Rigorous accuracy checks against control points ensure data meets survey-grade specifications
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">03</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Model Enhancement & Refinement</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Noise filtering, classification, and precision repair work to deliver cleaner, higher quality maps and models with enhanced accuracy
                </p>
            </div>
        </div>
    </div>
</div>
                        <!-- Step 3: Deliver Content -->
<div class="step-content" data-step="3">
    <h3 style="
        color: #45a7ef;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 15px;
    ">
        <span style="
            width: 4px;
            height: 35px;
            background: linear-gradient(180deg, #45a7ef 0%, transparent 100%);
            border-radius: 2px;
        "></span>
        Deliver
    </h3>
    <p style="
        color: #e8e8e8;
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 35px;
        padding: 20px;
        background: rgba(69, 167, 239, 0.05);
        border-left: 3px solid #45a7ef;
        border-radius: 8px;
    ">
        Comprehensive deliverables package includes high-resolution orthomosaics, 3D models, point clouds, and detailed reports formatted for your specific workflow requirements and CAD integration.
    </p>
    <div style="display: grid; gap: 20px; margin-top: 30px;">
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">01</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Professional Deliverables</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Comprehensive package with orthomosaics, 3D models, point clouds, and detailed project reports
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">02</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">CAD & GIS Integration</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Export formats compatible with AutoCAD, ArcGIS, and other industry-standard software platforms
                </p>
            </div>
        </div>
        <div style="
            position: relative;
            padding: 20px 20px 20px 70px;
            background: linear-gradient(135deg, rgba(69, 167, 239, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border-radius: 12px;
            border: 1px solid rgba(69, 167, 239, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;
        ">
            <div style="
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 50px;
                background: linear-gradient(180deg, rgba(69, 167, 239, 0.1) 0%, rgba(69, 167, 239, 0.05) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                font-weight: 700;
                color: #45a7ef;
                font-family: 'Inter', sans-serif;
            ">03</div>
            <div>
                <h5 style="color: #45a7ef; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.5px;">Annotation & Measurement Reports</h5>
                <p style="color: #d0d0d0; margin: 0; font-size: 0.95rem; line-height: 1.6;">
                    Custom detailed summary findings with measurements, annotations, and insights extracted from maps and 3D models
                </p>
            </div>
        </div>
    </div>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Interactive Mobile Workflow (Only shown on mobile) -->
    <!-- Enhanced Interactive Mobile Workflow -->
<div class="mobile-workflow">
    <!-- Mobile Header with Sticky Navigation -->
    <div class="mobile-workflow-header">
        <h2>How It Works</h2>
        <p>Transform aerial data into actionable intelligence</p>
    </div>
    
    <!-- Sticky Progress Bar -->
    <div class="mobile-sticky-progress" id="mobileProgressBar">
        <div class="progress-steps">
            <button class="progress-step active" data-step="1" onclick="goToStep(1)">
                <span class="step-number">1</span>
                <span class="step-name">Capture</span>
            </button>
            <div class="progress-line"></div>
            <button class="progress-step" data-step="2" onclick="goToStep(2)">
                <span class="step-number">2</span>
                <span class="step-name">Process</span>
            </button>
            <div class="progress-line"></div>
            <button class="progress-step" data-step="3" onclick="goToStep(3)">
                <span class="step-number">3</span>
                <span class="step-name">Deliver</span>
            </button>
        </div>
    </div>

    <!-- Swipeable Steps Container -->
    <div class="mobile-steps-wrapper" id="mobileStepsWrapper">
        <div class="mobile-steps-track" id="mobileStepsTrack">
            
            <!-- Step 1: Capture -->
            <div class="mobile-step-slide" data-step="1">
                <div class="step-visual">
                    <picture>
                        <source media="(max-width: 480px)" 
                                srcset="/img/index/workflow/optimized/step-capture-illustration-sm.webp">
                        <source media="(max-width: 768px)" 
                                srcset="/img/index/workflow/optimized/step-capture-illustration-md.webp">
                        <img src="/img/index/workflow/step-capture-illustration-optimized.webp" 
                             alt="Automated drone capturing aerial imagery"
                             loading="lazy">
                    </picture>
                </div>
                
                <div class="step-content">
                    <div class="step-header">
                        <span class="step-badge">STEP 01</span>
                        <h3>Capture</h3>
                    </div>
                    
                    <p class="step-intro">
                        Automated flight paths capture comprehensive aerial data with precision GPS positioning
                    </p>
                    
                    <!-- Key Points (Always Visible) -->
                    <div class="key-points">
                        <div class="key-point">
                            <span class="point-icon">🎯</span>
                            <span>Automated flight planning</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">📍</span>
                            <span>Ground control points</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">🛰️</span>
                            <span>RTK/GPS accuracy</span>
                        </div>
                    </div>
                    
                    <!-- Optional Details (Hidden by Default) -->
                    <button class="learn-more-btn" onclick="toggleDetails(this)">
                        <span>Learn more</span>
                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
                            <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                    
                    <div class="extended-details">
                        <p>Our drones follow pre-programmed routes ensuring complete coverage with optimal image overlap. Strategic ground control points anchor the dataset to real-world coordinates, while RTK positioning achieves centimeter-level precision.</p>
                    </div>
                </div>
            </div>
            
            <!-- Step 2: Process -->
            <div class="mobile-step-slide" data-step="2">
                <div class="step-visual">
                    <picture>
                        <source media="(max-width: 480px)" 
                                srcset="/img/index/workflow/optimized/step-process-illustration-sm.webp">
                        <source media="(max-width: 768px)" 
                                srcset="/img/index/workflow/optimized/step-process-illustration-md.webp">
                        <img src="/img/index/workflow/step-process-illustration-optimized.webp" 
                             alt="Advanced photogrammetry processing"
                             loading="lazy">
                    </picture>
                </div>
                
                <div class="step-content">
                    <div class="step-header">
                        <span class="step-badge">STEP 02</span>
                        <h3>Process</h3>
                    </div>
                    
                    <p class="step-intro">
                        Advanced algorithms transform raw imagery into precise 3D models and orthomosaics
                    </p>
                    
                    <!-- Key Points (Always Visible) -->
                    <div class="key-points">
                        <div class="key-point">
                            <span class="point-icon">🔬</span>
                            <span>AI-powered processing</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">🎛️</span>
                            <span>Quality validation</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">🏗️</span>
                            <span>3D reconstruction</span>
                        </div>
                    </div>
                    
                    <!-- Optional Details (Hidden by Default) -->
                    <button class="learn-more-btn" onclick="toggleDetails(this)">
                        <span>Learn more</span>
                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
                            <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                    
                    <div class="extended-details">
                        <p>Sophisticated photogrammetry algorithms analyze thousands of overlapping images to generate accurate 3D point clouds. Multi-stage validation ensures data integrity, creating detailed elevation models and orthomosaics for comprehensive site analysis.</p>
                    </div>
                </div>
            </div>
            
            <!-- Step 3: Deliver -->
            <div class="mobile-step-slide" data-step="3">
                <div class="step-visual">
                    <picture>
                        <source media="(max-width: 480px)" 
                                srcset="/img/index/workflow/optimized/step-deliver-illustration-sm.webp">
                        <source media="(max-width: 768px)" 
                                srcset="/img/index/workflow/optimized/step-deliver-illustration-md.webp">
                        <img src="/img/index/workflow/step-deliver-illustration-optimized.webp" 
                             alt="Professional deliverables package"
                             loading="lazy">
                    </picture>
                </div>
                
                <div class="step-content">
                    <div class="step-header">
                        <span class="step-badge">STEP 03</span>
                        <h3>Deliver</h3>
                    </div>
                    
                    <p class="step-intro">
                        Receive comprehensive data packages optimized for your workflow & CAD integration
                    </p>
                    
                    <!-- Key Points (Always Visible) -->
                    <div class="key-points">
                        <div class="key-point">
                            <span class="point-icon">📊</span>
                            <span>Professional deliverables</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">🔄</span>
                            <span>CAD/GIS compatible</span>
                        </div>
                        <div class="key-point">
                            <span class="point-icon">⚡</span>
                            <span>Fast turnaround</span>
                        </div>
                    </div>
                    
                    <!-- Optional Details (Hidden by Default) -->
                    <button class="learn-more-btn" onclick="toggleDetails(this)">
                        <span>Learn more</span>
                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
                            <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                    
                    <div class="extended-details">
                        <p>Complete package includes high-resolution orthomosaics, 3D models, point clouds, and detailed reports. All data delivered in industry-standard formats compatible with popular CAD and GIS software, ensuring seamless integration into your existing workflows.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Navigation Arrows -->
        <button class="step-nav step-nav-prev" onclick="previousStep()" aria-label="Previous step">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2"/>
            </svg>
        </button>
        <button class="step-nav step-nav-next" onclick="nextStep()" aria-label="Next step">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2"/>
            </svg>
        </button>
    </div>
    
    <!-- Dynamic Step Summary -->
    <div class="mobile-workflow-summary">
        <div class="step-summary active" data-step="1">
            <h3>On-site Data Capture</h3>
            <p>Specialized drones follow pre-planned routes to capture thousands of overlapping aerial images with GPS precision and ground control points for survey-grade accuracy.</p>
        </div>
        <div class="step-summary" data-step="2">
            <h3>Post-Processing</h3>
            <p>Captured images are transformed into a detailed 3D point cloud - creating a digital twin that serves as the foundation for accurate maps, models, and measurements.</p>
        </div>
        <div class="step-summary" data-step="3">
            <h3>Deliverables Generation</h3>
            <p>Receive comprehensive data packages including orthomosaics, 3D models, and reports in CAD/GIS compatible formats with fast turnaround.</p>
        </div>
    </div>
</div>
</section>

<!-- Include External JavaScript -->
<script src="/js/sections/workflow.js"></script>
<script src="/js/sections/workflow-mobile-interactive.js"></script>

<!-- Include External CSS -->
<link rel="stylesheet" href="/css/sections/workflow.css">
<link rel="stylesheet" href="/css/sections/workflow-mobile-interactive.css">

	<!--================ DRONE SOLUTIONS ================-->
	<section class="s-drone-solutions">
    <!-- Aerial terrain view background -->
    <div style="
        position: absolute;
        top: calc(-20% + 200px);
        left: -20%;
        right: -20%;
        bottom: 30%;
        background-image: 
            linear-gradient(90deg, rgba(69, 167, 239, 0.11) 1px, transparent 1px),
            linear-gradient(rgba(69, 167, 239, 0.11) 1px, transparent 1px),
            linear-gradient(45deg, rgba(69, 167, 239, 0.07) 1px, transparent 1px),
            radial-gradient(circle at 30% 30%, rgba(69, 167, 239, 0.09) 3px, transparent 3px),
            radial-gradient(circle at 70% 70%, rgba(69, 167, 239, 0.09) 2px, transparent 2px),
            radial-gradient(circle at 50% 20%, rgba(69, 167, 239, 0.07) 4px, transparent 4px);
        background-size: 60px 60px, 60px 60px, 120px 120px, 300px 300px, 250px 250px, 400px 400px;
        transform: rotateX(45deg) rotateY(-10deg) translateZ(-50px);
        transform-origin: center center;
        pointer-events: none;
        opacity: 0.77;
    "></div>
    
    <!-- Additional terrain details layer -->
    <div style="
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        bottom: 30%;
        background-image: 
            linear-gradient(135deg, rgba(69, 167, 239, 0.045) 2px, transparent 2px),
            linear-gradient(-45deg, rgba(69, 167, 239, 0.045) 1px, transparent 1px);
        background-size: 100px 100px, 80px 80px;
        transform: rotateX(30deg) rotateZ(5deg);
        transform-origin: center bottom;
        pointer-events: none;
        opacity: 0.55;
    "></div>

    <div class="container">
        <div class="s-info-cover">
            <h2>6 GAME-CHANGING BENEFITS</h2>
            <p class="slogan">See why industry leaders in construction, surveying, real estate, and beyond are making drone solutions their competitive advantage.</p>
            
            <div class="row justify-content-center">
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="100">
                        <div class="reason-icon-wrapper" style="background: #ff6b6b; box-shadow: 0 8px 25px #ff6b6b33;">
                            <img src="/img/index/solutions/reason-time-efficiency.svg" alt="Time Efficiency Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">TIME &amp; COST EFFICIENCY</h3>
                        <p class="reason-description">Get more done with less resources and time.</p>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="200">
                        <div class="reason-icon-wrapper" style="background: #4ecdc4; box-shadow: 0 8px 25px #4ecdc433;">
                            <img src="/img/index/solutions/reason-productivity.svg" alt="Productivity Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">PRODUCTIVITY BOOST</h3>
                        <p class="reason-description">Faster, more efficient operations with automated data collection and real-time insights</p>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="300">
                        <div class="reason-icon-wrapper" style="background: #45b7d1; box-shadow: 0 8px 25px #45b7d133;">
                            <img src="/img/index/solutions/reason-documentation.svg" alt="Documentation Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">AUDIT-PROOF RECORDS</h3>
                        <p class="reason-description">Generate comprehensive, accurate records for compliance and future reference</p>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="400">
                        <div class="reason-icon-wrapper" style="background: #f39c12; box-shadow: 0 8px 25px #f39c1233;">
                            <img src="/img/index/solutions/reason-communication.svg" alt="Communication Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">CLEAR COMMUNICATION</h3>
                        <p class="reason-description">Clear visual data ensures everyone is on the same page</p>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="500">
                        <div class="reason-icon-wrapper" style="background: #9b59b6; box-shadow: 0 8px 25px #9b59b633;">
                            <img src="/img/index/solutions/reason-competitive-edge.svg" alt="Competitive Edge Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">COMPETITIVE EDGE</h3>
                        <p class="reason-description">Stay ahead with cutting-edge technology and superior deliverables</p>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-lg-4 mb-4 reason-card-wrapper">
                    <div class="block-icon reason-card" data-aos="zoom-in" data-aos-delay="600">
                        <div class="reason-icon-wrapper" style="background: #2ecc71; box-shadow: 0 8px 25px #2ecc7133;">
                            <img src="/img/index/solutions/reason-safety.svg" alt="Safety Icon" class="reason-icon" width="35" height="35" loading="lazy" decoding="async">
                        </div>
                        <h3 class="reason-title">PRIORITIZE SAFETY</h3>
                        <p class="reason-description">Eliminate human risk in hazardous inspections and hard-to-reach areas</p>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section> 
</main>
<!--================== MAIN CONTENT END ==================-->



<!--======================= FOOTER =======================-->
<footer style="padding-bottom: 40px;">
    <div class="container">
        <div class="row footer-main-row">
            <div class="col-12 col-sm-6 col-lg-3 footer-info">
                <h5>Our Mission</h5>
                <p>We aim to make drones accessible to everyone, empowering businesses and individuals to take their work to new heights.</p>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="row align-items-center">
                <div class="col-12 col-md-6">
                    <a href="/" class="logo footer-logo">
                        				<img src="/img/common/header/dronify-logo.svg" alt="logo" width="40" height="40">
                        <span class="logo-text">DRONIFY</span>
                    </a>
                </div>
                <div class="col-12 col-md-6">
                    <ul class="soc-link">
                        <li><a target="_blank" href="https://www.facebook.com/dronifyMY/" aria-label="Facebook" style="width: 45px; height: 45px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" style="display: block;">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a></li>
                        <li><a target="_blank" href="https://www.instagram.com/dronify.my/" aria-label="Instagram" style="width: 45px; height: 45px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" style="display: block;">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a></li>
                        <li><a target="_blank" href="https://www.youtube.com/watch?v=BCSxrk_zhRw&list=PL7iPotGaX4E5IcN3o_vl8oE-I6p0rTJcy&index=8" aria-label="YouTube" style="width: 45px; height: 45px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" style="display: block;">
                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                            </svg>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>Dronify © 2025 All Rights Reserved.</p>
        </div>
    </div>
</footer>
<!--===================== FOOTER END =====================--> 
<!-- =============== VENDOR SCRIPTS (Load immediately, not deferred) =============== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- jQuery Fallback -->
<script>
// Check if jQuery loaded, if not load from alternative CDN
if (typeof jQuery === 'undefined') {
    document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"><\/script>');
}
</script>

<script>
// Final fallback check and ensure jQuery is available
(function() {
    if (typeof jQuery === 'undefined') {
        console.warn('jQuery failed to load from CDN. Creating minimal fallback.');
        // Create minimal jQuery-like object for graceful degradation
        window.jQuery = window.$ = function(selector) {
            return {
                ready: function(fn) { 
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', fn);
                    } else {
                        fn();
                    }
                    return this;
                },
                on: function() { return this; },
                addClass: function() { return this; },
                removeClass: function() { return this; },
                toggleClass: function() { return this; },
                slideUp: function() { return this; },
                slideDown: function() { return this; },
                attr: function() { return ''; },
                val: function() { return ''; },
                each: function() { return this; }
            };
        };
    } else {
        // Ensure jQuery is available globally
        window.$ = window.jQuery = jQuery;
    }
})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script src="/js/vendors/slick.min.js" defer></script>
<script src="/js/scripts.js" defer></script>

<!-- =============== PAGE SPECIFIC SCRIPTS =============== -->
<!-- Home Page -->

<script src="/js/homepage.js" defer></script>
<!-- Mobile Technical Display Section -->
<script src="/js/sections/technical-display-mobile.js" defer></script>
<!-- Fallback scripts for when jQuery fails -->
<script src="/js/utilities/carousel-standalone.js" defer></script>
<script src="/js/utilities/counter-standalone.js" defer></script>


<!-- Service Page -->


<!-- Project Page -->


<!-- Estimator Page -->


<!-- Mobile Carousel Navigation (for pages that need it) -->
 

<!--======================= TO TOP =======================-->
<a class="to-top" href="#home" aria-label="Back to top of page" title="Back to top">
    <i class="fa fa-chevron-up" aria-hidden="true"></i>
    <span>
        				<img src="/img/common/footer/icon-tab-1.svg" alt="Back to top" loading="lazy" decoding="async" width="24" height="24">
    </span>
</a>
<!--===================== TO TOP END =====================-->

<!--======================= WHATSAPP FLOAT =======================-->
<a href="https://wa.me/60143387131?text=Hi, I'm interested in your drone services" 
   class="whatsapp-float" 
   target="_blank" 
   aria-label="Contact us on WhatsApp"
   title="Tell us about your project!">
  <svg class="whatsapp-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.893 3.384"/>
  </svg>
  <span class="whatsapp-text">Chat with Us</span>
</a>
<!--===================== WHATSAPP FLOAT END =====================-->

<!--======================= SERVICE WORKER =======================-->
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => console.log('SW registered'))
      .catch(registrationError => console.log('SW registration failed'));
  });
}
</script>
<!--===================== SERVICE WORKER END =====================-->
</body>
</html> 