{% extends 'frontend/base.html' %}

{% load static %}
{% block content %}

<!-- Hero Section Start -->
<section class="hero-wrapper hero-1 mx-xl-5">
  <div class="shape">
    <img class="shape-1" src="{% static 'frontend/images/world.png' %}" alt="" />
  </div>
  <div class="hero-bg bg-cover"
    style="background-image: url(&quot;{% static 'frontend/images/hero-1-1-bg.png' %}&quot;)"></div>
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-12 col-12">
        <div class="hero-content pe-xl-3 text-lg-start text-center tp-play-up">
          <h1>
            Empowering Wayanad,Building
            <span class="mainheadspan">Brighter Tomorrow</span>
          </h1>
          <p>
            In-demand courses. Practical learning. Real opportunities.Your
            future starts in Wayanad.
          </p>
          <div class="hero-button mt-4">
            <a href="{% url 'courses' %}" class="theme-btn">Discover Courses</a>
          </div>
          <div class="feedback d-flex mt-xl-5">
            <div class="infu">
              <img src="{% static 'frontend/images/google.png' %}" alt="" />
              <p><span>5.0</span> From 799+ reviews</p>
            </div>
            <!-- <div class="infu">
                    <i class="fa-solid fa-briefcase text-white"></i>
                    <p><span>99%</span> Placement Success</p>
                  </div> -->
          </div>
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-12 col-12 wow fadeInUp" data-wow-delay="300ms">
        <div class="hero-image">
          <img style="border-radius: 30px" src="{% static 'frontend/images/students/manublue.png' %}" alt="" />
        </div>
      </div>
    </div>
  </div>
</section>

<!-- features Section Start -->
<section class="features-wrapper features-1">
  <div class="container">
    <div class="row">
      <div class="col-xl-3 col-lg-6 col-md-6 col-12 wow fadeInUp" data-wow-delay="200ms">
        <div class="single-feature-item">
          <div class="icon">
            <i class="flaticon-graphic-design"></i>
          </div>

          <h4>
            <a href="{% url 'designing' %}">AI Integrated Creative Graphics</a>
          </h4>
          <p>
            Learn creative design with industry-standard tools and build a
            strong portfolio.
          </p>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-12 wow fadeInUp" data-wow-delay="400ms">
        <div class="single-feature-item">
          <div class="icon">
            <i class="fa-solid fa-bullhorn"></i>
          </div>
          <h4>
            <a href="{% url 'marketting' %}">AI Integrated Digital Marketing</a>
          </h4>
          <p>
            Master digital marketing skills with hands-on training for
            career growth.
          </p>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-12 wow fadeInUp" data-wow-delay="600ms">
        <div class="single-feature-item">
          <div class="icon">
            <i class="flaticon-web-development"></i>
          </div>

          <h4>
            <a href="{% url 'full_stack' %}">Web <br />
              Development</a>
          </h4>
          <p>
            Build responsive websites with modern web development skills.
          </p>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-12 wow fadeInUp" data-wow-delay="800ms">
        <div class="single-feature-item">
          <div class="icon">
            <i class="flaticon-cms"></i>
          </div>
          <h4>
            <a href="{% url 'video' %}">Advance Videography & Editing</a>
          </h4>
          <p>
            Learn videography and editing to create engaging brand
            content.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- About Section Start -->
