class CustomServices extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .service-icon {
                    width: 60px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 16px;
                    margin-bottom: 20px;
                }
            </style>
            <section id="services" class="py-20 bg-gray-50">
                <div class="container mx-auto px-6">
                    <div class="text-center mb-16">
                        <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Digital Services</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            Comprehensive digital solutions tailored to elevate your brand's online presence
                        </p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-indigo-100 text-indigo-600">
                                <i data-feather="globe" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Website Development</h3>
                            <p class="text-gray-600">
                                Custom, high-performance websites designed to convert visitors into customers.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>
                        
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-green-100 text-green-600">
                                <i data-feather="users" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Social Media Management</h3>
                            <p class="text-gray-600">
                                Strategic social media campaigns that increase engagement and brand awareness.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>
                        
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-purple-100 text-purple-600">
                                <i data-feather="smartphone" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">App Development</h3>
                            <p class="text-gray-600">
                                Custom mobile applications for iOS and Android platforms.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>
                        
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-red-100 text-red-600">
                                <i data-feather="cpu" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">AI Solutions</h3>
                            <p class="text-gray-600">
                                Implementing AI to automate processes and enhance customer experiences.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>
                        
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-yellow-100 text-yellow-600">
                                <i data-feather="search" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">SEO Optimization</h3>
                            <p class="text-gray-600">
                                Improve your search rankings and drive organic traffic to your site.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>
                        
                        <div class="service-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 hover:border-t-4 hover:border-primary">
                            <div class="service-icon bg-blue-100 text-blue-600">
                                <i data-feather="shopping-cart" width="28" height="28"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Multichannel Sales</h3>
                            <p class="text-gray-600">
                                Integrated sales solutions across multiple digital platforms.
                            </p>
                            <a href="#contact" class="text-primary font-medium mt-4 inline-block">Get Quote →</a>
                        </div>