Spaces:

Julien355
/

https-huggingface-co-spaces-julien355-arkan-agilitech

Running

App Files Files Community

https-huggingface-co-spaces-julien355-arkan-agilitech / index.html

Julien355

replace the photo by a map of south east asia - Initial Deployment

27483da verified 12 months ago

Raw

History Blame Contribute Delete

108 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ARKAN Solutions \| Integrated MEP, Utilities & Renewable Energy Solutions</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#0057b8',
	secondary: '#2a9d8f',
	dark: '#002f4d',
	light: '#f8f9fb',
	accent: '#ff7b00',
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

	* {
	font-family: 'Poppins', sans-serif;
	}

	.hero-background {
	background:
	linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)),
	url('https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
	background-size: cover;
	background-position: center;
	transition: background-image 1s ease-in-out;
	}

	.hero-background.alternate-bg {
	background-image:
	linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)),
	url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1800&q=80');
	}

	.hero-background.alternate-bg {
	background-image:
	linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)),
	url('https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
	}

	.hero-background.alternate-bg {
	background-image:
	linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)),
	url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
	}

	.hero-background.third-bg {
	background-image:
	linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)),
	url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80');
	}
	#tagline-container {
	transition: opacity 1s ease-in-out;
	}
	.tagline-slide {
	animation: slideIn 0.8s ease-in-out;
	}

	@keyframes slideIn {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
	}

	.expertise-card {
	transition: all 0.3s ease;
	}

	.expertise-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.service-tab.active {
	border-bottom: 3px solid #ff7b00;
	color: #0057b8;
	}

	.service-tab-content {
	display: none;
	}

	.service-tab-content.active {
	display: block;
	animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.project-card {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s ease;
	}

	.project-card.visible {
	opacity: 1;
	transform: translateY(0);
	}

	.contact-modal {
	backdrop-filter: blur(5px);
	}

	.carousel-container {
	width: 100%;
	overflow: hidden;
	}

	.carousel-track {
	display: flex;
	will-change: transform;
	}

	.bg-pattern {
	background-image: radial-gradient(#e2e8f0 1px, transparent 2px);
	background-size: 20px 20px;
	}

	.rotate-180 {
	transform: rotate(180deg);
	}

	/* Mobile menu transitions */
	.mobile-menu {
	opacity: 0;
	transform: translateY(-20px);
	}

	.mobile-menu:not(.hidden) {
	opacity: 1;
	transform: translateY(0);
	}

	.mobile-submenu {
	max-height: 0;
	overflow: hidden;
	}

	.mobile-submenu:not(.hidden) {
	max-height: 1000px;
	transition: max-height 0.5s ease-in-out;
	}
	</style>
	</head>
	<body class="bg-light">
	<!-- Header & Navigation -->
	<header class="fixed w-full z-50 bg-white shadow-md">
	<nav class="container mx-auto px-4 py-4 flex justify-between items-center">
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3">
	<svg viewBox="0 0 24 24" class="w-6 h-6 text-white">
	<path fill="currentColor" d="M12 3L2 12h3v8h14v-8h3L12 3zm0 5.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/>
	</svg>
	</div>
	<h1 class="text-2xl font-bold">ARKAN <span class="text-secondary">Solutions</span></h1>
	</div>

	<div class="hidden md:flex items-center space-x-8">
	<!-- Main Navigation -->
	<div class="flex space-x-8">
	<a href="#home" class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2">
	<i class="fas fa-home mr-2 text-sm"></i> Home
	</a>

	<!-- Services Dropdown -->
	<div class="relative group">
	<button class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2">
	<i class="fas fa-cogs mr-2 text-sm"></i> Services <i class="ml-1 fas fa-chevron-down text-xs"></i>
	</button>
	<div class="absolute hidden group-hover:block w-64 bg-white shadow-xl rounded-lg p-2 z-50">
	<a href="#expertise" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-lightbulb mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">Fields of Expertise</div>
	</div>
	</a>
	<a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-building mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Building MEP Services</div>
	</a>
	<a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-water mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Site Utilities Infrastructure</div>
	</a>
	<a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-solar-panel mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Renewable Energy Systems</div>
	</a>
	<a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-hands-helping mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Extended & Integrated Services</div>
	</a>
	<a href="#services" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-list-alt mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">Service Categories</div>
	</div>
	</a>
	<a href="#industries-we-serve" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-industry mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">Industries We Serve</div>
	</div>
	</a>
	</div>
	</div>

	<a href="#projects" class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2">
	<i class="fas fa-project-diagram mr-2 text-sm"></i> Projects
	</a>
	<!-- About Us Dropdown -->
	<div class="relative group">
	<button class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2">
	<i class="fas fa-info-circle mr-2 text-sm"></i> About Us <i class="ml-1 fas fa-chevron-down text-xs"></i>
	</button>
	<div class="absolute hidden group-hover:block w-64 bg-white shadow-xl rounded-lg p-2 z-50">
	<a href="#about" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-building mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">About Us</div>
	</div>
	</a>
	<a href="#team" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-users mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">Our Team</div>
	</div>
	</a>
	<a href="#strategic-partners" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center">
	<i class="fas fa-handshake mr-3 text-secondary"></i>
	<div>
	<div class="font-semibold">Partners</div>
	</div>
	</a>
	</div>
	</div>
	</div>

	<!-- CTA Button -->
	<div class="border-l border-gray-200 pl-6">
	<a href="#contact" class="px-5 py-2 bg-primary rounded-lg text-white hover:bg-primary/90 transition flex items-center">
	<i class="fas fa-paper-plane mr-2"></i> Contact
	</a>
	</div>
	</div>

	<button class="md:hidden text-dark mobile-menu-button">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</nav>
	</header>

	<!-- Mobile Menu -->
	<div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white pt-16 overflow-y-auto transition-all duration-300 ease-in-out">
	<div class="container mx-auto px-6 py-4">
	<a href="#home" class="block py-4 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition flex items-center text-lg">
	<i class="fas fa-home mr-3 text-primary text-xl"></i> Home
	</a>

	<!-- Services Dropdown -->
	<div class="group">
	<button class="mobile-menu-dropdown flex items-center justify-between w-full py-4 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition text-lg">
	<div class="flex items-center">
	<i class="fas fa-cogs mr-3 text-primary text-xl"></i> Services
	</div>
	<i class="fas fa-chevron-down text-sm transition-transform duration-200"></i>
	</button>
	<div class="mobile-submenu hidden pl-8 transition-all duration-300 ease-in-out">
	<a href="#expertise" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-lightbulb mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">Fields of Expertise</div>
	</div>
	</a>
	<a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-building mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Building MEP Services</div>
	</a>
	<a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-water mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Site Utilities Infrastructure</div>
	</a>
	<a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-solar-panel mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Renewable Energy Systems</div>
	</a>
	<a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12">
	<i class="fas fa-hands-helping mr-3 text-secondary text-sm"></i>
	<div class="text-sm">Extended & Integrated Services</div>
	</a>
	<a href="#services" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-list-alt mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">Service Categories</div>
	</div>
	</a>
	<a href="#industries-we-serve" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-industry mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">Industries We Serve</div>
	</div>
	</a>
	</div>
	</div>

	<a href="#projects" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-project-diagram mr-3 text-primary"></i> Projects
	</a>

	<!-- About Us Dropdown -->
	<div class="group">
	<button class="mobile-menu-dropdown flex items-center justify-between w-full py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition">
	<div class="flex items-center">
	<i class="fas fa-info-circle mr-3 text-primary"></i> About Us
	</div>
	<i class="fas fa-chevron-down text-xs transition-transform duration-200"></i>
	</button>
	<div class="mobile-submenu hidden pl-8">
	<a href="#about" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-building mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">About Us</div>
	</div>
	</a>
	<a href="#team" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-users mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">Our Team</div>>
	</div>
	</a>
	<a href="#strategic-partners" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center">
	<i class="fas fa-handshake mr-3 text-secondary"></i>
	<div>
	<div class="font-medium">Partners</div>
	</div>
	</a>
	</div>
	</div>

	<a href="#contact" class="block py-3 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition flex items-center justify-center mt-4">
	<i class="fas fa-paper-plane mr-2"></i> Contact
	</a>
	</div>
	</div>

	<!-- Hero Section -->
	<section id="home" class="hero-background text-white pt-40 pb-28">
	<div class="container mx-auto px-4 text-center">
	<div class="mb-4">
	<div id="tagline-container">
	<h2 class="tagline-slide text-4xl md:text-6xl font-bold leading-tight">Integrated MEP, Utilities & Renewable Energy Solutions</h2>
	</div>
	</div>

	<p class="max-w-3xl mx-auto text-lg md:text-xl mb-10">
	From planning to commissioning, we align building MEP services, site utilities, and energy systems into one seamless design.
	</p>

	<div class="flex flex-col sm:flex-row gap-4 justify-center">
	<a href="#expertise" class="px-8 py-4 bg-accent rounded-full text-white font-bold text-lg hover:bg-orange-600 transition transform hover:-translate-y-1 flex items-center justify-center">
	Our Fields of Expertise <i class="ml-2 fas fa-arrow-right"></i>
	</a>
	<a href="#contact" class="px-8 py-4 border-2 border-white rounded-full text-white font-bold text-lg hover:bg-white hover:text-primary transition transform hover:-translate-y-1 flex items-center justify-center">
	Contact Us <i class="ml-2 fas fa-envelope"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- About Slideshow -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="relative max-w-5xl mx-auto">
	<!-- Slideshow container -->
	<div class="slideshow-container overflow-hidden relative rounded-xl shadow-lg">
	<!-- Slide 1 - What We Do -->
	<div class="slide flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 p-8 md:p-12">
	<h2 class="text-3xl font-bold mb-4 text-dark">What We Do</h2>
	<div class="w-24 h-1 bg-secondary mb-6"></div>
	<p class="text-gray-700 mb-6">
	At <strong>ARKAN Solutions</strong>, we specialize in solving complex challenges in <strong>building systems, utilities, and renewable energy</strong> integration. We bring an integrated, multidisciplinary approach to deliver efficient, sustainable, and resilient solutions for <strong>Mechanical, Electrical, Plumbing</strong> systems in <strong>hospitality, commercial, industrial, and off-grid developments</strong>.
	</p>
	<ul class="space-y-3 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>Integrated MEP system design</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>Utility infrastructure planning</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>Renewable energy integration</span>
	</li>
	</ul>
	</div>
	<div class="md:w-1/2 h-96 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?auto=format&fit=crop&w=600&q=80')"></div>
	</div>

	<!-- Slide 2 - Who We Are -->
	<div class="slide flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 p-8 md:p-12">
	<h2 class="text-3xl font-bold mb-4 text-dark">Who We Are</h2>
	<div class="w-24 h-1 bg-secondary mb-6"></div>
	<p class="text-gray-700 mb-6">
	We are a team of <strong>engineers, project managers, and technical experts</strong> committed to international standards and environmental best practices. We provide a one-stop service model that spans <strong>design, engineering, consulting, and delivery</strong> — tailored to the needs of developers, operators, and asset owners in Indonesia, Southeast Asia and beyond.
	</p>
	<ul class="space-y-3 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>Multidisciplinary engineering team</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>Regional and international experience</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2"><i class="fas fa-check-circle"></i></span>
	<span>One-stop service model</span>
	</li>
	</ul>
	</div>
	<div class="md:w-1/2 h-96 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/MEP-1-800x600.jpg')"></div>
	</div>

	<!-- Slide 3 - Key Numbers -->
	<div class="slide flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 p-8 md:p-12">
	<h2 class="text-3xl font-bold mb-4 text-dark">Key Numbers</h2>
	<div class="w-24 h-1 bg-secondary mb-6"></div>
	<div class="grid grid-cols-2 gap-6">
	<div class="bg-primary/10 p-4 rounded-lg">
	<div class="text-4xl font-bold text-primary mb-2">15+</div>
	<div class="text-gray-700">Years Experience</div>
	</div>
	<div class="bg-secondary/10 p-4 rounded-lg">
	<div class="text-4xl font-bold text-secondary mb-2">100+</div>
	<div class="text-gray-700">Projects Delivered</div>
	</div>
	<div class="bg-accent/10 p-4 rounded-lg">
	<div class="text-4xl font-bold text-accent mb-2">100%</div>
	<div class="text-gray-700">International Standards</div>
	</div>
	<div class="bg-dark/10 p-4 rounded-lg">
	<div class="text-4xl font-bold text-dark mb-2">50+</div>
	<div class="text-gray-700">Happy Clients</div>
	</div>
	</div>
	</div>
	<div class="md:w-1/2 h-96 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1521791055366-0d553872125f?auto=format&fit=crop&w=1200&q=80')"></div>
	</div>
	</div>

	<!-- Navigation arrows -->
	<button class="slideshow-prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-12 bg-white rounded-full p-3 shadow-lg hover:bg-gray-100 transition z-10">
	<i class="fas fa-chevron-left text-primary"></i>
	</button>
	<button class="slideshow-next absolute right-0 top-1/2 -translate-y-1/2 translate-x-12 bg-white rounded-full p-3 shadow-lg hover:bg-gray-100 transition z-10">
	<i class="fas fa-chevron-right text-primary"></i>
	</button>

	<!-- Dots navigation -->
	<div class="flex justify-center mt-6 space-x-2">
	<button class="slideshow-dot w-3 h-3 rounded-full bg-gray-300 hover:bg-primary transition"></button>
	<button class="slideshow-dot w-3 h-3 rounded-full bg-gray-300 hover:bg-primary transition"></button>
	<button class="slideshow-dot w-3 h-3 rounded-full bg-gray-300 hover:bg-primary transition"></button>
	</div>
	</div>
	</div>
	</section>

	<!-- Fields of Expertise -->
	<section id="expertise" class="py-20 bg-gradient-to-br from-blue-50 to-gray-100">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-dark">Our Fields of Expertise</h2>
	<div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
	<p class="mt-6 max-w-2xl mx-auto text-gray-600">
	We specialize in delivering integrated solutions across these key engineering disciplines, combining technical excellence with sustainable innovation.
	</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
	<!-- Building MEP Services -->
	<div class="expertise-card bg-white rounded-lg shadow-md overflow-hidden">
	<div class="h-48 overflow-hidden">
	<img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="MEP Services" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-building text-white text-xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Building MEP Services</h3>
	<p class="mb-4">Complete design and engineering solutions for mechanical, electrical, and plumbing systems in buildings. We focus on performance, compliance, and long-term efficiency across hospitality, residential, commercial, and industrial facilities.</p>
	<a href="/services.html" class="text-secondary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2 text-sm"></i></a>
	</div>
	</div>

	<!-- Site Utilities Infrastructure -->
	<div class="expertise-card bg-white rounded-lg shadow-md overflow-hidden">
	<div class="h-48 overflow-hidden">
	<img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Utilities Infrastructure" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
	<i class="fas fa-water text-white text-xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Site Utilities Infrastructure</h3>
	<p class="mb-4">Utility network design and infrastructure integration for developments requiring resilient water, power, wastewater, and fuel systems. Ideal for resorts, mixed-use complexes, and remote sites.</p>
	<a href="/services.html" class="text-secondary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2 text-sm"></i></a>
	</div>
	</div>

	<!-- Renewable Energy Systems -->
	<div class="expertise-card bg-white rounded-lg shadow-md overflow-hidden">
	<div class="h-48 overflow-hidden">
	<img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Renewable Energy" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="w-16 h-16 rounded-full bg-green-100 text-green-500 flex items-center justify-center mb-6">
	<i class="fas fa-solar-panel text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Renewable Energy Systems</h3>
	<p class="mb-4">Design and implemention of integrated renewable energy systems, including solar PV, battery storage, and hybrid power plants, to support sustainable and resilient infrastructures, optimized to meet project-specific goals.</p>
	<a href="/services.html" class="text-secondary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2 text-sm"></i></a>
	</div>
	</div>

	<!-- Extended & Integrated Services -->
	<div class="expertise-card bg-white rounded-lg shadow-md overflow-hidden">
	<div class="h-48 overflow-hidden">
	<img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Integrated Services" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="w-16 h-16 rounded-full bg-orange-100 text-accent flex items-center justify-center mb-6">
	<i class="fas fa-hands-helping text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Extended & Integrated Services</h3>
	<p class="mb-4">Full suite of engineering, consulting, and delivery services through our multidisciplinary network — from site assessments and structural design to construction, asset management, and sustainability consulting.</p>
	<a href="/services.html" class="text-secondary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2 text-sm"></i></a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Services Overview -->
	<section id="services" class="py-20">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-dark">Comprehensive Services</h2>
	<div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
	<p class="mt-6 max-w-2xl mx-auto text-gray-600">
	We provide end-to-end engineering services from initial planning through project execution, delivering integrated solutions tailored to your specific needs.
	</p>
	</div>

	<div class="flex flex-wrap justify-center mb-10">
	<button class="service-tab active mx-2 px-5 py-3 font-medium text-gray-600">Planning</button>
	<button class="service-tab mx-2 px-5 py-3 font-medium text-gray-600">Design & Engineering</button>
	<button class="service-tab mx-2 px-5 py-3 font-medium text-gray-600">Consulting</button>
	<button class="service-tab mx-2 px-5 py-3 font-medium text-gray-600">Advisory</button>
	<button class="service-tab mx-2 px-5 py-3 font-medium text-gray-600">Project Management</button>
	</div>

	<div class="service-content">
	<!-- Planning Content (default shown) -->
	<div class="service-tab-content active">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80')"></div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold mb-4 text-primary">Strategic Planning Services</h3>
	<p class="mb-4 font-medium">Overcome complex feasibility challenges</p>
	<p class="mb-4">Our holistic planning approach combines energy modeling, site assessment, and ROI analysis to create sustainable, cost-effective project blueprints.</p>

	<p class="mb-4 font-medium">We Deliver:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Feasibility studies & energy audits</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Integrated project roadmaps</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Utility and load forecasts</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Resource optimization strategies</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Sustainability compliance plans</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Master planning reports</span>
	<li>
	</ul>


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

	<!-- Design & Engineering Content -->
	<div class="service-tab-content">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1507582020474-9a35b7d455d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold mb-4 text-primary">Design & Engineering Services</h3>
	<p class="mb-4 font-medium"> Transform concepts into efficient, buildable systems</p>
	<p class="mb-4">Our multidisciplinary team delivers coordinated, code-compliant designs that optimize performance while reducing costs and environmental impact.</p>

	<p class="mb-4 font-medium">We Deliver:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Integrated MEP and utility drawings</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Energy-efficient system design</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Load calculations & simulations</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Energy-efficient system design</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Equipment sizing and specifications</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Construction documentation</span>
	</li>
	</ul>

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

	<!-- Consulting Content -->
	<div class="service-tab-content">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80')"></div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold mb-4 text-primary">Consulting Services</h3>
	<p class="mb-4 font-medium">Navigate complex engineering decisions and regulations</p>
	<p class="mb-4">Our expert consultants provide strategic guidance, technical analysis, and compliance solutions tailored to your project needs.</p>

	<p class="mb-4 font-medium">We Deliver:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Energy efficiency optimization</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Code compliance & permitting</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Technical due diligence</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Tender documentation and evaluation reports</span>
	<li> <li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Value engineering studies</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Lifecycle cost analysis (CAPEX & OPEX)</span>
	</li>
	</ul>

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

	<!-- Advisory Content -->
	<div class="service-tab-content">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=600&q=80')"></div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold mb-4 text-primary">Advisory Services</h3>
	<p class="mb-4 font-medium">Making informed engineering decisions with long-term impact</p>
	<p class="mb-4">Our strategic advisors provide expert guidance on technology selection, system optimization, and future-proofing your infrastructure investments.</p>

	<p class="mb-4 font-medium">We Deliver:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Technology roadmap development</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Investment feasibility studies</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Regulatory compliance strategy</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Operational efficiency strategies</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Resilience and risk assessment</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Lifecycle cost optimization plans</span>
	</li>
	</ul>

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

	<!-- Project Management Content -->
	<div class="service-tab-content">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1521791055366-0d553872125f?auto=format&fit=crop&w=1200&q=80')"></div>
	<div class="md:w-1/2 p-8">
	<h3 class="text-2xl font-bold mb-4 text-primary">Project Management Services</h3>
	<p class="mb-4 font-medium">Ensuring complex engineering projects stay on time, on budget, and meet all specifications</p>
	<p class="mb-4">Our project management team supports full delivery process and provide integrated development project management, ensuring alignment between design, procurement, construction, and commissioning.</p>

	<p class="mb-4 font-medium">We Deliver:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Full project lifecycle management</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Cost control & schedule optimization</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Site Inspection & Quality Control</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Stakeholder coordination & reporting</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Procurement and logistics coordination plans</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Testing, commissioning and handover documentation</span>
	</li>
	</ul>

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

	<!-- Industries We Serve -->
	<section id="industries-we-serve" class="py-20 bg-gradient-to-br from-blue-50 to-gray-100">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-dark">Industries We Serve</h2>
	<div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
	</div>

	<div class="grid md:grid-cols-3 gap-4">
	<!-- Industry 1 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div>
	<div class="p-8">
	<div class="w-16 h-16 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-6">
	<i class="fas fa-umbrella-beach text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Hospitality & Resorts</h3>
	<p class="text-gray-600">
	Solutions for resorts, boutique hotels, villas and hospitality venues that balance guest comfort with energy efficiency and environmental responsibility.
	</p>
	</div>
	</div>

	<!-- Industry 2 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1769&q=80')"></div>
	<div class="p-8">
	<div class="w-16 h-16 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mb-6">
	<i class="fas fa-building text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Commercial & Industrial</h3>
	<p class="text-gray-600">
	Comprehensive engineering for retail & office complexes, commerical areas, manufacturing & industrial facilities with optimized utility infrastructure and smart building systems.
	</p>
	</div>
	</div>

	<!-- Industry 3 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div>
	<div class="p-8">
	<div class="w-16 h-16 rounded-full bg-green-100 text-green-500 flex items-center justify-center mb-6">
	<i class="fas fa-map-marked-alt text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">Remote & Off-grid</h3>
	<p class="text-gray-600">
	Innovative solutions for challenging locations including microgrids, water supplies, and sustainable infrastructure for remote areas with scares resources and difficult logistics.
	</p>
	</div>
	</div>
	</div>

	<!-- Info -->
	<div class="mt-12 bg-gray-50 rounded-xl p-6 md:p-8">
	<div class="flex flex-col md:flex-row items-center">
	<div class="md:w-1/3 mb-6 md:mb-0 text-center">
	<i class="fas fa-sync-alt text-4xl text-secondary mb-4"></i>
	<h3 class="text-xl font-semibold">Adaptable Solutions</h3>
	</div>
	<div class="md:w-2/3 text-center md:text-left">
	<p class="text-gray-700">
	Our multidisciplinary engineering approach allows us to customize solutions to meet the unique operational requirements, regulatory environments, and sustainability goals of each sector we serve. From luxury resorts to industrial facilities and off grid projects, we design integrated systems optimized for efficiency, resilience, and performance.
	</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Featured Projects -->
	<section id="projects" class="py-20 bg-blue-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-dark">Featured Projects</h2>
	<div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
	</div>

	<div class="relative">
	<div class="carousel-container overflow-hidden">
	<div class="carousel-track flex transition-transform duration-500 ease-in-out gap-4">
	<!-- Project 1 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/Nihi%20Sumba.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-bolt mr-1"></i> Energy
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">
	<i class="fas fa-tint mr-1"></i> Water
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Nihi Sumba Resort</h3>
	<p class="text-gray-600 mb-4">Expansion of a world-renowned resort requiring electricity & Water utilies site infrastructure upgrade.</p>
	<p class="text-gray-600 mb-4">Power house, feeder cables, RO system, pumping stations.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Energy & Water Load Planning</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Site utilities masterplan & design (water, wastewater, electrical)</span>
	</li>
	</ul>

	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2024-2025</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Sumba, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Project 2 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/Nihi%20Rote.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">
	<i class="fas fa-solar-panel text-1xl"></i> RNE
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">
	<i class="fas fa-building mr-1"></i> Building
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Nihi Rote Resort</h3>
	<p class="text-gray-600 mb-4">Development of a luxury resort on a remote island requiring full MEP and utility design.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Building Services MEP design</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Site utilities masterplan & design (water, wastewater, electrical)</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Electrical & Water strategies</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Construction management & coordination support</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>1MW/3Mwh Solar Hybrid System Design</span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2024-2025</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Rote, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Project 3 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/SUmba%20Hospitality%20Foundation.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">
	<i class="fas fa-building mr-1"></i> Building
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Sumba Hospitality Foundation</h3>
	<p class="text-gray-600 mb-4">Development of sustainable hospitality school campus including training facilities, housing, restaurant and utilities.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>MEP & site utility design, procurement and installation</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>100kWp/1Mwh Hybrid solar system design and integration</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Automatic Wastewater recycling system design</span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2017-2018</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Sumba, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Project 4 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/SUmba%20Hospitality%20Foundation%20Solar%20PV%20Hybrid.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">
	<i class="fas fa-solar-panel text-1xl"></i> RNE
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Cap Karoso</h3>
	<p class="text-gray-600 mb-4">High-end beachfront resort development & construction.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Building MEP engineering</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Site utilities masterplan & design (water, wastewater, electrical)</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Solar Hybrid System Design</span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2017-2018</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Sumba, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Project 5 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/Bali%20Ocean%20Whisper.jpg')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">
	<i class="fas fa-building mr-1"></i> Building
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Bali Ocean Whisper villa Complex</h3>
	<p class="text-gray-600 mb-4">Stilt wooden villa complex requiring integrated MEP and utilities.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Full MEP design for all villas</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Infrastructure planning and utility layout</span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2024</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Bali, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Project 6 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/Jaya%20Villa%20Resort.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-bolt mr-1"></i> Energy
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">
	<i class="fas fa-tint mr-1"></i> Water
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Jaya Villa Resort</h3>
	<p class="text-gray-600 mb-4">Villa boutique resort master planning and technical advisory.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Load planning and infrastructure design</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>System sizing calculation and drawings</span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2023</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Lombok, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Project 7 -->
	<div class="project-card bg-white rounded-xl shadow-lg overflow-hidden flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 min-h-[700px]">
	<div class="h-40 bg-cover bg-center" style="background-image: url('https://huggingface.co/spaces/Julien355/arkan-agilitech/resolve/main/images/Adab%20Boutique%20Resort.png')"></div>
	<div class="p-4">
	<div class="flex items-center mb-3">
	<span class="inline-flex items-center px-3 py-1 bg-blue-100 text-primary rounded-full text-sm">
	<i class="fas fa-wrench mr-1"></i> Utilities
	</span>
	<span class="ml-2 inline-flex items-center px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">
	<i class="fas fa-building mr-1"></i> Building
	</span>
	</div>
	<h3 class="text-xl font-bold mb-2">Adab Boutique Resort</h3>
	<p class="text-gray-600 mb-4">Sustainable-focused boutique hotel development.</p>
	<p class="mb-4 font-medium">Services Delivered:</p>
	<ul class="space-y-2 mb-6">
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>MEP technical advisory</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Value Engineering</span>
	</li>
	<li class="flex items-start">
	<span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span>
	<span>Construction support </span>
	</li>
	</ul>
	<!-- Fixed Bottom -->
	<div class="absolute bottom-0 left-0 w-full px-4 py-2 bg-white">
	<div class="border-t border-gray-300"></div>
	<div class="flex justify-between text-xs text-gray-500 px-4 py-3">
	<div>
	<p class="text-xs text-gray-500">Year</p>
	<p class="font-bold text-black text-base">2024-2025</p>
	</div>
	<div>
	<p class="text-xs text-gray-500">Location</p>
	<p class="font-bold text-black text-base">Bali, Indonesia</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Add 7 more project cards here (total 10) -->
	</div>
	</div>

	<!-- Navigation arrows -->
	<button class="carousel-prev absolute left-0 top-1/2 -translate-y-1/2 bg-white rounded-full p-3 shadow-lg hover:bg-gray-100 transition z-10">
	<i class="fas fa-chevron-left text-primary"></i>
	</button>
	<button class="carousel-next absolute right-0 top-1/2 -translate-y-1/2 bg-white rounded-full p-3 shadow-lg hover:bg-gray-100 transition z-10">
	<i class="fas fa-chevron-right text-primary"></i>
	</button>
	</div>

	</div>
	</section>

	<!-- Team & Partners -->
	<section id="team" class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl md:text-4xl font-bold text-dark">Our Team & Partners</h2>
	<div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
	</div>

	<!-- Team Members -->
	<div class="mb-20">
	<h3 class="text-2xl font-bold mb-10 text-center text-primary">Leadership Team</h3>
	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
	<!-- Team Member 1 -->
	<div class="bg-gray-50 rounded-xl p-6 text-center w-full max-w-xs">
	<div class="w-32 h-32 mx-auto rounded-full bg-gray-500 mb-4"></div>
	<h4 class="text-xl font-bold">Julien Duchaine</h4>
	<p class="text-secondary mb-2">Engineering Director</p>
	<p class="text-gray-600 text-sm">15+ years in MEP and Renewable energy industry, with experience spanning from design, engineering, project mananagement and business leadership in Indonesia, South East Asia and Europe</p>
	<a href="https://linkedin.com" target="_blank" class="inline-block mt-2 text-gray-500 hover:text-primary transition">
	<i class="fab fa-linkedin-in text-xl"></i>
	</a>
	</div>

	<!-- Team Member 2 -->
	<div class="bg-gray-50 rounded-xl p-6 text-center">
	<div class="w-32 h-32 mx-auto rounded-full bg-gray-500 mb-4"></div>
	<h4 class="text-xl font-bold">Matthias Wenisch</h4>
	<p class="text-secondary mb-2">Construction Director</p>
	<p class="text-gray-600 text-sm">MEP systems specialist with 25+ years of construction experience in Indonesia and Germany</p>
	<a href="https://linkedin.com" target="_blank" class="inline-block mt-2 text-gray-500 hover:text-primary transition">
	<i class="fab fa-linkedin-in text-xl"></i>
	</a>
	</div>

	<!-- Team Member 3 -->
	<div class="bg-gray-50 rounded-xl p-6 text-center">
	<div class="w-32 h-32 mx-auto rounded-full bg-gray-500 mb-4"></div>
	<h4 class="text-xl font-bold">Dinda Ayuning Rahayu</h4>
	<p class="text-secondary mb-2">Financial Director</p>
	<p class="text-gray-600 text-sm">Mutli sector experience in Accounting and Finance control</p>
	<a href="https://linkedin.com" target="_blank" class="inline-block mt-2 text-gray-500 hover:text-primary transition">
	<i class="fab fa-linkedin-in text-xl"></i>
	</a>
	</div>

	<!-- Team Member 4 -->
	<div class="bg-gray-50 rounded-xl p-6 text-center">
	<div class="w-32 h-32 mx-auto rounded-full bg-gray-500 mb-4"></div>
	<h4 class="text-xl font-bold">Idris</h4>
	<p class="text-secondary mb-2">Project Manager</p>
	<p class="text-gray-600 text-sm">Project delivery and quality assurance leader</p>
	<a href="https://linkedin.com" target="_blank" class="inline-block mt-2 text-gray-500 hover:text-primary transition">
	<i class="fab fa-linkedin-in text-xl"></i>
	</a>
	</div>

	<!-- Team Member 5 -->
	<div class="bg-gray-50 rounded-xl p-6 text-center">
	<div class="w-32 h-32 mx-auto rounded-full bg-gray-500 mb-4"></div>
	<h4 class="text-xl font-bold">Nanang</h4>
	<p class="text-secondary mb-2">MEP Engineer</p>
	<p class="text-gray-600 text-sm">Experienced in MEP Design and construction</p>
	<a href="https://linkedin.com" target="_blank" class="inline-block mt-2 text-gray-500 hover:text-primary transition">
	<i class="fab fa-linkedin-in text-xl"></i>
	</a>
	</div>

	</div>
	</div>

	<!-- Partners -->
	<div id="strategic-partners">
	<h3 class="text-2xl font-bold mb-6 text-center text-primary">Strategic Partners</h3>
	<p class="text-center max-w-3xl mx-auto mb-10 text-gray-600">
	We collaborate with industry-leading experts and providers to deliver cutting-edge solutions for our clients.
	</p>
	<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 justify-items-center">
	<!-- Partner Category 1 -->
	<div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]">
	<h4 class="text-lg font-bold mb-2">Civil & Structural</h4>
	<p class="text-gray-600 text-sm">Leading civil & structural engineers</p>
	<div class="mt-6 mb-4">
	<div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4">
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	</div>
	</div>
	</div>

	<!-- Partner Category 2 -->
	<div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]">
	<h4 class="text-lg font-bold mb-2">Sustainability Engineering</h4>
	<p class="text-gray-600 text-sm">Experts in the fields of sustainability and green building</p>
	<div class="mt-6 mb-4">
	<div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4">
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	</div>
	</div>
	</div>

	<!-- Partner Category 3 -->
	<div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]">
	<h4 class="text-lg font-bold mb-2">Automation & Processes</h4>
	<p class="text-gray-600 text-sm">Specialists in building and industrial automation</p>
	<div class="mt-6 mb-4">
	<div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4">
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	</div>
	</div>
	</div>

	<!-- Partner Category 4 -->
	<div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]">
	<h4 class="text-lg font-bold mb-2">Construction</h4>
	<p class="text-gray-600 text-sm">Collaborating with construction management companies and leading equipment suppliers</p>
	<div class="mt-6 mb-4">
	<div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4">
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	<div class="w-10 h-10 rounded-full bg-gray-500"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact CTA -->
	<section id="contact" class="py-20 hero-background text-white">
	<div class="container mx-auto px-4">
	<div class="grid md:grid-cols-2 gap-12 items-center">
	<div>
	<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Project?</h2>
	<p class="mb-8 text-lg">
	Connect with our engineering and project management team to discuss your building, utilities, or renewable energy project requirements.
	</p>

	<div class="space-y-6">
	<div class="flex items-start">
	<div class="mt-1 text-secondary mr-4 text-xl"><i class="fas fa-map-marker-alt"></i></div>
	<div>
	<h4 class="font-bold">Office</h4>
	<p>PT Lintas Solusi Konsultan<br>Jl. Sunset Road No.28<br>Seminyak, Badung, Bali 80361</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="mt-1 text-secondary mr-4 text-xl"><i class="fas fa-phone-alt"></i></div>
	<div>
	<h4 class="font-bold">Contact</h4>
	<p>hello@arkansolutions.com</p>
	</div>
	</div>

	</div>
	</div>

	<div class="bg-white text-dark rounded-xl p-8 shadow-xl">
	<h3 class="text-2xl font-bold mb-6 text-primary">Send Inquiry</h3>

	<form>
	<div class="mb-5">
	<label class="block mb-2 font-medium">Name</label>
	<input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="Your Name">
	</div>

	<div class="mb-5">
	<label class="block mb-2 font-medium">Email</label>
	<input type="email" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="your@email.com">
	</div>

	<div class="mb-5">
	<label class="block mb-2 font-medium">Project Interest</label>
	<select class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary">
	<option>Building MEP Services</option>
	<option>Utilities Infrastructure</option>
	<option>Renewable Energy Systems</option>
	<option>Integrated Solutions</option>
	<option>Other</option>
	</select>
	</div>

	<div class="mb-5">
	<label class="block mb-2 font-medium">Message</label>
	<textarea rows="4" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="Tell us about your project"></textarea>
	</div>

	<button class="w-full py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition">
	Send Message <i class="ml-2 fas fa-paper-plane"></i>
	</button>
	</form>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-dark text-white py-12">
	<div class="container mx-auto px-4">
	<div class="grid md:grid-cols-2 gap-8">
	<div>
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
	<svg viewBox="0 0 24 24" class="w-5 h-5 text-white">
	<path fill="currentColor" d="M12 3L2 12h3v8h14v-8h3L12 3zm0 5.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/>
	</svg>
	</div>
	<h2 class="text-xl font-bold">ARKAN <span class="text-secondary">Solutions</span></h2>
	</div>
	<p class="text-gray-400 mb-6">
	ARKAN Solutions delivers integrated engineering excellence for mechanical, electrical, plumbing systems, site utilities, and renewable energy solutions.
	</p>
	</div>

	</div>

	<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
	<p>© 2023 ARKAN Solutions. All rights reserved. Terms & Conditions \| Privacy Policy</p>
	</div>
	</div>
	</footer>

	<!-- JavaScript -->
	<script>
	// Rotating taglines
	const taglines = [
	"Integrated MEP, Utilities & Renewable Energy Solutions",
	"Turning Complex Projects Into Efficient Systems",
	"Renewable Energy Experts",
	"Expert MEP consulting",
	"Efficient and Sustainable MEP systems.",
	"Energy-Efficient Innovations",
	"Full MEP System Design Integration",
	"Simplifying Complexity in MEP and Energy"
	];

	let currentTaglineIndex = 0;
	const taglineElement = document.getElementById('tagline-container');
	const projectCards = document.querySelectorAll('.project-card');

	// Initialize animation for taglines
	function rotateTaglines() {
	taglineElement.style.opacity = '0';

	setTimeout(() => {
	currentTaglineIndex = (currentTaglineIndex + 1) % taglines.length;
	taglineElement.innerHTML = `<h2 class="tagline-slide text-4xl md:text-6xl font-bold">${taglines[currentTaglineIndex]}</h2>`;
	taglineElement.style.opacity = '1';
	}, 500); // Half of the transition time

	setTimeout(rotateTaglines, 5000);
	}

	// Service tabs interaction
	document.querySelectorAll('.service-tab').forEach((tab, index) => {
	tab.addEventListener('click', function() {
	document.querySelectorAll('.service-tab').forEach(t =>
	t.classList.remove('active')
	);
	this.classList.add('active');

	// Show corresponding content
	document.querySelectorAll('.service-tab-content').forEach(content =>
	content.classList.remove('active')
	);
	document.querySelectorAll('.service-tab-content')[index].classList.add('active');
	});
	});

	// Filter projects
	document.querySelectorAll('.project-filter').forEach(filter => {
	filter.addEventListener('click', function() {
	document.querySelectorAll('.project-filter').forEach(f =>
	f.classList.remove('active')
	);
	this.classList.add('active');

	// Results filtering logic would go here
	});
	});

	// Carousel functionality
	function setupCarousel() {
	const track = document.querySelector('.carousel-track');
	const prevBtn = document.querySelector('.carousel-prev');
	const nextBtn = document.querySelector('.carousel-next');
	const projects = document.querySelectorAll('.project-card');
	const projectWidth = projects[0].offsetWidth;
	const totalProjects = projects.length;
	let currentIndex = 0;
	let autoSlideInterval;
	let isTransitioning = false;

	// Clone first few projects for infinite loop
	const firstFewProjects = Array.from(projects).slice(0, 3);
	firstFewProjects.forEach(project => {
	const clone = project.cloneNode(true);
	track.appendChild(clone);
	});

	function updateCarousel() {
	if (currentIndex >= totalProjects) {
	// When we reach the clones, instantly reset to original position
	track.style.transition = 'none';
	currentIndex = 0;
	track.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
	// Force reflow
	track.offsetHeight;
	track.style.transition = 'transform 0.5s ease-in-out';
	} else if (currentIndex < 0) {
	// When going backwards past first item
	track.style.transition = 'none';
	currentIndex = totalProjects - 1;
	track.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
	// Force reflow
	track.offsetHeight;
	track.style.transition = 'transform 0.5s ease-in-out';
	}

	track.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
	}

	function nextSlide() {
	if (isTransitioning) return;
	isTransitioning = true;
	currentIndex++;
	updateCarousel();

	setTimeout(() => {
	isTransitioning = false;
	}, 250);
	}

	function prevSlide() {
	if (isTransitioning) return;
	isTransitioning = true;
	currentIndex--;
	updateCarousel();

	setTimeout(() => {
	isTransitioning = false;
	}, 250);
	}

	function startAutoSlide() {
	autoSlideInterval = setInterval(nextSlide, 5000);
	}

	function stopAutoSlide() {
	clearInterval(autoSlideInterval);
	}

	// Event listeners
	nextBtn.addEventListener('click', () => {
	stopAutoSlide();
	nextSlide();
	startAutoSlide();
	});

	prevBtn.addEventListener('click', () => {
	stopAutoSlide();
	prevSlide();
	startAutoSlide();
	});

	// Handle window resize
	window.addEventListener('resize', () => {
	projectWidth = projects[0].offsetWidth;
	updateCarousel();
	});

	// Start auto sliding
	startAutoSlide();

	// Pause on hover
	const container = document.querySelector('.carousel-container');
	container.addEventListener('mouseenter', stopAutoSlide);
	container.addEventListener('mouseleave', startAutoSlide);

	// Reset position when transition ends (for infinite loop)
	track.addEventListener('transitionend', () => {
	if (currentIndex >= totalProjects \|\| currentIndex < 0) {
	updateCarousel();
	}
	});
	}

	// Make project cards slide in when visible
	function animateProjectCards() {
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	setTimeout(() => {
	entry.target.classList.add('visible');
	}, 100 * parseInt(entry.target.dataset.index));
	}
	});
	}, { threshold: 0.1 });

	projectCards.forEach((card, index) => {
	card.dataset.index = index;
	observer.observe(card);
	});
	}

	// Smooth scrolling for navigation
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();

	const target = document.querySelector(this.getAttribute('href'));
	if (!target) return;

	window.scrollTo({
	top: target.offsetTop - 100,
	behavior: 'smooth'
	});
	});
	});

	// Background image slideshow
	function cycleBackground() {
	const hero = document.querySelector('.hero-background');
	if (hero.classList.contains('alternate-bg')) {
	hero.classList.remove('alternate-bg');
	hero.classList.add('third-bg');
	} else if (hero.classList.contains('third-bg')) {
	hero.classList.remove('third-bg');
	} else {
	hero.classList.add('alternate-bg');
	}
	}

	// Mobile menu toggle with smooth animation
	const mobileMenuButton = document.querySelector('.mobile-menu-button');
	const mobileMenu = document.querySelector('.mobile-menu');
	const body = document.body;

	mobileMenuButton.addEventListener('click', function() {
	const isOpening = mobileMenu.classList.contains('hidden');

	if (isOpening) {
	// Open menu
	mobileMenu.classList.remove('hidden');
	body.style.overflow = 'hidden';
	setTimeout(() => {
	mobileMenu.style.opacity = '1';
	mobileMenu.style.transform = 'translateY(0)';
	}, 10);

	// Change icon to close
	const icon = this.querySelector('i');
	icon.classList.remove('fa-bars');
	icon.classList.add('fa-times');
	} else {
	// Close menu
	mobileMenu.style.opacity = '0';
	mobileMenu.style.transform = 'translateY(-20px)';
	body.style.overflow = '';

	setTimeout(() => {
	mobileMenu.classList.add('hidden');
	}, 300);

	// Change icon to bars
	const icon = this.querySelector('i');
	icon.classList.remove('fa-times');
	icon.classList.add('fa-bars');
	}
	});

	// Mobile menu dropdown functionality
	document.querySelectorAll('.mobile-menu-dropdown').forEach(button => {
	button.addEventListener('click', function() {
	const submenu = this.nextElementSibling;
	const icon = this.querySelector('.fa-chevron-down');

	// Toggle submenu
	submenu.classList.toggle('hidden');

	// Rotate chevron icon
	icon.classList.toggle('rotate-180');

	// Close other open submenus
	document.querySelectorAll('.mobile-submenu').forEach(menu => {
	if (menu !== submenu && !menu.classList.contains('hidden')) {
	menu.classList.add('hidden');
	menu.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
	}
	});
	});
	});

	// Close menu when clicking on a link
	document.querySelectorAll('.mobile-menu a').forEach(link => {
	link.addEventListener('click', () => {
	mobileMenu.classList.add('hidden');
	mobileMenuButton.querySelector('i').classList.remove('fa-times');
	mobileMenuButton.querySelector('i').classList.add('fa-bars');

	// Close all submenus
	document.querySelectorAll('.mobile-submenu').forEach(menu => {
	menu.classList.add('hidden');
	menu.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
	});
	});
	});

	// Slideshow functionality
	function setupSlideshow() {
	const slideshow = document.querySelector('.slideshow-container');
	const slides = document.querySelectorAll('.slide');
	const prevBtn = document.querySelector('.slideshow-prev');
	const nextBtn = document.querySelector('.slideshow-next');
	const dots = document.querySelectorAll('.slideshow-dot');
	let currentIndex = 0;
	let autoSlideInterval;

	function showSlide(index) {
	// Hide all slides
	slides.forEach(slide => {
	slide.style.display = 'none';
	});

	// Show current slide
	slides[index].style.display = 'flex';

	// Update active dot
	dots.forEach((dot, i) => {
	dot.classList.toggle('bg-primary', i === index);
	dot.classList.toggle('bg-gray-300', i !== index);
	});
	}

	function nextSlide() {
	currentIndex = (currentIndex + 1) % slides.length;
	showSlide(currentIndex);
	}

	function prevSlide() {
	currentIndex = (currentIndex - 1 + slides.length) % slides.length;
	showSlide(currentIndex);
	}

	function goToSlide(index) {
	currentIndex = index;
	showSlide(currentIndex);
	}

	function startAutoSlide() {
	autoSlideInterval = setInterval(nextSlide, 5000);
	}

	function stopAutoSlide() {
	clearInterval(autoSlideInterval);
	}

	// Event listeners
	nextBtn.addEventListener('click', () => {
	stopAutoSlide();
	nextSlide();
	startAutoSlide();
	});

	prevBtn.addEventListener('click', () => {
	stopAutoSlide();
	prevSlide();
	startAutoSlide();
	});

	dots.forEach((dot, index) => {
	dot.addEventListener('click', () => {
	stopAutoSlide();
	goToSlide(index);
	startAutoSlide();
	});
	});

	// Pause on hover
	slideshow.addEventListener('mouseenter', stopAutoSlide);
	slideshow.addEventListener('mouseleave', startAutoSlide);

	// Initialize
	showSlide(0);
	startAutoSlide();
	}

	// Initiate animations when page loads
	document.addEventListener('DOMContentLoaded', function() {
	setupSlideshow();
	setTimeout(rotateTaglines, 3000);
	animateProjectCards();
	setupCarousel();
	setInterval(cycleBackground, 7000); // Cycle every 7 seconds
	});
	</script>
	</html>