<section class="about-wrapper about-1 section-padding">
  <div class="container">
    <div class="row g-5">
      <div class="col-xl-7 col-lg-12 col-md-12 col-12 wow fadeInLeft" data-wow-delay="300ms">
        <div class="about-images">
          <div class="image-1">
            <img src="{% static 'frontend/images/gallery/nan.png' %}" alt="img" />
          </div>
          <div class="image-2">
            <img src="{% static 'frontend/images/events/internship.jpeg' %}" alt="img" />
          </div>
        </div>
      </div>
      <div class="col-xl-5 col-lg-12 col-md-12 col-12 wow fadeInRight" data-wow-delay="300ms">
        <div class="about-content mt-4 ms-xxl-4">
          <div class="section-title">
            <div class="sub-title"><span>ABOUT US</span></div>
            <h2 class="split-text right text-start">
              Solutions That Evolve with Your Career
            </h2>
          </div>
          <p>
            Xen Education: Forging a new era of talent and expertise with
            certified courses in Wayanad! A team of experienced founders
            from Xeventure IT Solutions introduced Xen Education with an
            ambitious mission to cultivate a generation of highly trained
            individuals. We offer comprehensive courses in creative
            designing, digital marketing, and web development in Wayanad,
            equipping students with the skills and knowledge to excel in
            the ever-evolving digital landscape. Xen Education is also the
            only institute in Wayanad certified by the STED Council
            (Scientific & Technical Education Development Council),
            further enhancing the credibility and national recognition of
            our training programs. Unlock your potential and build a
            brighter future with our certified courses in Wayanad.
          </p>
          <ul>
            <li>
              <i class="fas fa-check-circle"></i>
              Website & Web Application Development, AI-powered Digital
              Marketing, and Creative Graphic Designing with advanced
              AI-integrated branding, visuals, and growth strategies
            </li>
          </ul>

          <div class="about-infu">
            <a href="{% url 'about' %}" class="theme-btn black-btn">
              More About Us
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- course Section Start -->
<section class="service-wrapper service-1 section-bg section-padding">
  <div class="shapes">
    <img class="shape-1" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
    <img class="shape-2" src="{% static 'frontend/images/world.png' %}" alt="" />
  </div>

  <div class="container">
    <div class="service-inner">
      <div class="row">
        <div class="col-xl-7 col-lg-6 col-md-12 col-12 wow fadeInLeft" data-wow-delay="300ms">
          <div class="countbox">
            <h3><span class="count">10</span>+</h3>
            <p>Professional Courses</p>
          </div>

          <div class="section-title mt-4">
            <h2 class="split-text left">
              Empowering Future Creators <br />
              Through Technology & Creativity
            </h2>
          </div>
        </div>

        <div class="col-xl-5 col-lg-6 col-md-12 col-12 wow fadeInRight" data-wow-delay="300ms">
          <div class="title">
            <h3>
              Xen Education provides industry-focused training programs
              with internship support, live projects, AI-powered learning,
              and career guidance to help students build successful
              futures.
            </h3>
          </div>

          <div class="progress-items">
            <div class="progress">
              <div class="progress-value count-bar" data-percent="95%"></div>
            </div>

            <div class="point">
              <p>Student Satisfaction</p>
              <span>95%</span>
            </div>
          </div>

          <div class="progress-items">
            <div class="progress">
              <div class="progress-value count-bar" data-percent="90%"></div>
            </div>

            <div class="point">
              <p>Placement Assistance</p>
              <span>90%</span>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-4">
        <!-- Card graphics -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="200ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/creativegraphics.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="flaticon-graphic-design"></i>
              </div>

              <h4>
                <a href="{% url 'designing' %}">
                  AI Powered Creative Graphics
                </a>
              </h4>

              <p>
                Learn graphic design, branding, AI creative tools, poster
                designing, and visual content creation through real-world
                projects.
              </p>
            </div>
          </div>
        </div>
        <!-- Card digital -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="200ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/digital.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="fas fa-bullhorn"></i>
              </div>

              <h4>
                <a href="{% url 'marketting' %}">
                  AI Powered Digital Marketing
                </a>
              </h4>

              <p>
                Learn SEO, Meta Ads, Google Ads, content creation,
                branding, and AI marketing tools through practical
                projects.
              </p>
            </div>
          </div>
        </div>
        <!-- Card uiux -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="400ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/creativegraphics.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="fas fa-code"></i>
              </div>

              <h4>
                <a href="{% url 'uiux' %}">
                  UI/UX Designing & Development
                </a>
              </h4>

              <p>
                Learn modern UI/UX design, responsive web development,
                prototyping, and user-focused digital experiences through
                live projects.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-4">
        <!-- Card python -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="600ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/py.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="fab fa-python"></i>
              </div>

              <h4>
                <a href="{% url 'python' %}"> Python Development </a>
              </h4>

              <p>
                Learn Python programming, web development, automation,
                APIs, and real-world application development through
                practical projects.
              </p>
            </div>
          </div>
        </div>

        <!-- Card   node -->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="400ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/py2.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="fab fa-node-js"></i>
              </div>

              <h4>
                <a href="{% url 'node' %}"> Node js Development </a>
              </h4>

              <p>
                Learn Node.js development, backend programming, APIs,
                databases, and server-side application development through
                real-world projects.
              </p>
            </div>
          </div>
        </div>

        <!-- Card 3  full stack-->
        <div class="col-xl-4 col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="600ms">
          <div class="single-service-item">
            <div class="shape">
              <img class="shape-3" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
              <img class="shape-4" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
            </div>

            <div class="image">
              <img src="{% static 'frontend/images/courses/full.png' %}" alt="" />
            </div>

            <div class="content">
              <div class="icon">
                <i class="fas fa-laptop-code"></i>
              </div>

              <h4>
                <a href="{% url 'full_stack' %}"> Full Stack Development </a>
              </h4>

              <p>
                Learn Full Stack Development with Python, Node.js,
                databases, APIs, and modern frontend technologies through
                real-world projects.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="about-wrapper about-2 mx-xl-5 section-padding pt-0">
      <div class="bg-image bg-cover" style="background-image: url({% static 'frontend/images/01-bg.png' %})"></div>
      <div class="container">
        <div class="about-content wow fadeInUp" data-wow-delay="300ms">
          <p class="text-center">
            Explore our courses and discover the skills, tools, and career
            opportunities <br />
            that shape your future in the digital world.
          </p>
          <div class="infu text-center d-flex align-items-center justify-content-center">
            <a href="{% url 'courses' %}" class="theme-btn">EXPLORE COURSES</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Choose-us STED CERTIFIED Section Start -->
