{% extends "_base.html" %} 
{% load static %}

    {% block title %}<title>About TUPY Brazil | 85 Years of Malleable Iron Fittings</title>{% endblock %}


    {% block meta %}

    <meta name="description" content="TUPY of Brazil has been casting for more than 85 years and is one of the world's largest makers of malleable cast iron pipe fittings. Its history, production capacity and export markets.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="About TUPY Brazil | 85 Years of Malleable Iron Fittings">
    <meta property="og:description" content="TUPY of Brazil has been casting for more than 85 years and is one of the world's largest makers of malleable cast iron pipe fittings. Its history, production capacity and export markets.">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/cover.png' %}">

        <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
        { "@type": "ListItem", "position": 2, "name": "About TUPY" }
      ] }
    </script>

{% endblock %}
    
    {% block content %}

    <!-- Banner -->

    <section class="overflow-hidden my-10">
        <div class="container mx-auto">

            <div class="flex laptop:flex-col items-stretch min-h-[420px]">

                <!-- Image Side -->

                <div class="relative w-[45%] h-[100%] mt-10 laptop:w-full laptop:h-[100%] flex-shrink-0">
                    <img
                    src="{% static 'img/about/banner/about.png' %}"
                    alt="Malleable cast iron foundry work and TUPY Brazil fittings"
                    class="w-full h-full object-cover block"
                    />
                    
                </div>

                <!-- Text Side -->

                <div
                    class="w-[55%] laptop:w-full py-[50px] pl-20 laptop:px-5 laptop:py-7 mobile:px-4 mobile:py-6 flex flex-col justify-center items-start"
                >
                    <h1 class="font-YekanExtraBold text-[#6ecff6] text-[clamp(42px,5vw,70px)] leading-tight mb-6 laptop:mb-4 mobile:text-[28px]">
                    About TUPY Brazil, the cast iron fittings manufacturer
                    </h1>
                    <p class="font-YekanRegular text-[#c8d8ea] text-[clamp(15px,1.4vw,20px)] mobile:text-[14px] leading-[2] text-justify">
                    TUPY runs some of the most advanced foundries in Latin America,
                    casting engine blocks, cylinder heads and industrial iron
                    components. Carmakers and diesel engine builders use its castings
                    for their quality and engineering accuracy. The same technology and
                    the same alloys go into the company's threaded and industrial pipe
                    fittings, which is why TUPY fittings are relied on for their
                    strength and finish on industrial and building services projects.
                    </p>
                </div>

            </div>
        </div>
    </section>

    <!-- Users -->  

    <section class="py-10 mobile:py-7 overflow-hidden">
        <div class="container mx-auto px-6 mobile:px-4">

            <!-- Titles -->
            
            <div class="flex flex-row-reverse items-center justify-end gap-3 mb-10 mobile:mb-7">
                <h2 class="font-YekanExtraBold text-[#6ecff6] text-[30px] mobile:text-[13px] laptop:text-[20px]">
                    Some of the customers for TUPY engine blocks and cylinder heads
                </h2>
                <img src="{% static 'img/about/icons/moshtari.png' %}" alt="Customers" class="w-11 h-9 mobile:w-9 mobile:h-7" />
            </div>

        </div>


        <div class="relative w-full">

            <div class="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-[#0a1628] to-transparent z-10 pointer-events-none"></div>

            <div class="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-[#0a1628] to-transparent z-10 pointer-events-none"></div>

            <div class="flex overflow-hidden">

                <div class="flex items-center gap-16 laptop:gap-10 tablet:gap-8 animate-marquee shrink-0">

                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/wolkswagun.png' %}" alt="Volkswagen" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/benz.png' %}" alt="Mercedes-Benz" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/bmw.png' %}" alt="BMW" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/gmc.png' %}" alt="GMC" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/jeep.png' %}" alt="Jeep" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/man.png' %}" alt="MAN" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/porsche.png' %}" alt="Porsche" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/scania.png' %}" alt="Scania" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/audi.png' %}" alt="Audi" class="w-full h-auto object-contain filter brightness-0 invert opacity-80 hover:opacity-100 transition-opacity duration-200" />
                    </div>

                </div>

                <div class="flex items-center gap-16 laptop:gap-10 tablet:gap-8 animate-marquee shrink-0 pl-16 laptop:pl-10 tablet:pl-8 mobile:pl-16" aria-hidden="true">

                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/wolkswagun.png' %}" alt="Volkswagen, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/benz.png' %}" alt="Mercedes-Benz, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/bmw.png' %}" alt="BMW, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/gmc.png' %}" alt="GMC, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/jeep.png' %}" alt="Jeep, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/man.png' %}" alt="MAN, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/porsche.png' %}" alt="Porsche, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/scania.png' %}" alt="Scania, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>
                    <div class="flex items-center justify-center w-[100px] desktop:w-[70px] laptop:w-[55px] tablet:w-[45px] shrink-0">
                        <img src="{% static 'img/about/users/audi.png' %}" alt="Audi, a customer of TUPY Brazil" class="w-full h-auto object-contain filter brightness-0 invert opacity-80" />
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- History -->

    <section class="py-10 mobile:py-7 overflow-hidden">
        <div class="container mx-auto px-6 mobile:px-4">

            <!-- Titles -->

            <div class="flex flex-row-reverse items-center justify-end gap-3 mb-10 mobile:mb-7">
                <h2 class="font-YekanExtraBold text-[#6ecff6] text-[30px] mobile:text-[13px] laptop:text-[20px]">
                    TUPY history
                </h2>
                <img src="{% static 'img/about/icons/calendar.png' %}" alt="TUPY Brazil history and milestones" class="w-11 h-9 mobile:w-9 mobile:h-7" />
            </div>

        </div>

        <!-- Desktop -->

        <div class="relative w-full mobile:hidden">
            <div class="container mx-auto px-6">

                
                <div class="grid grid-cols-6 gap-4 mb-6">

                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/2010.jpg' %}" alt="2010" class="w-full h-full object-cover" />
                    </div>
                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/2000.jpg' %}" alt="2000" class="w-full h-full object-cover" />
                    </div>
                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/1995.jpg' %}" alt="1995" class="w-full h-full object-cover" />
                    </div>
                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/1960-1980.jpg' %}" alt="1960" class="w-full h-full object-cover" />
                    </div>
                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/1957.jpg' %}" alt="1957" class="w-full h-full object-cover" />
                    </div>
                    <div class="rounded-xl overflow-hidden h-[160px] desktop:h-[130px] laptop:h-[110px] tablet:h-[100px]">
                        <img src="{% static 'img/about/history/1938.jpg' %}" alt="1938" class="w-full h-full object-cover" />
                    </div>

                </div>


                <div class="relative flex items-center mb-6">

                    <div class="absolute left-0 right-0 h-[2px] bg-[#1e3a5f]"></div>

                    <div class="grid grid-cols-6 w-full relative z-10">
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                        <div class="flex justify-center"><div class="w-3 h-3 rounded-full bg-[#6ecff6] border-2 border-[#6ecff6] shadow-[0_0_8px_#6ecff6]"></div></div>
                    </div>
                </div>

                <!-- Text -->

                <div class="grid grid-cols-6 gap-4">

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px]  mb-2">1938</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            TUPY was founded by Albano Schmidt, Hermann Metz and Arno Schwartz to make pipe fittings, which until then were not produced in Brazil
                        </p>
                    </div>

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px]  mb-2">1957</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            The first contract to supply automotive components was signed, with Volkswagen do Brasil
                        </p>
                    </div>

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px] mb-2">1960-1980</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            1963 - TUPY opened a new plant in Brazil and began making tractor components.<br/>
                            1976 - Engine block and cylinder head production started at the new Joinville plant in Brazil.
                        </p>
                    </div>

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px]  mb-2">1995</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            A majority holding in TUPY changed hands and the company also took ownership of the Mercedes-Benz foundry.
                        </p>
                    </div>

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px]  mb-2">2000</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            TUPY became one of the largest exporters of cast components for vehicles and industrial machinery.
                        </p>
                    </div>

                    <div class="text-center">
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[22px] desktop:text-[18px] laptop:text-[15px] tablet:text-[10px]  mb-2">2010</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] desktop:text-[11px] laptop:text-[7px] laptop:leading-4 leading-6 text-center tablet:text-[6px] tablet:leading-3">
                            Investment in engineering technology, production automation and advanced quality control systems
                        </p>
                    </div>
                    
                </div>

            </div>
        </div>

        <!-- Mobile Slider -->

        <div class="hidden mobile:block relative">

            <!-- slides wrapper -->

            <div class="overflow-hidden" id="historySlider">
                <div class="flex transition-transform duration-500 ease-in-out" id="historyTrack">

                    <!-- Slide 1 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/1938.jpg' %}" alt="1938" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">1938</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            TUPY was founded by Albano Schmidt, Hermann Metz and Arno
                            Schwartz to make pipe fittings, which until then were not produced in Brazil
                        </p>
                    </div>

                    <!-- Slide 2 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/1957.jpg' %}" alt="1957" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">1957</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            The first contract to supply automotive components was signed, with Volkswagen do Brasil
                        </p>
                    </div>

                    <!-- Slide 3 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/1960-1980.jpg' %}" alt="1960-1980" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">1960–1980</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            1963 - TUPY opened a new plant in Brazil and began making tractor components.<br/>
                            1976 - Engine block and cylinder head production started at the new Joinville plant in Brazil.
                        </p>
                    </div>

                    <!-- Slide 4 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/1995.jpg' %}" alt="1995" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">1995</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            A majority holding in TUPY changed hands and the company also took ownership of the Mercedes-Benz foundry.
                        </p>
                    </div>

                    <!-- Slide 5 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/2000.jpg' %}" alt="2000" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">2000</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            TUPY became one of the largest exporters of cast components for vehicles and industrial machinery.
                        </p>
                    </div>

                    <!-- Slide 6 -->
                    <div class="min-w-full px-6 text-center">
                        <div class="rounded-2xl overflow-hidden mb-5 h-[220px]">
                            <img src="{% static 'img/about/history/2010.jpg' %}" alt="2010" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="font-YekanExtraBold text-[#6ecff6] text-[26px] mb-3">2010</h3>
                        <p class="font-YekanRegular text-[#a0b4c8] text-[13px] leading-7">
                            Investment in engineering technology, production automation and advanced quality control systems
                        </p>
                    </div>

                </div>
            </div>

            <div class="flex items-center justify-center gap-4 mt-6">
                <button id="historyPrev" class="w-9 h-9 rounded-full border border-[#6ecff6] text-[#6ecff6] flex items-center justify-center text-lg hover:bg-[#6ecff6] hover:text-[#0a1628] transition-all duration-200">
                    &#8249;
                </button>

                <div class="flex gap-2" id="historyDots">
                    <div class="w-2 h-2 rounded-full bg-[#6ecff6]"></div>
                    <div class="w-2 h-2 rounded-full bg-[#1e3a5f]"></div>
                    <div class="w-2 h-2 rounded-full bg-[#1e3a5f]"></div>
                    <div class="w-2 h-2 rounded-full bg-[#1e3a5f]"></div>
                    <div class="w-2 h-2 rounded-full bg-[#1e3a5f]"></div>
                    <div class="w-2 h-2 rounded-full bg-[#1e3a5f]"></div>
                </div>
                <button id="historyNext" class="w-9 h-9 rounded-full border border-[#6ecff6] text-[#6ecff6] flex items-center justify-center text-lg hover:bg-[#6ecff6] hover:text-[#0a1628] transition-all duration-200">
                    &#8250;
                </button>
            </div>

        </div>

    </section>

    <!-- Purpose -->

    <section class="py-10 mobile:py-7 overflow-hidden">
        <div class="container mx-auto px-6 mobile:px-4">

            <!-- Titles -->

            <div class="flex flex-row-reverse items-center justify-end gap-3 mb-12 mobile:mb-5">
                <h2 class="font-YekanExtraBold text-[#6ecff6] text-[30px] mobile:text-[20px] laptop:text-[20px]">
                    Purpose
                </h2>
                <img src="{% static 'img/about/icons/hadaf.png' %}" alt="The purpose and vision of TUPY Brazil" class="w-11 h-11 mobile:w-8 mobile:h-8" />
            </div>


            <div class="flex flex-row-reverse items-center gap-14 desktop:gap-10 laptop:gap-8 tablet:flex-col tablet:gap-10">

                <div class="w-[50%] h-[400px] laptop:h-full laptop:w-[52%] tablet:w-full flex items-start justify-start tablet:items-center tablet:justify-center flex-col gap-7 laptop:gap-5">

                    <div class="w-[720px] tablet:w-full 2xl:w-[80%]">
                        <p class="font-YekanRegular text-white text-[18px] desktop:text-[15px] laptop:text-[9px] mobile:text-[13px] leading-[2.2] text-justify my-1">
                            TUPY's purpose is to supply dependable, innovative solutions that meet the highest international standards in fittings and cast iron components.
                        </p>

                        <p class="font-YekanRegular text-white text-[18px] desktop:text-[15px] laptop:text-[9px] mobile:text-[13px] leading-[2.2] text-justify my-1">
                            Working with advanced process technology, precise engineering and continuous quality control, the company sets out to make safe, durable and dependable products for industrial, building and infrastructure projects worldwide.
                        </p>

                        <p class="font-YekanRegular text-white text-[18px] desktop:text-[15px] laptop:text-[9px] mobile:text-[13px] leading-[2.2] text-justify my-1">
                            That commitment to quality, to sustainable development and to its customers has made TUPY a name that international projects specify with confidence.
                        </p>
                    </div>

                </div>

                <div class="w-[50%] px-10 h-[400px] laptop:h-full flex items-center justify-end laptop:w-[48%] tablet:w-full">
                    <img
                        src="{% static 'img/about/images/about.png' %}"
                        alt="Malleable cast iron foundry work and TUPY Brazil fittings"
                        class="w-[570px] object-contain"
                    />
                </div>

            </div>

        </div>
    </section>

    <!-- Map -->

    <section class="py-10 mobile:py-7 overflow-hidden">
        <div class="container mx-auto px-6 mobile:px-4">

            <!-- Titles -->

            <div class="flex flex-row-reverse items-center justify-end gap-3 mb-12 mobile:mb-5">
                <h2 class="font-YekanExtraBold text-[#6ecff6] text-[30px] mobile:text-[20px] laptop:text-[20px]">
                    TUPY in the Middle East
                </h2>
                <img src="{% static 'img/about/icons/iran.png' %}" alt="TUPY Brazil fittings in the Middle East" class="w-9 h-12 mobile:w-8 mobile:h-10" />
            </div>


            <div class="flex flex-row items-center gap-14 desktop:gap-10 laptop:gap-8 tablet:flex-col tablet:gap-10">

                <div class="w-[50%] h-[400px] laptop:h-full laptop:w-[52%] tablet:w-full flex items-start justify-start tablet:items-center tablet:justify-center flex-col gap-7 laptop:gap-5">

                    <div class="w-[720px] tablet:w-full 2xl:w-[80%]">
                        <p class="font-YekanRegular text-white text-[18px] desktop:text-[15px] laptop:text-[9px] mobile:text-[13px] leading-[2.2] text-justify my-1">
                           TUPY fittings reach the Middle East through Amini Building Materials Trading L.L.C of Dubai, the exclusive agent of TUPY S.A. for the region. Stock is held in Dubai in galvanised and black, from 1/4in to 6in, and shipped across the Gulf and Iraq.
                        </p>

                        <p class="font-YekanRegular text-white text-[18px] desktop:text-[15px] laptop:text-[9px] mobile:text-[13px] leading-[2.2] text-justify my-1">
                           The range is UL Listed, FM Approved, DVGW certified and made to ABNT standards, so the same fittings can be specified for fire protection, building services and industrial piping. Holding the stock in the region means short lead times and one point of technical support for contractors and wholesalers.
                        </p>
                    </div>

                </div>

                <div class="w-[50%] px-10 h-[400px] laptop:h-full flex items-center justify-start laptop:w-[48%] tablet:w-full">
                    <img
                        src="{% static 'img/middle-east-network.svg' %}"
                        alt="TUPY Brazil fittings supplied across the Middle East from Dubai"
                        class="w-[550px] object-contain"
                    />
                </div>

            </div>

        </div>
    </section>

    <br><br><br>

    {% endblock content %}


    <br><br><br>


    {% block js %}
    
    <script src="{% static 'js/about.js' %}"></script>

    {% endblock %}