qinyu_0325
/
lmdWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Discover Who We Are | ITAgency</title>
    <meta name="description" content="Learn more about ITAgency, our story, our mission, and the passionate team behind our innovative digital solutions. Get to know who we are and what we stand for.">


    <!-- 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">
    
    <!-- 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 active">About Us</a></li>
                    <li><a href="services.html" class="nav-link">Services</a></li>
                    <li><a href="portfolio.html" class="nav-link">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="/" 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">About Us</span>
                </div>
                
                <h1 class="page-title"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="100">About Us</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 -->
    <div class="main d-flex-center pt-8">
        <!-- Main Content -->
        <div class="container main-content">
            <div class="text-center" data-aos="fade-down">
                <h2 class="heading-lg">Our Story & Mission</h2>
            </div>

            <!-- About Us Section -->
            <section class="about-us-modern">
                <div class="container">
                    <div class="about-content" data-aos="fade-right">
                        <h2 class="section-title">
                            Building Digital Solutions <br> Since <span class="highlighted-year">2010</span>.
                        </h2>
                        <p class="section-description">
                            We create scalable, user-friendly, and innovative platforms tailored to your needs. Our multidisciplinary team is focused on building powerful experiences that connect brands with their audience.
                        </p>

                        <div class="features-grid">
                            <div class="feature-item">
                                <div class="feature-icon">
                                    <i class="icon-star"></i>
                                </div>
                                <h4>Expert Team</h4>
                                <p>Skilled professionals passionate about technology and design.</p>
                            </div>
                            <div class="feature-item">
                                <div class="feature-icon">
                                    <i class="icon-rocket"></i>
                                </div>
                                <h4>Fast Delivery</h4>
                                <p>Efficient processes to launch your projects on time.</p>
                            </div>
                            <div class="feature-item">
                                <div class="feature-icon">
                                    <i class="icon-globe"></i>
                                </div>
                                <h4>Global Impact</h4>
                                <p>Solutions used and recognized around the world.</p>
                            </div>
                            <div class="feature-item">
                                <div class="feature-icon">
                                    <i class="icon-support"></i>
                                </div>
                                <h4>Dedicated Support</h4>
                                <p>We accompany you in every phase of your project.</p>
                            </div>
                        </div>

                        <a pages/contact-us.html class="btn btn-primary mt-4">Contact Us</a>
                    </div>

                    <div class="about-image" data-hover-3d data-aos="fade-left">
                        <img src="assets/images/backgrounds/about-us.png" alt="Team Collaboration">
                    </div>
                </div>
            </section>

            <!-- Team section -->
            <section class="team">
                <div class="text-center pb-7"
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <h2 class="heading-lg">Our Team</h2>
                    <p>Meet the passionate professionals who drive our success and bring innovative solutions to every project.</p>
                </div>

                <div class="team-content" data-aos="fade-up" data-aos-duration="600" data-aos-delay="0">
                    <div class="item-team neon-card">
                        <img class="image" src="assets/images/team/sarahjohnson.png" alt="Sarah Johnson">
                        <div class="glow"></div>

                        <div class="social-info glass-effect">
                            <div class="info">
                                <span class="name">Sarah Johnson</span>
                                <span class="rol">CEO & Founder</span>
                            </div>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="item-team neon-card">
                        <img class="image" src="assets/images/team/jameswilson.png" alt="James Wilson">
                        <div class="glow"></div>

                        <div class="social-info glass-effect">
                            <div class="info">
                                <span class="name">James Wilson</span>
                                <span class="rol">Lead Developer</span>
                            </div>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="item-team neon-card">
                        <img class="image" src="assets/images/team/emmarodriguez.png" alt="Emma Rodriguez">
                        <div class="glow"></div>

                        <div class="social-info glass-effect">
                            <div class="info">
                                <span class="name">Emma Rodriguez</span>
                                <span class="rol">UI/UX Designer</span>
                            </div>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="item-team neon-card">
                        <img class="image" src="assets/images/team/davidthompson.png" alt="David Thompson">
                        <div class="glow"></div>

                        <div class="social-info glass-effect">
                            <div class="info">
                                <span class="name">David Thompson</span>
                                <span class="rol">Marketing Director</span>
                            </div>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition sm">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Testimonials section -->
            <section class="testimonials container pt-6 pb-8">
                <div class="text-center pb-5"
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <h2 class="heading-lg">Testimonials</h2>
                    <p>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>
    </div>

    <!-- Client company section -->
    <section class="client-companies container pt-6 pb-6">
        <div class="text-center pb-5" data-aos="fade-down">
            <h2 class="heading-lg text-white">Building Success With Great Companies</h2>
            <p class="text-white">We are proud to have collaborated with a diverse range of industry-leading businesses.</p>
        </div>

        <div class="customers-carousel universal-slider"
            data-aos="fade-down" 
            data-aos-duration="600" 
            data-aos-delay="0">
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-01.png" alt="Company 01">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-02.png" alt="Company 02">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-03.png" alt="Company 03">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-04.png" alt="Company 04">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-05.png" alt="Company 05">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-06.png" alt="Company 06">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-01.png" alt="Company 01">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-02.png" alt="Company 02">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-03.png" alt="Company 03">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-04.png" alt="Company 04">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-05.png" alt="Company 05">
            </div>
            <div class="client-company">
                <img class="image" src="assets/images/companies/company-06.png" alt="Company 06">
            </div>
        </div>
    </section>

     <!-- Main -->
    <div class="main d-flex-center pt-9 pb-9">
        <!-- Main Content -->
        <div class="container main-content">
            
            <!-- Blog section -->
            <section class="blog no-blog-sidebar">
                <div class="d-flex-baseline-between pb-5" 
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <h2>Latest Blog Posts</h2>
                    <a href="blog-column-2.html" class="btn btn-primary">View All Posts</a>
                </div>

                <div class="blog-grid blog-grid-col3">
                    <!-- Blog Post 1 -->
                    <article class="blog-card" 
                        data-aos="fade-up" 
                        data-aos-delay="0">
                        <div class="blog-image">
                            <img class="image" src="assets/images/blog/post-1.png" alt="The Future of Web Development">
                            <div class="blog-category">
                                <span class="category-tag">Technology</span>
                            </div>
                        </div>
                        <div class="blog-content">
                            <div class="blog-meta">
                                <div class="blog-date">
                                    <svg><use xlink:href="#calendar"></use></svg>
                                    <span>July 15, 2025</span>
                                </div>
                                <div class="blog-author">
                                    <svg><use xlink:href="#user"></use></svg>
                                    <span>James Wilson</span>
                                </div>
                            </div>
                            <h3 class="blog-title">The Future of Web Development: Trends to Watch in 2025</h3>
                            <p class="blog-excerpt">
                                Discover the latest trends shaping the web development landscape, 
                                from AI-powered tools to progressive web applications and beyond.
                            </p>
                            <div class="blog-footer">
                                <a href="article.html" class="read-more">
                                    Read More
                                    <svg><use xlink:href="#arrow-right"></use></svg>
                                </a>
                                <div class="blog-stats">
                                    <span class="reading-time">
                                        <svg><use xlink:href="#clock"></use></svg>
                                        4 min read
                                    </span>
                                </div>
                            </div>
                        </div>
                        <a class="overlay-link" href="article.html"></a>
                    </article>

                    <!-- Blog Post 2 -->
                    <article class="blog-card" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="blog-image">
                            <img class="image" src="assets/images/blog/post-2.png" alt="Mobile App Security Best Practices">
                            <div class="blog-category">
                                <span class="category-tag">Security</span>
                            </div>
                        </div>
                        <div class="blog-content">
                            <div class="blog-meta">
                                <div class="blog-date">
                                    <svg><use xlink:href="#calendar"></use></svg>
                                    <span>July 10, 2025</span>
                                </div>
                                <div class="blog-author">
                                    <svg><use xlink:href="#user"></use></svg>
                                    <span>James Wilson</span>
                                </div>
                            </div>
                            <h3 class="blog-title">Mobile App Security: Best Practices for Developers</h3>
                            <p class="blog-excerpt">
                                Learn essential security measures every mobile developer should implement 
                                to protect user data and ensure app integrity.
                            </p>
                            <div class="blog-footer">
                                <a href="article.html" class="read-more">
                                    Read More
                                    <svg><use xlink:href="#arrow-right"></use></svg>
                                </a>
                                <div class="blog-stats">
                                    <span class="reading-time">
                                        <svg><use xlink:href="#clock"></use></svg>
                                        7 min read
                                    </span>
                                </div>
                            </div>
                        </div>
                        <a class="overlay-link" href="article.html"></a>
                    </article>

                    <!-- Blog Post 3 -->
                    <article class="blog-card" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <div class="blog-image">
                            <img class="image" src="assets/images/blog/post-3.png" alt="Cloud Migration Strategies">
                            <div class="blog-category">
                                <span class="category-tag">Cloud</span>
                            </div>
                        </div>
                        <div class="blog-content">
                            <div class="blog-meta">
                                <div class="blog-date">
                                    <svg><use xlink:href="#calendar"></use></svg>
                                    <span>July 5, 2025</span>
                                </div>
                                <div class="blog-author">
                                    <svg><use xlink:href="#user"></use></svg>
                                    <span>Emma Rodriguez</span>
                                </div>
                            </div>
                            <h3 class="blog-title">Cloud Migration Strategies for Modern Businesses</h3>
                            <p class="blog-excerpt">
                                A comprehensive guide to successfully migrating your business infrastructure 
                                to the cloud with minimal downtime and maximum efficiency.
                            </p>
                            <div class="blog-footer">
                                <a href="article.html" class="read-more">
                                    Read More
                                    <svg><use xlink:href="#arrow-right"></use></svg>
                                </a>
                                <div class="blog-stats">
                                    <span class="reading-time">
                                        <svg><use xlink:href="#clock"></use></svg>
                                        6 min read
                                    </span>
                                </div>
                            </div>
                        </div>
                        <a class="overlay-link" href="article.html"></a>
                    </article>
                </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>

    <!-- 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/testimonials.js"></script>
    <script src="assets/js/custom-isotope.js"></script>
    <script src="assets/js/universal-slider.js"></script>
    <script src="assets/js/main-01.js"></script>
</body>
</html>