{{ header }}

<style>

.owl-carousel .item {
    width:345px;
    height:320px
}

.owl-carousel .item img {
     width:345px;
    height:320px
}
.owl-carousel .item img {
    max-width: unset;
    border-radius: 10px;
}
</style>
{% if sliders %}
<div id="demo" class="carousel main-slider slide" data-ride="carousel">
    <ul class="carousel-indicators">
      {% for slider in sliders %}
      {% if loop.index == 1 %}
      <li data-target="#demo" data-slide-to="{{ loop.index }}" class="active"></li>
      {% else %}
      <li data-target="#demo" data-slide-to="{{ loop.index }}"></li>
      {% endif %}
      {% endfor %}
    </ul>
    <div class="carousel-inner">
      
      {% for slider in sliders %}
        {% if loop.index == 1 %}
       
        <div class="carousel-item active">
          <img class="img-fluid" src="image/{{ slider.image }}" alt="{{ slider.title }}" />
          <div class="carousel-caption caption-bottom animate__animated animate__fadeInUp">
          <h3>{{ slider.title }}</h3>
          </div>   
        </div>
        {% else %}
         <div class="carousel-item">
          <img class="img-fluid" src="image/{{ slider.image }}" alt="{{ slider.title }}" />
          <div class="carousel-caption caption-bottom animate__animated animate__fadeInUp">
          <h3>{{ slider.title }}</h3>
          </div>   
        </div>
        {% endif %}
      {% endfor %}
      

    </div>
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <div class="arrow-back"><span class="carousel-control-prev-icon"></span></div>
    </a> 
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <div class="arrow-back"><span class="carousel-control-next-icon"></span></div>
    </a>
