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

    {% block title %}<title>اتصالات توپی برزیل | لیست قیمت {{ jyear }} و نماینده رسمی TUPY</title>{% endblock %}

    {% block custom_css %}
    <link rel="preload" as="image" href="/media/brand/hero-fittings.webp" fetchpriority="high">
    

    {% endblock custom_css %}

    

    {% block content %}


    <!-- Banner -->

    <style>
    .hero{position:relative;overflow:hidden}
    .hero-media{position:relative}
    .hero-media::before{content:"";position:absolute;left:8%;bottom:7%;width:68%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 72%);z-index:0}
    .hero-media img{position:relative;z-index:1}
    .hero .container{overflow:visible!important;height:auto!important;align-items:stretch}
    .hero-copy{height:auto!important;min-height:700px;justify-content:center!important;gap:6px}
    @media(max-width:1024px){.hero-copy{min-height:0!important;padding-bottom:22px}}
    .hero-cta{display:flex;gap:12px;flex-wrap:wrap;width:100%;margin:4px 0 18px}
    .hero-cta a{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:6px;font-size:15px;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease}
    .hero-cta .primary{background:#6ecff6;color:#041430;font-weight:700}
    .hero-cta .primary:hover{background:#93ddfb}
    .hero-cta .ghost{border:1px solid #24446c;color:#c8d8ea;background:transparent}
    .hero-cta .ghost:hover{border-color:#6ecff6;color:#fff}
    .hero a[download]{background:#061b3e!important;border:1px solid #1d3c68;box-shadow:none!important;border-radius:6px!important}
    .hero a[download]:hover{border-color:#3d6795;background:#0a2247!important;transform:none!important;filter:none!important;box-shadow:none!important}
    .hero a.dl{position:relative;overflow:hidden;background:#061b3e!important;border:1px solid #1d3c68;border-radius:6px!important;box-shadow:none!important;transition:border-color .22s ease,background .22s ease}
    .hero a.dl::before{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--c)}
    .hero a.dl:hover{border-color:var(--c);background:#0a2247!important;transform:none!important;filter:none!important;box-shadow:none!important}
    .hero a.dl p{color:#c8d8ea!important;transition:color .22s ease}
    .hero a.dl:hover p{color:#fff!important}
    .hero a.dl-pres{--c:#6ecff6}
    .hero a.dl-bsp{--c:#896e65}
    .hero a.dl-npt{--c:#236fa3}
    .hero a.dl-price{--c:#93a9c0}

    /* stacked layout below the laptop breakpoint: let the product image size itself */
    @media(max-width:1024px){
      .hero-media{height:auto!important;min-height:0!important;padding:18px 0 6px!important;justify-content:center!important;align-items:center!important}
      .hero-media img{max-height:400px;height:auto;width:auto;max-width:82%}
      .hero-media::before{bottom:2%;height:9%}
    }
    @media(max-width:768px){.hero-media img{max-height:300px;max-width:78%}}
    @media(max-width:480px){.hero-media{padding:10px 0 0!important}.hero-media img{max-height:210px;max-width:74%}}
    @media(max-width:900px){.hero-cta a{height:46px;padding:0 18px;font-size:14.5px;flex:1 1 auto}}
    </style>

    <section class="hero">
        <div class="relative">

            <!-- Banner Shapes -->

            <img data-anim="up" class="absolute w-40 top-0 left-[4.5%] mobile:w-[70px]" src="{% static 'img/banner/madebrazil.png' %}" alt="اتصالات توپی ساخت برزیل">
            {% comment %} <img class="absolute tablet:hidden w-[370px] desktop:w-[300px] laptop:w-[250px] top-0 left-[10%] 2xl:left-[13%] desktop:left-[17%] laptop:left-[23%]" src="{% static 'img/banner/triangle.png' %}" alt="triangle"> {% endcomment %}

            <div class="container overflow-hidden flex laptop:flex-col items-center justify-between mt-5">

                <div data-anim="right" class="hero-media w-[45%] laptop:w-full h-[700px] desktop:h-[700px] tablet:h-[500px] mobile:h-[250px] flex items-end justify-start laptop:justify-center laptop:items-center px-14 desktop:px-5">
                    <img class="w-[660px]" src="/media/brand/hero-fittings.webp" width="712" height="528" fetchpriority="high" decoding="async" alt="اتصالات دنده‌ای توپی برزیل گالوانیزه و سیاه">
                </div>

                <div dir="rtl" class="hero-copy w-[55%] laptop:w-full h-[700px] desktop:h-[700px] mobile:h-full mobile:my-6 flex flex-col items-start justify-between pt-14 laptop:pt-0 tablet:pt-0 mobile:p-0 mobile:items-center mobile:justify-center">
                  
                    <div data-anim="left" class="desktop-text mobile:hidden">
                        <h1 class="text-[70pt] 3xl:text-6xl 3xl:leading-[80px] desktop:text-5xl desktop:leading-[70px] laptop:text-6xl laptop:leading-[70px] tablet:text-5xl tablet:leading-[60px] mobile:text-[20px] text-white font-YekanExtraBold"><span class="font-YekanRegular" style="display:block;font-size:26px;line-height:1.5;color:#8fa3b8;margin-bottom:18px;letter-spacing:.2px">اتصالات توپی برزیل</span><span style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0"> | </span>اتصالاتی که  <br> <span class="text-[#6ecff6]">ایمنی</span> را <span class="text-[#6ecff6]">تضمین</span> می‌کند </h1>

                        <hr class="w-[30%] bg-[#6ecff6] h-1 my-5">

                        <p class="font-YekanRegular text-white text-[38px] desktop:text-[24px] laptop:text-[30px] mobile:text-xl">ﺗﻨﻬﺎ اﺗﺼﺎﻻت <br> دﻧﺪه‌ای دارای ﮔﺎراﻧﺘﯽ در اﯾﺮان</p>
                    </div>

                    <div data-anim="up" class="mobile-text w-full hidden mobile:flex flex-col items-center justify-center">
                        <h1 class="font-YekanExtraBold text-white text-[21px]" style="text-align:center"><span class="font-YekanRegular" style="display:block;font-size:14px;line-height:1.5;color:#8fa3b8;margin-bottom:8px">اتصالات توپی برزیل</span><span style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0"> | </span>اتصالاتی که <span class="text-[#6ecff6]">ایمنی</span> را <span class="text-[#6ecff6]">تضمین</span> می‌کند </h1>

                        <hr class="w-[30%] mobile:w-full bg-[#6ecff6] h-1 my-5">

                        <p class="font-YekanRegular text-white text-[18px]">ﺗﻨﻬﺎ اﺗﺼﺎﻻت  دﻧﺪه‌ای دارای ﮔﺎراﻧﺘﯽ در اﯾﺮان</p>
                    </div>

                    <div data-anim="up" style="--d:.1s" class="flex mobile:items-center mobile:justify-between mobile:w-full desktop:flex-wrap mobile:flex-nowrap my-5 gap-3 text-white">
                        <div class="w-48 mobile:w-1/3 h-20 flex items-center justify-start gap-2 transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-20 mobile:w-8" src="{% static 'img/banner/CONECTION.png' %}" alt="Connection">
                            <p class="text-[14px] mobile:text-[7px] font-YekanRegular">کیفیت <br>  قابل اعتماد</p>
                        </div>
                        <div class="w-48 mobile:w-1/3 h-20 flex items-center justify-start gap-2 transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-20 mobile:w-8" src="{% static 'img/banner/GEARICON.png' %}" alt="Gear">
                            <p class="text-[14px] mobile:text-[7px] font-YekanRegular">طراحی  <br> مهندسی شده</p>
                        </div>
                        <div class="w-48 mobile:w-1/3 h-20 flex items-center justify-start gap-2 transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-20 mobile:w-8" src="{% static 'img/banner/SHIELDICON.png' %}" alt="">
                            <p class="text-[14px] mobile:text-[7px] font-YekanRegular">طول عمر و  <br> مقاومت بسیار بالا</p>
                        </div>
                    </div>

                    <div data-anim="up" style="--d:.15s" class="hero-cta font-YekanRegular">
                        <a class="primary" href="/products#fittings">مشاهده اتصالات و قیمت روز</a>
                        <a class="ghost" href="/representatives">لیست نمایندگان</a>
                    </div>

                    <div data-anim="up" style="--d:.2s" class="w-full grid grid-cols-4 3xl:grid-cols-2 mobile:grid-cols-2 gap-3">
    
                        <a href="{{ documents.pdf_2.url }}" class="dl dl-pres h-20 mobile:h-16 bg-[#549dc6] rounded-lg flex items-center justify-between px-4 transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.03] hover:shadow-xl hover:shadow-[#549dc6]/40 hover:brightness-110" download>
                            <img src="{% static 'img/banner/download.png' %}" alt="download" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain transition-transform duration-300">
                            <p class="font-YekanRegular text-right text-white text-sm mobile:text-[9px] leading-5 mobile:leading-4">دانلود کاتالوگ <br> اتصالات TUPYPRES</p>
                            <img src="{% static 'img/banner/pdf.png' %}" alt="PDF icon" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain">
                        </a>

                        <a href="{{ documents.pdf_3.url }}" class="dl dl-bsp h-20 mobile:h-16 bg-[#726252] rounded-lg flex items-center justify-between px-4 transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.03] hover:shadow-xl hover:shadow-[#726252]/40 hover:brightness-110" download>
                            <img src="{% static 'img/banner/download.png' %}" alt="download" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain transition-transform duration-300">
                            <p class="font-YekanRegular text-right text-white text-sm mobile:text-[9px] leading-5 mobile:leading-4">دانلود کاتالوگ <br> اتصالات TUPY BSP</p>
                            <img src="{% static 'img/banner/pdf.png' %}" alt="PDF icon" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain">
                        </a>

                        <a href="{{ documents.pdf_4.url }}" class="dl dl-npt h-20 mobile:h-16 bg-[#549dc6] rounded-lg flex items-center justify-between px-4 transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.03] hover:shadow-xl hover:shadow-[#549dc6]/40 hover:brightness-110" download>
                            <img src="{% static 'img/banner/download.png' %}" alt="download" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain transition-transform duration-300">
                            <p class="font-YekanRegular text-right text-white text-sm mobile:text-[9px] leading-5 mobile:leading-4">دانلود کاتالوگ <br> اتصالات TUPY NPT</p>
                            <img src="{% static 'img/banner/pdf.png' %}" alt="PDF icon" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain">
                        </a>

                        <a href="{{ documents.pdf_1.url }}" class="dl dl-price h-20 mobile:h-16 bg-[#549dc6] rounded-lg flex items-center justify-between px-4 transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.03] hover:shadow-xl hover:shadow-[#549dc6]/40 hover:brightness-110" download>
                            <img src="{% static 'img/banner/download.png' %}" alt="download" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain transition-transform duration-300">
                            <p class="font-YekanRegular text-right text-white text-sm mobile:text-[9px] leading-5 mobile:leading-4">لیست قیمت</p>
                            <img src="{% static 'img/banner/pdf.png' %}" alt="PDF icon" class="h-8 w-8 mobile:h-5 mobile:w-5 object-contain">
                        </a>

                    </div>
                    
                </div>

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

    <br>

    <!-- Slider Catalog -->

    <section class="py-10 px-4 tablet:px-0 my-9 relative mobile:my-0 mobile:py-5">

        <div data-anim="up" class="section-title h-20 flex flex-col items-center justify-center mb-8">
            <h2 class="font-YekanBold text-3xl text-white relative inline-block pb-1">
                محصولات
                <span class="absolute -bottom-1 left-0 w-full h-[3px] bg-[#347eff]"></span>
            </h2>
        </div>

        <div class="shape absolute top-0 -z-10">
            <img src="{% static 'img/shape1.png' %}" alt="shape">
        </div>

        <div data-anim="up" class="slider-catalog w-full ">
            <div class="container slider-container p-0 relative mx-auto">
                <div class="overflow-hidden rounded-2xl">
                    <div class="slider-track flex justify-between gap-3 transition-transform duration-500">


                        <!-- Slides -->

                        {% for product in products %}

                        <div data-anim="zoom" style="--d:{{ forloop.counter0 }}00ms" style="border-color: {{ product.color }};" class="slide-card bg-[#061b3e] 2xl:w-[49.5%] laptop:w-[49%] tablet:w-[99%] laptop:h-[500px] w-[32.8%] h-[310px] border-[2px] rounded-2xl flex laptop:flex-col tablet:flex-row tablet:h-[210px] tablet:border-0 tablet:bg-transparent justify-between flex-shrink-0 transition-transform duration-300 hover:-translate-y-2">
                            
                            <div class="image-catalog h-full flex items-center justify-center ml-8">
                                <div class="flex items-center justify-center h-full pt-7 rounded-2xl w-full ">
                                    <img class="object-cover w-full laptop:w-[200px] tablet:w-[150px] rounded-2xl transition-transform duration-500 hover:scale-105" src="{{ product.image.url }}" alt="{{ product.name }}">
                                </div>
                            </div>

                            <div class="flex items-start justify-center h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div dir="rtl" class="flex flex-col justify-start gap-2 mt-9 laptop:mt-0 tablet:mt-9 mr-8 w-[257px] desktop:w-[200px] tablet:w-[140px]">

                                        <h2 style="color: {{ product.color }};" class="text-[39px] tablet:text-[22px] font-YekanExtraBold line-clamp-1">{{ product.title }}</h2>

                                        <p class="text-white text-[27px] tablet:text-[15px] font-YekanRegular line-clamp-1 desktop:text-[20px]">{{ product.name }}</p>
                                        <p class="text-white text-[19px] tablet:text-[10px] font-YekanRegular desktop:text-[15px] line-clamp-2">{{ product.description }}</p>
                                    </div>
                                    <div class="h-12 my-5 mr-4 flex tablet:hidden">
                                        <a href="/products#{{ product.anchor }}" style="border-color: {{ product.color }};" href="#" class="flex items-center justify-center gap-[18px] w-[237px] h-12 border-[4px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-white/5 group">
                                            <svg style="color: {{ product.color }};" class="mobile-menu-close w-7 h-7 transition-transform duration-300 group-hover:-translate-x-1">
                                                <use href="#left"></use>
                                            </svg>
                                            <p class="text-[19px] font-YekanRegular text-white">مشاهده محصولات</p>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>

                        {% endfor %}

                    </div>
                </div>

                <!-- Mobile Btn -->

                <div class="tablet:flex items-center justify-center p-0 m-0 hidden">
                    <div class="h-12">
                        <a href="/products" class="flex items-center justify-center gap-[18px] w-72 h-[60px] border-[#347eff] border-[2px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 hover:bg-white/5 group">
                            <svg class="mobile-menu-close w-7 h-7 text-blue-500 transition-transform duration-300 group-hover:-translate-x-1">
                                <use href="#left"></use>
                            </svg>
                            <p class="text-[19px] font-YekanRegular text-white">مشاهده محصولات</p>
                        </a>
                    </div>
                </div>
                
                <div class="slider-dots flex justify-center gap-3 mt-8"></div>
            </div>
        </div>

    </section>

    <!-- About Us -->

    <section data-anim="up">
        <div class="container overflow-hidden flex desktop:flex-col">

            <!-- Video  -->

            <div data-anim="right" class="w-1/2 desktop:w-full h-full flex items-center justify-start desktop:my-7">
                <div data-video="{{ about.video.url }}" class="about-video video-button w-[796px] h-[493px] 3xl:w-[95%] desktop:w-full mobile:h-[300px] rounded-[20px] relative transition-transform duration-500 hover:scale-[1.02]" {% if about.image %} style="background-image: url({{ about.image.url }});background-size: cover;background-position: center;background-repeat: no-repeat;" {% else %} style="background-image: url(/static/img/cover.png) ;background-size: cover;background-position: center;background-repeat: no-repeat;" {% endif %}>

                    <img class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-28 cursor-pointer transition-transform duration-300 hover:scale-125" src="{% static 'img/icons/Play-Music-icon.png' %}" alt="play">

                </div>
            </div>

            <!-- Text About -->

            <div data-anim="left" class="w-1/2 desktop:w-full h-full flex items-center justify-end">
                <div dir="rtl" class="flex flex-col tablet:border-2 tablet:border-[#1c5d9f] tablet:p-6 items-center gap-8 mobile:gap-0 w-[880px] h-[493px] 3xl:w-[100%] desktop:w-full desktop:h-full rounded-[20px] text-white">

                    <h2 class="font-YekanBold text-4xl mobile:text-2xl mobile:my-2">درباره توپی</h2>
                    <p class="font-YekanRegular text-2xl 2xl:text-[20px] desktop:text-[27px] desktop:text-justify desktop:leading-10 mobile:text-[14px]">شرکت توپی یکی از معتبرترین تولیدکنندگان اتصالات صنعتی و دنده‌ای در جهان است که با بیش از ۸۵ سال سابقه، محصولات خود را مطابق استانداردهای بین‌المللی تولید می‌کند. اتصالات توپی به دلیل کیفیت بالا، دوام و تنوع گسترده، در صنایع ساختمان، آتش‌نشانی، نفت و گاز در بسیاری از کشورهای جهان مورد استفاده قرار می‌گیرند.</p>

                    <a href="/about-us" class="flex flex-row-reverse tablet:hidden items-center justify-center gap-[18px] w-72 h-[60px] border-[#347eff] border-[4px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 hover:bg-white/5 group">
                        <img src="{% static 'img/left.png' %}" alt="" class="transition-transform duration-300 group-hover:-translate-x-1">
                        <p class="text-[19px] font-YekanRegular text-white">اطلاعات بیشتر درباره ما</p>
                    </a>

                    <div data-anim="up" class="flex w-full h-[187px] mobile:w-[115%] mobile:h-[140px] 3xl:w-[100%] desktop:pt-4 mobile:pt-1 border-4 border-[#1c5d9f] rounded-[19px] tablet:border-none">
                        
                        <div class="flex flex-col justify-start gap-3 pt-3 items-center w-1/4 mobile:w-[100%] h-full custom-border [&>*]:leading-none transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-14 h-14 3xl:w-10 3xl:h-10 desktop:w-14 desktop:h-14 mobile:w-9 mobile:h-9" src="{% static 'img/icons/workersicon.png' %}" alt="worker">
                            <span class="text-[#6ecff6] font-YekanBold text-[28pt] block h-8 2xl:text-[20pt] 2xl:h-6 mobile:text-[15pt]">۱۹۰۰۰+</span>
                            <p class="font-YekanRegular text-[15pt] h-6 tablet:text-[8pt] mobile:text-[7pt]">کارمند</p>
                        </div>

                        
                        
                        <div class="flex flex-col justify-start gap-3 pt-3 items-center w-1/4 mobile:w-[100%] h-full custom-border [&>*]:leading-none transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-14 h-14 3xl:w-10 3xl:h-10 desktop:w-14 desktop:h-14 mobile:w-9 mobile:h-9" src="{% static 'img/icons/factory.png' %}" alt="worker">
                            <span class="text-[#6ecff6] font-YekanBold text-[28pt] block h-8 2xl:text-[20pt] 2xl:h-6 mobile:text-[15pt]">۴+</span>
                            <p class="font-YekanRegular text-[15pt] h-6 tablet:text-[8pt] mobile:text-[7pt]">کارخانه در برزیل</p>
                        </div>

                        
                        
                        <div class="flex flex-col justify-start gap-3 pt-3 items-center w-1/4 mobile:w-[100%] h-full custom-border [&>*]:leading-none transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-14 h-14 3xl:w-10 3xl:h-10 desktop:w-14 desktop:h-14 mobile:w-9 mobile:h-9" src="{% static 'img/icons/calendar.png' %}" alt="worker">
                            <span class="text-[#6ecff6] font-YekanBold text-[28pt] block h-8 2xl:text-[20pt] 2xl:h-6 mobile:text-[15pt]">85+</span>
                            <p class="font-YekanRegular text-[15pt] h-6 tablet:text-[8pt] mobile:text-[7pt]">سال سابقه</p>
                        </div>

                        
                        
                        <div class="flex flex-col justify-start gap-3 pt-3 items-center w-1/4 mobile:w-[100%] h-full [&>*]:leading-none transition-transform duration-300 hover:-translate-y-1">
                            <img class="w-14 h-14 3xl:w-10 3xl:h-10 desktop:w-14 desktop:h-14 mobile:w-9 mobile:h-9" src="{% static 'img/icons/products.png' %}" alt="worker">
                            <span class="text-[#6ecff6] font-YekanBold text-[28pt] block h-8 2xl:text-[20pt] 2xl:h-6 mobile:text-[15pt]">۲۰۰۰۰+</span>
                            <p class="font-YekanRegular text-[15pt] h-6 tablet:text-[8pt] mobile:text-[7pt]">نوع محصول</p>
                        </div>
  
                        
                    </div>

                    <a href="/about-us" class="hidden tablet:flex flex-row-reverse items-center justify-center gap-[18px] w-72 h-[60px] border-[#347eff] border-[2px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 hover:bg-white/5 group">
                        <img src="{% static 'img/left.png' %}" alt="left arrow" class="transition-transform duration-300 group-hover:-translate-x-1">
                        <p class="text-[19px] font-YekanRegular text-white">اطلاعات بیشتر درباره ما</p>
                    </a>

                </div>
            </div>

        </div>
    </section>

    <!-- Slider Videos -->

    <section data-anim="up" id="video_section" class="relative my-20 mobile:my-7">

        <div class="shape absolute top-28 right-0">
            <img src="{% static 'img/shape2.png' %}" alt="">
        </div>


        <div class="w-full">    

            <div class="container overflow-hidden flex laptop:flex-col-reverse laptop:gap-4 slider-container relative mx-auto justify-between">

                <div data-anim="right" class="w-1/2 laptop:w-full h-full">
                    <div class="flex mobile:flex-col justify-between items-center p-7 mobile:p-0 mobile:px-3 mobile:py-4 w-[796px] h-[450px] 3xl:w-[95%] mobile:gap-3 laptop:w-full mobile:h-full border-4 border-[#1c5d9f] mobile:border-2 rounded-[20px] transition-transform duration-500 hover:scale-[1.01]">

                        <div class="flex w-full">
                            <div class="h-full w-1/2 flex items-center mobile:items-start justify-center 2xl:justify-start">
                                <img class="w-[400px] 2xl:w-[85%] laptop:w-full mobile:w-[135px]" src="{% static 'img/map.png' %}" alt="">
                            </div>

                            <div class="flex flex-col items-end justify-center mobile:justify-start gap-10 mobile:gap-3 h-full text-right w-1/2 child:text-white laptop:py-4">
                                
                                <h2 class="text-[25pt] font-YekanBold w-72 mb-5 desktop:mb-10 desktop:text-[18pt] mobile:text-[12pt] laptop:mb-0 mobile:mb-0 2xl:mb-0">نمایندگان ما در ایران</h2>
                                <p dir="rtl" class="text-[13pt] desktop:text-[10pt] desktop:w-[90%] desktop:leading-8 laptop:text-[15pt] laptop:w-[98%] mobile:text-[11pt] mobile:w-[100%] 2xl:w-[95%] mobile:leading-6 mobile:text-justify leading-10 font-YekanLight text-justify w-72">برند توپی در بیش از 20 استان کشور نمایندگی فعال دارد و شما میتوانید به راحتی از هرجای ایران محصولات توپی را تهیه کنید</p>


                                
                                <!-- Other Devices Btn -->

                                <a href="/representatives" class="flex mobile:hidden items-center justify-center gap-[18px] w-72 laptop:w-64 h-[61px] border-[#347eff] border-[4px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 hover:bg-white/5 group">
                                    <img src="{% static 'img/left.png' %}" alt="" class="transition-transform duration-300 group-hover:-translate-x-1">
                                    <p class="text-[19px] font-YekanRegular text-white laptop:text-[15px]">مشاهده لیست نمایندگان</p>
                                </a>

                            </div>
                        </div>



                        <!-- Mobile Btn -->
                        
                        <a href="/representatives" class="hidden mobile:flex items-center justify-center gap-[18px] w-72 h-[60px] border-[#347eff] border-[2px] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 hover:bg-white/5 group">
                            <img src="{% static 'img/left.png' %}" alt="" class="transition-transform duration-300 group-hover:-translate-x-1">
                            <p class="text-[19px] font-YekanRegular text-white">مشاهده لیست نمایندگان</p>
                        </a>

                    </div>
                </div>

                <div data-anim="left" class="w-1/2 laptop:w-full h-full">

                    <div class="w-[880px] h-[450px] 3xl:w-[100%] border-4 border-[#1c5d9f] mobile:border-none rounded-[20px]">

                        <div class="flex flex-col text-white justify-center items-center gap-[20px] mt-7">
                            <h2 class="font-YekanBold text-[25pt] desktop:text-[18pt]">ویدیوهای توپی</h2>
                            <p class="text-[13pt] desktop:text-[9pt] laptop:text-[11pt] mobile:text-[11pt] mobile:text-center font-YekanRegular">جدیدترین ویدیوهای معرفی محصولات، فرآیند تولید و رویدادهای توپی</p>
                        </div>
                    
                        <div class="h-[310px] my-4 flex items-center justify-center flex-col">

                            <div class="overflow-hidden h-full w-[96%] mobile:w-[85%] flex flex-col justify-center items-center gap-5 text-white">
                                <div class="slider-track flex gap-3 px-4 transition-transform duration-500" style="width: calc(100% + 2rem);">
                                    
                                    <!-- Video Slidr Cards -->

                                    {% for video in videos %}

                                    <div data-anim="zoom" style="--d:{{ forloop.counter0 }}00ms" class="slide-card cursor-pointer w-[270px] min-h-[270px] 3xl:w-[32%] desktop:w-[49%] mobile:w-[100%] rounded-2xl flex flex-shrink-0 overflow-hidden transition-transform duration-300 hover:-translate-y-2">
                                        <div class="flex flex-col justify-start items-end w-full">
                                            <div class="w-full h-[169px] mt-4 bg-gradient-to-b from-[#347eff] to-[#1e3a8a] rounded-[20px] flex items-center justify-center flex-shrink-0">
                                                <div data-video="{{ video.video.url }}" class="video-button w-[97%] h-[96%] rounded-[20px] flex items-center justify-center transition-transform duration-300 hover:scale-[1.02]" {% if video.image %} style="background-image: url('{{ video.image.url }}'); background-size: cover; background-position: center;" {% else %} style="background-image: url('/static/img/cover.png'); background-size: cover; background-position: center;" {% endif %}>
                                                    <svg class="w-12 h-12 text-white transition-transform duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M8 5v14l11-7z"/>
                                                    </svg>
                                                </div>
                                            </div>
                                            <h3 dir="rtl" class="text-white py-2 text-lg desktop:text-base mobile:text-base font-bold font-YekanBold truncate w-full" style="unicode-bidi: plaintext;">{{ video.title }}</h3>
                                            <p dir="rtl" class="text-white text-[11px] text-right font-YekanRegular line-clamp-2 mb-2 w-full">{{ video.description }}</p>
                                        </div>
                                    </div>

                                    {% endfor %}

                                </div>
                            </div>
                    
                            <div class="slider-dots flex justify-center gap-3 my-6"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!-- Popular fittings : internal links to product pages -->

    {% if top_fittings %}
    <style>
    .hf{max-width:1200px;margin:0 auto;padding:0 20px;direction:rtl}
    .hf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid #173059;margin-bottom:28px}
    .hf-h2{font-size:27px;color:#fff;margin:0 0 12px;display:inline-block;position:relative;padding-bottom:9px}
    .hf-h2:after{content:"";position:absolute;bottom:0;right:0;width:46px;height:3px;background:#6ecff6;border-radius:2px}
    .hf-sub{font-size:14.5px;color:#8fa3b8;margin:0;line-height:1.9;max-width:640px}
    .hf-all{flex:0 0 auto;color:#6ecff6;font-size:14.5px;text-decoration:none;border:1px solid #23456f;border-radius:12px;padding:11px 22px;transition:border-color .25s ease,background .25s ease}
    .hf-all:hover{border-color:#6ecff6;background:rgba(110,207,246,.1)}
    .hf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .hf-t{display:flex;flex-direction:column;background:#061b3e;border:1px solid #1d3c68;border-radius:22px;padding:16px 16px 18px;text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .hf-t:hover{border-color:var(--fam,#6ecff6);transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.38)}
    .hf-t .ph{height:136px;display:flex;align-items:center;justify-content:center;border-radius:16px;margin-bottom:16px;background:radial-gradient(circle at 50% 42%,#0e2c58 0%,#061b3e 72%)}
    .hf-t .ph img{max-width:76%;max-height:106px;object-fit:contain;transition:transform .3s ease}
    .hf-t:hover .ph img{transform:scale(1.06)}
    .hf-t .nm{display:block;color:#fff;font-size:15px;line-height:1.55;margin-bottom:6px}
    .hf-t .fg{display:block;color:#8fa3b8;font-size:12.5px}
    .hf-t:hover .nm{color:var(--fam,#6ecff6)}
    @media(max-width:1024px){.hf-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:760px){.hf-grid{grid-template-columns:repeat(2,1fr);gap:14px}.hf-head{flex-direction:column;align-items:flex-start;gap:14px}.hf-h2{font-size:23px}.hf-t .ph{height:118px}.hf-t .ph img{max-height:92px}}
    </style>

    <section class="my-16">
      <div class="hf">
        <div class="hf-head" data-anim="up">
          <div>
            <h2 class="hf-h2 font-YekanExtraBold">پرفروش‌ترین اتصالات توپی برزیل</h2>
            <p class="hf-sub font-YekanRegular">اتصالات دنده‌ای چدن چکش‌خوار، گالوانیزه و سیاه؛ مشخصات فنی، شماره فیگور و قیمت روز هر اتصال در صفحه اختصاصی آن.</p>
          </div>
          <a class="hf-all font-YekanRegular" href="/products#fittings">مشاهده همه اتصالات</a>
        </div>
        <div class="hf-grid">
          {% for f in top_fittings %}
          <a class="hf-t" data-anim="up" style="--d:{% cycle '0s' '.06s' '.12s' '.18s' %};--fam:{{ f.fam }}" href="{{ f.get_absolute_url }}" title="{{ f.name }} توپی برزیل">
            <span class="ph">{% if f.image %}<img src="{{ f.image.url }}" alt="{{ f.name }} توپی برزیل فیگور {{ f.figure }}" loading="lazy">{% endif %}</span>
            <span>
              <span class="nm font-YekanRegular">{{ f.name }} توپی برزیل</span>
              <span class="fg font-YekanRegular">فیگور {{ f.figure }}</span>
            </span>
          </a>
          {% endfor %}
        </div>
      </div>
    </section>
    {% endif %}

    <!-- Standards -->

    <section class="my-16">

        <div data-anim="up" class="section-title flex flex-col items-center justify-center mb-11">
            <h2 class="font-YekanBold text-3xl text-white relative inline-block pb-1">
                استاندارد ها
                <span class="absolute -bottom-1 left-0 w-full h-[3px] bg-[#347eff]"></span>
            </h2>
        </div>


        <div dir="rtl" class="container p-0 grid grid-cols-6 desktop:grid-cols-3 mobile:grid-cols-3 gap-7 mobile:gap-3 items-start justify-items-center">

            {% for standard in standards %}
            <div data-anim="up" style="--d:{{ forloop.counter0 }}00ms" class="flex flex-col items-center w-[225px] mobile:w-full transition-transform duration-300 hover:-translate-y-1">
                <div class="flex items-center justify-center h-52 desktop:h-44 mobile:h-24">
                    <img class="w-32 mobile:w-17 object-contain transition-transform duration-300 hover:scale-110" src="{{ standard.image.url }}" alt="گواهینامه {{ standard.title }} اتصالات توپی برزیل">
                </div>
                <div class="w-full 2xl:w-[180px] mobile:w-[90px] min-h-[7rem] mobile:min-h-[3.5rem] flex items-start justify-center">
                    <p class="font-YekanLight text-xl text-center text-white 2xl:text-[15px] desktop:text-[12px] mobile:text-[9px] leading-relaxed">
                        {{ standard.description }}
                    </p>
                </div>
            </div>
            {% endfor %}

        </div>



        <div data-anim="up" dir="rtl" class="see-more flex flex-col items-center justify-center my-10">
            <a href="/standards" class="custom-btm transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#347eff]/40 group">
                <img src="{% static 'img/left.png' %}" alt="left" class="transition-transform duration-300 group-hover:-translate-x-1">
                <p class="text-[19px] font-YekanRegular text-white">مشاهده همه استانداردها</p>
            </a>
        </div>

    </section>

    {% endblock %}


    {% block js %}

    <script src="{% static 'js/slider.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>

    <script>
    // Every slider on the page: advance each 6s, pause on interaction.
    document.addEventListener("DOMContentLoaded", function () {
      document.querySelectorAll(".slider-container").forEach(function (box) {
        var dots = function () { return box.querySelectorAll(".slider-dots button"); };
        if (dots().length < 2) { return; }
        var timer = null;
        var busy = function () {
          var v = box.querySelector("video");
          return !!(v && !v.paused && !v.ended);
        };
        var step = function () {
          if (busy()) { return; }
          var d = dots();
          if (d.length < 2) { return; }
          var cur = 0;
          for (var i = 0; i < d.length; i++) {
            if (/(^|\s)w-7(\s|$)/.test(d[i].className)) { cur = i; }
          }
          d[(cur + 1) % d.length].click();
        };
        var stop = function () { if (timer) { clearInterval(timer); timer = null; } };
        var start = function () { stop(); timer = setInterval(step, 6000); };
        box.addEventListener("mouseenter", stop);
        box.addEventListener("mouseleave", start);
        box.addEventListener("touchstart", stop, { passive: true });
        box.addEventListener("pointerdown", stop);
        document.addEventListener("visibilitychange", function () {
          if (document.hidden) { stop(); } else { start(); }
        });
        start();
      });
    });
    </script>


    {% endblock %}