@extends('layouts.app')

@section('title', 'DIGITAL STUDIO - Revitalise Your Online Business Presence')

@section('content')
    <!-- Hero Section -->
    <section class="hero hero-home position-relative overflow-hidden">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5">
            <div class="row align-items-center">
                <!-- Hero Content -->
                <div class="col-lg-10 mx-auto text-center" data-aos="fade-up">
                    <h1 class="display-5 fw-bold mb-4" data-aos="zoom-in">
                        <span class="text-gradient">We BUILD THE UK</span> MARKET NEXT LEVEL
                    </h1>



                    <!-- Services Checklist with Icons -->
                    <div class="services-checklist mb-5" data-aos="fade-up" data-aos-delay="200">
                        <div class="row g-4 justify-content-center">
                            @php
                                $services = [
                                    ['icon' => 'fa-code', 'name' => 'Web Development', 'desc' => 'Bespoke Digital Solutions'],
                                    ['icon' => 'fa-mobile-alt', 'name' => 'Mobile Applications', 'desc' => 'iOS & Android Experts'],
                                    ['icon' => 'fa-shopping-cart', 'name' => 'eCommerce', 'desc' => 'Professional Online Stores'],
                                    ['icon' => 'fa-palette', 'name' => 'Logo Design', 'desc' => 'Brand Identity Specialists'],
                                    ['icon' => 'fa-search', 'name' => 'SEO', 'desc' => 'Search rankings'],
                                    ['icon' => 'fa-hashtag', 'name' => 'SMM', 'desc' => 'Social media marketing']
                                ];
                            @endphp

                            @foreach($services as $service)
                                <div class="col-md-4 col-sm-6">
                                    <div class="service-item-check p-3 bg-white rounded-4 shadow-sm h-100">
                                        <div class="d-flex align-items-center">
                                            <div class="service-icon-check me-3">
                                                <i class="fas {{ $service['icon'] }} text-primary"></i>
                                            </div>
                                            <div class="flex-grow-1 text-start">
                                                <h6 class="fw-bold mb-0" style="font-size: 0.95rem;">{{ $service['name'] }}
                                                </h6>
                                                <p class="text-muted smallest mb-0" style="font-size: 0.75rem;">
                                                    {{ $service['desc'] }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-3 justify-content-center mb-5">
                        <a href="{{ route('packages') }}"
                            class="btn btn-primary btn-lg px-5 py-3 rounded-pill shadow-primary"
                            aria-label="Get started with our packages">
                            Get Started Now <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                        <a href="{{ route('contact') }}"
                            class="btn btn-outline-primary btn-lg px-5 py-3 rounded-pill bg-white shadow-sm"
                            aria-label="Schedule a free consultation">
                            Free Consultation
                        </a>
                    </div>

                    <!-- Social Proof / Trust Signals -->
                    <div class="hero-trust-signals d-flex align-items-center justify-content-center gap-4 py-3"
                        data-aos="fade-up" data-aos-delay="400">
                        <div class="d-flex align-items-center">
                            <div class="avatar-group me-3">
                                <span class="avatar bg-primary text-white">AS</span>
                                <span class="avatar bg-secondary text-white">JD</span>
                                <span class="avatar bg-info text-white">MK</span>
                                <span class="avatar bg-dark text-white">+200</span>
                            </div>
                            <div class="trust-text text-start">
                                <div class="rating text-warning small mb-1">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <p class="mb-0 small fw-bold">Trusted by 200+ Enterprise Clients</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        /* Services Checklist Styles */
        .services-checklist {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(12px);
            padding: 2.5rem;
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 25px 50px -12px rgba(153, 41, 234, 0.1);
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .service-item-check {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--primary-light) !important;
        }

        .service-item-check:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px -5px rgba(153, 41, 234, 0.15) !important;
            background: white !important;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-badge .badge {
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(153, 41, 234, 0.1);
        }

        .service-icon-check {
            width: 48px;
            height: 48px;
            background: var(--primary-color);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-smooth);
        }

        .service-item-check .text-primary {
            color: white !important;
        }

        .service-item-check:hover .service-icon-check {
            background: var(--primary-ultra-light);
        }

         .service-item-check:hover .text-primary{
            color: var(--primary-color) !important;
        }



        .checkmark i {
            font-size: 1.25rem;
            opacity: 0.8;
        }



        /* Services Section Enhancement */
        .services-section {
            background-color: #f8faff;
            background-image:
                linear-gradient(rgba(243, 232, 253, 0.92), rgba(243, 232, 253, 0.92)),
                url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&q=80&w=2070");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
        }

        .section-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .services-section .container {
            position: relative;
            z-index: 1;
        }

        .service-card-minimal {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid var(--primary-color);
            border-radius: 20px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .service-card-minimal:hover {
            background: white;
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(153, 41, 234, 0.1);
        }

        /* Responsive */
        @media (max-width: 767.98px) {
            .services-checklist {
                padding: 1.5rem;
            }

            .service-item-check {
                padding: 1rem;
            }
        }
    </style>

    <!-- Services Section - Static Grid -->
    <section class="services-section py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="section-pattern"></div>
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up" data-aos-delay="100">
                <h2 class="display-5 fw-bold mb-4 text-dark">
                    Our <span class="text-primary">Services</span>
                </h2>
            </div>

            <div class="row g-4">
                @php
                    $services = [
                        ['icon' => 'fa-mobile-alt', 'title' => 'Mobile App Development', 'link' => route('services.app')],
                        ['icon' => 'fa-code', 'title' => 'Web Development', 'link' => route('services')],
                        ['icon' => 'fa-shopping-cart', 'title' => 'eCommerce Website', 'link' => route('services.ecom')],
                        ['icon' => 'fa-palette', 'title' => 'Logo Design', 'link' => route('services.logo')],
                        ['icon' => 'fa-bullhorn', 'title' => 'Branding', 'link' => route('services.brand')],
                        ['icon' => 'fa-hashtag', 'title' => 'Social Media Marketing', 'link' => route('services.smm')],
                        ['icon' => 'fa-search', 'title' => 'Search Engine Optimisation', 'link' => route('services.seo')],
                        ['icon' => 'fa-video', 'title' => 'Video Animation', 'link' => route('contact')],
                    ];
                @endphp

                @foreach($services as $index => $service)
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="{{ $index * 50 }}">
                        <a href="{{ $service['link'] }}" class="text-decoration-none">
                            <div class="service-card-minimal h-100 text-center p-4">
                                <div class="service-icon-minimal mb-4">
                                    <i class="fas {{ $service['icon'] }} fa-2x text-primary"></i>
                                </div>
                                <h4 class="h6 fw-bold text-dark mb-0">{{ $service['title'] }}</h4>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="text-center mt-5" data-aos="fade-up" data-aos-delay="200">
                <a href="{{ route('services') }}" class="btn btn-outline-primary btn-lg rounded-pill px-5">
                    <i class="fas fa-eye me-2"></i> View All Services
                </a>
            </div>
        </div>
    </section>

    <!-- Features & Stats Section -->
    <section class="marketing-services py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-6">
                <h2 class="display-5 fw-bold mb-3 text-dark">
                    Evolving Businesses into Market-Leading <span class="text-primary">Brands</span>
                </h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;">
                    Establish your digital authority with DIGITAL STUDIO. We empower organisations to surpass their
                    competition utilizing expert, cost-effective digital marketing solutions. Every service is meticulously
                    tailored to reflect your brand's unique identity and core values.
                </p>
            </div>

            <!-- Features Grid -->
            <div class="row g-4 mb-6">
                @php
                    $features = [
                        ['icon' => 'fa-headset', 'title' => '24/7 Client Assistance', 'desc' => 'Round-the-clock professional support for all enquiries'],
                        ['icon' => 'fa-users', 'title' => 'Professional Specialist Team', 'desc' => 'Expert team with a diverse range of digital skills'],
                        ['icon' => 'fa-shield-alt', 'title' => 'Satisfaction Guarantee', 'desc' => 'Complete satisfaction or a 100% money-back guarantee'],
                        ['icon' => 'fa-award', 'title' => 'Assured Quality', 'desc' => 'Premium standards maintained in every project'],
                        ['icon' => 'fa-sync-alt', 'title' => 'Unlimited Revisions', 'desc' => 'Refining every detail until perfection is achieved'],
                        ['icon' => 'fa-rocket', 'title' => 'Expedited Delivery', 'desc' => 'Efficient and prompt turnaround times']
                    ];
                @endphp

                @foreach($features as $index => $feature)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                        <div class="feature-card h-100">
                            <div class="feature-icon">
                                <i class="fas {{ $feature['icon'] }} text-primary"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-2">{{ $feature['title'] }}</h3>
                            <p class="text-muted mb-0">{{ $feature['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Statistics -->
            <div class="stats-container p-5 rounded-4" data-aos="fade-up" aria-label="Our achievements">
                <div class="row g-4">
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="200">200+</div>
                            <p class="mb-0 text-white opacity-90">Happy Clients</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="280">280+</div>
                            <p class="mb-0 text-white opacity-90">Projects</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number">100%</div>
                            <p class="mb-0 text-white opacity-90">Success Rate</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="420">420K+</div>
                            <p class="mb-0 text-white opacity-90">Followers</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="10">10+</div>
                            <p class="mb-0 text-white opacity-90">Years Experience</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Showcase -->
    <section class="showcase-section py-5" aria-labelledby="portfolio-title">
        <div class="container">
            <div class="text-center mb-6">
                <h2 id="portfolio-title" class="display-5 fw-bold mb-3 text-dark">
                    Our <span class="text-primary">Showcase</span>
                </h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                    Explore how our bespoke solutions bolster brand awareness and foster sustainable commercial growth. Each
                    project reflects our clients' unique ambitions and professional standards.
                </p>
            </div>

            <!-- Portfolio Grid -->
            <div class="row g-4 mb-5">
                @php
                    $portfolios = [
                        [
                            'image' => asset('assets/show-case 1.png'),
                            'category' => 'Web Development',
                            'title' => 'Bespoke Website Architecture',
                            'subtitle' => 'Bespoke Professional Website',
                            'desc' => 'Modern responsive design engineered with a user-centric interface',
                            'route' => 'services'
                        ],
                        [
                            'image' => asset('assets/show-case 2.png'),
                            'category' => 'Web Development',
                            'title' => 'Advanced Platform Engineering',
                            'subtitle' => 'High-Performance Web Solution',
                            'desc' => 'Scalable technical architecture built for enterprise-level growth.',
                            'route' => 'services'
                        ],
                        [
                            'image' => asset('assets/ecom  (1).png'),
                            'category' => 'eCommerce',
                            'title' => 'Professional eCommerce Solution',
                            'subtitle' => 'Enterprise eCommerce Solution',
                            'desc' => 'Full-featured professional eCommerce architecture with secure checkout.',
                            'route' => 'services.ecom'
                        ],
                        [
                            'image' => asset('assets/logo (1).png'),
                            'category' => 'Logo Design',
                            'title' => 'Bespoke Brand Identity',
                            'subtitle' => 'Bespoke Brand Identity',
                            'desc' => 'Creative identity design and branding services for unique positioning.',
                            'route' => 'services.logo'
                        ],
                        [
                            'image' => asset('assets/brand (1).png'),
                            'category' => 'Branding',
                            'title' => 'Corporate Identity Design',
                            'subtitle' => 'Enterprise Branding Package',
                            'desc' => 'Comprehensive visual system designed for market dominance.',
                            'route' => 'services.brand'
                        ],
                        [
                            'image' => asset('assets/logo (2).png'),
                            'category' => 'UI/UX Design',
                            'title' => 'User Interface Engineering',
                            'subtitle' => 'Modern UX Transformation',
                            'desc' => 'Data-driven design process optimizing user engagement and flow.',
                            'route' => 'services.web'
                        ]
                    ];
                @endphp

                @foreach($portfolios as $index => $item)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ ($index + 1) * 50 }}">
                        <div class="portfolio-card h-100">
                            <div class="portfolio-image-wrapper">
                                <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" class="portfolio-image"
                                    loading="lazy">
                                <div class="portfolio-overlay">
                                    <div class="portfolio-content">
                                        <span class="portfolio-category badge bg-primary mb-2">
                                            {{ $item['category'] }}
                                        </span>
                                        <h3 class="h5 fw-bold mb-2 text-white">
                                            {{ $item['title'] }}
                                        </h3>
                                        <a href="{{ route($item['route']) }}" class="btn btn-outline-light btn-sm rounded-pill">
                                            View Case Study <i class="fas fa-arrow-right ms-2"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-info p-4">
                                <h3 class="h6 fw-bold mb-2">
                                    {{ $item['subtitle'] }}
                                </h3>
                                <p class="text-muted small mb-0">
                                    {{ $item['desc'] }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="text-center" data-aos="fade-up">
                <a href="{{ route('portfolio') }}" class="btn btn-primary btn-lg rounded-pill px-5">
                    View All Projects
                </a>
            </div>
        </div>
    </section>

    <!-- How We Work -->
    <section class="digital-journey py-5 bg-primary-ultra-light" aria-labelledby="process-title">
        <div class="container">
            <div class="text-center mb-6">
                <h2 id="process-title" class="display-5 fw-bold mb-3 text-dark">
                    How We Advance Your <span class="text-primary">Digital Journey</span>
                </h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                    Partnering with DIGITAL STUDIO provides significant commercial advantages. Expect enhanced brand
                    recognition, superior client engagement, and an exceptional return on investment.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="process-card h-100">
                        <div class="process-number">01</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Enquiry & Consultation</h3>
                        <p class="text-muted mb-0">
                            We thoroughly explore your requirements, objectives, and vision to gain a comprehensive
                            understanding of your project needs.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="process-card h-100">
                        <div class="process-number">02</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-pencil-ruler"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Bespoke Development</h3>
                        <p class="text-muted mb-0">
                            Our specialist team engineers and develops your project with meticulous precision, ensuring it
                            aligns with professional standards.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="process-card h-100">
                        <div class="process-number">03</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Deployment & Success</h3>
                        <p class="text-muted mb-0">
                            We launch your solution seamlessly and offer ongoing assistance to ensure peak performance and
                            sustained enterprise growth.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing py-5" id="pricing-section" aria-labelledby="pricing-title">
        <div class="container-fluid">
            <div class="text-center mb-6">
                <h2 id="pricing-title" class="display-5 fw-bold mb-3 text-dark">
                    Strategic <span class="text-primary">Pricing Solutions</span>
                </h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                    Select the ideal plan tailored to your organisational requirements. All solutions include our commitment
                    to excellence and total client satisfaction.
                </p>
            </div>

            <!-- Bootstrap Tabs Navigation -->
            <ul class="nav nav-tabs pricing-tabs d-flex flex-wrap justify-content-center gap-2 mb-5" id="pricingTabs"
                role="tablist" data-aos="fade-up" data-aos-delay="200">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active rounded-pill px-4" id="logo-tab" data-bs-toggle="tab"
                        data-bs-target="#logo" type="button" role="tab">Logo Design</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="web-tab" data-bs-toggle="tab" data-bs-target="#web"
                        type="button" role="tab">Web Development</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="branding-tab" data-bs-toggle="tab"
                        data-bs-target="#branding" type="button" role="tab">Brand Identity</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo"
                        type="button" role="tab">Search Optimisation</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="video-tab" data-bs-toggle="tab" data-bs-target="#video"
                        type="button" role="tab">Video Animation</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="smm-tab" data-bs-toggle="tab" data-bs-target="#smm"
                        type="button" role="tab">Social Marketing</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="app-tab" data-bs-toggle="tab" data-bs-target="#app"
                        type="button" role="tab">Mobile Applications</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link rounded-pill px-4" id="ecommerce-tab" data-bs-toggle="tab"
                        data-bs-target="#ecommerce" type="button" role="tab">eCommerce</button>
                </li>
            </ul>

            <!-- Bootstrap Tab Content -->
            <div class="tab-content" id="pricingTabsContent">

                <!-- Logo Design Tab -->
                <div class="tab-pane fade show active" id="logo" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter identity Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£39</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>2 Bespoke Logo Design
                                            Concepts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>1 Dedicated Creative
                                            Specialist</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3 Comprehensive
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Final Files (JPG &
                                            PNG)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24-72 Hours
                                            Turnaround</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional Identity Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£59</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3-4 Bespoke Logo Design
                                            Concepts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>2 Passionate
                                            Designers</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>5-6 Comprehensive
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Final Files (JPG, PNG &
                                            PDF)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24-72 Hours
                                            Turnaround</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite Identity Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£99</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>6 Unique Logo Design
                                            Concepts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3 Senior Creative
                                            Specialists</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited Comprehensive
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Source Files (JPG,
                                            PNG, PDF, Ai/Psd)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24-72 Hours
                                            Delivery</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Web Development Tab -->
                <div class="tab-pane fade" id="web" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter Web Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£149</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>1-3 Page Bespoke
                                            Website</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Powered by
                                            WordPress</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>1 Bespoke Banner
                                            Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Interactive Hover
                                            Effects</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Contact & Enquiry
                                            Form</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3-4 Comprehensive
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Deployment
                                            Assistance</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Intellectual
                                            Property Ownership</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Satisfaction
                                            Guarantee</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Professional Email</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>SSL Certificate</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional Web Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£349</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>4-5 Page Bespoke
                                            Website</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Powered by
                                            WordPress</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3 Dynamic Sliding
                                            Banners</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Interactive Hover
                                            Effects</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>3 Professional Email
                                            Addresses</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited Comprehensive
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Contact & Enquiry
                                            Form</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Deployment
                                            Assistance</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Fully Responsive
                                            Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Intellectual
                                            Property Ownership</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Satisfaction
                                            Guarantee</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>SSL Certificate</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite Web Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£1299</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>10 page Bespoke
                                            Website</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Custom WordPress or PHP
                                            Development</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>High-End Interactive &
                                            Dynamic Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>10 Professional Stock
                                            Images</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>10 Interactive Sliding
                                            Banners</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>5 Professional Email
                                            Addresses</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Deployment
                                            Assistance</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Fully Responsive
                                            Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Intellectual
                                            Property Ownership</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>100% Satisfaction
                                            Guarantee</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full SSL
                                            Certificate</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Brand Identity Tab -->
                <div class="tab-pane fade" id="branding" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter Identity Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£149 <span class="per-month">Month</span></span>
                                    <span class="text-muted small d-block">monthly payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>9 Bespoke Social
                                            Posts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Social Media
                                            Strategy</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Account
                                            Configuration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Monthly Performance
                                            Insights</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>1 Video Reel (15-30
                                            Seconds)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Bespoke Content
                                            Creation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Social Media
                                            Monitoring</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Guaranteed Follower
                                            Growth</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional Identity Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£249 <span class="per-month">Month</span></span>
                                    <span class="text-muted small d-block">monthly payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>9 Bespoke Social
                                            Posts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Social Media
                                            Strategy</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Account
                                            Configuration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Content
                                            Creation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Social Media
                                            Monitoring</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Monthly Performance
                                            Insights</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>1 Video Reel (15-30
                                            Seconds)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Guaranteed Follower
                                            Growth</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite Identity Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£399 <span class="per-month">Month</span></span>
                                    <span class="text-muted small d-block">monthly payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>9 Bespoke Social
                                            Posts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>1 Video Reel (15-30
                                            Seconds)</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Social Media
                                            Strategy</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Account
                                            Configuration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Content
                                            Creation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Social Media
                                            Monitoring</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Guaranteed Follower
                                            Growth</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Monthly Performance
                                            Insights</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search Optimisation Tab -->
                <div class="tab-pane fade" id="seo" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter SEO Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£79</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Comprehensive SEO
                                            Audit</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Strategic Keyword
                                            Research</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>On-Page SEO
                                            Optimisation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Intellectual
                                            Property Rights</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Off-Page SEO
                                            Strategies</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional SEO Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£199</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Search
                                            Optimisation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Technical SEO
                                            Enhancements</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Quality Link
                                            Building</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Content Excellence
                                            Strategy</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24/7 Dedicated
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite SEO Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£499</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Enterprise-Level
                                            SEO</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>In-depth Competitive
                                            Analysis</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>AI-Enhanced SEO
                                            Strategies</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Continuous
                                            Optimisation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Priority Client
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Video Animation Tab -->
                <div class="tab-pane fade" id="video" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">2D Animation Essential</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£199</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>30-Second
                                            Duration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Scriptwriting</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Creative
                                            Storyboarding</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Graphics</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Animation & SFX</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full HD
                                            Resolution</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Voiceover</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Synchronised
                                            Audio</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Delivery within 2-3
                                            Weeks</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">2D Animation Professional</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£299</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Up to 60-Second
                                            Duration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Scriptwriting</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Creative
                                            Storyboarding</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Graphics</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Animation & SFX</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full HD
                                            Resolution</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Voiceover</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Synchronised
                                            Audio</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Delivery within 3-4
                                            Weeks</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">2D Animation Supreme</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£999</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Up to 120-Second
                                            Duration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Scriptwriting</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Creative
                                            Storyboarding</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Graphics</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Animation & SFX</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full HD
                                            Resolution</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Professional
                                            Voiceover</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Synchronised
                                            Audio</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited
                                            Revisions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Delivery within 4-6
                                            Weeks</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Marketing Tab -->
                <div class="tab-pane fade" id="smm" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter Social Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£99</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>2 Bespoke Social Media
                                            Posts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Account
                                            Configuration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Essential Engagement
                                            Tactics</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Intellectual
                                            Property Rights</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Paid Advertising
                                            Management</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional Social Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£299</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>10 Bespoke Posts</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Proactive Community
                                            Management</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Strategic Hashtag
                                            Research</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Paid Advertising
                                            Strategy</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24/7 Dedicated
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite Social Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£799</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Content
                                            Production</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Advanced Audience
                                            Targeting</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Paid Ad
                                            Management</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Strategic Influencer
                                            Collaboration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Priority Client
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mobile Applications Tab -->
                <div class="tab-pane fade" id="app" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter Application Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£499</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Essential App UI/UX
                                            Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Interactive
                                            Prototype</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Android or iOS
                                            Platform</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full Intellectual
                                            Property Rights</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Advanced
                                            Functionality</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional Application Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£999</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Comprehensive UI/UX
                                            Design</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Cross-platform
                                            Development</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Robust Backend
                                            Integration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Advanced Features</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24/7 Dedicated
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite Bespoke App Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£1999</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Mobile
                                            Development</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>AI & ML
                                            Integrations</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Rigorous End-to-End
                                            Testing</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Priority Client
                                            Assistance</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Continuous
                                            Maintenance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- eCommerce Tab -->
                <div class="tab-pane fade" id="ecommerce" role="tabpanel" tabindex="0">
                    <div class="row g-4 pricing-container justify-content-center">
                        <!-- Basic Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Starter eCommerce Package</h4>
                                <div
                                    class="plan-label bg-primary-ultra-light text-primary py-2 px-4 rounded-pill d-inline-block">
                                    Best Value
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£299</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke eCommerce
                                            Configuration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>5 Product Uploads</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Secure Payment Gateway
                                            Integration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Fully Mobile
                                            Responsive</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 not-included text-muted opacity-50">
                                        <i class="fas fa-times-circle mt-1 text-danger"></i> <span>Custom
                                            Functionality</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Standard Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="pricing-card popular h-100">
                                <h4 class="fw-bold mb-4">Professional eCommerce Package</h4>
                                <div class="plan-label bg-primary text-white py-2 px-4 rounded-pill d-inline-block">
                                    Most Popular
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£599</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Comprehensive eCommerce
                                            Solution</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Unlimited Product
                                            Catalogues</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Advanced SEO
                                            Optimisation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Secure Payment Gateway
                                            Integration</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>24/7 Dedicated
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>

                        <!-- Premium Plan -->
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                            <div class="pricing-card h-100">
                                <h4 class="fw-bold mb-4">Elite eCommerce Transformation</h4>
                                <div class="plan-label bg-dark text-white py-2 px-4 rounded-pill d-inline-block">
                                    Premium
                                </div>
                                <hr>
                                <div class="price-wrapper my-4">
                                    <span class="price">£1499</span>
                                    <span class="text-muted small d-block">one-off payment</span>
                                </div>
                                <ul class="features list-unstyled mb-5 feature-list">
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke eCommerce
                                            Solutions</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Integrated Marketing
                                            Tools</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Full SEO
                                            Optimisation</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Bespoke Features &
                                            Functionality</span>
                                    </li>
                                    <li class="mb-3 d-flex align-items-start gap-2 included">
                                        <i class="fas fa-check-circle mt-1 text-primary"></i> <span>Priority Client
                                            Assistance</span>
                                    </li>
                                </ul>
                                <a href="https://www.paypal.com/ncp/payment/26F2ULF7SLUUN"
                                    class="btn btn-primary w-100 rounded-pill py-3" target="_blank"
                                    rel="noopener noreferrer">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 bg-primary text-white" aria-label="Call to action">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-4 mb-lg-0" data-aos="fade-right">
                    <h2 class="display-5 fw-bold mb-3">Ready to Revitalise Your Enterprise?</h2>
                    <p class="lead mb-0 opacity-90">
                        Let’s discuss how we can assist you in achieving your digital objectives and driving sustained
                        commercial success.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end" data-aos="fade-left">
                    <a href="{{ route('contact') }}" class="btn btn-light btn-lg rounded-pill px-5 py-3">
                        Start Your Project <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        /* Custom Styles for Home Page */

        /* Hero Section */
        .hero-home {
            background-color: var(--background-color);
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
                url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070");
            background-size: cover;
            background-position: center;
            min-height: 90vh;
            display: flex;
            align-items: center;
            position: relative;
            background-attachment: fixed;
            z-index: 1;
        }

        /* Decorative Shapes */
        .hero-home::before,
        .hero-home::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            filter: blur(100px);
            z-index: -1;
            opacity: 0.3;
            animation: pulse 10s infinite alternate;
        }

        .hero-home::before {
            top: -10%;
            right: -10%;
            background: var(--primary-light);
        }

        .hero-home::after {
            bottom: -10%;
            left: -10%;
            background: var(--accent-color);
        }

        @keyframes pulse {
            0% {
                transform: scale(1) translate(0, 0);
                opacity: 0.2;
            }

            100% {
                transform: scale(1.3) translate(30px, 30px);
                opacity: 0.4;
            }
        }

        .avatar-group {
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            margin-left: -15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .avatar:first-child {
            margin-left: 0;
        }

        .avatar:hover {
            transform: translateY(-5px) scale(1.1);
            z-index: 10;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20 31c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 1;
            pointer-events: none;
            z-index: -1;
        }

        .main-hero-img {
            border-radius: 20px;
            box-shadow: var(--shadow-xl);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 8px solid white;
        }

        .main-hero-img:hover {
            transform: scale(1.02) rotate(-1deg);
        }

        .icon-badge-small {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }



        /* Minimal Service Card */
        .service-card-minimal {
            background: white;
            border-radius: 12px;
            border: 2px solid;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);

        }

        .service-card-minimal:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .service-icon-minimal {
            width: 70px;
            height: 70px;
            background: var(--primary-ultra-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: all 0.3s ease;
        }

        .service-card-minimal:hover .service-icon-minimal {
            background: var(--primary-color);
        }

        .service-card-minimal:hover .service-icon-minimal i {
            color: white !important;
        }


        /* Services Section - Static Grid */
        .services-section {
            position: relative;
            overflow: hidden;
        }

        .mb-6,
        .mt-6 {
            margin-bottom: 4rem;
            margin-top: 4rem;
        }

        /* Service Card */
        .service-card {
            background: white;
            border-radius: 16px;
            padding: 2rem 1.5rem;
            border: 2px solid transparent;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: var(--shadow-lg);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-light);
        }

        .service-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            opacity: 0;
            transition: opacity 0.3s ease;
        }


        .service-card:hover:before {
            opacity: 1;
        }

        .service-icon-wrapper {
            position: relative;
            display: inline-block;
        }

        .icon-badge {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg,
                    color-mix(in srgb, var(--icon-color) 10%, white 90%),
                    color-mix(in srgb, var(--icon-color) 5%, white 95%));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            border: 2px solid color-mix(in srgb, var(--icon-color) 20%, transparent 80%);
            transition: all 0.3s ease;
        }

        .service-card:hover .icon-badge {
            background: var(--icon-color);
            transform: rotate(10deg) scale(1.1);
        }

        .icon-badge i {
            font-size: 1.5rem;
            color: var(--icon-color);
            transition: all 0.3s ease;
        }

        .service-card:hover .icon-badge i {
            color: white;
        }

        .icon-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: radial-gradient(circle,
                    color-mix(in srgb, var(--icon-color) 30%, transparent 70%) 0%,
                    transparent 70%);
            filter: blur(10px);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .service-card:hover .icon-glow {
            opacity: 0.5;
        }

        .service-content {
            position: relative;
            z-index: 1;
        }

        .service-features {
            margin: 1rem 0;
        }

        .service-features li {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: flex-start;
            font-size: 0.85rem;
            color: var(--text-light);
        }

        .service-features li i {
            margin-top: 0.15rem;
            flex-shrink: 0;
            font-size: 0.8rem;
        }

        .service-cta {
            margin-top: 1rem;
        }

        /* Features & Stats */
        .feature-card {
            text-align: center;
            padding: 2rem;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--primary-color);
            transition: var(--transition-smooth);
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-4px);
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            background: var(--primary-ultra-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            transition: var(--transition-smooth);
        }

        .feature-card:hover .feature-icon {
            background: var(--primary-color);
            /* transform: rotate(10deg); */
        }

        .feature-icon i {
            font-size: 1.75rem;
            color: var(--primary-color);
            transition: var(--transition-smooth);
        }

        .feature-card:hover .feature-icon i {
            color: white !important;
        }

        .stats-container {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 20px;
            padding: 3rem;
            position: relative;
            overflow: hidden;
            color: white;
        }

        .stat-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            text-align: center;
            padding: 2rem;
            transition: var(--transition-smooth);
        }

        .stat-box:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--background-color), var(--primary-ultra-light));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 0.5rem;
            line-height: 1;
        }

        /* Portfolio Showcase */
        .portfolio-card {
            background: white;
            border-radius: 16px;
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .portfolio-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .portfolio-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 240px;
        }

        .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .portfolio-card:hover .portfolio-image {
            transform: scale(1.05);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-card:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-content {
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .portfolio-card:hover .portfolio-content {
            transform: translateY(0);
        }

        .portfolio-info {
            padding: 1.5rem;
        }

        /* How We Work */
        .process-card {
            text-align: center;
            padding: 2.5rem 2rem;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--primary-color);
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }

        .process-card:hover {
            transform: translateY(-4px);
        }

        .process-number {
            position: absolute;
            top: 1rem;
            left: 1rem;
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary-ultra-light);
            line-height: 1;
            z-index: 0;
        }

        .process-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-ultra-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            transition: var(--transition-smooth);
            position: relative;
            z-index: 1;
        }

        .process-card:hover .process-icon {
            background: var(--primary-color);
        }

        .process-icon i {
            font-size: 2rem;
            color: var(--primary-color);
            transition: var(--transition-smooth);
        }

        .process-card:hover .process-icon i {
            color: white;
        }

        /* Pricing Cards */
        .pricing-card {
            border: 1px solid var(--border-subtle);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
            height: 100%;
            background: white;
        }

        .pricing-card.popular {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-primary);
            transform: scale(1.02);
        }

        .pricing-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .plan-label {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .price-wrapper {
            text-align: center;
        }

        .price {
            font-size: 3.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1;
            display: block;
        }

        /* CTA Section */
        .bg-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        }

        /* Mobile Optimizations */
        @media (max-width: 767.98px) {
            .hero-home {
                min-height: auto;
                padding: 4rem 0;
            }

            .mb-6,
            .mt-6 {
                margin-bottom: 3rem;
                margin-top: 3rem;
            }

            .stat-number {
                font-size: 2rem;
            }

            .stats-container {
                padding: 1.5rem;
            }

            .service-card {
                padding: 1.5rem 1rem;
            }

            .icon-badge {
                width: 50px;
                height: 50px;
            }

            .icon-badge i {
                font-size: 1.25rem;
            }

            .pricing-card {
                padding: 2rem 1.5rem;
            }

            .price {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 991.98px) {
            .service-card {
                padding: 1.5rem;
            }
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        [data-aos] {
            animation-duration: 0.8s;
            animation-fill-mode: both;
        }

        /* Print Styles */
        @media print {
            .portfolio-overlay {
                position: relative;
                opacity: 1;
                background: white;
                color: black;
            }

            .portfolio-content {
                transform: none;
            }
        }


        .shadow-primary {
            box-shadow: 0 10px 30px -5px rgba(153, 41, 234, 0.4) !important;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px -5px rgba(153, 41, 234, 0.5) !important;
        }

        .btn-outline-primary:hover {
            transform: translateY(-3px);
            background-color: var(--primary-color) !important;
            color: white !important;
            box-shadow: 0 10px 25px -5px rgba(153, 41, 234, 0.2) !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
            document.addEve        ntListener('DOMContentLoaded', function () {
                // Stats Counter Animation (kept for visual effect)
                const statNumbers = document.querySelectorAll('.stat-number[data-count]');
                if (statNumbers.length) {
                    const observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                const element = entry.target;
                                const target = parseInt(element.dataset.count);
                                animateCounter(element, target);
                                observer.unobserve(element);
                            }
                        });
                    }, { threshold: 0.5 });

                    statNumbers.forEach(number => observer.observe(number));

                    function animateCounter(element, target) {
                        let current = 0;
                        const increment = target / 50;
                        const timer = setInterval(() => {
                            current += increment;
                            if (current >= target) {
                                element.textContent = target + (element.textContent.includes('+') ? '+' : '');
                                clearInterval(timer);
                            } else {
                                element.textContent = Math.floor(current) + (element.textContent.includes('+') ? '+' : '');
                            }
                        }, 20);
                    }
                }

                // Initialize AOS for animations
                if (typeof AOS !== 'undefined') {
                    AOS.init({
                        duration: 800,
                        once: true,
                        mirror: false,
                        offset: 100
                    });
                }
            });
        </script>

@endpush