</div>
{% endif %}
  <!-- /main slider section -->
  <div class="body-wrapper mt-5 mb-5">
    <div class="container">
		<div class="row mb-5">
        <!-- left part -->
		
		
        <div class="col-md-8">
          <div class="left-wrapper animate__animated animate__fadeIn">
            <h2>About the Society
            <div class="underline1">
              <span>
              
              </span>
            </div>
            
            </h2>
            <p class="font-14 family1">The Entomological Society of India (ESI) was founded in 1938 as a registered society under the Societies Registration Act 1957 as extended to the Union territory of Delhi under Registration No. S. 2434 of 1963-64 dt 12.3.1964. It is registered with NITI Aayog under unique ID of VO/NGO-DL/2016/0104219. It is one of the largest professional societies in India serving entomologists and  researchers in related disciplines. The main objective of the Society is to encourage and promote the dissemination of entomological knowledge. It arranges meetings of entomologists at the headquarters and at various places in India. The annual general body meetings are held regularly along with Conferences/Symposia/Meetings. These meetings provide opportunities to the members and others interested in the subject to keep in touch with the entomological activities.</p>
            <a class="btn btn-custom read-1" href="history">Read More <i class="ml-2 fa fa-long-arrow-right" aria-hidden="true"></i></a>
        
          </div>

        </div>
		
		
		<div class="col-md-4">
			
			<div class="box1">
				<div class="mb-20"><a href="benefits-of-membership"><div class="btn1 padding font-18">Benefits of member</div></a></div>
				<div class="mb-20"><a href="register"><div class="btn1 padding font-18">Join or Renew your membership</div></a></div>
        <div class="mb-20"><a href="https://www.indianentomology.org/"><div class="btn1 padding font-18">Indian Journal of Entomology-OJMS</div></a></div>
        {% if logged %}
  
		<div><a href="account"><div class="btn1 padding font-18">Online Payment</div></a></div>
{% else %}
  <div><a href="login"><div class="btn1 padding font-18">Online Payment</div></a></div>
{% endif %}
			</div>

        </div>
		
		
		
		
		
        <!-- left part -->
    
		</div>
        <div class="row mt-5 mb-5">
          
		  
            
			{% if latest_news %}
			<div class="col-md-8">
			    <h2 class="mb-20">
					    Latest News
					    <div class="underline1">
              <span>
              
              </span>
            </div>
				  </h2>
				<div class="latest shadow">
				  <ul class="list-group">
  					{% for news in latest_news %}

              {% if news.uploadtype == 1 %}
  					   <li class=""><a href="{{ news.upload }}" target="_blank" style="font-size: 18px;">{{ news.title }}</a>
              {% else %}
                <li class=""><a href="{{ news.href }}" style="font-size: 18px;">{{ news.title }}</a>
              {% endif %}
  					<p>{{ news.date }}</p>
  					</li>
  					{% endfor %}
				  </ul>
				</div>
			</div>
			
			
			<div class="col-md-4">
			
    			<div class="box1">
    			  <img src="images/news1.png" width="100%">
    			</div>
			
			</div>
      {% endif %}
            <!-- gallery start -->
            <!----<div class="col-md-12">
            
              <h2 class="mb-20">Gallery</h2>
              
              <div id="gal" class="carousel slide" data-ride="carousel" data-interval="2000">
                <ul class="carousel-indicators">
                  <li data-target="#gal" data-slide-to="0" class="active"></li>
                  <li data-target="#gal" data-slide-to="1"></li>
                </ul>
                <!-- The slideshow 
                <div class="carousel-inner">
                
                  <div class="carousel-item active">
                    <img src="images/g1.jpg" alt="Gallery 1" class="box2">
                  </div>
                  
                  <div class="carousel-item">
                    <img src="images/g2.jpg" alt="Gallery 2" class="box2"> 
                  </div>
                  
                 <div class="carousel-item">
                    <img src="images/g3.jpg" alt="Gallery 3" class="box2"> 
                  </div>
                </div>
                <a class="carousel-control-prev" href="#gal" data-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#gal" data-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </a>
              </div>
             <div class="text-center"><a class="btn btn-custom read-1" href="gallery">View More <i class="ml-2 fa fa-long-arrow-right" aria-hidden="true"></i></a></div>
            </div>--->
			
			
			
			

        </div>
		
		<div class="row">
		
		</div>
		
		
		 <div class="col-lg-12 nopadding">
		 
		
			   <h2 class="mb-20">
					  Gallery
					    <div class="underline2">
              <span>
              
              </span>
            </div>
				    </h2>
					
					
                <div class="card">
                    <div class="card-body">
                     
                        <div class="owl-carousel">
                        
                            <div class="item"> <img src="images/g1.jpg" alt="image" /> </div>
							<div class="item"> <img src="images/g2.jpg" alt="image" /> </div>
							<div class="item"> <img src="images/g3.jpg" alt="image" /> </div>
							<div class="item"> <img src="images/g4.jpg" alt="image" /> </div>
							<div class="item"> <img src="images/g5.jpg" alt="image" /> </div>
                            
                        </div>
                    </div>
                </div>
				
				             <div class="text-center mt-40"><a class="btn btn-custom read-1" href="gallery">View More <i class="ml-2 fa fa-long-arrow-right" aria-hidden="true"></i></a></div>
            </div>
            
            
            <script>
              
              
              $(document).ready(function() {

$(".owl-carousel").owlCarousel({

autoPlay: 1000,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
center: true,
nav:false,
loop:true,
responsive: {
360: {
items: 1
}
}






});

});
            </script>
		
		           <!-- video part -->
          <div class="row mt-5 mb-5">
		  
            <div class="col-md-12">
			
			   <div class="col-md-12">
			
				<div class="row border p-20">
				
				
				   <div class="col-md-12">
					<iframe width="100%" height="600" src="https://www.youtube.com/embed/{{homevideo}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				   
				   </div>
				   
				   
				   
				 
				   
				</div>
				
				</div>
             
            </div>
			
			  <div class="col-md-12 text-center">
               
                  <a class="btn btn-custom read-1 mt-20" href="videos">View More <i class="ml-2 fa fa-long-arrow-right" aria-hidden="true"></i></a>
              </div>
          </div>
     
    </div>
  </div>


{{ footer }}