{% load static %}

<img src="{% static 'img/section.jpg' %}"/>
<div id="contact" class="w-full flex flex-col lg:flex-row gap-10 transition-all duration-500 text-[#435166]">
    <!-- Leva strana -->
    <div class="relative lg:w-1/2">
        <img src="{% static 'img/contact.png' %}" class="object-cover h-[800px]"/>
        <div class="absolute inset-0 flex items-center justify-center px-4 text-[#435166]">
            <h2 class="font-bold" style="font-size: clamp(2rem, 16vw, 6rem);"> KONTAKT</h2>
        </div>
    </div>

    <!-- Desna strana -->
    <div class="lg:w-1/2 w-full flex flex-col justify-center px-5 py-4 relative bg-white gap-10 lg:gap-20">
        <div class="flex flex-col">
            <h2 class="font-semibold text-4xl mb-6">Pronadjite nas</h2>
            <div class="flex flex-col">
                <p class="font-bold">Adresa</p>
                <p>Vojislava Nanovića 4v, 11000 Beograd, Srbija</p>
            </div>
        </div>
        <div class="flex flex-col">
            <h2 class="font-semibold text-4xl mb-6">Kontaktirajte nas</h2>
            <div class="flex flex-col mb-2">
                <p class="font-bold">Telefon</p>
                <p>+381 63 26 22 66</p>
            </div>
            <div class="flex flex-col">
                <p class="font-bold">E-mail</p>
                <p>office@luenpro.com</p>
            </div>
        </div>
    </div>
</div>