
{% extends 'base.html' %}
{% load static %}
{% block headblock %}
<title>Creative Schools</title>
<meta name="description" content="Welcome to Creative Schools!" >

{% endblock %}
{% block content %}

<!-- hero intro start-->
    <section class="hero-intro"><img class="img-fluid img-src" src="{% static 'main/assets/images/herointro/1.webp' %}" alt="">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12 xl:col-span-7 lg:col-span-8 md:col-span-10">
                    <div class="hero-contain">
                        <div>
                            <h4 data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">Native Connect English Learning Program</h4>
                            <h2 data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">Your English Journey, Reinvented</h2>
                            <p data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">The Native Connect English Learning Program offers a revolutionary approach to mastering English by blending the best of online and in-person learning experiences. </p>
                            <ul class="btn-list" data-sal-delay="400" data-sal="slide-up" data-sal-duration="800">
                                <li><a class="btn btn-primary" href="courses.html">Register Now</a></li>
                                <li><a class="btn btn-white" href="courses.html">Start free trial</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- hero intro end-->
    <!-- about start-->
    <section class="about-us space-py-100">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12 lg:col-span-6">
                    <div class="aboutimg-wrapper">
                        <div class="grid grid-cols-12 cdx-gap">
                            <div class="col-span-12 sm:col-span-6" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/1.webp' %}" alt=""></div>
                            </div>
                            <div class="col-span-12 sm:col-span-6" data-sal-delay="200" data-sal="fade-in" data-sal-duration="800">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/2.webp' %}" alt=""></div>
                            </div>
                            <div class="col-span-12 sm:col-span-6" data-sal-delay="100" data-sal="fade-in" data-sal-duration="800">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/3.webp' %}" alt=""></div>
                            </div>
                            <div class="col-span-12 sm:col-span-6" data-sal-delay="200" data-sal="fade-in" data-sal-duration="800">
                                <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/about/4.webp' %}" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="about-contain">
                        <div>
                            <h4>Native Connect English Learning Program</h4>
                            <h2>Your English Journey, Reinvented</h2>
                            <p>The Native Connect English Learning Program offers a revolutionary approach to mastering English by blending the best of online and in-person learning experiences. Designed for learners of all levels, this program emphasizes real-world communication and fluency by connecting students with native English-speaking instructors. Whether you’re looking to build foundational skills or refine advanced fluency, our tailored curriculum ensures a personalized journey for every participant. The online component provides flexibility and accessibility through engaging video lessons, interactive exercises, and live virtual sessions, allowing learners to progress at their own pace from anywhere in the world.</p>
                            <p>With Native Connect, learners gain the confidence to communicate naturally in English, preparing them for global opportunities in education, business, and personal growth. Our program is more than just a course—it’s a gateway to becoming a confident, connected global citizen.</p><a class="btn btn-primary" href="about-us.html">Enroll Now         </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- about end-->
    <!-- category start-->
    <section class="category space-py-100">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>categories</h4>
                        <h2>Popular Categories</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="category-grid text-center">
                        <div class="img-wrap"><a href="courses.html"><img class="img-fluid" src="{% static 'main/assets/images/category/4.webp' %}" alt="category"></a></div>
                        <div class="category-detail">
                            <h4><a href="courses.html">Web Design</a></h4>
                            <p>7 Courses</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="category-grid text-center">
                        <div class="img-wrap"><a href="courses.html"><img class="img-fluid" src="{% static 'main/assets/images/category/1.webp' %}" alt="category"></a></div>
                        <div class="category-detail">
                            <h4><a href="courses.html">Development</a></h4>
                            <p>6 Courses</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="category-grid text-center">
                        <div class="img-wrap"><a href="courses.html"><img class="img-fluid" src="{% static 'main/assets/images/category/2.webp' %}" alt="category"></a></div>
                        <div class="category-detail">
                            <h4><a href="courses.html">Business</a></h4>
                            <p>8 Courses</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="400" data-sal="slide-up" data-sal-duration="800">
                    <div class="category-grid text-center">
                        <div class="img-wrap"><a href="courses.html"><img class="img-fluid" src="{% static 'main/assets/images/category/3.webp' %}" alt="category"></a></div>
                        <div class="category-detail">
                            <h4><a href="courses.html">Heath &amp; Fitness</a></h4>
                            <p>6 Courses</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-center"><a class="btn btn-primary" href="courses.html">all categories</a></div>
        </div>
    </section>
    <!-- category end-->
    <!-- course start-->
    <section class="bg-light space-py-100">
        <div class="container">
            <div class="grid">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>courses</h4>
                        <h2>Explore Popular Courses</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="100" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/1.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/1.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Ruth Edwards</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$150</del>$120</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">Learn Python: The Complete Python Programming Course</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(2 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>2h 45m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>120
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="200" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/2.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/2.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Zahra Sharif</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$180</del>$90</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">Photoshop Master Course: From Beginner to Photoshop Pro</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(4 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>3h 30m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>120
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="300" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/3.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/3.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Sarah Albert</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$120</del>$60</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">Data Science and Machine Learning Bootcamp</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(5 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>4h 05m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>60
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="100" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/4.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/4.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Raymond Gill</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$350</del>$280</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">User Experience (UX): The Ultimate Guide to Usability and UX</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(1 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>1h 15m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>80
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="200" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/5.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/5.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Cosmo Kito</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$90</del>$50</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">Become a Certified HTML, CSS, JavaScript Web Developer</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(2 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>3h 05m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>205
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="300" data-sal="fade-in" data-sal-duration="1000">
                    <div class="course-grid">
                        <div class="img-wrap"><a href="course-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/course/6.webp' %}" alt="course"></a></div>
                        <div class="course-detail">
                            <div class="detail-body">
                                <div class="profile-plan">
                                    <div class="teacher-profile"><img class="img-fluid" src="{% static 'main/assets/images/avtar/6.webp' %}" alt="">
                                        <div class="teacher-detail">
                                            <h6>Alena Jopsep</h6><span>Instructor</span>
                                        </div>
                                    </div><span class="course-price">
                          <del>$170</del>$105</span>
                                </div>
                                <h3 class="course-title"><a href="course-detail.html">Web Development: Become a Django developer</a></h3>
                                <div class="course-rating">
                                    <ul class="rating-list">
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul><span class="course-review">(3 review)</span>
                                </div>
                            </div>
                            <div class="course-footer">
                                <ul>
                                    <li><i class="bi bi-film"></i>Lessons</li>
                                    <li><i class="bi bi-clock"></i>2h 05m
                                    </li>
                                    <li><i class="bi bi-person-fill"></i>369
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-center"> <a class="btn btn-primary" href="courses.html">all courses</a></div>
        </div>
    </section>
    <!-- course end-->
    <!-- discount banner start-->
    <section class="discount-upcoming cdx-overlay space-py-100"><img class="img-fluid img-src" src="{% static 'main/assets/images/bg-banner/1.webp' %}" alt="">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 md:col-span-6" data-sal-delay="100" data-sal="slide-right" data-sal-duration="1000">
                    <div class="discount-wrap">
                        <div class="img-wrap"><img class="img-fluid w-100" src="{% static 'main/assets/images/discount-banner/1.webp' %}" alt=""></div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6" data-sal-delay="200" data-sal="slide-left" data-sal-duration="1000">
                    <div class="discount-detail">
                        <div>
                            <h4>ARE YOU READY FOR THIS OFFER</h4>
                            <h2>50% Offer For Very First 50 Student’s</h2>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing . Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
                            <div class="cdx-timer timer1">
                                <div class="timer-grid">
                                    <div>
                                        <div class="timer-count day">454</div>
                                        <div class="timer-title">days</div>
                                    </div>
                                </div>
                                <div class="timer-grid">
                                    <div>
                                        <div class="timer-count hour">03</div>
                                        <div class="timer-title">hours</div>
                                    </div>
                                </div>
                                <div class="timer-grid">
                                    <div>
                                        <div class="timer-count minute">12</div>
                                        <div class="timer-title">minutes</div>
                                    </div>
                                </div>
                                <div class="timer-grid">
                                    <div>
                                        <div class="timer-count second">54</div>
                                        <div class="timer-title">seconds </div>
                                    </div>
                                </div>
                            </div><a class="btn btn-white" href="courses.html">Enroll Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- discount banner end-->
    <!-- testimonial start-->
    <section class="space-py-100">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>testimonial</h4>
                        <h2>What Says Our Students</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="testi-grid">
                        <div class="media">
                            <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/1.webp' %}" alt=""></div>
                            <div class="media-body">
                                <h4>Zahra Sharif</h4>
                                <h6>Graphics Designer</h6>
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                        <ul class="rating-list">
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                        </ul>
                        <div class="testiquote"><i class="bi bi-quote"></i></div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="testi-grid">
                        <div class="media">
                            <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/2.webp' %}" alt=""></div>
                            <div class="media-body">
                                <h4>Omini Green</h4>
                                <h6>Web Designer</h6>
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                        <ul class="rating-list">
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                        </ul>
                        <div class="testiquote"><i class="bi bi-quote"></i></div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="testi-grid">
                        <div class="media">
                            <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/avtar/3.webp' %}" alt=""></div>
                            <div class="media-body">
                                <h4>Alena Jopsep</h4>
                                <h6>Web Developer</h6>
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis.</p>
                        <ul class="rating-list">
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                            <li><i class="bi bi-star-fill"></i></li>
                        </ul>
                        <div class="testiquote"><i class="bi bi-quote"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- testimonial end-->
    <!-- subscrib start-->
    <section class="newsletter-subscribe">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="newsletter-wrap cdx-overlay"><img class="img-fluid img-src" src="{% static 'main/assets/images/bg-banner/1.webp' %}" alt="">
                        <div class="grid grid-cols-12">
                            <div class="col-span-12 lg:col-span-6" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">
                                <h2>Subscribe Our Newsletter</h2>
                            </div>
                            <div class="col-span-12 lg:col-span-6" data-sal-delay="100" data-sal="slide-left" data-sal-duration="800">
                                <div class="subscribe-form">
                                    <form>
                                        <div class="input-group">
                                            <input class="form-control" type="email" placeholder="Your email address">
                                            <div class="input-group-text">
                                                <button class="btn btn-primary" type="submit">Subscribe Now</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- subscrib end-->
    <!-- why choose start-->
    <section class="why-choose space-py-100">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 md:col-span-6" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">
                    <div class="whychoose-grid">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/1.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Best Quality Courses</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6" data-sal-delay="200" data-sal="slide-left" data-sal-duration="800">
                    <div class="whychoose-grid">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/2.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Skilled Instructors</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">
                    <div class="whychoose-grid">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/3.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Any Time Access</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6" data-sal-delay="200" data-sal="slide-left" data-sal-duration="800">
                    <div class="whychoose-grid">
                        <div class="icon-wrap"><img class="img-fluid" src="{% static 'main/assets/images/why-choose/icons/4.webp' %}" alt="image"></div>
                        <div class="whychoose-detail">
                            <h3>Dedicated Support</h3>
                            <p>Eiusmod Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- why choose end  -->
    <!-- team start-->
    <section class="space-py-100 bg-light">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>Instructors</h4>
                        <h2>Our Skilled Instructors</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/1.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">David Wickman</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/2.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Marco  Tolliver</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/3.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Claude Remley</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-3 sm:col-span-6" data-sal-delay="400" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid">
                        <div class="img-wrap"><a href="instructor-profile.html"><img class="img-fluid" src="{% static 'main/assets/images/team/4.webp' %}" alt="image"></a>
                            <div class="social-link">
                                <ul>
                                    <li><a href="https://www.linkedin.com/"><i class="bi bi-linkedin"></i></a></li>
                                    <li><a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/"><i class="bi bi-instagram"></i></a></li>
                                    <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="team-detail">
                            <h4><a href="instructor-profile.html">Steven  Davis</a></h4>
                            <p>Instructor</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- team end-->
    <!-- instruction start-->
    <section class="space-py-100 bg-light">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 md:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid2">
                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/team/teaching.webp' %}" alt=""></div>
                        <div class="team-detail">
                            <h3>Become An Instructor</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p><a class="btn btn-primary btn-md" href="#">Start teaching today</a>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="team-grid2">
                        <div class="img-wrap"><img class="img-fluid" src="{% static 'main/assets/images/team/learning.webp' %}" alt=""></div>
                        <div class="team-detail">
                            <h3>Become A Student</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p><a class="btn btn-primary btn-md" href="#">Register for free</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- instruction end-->
    <!-- blog start-->
    <section class="space-py-100">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="title text-center">
                        <h4>Blog</h4>
                        <h2>Latest News</h2>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="blog-grid">
                        <div class="img-wrap"><a href="blog-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/blog/1.webp' %}" alt="blog"></a></div>
                        <div class="blog-detail">
                            <h3><a href="blog-detail.html">Scottish Creatives To Receive Funded Business.</a></h3>
                            <ul class="post-meta">
                                <li><a href="#"><i class="bi bi-person-fill"></i><span>Creative Schools</span></a></li>
                                <li><a href="#"><i class="bi bi-calendar-event"></i><span>19 Apr, 2022</span></a></li>
                            </ul>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet</p><a class="btn btn-primary btn-sm" href="blog-detail.html">read more</a>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="blog-grid">
                        <div class="img-wrap"><a href="blog-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/blog/2.webp' %}" alt="blog"></a></div>
                        <div class="blog-detail">
                            <h3><a href="blog-detail.html">Designing Better Link Web Site and Emailsite</a></h3>
                            <ul class="post-meta">
                                <li><a href="#"><i class="bi bi-person-fill"></i><span>Adel</span></a></li>
                                <li><a href="#"><i class="bi bi-calendar-event"></i><span>26 May, 2022</span></a></li>
                            </ul>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet</p><a class="btn btn-primary btn-sm" href="blog-detail.html">read more</a>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-4 md:col-span-6" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="blog-grid">
                        <div class="img-wrap"><a href="blog-detail.html"><img class="img-fluid" src="{% static 'main/assets/images/blog/3.webp' %}" alt="blog"></a></div>
                        <div class="blog-detail">
                            <h3><a href="blog-detail.html">Variables In The Hugo Seen Static Site Generator</a></h3>
                            <ul class="post-meta">
                                <li><a href="#"><i class="bi bi-person-fill"></i><span>Creative Schools</span></a></li>
                                <li><a href="#"><i class="bi bi-calendar-event"></i><span>05 Jul, 2022</span></a></li>
                            </ul>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet</p><a class="btn btn-primary btn-sm" href="blog-detail.html">read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- blog end-->
{% endblock %}