<section class="choose-us-wrapper choose-us-1 section-padding pb-xl-0">
  <div class="shape-mockup about-shape movingX">
    <img src="{% static 'frontend/images/students/xen-jaseem.png' %}" width="500" class="img-fluid" alt="shape" />
  </div>
  <div class="shape">
    <img src="{% static 'frontend/images/world.png' %}" alt="" />
  </div>

  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-12 col-md-12">
        <div class="choose-us-images wow fadeInLeft" data-wow-delay="300ms">
          <img src="{% static 'frontend/images/sted2.png' %}" alt="" />

          <div class="shape-img">
            <img src="{% static 'frontend/images/shape-2_1.png' %}" alt="" />
          </div>
        </div>
      </div>

      <div class="col-xl-6 col-lg-8 col-md-12 mt-5 pt-4 wow fadeInRight" data-wow-delay="300ms">
        <div class="choose-us-content ms-xl-4 ps-xl-1">
          <div class="section-title">
            <div class="sub-title">
              <span>WHY CHOOSE XEN EDUCATION</span>
            </div>

            <h2 class="split-text right">
              STED Certified Training for Future Professionals
            </h2>
          </div>

          <p class="mt-4 pe-xl-5 me-xl-3 text-center text-md-start">
            Xen Education offers <b>STED certified </b> courses focused on
            practical learning, live projects, internship support, and
            career-oriented training in technology and creative
            industries.
          </p>
          <div class="icon-box d-flex mt-4 pt-3 text-center text-md-start">
            <div class="single-icon-box">
              <div class="icon">
                <i class="fas fa-certificate"></i>
              </div>

              <h4>STED Certified Courses</h4>

              <p>
                Industry-recognized programs designed for career growth
                and professional development.
              </p>
            </div>

            <div class="single-icon-box">
              <div class="icon">
                <i class="fas fa-user-graduate"></i>
              </div>

              <h4>Expert Training</h4>

              <p>
                Learn from experienced mentors with real-world project
                exposure and practical sessions.
              </p>
            </div>
          </div>

          <div class="count-box">
            <div class="single-count">
              <h2><span class="count">95</span>%</h2>
              <p>Student Satisfaction</p>
            </div>

            <div class="single-count">
              <h2><span class="count">500</span>+</h2>
              <p>Students Trained</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- partner Section Start -->
