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

{% block title %}Sri Lanka Rentals | Verified Homes for Expats, Digital Nomads & Long Stays{% endblock %}

{% block content %}

<style>
    .rentals-home-page {
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 28%),
            radial-gradient(circle at 88% 18%, rgba(20, 184, 166, 0.08), transparent 30%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f0fdfa 100%);
        overflow: hidden;
    }

    /* =========================
       HERO
       ========================= */
    .rental-hero-section {
        position: relative;
        min-height: 100vh;
        padding: 6rem 0;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 32%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.20), transparent 35%),
            linear-gradient(135deg, rgba(5, 46, 37, 0.96), rgba(15, 118, 110, 0.90)),
            url("{% static 'expat_life/images/rentals_hero.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

    .rental-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 35%),
            radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.11), transparent 28%);
        pointer-events: none;
    }

    .rental-hero-section::after {
        content: "";
        position: absolute;
        right: -170px;
        bottom: -190px;
        width: 540px;
        height: 540px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .rental-hero-section .container {
        position: relative;
        z-index: 2;
    }

    .hero-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .48rem .95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #ccfbf1 !important;
        font-size: .82rem;
        font-weight: 850 !important;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .hero-mini-title::before {
        content: "\F424";
        font-family: "bootstrap-icons";
        color: #fde68a;
        font-size: .95rem;
    }

    .rental-hero-section h1 {
        color: #fff;
        font-size: clamp(2.5rem, 4.7vw, 4.7rem);
        font-weight: 950;
        line-height: 1.04;
        letter-spacing: -0.05em;
    }

    .rental-hero-section .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 1.15rem;
        line-height: 1.85;
        max-width: 860px;
    }

    .rental-hero-actions .btn,
    .rental-hero-section .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .9rem 1.45rem;
        transition: all .22s ease;
    }

    .rental-hero-section .btn-primary {
        border: none;
        background: linear-gradient(135deg, #facc15, #f59e0b);
        color: #422006;
        box-shadow: 0 20px 38px rgba(250, 204, 21, 0.24);
    }

    .rental-hero-section .btn-primary:hover {
        background: linear-gradient(135deg, #fde047, #f59e0b);
        color: #422006;
        transform: translateY(-2px);
        box-shadow: 0 26px 46px rgba(250, 204, 21, 0.34);
    }

    .rental-hero-section .btn-outline-dark {
        border: 1px solid rgba(255, 255, 255, 0.48);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        backdrop-filter: blur(8px);
    }

    .rental-hero-section .btn-outline-dark:hover {
        background: #fff;
        color: #0f766e;
        border-color: #fff;
        transform: translateY(-2px);
    }

    .hero-stat-box {
        border-radius: 24px !important;
        padding: 1.2rem !important;
        background: rgba(255, 255, 255, 0.13) !important;
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(10px);
        box-shadow: none !important;
    }

    .hero-stat-box .fw-bold {
        color: #fde68a !important;
        font-size: 1.18rem !important;
        line-height: 1.3;
        margin-bottom: .45rem;
    }

    .hero-stat-box .text-muted {
        color: rgba(255, 255, 255, 0.82) !important;
        line-height: 1.6;
    }

    /* =========================
       HERO SIDE CARD
       ========================= */
    .hero-side-card {
        border-radius: 34px !important;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.97) !important;
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.30) !important;
        backdrop-filter: blur(14px);
    }

    .hero-side-card img {
        height: 320px;
        object-fit: cover;
        display: block;
    }

    .hero-side-card .p-4 {
        padding: 1.7rem !important;
    }

    .hero-side-card h4 {
        color: #0f172a;
        font-weight: 950;
        letter-spacing: -0.025em;
    }

    .hero-side-card .text-primary {
        color: #0f766e !important;
    }

    .hero-side-card strong {
        color: #0f172a;
    }

    .hero-side-card .text-muted {
        color: #64748b !important;
        line-height: 1.65;
    }

    .rental-benefit-dot {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #14b8a6, #0f766e);
        color: #fff;
        font-size: .85rem;
        font-weight: 900;
        margin-right: .9rem;
        margin-top: .15rem;
    }

    /* =========================
       TRUST STRIP
       ========================= */
    .rental-trust-strip {
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 26%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 28%),
            #ffffff;
        border-top: none !important;
        border-bottom: none !important;
        padding: 2.1rem 0 !important;
    }

    .rental-trust-item {
        height: 100%;
        border-radius: 22px;
        padding: 1rem 1.1rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
        color: #0f172a;
        font-weight: 850;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .65rem;
    }

    .rental-trust-item i {
        color: #0f766e;
        font-size: 1.1rem;
    }

    /* =========================
       FEATURED PROPERTIES
       ========================= */
    .featured-rentals-section {
        position: relative;
        padding: 5rem 0;
        background:
            radial-gradient(circle at 7% 18%, rgba(20, 184, 166, 0.06), transparent 26%),
            radial-gradient(circle at 92% 80%, rgba(250, 204, 21, 0.06), transparent 28%),
            #f8fafc;
    }

    .featured-rentals-kicker,
    .process-kicker {
        display: inline-block;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e !important;
        border: 1px solid rgba(15, 118, 110, 0.16);
        font-size: .78rem;
        font-weight: 900 !important;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: .45rem .85rem;
        border-radius: 999px;
    }

    .featured-rentals-section h2,
    .rental-process-section h2 {
        color: #0f172a;
        font-weight: 950;
        letter-spacing: -0.035em;
    }

    .featured-rentals-section p,
    .rental-process-section p {
        line-height: 1.75;
    }

    .featured-rentals-section .btn-outline-primary {
        border-radius: 999px;
        padding: .75rem 1.25rem;
        border: 2px solid #0f766e;
        color: #0f766e;
        font-weight: 850;
    }

    .featured-rentals-section .btn-outline-primary:hover {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .rental-card {
        border-radius: 32px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 26px 68px rgba(15, 23, 42, 0.11) !important;
        overflow: hidden;
        transition: all .28s ease;
        background: rgba(255, 255, 255, 0.98);
    }

    .rental-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 38px 92px rgba(15, 23, 42, 0.18) !important;
        border-color: rgba(15, 118, 110, 0.30) !important;
    }

    .rental-card .card-img-top {
        height: 270px !important;
        object-fit: cover;
    }

    .rental-card .badge {
        border: 1px solid rgba(15, 118, 110, 0.18);
        background: rgba(255, 255, 255, 0.94) !important;
        color: #0f766e !important;
        font-weight: 850;
        backdrop-filter: blur(8px);
    }

    .rental-card .card-body {
        padding: 1.5rem !important;
    }

    .rental-card .text-muted {
        color: #64748b !important;
    }

    .rental-card .text-primary {
        color: #0f766e !important;
    }

    .rental-card .btn-primary {
        border: none;
        border-radius: 999px;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        font-weight: 850;
        padding: .72rem 1rem;
        box-shadow: 0 16px 30px rgba(15, 118, 110, 0.20);
    }

    .rental-card .btn-primary:hover {
        background: linear-gradient(135deg, #0d9488, #065f46);
    }

    .rental-card .btn-outline-primary {
        border: 2px solid #0f766e;
        color: #0f766e;
        border-radius: 999px;
        font-weight: 850;
        padding: .65rem 1rem;
    }

    .rental-card .btn-outline-primary:hover {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    .empty-rentals-card {
        border-radius: 30px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09) !important;
    }

    /* =========================
       HOW IT WORKS
       ========================= */
    .rental-process-section {
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.07), transparent 28%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 30%),
            #ffffff !important;
        padding: 5rem 0 !important;
    }

    .rental-step-card {
        height: 100%;
        border-radius: 30px !important;
        border: 1px solid #e2e8f0;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10) !important;
        padding: 1.8rem 1.45rem !important;
        transition: all .28s ease;
    }

    .rental-step-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 34px 82px rgba(15, 23, 42, 0.16) !important;
        border-color: rgba(15, 118, 110, 0.28);
    }

    .rental-step-number {
        width: 72px;
        height: 72px;
        margin: 0 auto 1.1rem;
        border-radius: 26px;
        background: linear-gradient(135deg, #facc15, #0f766e);
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem !important;
        font-weight: 950 !important;
        box-shadow: 0 20px 38px rgba(15, 118, 110, 0.22);
    }

    .rental-step-card h5 {
        color: #0f172a;
        font-weight: 900;
    }

    .rental-step-card .text-muted {
        color: #64748b !important;
        line-height: 1.75;
    }

    /* =========================
       FINAL CTA
       ========================= */
    .final-rental-section {
        position: relative;
        padding: 5rem 0;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 30%),
            radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.12), transparent 34%),
            #f8fafc;
    }

    .final-rental-cta {
        position: relative;
        overflow: hidden;
        border-radius: 38px !important;
        padding: 3.3rem 2.2rem !important;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 32%),
            linear-gradient(135deg, rgba(5, 46, 37, 0.98), rgba(15, 118, 110, 0.94)) !important;
        box-shadow: 0 34px 90px rgba(15, 23, 42, 0.20);
    }

    .final-rental-cta::after {
        content: "";
        position: absolute;
        right: -110px;
        bottom: -140px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .final-rental-cta > * {
        position: relative;
        z-index: 2;
    }

    .final-rental-cta h2 {
        font-size: clamp(2rem, 3vw, 3rem);
        font-weight: 950;
        letter-spacing: -0.035em;
    }

    .final-rental-cta .lead {
        color: rgba(255, 255, 255, 0.86);
        line-height: 1.82;
    }

    .final-rental-cta .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .88rem 1.4rem;
    }

    .final-rental-cta .btn-warning {
        background: linear-gradient(135deg, #facc15, #f59e0b);
        border: none;
        color: #422006;
    }

    .final-rental-cta .btn-light:hover {
        color: #0f766e;
    }

    @media (max-width: 991.98px) {
        .rental-hero-section {
            min-height: auto;
            padding: 4.5rem 0;
        }

        .hero-side-card {
            border-radius: 28px !important;
        }

        .final-rental-cta {
            padding: 2.5rem 1.5rem !important;
        }
    }

    @media (max-width: 575.98px) {
        .rental-hero-section {
            padding: 3.5rem 0;
        }

        .rental-hero-section h1 {
            font-size: 2.45rem;
        }

        .hero-side-card,
        .rental-card,
        .rental-step-card,
        .final-rental-cta,
        .empty-rentals-card {
            border-radius: 24px !important;
        }

        .hero-stat-box,
        .rental-trust-item {
            border-radius: 20px !important;
        }

        .final-rental-cta {
            padding: 2.2rem 1.25rem !important;
        }
    }
</style>

<div class="rentals-home-page">

    <!-- HERO SECTION -->
    <section class="rental-hero-section">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-7">
                    <span class="hero-mini-title">
                        Sri Lanka Rental Living
                    </span>

                    <h1 class="display-4 fw-bold mt-3 mb-3">
                        Premium Rental Homes in Sri Lanka for Guests, Digital Nomads & Long-Stay Visitors
                    </h1>

                    <p class="lead text-muted mb-4">
                        Explore verified apartments, annexes, villas, guesthouses, and private homes
                        suited for comfortable living in Sri Lanka. Whether you are relocating, working remotely,
                        or planning retirement, we help you discover rental options with greater trust and clarity.
                    </p>

                    <div class="d-flex flex-wrap gap-3 mb-4 rental-hero-actions">
                        <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-primary btn-lg px-4">
                            Explore Rentals
                        </a>

                        {% if is_foreigner_user %}
                            <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-dark btn-lg px-4">
                                My Guest Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-dark btn-lg px-4">
                                Free Guest Signup
                            </a>
                        {% endif %}
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-sm-4">
                            <div class="hero-stat-box h-100">
                                <div class="fw-bold fs-4 text-primary">Verified</div>
                                <div class="text-muted small">Property owners and listings reviewed for quality and trust</div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="hero-stat-box h-100">
                                <div class="fw-bold fs-4 text-primary">Guest-Friendly</div>
                                <div class="text-muted small">Suitable options for expats, retirees, and digital nomads</div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="hero-stat-box h-100">
                                <div class="fw-bold fs-4 text-primary">Guided</div>
                                <div class="text-muted small">A smoother process with local support and rental guidance</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="hero-side-card overflow-hidden">
                        <img src="{% static 'expat_life/images/rentals_hero.webp' %}"
                             alt="Sri Lanka rental lifestyle"
                             class="img-fluid w-100">

                        <div class="p-4">
                            <h4 class="fw-bold mb-3">Why Guests love this rental path</h4>

                            <div class="d-flex mb-3">
                                <div class="rental-benefit-dot">
                                    <i class="bi bi-check-lg"></i>
                                </div>
                                <div>
                                    <strong>Quality property options</strong><br>
                                    <span class="text-muted">From simple apartments to premium villas and peaceful long-stay homes.</span>
                                </div>
                            </div>

                            <div class="d-flex mb-3">
                                <div class="rental-benefit-dot">
                                    <i class="bi bi-check-lg"></i>
                                </div>
                                <div>
                                    <strong>Better peace of mind</strong><br>
                                    <span class="text-muted">We focus on safer, more transparent listings for international visitors.</span>
                                </div>
                            </div>

                            <div class="d-flex">
                                <div class="rental-benefit-dot">
                                    <i class="bi bi-check-lg"></i>
                                </div>
                                <div>
                                    <strong>Ideal for relocation planning</strong><br>
                                    <span class="text-muted">Useful whether you are arriving for work, lifestyle, business, or retirement.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- TRUST STRIP -->
    <section class="rental-trust-strip">
        <div class="container">
            <div class="row text-center g-4">
                <div class="col-md-3">
                    <div class="rental-trust-item">
                        <i class="bi bi-patch-check-fill"></i>
                        <span>Verified Listings</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="rental-trust-item">
                        <i class="bi bi-house-heart-fill"></i>
                        <span>Flexible Rental Types</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="rental-trust-item">
                        <i class="bi bi-person-hearts"></i>
                        <span>Guest-Oriented Support</span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="rental-trust-item">
                        <i class="bi bi-globe-asia-australia"></i>
                        <span>Lifestyle & Relocation Friendly</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FEATURED PROPERTIES -->
    <section id="featured-properties" class="featured-rentals-section">
        <div class="container">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end mb-4">
                <div>
                    <span class="featured-rentals-kicker">Featured Collection</span>
                    <h2 class="fw-bold mt-3 mb-2">Featured Rental Properties</h2>
                    <p class="text-muted mb-0">
                        Handpicked listings suitable for Guests looking for comfort, convenience, and a better living experience in Sri Lanka.
                    </p>
                </div>

                <div class="mt-3 mt-lg-0">
                    <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-outline-primary">
                        View All Rentals
                    </a>
                </div>
            </div>

            <div class="row g-4">
                {% for property in featured_properties %}
                    <div class="col-md-6 col-xl-4">
                        <div class="card rental-card h-100">
                            <div class="position-relative">
                                {% if property.images.first %}
                                    <img src="{{ property.images.first.image.url }}"
                                        class="card-img-top"
                                        alt="{{ property.title }}">
                                {% else %}
                                    <img src="{% static 'expat_life/images/default-property.jpg' %}"
                                        class="card-img-top"
                                        alt="{{ property.title }}">
                                {% endif %}

                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="badge px-3 py-2 rounded-pill">
                                        {{ property.get_property_type_display|default:"Rental Property" }}
                                    </span>
                                </div>
                            </div>

                            <div class="card-body d-flex flex-column">
                                <div class="mb-2 text-muted small">
                                    <i class="bi bi-geo-alt me-1"></i>
                                    {{ property.city }}{% if property.area %}, {{ property.area }}{% endif %}
                                </div>

                                <h5 class="fw-bold text-dark mb-3">
                                    {{ property.title }}
                                </h5>

                                <div class="d-flex justify-content-between align-items-center mt-auto gap-3">
                                    <div>
                                        <div class="fw-bold fs-5 text-primary">${{ property.monthly_rent_usd }}</div>
                                        <div class="small text-muted">per month</div>
                                    </div>

                                    {% if request.user.is_authenticated and request.user.foreigner_profile %}
                                        <a href="{% url 'expat_life:rental_detail' property.slug %}" class="btn btn-primary px-3">
                                            View Details
                                        </a>
                                    {% elif request.user.is_authenticated %}
                                        <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary px-3">
                                            Sign Up to View More
                                        </a>
                                    {% else %}
                                        <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary px-3">
                                            Sign Up to View More
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-12">
                        <div class="empty-rentals-card p-5 text-center">
                            <h5 class="fw-bold mb-2">Featured rentals will appear here soon</h5>
                            <p class="text-muted mb-0">
                                We are preparing quality rental listings for Guests, digital nomads, and long-stay visitors.
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- HOW IT WORKS -->
    <section class="rental-process-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="process-kicker">Simple Process</span>
                <h2 class="fw-bold mt-3">How It Works</h2>
                <p class="text-muted mb-0">
                    A more guided way for Guests to explore rental living in Sri Lanka.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="rental-step-card text-center h-100">
                        <div class="rental-step-number">01</div>
                        <h5 class="fw-bold">Explore Rentals</h5>
                        <p class="text-muted mb-0">
                            Browse selected apartments, villas, annexes, and other living spaces based on your preferred lifestyle and budget.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="rental-step-card text-center h-100">
                        <div class="rental-step-number">02</div>
                        <h5 class="fw-bold">Create Your Guest Profile</h5>
                        <p class="text-muted mb-0">
                            Create your free profile to begin a more guided journey with stronger access to services and relocation support.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="rental-step-card text-center h-100">
                        <div class="rental-step-number">03</div>
                        <h5 class="fw-bold">Move Forward with Confidence</h5>
                        <p class="text-muted mb-0">
                            Continue with a clearer rental process designed to reduce confusion and improve trust for international visitors.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="final-rental-section">
        <div class="container">
            <div class="final-rental-cta text-white">
                <div class="row align-items-center g-4">
                    <div class="col-lg-8">
                        <h2 class="fw-bold mb-3">Start Your Sri Lanka Rental Journey with More Confidence</h2>
                        <p class="lead mb-0">
                            Discover living options, create your Guest profile, and move closer to a smoother relocation or long-stay lifestyle in Sri Lanka.
                        </p>
                    </div>

                    <div class="col-lg-4 text-lg-end">
                        <div class="d-grid gap-3 d-lg-flex justify-content-lg-end">
                            <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-warning btn-lg w-100 w-lg-auto">
                                Browse Rentals
                            </a>

                            {% if is_foreigner_user %}
                                <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-light btn-lg w-100 w-lg-auto">
                                    My Guest Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-light btn-lg w-100 w-lg-auto">
                                    Free Guest Signup
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

{% endblock %}