{% extends "layout.html" %}

{% block title %}
Home - Eco Wildlife Tour | Ethical Safaris & Adventures in India
{% endblock %}

{% block content %}
<!-- Hero Slider Section -->
<section class="homeSlider">
  <div id="homeSlider" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="{{ url_for('static', filename='images/home-slider/slide1.jpg') }}" alt="">
        <div class="carousel-caption">
          <h1>Lord Jagannath’s Eternal Blessings</h1>
          <p><br>
            <br>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="{{ url_for('static', filename='images/home-slider/slide2.jpg') }}" id="demo-img-hide" class="d-block w-100"
          alt="...">
        <div class="carousel-caption">
          <h3>Konark Sun Temple: The Majestic Chariot of Time Awaits</h3>
          <p><br> </p>

        </div>
      </div>
      <div class="carousel-item">
        <img src="{{ url_for('static', filename='images/home-slider/slide3.jpg') }}" class="d-block w-100" alt="...">
        <div class="carousel-caption">
          <h3>Mukteswar: A Symphony in Sandstone</h3>
          <p><br>
            <br>
          </p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#homeSlider" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#homeSlider" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</section>

<!-- News Ticker -->
<div class="news-ticker-container">
  <div class="news-label">Latest News</div>
  <div class="news-content">
    <ul class="news-list">
      {% if news_items %}
      {% for news_item in news_items %}
      <li>
        {{ news_item.jdate }} | {{ news_item.title }} <a href="{{ news_item.source }}"
          class="text-primary text-decoration-none text-uppercase">Read More</a>
      </li>
      {% endfor %}
      {% else %}
      <li>
        No Upcoming News And Events
      </li>
      {% endif %}
    </ul>
  </div>
</div>

<!--Card section start-->
<section class="toursSection animate__animated animate__fadeInUp">
  <div class="container">
    <div class="row">
      <!-- Start Section Title -->
      <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <h3 class="text-center text-info-emphasis mb-5">BEST OF TOUR PACKAGES ODISHA</h3>
      </div>
      <!-- End Section Title -->
      <!-- Start Card Box -->
      {% if tours %}
      {% for tour in tours %}
      <div class="col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="card toursCard p-2">
          <div class="card-img-top">
            <img src="{{ url_for('static', filename='images/tour-package/' + tour.image) }}" class="tour-card-image"
              alt="{{ tour.title }}" height="250px">
          </div>
          <div class="card-body d-grid">
            <h5 class="card-title text-center text-center">{{ tour.title }}</h5>
            <div class="divider"></div>
            <p class="card-text">{{ tour.content }}</p>
            <a href="{{ url_for('tour.tours', slug=tour.slug) }}" class="btn btn-primary btn-block">Explore</a>
          </div>
        </div>
      </div> 
      {% endfor %}
      {% else %}
      <div class="col-lg-12 col-md-12 col-sm-12 col-12"></div>
      <div class="text-center">
        <p>No tour packages are available at the moment</p>
      </div>
    </div>
    {% endif %}

    {% if tours %}
    <div class="row">
      <div class="col-12 text-center mt-4">
        <a href="{{ url_for('tour.tours') }}" class="btn  btn-outline-primary  btn-lg">View All Packages</a>
      </div>
    </div>
    {% endif %}

    <!-- End Card Box -->
  </div>

  </div>