<section class="brand-wrapper brand-1 section-bg section-padding">
  <div class="container">
    <div class="brand-inner text-center text-lg-start">
      <h3>Our Partners</h3>
      <div class="swiper brand-slider mt-4 pt-3">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/coding.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/xenaimedia.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/xeventure_logo.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/coding.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/w-01.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/xenproperties.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/xenaimedia.png' %}" alt="" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="brand-logo">
              <img src="{% static 'frontend/images/partners/xeventure_logo.png' %}" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Team Section Start -->
<section class="team-wrapper team-1 section-padding">
  <div class="shape-1">
    <img src="{% static 'frontend/images/shape-15.png' %}" alt="" />
  </div>
  <div class="container">
    <div class="section-title text-center">
      <div class="sub-title"><span>OUR TEAM MEMBER</span></div>
      <h2 class="split-text left">Meet with Our Expert</h2>
    </div>
    <p class="text-center">
      Accelerate innovation with Best teams We’ll match you
      <br />
      to an entire remote team of incredible freelance.
    </p>
    <div class="row">
      <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="200ms">
        <div class="single-team-item">
          <div class="shape">
            <img class="shape-2" src="{% static 'frontend/images/shape-1_1.png' %}" alt="" />
            <img class="shape-3" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
          </div>
          <div class="team-image">
            <div class="image">
              <img src="{% static 'frontend/images/gallery/G4.JPG' %}" alt="team-img" />
            </div>
            <div class="social-icon">
              <a href="https://www.facebook.com/xeneducationbathery"><i class="fab fa-facebook-f"></i></a>
              <a href="https://x.com/Xen_education"><i class="fab fa-twitter"></i></a>
              <a href="https://www.youtube.com/@xeneducation"><i class="fab fa-youtube"></i></a>
              <a href="https://www.linkedin.com/company/xen-education/"><i class="fab fa-linkedin-in"></i></a>
              <a href="https://www.instagram.com/xeneducation/"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="content text-center pt-3">
            <p>CEO / Co-Partner</p>
            <h3>
              <a href="#">Eldho Raju</a>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="400ms">
        <div class="single-team-item">
          <div class="shape">
            <img class="shape-2" src="{% static 'frontend/images/shape-1_1.png' %}" alt="" />
            <img class="shape-3" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
          </div>
          <div class="team-image">
            <div class="image">
              <img src="{% static 'frontend/images/gallery/amal.jpeg' %}" alt="team-img" />
            </div>
            <div class="social-icon">
              <a href="https://www.facebook.com/xeneducationbathery"><i class="fab fa-facebook-f"></i></a>
              <a href="https://x.com/Xen_education"><i class="fab fa-twitter"></i></a>
              <a href="https://www.youtube.com/@xeneducation"><i class="fab fa-youtube"></i></a>
              <a href="https://www.linkedin.com/company/xen-education/"><i class="fab fa-linkedin-in"></i></a>
              <a href="https://www.instagram.com/xeneducation/"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="content text-center pt-3">
            <p>Digital Marketing Head</p>
            <h3>
              <a href="#">Amal Jose T</a>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="600ms">
        <div class="single-team-item">
          <div class="shape">
            <img class="shape-2" src="{% static 'frontend/images/shape-1_1.png' %}" alt="" />
            <img class="shape-3" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
          </div>
          <div class="team-image">
            <div class="image">
              <img src="{% static 'frontend/images/gallery/fariz.jpeg' %}" alt="team-img" />
            </div>
            <div class="social-icon">
              <a href="https://www.facebook.com/xeneducationbathery"><i class="fab fa-facebook-f"></i></a>
              <a href="https://x.com/Xen_education"><i class="fab fa-twitter"></i></a>
              <a href="https://www.youtube.com/@xeneducation"><i class="fab fa-youtube"></i></a>
              <a href="https://www.linkedin.com/company/xen-education/"><i class="fab fa-linkedin-in"></i></a>
              <a href="https://www.instagram.com/xeneducation/"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="content text-center pt-3">
            <p>Creative Graphics Head</p>
            <h3>
              <a href="#"> Faris </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="800ms">
        <div class="single-team-item">
          <div class="shape">
            <img class="shape-2" src="{% static 'frontend/images/shape-1_1.png' %}" alt="" />
            <img class="shape-3" src="{% static 'frontend/images/shape-2.png' %}" alt="" />
          </div>
          <div class="team-image">
            <div class="image">
              <img src="{% static 'frontend/images/gallery/sruthi.png' %}" alt="team-img" />
            </div>
            <div class="social-icon">
              <a href="https://www.facebook.com/xeneducationbathery"><i class="fab fa-facebook-f"></i></a>
              <a href="https://x.com/Xen_education"><i class="fab fa-twitter"></i></a>
              <a href="https://www.youtube.com/@xeneducation"><i class="fab fa-youtube"></i></a>
              <a href="https://www.linkedin.com/company/xen-education/"><i class="fab fa-linkedin-in"></i></a>
              <a href="https://www.instagram.com/xeneducation/"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="content text-center pt-3">
            <p>Development Head</p>
            <h3>
              <a href="#"> Sruthi C S </a>
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- gallery Section Start -->
<section class="case-study-wrapper case-study-1 section-bg section-padding">
  <div class="shape">
    <img class="shape-1" src="{% static 'frontend/images/shape-6.png' %}" alt="" />
  </div>
  <div class="container">
    <div class="section-title-area">
      <div class="section-title">
        <div class="sub-title"><span>Gallery</span></div>
        <h2 class="split-text left">
          Moments & Memories of Xen Education
        </h2>
      </div>
    </div>
  </div>
  <div class="case-study-inner mt-5">
    <div class="swiper caseStudy">
      <div class="swiper-wrapper">

        {% for item in galleries %}
        <div class="swiper-slide">

          <div class="single-case-item wow fadeInUp">

            <div class="image" style="height:500px;">

              <img src="{{ item.image.url }}" alt="{{ item.title }}" style="width:100%; height:100%; object-fit:cover;">

            </div>

            <div class="content d-flex align-items-center justify-content-between">

              <div class="title">
                <span>Gallery</span>

                <h4>
                  <a href="#">
                    {{ item.title }}
                  </a>
                </h4>
              </div>

              <a href="#" class="icon">
                <i class="far fa-long-arrow-right"></i>
              </a>

            </div>

          </div>

        </div>
        {% endfor %}

      </div>

      <div class="swiper-dot mt-5 pt-5 border-style center">
        <div class="dot"></div>
      </div>
    </div>
      
            
             
  </div>
