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

    {% block title %}<title>درباره توپی برزیل | ۸۵ سال تولید اتصالات چدن چکش‌خوار</title>{% endblock %}


    {% block meta %}

    <meta name="description" content="توپی (TUPY) برزیل با بیش از ۸۵ سال سابقه، از بزرگ‌ترین تولیدکنندگان اتصالات چدن چکش‌خوار جهان است. آشنایی با تاریخچه، ظرفیت تولید و بازارهای صادراتی این شرکت.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="درباره توپی برزیل | ۸۵ سال تولید اتصالات چدن چکش‌خوار">
    <meta property="og:description" content="توپی (TUPY) برزیل با بیش از ۸۵ سال سابقه، از بزرگ‌ترین تولیدکنندگان اتصالات چدن چکش‌خوار جهان است. آشنایی با تاریخچه، ظرفیت تولید و بازارهای صادراتی این شرکت.">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/og-image.webp' %}">

        <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "خانه", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
        { "@type": "ListItem", "position": 2, "name": "درباره توپی" }
      ] }
    </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="درباره توپی"
                    class="w-full h-full object-cover block"
                    />
                    
                </div>

                <!-- Text Side -->

                <div
                    dir="rtl"
                    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 text-right"
                >
                    <h1 class="font-YekanExtraBold text-[#6ecff6] text-[clamp(42px,5vw,70px)] leading-tight mb-6 laptop:mb-4 mobile:text-[28px]">
                    درباره توپی برزیل، تولیدکننده اتصالات چدنی
                    </h1>
                    <p class="font-YekanRegular text-[#c8d8ea] text-[clamp(15px,1.4vw,20px)] mobile:text-[14px] leading-[2] text-justify">
                    شرکت توپی یکی از پیشرفته‌ترین ریخته‌گری‌های آمریکای لاتین در تولید
                    بلوک موتور، سرسیلندر و قطعات چدنی صنعتی است. محصولات توپی به دلیل
                    کیفیت بالا و دقت مهندسی، در صنایع خودروسازی و موتورهای دیزلی استفاده
                    می‌شوند. این شرکت با استفاده از همان فناوری و آلیاژهای پیشرفته،
                    اتصالات دنده‌ای و صنعتی خود را تولید می‌کند. اتصالات توپی به دلیل
                    استحکام بالا و کیفیت ممتاز، در پروژه‌های صنعتی و تأسیساتی مورد اعتماد
                    هستند.
                    </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 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]">
                    برخی از مشتریان سیلندر و بلوک موتورهای توپی
                </h2>
                <img src="{% static 'img/about/icons/moshtari.png' %}" alt="مشتریان" 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="فولکس‌واگن از مشتریان شرکت توپی برزیل" 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="مرسدس بنز از مشتریان شرکت توپی برزیل" 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="ب‌ام‌و از مشتریان شرکت توپی برزیل" 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="جی‌ام‌سی از مشتریان شرکت توپی برزیل" 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="جیپ از مشتریان شرکت توپی برزیل" 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="مان از مشتریان شرکت توپی برزیل" 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="پورشه از مشتریان شرکت توپی برزیل" 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="اسکانیا از مشتریان شرکت توپی برزیل" 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="آئودی از مشتریان شرکت توپی برزیل" 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 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]">
                    تاریخچه توپی
                </h2>
                <img src="{% static 'img/about/icons/calendar.png' %}" alt="" 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" dir="rtl">

                    <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">
                            شرکت توپی توسط شرکای Albano Schmidt، Hermann Metz و Arno Schwartz تأسیس شد، با هدف تولید اتصالات لوله که تا آن زمان در برزیل تولید نمی‌شدند
                        </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">
                            اولین قرارداد تأمین قطعات خودرو با شرکت فولکس‌واگن برزیل منعقد شد
                        </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 – توپی کارخانه جدیدی در برزیل افتتاح و تولید قطعات تراکتور را آغاز کرد.<br/>
                            1976 – تولید بلوک موتور و سرسیلندر در کارخانه جدید Joinville برزیل آغاز شد.
                        </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">
                            بخش عمده سهام توپی خریداری شد و این شرکت کارخانه ریخته‌گری مرسدس بنز را نیز به مالکیت خود درآورد.
                        </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">
                            توپی به یکی از بزرگ‌ترین صادرکنندگان قطعات ریخته‌گری خودرو و ماشین‌آلات صنعتی تبدیل شد.
                        </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">
                            سرمایه‌گذاری در فناوری‌های مهندسی، اتوماسیون تولید و سیستم‌های پیشرفته کنترل کیفیت
                        </p>
                    </div>
                    
                </div>

            </div>
        </div>

        <!-- Mobile Slider -->

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

            <!-- 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">
                            شرکت توپی توسط شرکای Albano Schmidt، Hermann Metz و Arno Schwartz
                            تأسیس شد، با هدف تولید اتصالات لوله که تا آن زمان در برزیل تولید نمی‌شدند
                        </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">
                            اولین قرارداد تأمین قطعات خودرو با شرکت فولکس‌واگن برزیل منعقد شد
                        </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 – توپی کارخانه جدیدی در برزیل افتتاح و تولید قطعات تراکتور را آغاز کرد.<br/>
                            1976 – تولید بلوک موتور و سرسیلندر در کارخانه جدید Joinville برزیل آغاز شد.
                        </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">
                            بخش عمده سهام توپی خریداری شد و این شرکت کارخانه ریخته‌گری مرسدس بنز را نیز به مالکیت خود درآورد.
                        </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">
                            توپی به یکی از بزرگ‌ترین صادرکنندگان قطعات ریخته‌گری خودرو و ماشین‌آلات صنعتی تبدیل شد.
                        </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">
                            سرمایه‌گذاری در فناوری‌های مهندسی، اتوماسیون تولید و سیستم‌های پیشرفته کنترل کیفیت
                        </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 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]">
                    هدف
                </h2>
                <img src="{% static 'img/about/icons/hadaf.png' %}" alt="" 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" dir="rtl">

                <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">
                            هدف توپی ارائه راهکارهای مطمئن، نوآورانه و مطابق با بالاترین استانداردهای جهانی در صنعت اتصالات و قطعات چدنی است.
                        </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">
                            این شرکت با بهره‌گیری از فناوری‌های پیشرفته، مهندسی دقیق و کنترل کیفیت مستمر، در تلاش است محصولاتی ایمن، بادوام و قابل اعتماد برای پروژه‌های صنعتی، ساختمانی و زیرساختی در سراسر جهان تولید کند.
                        </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">
                            تعهد توپی به کیفیت، توسعه پایدار و رضایت مشتریان باعث شده است که این برند در بسیاری از پروژه‌های بین‌المللی به عنوان نامی معتبر و قابل اعتماد شناخته شود.
                        </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="هدف توپی"
                        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 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]">
                    توپی در ایران
                </h2>
                <img src="{% static 'img/about/icons/iran.png' %}" alt="" 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" dir="rtl">

                <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">
                           محصولات توپی ساخت کشور برزیل، بیش از ۴۰ سال است که در بازار ایران حضور دارند و به عنوان یکی از برندهای معتبر و قابل اعتماد در حوزه اتصالات صنعتی و تأسیساتی شناخته می‌شوند. کیفیت جهانی، دوام بالا و تولید مطابق با استانداردهای بین‌المللی باعث شده است که این محصولات در بسیاری از پروژه‌های ساختمانی، صنعتی و زیرساختی کشور مورد استفاده قرار گیرند.
                        </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">
                           حضور گسترده در بازار ایران، همراه با شبکه فروش و تأمین مناسب، دسترسی سریع و پشتیبانی مطمئن را برای مشتریان فراهم کرده و توپی را به یکی از انتخاب‌های اصلی فعالان این صنعت تبدیل نموده است.
                        </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/about/images/iran.png' %}"
                        alt="هدف توپی"
                        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 %}