{% extends "base.html" %}
{% load static %}
{% block content %}

<section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary" data-overlay-dark="8" data-background="{% static 'img/banner/2.jpg' %}">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1> <span class="font-weight-800 text-primary">IOT Development</span></h1>
                <ul class="list-unstyled">
                    <li><a href="{% url 'home' %}">Home</a></li>
                    <li>IOT Development</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="line-animated">
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
    </div>
</section>


<!-- WEBSITE DEVELOPMENT
================================================== -->
<section>
    <div class="container">
        <div class="row mt-n1-9">

            <!-- service left -->
            <div class="col-lg-4 mt-1-9 order-2 order-lg-1">
                <div class="service-sidebar me-xxl-1-9">
                    <div class="mb-2-9 widget  bg-secondary">
                        <h5 class="mb-3 text-white">Our Services</h5>
                        <ul class="cetegory p-0 list-unstyled mb-0">
                            
                            <li class="mb-2"><a href="{% url 'web_development' %}">Website Development <i class="ti-angle-right"></i></a></li>
                            <li class="mb-2"><a href="{% url 'app_development' %}">App Development <i class="ti-angle-right"></i></a></li>
                            <li class="mb-2"><a href="{% url 'iot_development' %}">IOT Development <i class="ti-angle-right"></i></a></li>
                            <li class="mb-2"><a href="{% url 'ai_ml_development' %}">AI/ML Development <i class="ti-angle-right"></i></a></li>
                            
                            
                        </ul>
                    </div>
                    <div class="widget bg-secondary">
                        <h5 class="mb-3 text-white">Brochures</h5>
                        <div class="widget-body">
                            <ul class="widget-brochure">
                                <li>
                                    <a href="#" class="letter-spacing-1"><i class="far fa-file-pdf"></i>Download.pdf</a>
                                </li>
                                <li>
                                    <a href="#" class="letter-spacing-1"><i class="far fa-file-alt"></i>Download.txt</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="widget bg-secondary p-0">
                        <div class="banner-wrapper">
                            <img src="{% static 'img/service/small_img/16.png' %}" class="border-top-radius-10" alt="...">
                            <div class="p-2-2 pt-6 position-relative text-center">
                                
                                <div class="icon-boxs bg-primary">
                                    <i class="ti-headphone-alt fs-1 text-white"></i>
                                </div>

                                <h4 class="mb-3 text-white">How Can We Help?</h4>
                                <ul class="text-center list-unstyled mb-0">
                                    <li class="text-white mb-2"><i class="fa fa-phone small text-white me-2"></i><a href="#" class="text-white">9010632610</a></li>
                                    <li class="text-white"><i class="fa fa-envelope-open small text-white me-2"></i><a href="#" class="text-white">abcgopi123@gmail.com</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end service left -->

            <div class="col-lg-8 mt-1-9 order-1 order-lg-2">

                <!-- TOP MAIN IMAGE -->
                <div class="row">
                    <div class="col-12">
                        <div class="image-hover mb-2-6 wow fadeInUp" data-wow-delay="200ms">
                          <img src="{% static 'img/service/16.jpg' %}" 
                            style="max-height:360px; object-fit:cover;" 
                            alt="app development" 
                            class="border-radius-10 img-fluid w-100">

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

                <!-- PARAGRAPHS -->
                <div class="row">
                    <div class="col-12 mb-1-9">
                        <h4 class="display-6 font-weight-600 lh-1 pb-3 mb-2">
                            <span class="text-primary font-weight-800">IOT Development</span>
                        </h4>

                        <p class="mb-3 wow fadeInUp" data-wow-delay="200ms">
                            Our IoT development service focuses on creating smart, real-time connected systems that communicate
                            seamlessly through sensors, embedded devices, cloud platforms, and automation. We develop industry-grade
                            IoT solutions for academic, commercial, and industrial needs, including automation, monitoring, smart devices,
                            AI-based decision systems, and real-time data analytics. From prototype to final deployment, we cover hardware design, microcontroller programming, sensor integration,
                            software interface, cloud connectivity, mobile control apps, and testing.
                        </p>

                        
                    </div>
                </div>


            <div class="row align-items-center gx-4 wow fadeInUp" data-wow-delay="300ms">

                <!-- LEFT TEXT AREA -->
                <div class="col-md-7">

                    <h4 class="display-6 font-weight-600 lh-1 pb-3 mb-2">
                        <span class="text-primary font-weight-800">Services</span>
                    </h4>

                    <p class="w-95 mb-4">
                         Our focus is on real-time monitoring, smart control systems, 
                        automation, and machine-to-machine communication for academic, industrial, and commercial applications.
                    </p>

                    <!-- SERVICES GRID -->
                    <div class="row g-3 mt-3">

                        <div class="col-6">
                            <div class="d-flex align-items-center border border-color-light-black p-2">
                                <i class="fa-solid fa-circle-check display-26 text-primary"></i>
                                <span class="ms-2 text-secondary fw-bold">Smart Home Automation</span>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="d-flex align-items-center border border-color-light-black p-2">
                                <i class="fa-solid fa-circle-check display-26 text-primary"></i>
                                <span class="ms-2 text-secondary fw-bold">Industrial IoT Solutions</span>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="d-flex align-items-center border border-color-light-black p-2">
                                <i class="fa-solid fa-circle-check display-26 text-primary"></i>
                                <span class="ms-2 text-secondary fw-bold">Healthcare IoT Devices</span>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="d-flex align-items-center border border-color-light-black p-2">
                                <i class="fa-solid fa-circle-check display-26 text-primary"></i>
                                <span class="ms-2 text-secondary fw-bold">Smart Agriculture IoT</span>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- RIGHT IMAGE -->
                <div class="col-md-5 text-center wow fadeInUp" data-wow-delay="400ms">
                    <div class="image-hover mb-3" style="height:350px; overflow:hidden;">
                        <img src="{% static 'img/service/small_img/iot5.png' %}"
                            class="border-radius-10 img-fluid w-100"
                            style="height:100%; object-fit:cover;"
                            alt="iot development">
                    </div>
                </div>

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

{% endblock%}