{% extends 'base.html' %}

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


              <!-- Hero Section - Home Page -->
              <section id="hero" class="hero">
                  <!--<img src="{% static 'assets/img/hero-bg.jpg" alt="" data-aos="fade-in">-->
                  <video class="bg-image" alt="" data-aos="fade-in" autoplay muted id="myVideo" playsinline>
                      <source src="{% static 'assets/video/bg.mp4' %}" type="video/mp4">
                      <source src="{% static 'assets/video/bg.webm' %}" type="video/webm">
                      <source src="{% static 'assets/video/bg.ogg' %}" type="video/ogg">
                  </video>
              </section><!-- End Hero Section -->

              <!-- Clients Section - Home Page -->
              <section id="clients" class="clients">

                  <div class="container-fluid" data-aos="fade-up">

                      <div class="row gy-4">

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-1.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-2.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-3.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-4.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-5.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                          <div class="col-xl-2 col-md-3 col-6 client-logo">
                              <img src="{% static 'assets/img/clients/client-6.png' %}" class="img-fluid" alt="">
                          </div><!-- End Client Item -->

                      </div>

                  </div>

              </section><!-- End Clients Section -->
              <!-- About Section - Home Page -->
              <section id="about" class="about">

                  <div class="container" data-aos="fade-up" data-aos-delay="100">
                      <div class="row align-items-xl-center gy-5">

                          <div class="col-xl-5 content">
                              <h3>L'azienda</h3>
                              <h2>Il futuro a portata di click</h2>
                              <p>Binary Industrial Technology è un'azienda nata nel 2022 con l'obbiettivo di creare sistemi ibridi e digitali all'avanguardia. Attraverso lo studio dei processi produttivi possiamo sviluppare soluzioni su misura ad un costo accessibile anche dalle più piccole realtà aziendali, riuscendo a migliorare l'esperienza lavorativa generale. 
                              </p>
                              <!--<a href="#" class="read-more"><span>Altro</span><i class="bi bi-arrow-right"></i></a>-->
                          </div>

                          <div class="col-xl-7">
                              <div class="row gy-4 icon-boxes">

                                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                                      <div class="icon-box">
                                          <i class="bi bi-piggy-bank"></i>
                                          <h3>Controllo dei Costi</h3>
                                          <p>La creazione di sistemi informatici innovativi ad un costo accessibile per le piccole e medie imprese è il nostro pane quoditiano</p>
                                      </div>
                                  </div> <!-- End Icon Box -->

                                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
                                      <div class="icon-box">
                                          <i class="bi bi-clipboard-pulse"></i>
                                          <h3>Dati e Produttività</h3>
                                          <p>La raccolta dei Dati unita all'esperienza decennale ci permette di poter di individuare i punti deboli di ogni processo produttivo</p>
                                      </div>
                                  </div> <!-- End Icon Box -->

                                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                      <div class="icon-box">
                                          <i class="bi bi-cloud-fog2"></i>
                                          <h3>Connessi al mondo</h3>
                                          <p>Siamo in grado di progettare anche soluzioni in Cloud e mediante servizi hosting certificati possiamo garantire un livello di sicurezza elevato evitando l'acquisto di hardware costoso e poco accessibile</p>
                                      </div>
                                  </div> <!-- End Icon Box -->

                                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="500">
                                      <div class="icon-box">
                                          <i class="bi bi-graph-up-arrow"></i>
                                          <h3>Professionalità e Competenza</h3>
                                          <p>Il nostro compito è quello consigliare i clienti e accompagnarli nel passaggio a soluzioni innovaitve e di facile utilizzo</p>
                                      </div>
                                  </div> <!-- End Icon Box -->

                              </div>
                          </div>

                      </div>
                  </div>

              </section><!-- End About Section -->

              <!-- Stats Section - Home Page -->
              <section id="stats" class="stats">

                  <img src="{% static 'assets/img/stats-bg.jpg' %}" alt="" data-aos="fade-in">

                  <div class="container position-relative" data-aos="fade-up" data-aos-delay="100">

                      <div class="row gy-4">

                          <div class="col-lg-3 col-md-6">
                              <div class="stats-item text-center w-100 h-100">
                                  <span data-purecounter-start="0" data-purecounter-end="23" data-purecounter-duration="1" class="purecounter"></span>
                                  <p>Clienti</p>
                              </div>
                          </div><!-- End Stats Item -->

                          <div class="col-lg-3 col-md-6">
                              <div class="stats-item text-center w-100 h-100">
                                  <span data-purecounter-start="0" data-purecounter-end="38" data-purecounter-duration="1" class="purecounter"></span>
                                  <p>Progetti</p>
                              </div>
                          </div><!-- End Stats Item -->

                          <div class="col-lg-3 col-md-6">
                              <div class="stats-item text-center w-100 h-100">
                                  <span data-purecounter-start="0" data-purecounter-end="2980" data-purecounter-duration="1" class="purecounter"></span>
                                  <p>Ore di supporto</p>
                              </div>
                          </div><!-- End Stats Item -->

                          <div class="col-lg-3 col-md-6">
                              <div class="stats-item text-center w-100 h-100">
                                  <span data-purecounter-start="0" data-purecounter-end="6" data-purecounter-duration="1" class="purecounter"></span>
                                  <p>Lavori in corso</p>
                              </div>
                          </div><!-- End Stats Item -->

                      </div>

                  </div>

              </section><!-- End Stats Section -->

              <!-- Services Section - Home Page -->
              <section id="services" class="services">

                  <!--  Section Title -->
                  <div class="container section-title" data-aos="fade-up">
                      <h2>Servizi</h2>
                      <p>La nostra esperienza e professionalità è messa a disposizione del cliente attraverso i nostri servizi</p>
                  </div><!-- End Section Title -->

                  <div class="container">

                      <div class="row gy-4">

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="100">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-briefcase"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Incontri Informativi</a></h4>
                                      <p class="description">È possibile richiedere una consulenza senza impegno per una prima analisi delle problematiche aziendali e discutere su possibili soluzioni digitali che possano 
                                      migliorare l'esperienza lavorativa</p>
                                  </div>
                              </div>
                          </div>
                          <!-- End Service Item -->

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="200">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-card-checklist"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Formazione Personale</a></h4>
                                      <p class="description">Alla consegna di ogni progetto preventiviamo sempre periodi di formazione per l'utilizzo dei nuovi sistemi informatici riducendo così il tempo di apprendimento e migliorando i criteri di produttività</p>
                                  </div>
                              </div>
                          </div><!-- End Service Item -->

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="300">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-bar-chart"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Raccolta dati e Sicurezza</a></h4>
                                      <p class="description">Tutti i dati raccolti dai nostri progetti vengono immagazinati in database ed elaborati mediante sistemi di analisi e ne verificano la qualità</p>
                                  </div>
                              </div>
                          </div><!-- End Service Item -->

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="400">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-binoculars"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Monitoraggio</a></h4>
                                      <p class="description">Ogni nostro progetto viene monitorato anche dopo la consegna per poter garantire un alto livello di affidabilità</p>
                                  </div>
                              </div>
                          </div><!-- End Service Item -->

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="500">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-brightness-high"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Chiarezza e Trasparenza</a></h4>
                                      <p class="description">Ogni nostra soluzione viene concordata e sottoscritta con il cliente per una totale trasparenza, dalle fasi di progettazione fino alla messa in funzione del progetto</p>
                                  </div>
                              </div>
                          </div><!-- End Service Item -->

                          <div class="col-lg-6 " data-aos="fade-up" data-aos-delay="600">
                              <div class="service-item d-flex">
                                  <div class="icon flex-shrink-0"><i class="bi bi-calendar4-week"></i></div>
                                  <div>
                                      <h4 class="title"><a class="stretched-link">Tempi di Consegna</a></h4>
                                      <p class="description">Una delle nostre qualità è la puntualità nella consegna dei progetti, infatti i terpi di costruzione vengono calcolati e comunicati in fase preventiva</p>
                                  </div>
                              </div>
                          </div><!-- End Service Item -->

                      </div>

                  </div>

              </section><!-- End Services Section -->

              <!-- Features Section - Home Page -->
              <section id="features" class="features">

                  <!--  Section Title -->
                  <div class="container section-title" data-aos="fade-up">
                      <h2>Prodotti</h2>
                      <p>Possiamo offrire sistemi informatici preconfezionati o interamente personalizzati</p>
                  </div><!-- End Section Title -->

                  <div class="container">

                      <div class="row gy-4 align-items-center features-item">
                          <div class="col-lg-5 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="200">
                              <h3>MyLytical, mai così semplice</h3>
                              <p>
                                  Un sistema di contabilità analitica concepito anche per le persone che sono meno formate per questo genere di controllo aziendale.
                                  Le funzioni semplificate e l'utilizzo dei cost Driver intelligenti permettono di mantenere il controllo sull'andamento dei costi.
                              </p>
                              <a href="{% url 'MyLytical' %}" class="btn btn-get-started">Get info</a>
                          </div>
                          <div class="col-lg-7 order-1 order-lg-2 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="100">
                              <div class="image-stack">
                                  <!--<img src="{% static 'assets/img/features-light-1.jpg" alt="" class="stack-front">-->
                                   <video class="stack-front" alt="" autoplay muted id="myVideo_product" playsinline>
                                    <source src="{% static 'assets/video/mylitical_promo.mp4' %}" type="video/mp4">
                                    <source src="{% static 'assets/video/mylitical_promo.webm' %}" type="video/webm">
                                      <source src="{% static 'assets/video/mylitical_promo.ogg' %}" type="video/ogg">
                                  </video>
                                  <img src="{% static 'assets/img/features-light-2.png' %}" alt="" class="stack-back">
                              </div>
                          </div>
                      </div><!-- Features Item -->

                      <div class="row gy-4 align-items-stretch justify-content-between features-item ">
                          <div class="col-lg-6 d-flex align-items-center features-img-bg" data-aos="zoom-out">
                              <!--<img src="{% static 'assets/img/features-light-3.jpg" class="img-fluid" alt="">-->
                              <video class="img-fluid" alt="" autoplay muted id="myVideo_product" playsinline>
                                <source src="{% static 'assets/video/promo_software.mp4' %}" type="video/mp4">
                                <source src="{% static 'assets/video/promo_software.webm' %}" type="video/webm">
                                <source src="{% static 'assets/video/promo_software.ogg' %}" type="video/ogg">
                              </video>
                          </div>
                          <div class="col-lg-5 d-flex justify-content-center flex-column" data-aos="fade-up">
                              <h3>Il Software che avresti sempre voluto</h3>
                              <p>Insieme al cliente valutiamo e sosteniamo le idee per migliorare l'esperienza lavorativa mantenendo i nostri standard</p>
                              <ul>
                                  <li><i class="bi bi-check"></i> <span>Affidabilità e sicurezza verso gli utenti e i dati raccolti.</span></li>
                                  <li><i class="bi bi-check"></i><span>Prestazioni sempre al Top per massimizzare l'uso operativo.</span></li>
                                  <li><i class="bi bi-check"></i><span>Costi di progettazione contenuti di facile accesso per ogni azienda.</span></li>
                              </ul>
                              <a href="{% url 'Pros' %}" class="btn btn-get-started align-self-start">Get Info</a>
                          </div>
                      </div><!-- Features Item -->

                  </div>

              </section><!-- End Features Section -->
              
              <!-- Faq Section - Home Page -->
              <section id="faq" class="faq">

                  <div class="container">

                      <div class="row gy-4">

                          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                              <div class="content px-xl-5">
                                  <h3><span>Le </span><strong>Domande</strong><span> più frequenti che ci vengono fatte</span></h3>
                                  <p>
                                      Quando si prende contatto per la prima volta con aziende informatiche può accedere che si venga presi dal dubbio e dall'insicurezza di utilizzare soluzioni digitali all'interno del proprio processo produttivo. Di seguito riportiamo le domande che più ci vengono poste.
                                  </p>
                              </div>
                          </div>

                          <div class="col-lg-8" data-aos="fade-up" data-aos-delay="200">

                              <div class="faq-container">
                                  <div class="faq-item faq-active">
                                      <h3><span class="num">1.</span> <span>Quanto costa una consulenza preliminare?</span></h3>
                                      <div class="faq-content">
                                          <p>Le consulenze preliminari sono senza impegno pertanto non chiediamo nessun tipo di pagamento, e la stessa filosofia viene adottata anche per la richiesta di preventivi.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                                  <div class="faq-item">
                                      <h3><span class="num">2.</span> <span>I sistemi informatici possono sostituire un dipendente?</span></h3>
                                      <div class="faq-content">
                                          <p>La risposta è no, come per tutti i sistemi analogici anche quelli ibridi o digitali seguono le stesse caratteristiche. Lo scopo di un sistema è quello di fornire all'uomo uno strumento capace di massimizzare al meglio l'esperienza lavorativa.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                                  <div class="faq-item">
                                      <h3><span class="num">3.</span> <span>E possibile ampliare dei progetti in un secondo momento?</span></h3>
                                      <div class="faq-content">
                                          <p>Si, ogni nostro sistema viene progettato e costruito per avere future integrazioni con nuovi algoritmi e aggiornamenti. Salvo specifica richiesta da parte del cliente tutti i sistemi ibridi o digitali vengono implementati seguendo un criterio di espansione.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                                  <div class="faq-item">
                                      <h3><span class="num">4.</span> <span>E se commetto un errore e cancello i dati?</span></h3>
                                      <div class="faq-content">
                                          <p>Una delle caratteristiche più importanti che tutte le più grandi aziende stanno adottando è il servizio in Cloud con metodi di archiviazione intelligente e backup programmati. A differenza dei vecchi e ancora diffusi sistemi di archiviazione, questi nuovi sistemi permettono di poter recuperare qualunque dato in qualunque momento anche se cancellato per errore.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                                  <div class="faq-item">
                                      <h3><span class="num">5.</span> <span>I servizi in Cloud sono davvero così sicuri?</span></h3>
                                      <div class="faq-content">
                                          <p>Rispondere a questa domanda senza entrare in tecnicismi è davvero complesso, ma la risposta più corretta e Dipende. La sicurezza digitale è un tallone d'Achille col quale tutta la comunità informatica si devo scontrare, nei nostri lavori adoperiamo molteplici tecniche per la tutela dei dati e monitoriamo continuamente lo stato dei server per garantire un alto livello di sicurezza.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                                  <div class="faq-item">
                                      <h3><span class="num">6.</span> <span>Quanto costa un Software personalizzato?</span></h3>
                                      <div class="faq-content">
                                          <p>I costi di realizzazione possono variare a seconda della complessità e all'ambito di applicazione. Quello che possiamo affermare è che i costi di realizzazione dipendono dalle ore che servono per la realizzazione, dalla quantità di dati che il cliente può fornirci e dal tipo di servizio che il sistema deve garantire.</p>
                                      </div>
                                      <i class="faq-toggle bi bi-chevron-right"></i>
                                  </div><!-- End Faq item-->

                              </div>

                          </div>
                      </div>

                  </div>

              </section><!-- End Faq Section -->

              <!-- Call-to-action Section - Home Page -->
              <section id="call-to-action" class="call-to-action">

                  <img src="{% static 'assets/img/cta-bg.jpg' %}" alt="">

                  <div class="container">
                      <div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
                          <div class="col-xl-10">
                              <div class="text-center">
                                  <h3>Vuoi farci altre domande</h3>
                                  <p>Scrivici alla nostra email per richiedere maggiori informazioni o contattaci telefonicamente, saremo lieti di rispondere alle vostre domande.</p>
                                  <a class="cta-btn" href="index.html#contact">Contattaci</a>
                              </div>
                          </div>
                      </div>
                  </div>

              </section><!-- End Call-to-action Section -->

              <!-- Testimonials Section - Home Page 
              <section id="testimonials" class="testimonials">

                  <div class="container">

                      <div class="row align-items-center">

                          <div class="col-lg-5 info" data-aos="fade-up" data-aos-delay="100">
                              <h3>Testimonianze</h3>
                              <p>
                                  Il nostra miglior pubblicità è la soddisfazione del cliente e siamo lieti di leggere e riportare la loro opinione verso i nostri servizi.
                              </p>
                          </div>

                          <div class="col-lg-7" data-aos="fade-up" data-aos-delay="200">

                              <div class="swiper">
                                  <template class="swiper-config">
                                      {
                                      "loop": true,
                                      "speed" : 600,
                                      "autoplay": {
                                      "delay": 5000
                                      },
                                      "slidesPerView": "auto",
                                      "pagination": {
                                      "el": ".swiper-pagination",
                                      "type": "bullets",
                                      "clickable": true
                                      }
                                      }
                                  </template>
                                  <div class="swiper-wrapper">

                                      <div class="swiper-slide">
                                          <div class="testimonial-item">
                                              <div class="d-flex">
                                                  <img src="{% static 'assets/img/testimonials/testimonials-1.jpg' %}" class="testimonial-img flex-shrink-0" alt="">
                                                  <div>
                                                      <h3>Saul Goodman</h3>
                                                      <h4>Ceo & Founder</h4>
                                                      <div class="stars">
                                                          <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                                      </div>
                                                  </div>
                                              </div>
                                              <p>
                                                  <i class="bi bi-quote quote-icon-left"></i>
                                                  <span>Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.</span>
                                                  <i class="bi bi-quote quote-icon-right"></i>
                                              </p>
                                          </div>
                                      </div>

                                      <div class="swiper-slide">
                                          <div class="testimonial-item">
                                              <div class="d-flex">
                                                  <img src="{% static 'assets/img/testimonials/testimonials-2.jpg' %}" class="testimonial-img flex-shrink-0" alt="">
                                                  <div>
                                                      <h3>Sara Wilsson</h3>
                                                      <h4>Designer</h4>
                                                      <div class="stars">
                                                          <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                                      </div>
                                                  </div>
                                              </div>
                                              <p>
                                                  <i class="bi bi-quote quote-icon-left"></i>
                                                  <span>Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.</span>
                                                  <i class="bi bi-quote quote-icon-right"></i>
                                              </p>
                                          </div>
                                      </div>

                                      <div class="swiper-slide">
                                          <div class="testimonial-item">
                                              <div class="d-flex">
                                                  <img src="{% static 'assets/img/testimonials/testimonials-3.jpg' %}" class="testimonial-img flex-shrink-0" alt="">
                                                  <div>
                                                      <h3>Jena Karlis</h3>
                                                      <h4>Store Owner</h4>
                                                      <div class="stars">
                                                          <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                                      </div>
                                                  </div>
                                              </div>
                                              <p>
                                                  <i class="bi bi-quote quote-icon-left"></i>
                                                  <span>Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.</span>
                                                  <i class="bi bi-quote quote-icon-right"></i>
                                              </p>
                                          </div>
                                      </div>

                                      <div class="swiper-slide">
                                          <div class="testimonial-item">
                                              <div class="d-flex">
                                                  <img src="{% static 'assets/img/testimonials/testimonials-4.jpg' %}" class="testimonial-img flex-shrink-0" alt="">
                                                  <div>
                                                      <h3>Matt Brandon</h3>
                                                      <h4>Freelancer</h4>
                                                      <div class="stars">
                                                          <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                                      </div>
                                                  </div>
                                              </div>
                                              <p>
                                                  <i class="bi bi-quote quote-icon-left"></i>
                                                  <span>Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.</span>
                                                  <i class="bi bi-quote quote-icon-right"></i>
                                              </p>
                                          </div>
                                      </div>

                                      <div class="swiper-slide">
                                          <div class="testimonial-item">
                                              <div class="d-flex">
                                                  <img src="{% static 'assets/img/testimonials/testimonials-5.jpg' %}" class="testimonial-img flex-shrink-0" alt="">
                                                  <div>
                                                      <h3>John Larson</h3>
                                                      <h4>Entrepreneur</h4>
                                                      <div class="stars">
                                                          <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                                      </div>
                                                  </div>
                                              </div>
                                              <p>
                                                  <i class="bi bi-quote quote-icon-left"></i>
                                                  <span>Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.</span>
                                                  <i class="bi bi-quote quote-icon-right"></i>
                                              </p>
                                          </div>
                                      </div>

                                  </div>
                                  <div class="swiper-pagination"></div>
                              </div>

                          </div>

                      </div>

                  </div>

              </section><!-- End Testimonials Section -->

              {% if PostList != -1 %}
              <!-- Recent-posts Section - Home Page -->
              <section id="recent-posts" class="recent-posts">

                  <!--  Section Title -->
                  <div class="container section-title" data-aos="fade-up">
                      <h2>Post Recenti</h2>
                      <p>Nel nostro settore l'informazione è veramente importante e vorremmo condividere con voi le notizie piú importanti che ci coinvolgono.</p>
                  </div><!-- End Section Title -->

                  <div class="container">

                      <div class="row gy-4">
                          {% for Post in PostList %}
                          <div class="col-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="{{Post.delay}}">
                              <article>

                                  <div class="post-img">
                                      <img src="{{Post.cover.url}}" alt="" class="img-fluid">
                                  </div>

                                  <p class="post-category">{{Post.categories}}</p>

                                  <h2 class="title">
                                      <a href="blog-details.html">{{Post.title}}</a>
                                  </h2>

                                  <div class="d-flex align-items-center">
                                      <div class="post-meta">
                                          <p class="post-date">
                                              <time datetime="{{Post.datetime}}">{{Post.datetime}}</time>
                                          </p>
                                      </div>
                                  </div>

                              </article>
                          </div><!-- End post list item -->
                          {% endfor %}

                      </div><!-- End recent posts list -->

                  </div>

              </section><!-- End Recent-posts Section -->
              {% endif %}

              <!-- Contact Section - Home Page -->
              <section id="contact" class="contact">

                  <!--  Section Title -->
                  <div class="container section-title" data-aos="fade-up">
                      <h2>Contatti</h2>
                      <p>Compila il modulo o mandaci un'email, saremo lieti di risponderti.</p>
                  </div><!-- End Section Title -->

                  <div class="container" data-aos="fade-up" data-aos-delay="100">

                      <div class="row gy-4">

                          <div class="col-lg-6">

                              <div class="row gy-4">
                                  <!--<div class="col-md-6">
                                      <div class="info-item" data-aos="fade" data-aos-delay="200">
                                          <i class="bi bi-geo-alt"></i>
                                          <h3>Address</h3>
                                          <p>A108 Adam Street</p>
                                          <p>New York, NY 535022</p>
                                      </div>
                                  </div><!-- End Info Item -->

                                  <div class="col-md-6">
                                      <div class="info-item" data-aos="fade" data-aos-delay="200">
                                          <i class="bi bi-telephone"></i>
                                          <h3>Telefono</h3>
                                          <p>+39 392 087 7317</p>
                                          <p>+39 392 473 2597</p>
                                      </div>
                                  </div><!-- End Info Item -->

                                  <div class="col-md-6">
                                      <div class="info-item" data-aos="fade" data-aos-delay="300">
                                          <i class="bi bi-envelope"></i>
                                          <h3>Email</h3>
                                          <p>info@bitechnology.it</p>
                                          <p>gm.bitechnology@gmail.com</p>
                                      </div>
                                  </div><!-- End Info Item -->

                                  <!--<div class="col-md-6">
                                      <div class="info-item" data-aos="fade" data-aos-delay="500">
                                          <i class="bi bi-clock"></i>
                                          <h3>Open Hours</h3>
                                          <p>Monday - Friday</p>
                                          <p>9:00AM - 05:00PM</p>
                                      </div>
                                  </div><!-- End Info Item -->

                              </div>

                          </div>

                          <div class="col-lg-6">
                              <form action="{% static 'forms/contact.php' %}" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
                                  <div class="row gy-4">

                                      <div class="col-md-6">
                                          <input type="text" name="name" class="form-control" placeholder="Nome e Cognome" required>
                                      </div>

                                      <div class="col-md-6 ">
                                          <input type="email" class="form-control" name="email" placeholder="La tua Email" required>
                                      </div>

                                      <div class="col-md-12">
                                          <input type="text" class="form-control" name="subject" placeholder="Titolo" required>
                                      </div>

                                      <div class="col-md-12">
                                          <textarea class="form-control" name="message" rows="6" placeholder="Messaggio" required></textarea>
                                      </div>

                                      <div class="col-md-12 text-center">
                                          <div class="loading">Caricamento</div>
                                          <div class="error-message"></div>
                                          <div class="sent-message">Il tuo messaggio è stato inviato. Grazie per averci scelto!</div>

                                          <button type="submit">Invia Email</button>
                                      </div>

                                  </div>
                              </form>
                          </div><!-- End Contact Form -->

                      </div>

                  </div>

              </section><!-- End Contact Section -->


{% endblock content%}