{% extends 'website/base/base.html' %}
{% block title %} Learning Management System {% endblock %}
{% block meta_description %}Built to scale, customizable, and powered by advanced features like DRM protection, live streaming, and progress tracking{% endblock %}

{% block stylesheets %}




<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/service.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/process.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/pricing.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/contact.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">


<style>
        body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
        }
        .video-resize {
        width: 100%;  /* Full width */
        height: 600px; /* Adjust the height as needed */
        object-fit: cover; /* Ensures the video fills the area without distortion */
    }


    .features-section {
    padding: 50px 0;
}

.feature-block {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.feature-block img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.feature-block span {
    font-size: 16px;
    color: #ffffff;
    text-align: justify;
}

.col-lg-6 {
    display: flex;
    flex-direction: column;
}
</style>


{% endblock stylesheets %}

{% block content %}





        <section  class="banner-style-two banner-style-five p_relative pt_200">
            
            <div class="auto-container">
                <div class="row align-items-center"> 
                    <div class="col-lg-6 col-md-12 col-sm-12 video-column">
                        <div class="video-box">
                            <figure class="video">
                                <img src="../static/website/assets/images/lms-new-1.png" alt="Logo" width="70%" height="auto">
                            </figure>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                            <p style="font-size: 17px; text-align: justify;">
                               Our Learning Management System (LMS) is a modern, Python-based digital learning platform designed for organizations, institutes, academies, and training providers who want to create, deliver, and manage online courses with ease. This mobile-friendly LMS functions smoothly on both web and mobile devices, allowing learners to access training anytime, anywhere. Whether you're running employee training, skill development programs, certification courses, or virtual classrooms, this LMS brings everything under one unified platform. Built to scale, customizable, and powered by advanced features like DRM protection, live streaming, and progress tracking, our LMS ensures a secure, seamless, and interactive online learning experience.
                            </p> 
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>




        <section class="video-section p_relative pt_100">
            <div class="pattern-layer-2" style="background-image: url(../static/website/assets/images/shape/bg-03.png);"></div>
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="video-box">
                            <figure class="video">
                                <video class="video-resize" controls>
                                    <source src="../static/website/assets/images/digiinn-vid.mp4" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>








        <section class="banner-style-two banner-style-five p_relative pt_100 pb_100">
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                           <h3 style="font-size: 47px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
                                Why Choose Our LMS?
                            </h3>

                            <p style="font-size: 15px;">
                                Businesses today need a centralized training solution that can handle course creation, assessments, analytics, and learner engagement. Our LMS solves all major learning challenges by offering:
                            </p>

                            <ul style="font-size: 15px; line-height: 1.8; margin-left: 20px;">
                                <li>1. Mobile-Friendly Learning Experience – Study anytime, anywhere on any device</li>
                                <li>2. Top-Level Security with DRM – Protect digital content and course materials</li>
                                <li>3. Fully Customizable LMS – Tailored workflows for institutes, companies, and academies</li>
                                <li>4. Built-in Live Streaming Integration – Deliver real-time virtual classes</li>
                                <li>5. Actionable Insights & Analytics – Track learner performance and course ROI</li>
                                <li>6. Secure Payment Integrations – Smooth online fee processing for paid courses</li>
                            </ul>

                            <p style="font-size: 15px;">
                               Whether you're a corporate company, educational institute, or online coaching academy, this LMS helps you deliver high-quality digital learning programs at scale.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="image-box">
                            <figure>
                                <!-- Replace with your desired image URL -->
                                <img src="../static/website/assets/images/lms-new-2.png" alt="Service Image" width="100%" height="auto">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>









       <section class="features-section">
  <div class="auto-container">
    <!-- Row 1 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">User Management</h5>
              <p>
                Manage admins, instructors, students, and roles with personalized permissions.
              </p>
            </span>
          </div>

          
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Course Management</h5>
              <p>
              </p>
              Create, upload, schedule, and organize courses with videos, PDFs, quizzes, and assignments.
            </span>
          </div>

          
        </div>
      </div>
    </div>


    <!-- Row 3 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
         <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">DRM (Digital Rights Management)</h5>
              <p>
                Protect training materials, videos, and documents from unauthorized access or downloads.
              </p>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Quiz & Assessment Module</h5>
              <p>
                Create quizzes, MCQs, timed exams, and online tests with auto-grading.
              </p>
            </span>
          </div>
        </div>
      </div>
    </div>



    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
         <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Payment Integration</h5>
              <p>
                Accept secure online payments for premium courses, subscriptions, or training programs.
              </p>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Progress Tracking</h5>
              <p>
                Monitor learner engagement, course completion rates, and training performance.
              </p>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Certifications Module</h5>
              <p>
                Automatically generate branded digital certificates for completed courses.
              </p>
            </span>
          </div>

          
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Security Module</h5>
              <p>
                Role-based access, secure login, encryption, and anti-piracy technologies.
              </p>
            </span>
          </div>

         
        </div>
      </div>
    </div>

    <!-- Row 3 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Customizable Dashboard</h5>
              <p>
                View key KPIs: active learners, revenue, course status, and training analytics.
              </p>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Live Streaming Integration</h5>
              <p>
              </p>
              Host virtual classes, webinars, and instructor-led sessions in real time.
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ✅ CSS Styling -->
<style>
  .feature-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
  }

  .feature-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
  }

  .feature-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
  }

  .feature-block img {
    width: 55px;
    height: 55px;
    margin-right: 15px;
    filter: brightness(0) invert(1);
  }

  .feature-block h5 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #fff;
  }

  .feature-block p {
    font-size: 14px;
    color: #ddd;
    margin: 0;
    line-height: 1.6;
  }

  .row {
    align-items: stretch;
  }

  .feature-box {
    height: 100%;
  }

  @media (max-width: 991px) {
    .feature-block {
      flex-direction: column;
      align-items: flex-start;
    }

    .feature-block img {
      margin-bottom: 10px;
    }
  }
