<section class="new-arrival-three py-120 overflow-hidden">
    <div class="container container-lg">
        <div class="section-heading text-center wow bounceIn">
            <h5 class="mb-0 text-uppercase wow bounceIn">New Arrivals</h5>
        </div>
        <ul class="nav common-tab style-two nav-pills justify-center mb-40 wow bounceIn" id="pills-tabThree"
            role="tablist">
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t active" data-target="#pillsAll"
                    id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab"
                    aria-controls="pillsAll" aria-selected="true">All</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Jacket"
                    id="pills-Jacket-tab" data-bs-toggle="pill" data-bs-target="#pills-Jacket" type="button" role="tab"
                    aria-controls="pills-Jacket" aria-selected="false">Jacket</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Shoes"
                    id="pills-Shoes-tab" data-bs-toggle="pill" data-bs-target="#pills-Shoes" type="button" role="tab"
                    aria-controls="pills-Shoes" aria-selected="false">Shoes</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Hats"
                    id="pills-Hats-tab" data-bs-toggle="pill" data-bs-target="#pills-Hats" type="button" role="tab"
                    aria-controls="pills-Hats" aria-selected="false">Hats</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Goggles"
                    id="pills-Goggles-tab" data-bs-toggle="pill" data-bs-target="#pills-Goggles" type="button"
                    role="tab" aria-controls="pills-Goggles" aria-selected="false">Goggles</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Bags"
                    id="pills-Bags-tab" data-bs-toggle="pill" data-bs-target="#pills-Bags" type="button" role="tab"
                    aria-controls="pills-Bags" aria-selected="false">Bags</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link bt-tb-btn-t" data-target="#pills-Jeans"
                    id="pills-Jeans-tab" data-bs-toggle="pill" data-bs-target="#pills-Jeans" type="button" role="tab"
                    aria-controls="pills-Jeans" aria-selected="false">Jeans</button></li>
        </ul>
        <div class="tab-content" id="pills-tabContentThree">
            <div class="tab-pane fade show bt-tab-pane-t active" id="pillsAll" role="tabpanel"
                aria-labelledby="pills-all-tab" tabindex="0">
                <div class="new-arrival-three-wrapper">
                    <div class="row g-4">
                        <div class="2xl:w-4/12 flex-grow-0 flex-shrink-0 basis-auto">
                            <div class="rounded-24 overflow-hidden border border-main-two-600 p-16 bg-color-three h-full"
                                data-aos="zoom-in" data-aos-duration="800">
                                <div class="bg-img z-[1] w-full h-full min-h-485 rounded-24 overflow-hidden relative">
                                    <div class="bg-img-custom"><img src="views/assets/images/new-arrival-promo-img1.png"
                                            alt="Image">
                                    </div>
                                    <div class="py-32 pe-32 text-end"><span
                                            class="text-uppercase font-[600] text-neutral-600 text-md">Summer
                                            offer</span>
                                        <h5 class="mb-0">Get 85% Off</h5><a href="shop.html"
                                            class="btn btn-black rounded-[50rem] gap-8 mt-32 flex items-center inline-flex"
                                            tabindex="0">Shop Now <span class="text-xl flex"><i
                                                    class="ph ph-shopping-cart-simple"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="2xl:w-8/12 flex-grow-0 flex-shrink-0 basis-auto">
                            <div class="row g-4">
                                <div class="xl:w-4/12 flex-grow-0 flex-shrink-0 basis-auto md:w-6/12" data-aos="fade-up"
                                    data-aos-duration="400">
                                    <div
                                        class="product-card h-full p-16 border border-gray-100 hover-border-main-600 rounded-16 relative transition-2">
                                        <div class="product-card__thumb rounded-8 bg-gray-50 relative"><a
                                                href="product-details-two.html"
                                                class="w-full h-full flex items-center justify-center"><img
                                                    src="views/assets/images/trending-three-img1.png" alt="Image"
                                                    class="!w-auto max-w-[unset]"></a>
                                            <div
                                                class="absolute inset-block-start-0 inset-inline-start-0 mt-16 ms-16 z-[1] flex flex-col gap-8">
                                                <span
                                                    class="text-main-two-600 w-40 h-40 flex justify-center items-center bg-white rounded-[50%] shadow-sm text-xs font-[600]">-29%</span>
                                                <span
                                                    class="text-neutral-600 w-40 h-40 flex justify-center items-center bg-white rounded-[50%] shadow-sm text-xs font-[600]">HOT</span>
                                            </div>
                                            <div
                                                class="bg-white p-2 rounded-[50rem] z-[1] absolute right-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                                                <button type="button"
                                                    class="expand-btn w-40 h-40 text-md flex justify-center items-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                                                        class="ph ph-plus"></i></button>
                                                <div class="expand-icons gap-20 my-20"><button type="button"
                                                        class="text-neutral-600 text-xl flex items-center justify-center hover-text-main-two-600 wishlist-btn"><i
                                                            class="ph ph-heart"></i></button> <button type="button"
                                                        class="text-neutral-600 text-xl flex items-center justify-center hover-text-main-two-600"><i
                                                            class="ph ph-eye"></i></button> <button type="button"
                                                        class="text-neutral-600 text-xl flex items-center justify-center hover-text-main-two-600"><i
                                                            class="ph ph-shuffle"></i></button></div>
                                            </div>
                                        </div>
                                        <div class="product-card__content mt-16 w-full">
                                            <h6 class="title text-lg font-[600] my-16"><a
                                                    href="product-details-two.html" class="link text-line-2"
                                                    tabindex="0">Instax Mini 12 Instant Film Camera - Green</a>
                                            </h6>
                                            <div class="flex items-center gap-6">
                                                <div class="flex items-center gap-8"><span
                                                        class="text-15 font-[500] text-warning-600 flex"><i
                                                            class="ph-fill ph-star"></i></span> <span
                                                        class="text-15 font-[500] text-warning-600 flex"><i
                                                            class="ph-fill ph-star"></i></span> <span
                                                        class="text-15 font-[500] text-warning-600 flex"><i
                                                            class="ph-fill ph-star"></i></span> <span
                                                        class="text-15 font-[500] text-warning-600 flex"><i
                                                            class="ph-fill ph-star"></i></span> <span
                                                        class="text-15 font-[500] text-warning-600 flex"><i
                                                            class="ph-fill ph-star"></i></span></div><span
                                                    class="text-xs font-[500] text-gray-500">4.8</span> <span
                                                    class="text-xs font-[500] text-gray-500">(12K)</span>
                                            </div><span
                                                class="py-2 px-8 text-xs rounded-[50rem] text-main-two-600 bg-main-two-50 mt-16">Fulfilled
                                                by Marketpro</span>
                                            <div class="product-card__price mt-16 mb-30"><span
                                                    class="text-gray-400 text-md font-[600] text-decoration-line-through">$28.99</span>
                                                <span class="text-heading text-md font-[600]">$14.99 <span
                                                        class="text-gray-500 font-normal">/Qty</span></span>
                                            </div><a href="cart.html"
                                                class="product-card__cart btn bg-gray-50 text-heading hover-bg-main-600 hover-text-white py-11 px-24 rounded-8 flex items-center justify-center gap-8 font-[500]"
                                                tabindex="0">Add To Cart <i class="ph ph-shopping-cart"></i></a>
                                        </div>
                                    </div>
                                </div>

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

                </div>
            </div>

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