happychin-web/pages/index/index-two.vue

<template>
    <!-- <div id="preloader" class="preloader">
        <div class="animation-preloader">
            <div class="spinner"></div>
            <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
                    data-text-preloader="I" class="letters-loading">I </span><span data-text-preloader="D"
                    class="letters-loading">D </span><span data-text-preloader="S" class="letters-loading">S
                </span><span data-text-preloader="A" class="letters-loading">A </span></div>
            <p class="text-center">Loading</p>
        </div>
        <div class="loader">
            <div class="row">
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-left">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
                <div class="col-3 loader-section section-right">
                    <div class="bg"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="fix-area">
        <div class="offcanvas__info">
            <div class="offcanvas__wrapper">
                <div class="offcanvas__content">
                    <div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
                        <div class="offcanvas__logo"><a href="p9wfc14694.html"><img src="/picture/logo.svg"
                                    alt="logo-img"></a></div>
                        <div class="offcanvas__close"><button><i class="fas fa-times"></i></button></div>
                    </div>
                    <p class="text d-none d-xl-block">Nullam dignissim,ante scelerisque the is euismod fermentum odio
                        sem semper the is erat,a feugiat leo urna eget eros. Duis Aenean a imperdiet risus. </p>
                    <div class="mobile-menu fix mb-3"></div>
                    <div class="offcanvas__contact">
                        <h4>Contact Info</h4>
                        <ul>
                            <li class="d-flex align-items-center">
                                <div class="offcanvas__contact-icon"><i class="fal fa-map-marker-alt"></i></div>
                                <div class="offcanvas__contact-text"><a target="_blank" href="#">Main
                                        Street,Melbourne,Australia</a></div>
                            </li>
                            <li class="d-flex align-items-center">
                                <div class="offcanvas__contact-icon mr-15"><i class="fal fa-envelope"></i></div>
                                <div class="offcanvas__contact-text"><a href="mailto:info@example.com"><span
                                            class="mailto:info@example.com">info@example.com</span></a></div>
                            </li>
                            <li class="d-flex align-items-center">
                                <div class="offcanvas__contact-icon mr-15"><i class="fal fa-clock"></i></div>
                                <div class="offcanvas__contact-text"><a target="_blank" href="#">Mod-friday,09am
                                        -05pm</a></div>
                            </li>
                            <li class="d-flex align-items-center">
                                <div class="offcanvas__contact-icon mr-15"><i class="far fa-phone"></i></div>
                                <div class="offcanvas__contact-text"><a href="tel:+11002345909">+11002345909</a></div>
                            </li>
                        </ul>
                        <div class="header-button mt-4"><a href="contact.html" class="theme-btn text-center"><span>Get A
                                    Quote<i class="fa-solid fa-arrow-right-long"></i></span></a></div>
                        <div class="social-icon d-flex align-items-center"><a href="#"><i
                                    class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a
                                href="#"><i class="fab fa-youtube"></i></a><a href="#"><i
                                    class="fab fa-linkedin-in"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas__overlay"></div> -->
    <Preloader></Preloader>
	<FixArea></FixArea>
    <header class="header-section">
        <!-- <div class="header-top-section">
            <div class="container">
                <div class="header-top-wrapper">
                    <ul class="contact-list">
                        <li><i class="fal fa-map-marker-alt"></i>6391 Elgin St. Celina,USA </li>
                        <li><i class="far fa-envelope"></i><a href="mailto:info@example.com"
                                class="link">info@example.com</a></li>
                    </ul>
                    <div class="social-icon d-flex align-items-center"><span>Follow Us On:</span><a href="#"><i
                                class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a
                            href="#"><i class="fa-brands fa-linkedin-in"></i></a><a href="#"><i
                                class="fa-brands fa-youtube"></i></a></div>
                </div>
            </div>
        </div> -->
        <Header-top-section />
        <TopHeader headerClass="header-2" />
        <!-- <div id="header-sticky" class="header-2">
            <div class="container">
                <div class="mega-menu-wrapper">
                    <div class="header-main style-2">
                        <div class="header-left">
                            <div class="logo"><a href="p9wfc14694.html" class="header-logo"><img
                                        src="/picture/logo.svg" alt="logo-img"></a></div>
                        </div>
                        <div class="header-right d-flex justify-content-end align-items-center">
                            <div class="mean__menu-wrapper">
                                <div class="main-menu">
                                    <nav id="mobile-menu">
                                        <ul>
                                            <li class="has-dropdown active menu-thumb"><a href="p9wfc14694.html">Home <i
                                                        class="fas fa-angle-down"></i></a>
                                                <ul class="submenu has-homemenu">
                                                    <li>
                                                        <div class="homemenu-items">
                                                            <div class="homemenu">
                                                                <div class="homemenu-thumb"><img
                                                                        src="/picture/home-1.jpg" alt="img">
                                                                    <div class="demo-button"><a href="p9wfc14694.html"
                                                                            class="theme-btn"><span>Multi
                                                                                Page</span></a><a
                                                                            href="index-one-page.html"
                                                                            class="theme-btn"><span>One Page</span></a>
                                                                    </div>
                                                                </div>
                                                                <div class="homemenu-content text-center">
                                                                    <h4 class="homemenu-title">Home 01 </h4>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu">
                                                                <div class="homemenu-thumb mb-15"><img
                                                                        src="/picture/home-2.jpg" alt="img">
                                                                    <div class="demo-button"><a href="index-2.html"
                                                                            class="theme-btn"><span>Multi
                                                                                Page</span></a><a href=""
                                                                            class="theme-btn"><span>One Page</span></a>
                                                                    </div>
                                                                </div>
                                                                <div class="homemenu-content text-center">
                                                                    <h4 class="homemenu-title">Home 02 </h4>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu">
                                                                <div class="homemenu-thumb mb-15"><img
                                                                        src="/picture/home-3.jpg" alt="img">
                                                                    <div class="demo-button"><a href="index-3.html"
                                                                            class="theme-btn"><span>Multi
                                                                                Page</span></a><a
                                                                            href="index-three-page.html"
                                                                            class="theme-btn"><span>One Page</span></a>
                                                                    </div>
                                                                </div>
                                                                <div class="homemenu-content text-center">
                                                                    <h4 class="homemenu-title">Home 03 </h4>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu">
                                                                <div class="homemenu-thumb mb-15"><img
                                                                        src="/picture/home-4.jpg" alt="img">
                                                                    <div class="demo-button"><a href="index-4.html"
                                                                            class="theme-btn"><span>Multi
                                                                                Page</span></a><a
                                                                            href="index-four-page.html"
                                                                            class="theme-btn"><span>One Page</span></a>
                                                                    </div>
                                                                </div>
                                                                <div class="homemenu-content text-center">
                                                                    <h4 class="homemenu-title">Home 04 </h4>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="#about">About Us</a></li>
                                            <li><a href="#programs">Programs</a></li>
                                            <li><a href="#team">Team</a></li>
                                            <li><a href="#blog">Blog</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div><a href="#0" class="search-trigger search-icon"><i class="fal fa-search"></i></a>
                            <div class="header-button"><a href="contact.html" class="theme-btn"><span>Book A visit <i
                                            class="fa-solid fa-arrow-right-long"></i></span></a></div>
                            <div class="header__hamburger d-xl-none my-auto">
                                <div class="sidebar__toggle"><i class="fas fa-bars"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </header>
    <div class="search-wrap">
        <div class="search-inner"><i class="fas fa-times search-close" id="search-close"></i>
            <div class="search-cell">
                <form method="get">
                    <div class="search-field-holder"><input type="search" class="main-search-input"
                            placeholder="Search..."></div>
                </form>
            </div>
        </div>
    </div>
    <section class="hero-section hero-2 fix">
        <div class="circle-shape"><img src="/picture/circle.png" alt="shape-img"></div>
        <div class="line-shape"><img src="/picture/line-shape.png" alt="shape-img"></div>
        <div class="right-shape"><img src="/picture/right-shape.png" alt="shape-img"></div>
        <div class="roket-shape float-bob-y"><img src="/picture/roket.png" alt="shape-img"></div>
        <div class="compass-shape"><img src="/picture/compass.png" alt="shape-img"></div>
        <div class="bus-shape float-bob-x"><img src="/picture/bus.png" alt="shape-img"></div>
        <div class="frame-shape"><img src="/picture/frame2.png" alt="shape-img"></div>
        <div class="star-shape"><img src="/picture/star-2.png" alt="shape-img"></div>
        <div class="pencil-shape"><img src="/picture/pencil.png" alt=""></div>
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content">
                        <h5 class="wow fadeInUp">Preschool & Baby Care</h5>
                        <h1 class="wow fadeInUp" data-wow-delay=".3s">We Prepare Your <br>Child For <span>Life</span>
                        </h1>
                        <p class="wow fadeInUp" data-wow-delay=".5s">Suspendisse eget lectus vitae elit malesuada
                            lacinia Vestibulum <br>scelerisque,ligula sit amet consequat</p>
                        <div class="hero-button"><a href="index-2.html" class="theme-btn wow fadeInUp"
                                data-wow-delay=".7s">Explore More <i class="fa-solid fa-arrow-right-long"></i></a><a
                                href="contact.html" class="theme-btn transparent wow fadeInUp" data-wow-delay=".8s">Get
                                In Touch <i class="fa-solid fa-arrow-right-long"></i></a></div>
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
                    <div class="hero-image"><img src="/picture/022.png" alt="hero-img"></div>
                </div>
            </div>
        </div>
    </section>
    <section class="work-process-section-2 fix section-padding fix">
        <div class="top-shape"><img src="/picture/bottom-shape.png" alt="shape-img"></div>
        <div class="container">
            <div class="process-work-wrapper style-padding">
                <div class="row g-4">
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
                        <div class="work-process-items text-center">
                            <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
                                    src="/picture/01.svg" alt="img"></div>
                            <div class="content">
                                <h4>Choose A Service</h4>
                                <p>In a free hour,when our power of choice is untrammeled and </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
                        <div class="work-process-items text-center">
                            <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
                                    src="/picture/02.svg" alt="img"></div>
                            <div class="content">
                                <h4>Expert Teachers</h4>
                                <p>In a free hour,when our power of choice is untrammeled and </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
                        <div class="work-process-items text-center">
                            <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
                                    src="/picture/03.svg" alt="img"></div>
                            <div class="content">
                                <h4>E-Learning Media</h4>
                                <p>In a free hour,when our power of choice is untrammeled and </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
                        <div class="work-process-items text-center">
                            <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
                                    src="/picture/04.svg" alt="img"></div>
                            <div class="content">
                                <h4>Full Day Programs</h4>
                                <p>In a free hour,when our power of choice is untrammeled and </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="about-activities-section-2 section-padding pt-0" id="about">
        <div class="left-shape"><img src="/picture/left-shape.png" alt="shape-img"></div>
        <div class="zebra-shape float-bob-y"><img src="/picture/zebra.png" alt="shape-img"></div>
        <div class="bottom-shape"><img src="/picture/section-top-shape-2.png" alt="shape-img"></div>
        <div class="sun-shape"><img src="/picture/shape-2.png" alt="shape-img"></div>
        <div class="container">
            <div class="about-activities-wrapper style-2">
                <div class="row g-4">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
                        <div class="activities-image-items"><img src="/picture/04.png" alt="img">
                            <div class="radius-shape"><img src="/picture/radius-shape.png" alt="shape-img"></div>
                            <div class="circle-shape"><img src="/picture/circle1.png" alt="shape-img"></div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="activities-content">
                            <div class="section-title"><span class="wow fadeInUp">About Us</span>
                                <h2 class="wow fadeInUp" data-wow-delay=".3s">Learn to play,converse <br>with
                                    confidence. </h2>
                            </div>
                            <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">Luctus. Curabitur nibh justo
                                imperdiet non ex non tempus faucibus urna Aliquam at elit vitae dui sagittis maximus
                                eget vitae diam In fermentum </p>
                            <div class="row g-4 mt-4">
                                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                                    <div class="icon-items">
                                        <div class="icon"><img src="/picture/icon-5.svg" alt="img"></div>
                                        <div class="content">
                                            <h5>Sport Program</h5>
                                            <p>Aliquam erat volutpat <br>nullam imperdiet</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                                    <div class="icon-items">
                                        <div class="icon"><img src="/picture/icon-6.svg" alt="img"></div>
                                        <div class="content">
                                            <h5>Easy To Learn</h5>
                                            <p>Ut vehiculadictumst <br>maecenas ante.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="about-author">
                                <div class="author-image wow fadeInUp" data-wow-delay=".3s"><img
                                        src="/picture/author1.png" alt="author-img">
                                    <div class="content">
                                        <h6>Ronald Richards</h6>
                                        <p>Co,Founder</p>
                                    </div>
                                </div>
                                <div class="author-icon wow fadeInUp" data-wow-delay=".5s">
                                    <div class="icon"><i class="fa-solid fa-phone"></i></div>
                                    <div class="content"><span>Call Us Now</span>
                                        <h5><a href="tel:+2085550112">+208-555-0112</a></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="feature-value-section fix section-padding section-bg-2">
        <div class="shape-1"><img src="/picture/shape-1.png" alt="shape-img"></div>
        <div class="shape-2 float-bob-x"><img src="/picture/shape-21.png" alt="shape-img"></div>
        <div class="container">
            <div class="section-title text-center"><span class="wow fadeInUp">Our values</span>
                <h2 class="wow fadeInUp" data-wow-delay=".3s">The best playschool <br>for your kid</h2>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-6">
                    <div class="feature-value-items">
                        <div class="value-icon-items wow fadeInUp" data-wow-delay=".3s">
                            <div class="icon"><img src="/picture/icon-11.svg" alt="img"></div>
                            <div class="content">
                                <h5>Teacher Training and Progress </h5>
                                <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
                                    pulvinar.</p>
                            </div>
                        </div>
                        <div class="value-icon-items wow fadeInUp" data-wow-delay=".5s">
                            <div class="icon color-2"><img src="/picture/icon-21.svg" alt="img"></div>
                            <div class="content">
                                <h5>Nanny Selection 24/7</h5>
                                <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
                                    pulvinar.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
                    <div class="feature-value-items">
                        <div class="feature-value-image"><img src="/picture/cta-2.png" alt="img">
                            <div class="value-shape"><img src="/picture/cta-shape-2.png" alt="shape-img"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6">
                    <div class="feature-value-items">
                        <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".3s">
                            <div class="content">
                                <h5>Advanced Placement Courses</h5>
                                <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
                                    pulvinar.</p>
                            </div>
                            <div class="icon color-3"><img src="/picture/icon-3.svg" alt="img"></div>
                        </div>
                        <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".5s">
                            <div class="content">
                                <h5>Self-contained gifted programs​</h5>
                                <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
                                    pulvinar.</p>
                            </div>
                            <div class="icon color-2 color-4"><img src="/picture/icon-41.svg" alt="img"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="counter-section fix">
        <div class="line-shape"><img src="/picture/line-shape1.png" alt="shape-img"></div>
        <div class="box-shape float-bob-x"><img src="/picture/box-shape.png" alt="shape-img"></div>
        <div class="counter-bg"></div>
        <div class="container">
            <div class="counter-wrapper">
                <div class="row g-4">
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
                        <div class="counter-items">
                            <div class="icon"><img src="/picture/icon-12.svg" alt="img"></div>
                            <div class="content">
                                <h2><span class="count">25</span>+</h2>
                                <p>Year of Experience</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
                        <div class="counter-items">
                            <div class="icon"><img src="/picture/icon-22.svg" alt="img"></div>
                            <div class="content">
                                <h2><span class="count">6,500</span>+</h2>
                                <p>Class Completed</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
                        <div class="counter-items">
                            <div class="icon"><img src="/picture/icon-31.svg" alt="img"></div>
                            <div class="content">
                                <h2><span class="count">100</span>+</h2>
                                <p>Experts Instructors</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
                        <div class="counter-items border-none">
                            <div class="icon"><img src="/picture/icon-42.svg" alt="img"></div>
                            <div class="content">
                                <h2><span class="count">6,561</span>+</h2>
                                <p>Students Enroll</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="program-section-2 section-padding fix" id="programs">
        <div class="line-1"><img src="/picture/line-1.png" alt="shape-img"></div>
        <div class="container">
            <div class="section-title text-center"><span class="wow fadeInUp">Our Programs</span>
                <h2 class="wow fadeInUp" data-wow-delay=".3s">We meet kids at their level <br>regardless of their age
                </h2>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
                    <div class="program-box-items-2">
                        <div class="program-bg"></div>
                        <div class="icon"><img src="/picture/011.svg" alt="icon-img"></div>
                        <div class="content text-center">
                            <h4><a href="program-details.html">Preschool</a></h4><span>(2-3 years)</span>
                            <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
                                class="arrow-icon"><i class="fa-solid fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
                    <div class="program-box-items-2">
                        <div class="program-bg bg-2"></div>
                        <div class="icon"><img src="/picture/021.svg" alt="icon-img"></div>
                        <div class="content text-center">
                            <h4><a href="program-details.html">Chemistry Class</a></h4><span>(4-5 years)</span>
                            <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
                                class="arrow-icon color-2"><i class="fa-solid fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
                    <div class="program-box-items-2">
                        <div class="program-bg bg-3"></div>
                        <div class="icon"><img src="/picture/031.svg" alt="icon-img"></div>
                        <div class="content text-center">
                            <h4><a href="program-details.html">Kindergarten</a></h4><span>(4-5 years)</span>
                            <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
                                class="arrow-icon color-3"><i class="fa-solid fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
                    <div class="program-box-items-2">
                        <div class="program-bg bg-4"></div>
                        <div class="icon"><img src="/picture/041.svg" alt="icon-img"></div>
                        <div class="content text-center">
                            <h4><a href="program-details.html">Drawing Class</a></h4><span>(1-2 years)</span>
                            <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
                                class="arrow-icon color-4"><i class="fa-solid fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="team-section-2 section-bg section-padding" id="team">
        <div class="top-shape"><img src="/picture/top-shape.png" alt="shape-img"></div>
        <div class="love-shape float-bob-y"><img src="/picture/love.png" alt="shape-img"></div>
        <div class="frame-shape"><img src="/picture/frame.png" alt="shape-img"></div>
        <div class="container">
            <div class="section-title-area">
                <div class="section-title"><span class="wow fadeInUp">Our Experts</span>
                    <h2 class="wow fadeInUp" data-wow-delay=".3s">Our Expert Instructors</h2>
                </div>
                <div class="array-button wow fadeInUp" data-wow-delay=".5s"><button class="array-prev"><i
                            class="fal fa-arrow-left"></i></button><button class="array-next"><i
                            class="fal fa-arrow-right"></i></button></div>
            </div>
            <div class="swiper team-slider-2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="team-box-items">
                            <div class="team-image"><img src="/picture/05.png" alt="team-img"></div>
                            <div class="team-content">
                                <h3><a href="team-details.html">Leslie Alexander</a></h3>
                                <p>Math Teacher</p>
                                <div class="social-icon d-flex align-items-center"><a href="#"><i
                                            class="fab fa-facebook-f"></i></a><a href="#"><i
                                            class="fa-brands fa-instagram"></i></a><a href="#"><i
                                            class="fab fa-twitter"></i></a><a href="#"><i
                                            class="fab fa-pinterest-p"></i></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="team-box-items">
                            <div class="team-image"><img src="/picture/06.png" alt="team-img"></div>
                            <div class="team-content">
                                <h3><a href="team-details.html">Esther Howard</a></h3>
                                <p>Art Teacher</p>
                                <div class="social-icon d-flex align-items-center"><a href="#"><i
                                            class="fab fa-facebook-f"></i></a><a href="#"><i
                                            class="fa-brands fa-instagram"></i></a><a href="#"><i
                                            class="fab fa-twitter"></i></a><a href="#"><i
                                            class="fab fa-pinterest-p"></i></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="team-box-items">
                            <div class="team-image"><img src="/picture/07.png" alt="team-img"></div>
                            <div class="team-content">
                                <h3><a href="team-details.html">Ralph Edwards</a></h3>
                                <p>Sport Teacher</p>
                                <div class="social-icon d-flex align-items-center"><a href="#"><i
                                            class="fab fa-facebook-f"></i></a><a href="#"><i
                                            class="fa-brands fa-instagram"></i></a><a href="#"><i
                                            class="fab fa-twitter"></i></a><a href="#"><i
                                            class="fab fa-pinterest-p"></i></a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contact-section section-padding">
        <div class="line-1"><img src="/picture/line-1.png" alt="shape-img"></div>
        <div class="line-2"><img src="/picture/line-21.png" alt="shape-img"></div>
        <div class="container">
            <div class="contact-wrapper">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="contact-content">
                            <div class="section-title"><span class="text-white wow fadeInUp">Contact with Us</span>
                                <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">How May We Help You!</h2>
                            </div>
                            <form action="#" id="contact-form" method="POST" class="contact-form-items">
                                <div class="row g-4">
                                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
                                        <div class="form-clt"><span>Your name*</span><input type="text" name="name"
                                                id="name" placeholder="Robot fox"></div>
                                    </div>
                                    <div class="col-lg-6 wow fadeInUp" data-wow-delay=".5s">
                                        <div class="form-clt"><span>Your Email*</span><input type="text" name="email"
                                                id="email" placeholder="info@example.com"></div>
                                    </div>
                                    <div class="col-lg-12 wow fadeInUp" data-wow-delay=".7s">
                                        <div class="form-clt"><span>Message*</span><textarea name="message" id="message"
                                                placeholder="Write Message"></textarea></div>
                                    </div>
                                    <div class="col-lg-7 wow fadeInUp" data-wow-delay=".9s"><button type="submit"
                                            class="theme-btn bg-white">Send Request <i
                                                class="fa-solid fa-arrow-right-long"></i></button></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="contact-image wow fadeInUp" data-wow-delay=".4s"><img
                                src="/picture/contact.png" alt="contact-img">
                            <div class="cricle-shape"><img src="/picture/circle-2.png" alt="shape-img"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pricing-section section-bg section-padding">
        <div class="tree-shape float-bob-x"><img src="/picture/tree-shape.png" alt="shape-img"></div>
        <div class="pencil-shape"><img src="/picture/pencil4.png" alt="shape-img"></div>
        <div class="top-shape"><img src="/picture/top-shape.png" alt="shape-img"></div>
        <div class="container">
            <div class="pricing-wrapper">
                <div class="section-title text-center mb-0"><span class="wow fadeInUp">Our pricing</span>
                    <h2 class="wow fadeInUp" data-wow-delay=".3s">Select a plan according to <br>your requirements</h2>
                </div>
                <ul class="nav" role="tablist">
                    <li class="nav-item wow fadeInUp" data-wow-delay=".3s" role="presentation"><a href="#monthly"
                            data-bs-toggle="tab" class="nav-link active" aria-selected="true" role="tab">Monthly </a>
                    </li>
                    <li class="nav-item wow fadeInUp" data-wow-delay=".5s" role="presentation"><a href="#yearly"
                            data-bs-toggle="tab" class="nav-link" aria-selected="false" role="tab" tabindex="-1">Yearly
                        </a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div id="monthly" class="tab-pane fade show active" role="tabpanel">
                    <div class="row">
                        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                            <div class="pricing-items">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
                                <div class="pricing-header">
                                    <h4>Basic Plan</h4>
                                    <h2>$39 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                            <div class="pricing-items active">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element-2.png" alt="shape-img">
                                </div>
                                <div class="pricing-header">
                                    <h4>Premium Plan</h4>
                                    <h2>$49 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                            <div class="pricing-items">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
                                <div class="pricing-header">
                                    <h4>Advanced</h4>
                                    <h2>$99 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="yearly" class="tab-pane fade" role="tabpanel">
                    <div class="row">
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="pricing-items">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
                                <div class="pricing-header">
                                    <h4>Basic Plan</h4>
                                    <h2>$39 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="pricing-items active">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element-2.png" alt="shape-img">
                                </div>
                                <div class="pricing-header">
                                    <h4>Premium Plan</h4>
                                    <h2>$49 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="pricing-items">
                                <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
                                <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
                                <div class="pricing-header">
                                    <h4>Advanced</h4>
                                    <h2>$99 <span>/monthly</span></h2>
                                </div>
                                <ul class="pricing-list">
                                    <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
                                    <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
                                    <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
                                    <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
                                    <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
                                </ul><a href="contact.html" class="theme-btn">Choose Plan <i
                                        class="fa-solid fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="testimonial-section-2 fix section-padding">
        <div class="zebra-shape float-bob-y"><img src="/picture/zebra.png" alt="shape-img"></div>
        <div class="left-shape"><img src="/picture/testi-l-shape.png" alt="shape-img"></div>
        <div class="container">
            <div class="testimonial-wrapper section-padding">
                <div class="shape-1"><img src="/picture/shape-11.png" alt="shape-img"></div>
                <div class="shape-2"><img src="/picture/shape-2.png" alt="shape-img"></div>
                <div class="testimonial-bg"></div>
                <div class="section-title text-center"><span class="wow fadeInUp">Testimonials</span>
                    <h2 class="wow fadeInUp" data-wow-delay=".3s">What clients say</h2>
                </div>
                <div class="swiper testimonial-slider-2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonial-box-items">
                                <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                                    dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                                    elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                                    sapien ac elementum </p>
                                <div class="client-info"><img src="/picture/author1.png" alt="img">
                                    <div class="content">
                                        <h5>Ronald Richards</h5>
                                        <p>Co,Founder</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-box-items">
                                <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                                    dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                                    elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                                    sapien ac elementum </p>
                                <div class="client-info"><img src="/picture/author1.png" alt="img">
                                    <div class="content">
                                        <h5>Ronald Richards</h5>
                                        <p>Co,Founder</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-box-items">
                                <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
                                    dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
                                    elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
                                    sapien ac elementum </p>
                                <div class="client-info"><img src="/picture/author1.png" alt="img">
                                    <div class="content">
                                        <h5>Ronald Richards</h5>
                                        <p>Co,Founder</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="array-button"><button class="array-prev"><i class="fal fa-arrow-left"></i></button><button
                        class="array-next"><i class="fal fa-arrow-right"></i></button></div>
            </div>
        </div>
    </section>
    <section class="news-section-2 fix section-padding" id="blog">
        <div class="shape-1 float-bob-y"><img src="/picture/shape-12.png" alt="shape-img"></div>
        <div class="container">
            <div class="section-title text-center pt-40"><span class="text-white wow fadeInUp">Blog And News</span>
                <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">Education foundation <br>for a better </h2>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                    <div class="news-card-items">
                        <div class="news-image"><img src="/picture/042.jpg" alt="img">
                            <div class="news-layer-wrapper">
                                <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
                                </div>
                            </div>
                            <div class="post"><span>Activities</span></div>
                        </div>
                        <div class="news-content">
                            <ul>
                                <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
                                <li><i class="far fa-user"></i>By admin </li>
                            </ul>
                            <h3><a href="news-details.html">From without content <br>style without </a></h3><a
                                href="news-details.html" class="theme-btn-2 mt-3">Read More <i
                                    class="fas fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                    <div class="news-card-items">
                        <div class="news-image"><img src="/picture/051.jpg" alt="img">
                            <div class="news-layer-wrapper">
                                <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
                                </div>
                            </div>
                            <div class="post"><span>Activities</span></div>
                        </div>
                        <div class="news-content">
                            <ul>
                                <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
                                <li><i class="far fa-user"></i>By admin </li>
                            </ul>
                            <h3><a href="news-details.html">That jerk Form Finance <br>really threw me </a></h3><a
                                href="news-details.html" class="theme-btn-2 mt-3">Read More <i
                                    class="fas fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                    <div class="news-card-items">
                        <div class="news-image"><img src="/picture/061.jpg" alt="img">
                            <div class="news-layer-wrapper">
                                <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
                                </div>
                                <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
                                </div>
                            </div>
                            <div class="post"><span>Activities</span></div>
                        </div>
                        <div class="news-content">
                            <ul>
                                <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
                                <li><i class="far fa-user"></i>By admin </li>
                            </ul>
                            <h3><a href="news-details.html">All Inclusive Ultimate Circle <br>Island Day with Lunch </a>
                            </h3><a href="news-details.html" class="theme-btn-2 mt-3">Read More <i
                                    class="fas fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="brand-section fix section-padding pt-0">
        <div class="container">
            <div class="brand-wrapper">
                <h6 class="text-center wow fadeInUp" data-wow-delay=".3s">1k+Brands Trust Us</h6>
                <div class="swiper brand-slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <FooterSection></FooterSection>
    <!-- <footer class="footer-section section-bg">
        <div class="frame-shape style-2"><img src="/picture/frame-2.png" alt="shape-img"></div>
        <div class="frame-shape-3 float-bob-y"><img src="/picture/frame-3.png" alt="shape-img"></div>
        <div class="footer-widgets-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                        <div class="single-footer-widget">
                            <div class="widget-head"><a href="p9wfc14694.html"><img src="/picture/logo.svg"
                                        alt="logo-img"></a></div>
                            <div class="footer-content">
                                <p>Phasellus ultricies aliquam volutpat ullamcorper laoreet neque,a lacinia curabitur
                                    lacinia mollis </p>
                                <div class="social-icon d-flex align-items-center"><a href="#"><i
                                            class="fab fa-facebook-f"></i></a><a href="#"><i
                                            class="fab fa-twitter"></i></a><a href="#"><i
                                            class="fa-brands fa-linkedin-in"></i></a><a href="#"><i
                                            class="fa-brands fa-youtube"></i></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
                        <div class="single-footer-widget">
                            <div class="widget-head">
                                <h3>Quick Links</h3>
                            </div>
                            <ul class="list-area">
                                <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Our Services
                                    </a></li>
                                <li><a href="news-details.html"><i class="fa-solid fa-chevron-right"></i>Our Blogs </a>
                                </li>
                                <li><a href="faq.html"><i class="fa-solid fa-chevron-right"></i>FAQ’S </a></li>
                                <li><a href="contact.html"><i class="fa-solid fa-chevron-right"></i>Contact Us </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
                        <div class="single-footer-widget style-margin">
                            <div class="widget-head">
                                <h3>Categories</h3>
                            </div>
                            <ul class="list-area">
                                <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Music
                                        Learning </a></li>
                                <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Sports,Games
                                    </a></li>
                                <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Science
                                        Class </a></li>
                                <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Drawing </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                        <div class="single-footer-widget style-margin">
                            <div class="widget-head">
                                <h3>Our Galleries</h3>
                            </div>
                            <div class="footer-gallery">
                                <div class="gallery-wrap">
                                    <div class="gallery-item">
                                        <div class="thumb"><a href="/picture/gallery-1.jpg" class="img-popup"><img
                                                    src="/picture/gallery-1.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                        <div class="thumb"><a href="/picture/gallery-2.jpg" class="img-popup"><img
                                                    src="/picture/gallery-2.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                        <div class="thumb"><a href="/picture/gallery-3.jpg" class="img-popup"><img
                                                    src="/picture/gallery-3.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                    </div>
                                    <div class="gallery-item">
                                        <div class="thumb"><a href="/picture/gallery-4.jpg" class="img-popup"><img
                                                    src="/picture/gallery-4.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                        <div class="thumb"><a href="/picture/gallery-5.jpg" class="img-popup"><img
                                                    src="/picture/gallery-5.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                        <div class="thumb"><a href="/picture/gallery-6.jpg" class="img-popup"><img
                                                    src="/picture/gallery-6.jpg" alt="gallery-img">
                                                <div class="icon"><i class="far fa-plus"></i></div>
                                            </a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="f-bottom-shape"></div>
            <div class="container">
                <div class="footer-wrapper d-flex align-items-center justify-content-between">
                    <p class="wow fadeInLeft color-2" data-wow-delay=".3s">© All Copyright 2024 by <a
                            href="https://www.99ziyuan.net">99ziyuan</a></p>
                    <ul class="footer-menu wow fadeInRight" data-wow-delay=".5s">
                        <li><a href="contact.html">Terms & Condition </a></li>
                        <li><a href="contact.html">Privacy Policy </a></li>
                    </ul>
                </div>
            </div><a href="#" id="scrollUp" class="scroll-icon"><i class="far fa-arrow-up"></i></a>
        </div>
    </footer> -->
</template>