happychin-web/pages/index/index-2.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=""
                                                                            class="theme-btn"><span>Multi
                                                                                Page</span></a><a
                                                                            href="index-two-page.html"
                                                                            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.html">About Us</a></li>
                                            <li><a href="program-details.html">Programs <i
                                                        class="fas fa-angle-down"></i></a>
                                                <ul class="submenu">
                                                    <li><a href="program.html">Programs Grid</a></li>
                                                    <li><a href="program-carousel.html">Programs Carousel</a></li>
                                                    <li><a href="program-details.html">Programs Details</a></li>
                                                </ul>
                                            </li>
                                            <li class="has-dropdown"><a href="news.html">Pages <i
                                                        class="fas fa-angle-down"></i></a>
                                                <ul class="submenu">
                                                    <li class="has-dropdown"><a href="event-details.html">Event <i
                                                                class="fas fa-angle-down"></i></a>
                                                        <ul class="submenu">
                                                            <li><a href="event.html">Event Grid</a></li>
                                                            <li><a href="event-carousel.html">Event Carousel</a></li>
                                                            <li><a href="event-details.html">Event Details</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="has-dropdown"><a href="team-details.html">Teacher <i
                                                                class="fas fa-angle-down"></i></a>
                                                        <ul class="submenu">
                                                            <li><a href="team.html">Our Teacher</a></li>
                                                            <li><a href="team-carousel.html">Teacher Carousel</a></li>
                                                            <li><a href="team-details.html">Teacher Details</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="pricing.html">Pricing</a></li>
                                                    <li><a href="faq.html">Faq's</a></li>
                                                    <li><a href="404.html">404 Page</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="news.html">
                                                    Blog
                                                    <i class="fas fa-angle-down"></i>
                                                </a>
                                                <ul class="submenu">
                                                    <li><a href="news-grid.html">Blog Grid</a></li>
                                                    <li><a href="news.html">Blog List</a></li>
                                                    <li><a href="news-carousel.html">Blog Carousel</a></li>
                                                    <li><a href="news-details.html">Blog Details</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="contact.html">Contact Us</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="" 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">
        <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">
        <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">
        <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">
        <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>