</style>










<section class="faq-section p_relative pb_100">
  <div class="auto-container">
    <div class="text-center mb-5">
      
      <h3 style="font-size: 47px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
        Frequently Asked Questions
      </h3>
      <p style="color: #bbb; font-size: 16px; max-width: 700px; margin: 10px auto 0;">
        Everything you need to know about our LMS — from setup to management.
      </p>
    </div>

    <div class="faq-container">
      <!-- FAQ Item 1 -->
      <div class="faq-item">
        <button class="faq-question">
          Q1: What is an LMS used for?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>An LMS is used to create, deliver, manage, and track online courses, training programs, and certifications.</p>
        </div>
      </div>

      <!-- FAQ Item 2 -->
      <div class="faq-item">
        <button class="faq-question">
          Q2: Can I customize this LMS?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, it is a fully customizable LMS that can be modified based on your business or academic needs.</p>
        </div>
      </div>

      <!-- FAQ Item 3 -->
      <div class="faq-item">
        <button class="faq-question">
          Q3:  Is the LMS mobile-friendly?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Absolutely it is a mobile-responsive learning platform optimized for Android and iOS devices.</p>
        </div>
      </div>

      <!-- FAQ Item 4 -->
      <div class="faq-item">
        <button class="faq-question">
          Q4: Does it support live online classes?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, the LMS includes live streaming integration for virtual classrooms and webinars.</p>
        </div>
      </div>

      <!-- FAQ Item 5 -->
      <div class="faq-item">
        <button class="faq-question">
          Q5: Can I protect my course videos and PDFs?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, with built-in DRM and security features, your content stays safe.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ✅ CSS -->
<style>
  .faq-container {
    max-width: 900px;
    margin: 0 auto;
  }

  .faq-item {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .faq-question {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    padding: 18px 20px;
    color: white;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
  }

  .faq-question .arrow {
    position: absolute;
    right: 20px;
    top: 18px;
    font-size: 20px;
    transition: transform 0.3s;
  }

  .faq-item.active .faq-question .arrow {
    transform: rotate(45deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
  }

  .faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: 15px;
  }

  .faq-answer p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }

  .faq-question:hover {
    background: rgba(255,255,255,0.05);
  }
</style>

<!-- ✅ JavaScript -->
<script>
  const faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    question.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  });
</script>









         <!-- contact-section -->
         <section class="contact-section p_relative pb_150">
            <div class="auto-container">
                <div class="sec-title mb_60 centred light">
                    <h2>Get Access Now</h2>
                </div>
                <div class="form-inner">
                    <form id="contact-form">
                        {% csrf_token %}
                        
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="username" placeholder="Your Name" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="company_name" placeholder="Your Company Name" required>
                            </div>
                        </div>                       
                    
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="email" class="form-control" name="email" placeholder="Your Email" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="contact_no" placeholder="Your Contact Number" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <textarea class="form-control" name="message" placeholder="Type your message or description" rows="4"></textarea>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn mr-0 Right pt_20 text-center">
                                <button style="border: none;" class="theme-btn btn-two btn btn-primary w-100" type="submit">
                                    <span>Send Message</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Success Message -->
                    <div id="success-message" style="display: none; color: green; text-align: center; margin-top: 10px;">
                        Your message has been sent successfully!
                    </div>
                    
                    <script>
                        document.getElementById("contact-form").addEventListener("submit", function(event) {
                            event.preventDefault();  // Prevent normal form submission
                            
                            let formData = new FormData(this);
                            
                            fetch("{% url 'submit_lead' %}", {
                                method: "POST",
                                body: formData,
                                headers: {
                                    "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    document.getElementById("success-message").style.display = "block";
                                    document.getElementById("contact-form").reset();
                                } else {
                                    alert("Something went wrong. Please try again.");
                                }
                            })
                            .catch(error => console.error("Error:", error));
                        });
                    </script>
                </div>
            </div>
        </section>
        <!-- contact-section end -->






       


      

       


      


       

        {% block javascripts %}


    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>
    <script src="../static/website/assets/js/validation.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}