</section>

<!-- Testimonial Section Start -->
<section class="testimonial-wrapper testimonial-1 section-padding pb-0">
  <div class="shape">
    <img class="shape-1" src="{% static 'frontend/images/shape-13.png' %}" alt="" />
    <img class="shape-2" src="{% static 'frontend/images/shape-14.png' %}" alt="" />
  </div>
  <div class="container">
    <div class="section-title text-center">
      <div class="sub-title"><span>OUR TESTIMONIAL</span></div>
      <h2 class="split-text left">What our Student Say</h2>
      <p>
        Hear from our students as they share their learning journey,
        <br />creative experiences, career growth, and success stories at
        Xen Education.
      </p>
    </div>
    <div class="testimonial-inner overflow-hidden">
      <div class="swiper testimonial-slide">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="signle-testimonial-item d-flex">
              <img src="{% static 'frontend/images/testi.avif' %}" alt="" />
              <div class="content">
                <div class="star text-center text-md-start">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
                <p>
                  I had a great learning journey at Xen Education. The
                  UI/UX Development course was very well structured, and
                  the trainers were supportive throughout. After
                  completing the course, I also got the opportunity to do
                  an internship provided by Xen Education, which gave me
                  real industry experience. Today, I’m successfully
                  placed, and I’m truly thankful to Xen Education for
                  shaping my career.
                </p>
                <div class="clints-infu pt-4 pt-xxl-5 text-center text-md-start">
                  <h5>JASEEM K S</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="signle-testimonial-item d-flex">
              <img src="{% static 'frontend/images/testi.avif' %}" alt="" />
              <div class="content">
                <div class="star text-center text-md-start">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
                <p>
                  Career change is never easy, but my journey with Xen
                  Education made me realize it’s not rocket science. As a
                  UI/UX Development student, I received the right guidance
                  and practical training. Today, I’ve successfully
                  transitioned into my new role as a Frontend Developer at
                  Xeventure IT Solutions. Thanks to Xen Education, my
                  career is now on the right path and truly settled.
                </p>
                <div class="clints-infu pt-4 pt-lg-5 text-center text-md-start">
                  <h5>THEERTHA BIJU</h5>
                  <span>Frontend Developer @ xeventure</span>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="signle-testimonial-item d-flex">
              <img src="{% static 'frontend/images/testi.avif' %}" alt="" />
              <div class="content">
                <div class="star text-center text-md-start">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
                <p>
                  The Full Stack Development course was really helpful.
                  The faculties are friendly and explain things in a very
                  easy-to-understand way. The projects were practical and
                  gave me the confidence to build realtime websites.
                </p>
                <div class="clints-infu pt-4 pt-lg-5 text-center text-md-start">
                  <h5>Amal</h5>
                  <span> </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="array-button">
          <button class="array-prev">
            <i class="fas fa-long-arrow-left"></i>
          </button>
          <button class="array-next">
            <i class="fas fa-long-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Process Section Start -->