</section>
<!--Card section End-->
<!-- Start parallaxSection -->
<section class="parallaxSection">
  <div class="overlay">
    <div class="container text-center">
      <h1 class="mb-5">ODISHA THEME TOURS</h1>
      <div class="parallax-slider">
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/konarktemple.png') }}"
            class="card-img-top rounded-0" alt="Konark Sun Temple">

          <div class="card-body">
            <h5 class="card-title text-center">Konark Sun Temple</h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Konark Sun Temple</h5>
            <p class="overlay-info">The Konark Sun Temple, a UNESCO World Heritage site in Odisha, is a 13th-century
              monument dedicated to the Sun God.</p>
          </div>
        </div>
        <!-- End Gadheda -->
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/shaktipitha.png') }}"
            class="card-img-top rounded-0" alt="shaktipitha">

          <div class="card-body">
            <h5 class="card-title text-center">Shaktipitha</h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Shaktipitha</h5>
            <p class="overlay-info">The Shakti Peethas are sacred Hindu pilgrimage sites where body parts of the goddess
              Sati are believed to have fallen.</p>
          </div>
        </div>
        <!-- End Gadheda -->
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/goldentribletour.jpg') }}"
            class="card-img-top rounded-0" alt="goldentribletour">

          <div class="card-body">
            <h5 class="card-title text-center">Golden Trible tour</h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Golden Trible tour</h5>
            <p class="overlay-info">The Golden Triangle Tribal Tour combines the classic Delhi, Agra, and Jaipur circuit
              with an exploration of India's tribal cultures</p>
          </div>
        </div>
        <!-- End Gadheda -->
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/beach.jpg') }}" class="card-img-top rounded-0"
            alt="Konark Sun Temple">

          <div class="card-body">
            <h5 class="card-title text-center">Beach Tour Odisha</h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Beach Tour Odisha</h5>
            <p class="overlay-info">Odisha's coast features diverse beaches, from the lively Puri Beach to the unique
              Chandipur Beach, where the sea recedes.</p>
          </div>
        </div>
        <!-- End Gadheda -->
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/khandagiri.jpg') }}"
            class="card-img-top rounded-0" alt="Khandagiri Caves">

          <div class="card-body">
            <h5 class="card-title text-center">Khandagiri Caves</h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Khandagiri Caves</h5>
            <p class="overlay-info">The Khandagiri Caves in Odisha, along with the nearby Udayagiri Caves, are ancient
              rock-cut caves.</p>
          </div>
        </div>
        <!-- End Gadheda -->
        <!-- Start Card -->
        <div class="card m-2 shadow-lg">
          <img src="{{ url_for('static', filename='images/theme-tours/dhaulishanti.jpg') }}"
            class="card-img-top rounded-0" alt="Dhauli Shanti Stupa ">

          <div class="card-body">
            <h5 class="card-title text-center">Dhauli Shanti Stupa </h5>
            <p class="card-text text-center">The Legendary Sun Temple of Odisha</p>
          </div>

          <div class="card-hover-overlay">
            <h5 class="overlay-title">Dhauli Shanti Stupa </h5>
            <p class="overlay-info">The Dhauli Shanti Stupa, or Peace Pagoda, is a Buddhist monument near Bhubaneswar,
              Odisha.</p>
          </div>
        </div>
        <!-- End Gadheda -->
      </div>
    </div>
  </div>
</section>

<!--End Parallax Card-->
<!--Start Welcome to Odisha-->
<div class="welcomeodisha py-5">
  <div class="container">
    <div class="row align-items-center">

      <!-- Left Side: Heading + Paragraph + Button -->
      <div class="col-lg-6 col-md-12 mb-4 mb-lg-0">
        <h1 class="mb-3 text-captilize text-info-emphasis fw-bold">Welcome To Eco Wildlife Tour</h1>
        <p>
          Welcome to the land of ancient temples, pristine beaches, and vibrant culture – Odisha. Nestled in the eastern
          part of India, Odisha is a treasure trove of breathtaking landscapes and historical marvels. And to embark on
          an unforgettable journey through this enchanting odyssey, look no further than Tour to Odisha, your ultimate
          companion in discovering the gems of this beautiful state.
          <br> <br>
          Tour to Odisha takes pride in curating meticulously crafted tour packages that offer an immersive experience
          into the heart and soul of Odisha. From the sacred city of Puri to the architectural wonders of Konark, from
          the bustling streets of Bhubaneswar to the serene waters of Chilika Lake, each destination promises a unique
          and enriching experience
        </p>
        <a href="{{ url_for('about.overview')}}" class="cta-button-2">Read More</a>
      </div>

      <!-- Right Side: Carousel -->
      <div class="col-lg-6 col-md-12">
        <div id="carouselExampleCaptions" class="carousel slide small-carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
              class="active"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"></button>
          </div>

          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="{{ url_for('static', filename='images/welcome-slider/puri.png') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <p></p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="{{ url_for('static', filename='images/welcome-slider/chilika.png') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5></h5>
                <p></p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="{{ url_for('static', filename='images/welcome-slider/bhitarakanika.png') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5></h5>
                <p></p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="{{ url_for('static', filename='images/welcome-slider/welcome-slider.jpg') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5></h5>
                <p></p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="{{ url_for('static', filename='images/welcome-slider/culture.png') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5></h5>
                <p></p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="{{ url_for('static', filename='images/welcome-slider/welcome-slider2.jpg') }}" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5></h5>
                <p></p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Welcome to Odisha-->

<!--Last section-->
<section class="click-to-action m-0">
  <h1 class="mt-5">Looking For Customized Tour Packegs?</h1>
  <p>Let our experts craft a personalized itinerary just for you.</p>
  <a href="{{ url_for('booking')}}" class="cta-button">Start Your Journey <span class="arrow">→</span></a>
</section>
<!--Last section-->
{% endblock %}