qinyu_0325
/
lmdWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Explore Our Creative Projects | ITAgency</title>
    <meta name="description" content="Discover the diverse portfolio of creative and innovative projects developed by ITAgency. From web development to mobile apps and UI/UX design, explore how we bring ideas to life.">
    

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/images/ico-01.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/universal-slider.css">
    <link rel="stylesheet" href="assets/css/faq-accordion.css">
    
    <!-- General CSS files -->
    <link rel="stylesheet" href="assets/css/globals.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="body-1">    
    <!-- Tech Page Loader -->
    <div id="page-loader" class="page-loader">
        <div class="loader-container">
            <div class="loader-content">
                <!-- Advanced Tech Spinner Only -->
                <div class="loader-spinner">
                    <div class="spinner-ring">
                        <div></div>
                    </div>
                </div>
                
                <!-- Advanced Progress Bar -->
                <div class="loader-progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Header -->
    <header class="header">
        <div class="container d-flex-between">
            <!-- Logo -->
            <div class="logo position-relative">
                <img class="image" src="assets/images/logo-transparent-01.png" alt="Logo">
                <a class="overlay-link" href="index.html"></a>
            </div>

            <!-- Navigation -->
            <nav class="navbar" id="navbar">
                <ul class="nav-menu">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="home-dropdown">Home</a>
                        <ul class="dropdown-menu" id="home-dropdown">
                            <li><a href="index.html" class="dropdown-item">Home 1</a></li>
                            <li><a href="heroedge.html" class="dropdown-item">Hero Edge</a></li>
                            <li><a href="home-page-2.html" class="dropdown-item">Home 2</a></li>
                            <li><a href="home-page-3.html" class="dropdown-item">Home 3</a></li>
                            <li><a href="home-page-4.html" class="dropdown-item">Home 4</a></li>
                        </ul>
                    </li>
                    <li><a href="about-us.html" class="nav-link">About Us</a></li>
                    <li><a href="services.html" class="nav-link">Services</a></li>
                    <li><a href="portfolio.html" class="nav-link active">Portfolio</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="blog-dropdown">Blog</a>
                        <ul class="dropdown-menu" id="blog-dropdown">
                            <li><a href="blog-column-1.html" class="dropdown-item">Blog Column 1</a></li>
                            <li><a href="blog-column-2.html" class="dropdown-item">Blog Column 2</a></li>
                            <li><a href="blog-column-3.html" class="dropdown-item">Blog Column 3</a></li>
                            <li><a href="article.html" class="dropdown-item">Blog Detail Page</a></li>
                        </ul>
                    </li> 
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="pages-dropdown">Pages</a>
                        <ul class="dropdown-menu" id="pages-dropdown">
                            <li><a href="process.html" class="dropdown-item">Process</a></li>
                            <li><a href="pricing.html" class="dropdown-item">Pricing</a></li>
                            <li><a href="team.html" class="dropdown-item">Team</a></li>
                            <li><a href="team-member.html" class="dropdown-item">Team Member</a></li>
                            <li><a href="faqs.html" class="dropdown-item">FAQs</a></li>
                            <li><a href="terms-conditions.html" class="dropdown-item">Terms & Conditions</a></li>
                            <li><a href="privacy-policy.html" class="dropdown-item">Privacy Policy</a></li>
                            <li><a href="service-cards-grid.html" class="dropdown-item">Service Cards Grid</a></li>
                            <li><a href="buttons.html" class="dropdown-item">Buttons</a></li>
                            <li><a href="typography.html" class="dropdown-item">Fonts</a></li>
                        </ul>
                    </li>
                    <li><a href="contact-us.html" class="nav-link">Contact Us</a></li>
                </ul>
            </nav>

            <!-- Get Quotes Button -->
            <div class="actions d-flex-center">
                <a pages/contact-us.html class="btn btn-get-quotes">Get Quotes</a>
                <div class="theme-switcher">
                    <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
                        <svg id="theme-toggle-light-icon" class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.894 17.894a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/></svg>
                        <svg id="theme-toggle-dark-icon" class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.69a.75.75 0 01.981.981A10.501 10.501 0 0118 19.5a10.5 10.5 0 01-10.5-10.5 10.5 10.5 0 011.718-5.528.75.75 0 01.81-.162z" clip-rule="evenodd" /></svg>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu Toggle -->
            <button class="mobile-menu-toggle" id="mobile-menu-toggle">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
    </header>

    <!-- Page Header Section -->
    <section class="page-header">
        <div class="page-header-bg">
            <!-- Animated particles/dots background -->
            <div class="particles-container">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>
            
            <!-- Geometric patterns overlay -->
            <div class="geometric-overlay">
                <div class="geometric-shape shape-1"></div>
                <div class="geometric-shape shape-2"></div>
                <div class="geometric-shape shape-3"></div>
                <div class="geometric-shape shape-4"></div>
            </div>
            
            <!-- Digital grid pattern -->
            <div class="digital-grid"></div>
        </div>
        
        <div class="page-header-content">
            <div>
                <div class="breadcrumb"
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <a href="index.html" class="breadcrumb-link">Home</a>
                    <span class="breadcrumb-separator">
                        <svg viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </span>
                    <span class="breadcrumb-current">Our Portfolio</span>
                </div>
                
                <h1 class="page-title"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="100">Our Portfolio</h1>
                
                <p class="page-description"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique doloremque molestiae quae.</p>
            </div>
        </div>
        
        <!-- Floating elements -->
        <div class="floating-elements">
            <div class="floating-circle floating-circle-1"></div>
            <div class="floating-circle floating-circle-2"></div>
            <div class="floating-circle floating-circle-3"></div>
        </div>
    </section>

    <!-- Main 1 -->
    <div class="main d-flex-center pt-8 pb-8">
        <!-- Main Content -->
        <div class="container main-content">
            <!-- Portfolio section -->
            <section class="portfolio">
                <div class="portfolio-isotope" 
                    data-aos="fade-up" 
                    data-aos-delay="100">
                    
                    <div class="portfolio-filters-container d-flex-center pb-5">
                        <ul class="portfolio-filters">
                            <li class="filter-btn active" data-filter="*">All Projects</li>
                            <li class="filter-btn" data-filter=".filter-web">Web Development</li>
                            <li class="filter-btn" data-filter=".filter-mobile">Mobile Apps</li>
                            <li class="filter-btn" data-filter=".filter-design">UI/UX Design</li>
                            <li class="filter-btn" data-filter=".filter-branding">Branding</li>
                        </ul>
                    </div>

                    <div class="portfolio-grid">
                        <div class="portfolio-item filter-web" 
                            data-aos="zoom-in" 
                            data-aos-delay="0">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-1.png" alt="E-commerce Platform">
                                    <a href="assets/images/portfolio/project-1.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h3>E-commerce Platform</h3>
                                    <span class="portfolio-category">Web Development</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>

                        <div class="portfolio-item filter-mobile" 
                            data-aos="zoom-in" 
                            data-aos-delay="50">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-2.png" alt="Fitness Tracking App">
                                    <a href="assets/images/portfolio/project-2.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h4>Fitness Tracking App</h4>
                                    <span class="portfolio-category">Mobile Apps</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>

                        <div class="portfolio-item filter-design" 
                            data-aos="zoom-in" 
                            data-aos-delay="100">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-3.png" alt="Banking Dashboard">
                                    <a href="assets/images/portfolio/project-3.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h4>Banking Dashboard</h4>
                                    <span class="portfolio-category">UI/UX Design</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>

                        <div class="portfolio-item filter-branding" 
                            data-aos="zoom-in" 
                            data-aos-delay="150">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-4.png" alt="Tech Startup Branding">
                                    <a href="assets/images/portfolio/project-4.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h4>Tech Startup Brand</h4>
                                    <span class="portfolio-category">Branding</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>

                        <div class="portfolio-item filter-web" 
                            data-aos="zoom-in" 
                            data-aos-delay="200">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-5.png" alt="Restaurant Website">
                                    <a href="assets/images/portfolio/project-5.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h4>Restaurant Website</h4>
                                    <span class="portfolio-category">Web Development</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>

                        <div class="portfolio-item filter-mobile" 
                            data-aos="zoom-in" 
                            data-aos-delay="250">
                            <div class="portfolio-card">
                                <div class="portfolio-image">
                                    <img class="image" src="assets/images/portfolio/project-6.png" alt="Travel Planning App">
                                    <a href="assets/images/portfolio/project-6.png" class="portfolio-lightbox"></a>
                                </div>
                                <div class="portfolio-info">
                                    <h4>Travel Planning App</h4>
                                    <span class="portfolio-category">Mobile Apps</span>
                                </div>
                            </div>
                            <a class="overlay-link" href="javascript:void(0)"></a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Contact info section -->
    <section class="contact-info container">
        <div class="contact-content">
            <div class="contact-header text-center" 
                data-aos="fade-up" 
                data-aos-duration="600">
                <h2 class="contact-title">Let’s Build the Future Together</h2>
                <p class="contact-description">
                    Your vision deserves to become reality. Connect with our innovative team and let’s create extraordinary digital experiences that push the boundaries of technology.
                </p>
            </div>
            
            <div class="contact-actions  d-flex-center" 
                data-aos="fade-up" 
                data-aos-delay="200">
                <a pages/contact-us.html class="btn btn-get-quotes">
                    Get Started Today
                </a>
            </div>
        </div>
    </section>

    <!-- Main 2 -->
    <div class="main d-flex-center pt-5 pb-8">
        <!-- Main Content -->
        <div class="container main-content">
            <!-- Faq section -->
            <section class="faq-section" 
            data-faq
            data-color="var(--color-primary)"
            data-bg="var(--color-surface)"
            data-title-color="var(--color-primary)"
            data-text-color="var(--color-text-primary)"
            data-border="1px solid var(--color-primary)"
            data-multiple="false">
                <div class="container">
                    <div class="faq-header text-center mb-6" 
                        data-aos="fade-up" 
                        data-aos-duration="600">
                        <h2>Frequently Asked Questions</h2>
                        <p>Find answers to the most common questions about our services</p>
                    </div>

                    <div class="faq-content">
                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="100">
                            <div class="faq-question">
                                <h3 class="question-text">What services do you offer?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>We offer a comprehensive range of IT services including web development, mobile app development, cloud solutions, cybersecurity, and digital transformation consulting. Our team specializes in creating custom solutions tailored to your business needs.</p>
                                </div>
                            </div>
                        </div>

                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="200">
                            <div class="faq-question">
                                <h3 class="question-text">How long does a typical project take?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>Project timelines vary depending on complexity and scope. A simple website might take 2-4 weeks, while complex enterprise applications can take 3-6 months. We provide detailed timelines during our initial consultation and keep you updated throughout the development process.</p>
                                </div>
                            </div>
                        </div>

                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="300">
                            <div class="faq-question">
                                <h3 class="question-text">Do you provide ongoing support and maintenance?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>Yes, we offer comprehensive maintenance and support packages. This includes regular updates, security patches, performance monitoring, and technical support. We believe in building long-term relationships with our clients.</p>
                                </div>
                            </div>
                        </div>

                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="400">
                            <div class="faq-question">
                                <h3 class="question-text">What is your pricing model?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>Our pricing is project-based and depends on the scope, complexity, and timeline. We offer transparent pricing with no hidden fees. After understanding your requirements, we provide a detailed quote with breakdown of costs for each phase of the project.</p>
                                </div>
                            </div>
                        </div>

                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="500">
                            <div class="faq-question">
                                <h3 class="question-text">Can you work with our existing team?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>Absolutely! We frequently collaborate with in-house teams and can integrate seamlessly with your existing workflows. We're flexible in our approach and can work as an extension of your team or provide guidance and training to your staff.</p>
                                </div>
                            </div>
                        </div>

                        <div class="faq-item" 
                            data-aos="fade-up" 
                            data-aos-delay="600">
                            <div class="faq-question">
                                <h3 class="question-text">Do you sign NDAs and ensure data security?</h3>
                                <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
                                    <svg class="faq-icon">
                                        <use xlink:href="#chevron-down"></use>
                                    </svg>
                                </button>
                            </div>
                            <div class="faq-answer">
                                <div class="answer-content">
                                    <p>Yes, we take data security very seriously. We're happy to sign NDAs and follow strict security protocols. All our processes are compliant with industry standards, and we implement robust security measures to protect your sensitive information throughout the project lifecycle.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="container main-content pt-10">
        <!-- Testimonials section -->
        <section class="testimonials container pt-8 pb-8">
            <div class="text-center pb-5"
                data-aos="fade-down" 
                data-aos-duration="600" 
                data-aos-delay="0">
                <h2 class="heading-lg text-white">Testimonials</h2>
                <p class="text-white">Trusted feedback from companies and partners who believe in our quality.</p>
            </div>

            <div class="testimonials-grid p-2" data-testimonials="home"
                data-aos="fade-up" 
                data-aos-delay="100">
                
                <!-- Slide 1 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-01.png" alt="Face 01">
                            </div>
                            <div class="info">
                                <span class="name">Adrien Jacob</span>
                                <span class="role">CEO</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 2 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-02.png" alt="Face 02">
                            </div>
                            <div class="info">
                                <span class="name">Diana Taylor</span>
                                <span class="role">Graphic Designer</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 3 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-03.png" alt="Face 03">
                            </div>
                            <div class="info">
                                <span class="name">Sarah Johnson</span>
                                <span class="role">Businesswoman</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 4 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-04.png" alt="Face 04">
                            </div>
                            <div class="info">
                                <span class="name">Michael Brown</span>
                                <span class="role">Marketing Director</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 5 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-02.png" alt="Face 02">
                            </div>
                            <div class="info">
                                <span class="name">Emma Wilson</span>
                                <span class="role">Product Manager</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 6 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-01.png" alt="Face 01">
                            </div>
                            <div class="info">
                                <span class="name">James Anderson</span>
                                <span class="role">Tech Lead</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 7 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-03.png" alt="Face 03">
                            </div>
                            <div class="info">
                                <span class="name">Lisa Martinez</span>
                                <span class="role">UX Designer</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 8 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-04.png" alt="Face 04">
                            </div>
                            <div class="info">
                                <span class="name">David Rodriguez</span>
                                <span class="role">Software Engineer</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 9 -->
                <div class="comment" data-comment>
                    <div class="d-flex flex-column gap-2">
                        <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
                        <div class="message">
                            <p class="text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias 
                                nemo vitae nulla tempore.
                            </p>
                        </div>
                        <div class="info-user">
                            <div class="image">
                                <img src="assets/images/testimonials/face-02.png" alt="Face 02">
                            </div>
                            <div class="info">
                                <span class="name">Amanda Thompson</span>
                                <span class="role">Operations Manager</span>
                                <div class="rating">
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                    <svg class="star"><use xlink:href="#star-filled"></use></svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- Footer -->
    <footer class="footer pb-5">
        <div class="footer-main">
            <div class="container">
                <div class="footer-content">
                    <!-- Company Info -->
                    <div class="footer-section footer-about" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="footer-logo">
                            <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
                        </div>
                        <p class="footer-description">
                            Empowering businesses with smart, innovative tech solutions. 
                            We craft high-impact web development, mobile apps, and digital 
                            services that fuel your growth and success.
                        </p>
                        
                        <div class="footer-social">
                            <span class="social-label">Follow Us</span>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="200">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="250">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="300">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="350">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Links -->
                    <div class="footer-section footer-links" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <h4 class="footer-title">Navigation</h4>
                        <ul class="footer-menu">
                            <li><a href="index.html" class="footer-link">Home</a></li>
                            <li><a href="about-us.html" class="footer-link">About Us</a></li>
                            <li><a href="services.html" class="footer-link">Services</a></li>
                            <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
                            <li><a href="team.html" class="footer-link">Team</a></li>
                            <li><a href="pricing.html" class="footer-link">Pricing</a></li>
                            <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
                            <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
                            <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
                        </ul>
                    </div>

                    <!-- Services -->
                    <div class="footer-section footer-services" 
                        data-aos="fade-up" 
                        data-aos-delay="300">
                        <h4 class="footer-title">Our Services</h4>
                        <ul class="footer-menu">
                            <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
                        </ul>
                    </div>

                    <!-- Contact Info -->
                    <div class="footer-section footer-contact" 
                        data-aos="fade-up" 
                        data-aos-delay="400">
                        <h4 class="footer-title">Contact Info</h4>
                        <div class="footer-contact-info">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#map-marker-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Address</span>
                                    <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#phone"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Phone</span>
                                    <span class="contact-value">+1 (800) 987-6543</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#envelope-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Email</span>
                                    <span class="contact-value">hello@itagency.com</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#alarm-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Business Hours</span>
                                    <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Newsletter -->
                    <div class="footer-section footer-newsletter" 
                        data-aos="fade-up" 
                        data-aos-delay="500">
                        <h4 class="footer-title">Newsletter</h4>
                        <p class="newsletter-description">
                            Subscribe to our newsletter for the latest tech insights and updates.
                        </p>
                        <form class="newsletter-form" id="newsletterForm">
                            <div class="newsletter-input-group">
                                <input type="email" 
                                    class="newsletter-input" 
                                    placeholder="Enter your email address" 
                                    required>
                                <button type="submit" class="newsletter-btn">
                                    <svg><use xlink:href="#arrow-right"></use></svg>
                                </button>
                            </div>
                            <label class="newsletter-checkbox">
                                <input name="newsletter-agreement" type="checkbox">
                                <span class="checkmark"></span>
                                <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
                            </label>
                        </form>

                        <!-- Copyright -->
                        <div class="footer-copyright" 
                            data-aos="fade-up" 
                            data-aos-delay="500">
                            <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button -->
    <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
        <svg viewBox="0 0 24 24">
            <path d="M7 14l5-5 5 5z"/>
        </svg>
    </button>

    <!-- JavaScript -->
    <script src="assets/lib/aos/aos.js"></script>
    <script src="assets/lib/hover3dBgEffects/hover3d-bg-effects.js"></script>

    <script src="assets/js/universal-slider.js"></script>
    <script src="assets/js/testimonials.js"></script>
    <script src="assets/js/faq-accordion.js"></script>
    <script src="assets/js/custom-isotope.js"></script>
    <script src="assets/js/main-01.js"></script>
</body>
</html>