<section class="process-wrapper process-1 section-padding bg-cover"
  style="background-image: url({% static 'frontend/images/processbg.jpg' %})">
  <div class="shape">
    <img class="shape-1" src="{% static 'frontend/images/shape-1_1.png' %}" alt="" />
    <img class="shape-2" src="{% static 'frontend/images/shape-2_2.png' %}" alt="" />
    <img class="shape-3" src="{% static 'frontend/images/shape-3.png' %}" alt="" />
    <img class="shape-4 d-none d-xxl-block" src="{% static 'frontend/images/shape-4.png' %}" alt="" />
    <img class="shape-5 d-none d-xxl-block" src="{% static 'frontend/images/shape-5.png' %}" alt="" />
  </div>
  <div class="container">
    <div class="section-title text-center">
      <div class="sub-title sub-title2">
        <span class="text-white">WORKING PROCESS</span>
      </div>
      <h2 class="text-white split-text left">
        Get your Career Solution in 3 <br />
        Easy Steps
      </h2>
    </div>
    <div class="process-items d-grid justify-content-between">
      <div class="single-process-item text-center mt-xxl-5 pt-xxl-4 wow fadeInUp" data-wow-delay="200ms">
        <div class="icon">01</div>
        <div class="image">
          <img src="{% static 'frontend/images/events/skill.jpeg' %}" alt="" />
        </div>
        <h4>Skill-Based Learning</h4>
        <p>
          Students receive industry-focused training with practical
          sessions, live projects, and modern digital tools.
        </p>
      </div>
      <div class="single-process-item text-center wow fadeInUp" data-wow-delay="400ms">
        <div class="icon">02</div>
        <div class="image">
          <img src="{% static 'frontend/images/events/stedcert.JPG' %}" alt="" />
        </div>
        <h4>STED Certified Programs</h4>
        <p>
          Xen Education provides STED certified courses that enhance
          professional credibility and career opportunities.
        </p>
      </div>
      <div class="single-process-item text-center mt-xxl-5 pt-xxl-4 wow fadeInUp" data-wow-delay="600ms">
        <div class="icon">03</div>
        <div class="image">
          <img src="{% static 'frontend/images/events/int.jpeg' %}" alt="" />
        </div>
        <h4>Internship & Placement Support</h4>
        <p>
          Students gain real-world experience through internships,
          portfolio building, and placement assistance.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- group photo Section Start -->
