Make the UI/UX modern and better. Enhance the whole codes significantly without holding back. Don't use any frameworks. Leverage the UI/UX to a significant Highest level. Always take the creativ, innovative and out of the box approach. Only implement the best practices. Send the fully working full improved code. -- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Discover AbhiModels AI Suite - Cutting-edge AI solutions for image generation, voice synthesis, chat, video creation, and more. Transform your business with our innovative AI technologies.">
    <title>AbhiModels AI Suite | Innovative AI Solutions for Business</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a47a3;
            --secondary-color: #ffffff;
            --text-color: #333333;
            --background-color: #f0f0f5;
            --card-background: #ffffff;
            --card-shadow: 0 10px 20px rgba(0,0,0,0.1);
            --transition-speed: 0.3s;
            --gradient-start: #4a47a3;
            --gradient-end: #6d69c9;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #6d69c9;
                --secondary-color: #1a1a2e;
                --text-color: #e0e0e0;
                --background-color: #0f0f1a;
                --card-background: #1e1e2f;
                --card-shadow: 0 10px 20px rgba(0,0,0,0.3);
                --gradient-start: #4a47a3;
                --gradient-end: #6d69c9;
            }
        }

        .dark-theme {
            --primary-color: #6d69c9;
            --secondary-color: #1a1a2e;
            --text-color: #e0e0e0;
            --background-color: #0f0f1a;
            --card-background: #1e1e2f;
            --card-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none; /* Make text non-selectable */
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            transition: background-color var(--transition-speed) ease;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        header {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            transition: background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary-color);
            text-decoration: none;
            letter-spacing: 1px;
            transition: transform var(--transition-speed) ease;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--secondary-color);
            font-weight: 500;
            position: relative;
            padding: 0.5rem 0;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 50%;
            background-color: var(--secondary-color);
            transition: width var(--transition-speed) ease, left var(--transition-speed) ease;
        }

        .nav-links a:hover::after {
            width: 100%;
            left: 0;
        }

        .nav-links a:hover, .nav-links a:focus {
            color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--secondary-color);
            cursor: pointer;
            transition: color var(--transition-speed) ease;
        }

        .mobile-menu-btn:hover, .mobile-menu-btn:focus {
            color: var(--secondary-color);
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1001;
            transform: translateX(-100%);
            transition: transform var(--transition-speed) ease;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }

        .mobile-menu a {
            color: var(--secondary-color);
            font-size: 1.5rem;
            margin: 1rem 0;
            text-decoration: none;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .mobile-menu a:hover, .mobile-menu a:focus {
            color: var(--secondary-color);
            transform: scale(1.1);
        }

        main {
            margin-top: 80px;
            padding: 3rem 0;
        }

        h1 {
            text-align: center;
            margin: 2rem 0;
            font-size: 3.5rem;
            color: var(--primary-color);
            font-weight: 700;
            letter-spacing: 1px;
            animation: fadeInUp 1s ease-out;
        }

        .description {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 3rem;
            font-size: 1.2rem;
            color: var(--text-color);
            animation: fadeInUp 1s ease-out 0.2s both;
            line-height: 1.8;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            animation: fadeInUp 1s ease-out 0.4s both;
        }

        .api-card {
            background-color: var(--card-background);
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            padding: 2rem;
            text-align: center;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .api-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
        }

        .api-card:hover, .api-card:focus-within {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .api-card:hover::before, .api-card:focus-within::before {
            opacity: 0.1;
        }

        .api-card h2 {
            font-size: 1.6rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

        .api-card p {
            font-size: 1rem;
            color: var(--text-color);
            position: relative;
            z-index: 1;
        }

        .api-card-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
            transition: transform var(--transition-speed) ease;
        }

        .api-card:hover .api-card-icon {
            transform: scale(1.1);
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            color: var(--secondary-color);
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.7s;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover, .cta-button:focus {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .features-section {
            margin-top: 4rem;
            text-align: center;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .feature-item {
            background-color: var(--card-background);
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            transition: transform var(--transition-speed) ease;
        }

        .feature-item:hover .feature-icon {
            transform: scale(1.1);
        }

        .scroll-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            color: var(--secondary-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
            opacity: 0;
            visibility: hidden;
        }

        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-to-top:hover {
            transform: translateY(-3px);
        }

        .testimonials {
            margin-top: 4rem;
            text-align: center;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .testimonial-item {
            background-color: var(--card-background);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            transition: transform var(--transition-speed) ease;
        }

        .testimonial-item:hover {
            transform: translateY(-5px);
        }

        .testimonial-content {
            font-style: italic;
            margin-bottom: 1rem;
        }

        .testimonial-author {
            font-weight: 600;
            color: var(--primary-color);
        }

        footer {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            color: var(--secondary-color);
            padding: 2rem 0;
            margin-top: 4rem;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .footer-section {
            flex: 1;
            margin: 1rem;
            min-width: 200px;
        }

        .footer-section h3 {
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

        .footer-section ul {
            list-style-type: none;
        }

        .footer-section ul li {
            margin-bottom: 0.5rem;
        }

        .footer-section ul li a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }

        .footer-section ul li a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-icons a {
            color: var(--secondary-color);
            font-size: 1.5rem;
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .social-icons a:hover {
            color: var(--secondary-color);
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }

            h1 {
                font-size: 2.5rem;
            }

            .description {
                font-size: 1rem;
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .footer-content {
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
        }

        .scroll-indicator {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
            z-index: 1002;
            width: 0%;
            transition: width 0.1s ease;
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            background-color: rgba(255, 255, 255, 0.7);
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--secondary-color);
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform var(--transition-speed) ease;
        }

        .theme-toggle:hover {
            transform: scale(1.1);
        }

        .menu-wrapper {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 1rem;
            display: none;
            z-index: 1000;
        }

        .menu-wrapper:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu a {
            display: block;
            padding: 0.5rem 1rem;
            color: var(--text-color);
            text-decoration: none;
            transition: background-color var(--transition-speed) ease;
        }

        .dropdown-menu a:hover {
            background-color: var(--background-color);
        }

        .hero-section {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
        }

        .hero-content {
            z-index: 1;
        }

        .hero-title {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

        .hero-description {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            color: var(--secondary-color);
        }

        .hero-cta {
            display: inline-block;
            padding: 1rem 2rem;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .hero-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            z-index: 0;
        }

        .hero-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .hero-shape {
            position: absolute;
            opacity: 0.1;
            animation: float 20s infinite;
        }

        .hero-shape:nth-child(1) {
            top: 20%;
            left: 10%;
            width: 80px;
            height: 80px;
            background-color: var(--secondary-color);
            border-radius: 50%;
        }

        .hero-shape:nth-child(2) {
            top: 60%;
            right: 10%;
            width: 120px;
            height: 120px;
            background-color: var(--secondary-color);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        .hero-shape:nth-child(3) {
            bottom: 10%;
            left: 20%;
            width: 100px;
            height: 100px;
            background-color: var(--secondary-color);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body>
    <div class="scroll-indicator"></div>
    <header>
        <nav class="container">
            <a href="#" class="logo">AbhiModels</a>
            <div class="nav-links">
                <a href="#home">Home</a>
                <div class="menu-wrapper">
                    <a href="#services">Services</a>
                    <div class="dropdown-menu">
                        <a href="#image-generation">Image Generation</a>
                        <a href="#voice-audio">Voice and Audio</a>
                        <a href="#chat-llm">Chat and LLM</a>
                        <a href="#video">Video Creation</a>
                    </div>
                </div>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
                <button class="theme-toggle" aria-label="Toggle dark mode">🌓</button>
            </div>
            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">☰</button>
        </nav>
    </header>

    <div class="mobile-menu" aria-hidden="true">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
        <button class="theme-toggle" aria-label="Toggle dark mode">🌓</button>
    </div>

    <main>
        <section class="hero-section">
            <div class="hero-background"></div>
            <div class="hero-shapes">
                <div class="hero-shape"></div>
                <div class="hero-shape"></div>
                <div class="hero-shape"></div>
            </div>
            <div class="hero-content">
                <h1 class="hero-title">Welcome to AbhiModels AI Suite</h1>
                <p class="hero-description">Revolutionize your business with cutting-edge AI solutions</p>
                <button class="hero-cta" id="exploreServices">Explore Our Services</button>
            </div>
        </section>

        <div class="container">
            <h2>Our AI Services</h2>
            <div class="description">
                Experience the future of AI with AbhiModels. Our comprehensive AI Suite is tailored to meet the specific needs of businesses, ensuring seamless integration and maximum impact. Innovate, create, and transform with AbhiModels.
            </div>
            <div class="grid">
                <div class="api-card" data-ai-page="image-generation" tabindex="0">
                    <div class="api-card-icon">🖼️</div>
                    <h2>AI Image Generation</h2>
                    <p>Transform ideas into stunning visuals instantly with our cutting-edge image generation API.</p>
                </div>
                <div class="api-card" data-ai-page="voice-audio" tabindex="0">
                    <div class="api-card-icon">🎙️</div>
                    <h2>AI Voice and Audio</h2>
                    <p>Create lifelike audio experiences with versatile voice synthesis and audio processing.</p>
                </div>
                <div class="api-card" data-ai-page="chat-llm" tabindex="0">
                    <div class="api-card-icon">💬</div>
                    <h2>AI Chat and LLM</h2>
                    <p>Engage in dynamic conversations powered by our advanced natural language models API.</p>
                </div>
                <div class="api-card" data-ai-page="image-editing" tabindex="0">
                    <div class="api-card-icon">✏️</div>
                    <h2>AI Image Editing</h2>
                    <p>Elevate your images with AI-driven editing tools for flawless enhancements and transformations.</p>
                </div>
                <div class="api-card" data-ai-page="video" tabindex="0">
                    <div class="api-card-icon">🎥</div>
                    <h2>AI Video</h2>
                    <p>Craft compelling video content effortlessly with our AI-powered video creation and editing API.</p>
                </div>
                <div class="api-card" data-ai-page="deepfake" tabindex="0">
                    <div class="api-card-icon">🎭</div>
                    <h2>Deepfake API</h2>
                    <p>Create engaging marketing materials and training videos with our unmatched deepfake precision.</p>
                </div>
                <div class="api-card" data-ai-page="3d" tabindex="0">
                    <div class="api-card-icon">🧊</div>
                    <h2>3D API</h2>
                    <p>Create engaging and compelling 3D objects from text prompts and image input with our 3D API.</p>
                </div>
                <div class="api-card" data-ai-page="interior" tabindex="0">
                    <div class="api-card-icon">🏠</div>
                    <h2>Interior API</h2>
                    <p>Design beautiful home interiors, room decorations, and floor plans with ease using AI.</p>
                </div>
            </div>
            <a href="#contact" class="cta-button">Get Started</a>
        </div>
    </main>

    <section class="features-section container">
        <h2>Why Choose AbhiModels?</h2>
        <div class="features-grid">
            <div class="feature-item">
                <div class="feature-icon">🚀</div>
                <h3>Cutting-edge Technology</h3>
                <p>Stay ahead with our state-of-the-art AI models and algorithms.</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🔒</div>
                <h3>Secure & Scalable</h3>
                <p>Enterprise-grade security with scalable infrastructure to meet your needs.</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🤝</div>
                <h3>Easy Integration</h3>
                <p>Seamlessly integrate our APIs into your existing workflows and applications.</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">💡</div>
                <h3>Innovative Solutions</h3>
                <p>Unlock new possibilities and drive innovation in your industry.</p>
            </div>
        </div>
    </section>

    <section class="testimonials container">
        <h2>What Our Clients Say</h2>
        <div class="testimonial-grid">
            <div class="testimonial-item">
                <p class="testimonial-content">"AbhiModels has revolutionized our content creation process. Their AI APIs are incredibly powerful and easy to use."</p>
                <p class="testimonial-author">- John Doe, CEO of TechCorp</p>
            </div>
            <div class="testimonial-item">
                <p class="testimonial-content">"The customer support team at AbhiModels is exceptional. They've been incredibly helpful in our integration process."</p>
                <p class="testimonial-author">- Jane Smith, CTO of InnovateTech</p>
            </div>
            <div class="testimonial-item">
                <p class="testimonial-content">"We've seen a significant boost in our productivity since implementing AbhiModels' AI solutions. Highly recommended!"</p>
                <p class="testimonial-author">- Mike Johnson, Head of AI at FutureCo</p>
            </div>
        </div>
    </section>

    <div class="scroll-to-top" aria-label="Scroll to top">↑</div>

    <footer>
        <div class="container footer-content">
            <div class="footer-section">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Services</h3>
                <ul>
                    <li><a href="#image-generation">Image Generation</a></li>
                    <li><a href="#voice-audio">Voice and Audio</a></li>
                    <li><a href="#chat-llm">Chat and LLM</a></li>
                    <li><a href="#video">Video Creation</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Contact Us</h3>
                <p>Email: info@abhimodels.com</p>
                <p>Phone: +1 (555) 123-4567</p>
                <div class="social-icons">
                    <a href="#" aria-label="Facebook">📘</a>
                    <a href="#" aria-label="Twitter">🐦</a>
                    <a href="#" aria-label="LinkedIn">💼</a>
                    <a href="#" aria-label="GitHub">🐱</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 AbhiModels. All rights reserved.</p>
        </div>
    </footer>

    <script>
        const header = document.querySelector('header');
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const mobileMenu = document.querySelector('.mobile-menu');
        const scrollIndicator = document.querySelector('.scroll-indicator');
        const scrollToTopBtn = document.querySelector('.scroll-to-top');
        const themeToggles = document.querySelectorAll('.theme-toggle');

        function toggleMobileMenu() {
            mobileMenu.classList.toggle('active');
            mobileMenu.setAttribute('aria-hidden', mobileMenu.classList.contains('active') ? 'false' : 'true');
            mobileMenuBtn.setAttribute('aria-expanded', mobileMenu.classList.contains('active') ? 'true' : 'false');
        }

        mobileMenuBtn.addEventListener('click', toggleMobileMenu);

        document.addEventListener('click', (e) => {
            if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                mobileMenu.classList.remove('active');
                mobileMenu.setAttribute('aria-hidden', 'true');
                mobileMenuBtn.setAttribute('aria-expanded', 'false');
            }
        });

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
                if (mobileMenu.classList.contains('active')) {
                    toggleMobileMenu();
                }
            });
        });

        document.querySelectorAll('.api-card').forEach(card => {
            card.addEventListener('click', () => {
                const aiPage = card.getAttribute('data-ai-page');
                window.location.href = `https://abhimodels.com/ai/${aiPage}`;
            });

            card.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    card.click();
                }
            });
        });

        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }

            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            scrollIndicator.style.width = scrolled + '%';

            if (winScroll > 300) {
                scrollToTopBtn.classList.add('visible');
            } else {
                scrollToTopBtn.classList.remove('visible');
            }
        });

        scrollToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.api-card, .feature-item, .testimonial-item').forEach(item => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            observer.observe(item);
        });

        function createRipple(event) {
            const button = event.currentTarget;
            const circle = document.createElement('span');
            const diameter = Math.max(button.clientWidth, button.clientHeight);
            const radius = diameter / 2;

            circle.style.width = circle.style.height = `${diameter}px`;
            circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
            circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
            circle.classList.add('ripple');

            const ripple = button.getElementsByClassName('ripple')[0];

            if (ripple) {
                ripple.remove();
            }

            button.appendChild(circle);
        }

        const buttons = document.querySelectorAll('button, .api-card, .cta-button');
        buttons.forEach(button => {
            button.addEventListener('click', createRipple);
        });

        // Theme toggle functionality
        function toggleTheme() {
            document.body.classList.toggle('dark-theme');
            localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light');
        }

        themeToggles.forEach(toggle => {
            toggle.addEventListener('click', toggleTheme);
        });

        // Check for saved theme preference or respect OS preference
        const savedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
            document.body.classList.add('dark-theme');
        }

        // Lazy loading images
        if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll('img[loading="lazy"]');
            images.forEach(img => {
                img.src = img.dataset.src;
            });
        } else {
            // Fallback for browsers that don't support lazy loading
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js';
            document.body.appendChild(script);
        }

        // Preload critical resources
        const preloadLink = document.createElement('link');
        preloadLink.rel = 'preload';
        preloadLink.as = 'style';
        preloadLink.href = 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';
        document.head.appendChild(preloadLink);

        // Add custom error handling
        window.addEventListener('error', function (e) {
            console.error('An error occurred:', e.error);
            // You could send this error to your server for logging
        });

        // Implement a simple performance metric
        window.addEventListener('load', function() {
            setTimeout(function() {
                const timing = window.performance.timing;
                const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
                console.log('Page load time:', pageLoadTime);
                // You could send this metric to your analytics service
            }, 0);
        });

        // Scroll to the first card when "Explore Our Services" is clicked
        document.getElementById('exploreServices').addEventListener('click', () => {
            const firstCard = document.querySelector('.api-card');
            if (firstCard) {
                firstCard.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>
</body>
</html>