{"id":295,"date":"2026-07-30T17:52:40","date_gmt":"2026-07-30T17:52:40","guid":{"rendered":"https:\/\/demowebdesign.live\/Aderemi\/?page_id=295"},"modified":"2026-08-05T17:41:22","modified_gmt":"2026-08-05T17:41:22","slug":"contact","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"295\" class=\"elementor elementor-295\">\n\t\t\t\t<div class=\"elementor-element elementor-element-724a40c e-flex e-con-boxed e-con e-parent\" data-id=\"724a40c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61ee26b elementor-widget elementor-widget-html\" data-id=\"61ee26b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        :root {\r\n            --navy: #15202F;\r\n            --navy-deep: #0D1520;\r\n            --gold: #D4AF37;\r\n            --bronze: #CD7F32;\r\n            --white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* ========================================\r\n           HEADER\r\n        ======================================== *\/\r\n        .aderemi-header {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 111px;\r\n            z-index: 9999;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        \/* Glass effect on scroll *\/\r\n        .aderemi-header.scrolled {\r\n            background: rgba(13, 21, 32, 0.92);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border-bottom: 1px solid rgba(212, 175, 55, 0.1);\r\n            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        .aderemi-header-inner {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 4%;\r\n        }\r\n\r\n        \/* --- Logo --- *\/\r\n       .aderemi-logo {\r\n    display: flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n    z-index: 100;\r\n}\r\n\r\n.aderemi-logo-img {\r\n    display: block;\r\n    width: 130px; \/* Adjust as needed *\/\r\n    max-width: 100%;\r\n    height: auto;\r\n    transition: transform 0.35s ease, opacity 0.35s ease;\r\n}\r\n\r\n.aderemi-logo:hover .aderemi-logo-img {\r\n    transform: scale(1.04);\r\n    opacity: 0.9;\r\n}\r\n\r\n        \/* --- Desktop Nav --- *\/\r\n        .aderemi-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .aderemi-nav-link {\r\n            position: relative;\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 400;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2.5px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            text-decoration: none;\r\n            padding: 0.6rem 1.3rem;\r\n            transition: color 0.4s ease;\r\n            opacity: 0;\r\n            animation: fadeSlideDown 0.6s ease forwards;\r\n        }\r\n\r\n        .aderemi-nav-link:nth-child(1) { animation-delay: 0.4s; }\r\n        .aderemi-nav-link:nth-child(3) { animation-delay: 0.5s; }\r\n        .aderemi-nav-link:nth-child(5) { animation-delay: 0.6s; }\r\n        .aderemi-nav-link:nth-child(7) { animation-delay: 0.7s; }\r\n\r\n        .aderemi-nav-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 4px;\r\n            left: 50%;\r\n            transform: translateX(-50%) scaleX(0);\r\n            width: 20px;\r\n            height: 1px;\r\n            background: var(--gold);\r\n            transition: transform 0.4s ease;\r\n        }\r\n\r\n        .aderemi-nav-link:hover {\r\n            color: var(--white);\r\n        }\r\n\r\n        .aderemi-nav-link:hover::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        .aderemi-nav-link.active {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-nav-link.active::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        .aderemi-nav-dot {\r\n            width: 3px;\r\n            height: 3px;\r\n            border-radius: 50%;\r\n            background: rgba(212, 175, 55, 0.25);\r\n            opacity: 0;\r\n            animation: fadeIn 0.5s ease forwards;\r\n            animation-delay: 0.5s;\r\n        }\r\n\r\n        \/* --- CTA Button --- *\/\r\n        .aderemi-cta {\r\n            margin-left: 1.5rem;\r\n            padding: 0.7rem 1.8rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.7rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: var(--white);\r\n            text-decoration: none;\r\n            border: 1px solid rgba(212, 175, 55, 0.4);\r\n            background: transparent;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.5s ease;\r\n            opacity: 0;\r\n            animation: fadeSlideDown 0.6s ease forwards;\r\n            animation-delay: 0.9s;\r\n        }\r\n\r\n        .aderemi-cta::before {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 0;\r\n            background: var(--gold);\r\n            transition: height 0.5s ease;\r\n            z-index: 0;\r\n        }\r\n\r\n        .aderemi-cta span {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .aderemi-cta:hover::before {\r\n            height: 100%;\r\n        }\r\n\r\n        .aderemi-cta:hover {\r\n            color: var(--navy);\r\n            border-color: var(--gold);\r\n            box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);\r\n        }\r\n\r\n        \/* --- Mobile Hamburger --- *\/\r\n        .aderemi-burger {\r\n            display: none;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            width: 44px;\r\n            height: 44px;\r\n            background: none;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            cursor: pointer;\r\n            transition: border-color 0.3s;\r\n        }\r\n\r\n        .aderemi-burger:hover {\r\n            border-color: var(--gold);\r\n        }\r\n\r\n        .aderemi-burger-line {\r\n            display: block;\r\n            width: 20px;\r\n            height: 1.5px;\r\n            background: var(--white);\r\n            transition: all 0.4s ease;\r\n            transform-origin: center;\r\n        }\r\n\r\n        .aderemi-burger-line + .aderemi-burger-line {\r\n            margin-top: 5px;\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(1) {\r\n            transform: translateY(6.5px) rotate(45deg);\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(2) {\r\n            opacity: 0;\r\n            transform: scaleX(0);\r\n        }\r\n\r\n        .aderemi-burger.open .aderemi-burger-line:nth-child(3) {\r\n            transform: translateY(-6.5px) rotate(-45deg);\r\n        }\r\n\r\n        \/* --- Mobile Drawer --- *\/\r\n        .aderemi-drawer-overlay {\r\n            position: fixed;\r\n            inset: 0;\r\n            background: rgba(0, 0, 0, 0.6);\r\n            z-index: 9998;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: opacity 0.5s ease;\r\n        }\r\n\r\n        .aderemi-drawer-overlay.open {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n\r\n        .aderemi-drawer {\r\n            position: fixed;\r\n            top: 0;\r\n            right: 0;\r\n            width: 100%;\r\n            max-width: 420px;\r\n            height: 100vh;\r\n            background: rgba(13, 21, 32, 0.97);\r\n            backdrop-filter: blur(30px);\r\n            -webkit-backdrop-filter: blur(30px);\r\n            z-index: 9998;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 4rem 2rem;\r\n            transform: translateX(100%);\r\n            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            border-left: 1px solid rgba(212, 175, 55, 0.08);\r\n        }\r\n\r\n        .aderemi-drawer.open {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        .aderemi-drawer-link {\r\n            display: block;\r\n            font-family: var(--font-heading);\r\n            font-size: 2.5rem;\r\n            font-weight: 400;\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            padding: 0.8rem 0;\r\n            text-align: center;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-link::after {\r\n            content: '';\r\n            display: block;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--gold);\r\n            margin: 0.3rem auto 0;\r\n            transition: width 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-link:hover {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-drawer-link:hover::after {\r\n            width: 40px;\r\n        }\r\n\r\n        .aderemi-drawer-link.active {\r\n            color: var(--gold);\r\n        }\r\n\r\n        .aderemi-drawer-cta {\r\n            margin-top: 2.5rem;\r\n            padding: 1rem 3rem;\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            color: var(--navy);\r\n            background: var(--gold);\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .aderemi-drawer-cta:hover {\r\n            box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .aderemi-drawer-footer {\r\n            margin-top: 3rem;\r\n            text-align: center;\r\n            font-family: var(--font-heading);\r\n            font-size: 1.2rem;\r\n            color: rgba(212, 175, 55, 0.4);\r\n            transform: rotate(-3deg);\r\n        }\r\n\r\n        \/* ========================================\r\n           ANIMATIONS\r\n        ======================================== *\/\r\n        @keyframes fadeSlideLeft {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateX(-30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateX(0);\r\n            }\r\n        }\r\n\r\n        @keyframes fadeSlideDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-15px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; }\r\n            to { opacity: 1; }\r\n        }\r\n\r\n        \/* ========================================\r\n           RESPONSIVE\r\n        ======================================== *\/\r\n        @media (max-width: 900px) {\r\n            .aderemi-nav,\r\n            .aderemi-nav-dot,\r\n            .aderemi-cta {\r\n                display: none !important;\r\n            }\r\n\r\n            .aderemi-burger {\r\n                display: flex;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .aderemi-logo-name {\r\n                font-size: 1.1rem;\r\n            }\r\n\r\n            .aderemi-logo-tagline {\r\n                font-size: 0.5rem;\r\n                letter-spacing: 2px;\r\n            }\r\n\r\n            .aderemi-drawer-link {\r\n                font-size: 2rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n\r\n    <!-- ==================== HEADER ==================== -->\r\n    <header class=\"aderemi-header\" id=\"aderemiHeader\">\r\n        <div class=\"aderemi-header-inner\">\r\n\r\n            <!-- Logo -->\r\n           <a href=\"#\" class=\"aderemi-logo\">\r\n    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/Aderemi-Logo-White.png\" alt=\"Aderemi Author Logo\" class=\"aderemi-logo-img\">\r\n<\/a>\r\n\r\n            <!-- Desktop Nav -->\r\n            <nav class=\"aderemi-nav\">\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"aderemi-nav-link active\">Home<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"aderemi-nav-link\">About<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"aderemi-nav-link\">Books<\/a>\r\n                <div class=\"aderemi-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"aderemi-nav-link\">Contact<\/a>\r\n                <a href=\"#buy\" class=\"aderemi-cta\"><span>Buy the Book<\/span><\/a>\r\n            <\/nav>\r\n\r\n            <!-- Mobile Burger -->\r\n            <button class=\"aderemi-burger\" id=\"aderemiBurger\" aria-label=\"Open menu\">\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n                <span class=\"aderemi-burger-line\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Mobile Drawer Overlay -->\r\n    <div class=\"aderemi-drawer-overlay\" id=\"aderemiOverlay\"><\/div>\r\n\r\n    <!-- Mobile Drawer -->\r\n    <nav class=\"aderemi-drawer\" id=\"aderemiDrawer\">\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"aderemi-drawer-link active\">Home<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"aderemi-drawer-link\">About<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"aderemi-drawer-link\">Books<\/a>\r\n        <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"aderemi-drawer-link\">Contact<\/a>\r\n        <a href=\"#buy\" class=\"aderemi-drawer-cta\">Buy the Book<\/a>\r\n        <div class=\"aderemi-drawer-footer\">\r\n            every story matters\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <script>\r\n        \/* --- Scroll Effect --- *\/\r\n        (function() {\r\n            const header = document.getElementById('aderemiHeader');\r\n            let ticking = false;\r\n\r\n            function updateHeader() {\r\n                if (window.scrollY > 50) {\r\n                    header.classList.add('scrolled');\r\n                } else {\r\n                    header.classList.remove('scrolled');\r\n                }\r\n                ticking = false;\r\n            }\r\n\r\n            window.addEventListener('scroll', function() {\r\n                if (!ticking) {\r\n                    window.requestAnimationFrame(updateHeader);\r\n                    ticking = true;\r\n                }\r\n            });\r\n        })();\r\n\r\n        \/* --- Mobile Drawer --- *\/\r\n        (function() {\r\n            const burger = document.getElementById('aderemiBurger');\r\n            const drawer = document.getElementById('aderemiDrawer');\r\n            const overlay = document.getElementById('aderemiOverlay');\r\n\r\n            function toggleDrawer() {\r\n                burger.classList.toggle('open');\r\n                drawer.classList.toggle('open');\r\n                overlay.classList.toggle('open');\r\n                document.body.style.overflow = drawer.classList.contains('open') ? 'hidden' : '';\r\n            }\r\n\r\n            burger.addEventListener('click', toggleDrawer);\r\n            overlay.addEventListener('click', toggleDrawer);\r\n\r\n            document.querySelectorAll('.aderemi-drawer-link, .aderemi-drawer-cta').forEach(function(link) {\r\n                link.addEventListener('click', function() {\r\n                    if (drawer.classList.contains('open')) toggleDrawer();\r\n                });\r\n            });\r\n        })();\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b1846c e-con-full e-flex e-con e-parent\" data-id=\"5b1846c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d7e7f5 elementor-widget elementor-widget-html\" data-id=\"3d7e7f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- GSAP Libraries -->\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\r\n<style>\r\n    \/* CSS Reset & Variables *\/\r\n    :root {\r\n        --color-navy: #15202F;\r\n        --color-ivory: #F8F6F2;\r\n        --color-gold: #D4AF37;\r\n        --color-bronze: #CD7F32;\r\n        --color-bronze-glow: rgba(205, 127, 50, 0.4);\r\n        --color-white: #ffffff;\r\n        --font-heading: 'Cormorant Garamond', serif;\r\n        --font-body: 'Inter', sans-serif;\r\n        --font-handwriting: 'La Belle Aurore', cursive;\r\n    }\r\n\r\n    * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    body {\r\n        font-family: var(--font-body);\r\n        background-color: var(--color-navy);\r\n        color: var(--color-white);\r\n        overflow-x: hidden;\r\n        scroll-behavior: smooth;\r\n        cursor: none; \/* Custom cursor *\/\r\n    }\r\n\r\n    \/* Custom Cursor *\/\r\n    .cursor {\r\n        width: 15px;\r\n        height: 15px;\r\n        background: var(--color-gold);\r\n        border-radius: 50%;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        pointer-events: none;\r\n        z-index: 99999;\r\n        transition: transform 0.2s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\r\n        transform: translate(-50%, -50%);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);\r\n    }\r\n    .cursor svg {\r\n        width: 20px;\r\n        height: 20px;\r\n        fill: var(--color-navy);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        transform: rotate(-15deg);\r\n    }\r\n    .cursor.hovering {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: rgba(212, 175, 55, 0.95);\r\n        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);\r\n        border: none;\r\n    }\r\n    .cursor.hovering svg {\r\n        opacity: 1;\r\n    }\r\n\r\n    \/* Utility Classes *\/\r\n    .text-handwriting {\r\n        font-family: var(--font-handwriting);\r\n        font-size: 2rem;\r\n        color: var(--color-gold);\r\n        transform: rotate(-5deg);\r\n    }\r\n\r\n    \/* ================= SECTION 1: HERO ================= *\/\r\n    .hero {\r\n        position: relative;\r\n        width: 100vw;\r\n        padding-top: 220px;\r\n        padding-bottom: 220px;\r\n        display: flex;\r\n        align-items: center;\r\n        overflow: hidden;\r\n        background-color: var(--color-navy);\r\n    }\r\n\r\n    \/* Background Layers *\/\r\n    .hero-bg-media {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 1;\r\n    }\r\n    .hero-bg-media video, \r\n    .hero-bg-media img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        transition: opacity 1.5s ease-in-out;\r\n    }\r\n    .hero-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: linear-gradient(135deg, rgba(21, 32, 47, 0.95) 0%, rgba(21, 32, 47, 0.7) 50%, rgba(21, 32, 47, 0.85) 100%);\r\n        z-index: 2;\r\n    }\r\n\r\n    \/* Map Coordinates & Decorative *\/\r\n    .map-coordinates {\r\n        position: absolute;\r\n        top: 10%;\r\n        right: 5%;\r\n        font-family: monospace;\r\n        color: rgba(255, 255, 255, 0.15);\r\n        font-size: 0.8rem;\r\n        z-index: 3;\r\n        letter-spacing: 2px;\r\n        text-align: right;\r\n    }\r\n    \r\n    .particles-container {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        z-index: 3;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .particle {\r\n        position: absolute;\r\n        background: rgba(255,255,255,0.3);\r\n        border-radius: 50%;\r\n    }\r\n\r\n    \/* Content Layout *\/\r\n    .hero-content-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        max-width: 1600px;\r\n        margin: 0 auto;\r\n        padding: 0 5%;\r\n        height: 100%;\r\n        z-index: 10;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* Typography *\/\r\n    .hero-text-area {\r\n        position: relative;\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        text-align: center;\r\n    }\r\n\r\n    .hero-title {\r\n        font-family: var(--font-heading);\r\n        font-size: clamp(2.5rem, 4vw, 4.5rem);\r\n        line-height: 1.1;\r\n        font-weight: 500;\r\n        color: var(--color-white);\r\n        margin-bottom: 1.5rem;\r\n        text-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n        position: relative;\r\n    }\r\n\r\n    .hero-title span {\r\n        display: block;\r\n        color: var(--color-gold);\r\n        font-style: italic;\r\n    }\r\n\r\n    .hero-subtitle {\r\n        font-family: var(--font-body);\r\n        font-size: 1.1rem;\r\n        line-height: 1.6;\r\n        font-weight: 300;\r\n        color: rgba(255,255,255,0.8);\r\n        margin: 0 auto 3rem auto;\r\n        max-width: 500px;\r\n    }\r\n\r\n    .hero-quote {\r\n        position: absolute;\r\n        top: 20%;\r\n        right: 5%;\r\n        width: 200px;\r\n        font-family: var(--font-heading);\r\n        font-style: italic;\r\n        font-size: 1.5rem;\r\n        color: rgba(255,255,255,0.6);\r\n        border-left: 2px solid var(--color-gold);\r\n        padding-left: 1rem;\r\n    }\r\n\r\n    .signature {\r\n        position: absolute;\r\n        bottom: -30px;\r\n        right: 40px;\r\n        opacity: 0.7;\r\n    }\r\n\r\n    \/* Buttons & Interactions *\/\r\n    .hero-buttons {\r\n        display: flex;\r\n        gap: 1.5rem;\r\n        justify-content: center;\r\n    }\r\n\r\n    .aderemi-btn {\r\n        padding: 1rem 2.5rem;\r\n        font-family: var(--font-body);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        font-size: 0.85rem;\r\n        font-weight: 500;\r\n        text-decoration: none;\r\n        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: inline-block;\r\n        cursor: pointer;\r\n        z-index: 1;\r\n        \/* Reset Elementor defaults *\/\r\n        border-radius: 0;\r\n        line-height: 1;\r\n    }\r\n\r\n    .aderemi-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 0;\r\n        background: var(--color-gold);\r\n        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n        z-index: -1;\r\n    }\r\n\r\n    .aderemi-btn:hover::after {\r\n        height: 100%;\r\n    }\r\n\r\n    .btn-primary {\r\n        background: transparent;\r\n        color: var(--color-white);\r\n        border: 1px solid var(--color-gold);\r\n        box-shadow: 0 0 20px var(--color-bronze-glow);\r\n    }\r\n\r\n    .btn-primary:hover {\r\n        color: var(--color-navy);\r\n        box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);\r\n    }\r\n\r\n    .btn-secondary {\r\n        background: transparent;\r\n        color: var(--color-white);\r\n        border: 1px solid rgba(255,255,255,0.2);\r\n    }\r\n    \r\n    .btn-secondary:hover {\r\n        border-color: var(--color-white);\r\n        color: var(--color-navy);\r\n    }\r\n\r\n    \/* Media Toggle *\/\r\n    .media-toggle {\r\n        position: absolute;\r\n        bottom: 5%;\r\n        right: 5%;\r\n        display: flex;\r\n        gap: 1rem;\r\n        z-index: 20;\r\n        align-items: center;\r\n    }\r\n    \r\n    .media-toggle span {\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: rgba(255,255,255,0.5);\r\n        cursor: pointer;\r\n        transition: color 0.3s;\r\n    }\r\n    \r\n    .media-toggle span.active {\r\n        color: var(--color-gold);\r\n    }\r\n\r\n    \/* Scroll Indicator *\/\r\n    .scroll-indicator {\r\n        position: absolute;\r\n        bottom: 40px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 10px;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .scroll-text {\r\n        font-size: 0.7rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: rgba(255,255,255,0.5);\r\n        writing-mode: vertical-rl;\r\n    }\r\n    \r\n    .scroll-line {\r\n        width: 1px;\r\n        height: 60px;\r\n        background: rgba(255,255,255,0.2);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .scroll-line::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: -100%;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: var(--color-gold);\r\n        animation: scrollLine 2s infinite cubic-bezier(0.645, 0.045, 0.355, 1);\r\n    }\r\n\r\n    @keyframes scrollLine {\r\n        0% { top: -100%; }\r\n        50% { top: 0%; }\r\n        100% { top: 100%; }\r\n    }\r\n\r\n    \/* Floating Travel Elements *\/\r\n    .floating-element {\r\n        position: absolute;\r\n        opacity: 0.08;\r\n        pointer-events: none;\r\n        z-index: 4;\r\n    }\r\n    .stamp-1 { top: 15%; left: 10%; width: 120px; transform: rotate(-15deg); }\r\n    .stamp-2 { bottom: 20%; right: 35%; width: 150px; transform: rotate(10deg); }\r\n    .route-line { top: 30%; right: 0; width: 40vw; }\r\n\r\n\r\n\r\n    \/* Responsive *\/\r\n    \/* ==========================\r\n       Tablet\r\n    ========================== *\/\r\n    @media (max-width: 1024px) {\r\n\r\n        .hero{\r\n            padding-top: 220px !important;\r\n            height:auto;\r\n            padding:120px 0 80px;\r\n        }\r\n\r\n        .hero-content-wrapper{\r\n            padding:0 40px;\r\n        }\r\n\r\n        .hero-text-area{\r\n            position:relative;\r\n            max-width:100%;\r\n            text-align:center;\r\n        }\r\n\r\n        .hero-title{\r\n            font-size:3.8rem;\r\n        }\r\n\r\n        .hero-quote{\r\n            display:none;\r\n        }\r\n\r\n        .map-coordinates{\r\n            display:none;\r\n        }\r\n\r\n        \r\n    }\r\n\r\n\r\n    \/* ==========================\r\n       Mobile\r\n    ========================== *\/\r\n    @media (max-width:767px){\r\n\r\n        body{\r\n            cursor:auto;\r\n        }\r\n\r\n        .cursor{\r\n            display:none;\r\n        }\r\n\r\n        .hero{\r\n            min-height:auto;\r\n            height:auto;\r\n            padding:120px 20px 80px;\r\n        }\r\n\r\n        .hero-content-wrapper{\r\n            padding:0;\r\n            display:flex;\r\n            flex-direction:column;\r\n            align-items:center;\r\n            text-align:center;\r\n        }\r\n\r\n        .hero-text-area{\r\n            position:relative;\r\n            max-width:100%;\r\n            padding:0;\r\n        }\r\n\r\n        .hero-title{\r\n            font-size:2.6rem;\r\n            line-height:1.15;\r\n            margin-bottom:20px;\r\n        }\r\n\r\n        .hero-subtitle{\r\n            font-size:1rem;\r\n            max-width:100%;\r\n            margin-bottom:35px;\r\n        }\r\n\r\n        .hero-buttons{\r\n            flex-direction:column;\r\n            width:100%;\r\n            gap:15px;\r\n        }\r\n\r\n        .aderemi-btn{\r\n            width:100%;\r\n            text-align:center;\r\n        }\r\n\r\n        .hero-quote,\r\n        .map-coordinates,\r\n        .scroll-indicator,\r\n        .media-toggle,\r\n        .particles-container,\r\n        .floating-element{\r\n            display:none;\r\n        }\r\n\r\n       \r\n    }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- Custom Cursor -->\r\n    <div class=\"cursor\" id=\"customCursor\">\r\n        <!-- Book\/Quill SVG for hover state -->\r\n        <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path d=\"M21 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h15v-2H6v-2h15V2zM6 18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1s-1 .45-1 1v12c0 .55.45 1 1 1z\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <!-- SECTION 1: HERO -->\r\n    <section class=\"hero\" id=\"hero\">\r\n\r\n    <!-- Background Media -->\r\n    <div class=\"hero-bg-media\">\r\n        <video id=\"heroVideo\" autoplay loop muted playsinline style=\"background: #111;\">\r\n            <source src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/0_Mountain_Winter_1280x720.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n\r\n        <img decoding=\"async\" id=\"heroImage\"\r\n            src=\"https:\/\/images.unsplash.com\/photo-1449844908441-8829872d2607?q=80&w=2070&auto=format&fit=crop\"\r\n            alt=\"Contact Aderemi Ogunsuyi\"\r\n            style=\"opacity: 0;\">\r\n    <\/div>\r\n\r\n    <div class=\"hero-overlay\"><\/div>\r\n\r\n    <!-- Decorative Elements -->\r\n    <div class=\"particles-container\" id=\"particles\"><\/div>\r\n\r\n    <!-- Decorative Stamp -->\r\n    <svg class=\"floating-element stamp-2\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\">\r\n        <rect x=\"10\" y=\"10\" width=\"80\" height=\"80\" stroke-dasharray=\"10 5\" \/>\r\n        <path d=\"M20 50 Q 50 20 80 50 T 80 50\" \/>\r\n    <\/svg>\r\n\r\n    <div class=\"hero-content-wrapper\">\r\n\r\n        <!-- Text Area -->\r\n        <div class=\"hero-text-area\">\r\n\r\n            <h1 class=\"hero-title\">\r\n                Let's Start a<br>\r\n                Conversation.\r\n                <span>Connect with the Author<br>Behind the Story.<\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"hero-subtitle\">\r\n                Whether you have a question about the memoir, would like to share your own journey, discuss speaking opportunities, media inquiries, or simply say hello, your message is always welcome. Every meaningful conversation begins with a single connection.\r\n            <\/p>\r\n\r\n            <div class=\"hero-buttons\">\r\n\r\n                <!--<a href=\"#contact-form\" class=\"aderemi-btn btn-primary magnetic\" data-cursor=\"hover\">-->\r\n                <!--    Send a Message-->\r\n                <!--<\/a>-->\r\n\r\n                <!--<a href=\"#contact-info\" class=\"aderemi-btn btn-secondary magnetic\" data-cursor=\"hover\">-->\r\n                <!--    Contact Details-->\r\n                <!--<\/a>-->\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Media Toggle -->\r\n    <div class=\"media-toggle\">\r\n        <span id=\"btnVideo\" class=\"active\" data-cursor=\"hover\">Video<\/span>\r\n        <span style=\"color:rgba(255,255,255,0.3)\">|<\/span>\r\n        <span id=\"btnImage\" data-cursor=\"hover\">Image<\/span>\r\n    <\/div>\r\n\r\n    <!-- Scroll Indicator -->\r\n    <div class=\"scroll-indicator\">\r\n        <div class=\"scroll-text\">Contact<\/div>\r\n        <div class=\"scroll-line\"><\/div>\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n    <script>\r\n        \/\/ Custom Cursor Logic\r\n        const cursor = document.getElementById('customCursor');\r\n        const hoverElements = document.querySelectorAll('[data-cursor=\"hover\"], .btn');\r\n\r\n        window.addEventListener('mousemove', (e) => {\r\n            gsap.to(cursor, {\r\n                x: e.clientX,\r\n                y: e.clientY,\r\n                duration: 0.1,\r\n                ease: \"power2.out\"\r\n            });\r\n        });\r\n\r\n        hoverElements.forEach(el => {\r\n            el.addEventListener('mouseenter', () => cursor.classList.add('hovering'));\r\n            el.addEventListener('mouseleave', () => cursor.classList.remove('hovering'));\r\n        });\r\n\r\n        \/\/ Magnetic Buttons\r\n        const magnetics = document.querySelectorAll('.magnetic');\r\n        magnetics.forEach(btn => {\r\n            btn.addEventListener('mousemove', function(e) {\r\n                const rect = this.getBoundingClientRect();\r\n                const x = e.clientX - rect.left - rect.width \/ 2;\r\n                const y = e.clientY - rect.top - rect.height \/ 2;\r\n                \r\n                gsap.to(this, {\r\n                    x: x * 0.3,\r\n                    y: y * 0.3,\r\n                    duration: 0.3,\r\n                    ease: \"power2.out\"\r\n                });\r\n            });\r\n            \r\n            btn.addEventListener('mouseleave', function() {\r\n                gsap.to(this, {\r\n                    x: 0,\r\n                    y: 0,\r\n                    duration: 0.5,\r\n                    ease: \"elastic.out(1, 0.3)\"\r\n                });\r\n            });\r\n        });\r\n\r\n        \/\/ Media Toggle Logic\r\n        const btnVideo = document.getElementById('btnVideo');\r\n        const btnImage = document.getElementById('btnImage');\r\n        const video = document.getElementById('heroVideo');\r\n        const image = document.getElementById('heroImage');\r\n\r\n        let intervalMode = 'video';\r\n        let crossfadeInterval;\r\n\r\n        function setMode(mode) {\r\n            if(mode === 'video') {\r\n                video.style.opacity = '0.4';\r\n                image.style.opacity = '0';\r\n                btnVideo.classList.add('active');\r\n                btnImage.classList.remove('active');\r\n            } else {\r\n                video.style.opacity = '0';\r\n                image.style.opacity = '0.4';\r\n                btnImage.classList.add('active');\r\n                btnVideo.classList.remove('active');\r\n            }\r\n        }\r\n\r\n        \/\/ Initial crossfade every 10 seconds\r\n        crossfadeInterval = setInterval(() => {\r\n            intervalMode = intervalMode === 'video' ? 'image' : 'video';\r\n            setMode(intervalMode);\r\n        }, 10000);\r\n\r\n        btnVideo.addEventListener('click', () => {\r\n            clearInterval(crossfadeInterval);\r\n            setMode('video');\r\n        });\r\n\r\n        btnImage.addEventListener('click', () => {\r\n            clearInterval(crossfadeInterval);\r\n            setMode('image');\r\n        });\r\n\r\n        \/\/ Background Particles\r\n        const particlesContainer = document.getElementById('particles');\r\n        for(let i=0; i<50; i++) {\r\n            const particle = document.createElement('div');\r\n            particle.classList.add('particle');\r\n            const size = Math.random() * 3 + 1;\r\n            particle.style.width = size + 'px';\r\n            particle.style.height = size + 'px';\r\n            particle.style.left = Math.random() * 100 + '%';\r\n            particle.style.top = Math.random() * 100 + '%';\r\n            particle.style.opacity = Math.random() * 0.5;\r\n            particlesContainer.appendChild(particle);\r\n\r\n            \/\/ Animate particles\r\n            gsap.to(particle, {\r\n                y: `-=${Math.random() * 100 + 50}`,\r\n                x: `+=${(Math.random() - 0.5) * 50}`,\r\n                opacity: 0,\r\n                duration: Math.random() * 10 + 10,\r\n                repeat: -1,\r\n                ease: \"none\",\r\n                delay: Math.random() * -10\r\n            });\r\n        }\r\n\r\n        \/\/ GSAP Animations\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        \/\/ Hero Initial Animations\r\n        const tlHero = gsap.timeline();\r\n        \r\n        \/\/ Use a slight delay to ensure Elementor DOM is ready\r\n        setTimeout(() => {\r\n            tlHero.from('.hero-title', {\r\n                y: 50,\r\n                opacity: 0,\r\n                duration: 1.5,\r\n                ease: \"power4.out\",\r\n                delay: 0.2\r\n            })\r\n            .from('.hero-subtitle', {\r\n                y: 30,\r\n                opacity: 0,\r\n                duration: 1,\r\n                ease: \"power3.out\"\r\n            }, \"-=1\")\r\n            .from('.hero-buttons .aderemi-btn', {\r\n                y: 20,\r\n                opacity: 0,\r\n                duration: 0.8,\r\n                stagger: 0.2,\r\n                ease: \"power3.out\"\r\n            }, \"-=0.8\")\r\n            .from('.hero-quote', {\r\n                x: 20,\r\n                opacity: 0,\r\n                duration: 1,\r\n                ease: \"power2.out\"\r\n            }, \"-=0.6\")\r\n            .from('.floating-element', {\r\n                scale: 0.8,\r\n                opacity: 0,\r\n                duration: 2,\r\n                stagger: 0.3,\r\n                ease: \"power2.out\"\r\n            }, \"-=1.5\");\r\n        }, 300);\r\n\r\n        \/\/ Parallax effects on scroll for Hero\r\n        gsap.to('.hero-text-area', {\r\n            y: 100,\r\n            opacity: 0,\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: '.hero',\r\n                start: \"top top\",\r\n                end: \"bottom top\",\r\n                scrub: true\r\n            }\r\n        });\r\n\r\n       \r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa71d53 e-con-full e-flex e-con e-parent\" data-id=\"aa71d53\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da5038b elementor-widget elementor-widget-html\" data-id=\"da5038b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     SECTION \u2014 CONTACT (Editorial Split \u2014 High Contrast)\r\n     ========================================================= *\/\r\n  .contact-section{\r\n    position:relative;\r\n    background:var(--cream);\r\n    padding:160px 0 180px;\r\n    overflow:hidden;\r\n  }\r\n  .contact-section::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:0;left:0;right:0;\r\n    height:1px;\r\n    background:linear-gradient(90deg, transparent, var(--line), transparent);\r\n  }\r\n\r\n  .contact-container{\r\n    position:relative;\r\n    z-index:2;\r\n    max-width:1280px;\r\n    margin:0 auto;\r\n    padding:0 6vw;\r\n    display:grid;\r\n    grid-template-columns:0.9fr 1.1fr;\r\n    gap:0;\r\n    align-items:start;\r\n  }\r\n\r\n  \/* LEFT COLUMN *\/\r\n  .contact-left{\r\n    position:relative;\r\n    padding-right:80px;\r\n    padding-top:20px;\r\n  }\r\n  .contact-left::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    right:0;\r\n    top:0;\r\n    bottom:80px;\r\n    width:1px;\r\n    background:linear-gradient(to bottom, transparent, var(--line), transparent);\r\n  }\r\n\r\n  .contact-left .eyebrow{\r\n    font-family:'Jost', sans-serif;\r\n    font-size:11px;\r\n    letter-spacing:0.32em;\r\n    text-transform:uppercase;\r\n    color:var(--bronze);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-bottom:28px;\r\n  }\r\n  .contact-left .eyebrow::before{\r\n    content:\"\";\r\n    width:40px;\r\n    height:1px;\r\n    background:var(--bronze);\r\n    display:inline-block;\r\n  }\r\n\r\n  .contact-left h2{\r\n    font-family:'Playfair Display', serif;\r\n    font-weight:500;\r\n    font-size:clamp(36px, 4.2vw, 60px);\r\n    line-height:1.08;\r\n    color:var(--navy);\r\n    margin-bottom:22px;\r\n  }\r\n  .contact-left h2 em{\r\n    font-style:italic;\r\n    color:var(--bronze);\r\n    font-weight:400;\r\n  }\r\n\r\n  \/* PARAGRAPH below heading \u2014 visible, properly colored *\/\r\n  .contact-intro{\r\n    font-size:18px;\r\n    line-height:1.8;\r\n    color:#000 !important;\r\n    max-width:38ch;\r\n  }\r\n\r\n  \/* Contact details *\/\r\n  .contact-details{\r\n    border-top:1px solid var(--line);\r\n    padding-top:40px;\r\n  }\r\n  .detail-item{\r\n    margin-bottom:36px;\r\n  }\r\n  .detail-item:last-child{\r\n    margin-bottom:0;\r\n  }\r\n  .detail-label{\r\n    font-family:'Jost',sans-serif;\r\n    font-size:10px;\r\n    letter-spacing:0.22em;\r\n    text-transform:uppercase;\r\n    color:var(--bronze);\r\n    display:block;\r\n    margin-bottom:10px;\r\n  }\r\n  .detail-val{\r\n    font-family:'Playfair Display', serif;\r\n    font-size:20px;\r\n    color:var(--navy);\r\n    text-decoration:none;\r\n    transition:color 0.3s ease;\r\n    display:inline-block;\r\n  }\r\n  .detail-val:hover{\r\n    color:var(--bronze);\r\n  }\r\n\r\n  .social-row{\r\n    display:flex;\r\n    gap:28px;\r\n    margin-top:4px;\r\n  }\r\n  .social-row a{\r\n    font-family:'Jost',sans-serif;\r\n    font-size:11px;\r\n    letter-spacing:0.14em;\r\n    text-transform:uppercase;\r\n    color:#000 !important;\r\n    text-decoration:none;\r\n    border-bottom:1px solid transparent;\r\n    padding-bottom:3px;\r\n    transition:all 0.3s ease;\r\n  }\r\n  .social-row a:hover{\r\n    color:var(--navy);\r\n    border-bottom-color:var(--bronze);\r\n  }\r\n\r\n  .contact-sig{\r\n    margin-top:50px;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:18px;\r\n  }\r\n  .contact-sig .sig-rule{\r\n    width:50px;\r\n    height:1px;\r\n    background:var(--bronze);\r\n  }\r\n  .contact-sig span{\r\n    font-family:'Playfair Display', serif;\r\n    font-style:italic;\r\n    font-size:18px;\r\n    color:var(--navy);\r\n  }\r\n\r\n  \/* RIGHT COLUMN \u2014 Form (contained & prominent) *\/\r\n  .contact-right{\r\n    position:relative;\r\n    padding-left:70px;\r\n  }\r\n\r\n  \/* Form wrapper: visible container *\/\r\n  .form-wrapper{\r\n    position:relative;\r\n    background:var(--paper);\r\n    border:1px solid var(--line);\r\n    padding:56px 52px;\r\n    box-shadow:0 30px 80px -30px rgba(16,27,48,0.12);\r\n  }\r\n\r\n  \/* Manuscript scrap decoration *\/\r\n  .form-scrap{\r\n    position:absolute;\r\n    top:-24px;\r\n    right:-18px;\r\n    width:140px;\r\n    height:90px;\r\n    background:#FBF4DE;\r\n    transform:rotate(5deg);\r\n    z-index:0;\r\n    opacity:0.7;\r\n    box-shadow:0 12px 30px -10px rgba(16,27,48,.12);\r\n    pointer-events:none;\r\n  }\r\n  .form-scrap::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:10px;\r\n    background:repeating-linear-gradient(transparent, transparent 9px, rgba(37,35,31,0.05) 10px);\r\n  }\r\n\r\n  .contact-form{\r\n    position:relative;\r\n    z-index:1;\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr;\r\n    gap:32px 36px;\r\n  }\r\n\r\n  .form-group{\r\n    position:relative;\r\n  }\r\n  .form-group.full{\r\n    grid-column:1 \/ -1;\r\n  }\r\n\r\n  .form-group label{\r\n    font-family:'Jost',sans-serif;\r\n    font-size:10px;\r\n    letter-spacing:0.2em;\r\n    text-transform:uppercase;\r\n    color:var(--bronze);\r\n    display:block;\r\n    margin-bottom:10px;\r\n  }\r\n\r\n  \/* Prominent inputs \u2014 dark enough to see on paper bg *\/\r\n  .form-group input,\r\n  .form-group textarea{\r\n    width:100%;\r\n    border:none;\r\n    border-bottom:1.5px solid rgba(37,35,31,0.2);\r\n    background:transparent;\r\n    font-family:'Cormorant Garamond', serif;\r\n    font-size:18px;\r\n    color:var(--ink);\r\n    padding:12px 0;\r\n    outline:none;\r\n    transition:border-color 0.4s ease, border-width 0.2s ease;\r\n    border-radius:0;\r\n  }\r\n  .form-group input::placeholder,\r\n  .form-group textarea::placeholder{\r\n    color:var(--ink-soft);\r\n    opacity:0.5;\r\n    font-style:italic;\r\n  }\r\n  .form-group input:focus,\r\n  .form-group textarea:focus{\r\n    border-bottom-color:var(--bronze);\r\n    border-bottom-width:2px;\r\n  }\r\n  .form-group textarea{\r\n    resize:none;\r\n    min-height:110px;\r\n    line-height:1.6;\r\n  }\r\n\r\n  .form-submit{\r\n    grid-column:1 \/ -1;\r\n    margin-top:10px;\r\n  }\r\n  .form-submit button{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:14px;\r\n    padding:18px 44px;\r\n    background:var(--bronze);\r\n    border:none;\r\n    font-family:'Jost',sans-serif;\r\n    font-size:12px;\r\n    letter-spacing:0.16em;\r\n    text-transform:uppercase;\r\n    color:var(--cream);\r\n    cursor:pointer;\r\n    transition:all 0.5s cubic-bezier(.22,.61,.36,1);\r\n    position:relative;\r\n    overflow:hidden;\r\n  }\r\n  .form-submit button::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:var(--navy);\r\n    transform:translateX(-101%);\r\n    transition:transform 0.5s cubic-bezier(.22,.61,.36,1);\r\n    z-index:0;\r\n  }\r\n  .form-submit button:hover::before{\r\n    transform:translateX(0);\r\n  }\r\n  .form-submit button span,\r\n  .form-submit button .btn-arrow{\r\n    position:relative;\r\n    z-index:1;\r\n    transition:transform 0.4s ease;\r\n  }\r\n  .form-submit button:hover .btn-arrow{\r\n    transform:translateX(6px);\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width:1024px){\r\n    .contact-container{\r\n      grid-template-columns:1fr;\r\n      gap:90px;\r\n    }\r\n    .contact-left{\r\n      padding-right:0;\r\n    }\r\n    .contact-left::after{\r\n      display:none;\r\n    }\r\n    .contact-right{\r\n      padding-left:0;\r\n    }\r\n    .form-wrapper{\r\n      padding:44px 36px;\r\n    }\r\n    .form-scrap{\r\n      display:none;\r\n    }\r\n  }\r\n\r\n  @media (max-width:640px){\r\n    .contact-form{\r\n      grid-template-columns:1fr;\r\n    }\r\n    .contact-left h2{\r\n      font-size:32px;\r\n    }\r\n    .contact-intro{\r\n      font-size:17px;\r\n      margin-bottom:44px;\r\n    }\r\n    .detail-val{\r\n      font-size:18px;\r\n    }\r\n    .social-row{\r\n      gap:20px;\r\n      flex-wrap:wrap;\r\n    }\r\n    .form-wrapper{\r\n      padding:36px 28px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- =========================================================\r\n     SECTION \u2014 CONTACT\r\n     ========================================================= -->\r\n<section class=\"contact-section\">\r\n  <div class=\"contact-container\">\r\n\r\n    <div class=\"contact-left reveal\">\r\n      <div class=\"eyebrow\">Contact<\/div>\r\n      <h2>Let's Begin a<br><em>Conversation<\/em><\/h2>\r\n\r\n      <!-- Paragraph below heading -->\r\n      <p class=\"contact-intro\">\r\n        Whether you wish to discuss a speaking engagement, share your own story, or simply say hello every message is read with care.\r\n      <\/p>\r\n\r\n      <div class=\"contact-details reveal reveal-delay-2\">\r\n        <div class=\"detail-item\">\r\n          <span class=\"detail-label\">Email<\/span>\r\n          <a href=\"mailto:hello@aderemiogunsuyi.com\" class=\"detail-val\">hello@aderemiogunsuyi.com<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"detail-item\">\r\n          <span class=\"detail-label\">Based In<\/span>\r\n          <span class=\"detail-val\">New York, New York<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"detail-item\">\r\n          <span class=\"detail-label\">Follow<\/span>\r\n          <div class=\"social-row\">\r\n            <a href=\"#\">Instagram<\/a>\r\n            <a href=\"#\">Facebook<\/a>\r\n            <!--<a href=\"#\">LinkedIn<\/a>-->\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"contact-sig reveal reveal-delay-3\">\r\n        <div class=\"sig-rule\"><\/div>\r\n        <span>Aderemi Ogunsuyi<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"contact-right reveal reveal-delay-1\">\r\n      <div class=\"form-wrapper\">\r\n        <div class=\"form-scrap\"><\/div>\r\n\r\n        <form class=\"contact-form\" action=\"#\" method=\"POST\">\r\n          <div class=\"form-group\">\r\n            <label for=\"name\">Name<\/label>\r\n            <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your full name\" required>\r\n          <\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <label for=\"email\">Email<\/label>\r\n            <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"your@email.com\" required>\r\n          <\/div>\r\n\r\n          <div class=\"form-group full\">\r\n            <label for=\"subject\">Subject<\/label>\r\n            <input type=\"text\" id=\"subject\" name=\"subject\" placeholder=\"Speaking, Media, General Inquiry\" required>\r\n          <\/div>\r\n\r\n          <div class=\"form-group full\">\r\n            <label for=\"message\">Message<\/label>\r\n            <textarea id=\"message\" name=\"message\" placeholder=\"Write your message here...\" required><\/textarea>\r\n          <\/div>\r\n\r\n          <div class=\"form-submit\">\r\n            <button type=\"submit\">\r\n              <span>Send Message<\/span>\r\n              <span class=\"btn-arrow\">\u2192<\/span>\r\n            <\/button>\r\n          <\/div>\r\n        <\/form>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dfbcfc4 e-con-full e-flex e-con e-parent\" data-id=\"dfbcfc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6de3d95 elementor-widget elementor-widget-html\" data-id=\"6de3d95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=La+Belle+Aurore&display=swap\" rel=\"stylesheet\">\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    <style>\r\n        :root {\r\n            --color-navy: #15202F;\r\n            --color-navy-deep: #0D1520;\r\n            --color-navy-darker: #080E15;\r\n            --color-ivory: #F8F6F2;\r\n            --color-gold: #D4AF37;\r\n            --color-gold-bright: #E8C84A;\r\n            --color-bronze: #CD7F32;\r\n            --color-white: #ffffff;\r\n            --font-heading: 'Cormorant Garamond', serif;\r\n            --font-body: 'Inter', sans-serif;\r\n            --font-handwriting: 'La Belle Aurore', cursive;\r\n        }\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        html { scroll-behavior: smooth; }\r\n        body {\r\n            font-family: var(--font-body);\r\n            background: var(--color-navy);\r\n            color: var(--color-white);\r\n        }\r\n\r\n        \/* ===================== FOOTER ===================== *\/\r\n        .site-footer {\r\n            position: relative;\r\n            width: 100%;\r\n            background: var(--color-navy-deep);\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Top gold line with glow *\/\r\n        .footer-gold-line {\r\n            width: 100%;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);\r\n            opacity: 0.4;\r\n            position: relative;\r\n        }\r\n        .footer-gold-line::after {\r\n            content: '';\r\n            position: absolute;\r\n            left: 50%;\r\n            top: -2px;\r\n            transform: translateX(-50%);\r\n            width: 60px;\r\n            height: 5px;\r\n            background: var(--color-gold);\r\n            filter: blur(8px);\r\n            opacity: 0.6;\r\n        }\r\n\r\n        \/* Texture overlay *\/\r\n        .footer-texture {\r\n            position: absolute;\r\n            inset: 0;\r\n            opacity: 0.04;\r\n            pointer-events: none;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n        }\r\n\r\n        \/* Decorative corner ornaments *\/\r\n        .footer-corner {\r\n            position: absolute;\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid rgba(212, 175, 55, 0.12);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n        .footer-corner.tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }\r\n        .footer-corner.tr { top: 30px; right: 30px; border-left: none; border-bottom: none; }\r\n        .footer-corner.bl { bottom: 80px; left: 30px; border-right: none; border-top: none; }\r\n        .footer-corner.br { bottom: 80px; right: 30px; border-left: none; border-top: none; }\r\n\r\n        \/* \u2500\u2500\u2500 CENTERED LAYOUT \u2500\u2500\u2500 *\/\r\n        .footer-main {\r\n            position: relative;\r\n            z-index: 2;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            padding: 6rem 5% 3rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 LOGO CENTER \u2500\u2500\u2500 *\/\r\n        .footer-logo-wrap {\r\n            margin-bottom: 3rem;\r\n            position: relative;\r\n        }\r\n       .footer-logo {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n}\r\n\r\n.footer-logo-img {\r\n    width: 220px; \/* Adjust as needed *\/\r\n    max-width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    transition: all 0.35s ease;\r\n}\r\n\r\n.footer-logo:hover .footer-logo-img {\r\n    transform: scale(1.05);\r\n    opacity: 0.9;\r\n}\r\n\r\n        \/* Gold decorative line under logo *\/\r\n        .logo-underline {\r\n            width: 60px;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--color-gold), transparent);\r\n            margin: 0 auto 3rem;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 NAV MENU \u2500\u2500\u2500 *\/\r\n        .footer-nav {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 0;\r\n            margin-bottom: 3rem;\r\n            flex-wrap: wrap;\r\n        }\r\n        .footer-nav-link {\r\n            font-family: var(--font-body);\r\n            font-size: 0.75rem;\r\n            font-weight: 400;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            padding: 0.5rem 1.5rem;\r\n            position: relative;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .footer-nav-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%) scaleX(0);\r\n            width: 20px;\r\n            height: 1px;\r\n            background: var(--color-gold);\r\n            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .footer-nav-link:hover {\r\n            color: var(--color-gold);\r\n        }\r\n        .footer-nav-link:hover::after {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        \/* Gold dot separators *\/\r\n        .footer-nav-dot {\r\n            width: 3px;\r\n            height: 3px;\r\n            border-radius: 50%;\r\n            background: rgba(212, 175, 55, 0.25);\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 SOCIAL ICONS \u2500\u2500\u2500 *\/\r\n        .footer-social {\r\n            display: flex;\r\n            gap: 1rem;\r\n            margin-bottom: 3.5rem;\r\n        }\r\n        .social-icon {\r\n            width: 44px;\r\n            height: 44px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            color: rgba(255, 255, 255, 0.5);\r\n            text-decoration: none;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 50%;\r\n        }\r\n        .social-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            background: var(--color-gold);\r\n            transform: scale(0);\r\n            border-radius: 50%;\r\n            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n        .social-icon:hover::before {\r\n            transform: scale(1);\r\n        }\r\n        .social-icon:hover {\r\n            border-color: var(--color-gold);\r\n            color: var(--color-navy-deep);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);\r\n        }\r\n        .social-icon svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: currentColor;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 HANDWRITTEN QUOTE \u2500\u2500\u2500 *\/\r\n        .footer-quote {\r\n            font-family: var(--font-handwriting);\r\n            font-size: 1.4rem;\r\n            color: rgba(212, 175, 55, 0.35);\r\n            margin-bottom: 3rem;\r\n            transform: rotate(-2deg);\r\n            transition: color 0.4s ease;\r\n        }\r\n        .footer-main:hover .footer-quote {\r\n            color: rgba(212, 175, 55, 0.55);\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 COPYRIGHT \u2500\u2500\u2500 *\/\r\n        .footer-copyright {\r\n            font-size: 0.7rem;\r\n            color: rgba(255, 255, 255, 0.25);\r\n            letter-spacing: 2px;\r\n            text-transform: uppercase;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 BOTTOM BAR \u2500\u2500\u2500 *\/\r\n        .footer-bottom {\r\n            position: relative;\r\n            z-index: 2;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            padding: 1.5rem 5%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 2rem;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n        }\r\n        .footer-bottom-link {\r\n            font-size: 0.65rem;\r\n            color: rgba(255, 255, 255, 0.25);\r\n            text-decoration: none;\r\n            letter-spacing: 1px;\r\n            text-transform: uppercase;\r\n            transition: color 0.3s ease;\r\n            position: relative;\r\n        }\r\n        .footer-bottom-link::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--color-gold);\r\n            transition: width 0.3s ease;\r\n        }\r\n        .footer-bottom-link:hover {\r\n            color: var(--color-gold);\r\n        }\r\n        .footer-bottom-link:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        \/* Scroll to top *\/\r\n        .scroll-top {\r\n            position: absolute;\r\n            top: -22px;\r\n            right: 5%;\r\n            width: 44px;\r\n            height: 44px;\r\n            background: var(--color-navy-deep);\r\n            border: 1px solid rgba(212, 175, 55, 0.2);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            z-index: 5;\r\n        }\r\n        .scroll-top:hover {\r\n            background: var(--color-gold);\r\n            border-color: var(--color-gold);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);\r\n        }\r\n        .scroll-top svg {\r\n            width: 16px;\r\n            height: 16px;\r\n            fill: var(--color-gold);\r\n            transition: fill 0.3s ease, transform 0.3s ease;\r\n        }\r\n        .scroll-top:hover svg {\r\n            fill: var(--color-navy-deep);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500 *\/\r\n        @media (max-width: 600px) {\r\n            .footer-main { padding: 4rem 5% 2rem; }\r\n            .footer-logo-name { font-size: 1.6rem; }\r\n            .footer-nav { gap: 0.3rem; }\r\n            .footer-nav-link {\r\n                font-size: 0.65rem;\r\n                letter-spacing: 2px;\r\n                padding: 0.4rem 0.8rem;\r\n            }\r\n            .footer-nav-dot { display: none; }\r\n            .footer-social { gap: 0.7rem; }\r\n            .social-icon { width: 40px; height: 40px; }\r\n            .footer-quote { font-size: 1.1rem; }\r\n            .footer-bottom { flex-direction: column; gap: 0.8rem; }\r\n            .scroll-top {\r\n                right: 5%;\r\n                top: -18px;\r\n                width: 38px;\r\n                height: 38px;\r\n            }\r\n            .footer-corner { display: none; }\r\n        }\r\n\r\n        \/* Demo spacer *\/\r\n        .demo-spacer {\r\n            height: 60vh;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-family: var(--font-heading);\r\n            font-size: 2rem;\r\n            color: rgba(255,255,255,0.1);\r\n        }\r\n    <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n    <!-- ==================== FOOTER ==================== -->\r\n    <footer class=\"site-footer\" id=\"siteFooter\">\r\n        <div class=\"footer-gold-line\"><\/div>\r\n        <div class=\"footer-texture\"><\/div>\r\n\r\n        <!-- Decorative corners -->\r\n        <div class=\"footer-corner tl\"><\/div>\r\n        <div class=\"footer-corner tr\"><\/div>\r\n        <div class=\"footer-corner bl\"><\/div>\r\n        <div class=\"footer-corner br\"><\/div>\r\n\r\n        <div class=\"footer-main\">\r\n\r\n            <!-- Logo Center -->\r\n            <div class=\"footer-logo-wrap\">\r\n    <a href=\"#\" class=\"footer-logo\">\r\n        <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/Aderemi\/wp-content\/uploads\/2026\/07\/Aderemi-Logo-White.png\" alt=\"Aderemi Author Logo\" class=\"footer-logo-img\">\r\n    <\/a>\r\n<\/div>\r\n\r\n            <!-- Gold underline -->\r\n            <div class=\"logo-underline\"><\/div>\r\n\r\n            <!-- Nav Menu -->\r\n            <nav class=\"footer-nav\">\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/\" class=\"footer-nav-link\">Home<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/about\/\" class=\"footer-nav-link\">About<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/books\/\" class=\"footer-nav-link\">Books<\/a>\r\n                <div class=\"footer-nav-dot\"><\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/Aderemi\/index.php\/contact\/\" class=\"footer-nav-link\">Contact<\/a>\r\n                \r\n            <\/nav>\r\n\r\n            <!-- Social Icons -->\r\n            <div class=\"footer-social\">\r\n                <a href=\"https:\/\/www.instagram.com\/remyoguns\/\" class=\"social-icon\" aria-label=\"Instagram\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z\"\/><\/svg>\r\n                <\/a>\r\n                <a href=\"https:\/\/www.facebook.com\/AderemiOgunsuyi\" class=\"social-icon\" aria-label=\"Facebook\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- Handwritten Quote -->\r\n            <div class=\"footer-quote\">every journey begins with a single step<\/div>\r\n\r\n            <!-- Copyright -->\r\n            <div class=\"footer-copyright\">\r\n                &copy; 2026 Aderemi Ogunsuyi. All rights reserved.\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Bottom Bar -->\r\n        \r\n    <\/footer>\r\n\r\n<script>\r\n\/* \u2014\u2014\u2014 GSAP REGISTER \u2014\u2014\u2014 *\/\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\n\/* \u2014\u2014\u2014 SCROLL TO TOP \u2014\u2014\u2014 *\/\r\ndocument.getElementById('scrollTop').addEventListener('click', () => {\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n});\r\n\r\n\/* \u2014\u2014\u2014 FOOTER ENTRANCE ANIMATIONS \u2014\u2014\u2014 *\/\r\nconst tlFooter = gsap.timeline({\r\n    scrollTrigger: {\r\n        trigger: '.site-footer',\r\n        start: 'top 85%'\r\n    }\r\n});\r\n\r\ntlFooter\r\n    .from('.footer-gold-line', { scaleX: 0, duration: 1, ease: 'power3.inOut' })\r\n    .from('.footer-corner', { opacity: 0, duration: 0.8, stagger: 0.1 }, '-=0.6')\r\n    .from('.footer-logo-wrap', { y: 30, opacity: 0, duration: 0.9, ease: 'power3.out' }, '-=0.4')\r\n    .from('.logo-underline', { scaleX: 0, duration: 0.6, ease: 'power2.out' }, '-=0.5')\r\n    .from('.footer-nav-link', { y: 15, opacity: 0, duration: 0.5, stagger: 0.06 }, '-=0.3')\r\n    .from('.footer-nav-dot', { opacity: 0, duration: 0.3, stagger: 0.04 }, '-=0.4')\r\n    .from('.social-icon', { y: 15, opacity: 0, duration: 0.5, stagger: 0.08 }, '-=0.3')\r\n    .from('.footer-quote', { opacity: 0, y: 10, duration: 0.7, ease: 'power2.out' }, '-=0.2')\r\n    .from('.footer-copyright', { opacity: 0, duration: 0.5 }, '-=0.3')\r\n    .from('.footer-bottom', { opacity: 0, duration: 0.5 }, '-=0.2');\r\n\r\n\/* \u2014\u2014\u2014 SOCIAL ICON HOVER \u2014\u2014\u2014 *\/\r\ndocument.querySelectorAll('.social-icon').forEach(icon => {\r\n    icon.addEventListener('mouseenter', () => {\r\n        gsap.to(icon, { scale: 1.1, duration: 0.2, ease: 'power2.out' });\r\n    });\r\n    icon.addEventListener('mouseleave', () => {\r\n        gsap.to(icon, { scale: 1, duration: 0.2, ease: 'power2.out' });\r\n    });\r\n});\r\n\r\n\/* \u2014\u2014\u2014 SCROLL TOP BUTTON VISIBILITY \u2014\u2014\u2014 *\/\r\nconst scrollTopBtn = document.getElementById('scrollTop');\r\nlet scrollTopVisible = false;\r\n\r\ngsap.set(scrollTopBtn, { opacity: 0, scale: 0.8 });\r\n\r\nwindow.addEventListener('scroll', () => {\r\n    const shouldShow = window.scrollY > 400;\r\n    if (shouldShow !== scrollTopVisible) {\r\n        scrollTopVisible = shouldShow;\r\n        gsap.to(scrollTopBtn, {\r\n            opacity: scrollTopVisible ? 1 : 0,\r\n            scale: scrollTopVisible ? 1 : 0.8,\r\n            duration: 0.4,\r\n            ease: 'power2.out'\r\n        });\r\n    }\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home About Books Contact Buy the Book Home About Books Contact Buy the Book every story matters Let&#8217;s Start a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-295","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":19,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/295\/revisions"}],"predecessor-version":[{"id":460,"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/pages\/295\/revisions\/460"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/Aderemi\/index.php\/wp-json\/wp\/v2\/media?parent=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}