<div class="video-wrapper video-1">
  <div class="container">
    <div class="video-image bg-cover wow fadeInUp" data-wow-delay="300ms"
      style="background-image: url({% static 'frontend/images/events/convtngrp.jpg' %})">
      <a href="#" class=""> </a>
    </div>
  </div>
</div>



<!-- Blog Section Start -->
<<section class="blog-wrapper blog-1 section-padding section-bg">
  <div class="shape">
    <img class="shape-1" src="{% static 'frontend/images/shape-5-black.png' %}" alt="" />
    <img class="shape-2" src="{% static 'frontend/images/shape-1_2.png' %}" alt="" />
  </div>
  <div class="container">
    <div class="section-title text-center">
      <div class="sub-title"><span>OUR BLOG</span></div>
      <h2>Our Latest Blogs</h2>
    </div>
    <p class="text-center mt-3">
      Accelerate innovation with world-class tech teams We'll match
      you to an entire remote team of incredible
    </p>
    <div class="blog-inner">
      <div class="row">

        {% for blog in blogs %}
        <div class="col-xl-4 col-lg-6 col-md-12 wow fadeInUp">
          <div class="single-blog-item">
            <div class="image">
              {% if blog.image %}
              <img src="{{ blog.image.url }}" class="img-fluid" alt="{{ blog.blog_name }}" />
              <img src="{{ blog.image.url }}" class="img-fluid" alt="{{ blog.blog_name }}" />
              {% endif %}
            </div>
            <div class="content">
              <ul>
                <li>{{ blog.category }}</li>
                <li><i class="fas fa-circle"></i></li>
                <li>{{ blog.created_at|date:"F d, Y" }}</li>
              </ul>
              <h3>
                <a href="{% url 'blog_detail' blog.url %}">{{ blog.blog_name }}</a>
              </h3>
              <p>{{ blog.short_description|truncatechars:100 }}</p>
              <a href="{% url 'blog_detail' blog.url %}" class="link-btn">
                Read More <i class="far fa-long-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
        {% empty %}
        <div class="col-12 text-center">
          <p>No blogs available.</p>
        </div>
        {% endfor %}

        <div class="d-flex justify-content-center align-items-center">
          <a href="{% url 'blog' %}" class="theme-btn mt-4">More Blogs</a>
        </div>
      </div>
    </div>
  </div>
  </section>
  <!-- faq -->
  <section class="section-padding pb-0">
    <div class="section-title text-center">
      <div class="sub-title"><span>FAQ</span></div>
      <h2>
        Everything You Need <br />
        To Know
      </h2>
    </div>
    <p class="text-center mt-3">
      Find answers to the most common questions <br />
      about our courses, fees, and internships.
    </p>
    <div class="section-title text-center">
      <p></p>
    </div>
    <div class="faq-main">
      <!-- GROUP: Fees & Refunds -->
      <div class="faq-group" data-cat="fees">
        <div class="faq-group-label">Frequently Asked Questions</div>

        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">01</div>
              <h3>
                Can I get a refund if I change my mind after enrolling?
              </h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Enrollment at Xen Education is final. Because we maintain
                <strong>small batch sizes</strong> to ensure quality
                instruction, your seat is reserved specifically for you from
                the moment admission is confirmed.
              </p>
              <p>
                Therefore, we do not offer refunds once the admission
                process is complete. We encourage all prospective students
                to attend a free demo class before making any payment.
              </p>
            </div>
          </div>
        </div>

        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">02</div>
              <h3>
                What if I can't attend the batch I registered for due to an
                emergency?
              </h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                While we don't offer refunds, we genuinely care about our
                students' circumstances. If you face a genuine emergency,
                you may request to
                <strong>transfer your enrollment to the next available
                  batch</strong>, subject to management approval.
              </p>
              <p>
                Requests must be submitted in writing at least 7 days before
                the course start date. Contact us at
                <a href="mailto:admissions@xeneducation.in">admissions@xeneducation.in</a>
                to initiate the process.
              </p>
            </div>
          </div>
        </div>

        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">03</div>
              <h3>Is the registration fee also non-refundable?</h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Yes. The initial admission/registration fee is strictly
                non-refundable under any circumstances. This fee secures
                your seat in the batch and covers administrative costs.
              </p>
            </div>
          </div>
        </div>

        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">04</div>
              <h3>Is the internship included in the fee?</h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Yes, the fee covers your complete training and the 2-month
                internship program.
              </p>
            </div>
          </div>
        </div>
        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">05</div>
              <h3>Do you offer a demo class before I pay?</h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Yes! We want you to be 100% confident before committing. You
                can <a href="{% url 'contact' %}">Contact Us</a> to schedule a free
                demo session, or visit our centre in Sultan Bathery,
                Wayanad, to speak directly with our mentors before making
                any payment.
              </p>
              <div class="faq-chip">
                <i class="fa-solid fa-check"></i> Free demo available — no
                obligation
              </div>
            </div>
          </div>
        </div>
        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">06</div>
              <h3>Is the internship included in the course fee?</h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Yes, absolutely. The course fee covers your
                <strong>complete training plus the 2-month internship
                  programme</strong>. There are no hidden charges for the internship phase.
              </p>
              <div class="faq-chip">
                <i class="fa-solid fa-check"></i> Internship fully included
                in fee
              </div>
            </div>
          </div>
        </div>
        <div class="faq-item" onclick="toggle(this)">
          <div class="faq-question">
            <div class="faq-q-left">
              <div class="faq-num">07</div>
              <h3>Are the courses certified?</h3>
            </div>
            <div class="faq-chevron">
              <i class="fa-solid fa-chevron-down"></i>
            </div>
          </div>
          <div class="faq-answer">
            <div class="faq-answer-inner">
              <p>
                Yes. Xen Education is the
                <strong>only IT training institute in Wayanad certified by the
                  STED Council</strong>
                (Scientific &amp; Technical Education Development Council) —
                a national-level autonomous organisation. Your certificate
                carries genuine career value and is recognised across India.
              </p>
              <div class="faq-chip">
                <i class="fa-solid fa-award"></i> STED Council certified
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Cta Section Start -->
  <section class="cta-wrapper cta-1 mt-2 mb-5">
    <div class="container">
      <div class="cta-inner bg-cover wow fadeInUp" data-wow-delay="300ms">
        <div class="shape">
          <img class="shape-1" src="{% static 'frontend/images/cta-shape-1.png' %}" alt="" />
          <img class="shape-2" src="{% static 'frontend/images/world.png' %}" alt="" />
        </div>
        <div class="row align-items-center">
          <div class="col-xl-6 col-lg-6 col-12">
            <div class="section-title">
              <div class="sub-title sub-title2">
                <span class="text-white">START WITH US</span>
              </div>
              <h2 class="text-white">
                Take The First Step Toward Your Dream Career With <br />
                <b>XEN Education</b> Today!
              </h2>
            </div>
            <a href="{% url 'contact' %}" class="theme-btn mt-4">Get Started Now</a>
          </div>
          <div class="col-xl-6 col-lg-6 col-12">
            <div class="images" height="600px">
              <img src="{% static 'frontend/images/students/manuyellowbr.png' %}" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% endblock %}