<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "About Us | Nesvra";
include 'components/head.php';
?>


<body class="bg-white">

    <?php include 'components/navbar.php'; ?>



    <section class="relative max-h-[75dvh] h-fit  w-full overflow-hidden">

        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/50 z-10"></div> <img src="Asset/home-v3.webp"
                class="w-full h-full object-cover bg-fixed"
                style="background-attachment: fixed; background-position: center;" alt="Nesvra Infrastructure" />
        </div>

        <div
            class="relative z-20 h-full w-full max-w-8xl mx-auto px-4 md:px-16 pt-32 md:pt-48 pb-12 flex flex-col items-start text-left">

            <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase mb-3">
                About Us
            </span>
            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-4xl text-4xl md:text-6xl font-[400] tracking-[-0.05em] leading-[1.05] text-white ">
                Build Digital Products Faster
                with the Right Technology Partner

            </h1>

            <p data-aos="fade-right" data-aos-delay="400"
                class="mt-3 max-w-4xl text-sm  text-white/70 font-mono leading-relaxed">
                From custom software development and dedicated tech teams to fintech platforms, SaaS products, and enterprise solutions, Nesvra helps ambitious businesses design, build, launch, and scale technology that drives growth.
            </p>





        </div>


    </section>


    <section class="py-24 px-[5%] bg-white overflow-hidden" id="our-story">
        <div class="max-w-[1300px] mx-auto">
            <div class="grid lg:grid-cols-2 gap-20 items-start">

                <div class="flex flex-col">
                    <div class="mb-8" data-aos="fade-up">
                        <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase">
                            {01} Our Story
                        </span>
                    </div>

                    <div class="mb-6" data-aos="fade-up" data-aos-delay="100">
                        <h2 class="text-4xl md:text-4xl font-[400] tracking-tight text-dark leading-[1.1]">
                            Since 2018, we’ve existed to make world‑class <span class="italic font-serif text-electric">technology accessible</span> to every ambitious business.
                        </h2>
                    </div>

                    <div class="mb-10 max-w-xl" data-aos="fade-up" data-aos-delay="200">
                        <p class="text-soft text-sm md:text-base leading-relaxed">
                            Nesvra provides premium tech teams, platform development, and fintech infrastructure unlocking enterprise-grade capabilities without the traditional cost, risk, or delay.
                        </p>
                    </div>

                    <div class="grid grid-cols-3 gap-0 border-t border-zinc-100 pt-12" data-aos="fade-up" data-aos-delay="300">

                        <div class="pr-8 border-r border-zinc-100">
                            <span class="block text-4xl  font-[400] tracking-tighter text-dark">2018</span>
                            <span class="text-[10px] font-mono text-zinc-400 uppercase tracking-widest mt-3 block">Founded</span>
                        </div>

                        <div class="px-8 border-r border-zinc-100">
                            <span class="block text-4xl  font-[400] tracking-tighter text-dark">100+</span>
                            <span class="text-[10px] font-mono text-zinc-400 uppercase tracking-widest mt-3 block">Clients</span>
                        </div>

                        <div class="pl-8">
                            <span class="block text-4xl  font-[400] tracking-tighter text-dark">15+</span>
                            <span class="text-[10px] font-mono text-zinc-400 uppercase tracking-widest mt-3 block">Countries</span>
                        </div>

                    </div>
                </div>

                <div class="relative" data-aos="zoom-in-left" data-aos-delay="400">
                    <div class="rounded-[40px] overflow-hidden aspect-[4/3] shadow-2xl">
                        <img src="https://images.unsplash.com/photo-1714976326964-5dc66a257d93?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=1470&auto=format&fit=crop"
                            class="w-full h-full object-cover"
                            alt="Nesvra Team">
                    </div>

                    <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-2xl shadow-xl border border-zinc-50 hidden md:block">
                        <span class="text-[10px] font-mono font-bold uppercase tracking-widest text-royal">100+ Platforms Deployed</span>
                    </div>
                </div>

            </div>
        </div>
    </section>



    <section class="relative bg-dark py-32 px-6 lg:px-14 overflow-hidden" id="vision-timeline">

        <div class="max-w-[1200px] mx-auto relative">

            <div class="text-center mb-32" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-6">{02} The Evolution</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-white">Our path to <span class="italic font-serif">global impact.</span></h2>
            </div>

            <div class="absolute left-1/2 top-[200px] bottom-0 w-[1px] bg-white/10 -translate-x-1/2 hidden md:block">
                <div id="scroll-progress-line" class="absolute top-0 left-0 w-full bg-brandOrange shadow-[0_0_15px_#FF8A00] transition-all duration-300 ease-out" style="height: 0%;"></div>
            </div>

            <div class="relative space-y-32 md:space-y-52">

                <div class="timeline-item relative flex flex-col md:flex-row items-center justify-between group">
                    <div class="md:w-[45%] text-left md:text-right">
                        <span class="font-mono text-brandOrange text-xs mb-3 block">2018 — The Gap</span>
                        <h3 class="text-2xl md:text-2xl font-[400] text-zinc-700 transition-colors duration-500 timeline-text">The High-Barrier Era</h3>
                        <p class="mt-3 text-zinc-500 text-sm leading-relaxed max-w-sm md:ml-auto">
                            Enterprise-grade technology was a luxury for the few. We saw brilliant founders stalled by $400k/year engineering costs.
                        </p>
                    </div>
                    <div class="absolute left-1/2 -translate-x-1/2 w-3 h-3 bg-zinc-800 rounded-full border-2 border-dark z-20 hidden md:block timeline-dot transition-colors duration-300"></div>
                    <div class="md:w-[45%]"></div>
                </div>

                <div class="timeline-item relative flex flex-col md:flex-row items-center justify-between group">
                    <div class="md:w-[45%] order-2 md:order-1"></div>
                    <div class="absolute left-1/2 -translate-x-1/2 w-3 h-3 bg-zinc-800 rounded-full border-2 border-dark z-20 hidden md:block timeline-dot transition-colors duration-300"></div>
                    <div class="md:w-[45%] text-left order-1 md:order-2">
                        <span class="font-mono text-brandOrange text-xs mb-3 block">2020 — Nesvra Born</span>
                        <h3 class="text-2xl md:text-2xl font-[400] text-zinc-700 transition-colors duration-500 timeline-text">Democratizing Power</h3>
                        <p class="mt-3 text-zinc-500 text-sm leading-relaxed max-w-sm">
                            Launched our subscription-based engine. We flipped the model: high-end infrastructure, delivered at the speed of a startup.
                        </p>
                    </div>
                </div>

                <div class="timeline-item relative flex flex-col md:flex-row items-center justify-between group">
                    <div class="md:w-[45%] text-left md:text-right">
                        <span class="font-mono text-brandOrange text-xs mb-3 block">2026 & Beyond</span>
                        <h3 class="text-2xl md:text-2xl font-[400] text-zinc-700 transition-colors duration-500 timeline-text">Infinite Scalability</h3>
                        <p class="mt-3 text-zinc-500 text-sm leading-relaxed max-w-sm md:ml-auto">
                            Today, we don't just build apps; we power ecosystems. From digital wallets in Dubai to neobanks in Nigeria.
                        </p>
                    </div>
                    <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-zinc-800 rounded-full border-4 border-dark z-20 hidden md:block timeline-dot transition-colors duration-300 ring-4 ring-brandOrange/0 group-hover:ring-brandOrange/20"></div>
                    <div class="md:w-[45%]"></div>
                </div>



                <div class="timeline-item relative flex flex-col md:flex-row items-center justify-between group">
                    <div class="md:w-[45%] order-2 md:order-1"></div>
                    <div class="absolute left-1/2 -translate-x-1/2 w-3 h-3 bg-zinc-800 rounded-full border-2 border-dark z-20 hidden md:block timeline-dot transition-colors duration-300"></div>
                    <div class="md:w-[45%] text-left order-1 md:order-2">
                        <span class="font-mono text-brandOrange text-xs mb-3 block">Our Mission</span>
                        <h3 class="text-2xl md:text-2xl font-[400] text-zinc-700 transition-colors duration-500 timeline-text">Our Mission</h3>
                        <p class="mt-3 text-zinc-500 text-sm leading-relaxed max-w-sm">
                            To power the next generation of technology businesses with enterprise-grade infrastructure, expert teams, and scalable platforms making premium development accessible to startups, SMEs, and enterprises alike.
                        </p>
                    </div>
                </div>



                <div class="timeline-item relative flex flex-col md:flex-row items-center justify-between group">
                    <div class="md:w-[45%] text-left md:text-right">
                        <span class="font-mono text-brandOrange text-xs mb-3 block"> Our Vision</span>
                        <h3 class="text-2xl md:text-2xl font-[400] text-zinc-700 transition-colors duration-500 timeline-text"> Our Vision</h3>
                        <p class="mt-3 text-zinc-500 text-sm leading-relaxed max-w-sm md:ml-auto">
                            A world where any ambitious business can access the technology infrastructure it needs to compete at the highest level, regardless of geography or budget.
                        </p>
                    </div>
                    <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-zinc-800 rounded-full border-4 border-dark z-20 hidden md:block timeline-dot transition-colors duration-300 ring-4 ring-brandOrange/0 group-hover:ring-brandOrange/20"></div>
                    <div class="md:w-[45%]"></div>
                </div>

            </div>
        </div>
    </section>

    <script>
        // Logic to handle the line draw and text lighting
        window.addEventListener('scroll', () => {
            const section = document.querySelector('#vision-timeline');
            const progressLine = document.querySelector('#scroll-progress-line');
            const items = document.querySelectorAll('.timeline-item');

            const sectionRect = section.getBoundingClientRect();
            const viewportHeight = window.innerHeight;

            // Calculate line growth
            if (sectionRect.top < viewportHeight && sectionRect.bottom > 0) {
                const scrollDistance = viewportHeight - sectionRect.top;
                const progress = Math.min(Math.max(scrollDistance / sectionRect.height * 100, 0), 100);
                progressLine.style.height = `${progress}%`;
            }

            // Handle text activation and dot lighting
            items.forEach(item => {
                const rect = item.getBoundingClientRect();
                const text = item.querySelector('.timeline-text');
                const dot = item.querySelector('.timeline-dot');

                if (rect.top < viewportHeight / 1.5) {
                    text.classList.remove('text-zinc-700');
                    text.classList.add('text-white');
                    if (dot) {
                        dot.classList.remove('bg-zinc-800');
                        dot.classList.add('bg-brandOrange');
                        dot.style.boxShadow = '0 0 10px #FF8A00';
                    }
                } else {
                    text.classList.remove('text-white');
                    text.classList.add('text-zinc-700');
                    if (dot) {
                        dot.classList.remove('bg-brandOrange');
                        dot.classList.add('bg-zinc-800');
                        dot.style.boxShadow = 'none';
                    }
                }
            });
        });
    </script>

    <style>
        .timeline-text {
            transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .timeline-dot {
            transition: background-color 0.4s ease, box-shadow 0.4s ease;
        }
    </style>



    <section class="py-24 px-[5%] bg-[#f3f3f3]" id="core-values">
        <div class="max-w-[1300px] mx-auto">

            <div class="text-center mb-12" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">
                    {03} Our core beliefs
                </span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Values that define <br class="hidden md:block" />
                    our <span class="italic font-serif">work.</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[285px] px-0 md:px-8">

                <div class="md:col-span-1 rounded-[16px] overflow-hidden relative group shadow-sm" data-aos="fade-up">
                    <img src="https://i.pinimg.com/1200x/04/84/c2/0484c2eb7bd6af5620af8a6837524276.jpg?q=80&w=1470&auto=format&fit=crop"
                        class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 " alt="Focus">
                </div>

                <div class="bg-white p-[30px] rounded-[16px] flex flex-col justify-between shadow-[0_4px_20px_rgba(0,0,0,0.02)] border border-zinc-100" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl">
                        <i class="ri-flashlight-line text-soft"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-[400] text-dark mb-4 tracking-tight">Execution Excellence</h3>
                        <p class="text-soft text-sm leading-relaxed">We deliver with precision, speed, and obsessive quality. No half-measures in our engineering process.</p>
                    </div>
                </div>

                <div class="rounded-[16px] overflow-hidden shadow-sm group" data-aos="fade-up" data-aos-delay="200">
                    <img src="https://i.pinimg.com/736x/1b/a7/bd/1ba7bd18b8ffc8ef16cf8949ca8df4cf.jpg?q=80&w=1470&auto=format&fit=crop"
                        class="w-full h-full object-cover  transition-all duration-700" alt="Partnership">
                </div>

                <div class="md:col-span-2 bg-white p-[30px] rounded-[16px] flex flex-col md:flex-row justify-between items-start md:items-end shadow-[0_4px_20px_rgba(0,0,0,0.02)] border border-zinc-100" data-aos="fade-up">
                    <div class="max-w-md">
                        <div class="w-14 h-14 rounded-2xl  flex items-center justify-center text-2xl mb-8">
                            <i class="ri-team-line text-soft"></i>
                        </div>
                        <h3 class="text-xl font-[400] text-dark mb-4 tracking-tight">Client Partnership</h3>
                        <p class="text-soft text-sm leading-relaxed">We act as an extension of your team your success is our success. We share the same skin in the game.</p>
                    </div>
                    <div class="mt-8 md:mt-0 flex items-center gap-4 text-brandOrange font-mono text-[10px] uppercase tracking-widest font-bold">
                        <span class="w-2 h-2 rounded-full bg-brandOrange animate-pulse"></span>
                        Unified Workflow
                    </div>
                </div>

                <div class="bg-white p-[30px] rounded-[16px] flex flex-col justify-between shadow-[0_4px_20px_rgba(0,0,0,0.02)] border border-zinc-100" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-14 h-14 rounded-2xl  flex items-center justify-center text-2xl">
                        <i class="ri-brain-line text-soft"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-[400] text-dark mb-4 tracking-tight">Technical Mastery</h3>
                        <p class="text-soft text-sm leading-relaxed">Deep expertise in modern stacks, cloud architecture, and fintech-grade security protocols.</p>
                    </div>
                </div>

                <div class="bg-white p-[30px] rounded-[16px] flex flex-col justify-between shadow-[0_4px_20px_rgba(0,0,0,0.02)] border border-zinc-100" data-aos="fade-up">
                    <div class="w-14 h-14 rounded-2xl  flex items-center justify-center text-2xl">
                        <i class="ri-line-chart-line text-soft"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-[400] text-dark mb-4 tracking-tight">Scalability First</h3>
                        <p class="text-soft text-sm leading-relaxed">Systems architected for 10x growth from day one. We never build for today alone.</p>
                    </div>
                </div>

                <div class="rounded-[16px] overflow-hidden shadow-sm group" data-aos="fade-up" data-aos-delay="100">
                    <img src="https://i.pinimg.com/736x/ac/ce/6b/acce6bc04dc99554fe1ab794030aa8ab.jpg?q=80&w=1426&auto=format&fit=crop"
                        class="w-full h-full object-cover transition-all duration-700" alt="Data">
                </div>

                <div class="bg-white p-[30px] rounded-[16px] flex flex-col justify-between shadow-[0_4px_20px_rgba(0,0,0,0.02)] border border-zinc-100" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-14 h-14 rounded-2xl  flex items-center justify-center text-2xl">
                        <i class="ri-message-3-line text-soft"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-[400] text-dark mb-4 tracking-tight">Transparent Communication</h3>
                        <p class="text-soft text-sm leading-relaxed">Weekly reports, direct Slack access, and clear roadmaps. No black boxes in our delivery.</p>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <?php
    $team_members = [
        [
            "name" => "Michael Adeyemi",
            "role" => "Co-founder & CEO",
            "focus" => "Strategy & Finance",
            "image" => "https://images.unsplash.com/photo-1500648767791-00dcc994a43f?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Chioma Eze",
            "role" => "Co-founder & CTO",
            "focus" => "Cloud Architecture",
            "image" => "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "David Johnson",
            "role" => "Head of Product",
            "focus" => "Product Design",
            "image" => "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Sarah Okafor",
            "role" => "Engineering Lead",
            "focus" => "Full-Stack",
            "image" => "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Tunde Kazeem",
            "role" => "Fintech Specialist",
            "focus" => "Payments & Compliance",
            "image" => "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Amara Jibril",
            "role" => "Technical PM",
            "focus" => "Agile Delivery",
            "image" => "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Liam Walker",
            "role" => "DevOps Architect",
            "focus" => "Cloud Infra",
            "image" => "https://images.unsplash.com/photo-1504593811423-6dd665756598?q=80&w=800",
            "linkedin" => "#"
        ],
        [
            "name" => "Moyin Nwachukwu",
            "role" => "Senior UX Designer",
            "focus" => "User Experience",
            "image" => "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=800",
            "linkedin" => "#"
        ]
    ];
    ?>

    <section class="py-24 px-[5%] bg-dark" id="team-v3">
        <div class="max-w-[1300px] mx-auto">

            <div class="flex flex-col md:flex-row items-end justify-between gap-10 mb-20">
                <div class="max-w-3xl" data-aos="fade-right">
                    <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-6">
                        {04} Meet the minds
                    </span>
                    <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-white leading-[1.1]">
                        The people behind your <span class="italic font-serif">success.</span>
                    </h2>
                    <p class="mt-4 text-zinc-400 text-lg leading-relaxed max-w-xl">
                        We are engineers, strategists, and builders obsessed with your outcomes. Each member brings deep experience across fintech and cloud innovation.
                    </p>
                </div>

                <div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php foreach ($team_members as $member): ?>
                    <div class="group relative h-[460px] rounded-[18px] overflow-hidden bg-[#03030f] border border-white/5" data-aos="fade-up">

                        <img src="<?= $member['image'] ?>"
                            class="w-full h-full object-cover opacity-80 grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105 group-hover:opacity-100"
                            alt="<?= $member['name'] ?>">

                        <div class="absolute inset-0 pointer-events-none transition-opacity duration-500"
                            style="background: linear-gradient(180deg, rgba(3, 3, 15, 0) 0%, #03030f 100%);">
                        </div>

                        <div class="absolute inset-0 p-6 flex flex-col justify-end">
                            <div class="flex items-end justify-between relative z-10">

                                <div class="transform transition-transform duration-500 group-hover:-translate-y-1">
                                    <h3 class="text-2xl font-[400] text-white tracking-tight leading-none"><?= $member['name'] ?></h3>
                                    <p class="text-zinc-400 text-sm mt-2 font-[400]"><?= $member['role'] ?></p>
                                </div>

                                <?php if (!empty($member['linkedin'])): ?>
                                    <a href="<?= $member['linkedin'] ?>" target="_blank"
                                        class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center text-white 
                               opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 
                               hover:bg-white hover:text-black transition-all duration-500 ease-out">
                                        <i class="ri-linkedin-fill text-xl"></i>
                                    </a>
                                <?php endif; ?>

                            </div>

                            <div class="mt-4 pt-4 border-t border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100">
                                <span class="text-[10px] font-mono text-brandOrange uppercase tracking-[0.2em] font-bold">
                                    <?= $member['focus'] ?>
                                </span>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>


            <div class=" mt-8">
                <div class="bg-[#1a1a1a] rounded-[32px] p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 border border-white/5 transition-all duration-500 hover:border-white/10" data-aos="zoom-in">

                    <div class="flex items-start gap-6 max-w-3xl">
                        <div class="hidden md:flex w-14 h-14 rounded-2xl bg-white/5 items-center justify-center text-white shrink-0">
                            <i class="ri-file-list-3-line text-2xl opacity-80"></i>
                        </div>

                        <div class="space-y-3">
                            <h3 class="text-3xl md:text-3xl font-semibold text-white tracking-tight leading-tight">
                                Join the team building the <span class="italic font-serif">future</span> of technology
                            </h3>
                            <p class="text-zinc-400 text-sm md:text-base leading-relaxed">
                                We’re builders, dreamers, and problem‑solvers. If you thrive on high-impact work and want to shape how businesses use technology, you belong here.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3 shrink-0">
                        <a href="contact.php" class="h-14 px-8 rounded-full bg-white text-black font-bold text-[13px] uppercase tracking-wider flex items-center hover:bg-brandOrange hover:text-white transition-all duration-500">
                            View open roles
                        </a>
                        <div class="w-14 h-14 rounded-full bg-brandOrange text-black flex items-center justify-center text-xl shadow-[0_0_20px_rgba(0,208,100,0.2)]">
                            <i class="ri-arrow-right-up-line"></i>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <style>
        /* Specific styling for the LinkedIn circle icon to match your crop */
        #team-v3 .ri-linkedin-fill {
            line-height: 1;
        }
    </style>


    <?php
    $industries = [
        ["title" => "Fintech", "icon" => "ri-bank-line"],
        ["title" => "Logistics & Supply Chain", "icon" => "ri-truck-line"],
        ["title" => "E‑commerce & Retail", "icon" => "ri-shopping-bag-3-line"],
        ["title" => "Healthtech", "icon" => "ri-heart-pulse-line"],
        ["title" => "EdTech", "icon" => "ri-book-open-line"]
    ];
    ?>

    <section class="py-24 px-[5%] bg-white" id="expertise-grid">
        <div class="max-w-[1300px] mx-auto text-center">

            <div class="mb-20" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-electric uppercase block mb-6">
                    {05} Expertise depth
                </span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-black leading-tight max-w-3xl mx-auto">
                    Transforming ambitious ideas into spectacular <span class="italic font-serif text-electric">solutions</span> across global industries.
                </h2>
            </div>

            <div class="relative pt-12 border-t border-zinc-100">
                <div class="grid grid-cols-2 md:grid-cols-5 gap-y-12">
                    <?php foreach ($industries as $index => $item): ?>
                        <div class="relative px-8 flex flex-col items-center group transition-all duration-500">

                            <?php if ($index !== 0): ?>
                                <div class="hidden md:block absolute left-0 top-1/4 bottom-1/4 w-[1px] bg-zinc-100"></div>
                            <?php endif; ?>

                            <div class="mb-8 text-zinc-300 group-hover:text-blue-600 group-hover:scale-110 transition-all duration-500 transform-gpu">
                                <i class="<?= $item['icon'] ?> text-4xl font-light"></i>
                            </div>

                            <h3 class="text-lg md:text-xl font-bold text-zinc-800 tracking-tight group-hover:text-black transition-colors">
                                <?= $item['title'] ?>
                            </h3>

                            <div class="mt-4 w-0 h-[2px] bg-blue-600 group-hover:w-8 transition-all duration-500"></div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

        </div>
    </section>


    <section class="py-24 px-[5%] bg-white" id="why-choose-us">
        <div class="max-w-[1300px] mx-auto text-center">

            <div class="mb-20" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-6">
                    {06} Why Choose Us?
                </span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-black leading-tight max-w-2xl mx-auto">
                    There are thousands of agencies, so why <span class="italic font-serif text-brandOrange">choose</span> us?
                </h2>
            </div>

            <div class="relative border border-zinc-100 rounded-[32px] overflow-hidden group">
                <div class="grid grid-cols-1 md:grid-cols-3">

                    <div class="p-16 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-zinc-100 transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-hourglass-2-line text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">Valuing your time</h3>
                    </div>

                    <div class="p-16 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-zinc-100 transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-bar-chart-box-line text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">Delivering data driven results</h3>
                    </div>

                    <div class="p-16 flex flex-col items-center justify-center transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-booklet-line text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">Personalized plans</h3>
                    </div>

                    <div class="hidden md:block col-span-3 h-[1px] bg-zinc-100 relative">
                        <div class="absolute inset-y-0 left-1/3 w-[1px] bg-zinc-100"></div>
                        <div class="absolute inset-y-0 left-2/3 w-[1px] bg-zinc-100"></div>
                    </div>

                    <div class="p-16 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-zinc-100 transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-node-tree text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">Using the latest technology</h3>
                    </div>

                    <div class="p-16 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-zinc-100 transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-hand-heart-line text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">Partnering in your success</h3>
                    </div>

                    <div class="p-16 flex flex-col items-center justify-center transition-all duration-500 hover:bg-zinc-50/50">
                        <div class="mb-8 text-zinc-300 group-hover:text-blue-600 transition-colors duration-500">
                            <i class="ri-customer-service-2-line text-5xl font-light"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-800 tracking-tight">24/7 Customer support</h3>
                    </div>

                </div>
            </div>
        </div>
    </section>






    <section class="py-20 px-[5%] bg-white overflow-hidden" id="final-call">

        <div class="max-w-[1200px] mx-auto">
            <div class="relative w-full md:h-[500px] rounded-[40px] overflow-hidden flex items-center justify-center group">

                <div class="absolute inset-0 z-0">
                    <img src="Asset/TechTeam.png"
                        alt="Global Remittance"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                    <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-black/60"></div>
                </div>

                <div class="relative z-10 w-full px-8 py-16 md:py-0 text-center">
                    <div class="max-w-[800px] mx-auto" data-aos="zoom-in">

                        <h2 class="text-4xl md:text-6xl font-[400] mt-4 tracking-tighter text-white leading-tight mb-3 text-Capitalize">
                            Ready to start your technology <br>
                            <span class="italic font-serif text-brandOrange">journey Today ? </span>
                        </h2>

                        <p class="text-white/80 text-lg mb-6 max-w-[600px] mx-auto leading-relaxed font-[400]">
                            Book a free strategy call and discover how our tech team subscription transforms your business.
                        </p>



                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="contact.php" class="w-full sm:w-auto px-10 py-5 bg-white text-royal rounded-full font-bold text-xs uppercase tracking-widest hover:bg-brandOrange hover:text-white transition-all shadow-xl">
                                Partner with Us →
                            </a>
                            <a href="book-strategy-call.php" class="w-full sm:w-auto px-10 py-5 bg-brandOrange text-white rounded-full font-bold text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all shadow-xl">
                                Book a Free Consultation
                            </a>
                        </div>

                    </div>
                </div>

                <div class="absolute top-10 right-10 w-32 h-32 bg-electric/20 rounded-full blur-3xl pointer-events-none"></div>
                <div class="absolute -bottom-10 -left-10 w-48 h-48 bg-brandOrange/20 rounded-full blur-3xl pointer-events-none"></div>
            </div>
        </div>
    </section>




    <?php include 'components/Scroll-to-top.php'; ?>
    <?php include 'components/footer.php'; ?>


</body>

</html>