{{/*  Home Template File  */}}
{{ define "main" }}
{{ .Content }}
  <!-- Hero Slider -->
    <section class="hero-slider h-screen md:h-[750px]">
      <div class="verua-slider-wrapper">
        <div class="verua-slider h-screen md:h-[750px]" id="verua-slider">
          {{ range $i, $e:= .Params.heroslider }}
            <div class="slides h-screen md:h-full {{ if (eq $i 0) }}current{{ end }}" style="background-image:url('{{ .image }}')">
                    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
                        {{ .title | markdownify }}
                      </h1>
            </div>
          {{ end }}
        </div>
      </div>
    </section>
    <script>
      window.onload = function(){
        // change slide every 5 seconds
        setInterval(nextSlide, 5000);
      }
      let slideNumber = 0;
      const prevSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == 0){
          slideNumber = slides.length-1;
        }
        else{
            slideNumber = slideNumber-1;
        }
        slides[slideNumber].classList.add("current");
      }
      const nextSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == (slides.length-1)){
          slideNumber = 0;
        }
        else{
            slideNumber = slideNumber+1;
        }
        slides[slideNumber].classList.add("current");
      }
      
    </script>
 <!-- /Hero Slider --> 
<!-- Key Features -->

    {{/*  <section class="flex flex-wrap items-start justify-center relative">  */}}
    <section class="lg:container lg:mx-auto relative flex flex-col justify-between items-center lg:flex-row lg:items-center lg:-mt-[250px]">
      {{ range $i, $e:= .Params.keyfeatures }}
        
          <div class="w-full flex-1 lg:mt-8 p-8 lg:m-4 lg:shadow-xl lg:rounded-3xl {{ with .color }} bg-{{ . }} {{ end }} {{ with .textcolor }} text-{{ . }} {{ end }}">
          {{/*  <div class="flex-shrink-0 relative {{ with .color }} bg-{{ . }} {{ end }} m-6 {{ with .textcolor }} text-{{ . }} {{ end }} -mt-[250px] overflow-hidden rounded-lg max-w-96 shadow-lg p-8">  */}}
        
          {{ with .icon }}
          <div class="flex items-center justify-center">
            <i class="fas fa-{{ . }} fa-fw text-5xl text-primary py-10"></i>
          </div>
          {{ end }}
          <h3 class="mb-4 {{ with .textcolor }} text-{{ . }} {{ end }}">
            {{ .title | markdownify }}
          </h2>
          <p class="mb-8 text-lg">
            {{ .content | markdownify }}
          </p>
        </div>
      {{ end }}
    </section>
<!-- /Key Features -->
<!-- Features -->
<div class="lg:container items-center grid grid-cols-8 gap-4">

  <!-- Column -->
  <div class="col-span-8 	md:col-span-4">
    {{ with .Params.featureslead }}
    <section>
      <div class="container">
        <div class="row">
          {{ partial "components/iconheadersubheadertext" . }}
        </div>
      </div>
    </section>
    {{ end  }}
  </div>

  <!-- Column -->
  <div class="grid grid-cols-2 col-span-8 gap-4 md:col-span-4">
    {{ range $i, $e:= .Params.features }}

      <div class="col-span-2 	 md:col-span-1">
        {{ partial "components/iconheadersubheadertext" . }}
      </div>

    {{ end }}
  
  </div>

</div>

<!-- /Features -->
  <!-- Testimonials -->
  {{ with site.GetPage "sections/testimonial" }}
    {{ if .Params.enable }}
      <section class="section">
        <div class="container">
          <div class="row">
            <div class="md:col-10 lg:col-8 xl:col-6 mx-auto mb-12 text-center">
              <h2 class="mb-4">
                {{ .Title | markdownify }}
              </h2>
              <p>
                {{ .Params.description | markdownify }}
              </p>
            </div>
            <div class="col-12">
              <div class="swiper testimonial-slider">
                <div class="swiper-wrapper">
                  {{ range .Params.testimonials }}
                    <div class="swiper-slide">
                      <div class="bg-theme-light  rounded-lg px-7 py-10">
                        <div class="text-dark ">
                          <svg
                            width="33"
                            height="20"
                            viewBox="0 0 33 20"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                              d="M1.28375 19.41L0.79375 18.64C1.21375 17.0067 1.75042 15.07 2.40375 12.83C3.05708 10.5433 3.75708 8.28 4.50375 6.04C5.29708 3.75333 6.06708 1.77 6.81375 0.0899959H15.3538C14.9338 2.09666 14.4904 4.26667 14.0238 6.6C13.5571 8.88666 13.1371 11.15 12.7638 13.39C12.4371 15.5833 12.1571 17.59 11.9238 19.41H1.28375ZM31.69 0.0899959L32.18 0.859998C31.76 2.54 31.2233 4.5 30.57 6.74C29.9167 8.98 29.2167 11.2433 28.47 13.53C27.7233 15.77 26.9533 17.73 26.16 19.41H17.69C18.0167 17.9167 18.3433 16.33 18.67 14.65C18.9967 12.9233 19.3 11.22 19.58 9.54C19.9067 7.81333 20.1867 6.15667 20.42 4.57C20.7 2.93666 20.91 1.44333 21.05 0.0899959H31.69Z"
                              fill="currentColor" />
                          </svg>
                        </div>
                        <blockquote class="mt-8">
                          {{ .content | markdownify }}
                        </blockquote>
                        <div class="mt-11 flex items-center">
                          <div class="text-dark ">
                            {{ partial "image" (dict "Src" .avatar "Size" "50x50" "Class" "rounded-full" "Alt" .name) }}
                          </div>
                          <div class="ml-4">
                            <h3 class="h5 font-primary font-semibold">
                              {{ .name }}
                            </h3>
                            <p class="text-dark ">
                              {{ .designation | markdownify }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  {{ end }}
                </div>
                <div
                  class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    {{ end }}
  {{ end }}
  <!-- /Testimonials -->
{{ end }}