File: /var/www/html/wp-content/mu-plugins/ethnic-services-page.php
<?php
/**
* Plugin Name: Ethnic Services Page
* Description: Replaces the Services page inner content with a focused service directory layout.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_services_page_is_target' ) ) {
function ethnic_services_page_is_target() {
return ! is_admin() && is_page( array( 843, 'services' ) );
}
}
if ( ! function_exists( 'ethnic_services_page_url' ) ) {
function ethnic_services_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_services_page_contact_url' ) ) {
function ethnic_services_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_services_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_services_page_pillar_url' ) ) {
function ethnic_services_page_pillar_url( $candidate_slugs, $fallback_args = array() ) {
$slugs = is_array( $candidate_slugs ) ? $candidate_slugs : array( $candidate_slugs );
foreach ( $slugs as $slug ) {
$slug = trim( (string) $slug, '/' );
if ( '' === $slug ) {
continue;
}
$page = get_page_by_path( $slug );
if ( $page instanceof WP_Post && 'publish' === get_post_status( $page ) ) {
return get_permalink( $page );
}
}
return ethnic_services_page_contact_url( $fallback_args );
}
}
if ( ! function_exists( 'ethnic_services_page_icon' ) ) {
function ethnic_services_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
case 'app':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.5" y="4.5" width="7" height="15" rx="2.2" />
<path d="M14 7h6.5" />
<path d="M14 12h6.5" />
<path d="M14 17h4.5" />
</svg>
<?php
break;
case 'commerce':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4 7.5h16l-1.4 8.3H7.2L5.8 7.5z" />
<path d="M8 7.5V5.8A2.8 2.8 0 0 1 10.8 3h2.4A2.8 2.8 0 0 1 16 5.8v1.7" />
<circle cx="9" cy="18.5" r="1.2" />
<circle cx="16" cy="18.5" r="1.2" />
</svg>
<?php
break;
case 'ai':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="7" cy="7" r="2.2" />
<circle cx="17" cy="7" r="2.2" />
<circle cx="12" cy="17" r="2.6" />
<path d="M8.8 8.4l2.1 5.7" />
<path d="M15.2 8.4l-2.1 5.7" />
<path d="M9.2 7h5.6" />
</svg>
<?php
break;
case 'devops':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M8.2 17.5h8a3.5 3.5 0 0 0 .5-7 5 5 0 0 0-9.6 1.4A3 3 0 0 0 8.2 17.5z" />
<path d="M10 12l2 2 2-2" />
<path d="M12 8.5V14" />
</svg>
<?php
break;
case 'game':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7.2 9.5h9.6a3.4 3.4 0 0 1 3.2 4.5l-1 3.1a2.2 2.2 0 0 1-4 .4l-1.1-1.8h-3.8L9 17.5a2.2 2.2 0 0 1-4-.4l-1-3.1a3.4 3.4 0 0 1 3.2-4.5z" />
<path d="M8 12.5h2.8" />
<path d="M9.4 11.1v2.8" />
<circle cx="15.8" cy="12.2" r="0.9" />
<circle cx="18" cy="14.2" r="0.9" />
</svg>
<?php
break;
case 'blockchain':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="8" width="5" height="5" rx="1.2" />
<rect x="15" y="4" width="5" height="5" rx="1.2" />
<rect x="15" y="15" width="5" height="5" rx="1.2" />
<path d="M9 10.5h4.5" />
<path d="M17.5 9v5.5" />
<path d="M13.5 10.5l1.5-3" />
<path d="M13.5 12.5l1.5 3" />
</svg>
<?php
break;
case 'dedicated-team':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<circle cx="8" cy="9" r="2.3" />
<circle cx="16" cy="9" r="2.3" />
<path d="M4.5 18c.6-2.2 2.2-3.5 4.5-3.5S12.9 15.8 13.5 18" />
<path d="M10.5 18c.5-1.9 1.9-3 4-3s3.5 1.1 4 3" />
</svg>
<?php
break;
case 'project-delivery':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="5" width="16" height="14" rx="2" />
<path d="M8 3.8v2.4" />
<path d="M16 3.8v2.4" />
<path d="M4 9.5h16" />
<path d="M8 13l1.7 1.7 3.8-4" />
</svg>
<?php
break;
case 'augmentation':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="6" width="9" height="12" rx="2" />
<path d="M13 12h7" />
<path d="M17 8l4 4-4 4" />
</svg>
<?php
break;
case 'support':
default:
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 3.5l6 2.5v5.2c0 4-2.4 7.7-6 9.6-3.6-1.9-6-5.6-6-9.6V6L12 3.5z" />
<path d="M9.2 12h5.6" />
<path d="M12 9.2v5.6" />
</svg>
<?php
break;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_services_page_card_art' ) ) {
function ethnic_services_page_card_art( $art ) {
$logos = array(
'app' => array(
'src' => content_url( 'uploads/2026/04/service-logos/android-favicon-official.svg' ),
'class' => 'ethnic-services-card__art-image--app',
),
'commerce' => array(
'src' => content_url( 'uploads/2026/04/service-logos/shopify-site-icon-official.png' ),
'class' => 'ethnic-services-card__art-image--commerce',
),
'ai' => array(
'src' => content_url( 'uploads/2026/04/service-logos/openai-wordmark-official.webp' ),
'class' => 'ethnic-services-card__art-image--ai',
),
'devops' => array(
'src' => content_url( 'uploads/2026/04/service-logos/docker-mark-official.png' ),
'class' => 'ethnic-services-card__art-image--devops',
),
'game' => array(
'src' => content_url( 'uploads/2026/04/service-logos/unity-cube-official.png' ),
'class' => 'ethnic-services-card__art-image--game',
),
'blockchain' => array(
'src' => content_url( 'uploads/2026/04/service-logos/eth-diamond-purple-official.png' ),
'class' => 'ethnic-services-card__art-image--blockchain',
),
);
$logo = isset( $logos[ $art ] ) ? $logos[ $art ] : $logos['blockchain'];
return sprintf(
'<img class="ethnic-services-card__art-image %1$s" src="%2$s" alt="" loading="lazy" decoding="async" />',
esc_attr( $logo['class'] ),
esc_url( $logo['src'] )
);
}
}
if ( ! function_exists( 'ethnic_services_page_heading' ) ) {
function ethnic_services_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-services-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-services-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-services-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-services-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_services_page_render' ) ) {
function ethnic_services_page_render() {
$services = array(
array(
'slug' => 'app-development',
'icon' => 'app',
'decor' => 'app',
'decor_corner' => 'bottom-right',
'accent' => '#2f6bff',
'title' => 'App Development',
'description' => 'Build scalable mobile and web applications tailored to product, customer, and business needs.',
'highlights' => array(
'iOS App Development',
'Android App Development',
'Flutter Development',
'React Native Development',
'Web App Development',
'Maintenance & Support',
),
'candidate_urls' => array( 'services/app-development', 'app-development' ),
),
array(
'slug' => 'ecommerce-development',
'icon' => 'commerce',
'decor' => 'commerce',
'decor_corner' => 'top-right',
'accent' => '#0ea5e9',
'title' => 'eCommerce Development',
'description' => 'Create high-performance storefronts, scalable commerce operations, and growth-ready digital shopping experiences.',
'highlights' => array(
'Shopify Development',
'Shopify Plus Development',
'Magento Development',
'Adobe Commerce Development',
'WooCommerce Development',
'Headless Commerce',
),
'candidate_urls' => array( 'services/ecommerce-development', 'ecommerce-development', 'ecommerce-development-services' ),
),
array(
'slug' => 'ai-ml-development',
'icon' => 'ai',
'decor' => 'ai',
'decor_corner' => 'top-right',
'accent' => '#0f766e',
'title' => 'AI / ML Development',
'description' => 'Turn AI ideas into practical business systems using automation, predictive intelligence, and generative workflows.',
'highlights' => array(
'Generative AI',
'ML Solutions',
'AI Chatbots',
'NLP Solutions',
'Computer Vision',
'Predictive Analytics',
),
'candidate_urls' => array( 'services/ai-ml-development', 'ai-ml-development', 'ai-ml-development-services', 'ai-ml' ),
),
array(
'slug' => 'devops-services',
'icon' => 'devops',
'decor' => 'devops',
'decor_corner' => 'bottom-left',
'accent' => '#f59e0b',
'title' => 'DevOps Services',
'description' => 'Improve deployment speed, infrastructure reliability, monitoring, and operational efficiency across environments.',
'highlights' => array(
'DevOps Consulting',
'Cloud Infrastructure',
'CI/CD Setup',
'Kubernetes',
'Docker Containerization',
'Monitoring & Observability',
),
'candidate_urls' => array( 'services/devops-services', 'devops-services', 'devops' ),
),
array(
'slug' => 'game-development',
'icon' => 'game',
'decor' => 'game',
'decor_corner' => 'top-right',
'accent' => '#8b5cf6',
'title' => 'Game Development',
'description' => 'Design and build immersive game experiences across mobile, 2D/3D, multiplayer, and live environments.',
'highlights' => array(
'Mobile Game Development',
'Unity Development',
'Unreal Development',
'2D Games',
'3D Games',
'Multiplayer Games',
),
'candidate_urls' => array( 'services/game-development', 'game-development' ),
),
array(
'slug' => 'blockchain-development',
'icon' => 'blockchain',
'decor' => 'blockchain',
'decor_corner' => 'bottom-right',
'accent' => '#f97316',
'title' => 'Blockchain Development',
'description' => 'Build smart contracts, dApps, and blockchain-enabled products with practical implementation and security-aware delivery.',
'highlights' => array(
'Smart Contract Development',
'dApp Development',
'Wallet Integration',
'Tokenized Workflows',
'Protocol Integrations',
'Blockchain Consulting',
),
'candidate_urls' => array( 'services/blockchain-development', 'blockchain-development', 'blockchain-development-services', 'blockchain' ),
),
);
$delivery_models = array(
array(
'icon' => 'dedicated-team',
'accent' => '#2f6bff',
'title' => 'Dedicated Team',
'description' => 'Best for long-term product builds, evolving roadmaps, and teams that need stable delivery ownership over time.',
'image_url' => content_url( 'uploads/2026/04/services/delivery-dedicated-team-900.jpg' ),
'image_alt' => 'Business team discussing product priorities around a meeting table',
),
array(
'icon' => 'project-delivery',
'accent' => '#0ea5e9',
'title' => 'Project-Based Delivery',
'description' => 'Best for fixed-scope initiatives with defined milestones, launch targets, and a clear implementation path.',
'image_url' => content_url( 'uploads/2026/04/services/delivery-project-based-900.jpg' ),
'image_alt' => 'Top-down view of a project planning session with notes and charts',
),
array(
'icon' => 'augmentation',
'accent' => '#8b5cf6',
'title' => 'Staff Augmentation',
'description' => 'Best for extending in-house engineering capacity quickly without slowing down current product momentum.',
'image_url' => content_url( 'uploads/2026/04/services/delivery-staff-augmentation-900.jpg' ),
'image_alt' => 'Software engineers collaborating in a modern office workspace',
),
array(
'icon' => 'support',
'accent' => '#f59e0b',
'title' => 'Support & Optimization',
'description' => 'Best for maintenance, iterative improvements, release support, and technical stabilization after launch.',
'image_url' => content_url( 'uploads/2026/04/services/delivery-support-optimization-900.jpg' ),
'image_alt' => 'Support team using headsets and laptops to handle ongoing service requests',
),
);
$technology_groups = array(
array(
'label' => 'Frontend',
'title' => 'Frontend Web Technologies',
'description' => 'React, Next.js, Vue, and Tailwind help us build fast websites, SaaS interfaces, dashboards, and headless commerce frontends.',
'supports' => 'Best for customer-facing interfaces, landing pages, web apps, admin dashboards, and high-conversion storefront experiences.',
'services' => array( 'App Development', 'eCommerce Development' ),
'accent' => '#2f6bff',
'items' => array( 'React', 'Next.js', 'Vue', 'Tailwind' ),
),
array(
'label' => 'Mobile',
'title' => 'Mobile App Technologies',
'description' => 'Flutter, React Native, Swift, and Kotlin support native and cross-platform iOS and Android application development.',
'supports' => 'Best for iOS apps, Android apps, cross-platform MVPs, enterprise mobility, and product-led mobile experiences.',
'services' => array( 'App Development' ),
'accent' => '#0ea5e9',
'items' => array( 'Flutter', 'React Native', 'Swift', 'Kotlin' ),
),
array(
'label' => 'Backend',
'title' => 'Backend & API Technologies',
'description' => 'Node.js, PHP, Python, and Laravel power integrations, admin systems, APIs, business logic, and scalable backend services.',
'supports' => 'Best for platform architecture, custom APIs, system integrations, business logic, admin workflows, and scalable operations.',
'services' => array( 'App Development', 'eCommerce Development', 'AI / ML Development' ),
'accent' => '#2563eb',
'items' => array( 'Node.js', 'PHP', 'Python', 'Laravel' ),
),
array(
'label' => 'Commerce',
'title' => 'eCommerce Platforms & Frameworks',
'description' => 'Shopify, Shopify Plus, Magento, Adobe Commerce, and WooCommerce support storefront builds, replatforming, and conversion-focused commerce delivery.',
'supports' => 'Best for online stores, B2B commerce, headless storefronts, checkout optimization, and digital commerce growth projects.',
'services' => array( 'eCommerce Development' ),
'accent' => '#f97316',
'items' => array( 'Shopify', 'Shopify Plus', 'Magento', 'Adobe Commerce', 'WooCommerce', 'Headless Commerce' ),
),
array(
'label' => 'Cloud / DevOps',
'title' => 'Cloud & DevOps Technologies',
'description' => 'AWS, Docker, Kubernetes, GitHub Actions, Jenkins, and CI/CD tooling improve release speed, reliability, scalability, and observability.',
'supports' => 'Best for deployment automation, cloud infrastructure, performance optimization, monitoring, uptime, and release confidence.',
'services' => array( 'DevOps Services' ),
'accent' => '#f59e0b',
'items' => array( 'AWS', 'Docker', 'Kubernetes', 'GitHub Actions', 'Jenkins', 'CI/CD' ),
),
array(
'label' => 'AI / Data',
'title' => 'AI / ML & Data Technologies',
'description' => 'OpenAI, vector databases, NLP, and ML pipelines support chatbots, copilots, recommendations, classification, and intelligent automation.',
'supports' => 'Best for AI chatbots, copilots, document intelligence, automation workflows, predictive use cases, and data-enriched products.',
'services' => array( 'AI / ML Development', 'App Development' ),
'accent' => '#0f766e',
'items' => array( 'OpenAI', 'Vector Databases', 'NLP', 'ML Pipelines' ),
),
array(
'label' => 'Blockchain',
'title' => 'Blockchain & Web3 Technologies',
'description' => 'Solidity, Ethereum, smart contracts, and Web3 integrations support dApps, token-based products, blockchain workflows, and wallet experiences.',
'supports' => 'Best for dApps, token utilities, blockchain marketplaces, wallet integrations, and smart contract-driven product features.',
'services' => array( 'Blockchain Development', 'Game Development' ),
'accent' => '#8b5cf6',
'items' => array( 'Solidity', 'Ethereum', 'Smart Contracts', 'Web3 Integrations' ),
),
);
$industries = array(
array(
'slug' => 'retail',
'accent' => '#2f6bff',
'title' => 'Retail',
'description' => 'Commerce operations, customer journeys, and omnichannel experiences built for measurable growth.',
'spotlight' => 'Retail teams usually need faster storefront execution, cleaner customer journeys, and stronger coordination between catalog, checkout, fulfillment, and retention.',
'focus_areas' => array( 'Omnichannel storefronts', 'Catalog and inventory workflows', 'Loyalty and repeat-purchase journeys' ),
'service_fit' => array( 'eCommerce Development', 'App Development', 'AI / ML Development' ),
),
array(
'slug' => 'healthcare',
'accent' => '#0ea5e9',
'title' => 'Healthcare',
'description' => 'Patient-facing products, workflow systems, and digital tools shaped around clarity and compliance.',
'spotlight' => 'Healthcare projects often balance usability, trust, and process reliability across patient experiences, internal systems, and care-team workflows.',
'focus_areas' => array( 'Patient portals and digital intake', 'Internal workflow systems', 'Compliance-aware UX and integrations' ),
'service_fit' => array( 'App Development', 'AI / ML Development', 'DevOps Services' ),
),
array(
'slug' => 'fintech',
'accent' => '#0f766e',
'title' => 'Fintech',
'description' => 'Secure digital products for onboarding, financial operations, and product trust at scale.',
'spotlight' => 'Fintech products need clear flows, high system confidence, and strong delivery discipline across onboarding, dashboards, and operational tooling.',
'focus_areas' => array( 'Secure onboarding journeys', 'Financial dashboards and workflows', 'Trust-oriented product experiences' ),
'service_fit' => array( 'App Development', 'DevOps Services', 'AI / ML Development' ),
),
array(
'slug' => 'logistics',
'accent' => '#f59e0b',
'title' => 'Logistics',
'description' => 'Operational visibility, tracking, and system coordination for teams managing complex movement and delivery.',
'spotlight' => 'Logistics platforms usually need dependable operations data, stronger visibility, and smoother coordination between field activity, systems, and customer communication.',
'focus_areas' => array( 'Shipment and status tracking', 'Operations dashboards', 'Integration-heavy coordination flows' ),
'service_fit' => array( 'App Development', 'DevOps Services', 'AI / ML Development' ),
),
array(
'slug' => 'education',
'accent' => '#8b5cf6',
'title' => 'Education',
'description' => 'Learning portals, engagement systems, and operational platforms designed for accessibility and growth.',
'spotlight' => 'Education teams often need easier content delivery, stronger learner engagement, and simpler platform management across administrators, instructors, and students.',
'focus_areas' => array( 'Learning portals and dashboards', 'Engagement and retention flows', 'Operational platform usability' ),
'service_fit' => array( 'App Development', 'AI / ML Development', 'DevOps Services' ),
),
array(
'slug' => 'gaming',
'accent' => '#ec4899',
'title' => 'Gaming',
'description' => 'Interactive platforms, live environments, and digital experiences that support audience retention and scale.',
'spotlight' => 'Gaming delivery usually centers on speed, engagement loops, live operations, and the technical stability required for highly interactive digital products.',
'focus_areas' => array( 'Live environments and engagement systems', 'Multiplayer or interactive product features', 'Performance and retention-focused experiences' ),
'service_fit' => array( 'Game Development', 'App Development', 'Blockchain Development' ),
),
array(
'slug' => 'manufacturing',
'accent' => '#f97316',
'title' => 'Manufacturing',
'description' => 'Modernized workflows, dashboards, and operations visibility for process-heavy business environments.',
'spotlight' => 'Manufacturing organizations usually need practical digital tools that reduce friction across teams, improve visibility, and support process consistency at scale.',
'focus_areas' => array( 'Operations visibility dashboards', 'Workflow digitization', 'Data-driven process improvements' ),
'service_fit' => array( 'App Development', 'DevOps Services', 'AI / ML Development' ),
),
);
$faqs = array(
array(
'question' => 'What types of services does Ethnic Infotech provide?',
'answer' => 'We provide end-to-end digital services including app development, eCommerce development, AI/ML solutions, DevOps, game development, and blockchain development.',
),
array(
'question' => 'Can I hire your team for a single project?',
'answer' => 'Yes. We support both project-based engagements and long-term partnerships depending on your requirements.',
),
array(
'question' => 'Do you offer dedicated development teams?',
'answer' => 'Yes. We offer dedicated teams, staff augmentation, and flexible engagement models for growing businesses.',
),
array(
'question' => 'Which technologies do you work with?',
'answer' => 'We work with a wide range of technologies including React, Next.js, Flutter, Shopify, Magento, Adobe Commerce, Node.js, AWS, Docker, Kubernetes, and more.',
),
array(
'question' => 'Do you work with startups as well as established companies?',
'answer' => 'Yes. We support startups, scale-ups, and established businesses with services aligned to their product stage and goals.',
),
array(
'question' => 'How do I get started?',
'answer' => 'You can contact us for a consultation, request a proposal, or share your project scope for a tailored recommendation.',
),
);
ob_start();
?>
<div class="ethnic-services-page" data-ethnic-services-page>
<section class="ethnic-services-section ethnic-services-section--hero">
<div class="ethnic-services-shell ethnic-services-hero">
<div class="ethnic-services-hero__content">
<p class="ethnic-services-kicker">Services Overview</p>
<h1 class="ethnic-services-hero__title">Digital Services Built for Growth</h1>
<p class="ethnic-services-hero__copy">Explore our core service areas across app development, eCommerce, AI/ML, DevOps, gaming, and blockchain. This page acts as the central hub for our capabilities, technologies, delivery approach, and industry expertise.</p>
<div class="ethnic-services-actions">
<a class="ethnic-services-button ethnic-services-button--primary" href="#services-directory">Explore Services</a>
<a class="ethnic-services-button ethnic-services-button--secondary" href="<?php echo esc_url( ethnic_services_page_contact_url( array( 'intent' => 'quote' ) ) ); ?>">Get a Free Quote</a>
</div>
<nav class="ethnic-services-anchor-nav" aria-label="Services page sections">
<a href="#services-directory">Service Categories</a>
<a href="#delivery-models">Delivery Models</a>
<a href="#technologies-covered">Technologies</a>
<a href="#industries-supported">Industries</a>
<a href="#services-faq">FAQs</a>
</nav>
</div>
</div>
</section>
<section class="ethnic-services-section" id="services-directory">
<div class="ethnic-services-shell">
<?php echo ethnic_services_page_heading( 'Service Categories', 'Explore our core service pillars.', 'Each category is designed to support a different stage of digital growth, from product launches and commerce expansion to automation, infrastructure, gaming, and Web3 delivery.' ); ?>
<div class="ethnic-services-grid ethnic-services-grid--services">
<?php foreach ( $services as $service ) : ?>
<?php
$link = ethnic_services_page_pillar_url(
$service['candidate_urls'],
array(
'service' => $service['slug'],
'from' => 'services-overview',
)
);
?>
<article class="ethnic-services-card ethnic-services-card--service" id="<?php echo esc_attr( $service['slug'] ); ?>" style="<?php echo esc_attr( sprintf( '--ethnic-services-accent: %s;', $service['accent'] ) ); ?>">
<a class="ethnic-services-card__link" href="<?php echo esc_url( $link ); ?>">
<span class="ethnic-services-card__art ethnic-services-card__art--<?php echo esc_attr( $service['decor_corner'] ); ?> ethnic-services-card__art--<?php echo esc_attr( $service['decor'] ); ?>" aria-hidden="true">
<?php echo ethnic_services_page_card_art( $service['decor'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<span class="ethnic-services-card__icon" aria-hidden="true">
<?php echo ethnic_services_page_icon( $service['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<div class="ethnic-services-card__body">
<h3><?php echo esc_html( $service['title'] ); ?></h3>
<p><?php echo esc_html( $service['description'] ); ?></p>
<ul class="ethnic-services-card__list" aria-label="<?php echo esc_attr( $service['title'] . ' highlights' ); ?>">
<?php foreach ( $service['highlights'] as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<span class="ethnic-services-card__cta">Explore Service</span>
</a>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-services-section" id="delivery-models">
<div class="ethnic-services-shell">
<?php echo ethnic_services_page_heading( 'Delivery Models', 'Flexible ways to engage our team.', 'We support flexible engagement models based on project scope, team maturity, and delivery speed.' ); ?>
<div class="ethnic-services-grid ethnic-services-grid--delivery">
<?php foreach ( $delivery_models as $model ) : ?>
<article class="ethnic-services-card ethnic-services-card--model" style="<?php echo esc_attr( sprintf( '--ethnic-services-accent: %s;', $model['accent'] ) ); ?>">
<div class="ethnic-services-card__media ethnic-services-card__media--model">
<img src="<?php echo esc_url( $model['image_url'] ); ?>" alt="<?php echo esc_attr( $model['image_alt'] ); ?>" loading="lazy" decoding="async" />
</div>
<div class="ethnic-services-card__model-inner">
<span class="ethnic-services-card__icon" aria-hidden="true">
<?php echo ethnic_services_page_icon( $model['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<div class="ethnic-services-card__body">
<h3><?php echo esc_html( $model['title'] ); ?></h3>
<p><?php echo esc_html( $model['description'] ); ?></p>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-services-section" id="technologies-covered">
<div class="ethnic-services-shell">
<?php echo ethnic_services_page_heading( 'Technologies Covered', 'Technologies and platforms used across app, commerce, AI, DevOps, and Web3 delivery.', 'Explore the frontend frameworks, mobile technologies, backend stacks, eCommerce platforms, cloud tools, AI systems, and blockchain technologies we use to build scalable digital products.' ); ?>
<div class="ethnic-services-tech-intro">
<div class="ethnic-services-tech-intro__copy">
<p class="ethnic-services-tech-intro__lead">We choose the technology stack based on business goals, performance needs, integration complexity, and long-term maintainability, not just trend value.</p>
<p class="ethnic-services-tech-intro__support">Use the slider below to explore the main technologies and platforms we apply across app development, eCommerce, AI / ML, DevOps, gaming, and blockchain projects.</p>
</div>
<div class="ethnic-services-tech-intro__keywords" aria-label="Technology coverage keywords">
<span class="ethnic-services-tech-intro__pill">App Development Technologies</span>
<span class="ethnic-services-tech-intro__pill">eCommerce Development Platforms</span>
<span class="ethnic-services-tech-intro__pill">AI / ML Technology Stack</span>
<span class="ethnic-services-tech-intro__pill">DevOps & Cloud Tooling</span>
<span class="ethnic-services-tech-intro__pill">Mobile App Frameworks</span>
<span class="ethnic-services-tech-intro__pill">Blockchain & Web3 Tools</span>
</div>
</div>
<div class="ethnic-services-tech-slider" data-ethnic-tech-slider>
<div class="ethnic-services-tech-slider__nav">
<div class="ethnic-services-tech-slider__tabs" role="tablist" aria-label="Technology categories">
<?php foreach ( $technology_groups as $index => $group ) : ?>
<button class="ethnic-services-tech-slider__tab<?php echo 0 === $index ? ' is-active' : ''; ?>" type="button" role="tab" aria-selected="<?php echo 0 === $index ? 'true' : 'false'; ?>" aria-controls="ethnic-services-tech-slide-<?php echo esc_attr( $index ); ?>" data-ethnic-tech-tab="<?php echo esc_attr( $index ); ?>">
<?php echo esc_html( $group['label'] ); ?>
</button>
<?php endforeach; ?>
</div>
<div class="ethnic-services-tech-slider__controls">
<button class="ethnic-services-tech-slider__control" type="button" data-ethnic-tech-prev aria-label="Previous technology category">Prev</button>
<div class="ethnic-services-tech-slider__count" aria-live="polite">
<span data-ethnic-tech-current>01</span>
<span>/</span>
<span data-ethnic-tech-total><?php echo esc_html( str_pad( (string) count( $technology_groups ), 2, '0', STR_PAD_LEFT ) ); ?></span>
</div>
<button class="ethnic-services-tech-slider__control" type="button" data-ethnic-tech-next aria-label="Next technology category">Next</button>
</div>
</div>
<div class="ethnic-services-tech-slider__viewport" data-ethnic-tech-track>
<?php foreach ( $technology_groups as $index => $group ) : ?>
<article class="ethnic-services-tech-slide" id="ethnic-services-tech-slide-<?php echo esc_attr( $index ); ?>" data-ethnic-tech-slide style="<?php echo esc_attr( sprintf( '--ethnic-services-accent: %s;', $group['accent'] ) ); ?>" aria-hidden="<?php echo 0 === $index ? 'false' : 'true'; ?>">
<div class="ethnic-services-tech-slide__copy">
<p class="ethnic-services-tech-slide__eyebrow"><?php echo esc_html( $group['label'] ); ?></p>
<h3><?php echo esc_html( $group['title'] ); ?></h3>
<p class="ethnic-services-tech-slide__description"><?php echo esc_html( $group['description'] ); ?></p>
<p class="ethnic-services-tech-slide__supports"><?php echo esc_html( $group['supports'] ); ?></p>
<div class="ethnic-services-tech-slide__services">
<span class="ethnic-services-tech-slide__services-label">Commonly used in</span>
<div class="ethnic-services-tech-slide__service-tags" aria-label="<?php echo esc_attr( $group['label'] . ' related services' ); ?>">
<?php foreach ( $group['services'] as $service_label ) : ?>
<span class="ethnic-services-tech-slide__service-tag"><?php echo esc_html( $service_label ); ?></span>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="ethnic-services-tech-slide__stack">
<div class="ethnic-services-tech-slide__stack-head">
<p class="ethnic-services-tech-slide__stack-label">Core technologies</p>
<p class="ethnic-services-tech-slide__stack-count"><?php echo esc_html( count( $group['items'] ) . ' technologies' ); ?></p>
</div>
<div class="ethnic-services-tech-slide__stack-items" aria-label="<?php echo esc_attr( $group['label'] . ' technologies' ); ?>">
<?php foreach ( $group['items'] as $item ) : ?>
<span class="ethnic-services-tech-slide__stack-item"><?php echo esc_html( $item ); ?></span>
<?php endforeach; ?>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-services-section" id="industries-supported">
<div class="ethnic-services-shell">
<?php echo ethnic_services_page_heading( 'Industries Supported', 'Industry-aware delivery across the sectors we support most often.', 'We adapt product strategy, integrations, workflows, and technical choices to the realities of each market, with focused support for the industries below.' ); ?>
<div class="ethnic-services-industries-showcase" data-ethnic-industries-showcase>
<div class="ethnic-services-industries-showcase__rail" role="tablist" aria-label="Industries supported">
<?php foreach ( $industries as $index => $industry ) : ?>
<button class="ethnic-services-industries-showcase__tab<?php echo 0 === $index ? ' is-active' : ''; ?>" type="button" role="tab" aria-selected="<?php echo 0 === $index ? 'true' : 'false'; ?>" aria-controls="ethnic-services-industry-panel-<?php echo esc_attr( $index ); ?>" data-ethnic-industry-tab="<?php echo esc_attr( $index ); ?>" style="<?php echo esc_attr( sprintf( '--ethnic-services-accent: %s;', $industry['accent'] ) ); ?>">
<span class="ethnic-services-industries-showcase__tab-index"><?php echo esc_html( str_pad( (string) ( $index + 1 ), 2, '0', STR_PAD_LEFT ) ); ?></span>
<span class="ethnic-services-industries-showcase__tab-copy">
<span class="ethnic-services-industries-showcase__tab-title"><?php echo esc_html( $industry['title'] ); ?></span>
<span class="ethnic-services-industries-showcase__tab-text"><?php echo esc_html( $industry['description'] ); ?></span>
</span>
<span class="ethnic-services-industries-showcase__tab-arrow" aria-hidden="true">↗</span>
</button>
<?php endforeach; ?>
</div>
<div class="ethnic-services-industries-showcase__stage">
<?php foreach ( $industries as $index => $industry ) : ?>
<article class="ethnic-services-industry-panel<?php echo 0 === $index ? ' is-active' : ''; ?>" id="ethnic-services-industry-panel-<?php echo esc_attr( $index ); ?>" data-ethnic-industry-panel aria-hidden="<?php echo 0 === $index ? 'false' : 'true'; ?>" style="<?php echo esc_attr( sprintf( '--ethnic-services-accent: %s;', $industry['accent'] ) ); ?>">
<div class="ethnic-services-industry-panel__top">
<p class="ethnic-services-industry-panel__eyebrow">Selected Industry</p>
<p class="ethnic-services-industry-panel__count"><?php echo esc_html( str_pad( (string) ( $index + 1 ), 2, '0', STR_PAD_LEFT ) ); ?> / <?php echo esc_html( str_pad( (string) count( $industries ), 2, '0', STR_PAD_LEFT ) ); ?></p>
</div>
<h3><?php echo esc_html( $industry['title'] ); ?></h3>
<p class="ethnic-services-industry-panel__description"><?php echo esc_html( $industry['description'] ); ?></p>
<p class="ethnic-services-industry-panel__spotlight"><?php echo esc_html( $industry['spotlight'] ); ?></p>
<div class="ethnic-services-industry-panel__details">
<div class="ethnic-services-industry-panel__focus">
<p class="ethnic-services-industry-panel__label">Where we help most</p>
<ul class="ethnic-services-industry-panel__list" aria-label="<?php echo esc_attr( $industry['title'] . ' focus areas' ); ?>">
<?php foreach ( $industry['focus_areas'] as $focus_area ) : ?>
<li><?php echo esc_html( $focus_area ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-services-industry-panel__services">
<p class="ethnic-services-industry-panel__label">Best-fit services</p>
<div class="ethnic-services-industry-panel__service-tags" aria-label="<?php echo esc_attr( $industry['title'] . ' best-fit services' ); ?>">
<?php foreach ( $industry['service_fit'] as $service_fit ) : ?>
<span class="ethnic-services-industry-panel__service-tag"><?php echo esc_html( $service_fit ); ?></span>
<?php endforeach; ?>
</div>
</div>
</div>
<a class="ethnic-services-button ethnic-services-button--secondary ethnic-services-industry-panel__cta" href="<?php echo esc_url( ethnic_services_page_contact_url( array( 'industry' => $industry['slug'], 'from' => 'services-overview' ) ) ); ?>">Discuss Your Industry</a>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-services-section" id="services-faq">
<div class="ethnic-services-shell ethnic-services-shell--narrow">
<?php echo ethnic_services_page_heading( 'Frequently Asked Questions', 'Quick answers about service scope, engagement, and delivery.' ); ?>
<div class="ethnic-services-faq">
<?php foreach ( $faqs as $index => $faq ) : ?>
<details class="ethnic-services-faq__item" <?php echo 0 === $index ? 'open' : ''; ?>>
<summary>
<span><?php echo esc_html( $faq['question'] ); ?></span>
<span class="ethnic-services-faq__marker" aria-hidden="true"></span>
</summary>
<div class="ethnic-services-faq__answer">
<p><?php echo esc_html( $faq['answer'] ); ?></p>
</div>
</details>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-services-section ethnic-services-section--cta" id="services-cta">
<div class="ethnic-services-shell">
<div class="ethnic-services-cta">
<div class="ethnic-services-cta__copy">
<p class="ethnic-services-kicker ethnic-services-kicker--light">Ready to Talk</p>
<h2>Let’s Build the Right Solution for Your Business</h2>
<p>Whether you need a dedicated team, a scoped project, or a technical partner for long-term growth, we can help define the next step.</p>
</div>
<div class="ethnic-services-actions">
<a class="ethnic-services-button ethnic-services-button--primary" href="<?php echo esc_url( ethnic_services_page_contact_url( array( 'intent' => 'quote' ) ) ); ?>">Get a Free Quote</a>
<a class="ethnic-services-button ethnic-services-button--secondary" href="<?php echo esc_url( ethnic_services_page_contact_url() ); ?>">Contact Us</a>
</div>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_services_page_styles' ) ) {
function ethnic_services_page_styles() {
return <<<'CSS'
.page-id-843 #page-title.page-title-block.custom-page-title {
display: none;
}
.page-id-843 .fullwidth-content > .ethnic-services-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
.ethnic-services-page {
--ethnic-services-text: #0f172a;
--ethnic-services-muted: #586b84;
--ethnic-services-border: rgba(15, 23, 42, 0.1);
--ethnic-services-surface: rgba(255, 255, 255, 0.92);
--ethnic-services-surface-strong: #ffffff;
--ethnic-services-surface-soft: rgba(246, 249, 255, 0.96);
--ethnic-services-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
--ethnic-services-shadow-hover: 0 28px 70px rgba(15, 23, 42, 0.12);
--ethnic-services-accent: #2f6bff;
--ethnic-services-accent-soft: rgba(47, 107, 255, 0.12);
color: var(--ethnic-services-text);
}
.ethnic-services-page,
.ethnic-services-page * ,
.ethnic-services-page *::before,
.ethnic-services-page *::after {
box-sizing: border-box;
}
.ethnic-services-shell {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-services-shell--narrow {
width: min(980px, calc(100% - (var(--ethnic-page-shell-padding, 36px) * 2)));
}
.ethnic-services-section {
position: relative;
scroll-margin-top: 110px;
}
.ethnic-services-section + .ethnic-services-section {
margin-top: clamp(64px, 8vw, 108px);
}
.ethnic-services-section--hero {
overflow: hidden;
background:
linear-gradient(180deg, rgba(7, 19, 36, 0.76) 0%, rgba(11, 23, 48, 0.72) 52%, rgba(12, 23, 40, 0.84) 100%),
url("https://staging.ethnicinfotech.in/wp-content/uploads/2026/04/sr_bk_1.jpg") center center / cover no-repeat;
}
.ethnic-services-section--hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 22%, rgba(47, 107, 255, 0.24), transparent 28%),
radial-gradient(circle at 82% 18%, rgba(231, 255, 137, 0.16), transparent 20%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: auto, 44px 44px, 44px 44px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%);
pointer-events: none;
}
.ethnic-services-hero {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: clamp(520px, 64vw, 720px);
padding: clamp(74px, 8vw, 128px) 0;
}
.ethnic-services-hero__content {
max-width: min(820px, 100%);
}
.ethnic-services-kicker,
.ethnic-services-heading__eyebrow {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0 0 16px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.ethnic-services-kicker--light {
background: rgba(47, 107, 255, 0.12);
border-color: rgba(47, 107, 255, 0.14);
color: #2f6bff;
}
.ethnic-services-section--hero .ethnic-services-kicker {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.ethnic-services-hero__title,
.ethnic-services-heading__title,
.ethnic-services-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-services-hero__title {
max-width: 12ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(38px, 5vw, 68px);
line-height: 0.98;
}
.ethnic-services-heading {
max-width: 760px;
margin-bottom: clamp(26px, 4vw, 36px);
}
.ethnic-services-heading__eyebrow {
background: rgba(47, 107, 255, 0.1);
border-color: rgba(47, 107, 255, 0.12);
color: #2f6bff;
}
.ethnic-services-heading__title,
.ethnic-services-cta h2 {
color: var(--ethnic-services-text);
font-size: clamp(30px, 2.5vw, 42px);
line-height: 1.06;
}
.ethnic-services-hero__copy,
.ethnic-services-heading__copy,
.ethnic-services-page p:not(.ethnic-services-kicker):not(.ethnic-services-heading__eyebrow),
.ethnic-services-page li {
color: var(--ethnic-services-muted);
font-size: 16px;
line-height: 1.72;
}
.ethnic-services-hero__copy {
max-width: 60ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(17px, 1.4vw, 20px);
}
.ethnic-services-heading__copy {
margin: 12px 0 0;
}
.ethnic-services-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.ethnic-services-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.ethnic-services-button:hover,
.ethnic-services-button:focus-visible {
transform: translateY(-1px);
outline: none;
}
.ethnic-services-button--primary {
background: #e7ff89;
color: #0b1730 !important;
box-shadow: 0 18px 38px rgba(5, 14, 28, 0.2);
}
.ethnic-services-button--primary:hover,
.ethnic-services-button--primary:focus-visible {
box-shadow: 0 24px 48px rgba(5, 14, 28, 0.24);
}
.ethnic-services-button--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff !important;
backdrop-filter: blur(10px);
}
.ethnic-services-section--cta .ethnic-services-button--secondary {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ethnic-services-text) !important;
}
.ethnic-services-anchor-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}
.ethnic-services-anchor-nav a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ethnic-services-anchor-nav a:hover,
.ethnic-services-anchor-nav a:focus-visible {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
color: #ffffff;
outline: none;
}
.ethnic-services-grid {
display: grid;
gap: 22px;
}
.ethnic-services-grid--services {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-services-grid--delivery {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-services-grid--technology {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethnic-services-grid--industries {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethnic-services-card,
.ethnic-services-tech-card,
.ethnic-services-industry-card,
.ethnic-services-faq__item,
.ethnic-services-cta {
border: 1px solid var(--ethnic-services-border);
border-radius: 28px;
background:
radial-gradient(circle at top right, rgba(47, 107, 255, 0.06), transparent 24%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
box-shadow: var(--ethnic-services-shadow);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ethnic-services-card:hover,
.ethnic-services-tech-card:hover,
.ethnic-services-industry-card:hover,
.ethnic-services-faq__item:hover,
.ethnic-services-cta:hover {
transform: translateY(-3px);
box-shadow: var(--ethnic-services-shadow-hover);
border-color: rgba(47, 107, 255, 0.16);
}
.ethnic-services-card__link {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(24px, 3vw, 30px);
color: inherit;
text-decoration: none !important;
position: relative;
isolation: isolate;
}
.ethnic-services-card--service {
overflow: hidden;
}
.ethnic-services-card--model {
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
padding: 0;
}
.ethnic-services-card__art {
position: absolute;
width: 25%;
opacity: 0.18;
pointer-events: none;
z-index: 0;
line-height: 0;
}
.ethnic-services-card__art--commerce {
opacity: 0.34;
}
.ethnic-services-card__art--game {
opacity: 0.26;
}
.ethnic-services-card__art--blockchain {
opacity: 0.36;
}
.ethnic-services-card__art img,
.ethnic-services-card__art-image {
display: block;
width: 100%;
height: auto;
max-width: none;
max-height: none;
}
.ethnic-services-card__art--top-right {
top: 14px;
right: 14px;
}
.ethnic-services-card__art--top-left {
top: 14px;
left: 14px;
}
.ethnic-services-card__art--bottom-right {
right: 14px;
bottom: 14px;
}
.ethnic-services-card__art--bottom-left {
left: 14px;
bottom: 14px;
}
.ethnic-services-card__media {
position: relative;
overflow: hidden;
background: #0f172a;
}
.ethnic-services-card__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(9, 16, 31, 0.02) 0%, rgba(9, 16, 31, 0.36) 100%),
linear-gradient(135deg, color-mix(in srgb, var(--ethnic-services-accent) 26%, transparent), transparent 55%);
pointer-events: none;
}
.ethnic-services-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 240ms ease;
}
.ethnic-services-card--model:hover .ethnic-services-card__media img {
transform: scale(1.04);
}
.ethnic-services-card__media--model {
aspect-ratio: 16 / 10;
}
.ethnic-services-card__model-inner {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 0 clamp(24px, 3vw, 30px) clamp(24px, 3vw, 30px);
margin-top: -28px;
position: relative;
z-index: 1;
}
.ethnic-services-card__model-inner .ethnic-services-card__icon {
box-shadow:
0 14px 30px color-mix(in srgb, var(--ethnic-services-accent) 18%, rgba(15, 23, 42, 0.08)),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ethnic-services-card__icon,
.ethnic-services-tech-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--ethnic-services-accent) 22%, #ffffff), rgba(255, 255, 255, 0.96));
border: 1px solid color-mix(in srgb, var(--ethnic-services-accent) 20%, #ffffff);
color: var(--ethnic-services-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
position: relative;
z-index: 1;
}
.ethnic-services-card__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-services-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
position: relative;
z-index: 1;
}
.ethnic-services-card h3,
.ethnic-services-tech-card h3,
.ethnic-services-industry-card h3 {
margin: 18px 0 0;
color: var(--ethnic-services-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(21px, 1.5vw, 24px);
line-height: 1.18;
letter-spacing: -0.04em;
}
.ethnic-services-card p,
.ethnic-services-tech-card p,
.ethnic-services-industry-card p {
margin: 14px 0 0;
}
.ethnic-services-card__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.ethnic-services-card__list li {
position: relative;
padding-left: 16px;
font-size: 14px;
line-height: 1.5;
}
.ethnic-services-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ethnic-services-accent);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--ethnic-services-accent) 14%, #ffffff);
transform: translateY(-50%);
}
.ethnic-services-card__cta,
.ethnic-services-inline-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
color: var(--ethnic-services-accent);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
position: relative;
z-index: 1;
}
.ethnic-services-card__cta::after,
.ethnic-services-inline-link::after {
content: "→";
font-size: 16px;
line-height: 1;
transition: transform 180ms ease;
}
.ethnic-services-card__link:hover .ethnic-services-card__cta::after,
.ethnic-services-card__link:focus-visible .ethnic-services-card__cta::after,
.ethnic-services-inline-link:hover::after,
.ethnic-services-inline-link:focus-visible::after {
transform: translateX(2px);
}
.ethnic-services-card__link:focus-visible,
.ethnic-services-inline-link:focus-visible {
outline: none;
}
.ethnic-services-tech-intro {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: 28px;
align-items: end;
margin: 28px 0 26px;
}
.ethnic-services-tech-intro__copy p {
margin: 0;
}
.ethnic-services-tech-intro__lead {
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(18px, 1.45vw, 22px);
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.02em;
color: var(--ethnic-services-text);
}
.ethnic-services-tech-intro__support {
margin-top: 14px !important;
max-width: 66ch;
}
.ethnic-services-tech-intro__keywords {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: end;
justify-content: flex-start;
}
.ethnic-services-tech-intro__pill {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
color: var(--ethnic-services-text);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.ethnic-services-tech-slider {
position: relative;
margin-top: 10px;
padding: clamp(24px, 4vw, 36px);
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(88, 124, 255, 0.22), transparent 24%),
radial-gradient(circle at bottom right, rgba(73, 225, 197, 0.18), transparent 18%),
linear-gradient(135deg, #0f172a 0%, #12213d 48%, #17325f 100%);
box-shadow: 0 34px 80px rgba(15, 23, 42, 0.16);
}
.ethnic-services-tech-slider::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 95%, rgba(255, 255, 255, 0.05) 95%),
linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.04) 95%);
background-size: 100% 56px, 56px 100%;
opacity: 0.22;
pointer-events: none;
}
.ethnic-services-tech-slider__nav {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px 24px;
margin-bottom: 30px;
}
.ethnic-services-tech-slider__tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-services-tech-slider__tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.86);
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.ethnic-services-tech-slider__tab:hover,
.ethnic-services-tech-slider__tab:focus-visible {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
outline: none;
}
.ethnic-services-tech-slider__tab.is-active {
background: #e7ff89;
border-color: #e7ff89;
color: #0f172a;
}
.ethnic-services-tech-slider__controls {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.ethnic-services-tech-slider__control {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.ethnic-services-tech-slider__control:hover,
.ethnic-services-tech-slider__control:focus-visible {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
outline: none;
}
.ethnic-services-tech-slider__control:disabled {
opacity: 0.42;
cursor: default;
transform: none;
}
.ethnic-services-tech-slider__count {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 64px;
justify-content: center;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
font-weight: 700;
}
.ethnic-services-tech-slider__viewport {
position: relative;
z-index: 1;
display: flex;
overflow: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-y;
overscroll-behavior-x: contain;
}
.ethnic-services-tech-slider__viewport::-webkit-scrollbar {
display: none;
}
.ethnic-services-tech-slide {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 36px;
align-items: start;
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
}
.ethnic-services-tech-slide::before {
content: "";
position: absolute;
right: -10%;
bottom: -26%;
width: 320px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--ethnic-services-accent) 38%, transparent), transparent 70%);
opacity: 0.48;
filter: blur(6px);
pointer-events: none;
}
.ethnic-services-tech-slide__copy,
.ethnic-services-tech-slide__stack {
position: relative;
z-index: 1;
}
.ethnic-services-tech-slide__eyebrow {
margin: 0;
color: color-mix(in srgb, var(--ethnic-services-accent) 58%, #ffffff);
font-size: 12px !important;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ethnic-services-tech-slide h3 {
margin: 14px 0 0;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(30px, 2.4vw, 40px);
line-height: 1.05;
letter-spacing: -0.05em;
}
.ethnic-services-tech-slide__description {
margin: 18px 0 0;
max-width: 36ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 17px;
line-height: 1.68;
}
.ethnic-services-tech-slide__supports {
margin: 18px 0 0;
max-width: 40ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 15px;
line-height: 1.65;
}
.ethnic-services-tech-slide__services {
margin-top: 22px;
}
.ethnic-services-tech-slide__services-label,
.ethnic-services-tech-slide__stack-label {
display: inline-block;
margin: 0 0 12px;
color: rgba(255, 255, 255, 0.64);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ethnic-services-tech-slide__service-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ethnic-services-tech-slide__service-tag {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 13px;
font-weight: 700;
}
.ethnic-services-tech-slide__stack {
padding-left: 34px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.ethnic-services-tech-slide__stack-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.ethnic-services-tech-slide__stack-count {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
font-weight: 700;
}
.ethnic-services-tech-slide__stack-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ethnic-services-tech-slide__stack-item {
display: flex;
align-items: center;
min-height: 54px;
padding: 0 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ethnic-services-industry-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
padding: clamp(22px, 3vw, 28px);
}
.ethnic-services-industry-card__body {
display: flex;
flex-direction: column;
}
.ethnic-services-industries-showcase {
display: grid;
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
gap: 24px;
align-items: start;
}
.ethnic-services-industries-showcase__rail {
display: grid;
gap: 12px;
}
.ethnic-services-industries-showcase__tab {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
width: 100%;
padding: 16px 18px 15px;
border: 1px solid var(--ethnic-services-border);
border-radius: 24px;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--ethnic-services-accent) 8%, transparent), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
color: inherit;
text-align: left;
cursor: pointer;
box-shadow: var(--ethnic-services-shadow);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ethnic-services-industries-showcase__tab:hover,
.ethnic-services-industries-showcase__tab:focus-visible {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--ethnic-services-accent) 24%, rgba(15, 23, 42, 0.12));
box-shadow: var(--ethnic-services-shadow-hover);
outline: none;
}
.ethnic-services-industries-showcase__tab.is-active {
border-color: color-mix(in srgb, var(--ethnic-services-accent) 30%, rgba(15, 23, 42, 0.12));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--ethnic-services-accent) 12%, transparent), transparent 30%),
linear-gradient(180deg, color-mix(in srgb, var(--ethnic-services-accent) 6%, #ffffff), rgba(247, 250, 255, 0.98));
}
.ethnic-services-industries-showcase__tab-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 12px;
background: color-mix(in srgb, var(--ethnic-services-accent) 14%, #ffffff);
border: 1px solid color-mix(in srgb, var(--ethnic-services-accent) 22%, #ffffff);
color: var(--ethnic-services-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.ethnic-services-industries-showcase__tab-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.ethnic-services-industries-showcase__tab-title {
color: var(--ethnic-services-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(19px, 1.35vw, 22px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.04em;
}
.ethnic-services-industries-showcase__tab-text {
margin-top: 7px;
color: var(--ethnic-services-muted);
font-size: 13px;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ethnic-services-industries-showcase__tab-arrow {
color: color-mix(in srgb, var(--ethnic-services-accent) 68%, #0f172a);
font-size: 20px;
line-height: 1;
transform: translateY(2px);
}
.ethnic-services-industries-showcase__stage {
position: relative;
min-height: 100%;
}
.ethnic-services-industry-panel {
position: relative;
display: none;
padding: clamp(28px, 4vw, 38px);
border-radius: 30px;
overflow: hidden;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--ethnic-services-accent) 28%, transparent), transparent 24%),
radial-gradient(circle at bottom right, color-mix(in srgb, var(--ethnic-services-accent) 20%, transparent), transparent 20%),
linear-gradient(135deg, #0f172a 0%, #12213d 45%, #17325f 100%);
box-shadow: 0 34px 80px rgba(15, 23, 42, 0.16);
}
.ethnic-services-industry-panel.is-active {
display: block;
}
.ethnic-services-industry-panel::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 95%, rgba(255, 255, 255, 0.05) 95%),
linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.04) 95%);
background-size: 100% 56px, 56px 100%;
opacity: 0.2;
pointer-events: none;
}
.ethnic-services-industry-panel > * {
position: relative;
z-index: 1;
}
.ethnic-services-industry-panel__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ethnic-services-industry-panel__eyebrow,
.ethnic-services-industry-panel__count,
.ethnic-services-industry-panel__label {
margin: 0;
color: rgba(255, 255, 255, 0.66);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ethnic-services-industry-panel h3 {
margin: 18px 0 0;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(34px, 2.8vw, 48px);
line-height: 0.98;
letter-spacing: -0.05em;
}
.ethnic-services-industry-panel__description {
margin: 18px 0 0;
max-width: 36ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 18px;
line-height: 1.62;
}
.ethnic-services-industry-panel__spotlight {
margin: 20px 0 0;
max-width: 46ch;
color: rgba(255, 255, 255, 0.74) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.74);
font-size: 15px;
line-height: 1.72;
}
.ethnic-services-industry-panel__details {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
gap: 24px;
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ethnic-services-industry-panel__list {
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.ethnic-services-industry-panel__list li {
position: relative;
padding-left: 18px;
color: #ffffff;
font-size: 15px;
line-height: 1.65;
}
.ethnic-services-industry-panel__list li + li {
margin-top: 10px;
}
.ethnic-services-industry-panel__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.78em;
width: 7px;
height: 7px;
border-radius: 50%;
background: color-mix(in srgb, var(--ethnic-services-accent) 82%, #ffffff);
transform: translateY(-50%);
}
.ethnic-services-industry-panel__service-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.ethnic-services-industry-panel__service-tag {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 13px;
font-weight: 700;
}
.ethnic-services-industry-panel__cta {
margin-top: 28px;
}
.ethnic-services-inline-link {
margin-top: 20px;
text-decoration: none;
}
.ethnic-services-faq {
display: grid;
gap: 18px;
}
.ethnic-services-faq__item {
overflow: hidden;
}
.ethnic-services-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 24px 28px;
cursor: pointer;
list-style: none;
color: var(--ethnic-services-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 600;
line-height: 1.3;
}
.ethnic-services-faq__item summary::-webkit-details-marker {
display: none;
}
.ethnic-services-faq__item[open] summary {
color: var(--ethnic-services-accent);
}
.ethnic-services-faq__marker {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.9);
}
.ethnic-services-faq__marker::before,
.ethnic-services-faq__marker::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%);
}
.ethnic-services-faq__marker::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: opacity 180ms ease;
}
.ethnic-services-faq__item[open] .ethnic-services-faq__marker::after {
opacity: 0;
}
.ethnic-services-faq__answer {
padding: 0 28px 26px;
}
.ethnic-services-faq__answer p {
margin: 0;
}
.ethnic-services-section--cta {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-services-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: end;
padding: clamp(28px, 5vw, 48px);
background:
radial-gradient(circle at top left, rgba(47, 107, 255, 0.14), transparent 26%),
radial-gradient(circle at bottom right, rgba(231, 255, 137, 0.18), transparent 18%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
}
.ethnic-services-cta p {
max-width: 64ch;
margin: 14px 0 0;
}
@media (max-width: 1200px) {
.ethnic-services-grid--services,
.ethnic-services-grid--industries {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-services-grid--delivery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-services-tech-intro,
.ethnic-services-tech-slide {
grid-template-columns: 1fr;
}
.ethnic-services-tech-slider__nav {
flex-direction: column;
align-items: stretch;
}
.ethnic-services-tech-slider__controls {
justify-content: space-between;
}
.ethnic-services-tech-slide__stack {
padding-left: 0;
padding-top: 26px;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ethnic-services-industries-showcase {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
.ethnic-services-cta {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.ethnic-services-shell,
.ethnic-services-shell--narrow {
width: min(1240px, calc(100% - (var(--ethnic-page-shell-padding, 16px) * 2)));
}
.ethnic-services-section + .ethnic-services-section {
margin-top: 56px;
}
.ethnic-services-hero {
min-height: auto;
padding: 60px 0;
}
.ethnic-services-hero__title {
max-width: 100%;
font-size: clamp(30px, 9vw, 40px);
}
.ethnic-services-heading__title,
.ethnic-services-cta h2 {
font-size: clamp(26px, 7.4vw, 32px);
}
.ethnic-services-actions {
flex-direction: column;
align-items: stretch;
}
.ethnic-services-button {
width: 100%;
}
.ethnic-services-grid--services,
.ethnic-services-grid--delivery,
.ethnic-services-grid--industries {
grid-template-columns: 1fr;
}
.ethnic-services-card__list {
grid-template-columns: 1fr;
}
.ethnic-services-card__art {
opacity: 0.16;
}
.ethnic-services-faq__item summary,
.ethnic-services-faq__answer,
.ethnic-services-tech-card,
.ethnic-services-industry-card,
.ethnic-services-card__link,
.ethnic-services-card__model-inner,
.ethnic-services-cta {
padding-left: 22px;
padding-right: 22px;
}
.ethnic-services-faq__item summary {
font-size: 17px;
padding-top: 22px;
padding-bottom: 22px;
}
.ethnic-services-tech-slider {
padding: 22px;
border-radius: 28px;
}
.ethnic-services-tech-slider__tabs {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 4px;
}
.ethnic-services-tech-slider__tabs::-webkit-scrollbar {
display: none;
}
.ethnic-services-tech-slide h3 {
font-size: clamp(28px, 8.5vw, 36px);
}
.ethnic-services-tech-slide__description,
.ethnic-services-tech-slide__supports {
max-width: 100%;
}
.ethnic-services-tech-slide__stack-items {
grid-template-columns: 1fr;
}
.ethnic-services-industries-showcase__rail {
gap: 10px;
}
.ethnic-services-industries-showcase__tab {
grid-template-columns: auto minmax(0, 1fr);
}
.ethnic-services-industries-showcase__tab-arrow {
display: none;
}
.ethnic-services-industry-panel {
padding: 24px 22px;
border-radius: 26px;
}
.ethnic-services-industry-panel__details {
grid-template-columns: 1fr;
}
.ethnic-services-industry-panel__top {
align-items: flex-start;
}
.ethnic-services-industry-panel h3 {
font-size: clamp(30px, 8.5vw, 38px);
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_services_page_body_class' ) ) {
function ethnic_services_page_body_class( $classes ) {
if ( ethnic_services_page_is_target() ) {
$classes[] = 'ethnic-services-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_services_page_body_class' );
}
if ( ! function_exists( 'ethnic_services_page_enqueue_assets' ) ) {
function ethnic_services_page_enqueue_assets() {
if ( ! ethnic_services_page_is_target() ) {
return;
}
wp_dequeue_style( 'elementor-post-843' );
wp_deregister_style( 'elementor-post-843' );
}
add_action( 'wp_enqueue_scripts', 'ethnic_services_page_enqueue_assets', 120 );
}
if ( ! function_exists( 'ethnic_services_page_print_head_assets' ) ) {
function ethnic_services_page_print_head_assets() {
if ( ! ethnic_services_page_is_target() ) {
return;
}
?>
<style id="ethnic-services-page-inline-css" type="text/css">
<?php echo ethnic_services_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</style>
<meta name="description" content="Explore app development, eCommerce, AI/ML, DevOps, game development, and blockchain services from Ethnic Infotech. Discover technologies, industries, FAQs, and delivery models." />
<?php
}
add_action( 'wp_head', 'ethnic_services_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_services_page_print_footer_assets' ) ) {
function ethnic_services_page_print_footer_assets() {
if ( ! ethnic_services_page_is_target() ) {
return;
}
?>
<script id="ethnic-services-page-inline-js">
(function () {
function initTechSliders() {
document.querySelectorAll('[data-ethnic-tech-slider]').forEach(function (slider) {
var track = slider.querySelector('[data-ethnic-tech-track]');
var slides = Array.prototype.slice.call(slider.querySelectorAll('[data-ethnic-tech-slide]'));
var tabs = Array.prototype.slice.call(slider.querySelectorAll('[data-ethnic-tech-tab]'));
var prev = slider.querySelector('[data-ethnic-tech-prev]');
var next = slider.querySelector('[data-ethnic-tech-next]');
var current = slider.querySelector('[data-ethnic-tech-current]');
var total = slider.querySelector('[data-ethnic-tech-total]');
var index = 0;
var scrollFrame = null;
if ( ! track || ! slides.length ) {
return;
}
function formatNumber(value) {
return String(value + 1).padStart(2, '0');
}
function render(targetIndex, shouldScroll) {
index = Math.max(0, Math.min(targetIndex, slides.length - 1));
tabs.forEach(function (tab, tabIndex) {
var isActive = tabIndex === index;
tab.classList.toggle('is-active', isActive);
tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
tab.tabIndex = isActive ? 0 : -1;
});
slides.forEach(function (slide, slideIndex) {
slide.setAttribute('aria-hidden', slideIndex === index ? 'false' : 'true');
});
if ( current ) {
current.textContent = formatNumber(index);
}
if ( total ) {
total.textContent = String(slides.length).padStart(2, '0');
}
if ( prev ) {
prev.disabled = index === 0;
}
if ( next ) {
next.disabled = index === slides.length - 1;
}
if ( shouldScroll ) {
track.scrollTo({
left: slides[index].offsetLeft,
behavior: 'smooth'
});
}
}
tabs.forEach(function (tab, tabIndex) {
tab.addEventListener('click', function () {
render(tabIndex, true);
});
});
if ( prev ) {
prev.addEventListener('click', function () {
render(index - 1, true);
});
}
if ( next ) {
next.addEventListener('click', function () {
render(index + 1, true);
});
}
track.addEventListener('scroll', function () {
if ( scrollFrame ) {
window.cancelAnimationFrame(scrollFrame);
}
scrollFrame = window.requestAnimationFrame(function () {
var nextIndex = Math.round(track.scrollLeft / Math.max(track.clientWidth, 1));
if ( nextIndex !== index ) {
render(nextIndex, false);
}
});
}, { passive: true });
window.addEventListener('resize', function () {
render(index, false);
track.scrollTo({ left: slides[index].offsetLeft, behavior: 'auto' });
});
render(0, false);
});
}
function initIndustryShowcases() {
document.querySelectorAll('[data-ethnic-industries-showcase]').forEach(function (showcase) {
var tabs = Array.prototype.slice.call(showcase.querySelectorAll('[data-ethnic-industry-tab]'));
var panels = Array.prototype.slice.call(showcase.querySelectorAll('[data-ethnic-industry-panel]'));
var index = 0;
if ( ! tabs.length || ! panels.length ) {
return;
}
function render(targetIndex) {
index = Math.max(0, Math.min(targetIndex, panels.length - 1));
tabs.forEach(function (tab, tabIndex) {
var isActive = tabIndex === index;
tab.classList.toggle('is-active', isActive);
tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
tab.tabIndex = isActive ? 0 : -1;
});
panels.forEach(function (panel, panelIndex) {
var isActive = panelIndex === index;
panel.classList.toggle('is-active', isActive);
panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
});
}
tabs.forEach(function (tab, tabIndex) {
tab.addEventListener('click', function () {
render(tabIndex);
});
});
render(0);
});
}
if ( document.readyState === 'loading' ) {
document.addEventListener('DOMContentLoaded', function () {
initTechSliders();
initIndustryShowcases();
}, { once: true });
} else {
initTechSliders();
initIndustryShowcases();
}
}());
</script>
<?php
}
add_action( 'wp_footer', 'ethnic_services_page_print_footer_assets', 120 );
}
if ( ! function_exists( 'ethnic_services_page_document_title' ) ) {
function ethnic_services_page_document_title( $title ) {
if ( ethnic_services_page_is_target() ) {
return 'Services | Ethnic Infotech';
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_services_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_services_page_replace_content' ) ) {
function ethnic_services_page_replace_content( $content ) {
if ( ! ethnic_services_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_services_page_render();
}
add_filter( 'the_content', 'ethnic_services_page_replace_content', 1000 );
}