{"id":64599,"date":"2026-08-04T03:27:01","date_gmt":"2026-08-04T03:27:01","guid":{"rendered":"https:\/\/capytech.com\/?page_id=64599"},"modified":"2026-10-27T11:01:12","modified_gmt":"2026-10-27T11:01:12","slug":"aviation-logistics-maritime","status":"publish","type":"page","link":"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/","title":{"rendered":"aviation-logistics-maritime"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"64599\" class=\"elementor elementor-64599\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a232d7a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"a232d7a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e51fda6\" data-id=\"e51fda6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81419e4 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"81419e4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <!-- BYPASS CORS \/ HOTLINK PROTECTION FOR LOCAL DEVELOPMENT -->\r\n    <meta name=\"referrer\" content=\"no-referrer\">\r\n    \r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@1.0.29\/bundled\/lenis.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/*\r\n            FIX NOTES v2 (see chat for full explanation):\r\n            1. @import kept from v1 as the reliable font-loading path.\r\n            2. IMPORTANT LESSON: !important on a parent (body) does NOT win against a\r\n               DIRECT declaration on a child element, no matter how much !important you\r\n               stack on the parent \u2014 inheritance always loses to a direct declaration.\r\n               The theme has its own rule directly targeting h1\/h2\/h3 (confirmed via\r\n               inspector: \"Mulish Regular\"), so .title-massive\/.title-section\/etc. now\r\n               all get their OWN explicit font-family declaration instead of relying on\r\n               inheriting it from body.\r\n            3. SPECIFICITY LESSON: even a direct !important declaration can still lose\r\n               to the theme's rule if the theme's selector is more specific (e.g. Kit\r\n               CSS scoped as `.elementor-widget-container h1` beats a bare `.title-\r\n               massive` class, even though both are !important \u2014 specificity is\r\n               compared before source order). Every component selector below is now\r\n               anchored to `#smooth-content`, the wrapper ID already in this page's own\r\n               markup, which outranks basically any class-only combination a theme kit\r\n               would use.\r\n            4. .word-inner's color is still intentionally left WITHOUT !important and\r\n               WITHOUT the #smooth-content anchor bump for the same reason as before \u2014\r\n               GSAP sets it via inline style for the scrub-reveal animation, and forcing\r\n               it here would freeze that animation.\r\n        *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');\r\n\r\n        \/* ==========================================================================\r\n           DESIGN SYSTEM: ARCHITECTURAL \/ INDUSTRIAL MINIMALISM\r\n           ========================================================================== *\/\r\n        :root {\r\n            --bg: #ffffff;\r\n            --surface: #f4f4f5;\r\n            --text-main: #09090b;       \r\n            --text-muted: #71717a;      \r\n            --line: #e4e4e7;          \r\n            --accent: #000000;          \r\n            \r\n            --pad-edge: 4vw;\r\n            --space-section: 15vh;\r\n            \r\n            --font-sans: 'Inter', sans-serif;\r\n            --font-mono: 'JetBrains Mono', monospace;\r\n        }\r\n\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        \r\n        \/* The WordPress theme sets html { font-size: 14px; } sitewide, which shrinks\r\n           every rem-based size on this page to 87.5% of what it was designed at\r\n           (rem is always relative to the root html font-size, not the nearest\r\n           parent). Restoring it to the browser default of 16px here fixes every\r\n           rem value on this page in one place, instead of hand-multiplying dozens\r\n           of individual font-size\/spacing declarations throughout the stylesheet. *\/\r\n        html { font-size: 16px !important; }\r\n\r\n        \/* Lenis Smooth Scroll CSS *\/\r\n        html.lenis { height: auto; }\r\n        .lenis.lenis-smooth { scroll-behavior: auto !important; }\r\n        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }\r\n        .lenis.lenis-stopped { overflow: hidden; }\r\n\r\n        body {\r\n            font-family: var(--font-sans) !important; \r\n            background-color: var(--bg); \r\n            color: var(--text-main) !important;\r\n            -webkit-font-smoothing: antialiased; \r\n            overflow-x: hidden; \r\n            line-height: 1.4 !important;\r\n            font-weight: 400 !important;\r\n        }\r\n\r\n        \/* Every rule below is anchored to #smooth-content (the wrapper ID already in\r\n           this page's markup) so its specificity beats a theme\/Kit rule that targets\r\n           a bare tag or a single class, even when both sides use !important. *\/\r\n\r\n        \/* Typography & Utilities *\/\r\n        #smooth-content .mono { font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }\r\n        #smooth-content .eyebrow { font-family: var(--font-sans) !important; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--text-muted) !important; display: block; margin-bottom: 2rem !important; }\r\n        #smooth-content .title-massive { font-family: var(--font-sans) !important; color: var(--text-main) !important; font-size: clamp(3rem, 7vw, 7.5rem) !important; font-weight: 400 !important; letter-spacing: -0.04em !important; line-height: 0.9 !important; text-transform: uppercase !important; }\r\n        #smooth-content .title-section { font-family: var(--font-sans) !important; color: var(--text-main) !important; font-size: clamp(2rem, 4vw, 4.5rem) !important; font-weight: 400 !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; }\r\n        \r\n        .grid-line-x { width: 100%; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(0); }\r\n        .grid-line-y { width: 1px; height: 100%; background: var(--line); transform-origin: top; transform: scaleY(0); position: absolute; }\r\n\r\n        .text-split { overflow: hidden; display: block; }\r\n        .text-split-inner { display: block; transform: translateY(110%); will-change: transform; }\r\n        #smooth-content .text-split-inner { font-family: var(--font-sans) !important; }\r\n\r\n        \/* ==========================================================================\r\n           ACT I: THE TERMINAL HERO\r\n           ========================================================================== *\/\r\n        .hero {\r\n            position: relative;\r\n            min-height: 100vh;\r\n            padding: var(--pad-edge);\r\n            display: grid;\r\n            grid-template-rows: 1fr auto;\r\n            border-bottom: 1px solid var(--line);\r\n        }\r\n\r\n        .hero-top {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 4vw;\r\n            align-items: end;\r\n            padding-bottom: 6vh;\r\n        }\r\n\r\n        \/* VIDEO OPTIMIZATION CSS *\/\r\n        .hero-media {\r\n            position: absolute;\r\n            top: var(--pad-edge); right: var(--pad-edge);\r\n            width: 45vw; height: 60vh;\r\n            background: var(--surface);\r\n            overflow: hidden;\r\n            z-index: 0;\r\n            opacity: 0; \/* Hide initially to prevent FOUC glitch *\/\r\n            visibility: hidden;\r\n        }\r\n        \r\n        .hero-media video {\r\n            width: 100%; \r\n            height: 100%; \r\n            object-fit: cover;\r\n            filter: grayscale(100%) contrast(1.1) brightness(0.85); \r\n            \/* Start scaled slightly to give parallax room without showing borders *\/\r\n            transform: scale(1.15) translateZ(0); \r\n            will-change: transform;\r\n            \/* Force Hardware Acceleration (GPU) *\/\r\n            backface-visibility: hidden; \r\n            -webkit-backface-visibility: hidden;\r\n        }\r\n\r\n        .hero-content {\r\n            position: relative; z-index: 2;\r\n            grid-column: 1 \/ -1;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: flex-end;\r\n            padding-top: 4vh;\r\n            border-top: 1px solid var(--line);\r\n        }\r\n\r\n        #smooth-content .hero-sub { font-family: var(--font-sans) !important; font-size: clamp(1rem, 1.5vw, 1.25rem) !important; color: var(--text-muted) !important; max-width: 400px; line-height: 1.5 !important; }\r\n        \r\n        .hero-btn {\r\n            display: inline-flex; align-items: center; justify-content: center;\r\n            padding: 1.25rem 2.5rem; background: var(--accent); \r\n            text-decoration: none;\r\n            transition: background 0.4s ease;\r\n        }\r\n        #smooth-content .hero-btn { color: var(--bg) !important; font-size: 0.8rem !important; font-weight: 700 !important; }\r\n        .hero-btn:hover { background: var(--text-muted); }\r\n\r\n        \/* ==========================================================================\r\n           ACT II: SCRUB \r\n           ========================================================================== *\/\r\n        .scrub-section { padding: var(--space-section) var(--pad-edge); border-bottom: 1px solid var(--line); }\r\n        .scrub-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 8vw; }\r\n        \r\n        #smooth-content .scrub-text {\r\n            font-family: var(--font-sans) !important;\r\n            font-size: clamp(1.5rem, 3vw, 3.25rem) !important; font-weight: 300 !important; \r\n            letter-spacing: -0.03em !important; line-height: 1.2 !important; color: #d4d4d8 !important;\r\n        }\r\n        .word-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }\r\n        \/* NOTE: .word-inner's color is intentionally left WITHOUT !important and\r\n           WITHOUT the #smooth-content specificity bump \u2014 GSAP animates it via inline\r\n           style for the scrub-reveal effect (see script), and beating that inline\r\n           style would freeze the color instead of letting it animate. *\/\r\n        .word-inner { display: inline-block; will-change: transform, color; color: #d4d4d8; font-family: var(--font-sans); }\r\n\r\n        .telemetry { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 3rem; justify-content: space-between;}\r\n        .telemetry-stat { padding: 2rem 0; border-bottom: 1px solid var(--line); }\r\n        .telemetry-stat:first-child { padding-top: 0; }\r\n        .telemetry-stat:last-child { border-bottom: none; padding-bottom: 0; }\r\n        #smooth-content .t-num { font-size: 3rem !important; font-weight: 300 !important; letter-spacing: -0.05em !important; line-height: 1 !important; display: block; margin-bottom: 0.5rem; }\r\n        #smooth-content .t-lbl { font-size: 0.75rem !important; color: var(--text-muted) !important; }\r\n\r\n        \/* ==========================================================================\r\n           ACT II.5: THE NETWORK (Minimal Client Section)\r\n           ========================================================================== *\/\r\n        .clients-section { padding: var(--space-section) var(--pad-edge); border-bottom: 1px solid var(--line); }\r\n        \r\n        .client-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            border-top: 1px solid var(--line);\r\n            border-left: 1px solid var(--line);\r\n            margin-top: 4rem;\r\n        }\r\n        \r\n        .client-card {\r\n            border-right: 1px solid var(--line);\r\n            border-bottom: 1px solid var(--line);\r\n            padding: 3.5rem 2.5rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            background: transparent;\r\n            transition: background 0.4s ease;\r\n        }\r\n        .client-card:hover { background: var(--surface); }\r\n        \r\n        #smooth-content .client-meta { font-size: 0.65rem !important; color: var(--text-muted) !important; margin-bottom: 4rem; }\r\n        .client-card .client-logo { \r\n            height: 150px !important; \r\n            width: auto !important; \r\n            max-width: none !important;\r\n            object-fit: contain; \r\n            object-position: center; \r\n            \/* filter: grayscale(100%) opacity(0.4);  *\/\r\n            margin-bottom: 1.5rem; \r\n            transition: filter 0.4s ease, opacity 0.4s ease; \r\n        }\r\n        .client-card:hover .client-logo { filter: grayscale(100%) opacity(1); }\r\n        #smooth-content .client-desc { font-family: var(--font-sans) !important; font-size: 0.95rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; }\r\n\r\n        \/* ==========================================================================\r\n           ACT III: THE INDEX (Dark Mode Inversion Reveal)\r\n           ========================================================================== *\/\r\n           .index-section { \r\n            padding: var(--space-section) var(--pad-edge); \r\n            background: var(--surface); \r\n            border-bottom: 1px solid var(--line); \r\n            position: relative; \r\n            overflow: hidden;\r\n            \/* Smoothly transitions the whole section to dark mode *\/\r\n            transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n        \r\n        \/* The tinted dark mode state triggered via JS *\/\r\n        .index-section.is-active {\r\n            background-color: #0f172a; \/* Deep industrial slate tint *\/\r\n        }\r\n\r\n        .index-bg-container {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .index-bg {\r\n            position: absolute;\r\n            inset: 0;\r\n            background-size: cover;\r\n            background-position: center;\r\n            opacity: 0;\r\n            \/* Lets the natural image blend into the deep slate background *\/\r\n            mix-blend-mode: luminosity; \r\n            filter: brightness(0.7) contrast(1.2);\r\n            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 4s ease-out;\r\n            transform: scale(1.05); \r\n            will-change: transform, opacity;\r\n        }\r\n        \r\n        .index-bg.active {\r\n            opacity: 0.35; \/* Subtle watermark effect *\/\r\n            transform: scale(1); \/* Cinematic scale settle *\/\r\n        }\r\n\r\n        .index-content {\r\n            position: relative;\r\n            z-index: 2; \r\n        }\r\n\r\n        \/* Base Grid & Line Styling *\/\r\n        .index-list { \r\n            border-top: 1px solid var(--line); \r\n            margin-top: 4rem; \r\n            transition: border-color 0.5s ease; \r\n        }\r\n        \r\n        .index-row {\r\n            display: grid; grid-template-columns: 1fr 3fr 4fr; gap: 2vw;\r\n            padding: 3rem 0; align-items: start;\r\n            border-bottom: 1px solid var(--line);\r\n            transition: opacity 0.4s ease, border-color 0.5s ease;\r\n            cursor: crosshair; \/* Industrial\/Terminal aesthetic *\/\r\n        }\r\n        \r\n        \/* Dim un-hovered rows to bring focus *\/\r\n        .index-list:hover .index-row:not(:hover) { opacity: 0.25; }\r\n\r\n        .grid-line-x { background: var(--line); transition: background-color 0.5s ease; }\r\n\r\n        \/* Typography Base & Transitions *\/\r\n        .title-section, .eyebrow { transition: color 0.5s ease; }\r\n        \r\n        #smooth-content .index-title { \r\n            font-family: var(--font-sans) !important;\r\n            font-size: clamp(1.5rem, 2.5vw, 2.5rem) !important; \r\n            font-weight: 400 !important; \r\n            letter-spacing: -0.02em !important; \r\n            line-height: 1.1 !important; \r\n            margin-top: -0.25rem; \r\n            color: var(--text-main) !important;\r\n            transition: color 0.5s ease;\r\n        }\r\n        \r\n        #smooth-content .index-desc { \r\n            font-family: var(--font-sans) !important;\r\n            font-size: 1.1rem !important; \r\n            color: var(--text-muted) !important; \r\n            line-height: 1.6 !important; \r\n            font-weight: 300 !important; \r\n            transition: color 0.5s ease;\r\n        }\r\n        \r\n        #smooth-content .index-id { \r\n            font-size: 0.8rem !important; \r\n            color: var(--text-muted) !important; \r\n            font-weight: 700 !important; \r\n            transition: color 0.5s ease;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           INVERTED STATES (Triggered on hover via .is-active \u2014 JS toggles a class,\r\n           not inline style, so !important here is safe and doesn't fight the JS)\r\n           ========================================================================== *\/\r\n        \r\n        \/* Invert Typography *\/\r\n        #smooth-content .index-section.is-active .title-section,\r\n        #smooth-content .index-section.is-active .index-title { \r\n            color: #ffffff !important; \r\n        }\r\n        \r\n        #smooth-content .index-section.is-active .index-desc,\r\n        #smooth-content .index-section.is-active .eyebrow,\r\n        #smooth-content .index-section.is-active .index-id { \r\n            color: rgba(255, 255, 255, 0.7) !important; \r\n        }\r\n\r\n        \/* Invert Borders & Grid Lines *\/\r\n        .index-section.is-active .index-list { \r\n            border-top-color: rgba(255, 255, 255, 0.15); \r\n        }\r\n        \r\n        .index-section.is-active .index-row { \r\n            border-bottom-color: rgba(255, 255, 255, 0.15); \r\n        }\r\n        \r\n        .index-section.is-active .grid-line-x { \r\n            background-color: rgba(255, 255, 255, 0.15); \r\n        }\r\n\r\n        \/* ==========================================================================\r\n           RESPONSIVE\r\n           ========================================================================== *\/\r\n        @media (max-width: 1024px) {\r\n            .index-row { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; cursor: default; }\r\n            .index-list:hover .index-row:not(:hover) { opacity: 1; }\r\n            .index-bg-container { display: none; }\r\n        }\r\n        \r\n        \/* ==========================================================================\r\n           ACT IV: STRATEGIC VERIFICATION (FAQ)\r\n           ========================================================================== *\/\r\n        .faq-section { padding: var(--space-section) var(--pad-edge); border-bottom: 1px solid var(--line); background: var(--bg); }\r\n        \r\n        .faq-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 2.5fr;\r\n            gap: 6vw;\r\n            align-items: start;\r\n        }\r\n\r\n        .faq-list { border-top: 1px solid var(--line); }\r\n        \r\n        .faq-item { \r\n            border-bottom: 1px solid var(--line); \r\n            cursor: pointer; \r\n        }\r\n        \r\n        .faq-q { \r\n            padding: 2.5rem 0; \r\n            display: flex; \r\n            justify-content: space-between; \r\n            align-items: center; \r\n        }\r\n        \r\n        #smooth-content .faq-q-text { \r\n            font-family: var(--font-sans) !important;\r\n            font-size: clamp(1.25rem, 2vw, 1.5rem) !important; \r\n            font-weight: 400 !important; \r\n            letter-spacing: -0.02em !important; \r\n            color: var(--text-main) !important; \r\n            transition: opacity 0.3s ease; \r\n        }\r\n        \r\n        #smooth-content .faq-icon { \r\n            font-family: var(--font-mono) !important; \r\n            font-size: 1.5rem !important; \r\n            font-weight: 300 !important; \r\n            color: var(--text-muted) !important; \r\n            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; \r\n            flex-shrink: 0;\r\n            margin-left: 2rem;\r\n            line-height: 1 !important;\r\n        }\r\n\r\n        .faq-a { \r\n            display: grid; \r\n            grid-template-rows: 0fr; \r\n            transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1); \r\n        }\r\n        \r\n        .faq-a-inner { overflow: hidden; }\r\n        \r\n        #smooth-content .faq-a-text { \r\n            font-family: var(--font-sans) !important;\r\n            padding-bottom: 2.5rem; \r\n            font-size: 1.1rem !important; \r\n            color: var(--text-muted) !important; \r\n            line-height: 1.6 !important; \r\n            max-width: 85%; \r\n        }\r\n\r\n        .faq-item:hover .faq-q-text { opacity: 0.6; }\r\n        .faq-item.active .faq-q-text { opacity: 1; }\r\n        #smooth-content .faq-item.active .faq-icon { transform: rotate(45deg); color: var(--text-main) !important; }\r\n        .faq-item.active .faq-a { grid-template-rows: 1fr; }\r\n\r\n        @media (max-width: 768px) {\r\n            .faq-container { flex-direction: column; gap: 3rem; }\r\n            .faq-left, .faq-right { width: 100%; position: static; }\r\n            .faq-item { padding: 1.5rem 0; }\r\n            .faq-answer-inner p { padding-right: 0; font-size: 1.05rem !important; }\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ACT V: THE ARCHITECTURAL FORM (CF7 INTEGRATED)\r\n           ========================================================================== *\/\r\n        .contact-section { padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }\r\n        \r\n        .contact-media { position: relative; background: var(--text-main); overflow: hidden; }\r\n        .contact-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: grayscale(100%); }\r\n        #smooth-content .contact-meta { position: absolute; bottom: var(--pad-edge); left: var(--pad-edge); color: var(--bg) !important; }\r\n        \r\n        .contact-form-wrapper { padding: var(--space-section) var(--pad-edge); background: var(--surface); }\r\n        \r\n        .brutal-input { margin-bottom: 3rem; position: relative; }\r\n        #smooth-content .brutal-input label { font-family: var(--font-sans) !important; display: block; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--text-muted) !important; margin-bottom: 1rem; text-transform: uppercase !important; letter-spacing: 0.1em !important; }\r\n        \r\n        \/* CF7 Form Field Armor *\/\r\n        #smooth-content .brutal-input input.wpcf7-form-control, \r\n        #smooth-content .brutal-input textarea.wpcf7-form-control {\r\n            width: 100% !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--text-main) !important;\r\n            padding: 0 0 1rem 0 !important;\r\n            border-radius: 0 !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;\r\n            font-family: var(--font-sans) !important; font-size: 1.25rem !important; color: var(--text-main) !important;\r\n            transition: border-color 0.3s ease !important;\r\n        }\r\n        #smooth-content .brutal-input input.wpcf7-form-control:focus, \r\n        #smooth-content .brutal-input textarea.wpcf7-form-control:focus { outline: none !important; border-bottom-color: var(--accent) !important; box-shadow: none !important;}\r\n        #smooth-content .brutal-input input::placeholder, \r\n        #smooth-content .brutal-input textarea::placeholder { color: var(--text-muted) !important; opacity: 0.5 !important; }\r\n        \r\n        \/* CF7 Submit Button Armor *\/\r\n        #smooth-content input.wpcf7-submit.btn-submit {\r\n            width: 100% !important; background: var(--text-main) !important; color: var(--bg) !important;\r\n            padding: 1.5rem !important; border: none !important; cursor: pointer !important;\r\n            font-family: var(--font-mono) !important; font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important;\r\n            transition: opacity 0.3s ease !important;\r\n            border-radius: 0 !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;\r\n        }\r\n        #smooth-content input.wpcf7-submit.btn-submit:hover { opacity: 0.8 !important; }\r\n\r\n        \/* CF7 Terminal-style Response Box *\/\r\n        #smooth-content form.wpcf7-form .wpcf7-response-output,\r\n        #smooth-content .wpcf7 form .wpcf7-response-output {\r\n            font-family: var(--font-mono) !important;\r\n            font-size: 0.8rem !important;\r\n            font-weight: 600 !important;\r\n            text-transform: uppercase !important;\r\n            letter-spacing: 0.05em !important;\r\n            border: 1px solid var(--text-main) !important;\r\n            border-radius: 0 !important;\r\n            margin-top: 1.5rem !important;\r\n            padding: 1rem !important;\r\n            text-align: center !important;\r\n            background: transparent !important;\r\n            color: var(--text-main) !important;\r\n        }\r\n        \r\n        \/* Default spinner placement *\/\r\n        #smooth-content .contact-form-wrapper .wpcf7-spinner { margin-top: 1rem !important; display: block; margin-left: auto; margin-right: auto; }\r\n\r\n        #smooth-content .contact-media img {\r\n            margin: 0 !important;\r\n        }\r\n\r\n        \/* Responsive Flow *\/\r\n        @media (max-width: 1024px) {\r\n            .hero-media { width: 100%; position: relative; top: 0; right: 0; height: 40vh; margin-bottom: 2rem; }\r\n            .hero-content { flex-direction: column; align-items: flex-start; gap: 2rem; }\r\n            .hero-top { display: flex; flex-direction: column; }\r\n            .scrub-grid { grid-template-columns: 1fr; }\r\n            .telemetry { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2rem; flex-direction: row; flex-wrap: wrap; gap: 2rem; }\r\n            .telemetry-stat { border-bottom: none; padding: 0; border-right: 1px solid var(--line); padding-right: 2rem; }\r\n            .telemetry-stat:last-child { border-right: none; }\r\n            .client-grid { grid-template-columns: repeat(2, 1fr); }\r\n            .index-row { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }\r\n            .index-list:hover .index-row:not(:hover) { opacity: 1; }\r\n            .faq-grid { grid-template-columns: 1fr; gap: 3rem; }\r\n            .faq-a-text { max-width: 100%; }\r\n            .contact-section { grid-template-columns: 1fr; }\r\n            .contact-media { height: 40vh; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            :root { --pad-edge: 6vw; --space-section: 10vh; }\r\n            #smooth-content .title-massive { font-size: clamp(3rem, 12vw, 4rem) !important; }\r\n            .hero-btn { width: 100%; text-align: center; }\r\n            .telemetry { flex-direction: column; border-top: none; }\r\n            .telemetry-stat { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 1.5rem; }\r\n            #smooth-content .scrub-text { color: var(--text-main) !important; } \r\n            .client-grid { grid-template-columns: 1fr; border-left: none; border-top: none; margin-top: 2rem; }\r\n            .client-card { border-right: none; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin-top: -1px; padding: 2.5rem 0; }\r\n            .client-card:hover { background: transparent; }\r\n            .client-meta { margin-bottom: 2rem; }\r\n            .faq-q { padding: 2rem 0; }\r\n            .faq-a-text { padding-bottom: 2rem; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div id=\"smooth-wrapper\">\r\n        <div id=\"smooth-content\">\r\n\r\n            <!-- ACT I: THE TERMINAL HERO -->\r\n            <section class=\"hero\">\r\n                <div class=\"hero-top\">\r\n                    <div>\r\n                        <span class=\"eyebrow mono gsap-load\">Sector Specific<\/span>\r\n                        <h1 class=\"title-massive\">\r\n                            <span class=\"text-split\"><span class=\"text-split-inner\">Aviation.<\/span><\/span>\r\n                            <span class=\"text-split\"><span class=\"text-split-inner\">Logistics.<\/span><\/span>\r\n                            <span class=\"text-split\"><span class=\"text-split-inner\">Maritime.<\/span><\/span>\r\n                        <\/h1>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"hero-media gsap-media\">\r\n                    <!-- Added preload, poster, and decoupled GSAP classes -->\r\n                    <video autoplay loop muted playsinline preload=\"auto\" poster=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/plane.webp\" id=\"hero-vid\">\r\n                        <source src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/aviation-comp.mp4\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n\r\n                <div class=\"hero-content\">\r\n                    <p class=\"hero-sub gsap-fade\">Training that scales across every terminal, vessel, and time zone, built for environments with zero margin for error.<\/p>\r\n                    <div class=\"gsap-fade\">\r\n                        <a href=\"#contact\" class=\"hero-btn mono\">Book a Demo<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <!-- ACT II: SCRUB -->\r\n            <section class=\"scrub-section\" id=\"scrub-trigger\">\r\n                <div class=\"scrub-grid\">\r\n                    <div>\r\n                        <span class=\"eyebrow mono\">Operational Reality<\/span>\r\n                        <p class=\"scrub-text\" id=\"scrub-target\">\r\n                            The Gulf is a global transit hub. Aviation, logistics, and maritime organisations here face a training challenge most industries don't: a workforce distributed across terminals, vessels, and sites, speaking many languages, that must be trained consistently, compliantly, and rapidly.\r\n                        <\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"telemetry\">\r\n                        <div class=\"telemetry-stat gsap-fade-up\">\r\n                            <span class=\"t-num mono\">13+<\/span>\r\n                            <span class=\"t-lbl mono\">Years Regionally<\/span>\r\n                        <\/div>\r\n                        <div class=\"telemetry-stat gsap-fade-up\">\r\n                            <span class=\"t-num mono\">4<span style=\"font-size: 1.5rem;\">D<\/span><\/span>\r\n                            <span class=\"t-lbl mono\">FastTrack Delivery<\/span>\r\n                        <\/div>\r\n                        <div class=\"telemetry-stat gsap-fade-up\">\r\n                            <span class=\"t-num mono\">50K<\/span>\r\n                            <span class=\"t-lbl mono\">Active Learners<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <!-- ACT II.5: THE NETWORK (Minimal Client Section) -->\r\n            <section class=\"clients-section\">\r\n                <div class=\"gsap-fade-up\">\r\n                    <span class=\"eyebrow mono\">Validated Network<\/span>\r\n                    <h2 class=\"title-section\">Trusted by regional leaders.<\/h2>\r\n                <\/div>\r\n\r\n                <div class=\"client-grid\">\r\n                    <div class=\"client-card gsap-fade-up\">\r\n                        <div class=\"client-meta mono\">Aviation \/ DXB<\/div>\r\n                        <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg\" alt=\"Dubai Airports\" class=\"client-logo\">\r\n                        <p class=\"client-desc\">Bespoke operational training delivered across a highly distributed, multilingual terminal workforce.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"client-card gsap-fade-up\">\r\n                        <div class=\"client-meta mono\">Logistics \/ GLOBAL<\/div>\r\n                        <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/dpworld-1.svg\" alt=\"DP World\" class=\"client-logo\">\r\n                        <p class=\"client-desc\">Supporting one of the world's largest port operators with scalable, trackable compliance infrastructure.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"client-card gsap-fade-up\">\r\n                        <div class=\"client-meta mono\">Maritime \/ UAE<\/div>\r\n                        <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2025\/12\/POMaritime_Logo.png\" alt=\"P&O Maritime\" class=\"client-logo\">\r\n                        <p class=\"client-desc\">Digital learning frameworks mapped directly to strict marine operational requirements.<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"client-card gsap-fade-up\">\r\n                        <div class=\"client-meta mono\">Tourism \/ KSA<\/div>\r\n                        <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2025\/12\/Cruise-Saudi.png\" alt=\"Cruise Saudi\" class=\"client-logo\">\r\n                        <p class=\"client-desc\">Establishing foundational training architecture for Saudi Arabia's rapidly expanding national cruise line.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <!-- ACT III: THE INDEX (Challenges) -->\r\n            <section class=\"index-section\">\r\n                <!-- NEW: Background Container -->\r\n                <div class=\"index-bg-container\">\r\n                    <div class=\"index-bg\" id=\"bg-01\" style=\"background-image: url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/reachout.webp');\"><\/div>\r\n                    <div class=\"index-bg\" id=\"bg-02\" style=\"background-image: url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/deadline.webp');\"><\/div>\r\n                    <div class=\"index-bg\" id=\"bg-03\" style=\"background-image: url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/prepare.webp');\"><\/div>\r\n                    <div class=\"index-bg\" id=\"bg-04\" style=\"background-image: url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/multilingual.webp');\"><\/div>\r\n                    <div class=\"index-bg\" id=\"bg-05\" style=\"background-image: url('https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/audit.webp');\"><\/div>\r\n                <\/div>\r\n\r\n                <!-- NEW: Content Wrapper to keep text above the images -->\r\n                <div class=\"index-content\">\r\n                    <div class=\"gsap-fade-up\">\r\n                        <!-- <span class=\"eyebrow mono\">Infrastructure Specs<\/span> -->\r\n                        <h2 class=\"title-section\">The Challenges We Solve<\/h2>\r\n                    <\/div>\r\n\r\n                    <div class=\"index-list\">\r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                        <!-- Added data-target -->\r\n                        <div class=\"index-row\" data-target=\"bg-01\">\r\n                            <div class=\"index-id mono\">01<\/div>\r\n                            <h3 class=\"index-title\">Reaching a distributed workforce<\/h3>\r\n                            <p class=\"index-desc\">Deliver consistent training to every learner across airports, ports, and vessels, without travel cost, downtime, or scheduling conflict.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                        <div class=\"index-row\" data-target=\"bg-02\">\r\n                            <div class=\"index-id mono\">02<\/div>\r\n                            <h3 class=\"index-title\">Deadlines that don't move<\/h3>\r\n                            <p class=\"index-desc\">GCAA, Port Authority, and HSE rules carry fixed deadlines. Our FastTrack service delivers SCORM-compliant modules in as little as 4 days.<\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                        <div class=\"index-row\" data-target=\"bg-03\">\r\n                            <div class=\"index-id mono\">03<\/div>\r\n                            <h3 class=\"index-title\">High turnover & contractors<\/h3>\r\n                            <p class=\"index-desc\">Transit environments manage constant new starters. A scalable digital induction delivers consistent onboarding instantly, before they arrive on site.<\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                        <div class=\"index-row\" data-target=\"bg-04\">\r\n                            <div class=\"index-id mono\">04<\/div>\r\n                            <h3 class=\"index-title\">A multilingual workforce<\/h3>\r\n                            <p class=\"index-desc\">Global hubs employ every nationality. We build the exact same interactive module in multiple languages from a single source file.<\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                        <div class=\"index-row\" data-target=\"bg-05\">\r\n                            <div class=\"index-id mono\">05<\/div>\r\n                            <h3 class=\"index-title\">Audit-ready evidence<\/h3>\r\n                            <p class=\"index-desc\">Every module produces strict SCORM completion data. When the next authority inspection arrives, your training compliance records are mathematically perfect.<\/p>\r\n                        <\/div>\r\n                        <div class=\"grid-line-x line-anim\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <!-- ACT IV: STRATEGIC VERIFICATION (FAQ) -->\r\n            <section class=\"faq-section\">\r\n                <div class=\"faq-grid\">\r\n                    <div class=\"gsap-fade-up\">\r\n                        <span class=\"eyebrow mono\">Verification<\/span>\r\n                        <h2 class=\"title-section\">Operational FAQ<\/h2>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-list gsap-fade-up\">\r\n                        <div class=\"faq-item\">\r\n                            <div class=\"faq-q\">\r\n                                <span class=\"faq-q-text\">Can you build training for a multilingual site workforce?<\/span>\r\n                                <span class=\"faq-icon\">+<\/span>\r\n                            <\/div>\r\n                            <div class=\"faq-a\">\r\n                                <div class=\"faq-a-inner\">\r\n                                    <p class=\"faq-a-text\">Yes: we deploy the exact same interactive module in Arabic, English, Hindi, Tagalog, and other languages natively from a single production process.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"faq-item\">\r\n                            <div class=\"faq-q\">\r\n                                <span class=\"faq-q-text\">Do modules work on mobile for workers in the field?<\/span>\r\n                                <span class=\"faq-icon\">+<\/span>\r\n                            <\/div>\r\n                            <div class=\"faq-a\">\r\n                                <div class=\"faq-a-inner\">\r\n                                    <p class=\"faq-a-text\">Yes. Every framework we build is inherently responsive, allowing operatives and crew to complete compliance tracking on any handheld device.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"faq-item\">\r\n                            <div class=\"faq-q\">\r\n                                <span class=\"faq-q-text\">Can training support our ICV and nationalisation commitments?<\/span>\r\n                                <span class=\"faq-icon\">+<\/span>\r\n                            <\/div>\r\n                            <div class=\"faq-a\">\r\n                                <div class=\"faq-a-inner\">\r\n                                    <p class=\"faq-a-text\">Absolutely. We build structured, role-specific competency pathways for national employees, providing the exact reporting data required for ICV and localisation audits.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"faq-item\">\r\n                            <div class=\"faq-q\">\r\n                                <span class=\"faq-q-text\">Can you reflect our specific HSE procedures?<\/span>\r\n                                <span class=\"faq-icon\">+<\/span>\r\n                            <\/div>\r\n                            <div class=\"faq-a\">\r\n                                <div class=\"faq-a-inner\">\r\n                                    <p class=\"faq-a-text\">Yes. We do not use generic off-the-shelf safety libraries. Every module is built entirely around your actual plant, unique hazards, and exact permit-to-work protocols.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"faq-item\">\r\n                            <div class=\"faq-q\">\r\n                                <span class=\"faq-q-text\">How quickly can a new compliance module be deployed?<\/span>\r\n                                <span class=\"faq-icon\">+<\/span>\r\n                            <\/div>\r\n                            <div class=\"faq-a\">\r\n                                <div class=\"faq-a-inner\">\r\n                                    <p class=\"faq-a-text\">Through our FastTrack service, we can translate raw procedure documents into a fully interactive, SCORM-compliant, audited module in as little as 4 working days.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\n<section class=\"cxg-guides\"><style>.cxg-guides{background:#f8fafc;padding:4rem 1.5rem;font-family:inherit}.cxg-guides .cxg-wrap{max-width:1100px;margin:0 auto}.cxg-guides h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;color:#0f172a}.cxg-guides .cxg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.cxg-guides .cxg-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;text-decoration:none;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:border-color .2s}.cxg-guides .cxg-card:hover,.cxg-guides .cxg-card:focus{border-color:#2563eb}.cxg-guides .cxg-card span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb;margin-bottom:.5rem}.cxg-guides .cxg-card b{display:block;color:#0f172a;font-size:1.05rem;line-height:1.4;margin-bottom:.8rem}.cxg-guides .cxg-card i{font-style:normal;color:#2563eb;font-weight:700}@media (max-width:860px){.cxg-guides .cxg-grid{grid-template-columns:1fr}.cxg-guides{padding:3rem 1rem}}<\/style><div class=\"cxg-wrap\"><h2>Guides for aviation and logistics teams<\/h2><div class=\"cxg-grid\"><a class=\"cxg-card\" href=\"\/en\/blog\/why-interactive-scenarios-trump-static-text-for-policy-comprehension\/\"><span>Guide<\/span><b>Why Interactive Scenarios Trump Static Text for Policy Comprehension<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/4-days-to-launch-how-rapid-e-learning-can-revolutionize-your-ld\/\"><span>Guide<\/span><b>4 Days to Launch: How Rapid E-learning Can Revolutionise Your L&D<\/b><i>Read the guide<\/i><\/a><a class=\"cxg-card\" href=\"\/en\/blog\/zero-disruption-how-100-online-iosh-training-guarantees-productivity-in-dubai\/\"><span>Guide<\/span><b>Zero Disruption: How 100% Online IOSH Training Protects Productivity in Dubai<\/b><i>Read the guide<\/i><\/a><\/div><\/div><\/section>\n\r\n\r\n            <!-- ACT V: ARCHITECTURAL FORM -->\r\n            <section class=\"contact-section\" id=\"contact\">\r\n                <div class=\"contact-form-wrapper\">\r\n                    <h2 class=\"title-section\" style=\"margin-bottom: 4rem;\">Initiate deployment.<\/h2>\r\n                    \r\n                    <!-- PASTE YOUR CF7 SHORTCODE HERE TO REPLACE THIS -->\r\n                    \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f64990-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"64990\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/pages\/64599#wpcf7-f64990-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"64990\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f64990-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<div class=\"brutal-input gsap-fade-up\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Enter full name\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"brutal-input gsap-fade-up\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Work email address\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"brutal-input gsap-fade-up\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"2\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Define operational requirements\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<div style=\"display: none;\">\n\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"utm_source\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_source\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_medium\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_medium\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_campaign\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_campaign\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_term\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_term\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"utm_content\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"utm_content\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"gsap-fade-up\">\n\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner btn-submit\" type=\"submit\" value=\"BOOK MY FREE DEMO\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\r\n\r\n                <\/div>\r\n                \r\n                <div class=\"contact-media\">\r\n                    <img decoding=\"async\" src=\"https:\/\/capytech.com\/wp-content\/uploads\/2026\/08\/plane.webp\" alt=\"Aviation Protocol\">\r\n                    <div class=\"contact-meta mono\">\r\n                        <div>CAPYTECH<\/div>\r\n                        <div style=\"color: var(--text-muted); font-size: 0.7rem; margin-top: 0.5rem;\">Aviation \u2022 Maritime \u2022 Logistics<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            \/\/ Lenis Smooth Scroll\r\n            const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true });\r\n            lenis.on('scroll', ScrollTrigger.update);\r\n            gsap.ticker.add((time) => { lenis.raf(time * 1000); });\r\n            gsap.ticker.lagSmoothing(0);\r\n\r\n            \/\/ Text Splitter Utility\r\n            const splitText = (selector) => {\r\n                const elements = document.querySelectorAll(selector);\r\n                elements.forEach(el => {\r\n                    const words = el.innerText.split(' ');\r\n                    el.innerHTML = '';\r\n                    words.forEach(word => {\r\n                        const wrapper = document.createElement('span'); wrapper.className = 'word-wrap';\r\n                        const inner = document.createElement('span'); inner.className = 'word-inner'; inner.innerHTML = word + '&nbsp;';\r\n                        wrapper.appendChild(inner); el.appendChild(wrapper);\r\n                    });\r\n                });\r\n            };\r\n\r\n            document.fonts.ready.then(() => {\r\n                \/\/ Initialize Video Wrapper state\r\n                gsap.set('.hero-media', { visibility: \"visible\" });\r\n\r\n                \/\/ ACT I: Decoupled Load Sequence\r\n                const loadTl = gsap.timeline();\r\n                \r\n                loadTl.fromTo('.text-split-inner', \r\n                        { y: '110%' }, \r\n                        { y: '0%', duration: 1.2, stagger: 0.1, ease: \"power4.out\" }\r\n                      )\r\n                      .fromTo('.gsap-load', { opacity: 0 }, { opacity: 1, duration: 0.8 }, \"-=1\")\r\n                      \/\/ Fade in the WRAPPER, not the video tag itself to prevent transform overlap\r\n                      .fromTo('.gsap-media', { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 1.5, ease: \"power3.out\" }, \"-=1.2\")\r\n                      .fromTo('.gsap-fade', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 1, stagger: 0.1, ease: \"power3.out\" }, \"-=1.2\");\r\n\r\n                \/\/ Hero Parallax - Explicitly targets the video tag inside the wrapper\r\n                gsap.to('.hero-media video', {\r\n                    yPercent: 15, ease: \"none\",\r\n                    scrollTrigger: { trigger: \".hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n                });\r\n\r\n                \/\/ Standard Fade Ups\r\n                gsap.utils.toArray('.gsap-fade-up').forEach(el => {\r\n                    gsap.fromTo(el, \r\n                        { opacity: 0, y: 30 }, \r\n                        { opacity: 1, y: 0, duration: 1, ease: \"power3.out\", scrollTrigger: { trigger: el, start: \"top 85%\" } }\r\n                    );\r\n                });\r\n\r\n                \/\/ Line Drawing Animations\r\n                gsap.utils.toArray('.line-anim').forEach(line => {\r\n                    gsap.to(line, {\r\n                        scaleX: 1, duration: 1.5, ease: \"power3.inOut\",\r\n                        scrollTrigger: { trigger: line, start: \"top 95%\" }\r\n                    });\r\n                });\r\n\r\n                \/\/ ACT II: Text Scrub Effect (Desktop Only)\r\n                const scrubTarget = document.getElementById('scrub-target');\r\n                if(scrubTarget && window.innerWidth > 768) {\r\n                    splitText('#scrub-target');\r\n                    gsap.to(scrubTarget.querySelectorAll('.word-inner'), {\r\n                        color: '#09090b', stagger: 0.05, ease: 'none',\r\n                        scrollTrigger: { trigger: '#scrub-trigger', start: 'top 70%', end: 'bottom 40%', scrub: 1.2 }\r\n                    });\r\n                }\r\n                \r\n                \/\/ ACT IV: FAQ Accordion Logic\r\n                const faqItems = document.querySelectorAll('.faq-item');\r\n                faqItems.forEach(item => {\r\n                    item.addEventListener('click', () => {\r\n                        faqItems.forEach(other => { \r\n                            if (other !== item) other.classList.remove('active'); \r\n                        });\r\n                        item.classList.toggle('active');\r\n                        setTimeout(() => { ScrollTrigger.refresh(); }, 400); \r\n                    });\r\n                });\r\n\r\n                \/\/ ACT III: Index Background Reveal & Dark Mode Logic\r\n                const indexSection = document.querySelector('.index-section');\r\n                const indexRows = document.querySelectorAll('.index-row');\r\n                const indexBgs = document.querySelectorAll('.index-bg');\r\n\r\n                if (window.innerWidth > 1024 && indexSection) {\r\n                    indexRows.forEach(row => {\r\n                        \/\/ When mouse enters a row\r\n                        row.addEventListener('mouseenter', () => {\r\n                            const targetId = row.getAttribute('data-target');\r\n                            \r\n                            \/\/ 1. Invert the whole section to Dark Mode\r\n                            indexSection.classList.add('is-active');\r\n\r\n                            \/\/ 2. Reveal the corresponding image\r\n                            indexBgs.forEach(bg => {\r\n                                if (bg.id === targetId) {\r\n                                    bg.classList.add('active');\r\n                                } else {\r\n                                    bg.classList.remove('active');\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        \/\/ When mouse leaves a row\r\n                        row.addEventListener('mouseleave', () => {\r\n                            \/\/ 1. Revert section to Light Mode\r\n                            indexSection.classList.remove('is-active');\r\n                            \r\n                            \/\/ 2. Hide all images\r\n                            indexBgs.forEach(bg => {\r\n                                bg.classList.remove('active');\r\n                            });\r\n                        });\r\n                    });\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Can you build training for a multilingual site workforce?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes: we deploy the exact same interactive module in Arabic, English, Hindi, Tagalog, and other languages natively from a single production process.\"}},{\"@type\":\"Question\",\"name\":\"Do modules work on mobile for workers in the field?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Every framework we build is inherently responsive, allowing operatives and crew to complete compliance tracking on any handheld device.\"}},{\"@type\":\"Question\",\"name\":\"Can training support our ICV and nationalisation commitments?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Absolutely. We build structured, role-specific competency pathways for national employees, providing the exact reporting data required for ICV and localisation audits.\"}},{\"@type\":\"Question\",\"name\":\"Can you reflect our specific HSE procedures?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. We do not use generic off-the-shelf safety libraries. Every module is built entirely around your actual plant, unique hazards, and exact permit-to-work protocols.\"}},{\"@type\":\"Question\",\"name\":\"How quickly can a new compliance module be deployed?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Through our FastTrack service, we can translate raw procedure documents into a fully interactive, SCORM-compliant, audited module in as little as 4 working days.\"}}]}<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sector Specific Aviation. Logistics. Maritime. Training that scales across every terminal, vessel, and time zone, built for environments with zero margin for error. Book a Demo Operational Reality The Gulf is a global transit hub. Aviation, logistics, and maritime organisations here face a training challenge most industries don&#8217;t: a workforce distributed across terminals, vessels, and sites, speaking many languages, that &#8230; <\/p>\n<div><a href=\"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-64599","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.1 (Yoast SEO v24.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aviation, Logistics and Maritime E-Learning, GCC | Capytech<\/title>\n<meta name=\"description\" content=\"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aviation, Logistics and Maritime E-Learning, GCC | Capytech\" \/>\n<meta property=\"og:description\" content=\"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/\" \/>\n<meta property=\"og:site_name\" content=\"Capytech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/capytech\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-27T11:01:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capytech.com\/aviation-logistics-maritime\/\",\"url\":\"https:\/\/capytech.com\/aviation-logistics-maritime\/\",\"name\":\"Aviation, Logistics and Maritime E-Learning, GCC | Capytech\",\"isPartOf\":{\"@id\":\"https:\/\/capytech.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg\",\"datePublished\":\"2026-08-04T03:27:01+00:00\",\"dateModified\":\"2026-10-27T11:01:12+00:00\",\"description\":\"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capytech.com\/aviation-logistics-maritime\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capytech.com\/en\/#website\",\"url\":\"https:\/\/capytech.com\/en\/\",\"name\":\"Capytech\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/capytech.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capytech.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/capytech.com\/en\/#organization\",\"name\":\"Capytech\",\"url\":\"https:\/\/capytech.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"contentUrl\":\"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png\",\"width\":2443,\"height\":629,\"caption\":\"Capytech\"},\"image\":{\"@id\":\"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/capytech\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aviation, Logistics and Maritime E-Learning, GCC | Capytech","description":"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/","og_locale":"en_US","og_type":"article","og_title":"Aviation, Logistics and Maritime E-Learning, GCC | Capytech","og_description":"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.","og_url":"https:\/\/capytech.com\/en\/aviation-logistics-maritime\/","og_site_name":"Capytech","article_publisher":"https:\/\/www.facebook.com\/capytech","article_modified_time":"2026-10-27T11:01:12+00:00","og_image":[{"url":"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capytech.com\/aviation-logistics-maritime\/","url":"https:\/\/capytech.com\/aviation-logistics-maritime\/","name":"Aviation, Logistics and Maritime E-Learning, GCC | Capytech","isPartOf":{"@id":"https:\/\/capytech.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage"},"image":{"@id":"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage"},"thumbnailUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg","datePublished":"2026-08-04T03:27:01+00:00","dateModified":"2026-10-27T11:01:12+00:00","description":"Compliance and operational e-learning for GCC airports, airlines, ports and logistics teams, built for shift workers, contractors and many languages.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capytech.com\/aviation-logistics-maritime\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/aviation-logistics-maritime\/#primaryimage","url":"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2024\/05\/Dubai_Airports.svg"},{"@type":"WebSite","@id":"https:\/\/capytech.com\/en\/#website","url":"https:\/\/capytech.com\/en\/","name":"Capytech","description":"","publisher":{"@id":"https:\/\/capytech.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capytech.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/capytech.com\/en\/#organization","name":"Capytech","url":"https:\/\/capytech.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","contentUrl":"https:\/\/capytech.com\/wp-content\/uploads\/2021\/10\/CapytechLogo_V2_2020.png","width":2443,"height":629,"caption":"Capytech"},"image":{"@id":"https:\/\/capytech.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/capytech"]}]}},"_links":{"self":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/comments?post=64599"}],"version-history":[{"count":77,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64599\/revisions"}],"predecessor-version":[{"id":65689,"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/pages\/64599\/revisions\/65689"}],"wp:attachment":[{"href":"https:\/\/capytech.com\/en\/wp-json\/wp\/v2\/media?parent=64599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}