{% extends "layout.html" %}

{% block title %}
Monuments - Heritage Tours | Historical Adventures in India
{% endblock %}

{% block content %}
<section class="breadcrumb-section">
    <div class="breadcrumb-image-container">
        <img src="{{ url_for('static', filename='images/backgrounds/tour-manager.jpg') }}" alt="Monuments Banner"
            class="w-100 breadcrumb-img">
        <div class="breadcrumb-overlay">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <h2 class="text-white fw-bold mt-3">Monument Tours</h2>
                        <nav aria-label="breadcrumb" class="m-4">
                            <ol class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/" class="text-white-50">Home</a></li>
                                <li class="breadcrumb-item active text-white" aria-current="page">Monuments</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="monument-tours-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-md-8 mx-auto">
                <h2 class="fw-bold">Discover India's Historic Treasures</h2>
                <p class="text-muted">Journey through time with our expertly guided tours of India's most iconic monuments and architectural marvels.</p>
            </div>
        </div>

        <div class="row gy-4 align-items-stretch">
            
            <div class="col-lg-4 col-md-6">
                <div class="monument-card">
                    <img src="https://images.unsplash.com/photo-1564507592333-c60657eea523?q=80&w=2071&auto=format&fit=crop" class="monument-card__image" alt="Taj Mahal">
                    <div class="monument-card__body">
                        <h5 class="monument-card__title">The Taj Mahal at Sunrise</h5>
                        <p class="monument-card__location"><i class="fas fa-map-marker-alt"></i> Agra, Uttar Pradesh</p>
                        <p class="monument-card__description">Witness the ethereal beauty of the world's most famous monument to love as it glows in the morning light.</p>
                        <div class="monument-card__meta">
                            <span><i class="fas fa-clock"></i> Full Day Tour</span>
                        </div>
                        <a href="#" class="btn monument-card__button w-100">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="monument-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6V6M-llDqSiGYtQd59rg7r5e9PvCmHb4i7Q&s" class="monument-card__image" alt="Qutub Minar">
                    <div class="monument-card__body">
                        <h5 class="monument-card__title">Qutub Minar & Mehrauli</h5>
                        <p class="monument-card__location"><i class="fas fa-map-marker-alt"></i> Delhi, India</p>
                        <p class="monument-card__description">Explore the towering brick minaret and the surrounding archaeological park, a UNESCO World Heritage Site.</p>
                        <div class="monument-card__meta">
                            <span><i class="fas fa-clock"></i> Half Day Tour</span>
                        </div>
                        <a href="#" class="btn monument-card__button w-100">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="monument-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc2OykFsd-cLf1DppVGub9DWtJYYJRO4EM2g&s" class="monument-card__image" alt="Hawa Mahal">
                    <div class="monument-card__body">
                        <h5 class="monument-card__title">Jaipur's Palace of Winds</h5>
                        <p class="monument-card__location"><i class="fas fa-map-marker-alt"></i> Jaipur, Rajasthan</p>
                        <p class="monument-card__description">Marvel at the intricate facade of Hawa Mahal, an extraordinary pink-painted palace with 953 windows.</p>
                        <div class="monument-card__meta">
                           <span><i class="fas fa-clock"></i> 2-3 Hour Visit</span>
                        </div>
                        <a href="#" class="btn monument-card__button w-100">View Details</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}