{% extends 'main/base.html' %}
{% load static %}

{% block title %}Eco-Tourism Project by Refcom{% endblock %}

{% block content %}
<div class="container mt-5">
  <div class="text-center mb-5">
    <h1 class="display-4 text-success">Eco-Tourism: A Sustainable Project by Refcom</h1>
    <p class="lead">Connecting people with nature while conserving the environment.</p>
  </div>

  <div class="row mb-4">
    <div class="col-md-6">
      <img src="{% static 'images/eco_tour_1.jpeg' %}" alt="Eco-tourism trail" class="img-fluid rounded shadow">
    </div>
    <div class="col-md-6 d-flex align-items-center">
      <p style="font-size: 1.25rem; font-weight:600; line-height: 1.6;">
        Refcom is proud to introduce our Eco-Tourism initiative, designed to promote sustainable travel, local community engagement,
        and environmental awareness. Our project encourages tourists to explore natural landscapes responsibly,
        minimizing their footprint while maximizing their connection to culture and conservation.
      </p>
    </div>
  </div>

  <div class="row mb-4 bg-light p-4 rounded shadow-sm">
    <div class="col-md-6 d-flex align-items-center">
      <ul>
        <li>Guided nature walks through protected ecosystems</li>
        <li>Community-based homestays and cultural immersion</li>
        <li>Wildlife observation with eco-friendly practices</li>
        <li>Educational programs on conservation and sustainability</li>
      </ul>
    </div>
    <div class="col-md-6">
      <img src="{% static 'images/eco_tour_2.jpeg' %}" alt="Community eco lodge" class="img-fluid rounded shadow">
    </div>
  </div>

  <div class="text-center mt-5">
    <h2>Join the Movement</h2>
    <p style="font-size: 1.25rem; font-weight:600; line-height: 1.6;">Refcom invites volunteers, nature lovers, and changemakers to be part of our eco-tourism mission.</p>
    <a href="{% url 'careers' %}" class="btn btn-success btn-lg">Get Involved</a>
  </div>

  <div class="row mt-5">
    <div class="col-md-4">
      <img src="{% static 'images/eco_tour_3.jpeg' %}" class="img-fluid rounded" alt="Eco volunteer activity">
    </div>
    <div class="col-md-4">
      <img src="{% static 'images/eco_tour_4.jpeg' %}" class="img-fluid rounded" alt="Nature conservation">
    </div>
    <div class="col-md-4">
      <img src="{% static 'images/eco_tour_5.jpeg' %}" class="img-fluid rounded" alt="Cultural experience">
    </div>
  </div>
</div>
{% endblock %}