<!DOCTYPE html>
<html class="no-js" lang="en">

<!-- belle/index.html   11 Nov 2019 12:16:10 GMT -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>American Plastics Pvt(Ltd)</title>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
    <meta name="description" content="<?php echo e($item->product_name); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:title" content="<?php echo e($item->product_name); ?>" id="og-title" />
    <meta property="og:description" content="<?php echo e(strip_tags($item->product_description)); ?>" />
    <?php
        $imageArray = explode(',', $item->product_image);
        $firstImage = $imageArray[0];
    ?>
    <meta property="og:image" content="<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>" id="og-image" />
    <meta property="og:image:type" content="image/jpeg" id="og-image-type" />

    <meta property="og:url" content="<?php echo e(Request::url()); ?>" />
    <meta property="og:type" content="website" />
    <meta property="fb:app_id" content="YOUR_APP_ID" />

    <!-- Favicon -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <!-- Optional: Link to the Slick theme CSS file (if you need a theme) -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
    <!-- Libraries Stylesheet -->
    


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Datatable plugin CSS file -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>

    <link rel="shortcut icon" href="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>" />
    <!-- Plugins CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/plugins.css')); ?>">
    <!-- Bootstap CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap.min.css')); ?>">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/style.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/responsive.css')); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/elevatezoom@3.0.8/jquery.elevateZoom.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>

<body class="template-index belle template-index-belle" style="background-color: #ffffff">
    <?php if(Route::currentRouteName() === 'american.plastic.web.product.details'): ?>
        <!-- Pre-loader Styles -->
        <style>
            #home-preloader {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999999;
                opacity: 1;
                transition: opacity 0.5s ease, visibility 0.5s;
                visibility: visible;
            }

            #home-preloader.fade-out {
                opacity: 0;
                visibility: hidden;
            }

            .preloader-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }

            .preloader-logo {
                width: 110px;
                height: auto;
                animation: logoPulse 2s infinite ease-in-out;
            }

            .preloader-spinner {
                width: 35px;
                height: 35px;
                border: 3px solid rgba(133, 194, 38, 0.15);
                border-radius: 50%;
                border-top: 3px solid #85c226;
                animation: preloaderSpin 0.8s linear infinite;
            }

            body.preloader-active {
                overflow: hidden !important;
                height: 100vh !important;
            }

            @keyframes logoPulse {

                0%,
                100% {
                    transform: scale(0.95);
                    opacity: 0.85;
                }

                50% {
                    transform: scale(1.05);
                    opacity: 1;
                    filter: drop-shadow(0 0 10px rgba(133, 194, 38, 0.25));
                }
            }

            @keyframes preloaderSpin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        </style>

        <!-- Pre-loader Markup -->
        <div id="home-preloader">
            <div class="preloader-content">
                <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>" class="preloader-logo"
                    alt="American Plastics Logo">
                <div class="preloader-spinner"></div>
            </div>
        </div>

        <!-- Pre-loader Controller Script -->
        <script>
            document.body.classList.add('preloader-active');

            // Safety fallback: Hide preloader after 3.5s in case window load hangs
            var preloaderTimeout = setTimeout(function () {
                var preloader = document.getElementById('home-preloader');
                if (preloader && !preloader.classList.contains('fade-out')) {
                    preloader.classList.add('fade-out');
                    document.body.classList.remove('preloader-active');
                }
            }, 3500);

            window.addEventListener("load", function () {
                var preloader = document.getElementById('home-preloader');
                if (preloader) {
                    // Keep the loader visible for a minimum visual beat (600ms)
                    setTimeout(function () {
                        clearTimeout(preloaderTimeout);
                        preloader.classList.add('fade-out');
                        document.body.classList.remove('preloader-active');
                    }, 600);
                }
            });
        </script>
    <?php endif; ?>
    <div class="pageWrapper">
        <!--Search Form Drawer-->
        <div class="search">
            <div class="search__form">
                <form class="search-bar__form" action="<?php echo e(route('american.plastic.web.search.product')); ?>"
                    method="post">
                    <?php echo csrf_field(); ?>
                    <button class="go-btn search__button" type="submit"><i class="icon anm anm-search-l"></i></button>
                    <input class="search__input" type="search" name="search_value" value=""
                        placeholder="Search products" aria-label="Search" autocomplete="off">
                </form>
                <button type="button" class="search-trigger close-btn"><i class="anm anm-times-l"></i></button>
            </div>
        </div>
        <!--End Search Form Drawer-->
        <!--Top Header-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



        <div class="aniketrod">
            <section id="header" class="header">
                <div class="header-top">
                    <div class="container-fluid p-0">
                        <img src="<?php echo e(asset('assets/images/topbannerkoko.jpg')); ?>" alt="Top Banner"
                            class="img-fluid w-100">
                    </div>
                    <div class="container-fluid" style="padding-left: 5%; padding-right: 5%;background-color: #85c226">
                        <div class="row align-items-center flex-nowrap" style="min-height: 30px;">
                            <div class="col-auto">
                                <ul class="flat-support list-inline mb-0">
                                    <li class="list-inline-item">
                                        <a href="#" title="">Support</a>
                                    </li>
                                    <li class="list-inline-item">
                                        Call Us: <a href="#" title="">(+94) 77 286 4877</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-auto ms-auto">
                                <ul class="flat-unstyled list-inline mb-0">
                                    <li class="list-inline-item">
                                        <a href="https://koombiyodelivery.lk/track" title="">Track your
                                            order</a>
                                    </li>
                                    <li class="list-inline-item account position-relative">
                                        <?php if(Auth::check()): ?>
                                            <a href="#" class="dropdown-toggle" title="" data-bs-toggle="dropdown">My
                                                Account </a>
                                            <ul class="dropdown-menu position-absolute bg-white p-2 shadow-sm"
                                                style="min-width: 150px; display: none;">
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="<?php echo e(route('american.plastic.web.myprofile')); ?>" title="">My
                                                        Account</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="<?php echo e(route('american.plastic.web.view.user.cart')); ?>"
                                                        title="">My Cart</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="<?php echo e(route('american.plastic.web.mywishlist')); ?>" title="">My
                                                        Wishlist</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="<?php echo e(route('american.plastic.web.user.logout')); ?>" title="">Log
                                                        out</a>
                                                </li>
                                            </ul>
                                        <?php else: ?>
                                            <a href="#" id="loginLink" title="">Login</a>
                                        <?php endif; ?>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#" title="">LKR</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#" title="">English</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <style>
                        .account .dropdown-menu {
                            left: 0;
                            top: 100%;
                            border: 1px solid #ddd;
                            z-index: 1000;
                        }

                        .account:hover .dropdown-menu {
                            display: block !important;
                        }

                        .dropdown-item {
                            display: block;
                            padding: 5px 10px;
                            clear: both;
                            color: #333;
                            text-decoration: none;
                        }

                        .dropdown-item:hover {
                            background-color: #f8f9fa;
                        }
                    </style>

                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const accountDropdown = document.querySelector('.account .dropdown-toggle');
                            const dropdownMenu = document.querySelector('.account .dropdown-menu');

                            if (accountDropdown && dropdownMenu) {
                                accountDropdown.addEventListener('click', function (e) {
                                    e.preventDefault();
                                    const isVisible = dropdownMenu.style.display === 'block';
                                    dropdownMenu.style.display = isVisible ? 'none' : 'block';
                                });

                                // Close when clicking outside
                                document.addEventListener('click', function (e) {
                                    if (!e.target.closest('.account')) {
                                        dropdownMenu.style.display = 'none';
                                    }
                                });
                            }
                        });
                    </script>
                </div><!-- /.header-top -->
                <div class="header-middle">
                    <div class="container-fluid" style="padding-left: 5%;padding-right:5%">
                        <div class="row align-items-center">
                            <!-- Mobile Menu Toggle -->
                            <div class="col-6 col-md-3 order-1 order-md-1">

                                <div id="logo" class="logo text-md-start">
                                    <a href="<?php echo e(route('american.plastic.web')); ?>">
                                        <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                            alt="Belle Multipurpose Html Template"
                                            title="Belle Multipurpose Html Template" class="img-fluid"
                                            style="max-width: 60%; height: auto;" />
                                    </a>
                                </div>
                            </div>

                            <!-- Search - Full width on mobile, centered on desktop -->
                            <div class="col-12 col-md-6 order-3 order-md-2 ">
                                <div class="top-search">
                                    <form action="<?php echo e(route('american.plastic.web.search.product')); ?>" method="post"
                                        class="form-search" accept-charset="utf-8">
                                        <?php echo csrf_field(); ?>
                                        <div class="box-search">
                                            <input type="text" name="search_value"
                                                placeholder="Search what you looking for ?">
                                            <span class="btn-search">
                                                <button type="submit" class="waves-effect"><i
                                                        class="fa fa-search"></i></button>
                                            </span>

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

                            <!-- Cart/Wishlist - Right aligned -->
                            <div class="col-6 col-md-3 order-2 order-md-3 text-end">
                                <div class="d-flex justify-content-end">
                                    <div class="box-cart me-2">
                                        <div class="inner-box">
                                            <?php if(Auth::check()): ?>
                                                <a href="<?php echo e(route('american.plastic.web.mywishlist')); ?>" title="">
                                            <?php else: ?>
                                                    <a href="#" title="">
                                                <?php endif; ?>
                                                    <?php if(Auth::check()): ?>
                                                        <?php
                                                            $user = Auth::user();
                                                            $wishlist_product = APP\Models\Wishlist::where(
                                                                'user_id',
                                                                $user->id,
                                                            )->get();
                                                        ?>
                                                        <div class="icon-cart">
                                                            <i class="fa fa-heart" aria-hidden="true"></i>
                                                            <span
                                                                class="badge bg-dark"><?php echo e($wishlist_product->count() ?? 0); ?></span>
                                                        </div>
                                                    <?php else: ?>
                                                        <div class="icon-cart">
                                                            <i class="fa fa-heart" aria-hidden="true"></i>
                                                            <span class="badge bg-dark">0</span>
                                                        </div>
                                                    <?php endif; ?>
                                                </a>
                                        </div>
                                    </div>

                                    <div class="box-cart">
                                        <div class="inner-box">
                                            <?php if(Auth::check()): ?>
                                                <a href="<?php echo e(route('american.plastic.web.view.user.cart')); ?>" title="">
                                            <?php else: ?>
                                                    <a href="#" title="">
                                                <?php endif; ?>
                                                    <?php if(Auth::check()): ?>
                                                        <?php
                                                            $user = Auth::user();
                                                            $cart_product = APP\Models\Cart::where('userid', $user->id)->get();
                                                        ?>
                                                        <div class="icon-cart">
                                                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                                                            <span
                                                                class="badge bg-dark"><?php echo e($cart_product->count() ?? 0); ?></span>
                                                        </div>
                                                    <?php else: ?>
                                                        <div class="icon-cart">
                                                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                                                            <span class="badge bg-dark">0</span>
                                                        </div>
                                                    <?php endif; ?>
                                                </a>

                                                <!-- Dropdown Cart -->
                                                <div class="dropdown-box dropdown-menu-end">
                                                    <ul>
                                                        <?php if(Auth::check()): ?>
                                                            <?php
                                                                $user = Auth::user();
                                                                $cart_product = APP\Models\Cart::where('userid', $user->id)
                                                                    ->take(2)
                                                                    ->get();
                                                            ?>
                                                            <?php if($cart_product->count() > 0): ?>
                                                                <?php $__currentLoopData = $cart_product; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cart): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <?php if($cart): ?>
                                                                        <?php
                                                                            try {
                                                                                $productid = $cart->productid;
                                                                                $product = DB::table('product')
                                                                                    ->join(
                                                                                        'product_color',
                                                                                        'product.id',
                                                                                        '=',
                                                                                        'product_color.product_id',
                                                                                    )
                                                                                    ->select(
                                                                                        'product.id',
                                                                                        'product.product_name',
                                                                                        'product.category_id',
                                                                                        'product.product_tags',
                                                                                        'product.sku',
                                                                                        'product.product_image',
                                                                                        'product.product_price',
                                                                                        'product.cutted_price',
                                                                                        'product.product_description',
                                                                                        'product.qty',
                                                                                        'product.weight',
                                                                                        'product.order',
                                                                                        'product.views',
                                                                                        'product.status',
                                                                                        'product_color.product_color',
                                                                                        'product_color.color_image',
                                                                                        'product_color.price',
                                                                                    )
                                                                                    ->where(
                                                                                        'product_color.product_color',
                                                                                        $cart->color,
                                                                                    )
                                                                                    ->where('product.id', $cart->productid)
                                                                                    ->first();
                                                                            } catch (\Throwable $th) {
                                                                                DB::table('error_logs')->insert([
                                                                                    'message' => $th->getMessage(),
                                                                                    'file' => $th->getFile(),
                                                                                    'line' => $th->getLine(),
                                                                                    'trace' => $th->getTraceAsString(),
                                                                                    'created_at' => now(),
                                                                                ]);
                                                                            }
                                                                        ?>
                                                                        <li class="d-flex align-items-center py-2">
                                                                            <div class="img-product me-2" style="width: 60px;">
                                                                                <img src="<?php echo e(asset('admin/assets/img/product/' . $product->color_image)); ?>"
                                                                                    class="img-fluid" alt="">
                                                                            </div>
                                                                            <div class="info-product flex-grow-1">
                                                                                <div class="name">
                                                                                    <?php
                                                                                        $product = App\Models\Product::where(
                                                                                            'id',
                                                                                            $cart->productid,
                                                                                        )->first();
                                                                                    ?>
                                                                                    <a class="pName text-decoration-none"
                                                                                        href="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($product->product_name)])); ?>?id=<?php echo e($product->id); ?>">
                                                                                        <?php echo e($product->product_name); ?>

                                                                                    </a>
                                                                                </div>
                                                                                <?php
                                                                                    $price =
                                                                                        $cart->product_price * $cart->qty;
                                                                                ?>
                                                                                <div class="price">
                                                                                    <span><?php echo e($cart->qty); ?> x</span>
                                                                                    <span>LKR&nbsp;<?php echo e(number_format($price, 2)); ?></span>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    <?php endif; ?>
                                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                                                <div class="total py-2">
                                                                    <div class="buttonSet text-center">
                                                                        <a href="<?php echo e(route('american.plastic.web.view.user.cart')); ?>"
                                                                            class="btn btn-primary"
                                                                            style="font-family:'Open Sans', sans-serif">View
                                                                            Cart</a>
                                                                        <a href="<?php echo e(route('american.plastic.web.cart.checkout')); ?>"
                                                                            class="btn btn-primary"
                                                                            style="font-family:'Open Sans', sans-serif">Checkout</a>
                                                                    </div>
                                                                </div>
                                                            <?php else: ?>
                                                                <div class="cart-empty-message text-center p-3">
                                                                    <div class="empty-cart-icon mb-2">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="48"
                                                                            height="48" viewBox="0 0 24 24" fill="none"
                                                                            stroke="currentColor" stroke-width="2"
                                                                            stroke-linecap="round" stroke-linejoin="round">
                                                                            <circle cx="10" cy="20.5" r="1" />
                                                                            <circle cx="18" cy="20.5" r="1" />
                                                                            <path
                                                                                d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1" />
                                                                        </svg>
                                                                    </div>
                                                                    <h5>Your cart is empty</h5>
                                                                </div>
                                                            <?php endif; ?>
                                                        <?php else: ?>
                                                            <div class="cart-empty-message text-center p-3">
                                                                <div class="empty-cart-icon mb-2">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="48"
                                                                        height="48" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                        <circle cx="10" cy="20.5" r="1" />
                                                                        <circle cx="18" cy="20.5" r="1" />
                                                                        <path
                                                                            d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1" />
                                                                    </svg>
                                                                </div>
                                                                <h5>Your cart is empty</h5>
                                                                <p class="text-muted small">Please log in to view your cart
                                                                    items</p>
                                                                <div class="d-flex gap-2 mt-3 justify-content-center">
                                                                    <a id="loginLink" class="btn"
                                                                        style="font-family: 'Open Sans', sans-serif; background-color: black; color: white;">Login</a>
                                                                    <a id="signup-link" class="btn"
                                                                        style="font-family: 'Open Sans', sans-serif; background-color: black; color: white;">Register</a>
                                                                </div>
                                                            </div>
                                                        <?php endif; ?>
                                                    </ul>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Menu Offcanvas -->
                    <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenu"
                        aria-labelledby="mobileMenuLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="mobileMenuLabel">Menu</h5>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <!-- Add your mobile menu items here -->
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('american.plastic.web')); ?>">Home</a>
                                </li>
                                <!-- Add more menu items as needed -->
                            </ul>
                        </div>
                    </div>

                    <style>
                        /* Responsive adjustments */
                        @media (max-width: 767.98px) {
                            .logo img {
                                max-width: 80% !important;
                            }

                            .top-search {
                                margin-top: 2px;
                            }

                            .box-cart {
                                margin-left: 10px;
                            }

                            .icon-cart {
                                font-size: 1.2rem;
                            }

                            .dropdown-box {
                                width: 300px;
                                right: 0;
                                left: auto;
                            }
                        }

                        .dropdown-box {
                            display: none;
                            position: absolute;
                            z-index: 1000;
                            background: white;
                            border: 1px solid #ddd;
                            padding: 15px;
                            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                        }

                        .inner-box:hover .dropdown-box {
                            display: block;
                        }

                        .cart-empty-message {
                            text-align: center;
                            padding: 20px;
                        }

                        .empty-cart-icon {
                            color: #6c757d;
                            margin-bottom: 15px;
                        }
                    </style>

                    <script>
                        // Mobile menu toggle
                        document.addEventListener('DOMContentLoaded', function () {
                            // Login/Register buttons functionality
                            document.getElementById('loginLink')?.addEventListener('click', function () {
                                // Add your login modal trigger here
                                console.log('Login clicked');
                            });

                            document.getElementById('signup-link')?.addEventListener('click', function () {
                                // Add your signup modal trigger here
                                console.log('Register clicked');
                            });

                            // Make cart dropdown work on mobile
                            const cartIcons = document.querySelectorAll('.inner-box');
                            cartIcons.forEach(icon => {
                                icon.addEventListener('click', function (e) {
                                    if (window.innerWidth <= 767) {
                                        e.preventDefault();
                                        const dropdown = this.querySelector('.dropdown-box');
                                        if (dropdown) {
                                            dropdown.style.display = dropdown.style.display === 'block' ? 'none' :
                                                'block';
                                        }
                                    }
                                });
                            });
                        });
                    </script>
                </div><!-- /.header-middle -->
                <div class="header-bottom">
                    <div class="container-fluid" style="padding-left: 5%;padding-right:5%">
                        <div class="row">
                            <div class="col-md-3 col-2">
                                <div id="mega-menu">
                                    <div class="btn-mega"><span></span>ALL CATEGORIES</div>
                                    <?php
                                        $category = App\Models\Category::where('status', 1)->get();
                                    ?>
                                    <ul class="menu">
                                        <?php
                                            $category = App\Models\Category::where('status', 1)->get();
                                        ?>
                                        <?php if($category): ?>
                                            <?php $__currentLoopData = $category; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $categoryData): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <li>
                                                    <a href="<?php echo e(route('american.plastic.web.view.categories.product', ['name' => Str::slug($categoryData->category_name)])); ?>?id=<?php echo e($categoryData->id); ?>"
                                                        title="">
                                                        <span class="menu-img">
                                                            <img src="#" alt="">
                                                        </span>
                                                        <span class="menu-title">
                                                            <?php echo e($categoryData->category_name); ?>

                                                        </span>
                                                    </a>
                                                </li>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <?php endif; ?>


                                    </ul>
                                </div>
                            </div><!-- /.col-md-3 col-2 -->
                            <div class="col-md-9 col-10">
                                <div class="nav-wrap">
                                    <div id="mainnav" class="mainnav">
                                        <ul class="menu">
                                            <li class="column-1">
                                                <a href="<?php echo e(route('american.plastic.web')); ?>" title="">Home</a>

                                            </li><!-- /.column-1 -->

                                            <li class="column-1">
                                                <a href="<?php echo e(route('american.plastic.deals.products')); ?>"
                                                    title="">Deals</a>

                                            </li><!-- /.column-1 -->
                                            <li class="has-mega-menu">
                                                <a href="<?php echo e(route('american.plastic.web.about.us')); ?>" title="">About
                                                    Us</a>

                                            </li><!-- /.has-mega-menu -->
                                            <li class="column-1">
                                                <a href="<?php echo e(route('american.plastic.web.contact.us')); ?>"
                                                    title="">Contact Us</a>

                                            </li><!-- /.column-1 -->
                                            <li class="column-1">
                                                <a href="<?php echo e(route('american.plastic.web.news.and.event')); ?>"
                                                    title="">News
                                                    & Events</a>

                                            </li><!-- /.column-1 -->

                                        </ul><!-- /.menu -->
                                    </div><!-- /.mainnav -->
                                </div><!-- /.nav-wrap -->
                                <div class="today-deal">
                                    <a href="<?php echo e(route('american.plastic.products')); ?>" title="">All
                                        Products</a>
                                </div><!-- /.today-deal -->
                                <div class="btn-menu">
                                    <span></span>
                                </div><!-- //mobile menu button -->
                            </div><!-- /.col-md-9 -->
                        </div><!-- /.row -->
                    </div><!-- /.container -->
                </div><!-- /.header-bottom -->
            </section><!-- /#header -->




        </div><!-- /.aniketrod -->

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
            </script>


        <script>
            ;
            (function ($) {

                'use strict'
                var isMobile = {
                    Android: function () {
                        return navigator.userAgent.match(/Android/i);
                    },
                    BlackBerry: function () {
                        return navigator.userAgent.match(/BlackBerry/i);
                    },
                    iOS: function () {
                        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                    },
                    Opera: function () {
                        return navigator.userAgent.match(/Opera Mini/i);
                    },
                    Windows: function () {
                        return navigator.userAgent.match(/IEMobile/i);
                    },
                    any: function () {
                        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() ||
                            isMobile.Windows());
                    }
                }; // is Mobile

                var responsiveMenu = function () {
                    var menuType = 'desktop';

                    $(window).on('load resize', function () {
                        var currMenuType = 'desktop';

                        if (matchMedia('only screen and (max-width: 991px)').matches) {
                            currMenuType = 'mobile';
                        }

                        if (currMenuType !== menuType) {
                            menuType = currMenuType;

                            if (currMenuType === 'mobile') {
                                var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();
                                var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');
                                var hasChildMenuMega = $('#mainnav-mobi').find('li:has(div.submenu)');

                                $('#header').after($mobileMenu);
                                hasChildMenu.children('ul').hide();
                                hasChildMenu.children('a').after('<span class="btn-submenu"></span>');
                                hasChildMenuMega.children('div.submenu').hide();
                                $('ul.submenu-child').hide();
                                hasChildMenuMega.find('h3').append('<span class="btn-submenu-child"></span>');
                                $('.btn-menu').removeClass('active');

                            } else {
                                var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
                                $desktopMenu.find('.submenu').removeAttr('style');
                                $('#header').find('.nav-wrap').append($desktopMenu);
                                $('.btn-submenu').remove();
                                $('ul.submenu-child').show();
                                $('h3').children('span').removeClass('btn-submenu-child');
                            }
                        }
                    });

                    $('.btn-menu').on('click', function () {
                        $('#mainnav-mobi').slideToggle(300);
                        $(this).toggleClass('active');
                        return false;
                    });

                    $(document).on('click', '#mainnav-mobi li.has-mega-menu .row .btn-submenu-child', function (e) {
                        $(this).toggleClass('active').parent('h3.cat-title').next('.submenu-child').slideToggle(
                            400);
                        e.stopImmediatePropagation();
                        return false;
                    });

                    $(document).on('click', '#mainnav-mobi li .btn-submenu', function (e) {
                        $(this).toggleClass('active').next('.submenu').slideToggle(400);
                        e.stopImmediatePropagation();
                        return false;
                    });

                }; // Responsive Menu

                var responsiveMenuMega_S2 = function () {
                    var menuType = 'desktop';

                    $(window).on('load resize', function () {
                        var currMenuType = 'desktop';

                        if (matchMedia('only screen and (max-width: 991px)').matches) {
                            currMenuType = 'mobile';
                        }

                        if (currMenuType !== menuType) {
                            menuType = currMenuType;

                            if ($('body').hasClass('grid')) {
                                if (currMenuType === 'mobile') {
                                    var $mobileMenuMegaV2 = $('#mega-menu').attr('id', 'mega-mobile').hide();
                                    var ChildMenuMegaV2 = $('.header-bottom').find('.grid-right');
                                    var ChildDropmenuV2 = $('.drop-menu').children('.one-third');

                                    $('.btn-mega').hide();
                                    $('#header').after($mobileMenuMegaV2);
                                    ChildMenuMegaV2.append('<div class="btn-menu-mega"><span></span></div>');

                                    $('.drop-menu').hide();
                                    $mobileMenuMegaV2.find('.dropdown').append(
                                        '<span class="btn-dropdown"></span>');

                                    ChildDropmenuV2.children('ul').hide();
                                    $('.drop-menu').find('.cat-title').append(
                                        '<span class="btn-dropdown-child"></span>');

                                } else {
                                    var $desktopMenuMegaV2 = $('#mega-mobile').attr('id', 'mega-menu')
                                        .removeAttr('style');

                                    $desktopMenuMegaV2.find('.drop-menu').removeAttr('style');
                                    $('.header-bottom.style1').find('.grid-left').append($desktopMenuMegaV2);
                                }
                            };

                        };

                    });


                    $(document).on('click', '#mega-mobile ul.menu li a .btn-dropdown', function (e) {
                        $(this).toggleClass('active').closest('li').children('.drop-menu').slideToggle(400);
                        e.stopImmediatePropagation();
                        return false;
                    });

                    $(document).on('click', '#mega-mobile .btn-dropdown-child', function (e) {
                        $(this).toggleClass('active').closest('.one-third').children('ul').slideToggle(400);
                        e.stopImmediatePropagation();
                        return false;
                    });

                }; // Responsive Menu Mega S2

                var responsiveMenuMega = function () {
                    var menuType = 'desktop';

                    $(window).on('load resize', function () {
                        var currMenuType = 'desktop';

                        if (matchMedia('only screen and (max-width: 991px)').matches) {
                            currMenuType = 'mobile';
                        }

                        if (currMenuType !== menuType) {
                            menuType = currMenuType;

                            if (currMenuType === 'mobile') {
                                var $mobileMenuMega = $('#mega-menu').attr('id', 'mega-mobile').hide();
                                var ChildMenuMega = $('.header-bottom').find('.col-2');
                                var ChildDropmenu = $('.drop-menu').children('.one-third');

                                $('.btn-mega').hide();
                                $('#header').after($mobileMenuMega);
                                ChildMenuMega.append('<div class="btn-menu-mega"><span></span></div>');

                                $('.drop-menu').hide();
                                $mobileMenuMega.find('.dropdown').append('<span class="btn-dropdown"></span>');

                                ChildDropmenu.children('ul').hide();
                                $('.drop-menu').find('.cat-title').append(
                                    '<span class="btn-dropdown-child"></span>');

                            } else {
                                var $desktopMenuMega = $('#mega-mobile').attr('id', 'mega-menu').removeAttr(
                                    'style');

                                $('.btn-mega').show();
                                $desktopMenuMega.find('.drop-menu').removeAttr('style');
                                $('.header-bottom').find('.col-2').append($desktopMenuMega);
                                $('.btn-menu-mega').remove();
                                $('.btn-dropdown-child').remove();
                                $('.drop-menu').children('.one-third').children('ul').show();
                            }
                        }
                    });

                    $(document).on('click', '.btn-menu-mega', function () {
                        $('#mega-mobile').slideToggle(300);
                        $(this).toggleClass('active');
                        return false;
                    });

                    $(document).on('click', '#mega-mobile ul.menu li a .btn-dropdown', function (e) {
                        $(this).toggleClass('active').closest('li').children('.drop-menu').slideToggle(400);
                        e.stopImmediatePropagation();
                        return false;
                    });

                    $(document).on('click', '#mega-mobile .btn-dropdown-child', function (e) {
                        $(this).toggleClass('active').closest('.one-third').children('ul').slideToggle(400);
                        e.stopImmediatePropagation();
                        return false;
                    });


                }; // Responsive Menu Mega

                var searchButton = function () {
                    var showsearch = $('.show-search button');
                    showsearch.on('click', function () {
                        $('.show-search').parent('div').children('.top-search.style1').toggleClass('active');
                        showsearch.toggleClass('active');
                    });
                }; // Show Search


                // Dom Ready
                $(function () {
                    responsiveMenu();
                    responsiveMenuMega_S2();
                    responsiveMenuMega();
                    searchButton();
                    searchFilterbox();
                    waveButton();
                });

            })(jQuery);
        </script>

        <!--End Header-->
        <!--Mobile Menu-->
        <div class="mobile-nav-wrapper" role="navigation">
            <div class="closemobileMenu"><i class="icon anm anm-times-l pull-right"></i> Close Menu</div>
            <ul id="MobileNav" class="mobile-nav">
                <li class="lvl1 parent megamenu"><a href="#">Category<i class="anm anm-plus-l"></i></a>

                    <ul>


                    </ul>
                </li>
                </li>
                <li class="lvl1 parent megamenu"><a href="<?php echo e(route('american.plastic.products')); ?>">All Products </a>

                </li>
                </li>
                <li class="lvl1 parent megamenu"><a href="<?php echo e(route('american.plastic.deals.products')); ?>">Deals</a>

                </li>

                <li class="lvl1 parent megamenu"><a href="<?php echo e(route('american.plastic.web.about.us')); ?>">About Us </a>

                </li>
                <li class="lvl1 parent megamenu"><a href="<?php echo e(route('american.plastic.web.contact.us')); ?>">Contact Us
                    </a>

                </li>

                <li class="lvl1"><a href="<?php echo e(route('american.plastic.web.news.and.event')); ?>"><b>News &
                            Event</b></a>
                </li>
            </ul>
        </div>
        <!--End Mobile Menu-->

        <div id="page-content" style="padding-right: 4%;padding-left:4%">
            <!--MainContent-->
            <div id="MainContent" class="main-content" role="main">
                <div id="ProductSection-product-template"
                    class="product-template__container prstyle1 container-fluid product-right-sidebar py-4">
                    <!--product-single-->
                    <div class="product-single">
                        <div class="row">

                            <div class="col-lg-9 col-md-9 col-sm-12 col-12">
                                <div class="product-details-img">
                                    <div class="zoompro-wrap product-zoom-right pl-20">
                                        <div class="zoompro-span">
                                            <?php
                                                $imageArray = explode(',', $item->product_image);
                                                $firstImage = $imageArray[0];
                                                $productid = $item->id;
                                                $productname = $item->product_name;
                                                $description = $item->product_description;
                                            ?>
                                            <img id="mainImage" class="zoompro" alt=""
                                                src="<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>"
                                                data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>"
                                                style="width: 100%;" alt="noImage" />

                                        </div>
                                        <div class="product-labels">
                                            <span class="lbl on-sale">Sale</span>
                                            <span class="lbl pr-label1">new</span>
                                        </div>
                                    </div>
                                    <?php if(count($imageArray) > 0): ?>
                                        <?php
                                            $secondImage = isset($imageArray[1]) ? $imageArray[1] : null;
                                            $thirdImage = isset($imageArray[2]) ? $imageArray[2] : null;
                                            $fourthImage = isset($imageArray[3]) ? $imageArray[3] : null;
                                            $fifthImage = isset($imageArray[4]) ? $imageArray[4] : null;
                                            $sixImage = isset($imageArray[5]) ? $imageArray[5] : null;
                                        ?>
                                    <?php endif; ?>
                                    <div class="product-thumb">
                                        <div id="gallery" class="product-dec-slider-2 product-tab-left">
                                            <?php if($secondImage != null): ?>
                                                <a data-image="<?php echo e(asset('admin/assets/img/product/' . $secondImage)); ?>"
                                                    data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $secondImage)); ?>"
                                                    class="thumbnail">
                                                    <img class="blur-up lazyload"
                                                        src="<?php echo e(asset('admin/assets/img/product/' . $secondImage)); ?>"
                                                        alt="" />
                                                </a>
                                            <?php endif; ?>
                                            <?php if($thirdImage != null): ?>
                                                <a data-image="<?php echo e(asset('admin/assets/img/product/' . $thirdImage)); ?>"
                                                    data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $thirdImage)); ?>"
                                                    class="thumbnail">
                                                    <img class="blur-up lazyload"
                                                        src="<?php echo e(asset('admin/assets/img/product/' . $thirdImage)); ?>"
                                                        alt="" />
                                                </a>
                                            <?php endif; ?>
                                            <?php if($fourthImage != null): ?>
                                                <a data-image="<?php echo e(asset('admin/assets/img/product/' . $fourthImage)); ?>"
                                                    data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $fourthImage)); ?>"
                                                    class="thumbnail">
                                                    <img class="blur-up lazyload"
                                                        src="<?php echo e(asset('admin/assets/img/product/' . $fourthImage)); ?>"
                                                        alt="" />
                                                </a>
                                            <?php endif; ?>
                                            <?php if($fifthImage != null): ?>
                                                <a data-image="<?php echo e(asset('admin/assets/img/product/' . $fifthImage)); ?>"
                                                    data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $fifthImage)); ?>"
                                                    class="thumbnail">
                                                    <img class="blur-up lazyload"
                                                        src="<?php echo e(asset('admin/assets/img/product/' . $fifthImage)); ?>"
                                                        alt="" />
                                                </a>
                                            <?php endif; ?>
                                            <?php if($sixImage != null): ?>
                                                <a data-image="<?php echo e(asset('admin/assets/img/product/' . $sixImage)); ?>"
                                                    data-zoom-image="<?php echo e(asset('admin/assets/img/product/' . $sixImage)); ?>"
                                                    class="thumbnail">
                                                    <img class="blur-up lazyload"
                                                        src="<?php echo e(asset('admin/assets/img/product/' . $sixImage)); ?>" alt="" />
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script>
                                    $(document).ready(function () {
                                        $('.thumbnail').on('click', function (event) {
                                            event.preventDefault();
                                            var newImageSrc = $(this).data('image');
                                            $('#mainImage').attr('src', newImageSrc);
                                        });
                                    });
                                </script>

                                <div class="product-information">
                                    <div class="product-single__meta">
                                        <h1 class="product-single__title"
                                            style="font-family: 'Montserrat', sans-serif;font-weight: 450">
                                            <?php echo e($item->product_name); ?>

                                        </h1>

                                        <div class="prInfoRow">
                                            <div class="product-stock">
                                                <?php if($item->qty > 0): ?>
                                                    <span class="instock ">In Stock</span>
                                                <?php else: ?>
                                                    <span class="instock ">Out Of Stock</span>
                                                <?php endif; ?>
                                            </div>
                                            <div class="product-sku">SKU: <span
                                                    class="variant-sku"><?php echo e($item->sku); ?></span></div>
                                            <div class="product-review"><a class="reviewLink" href="#tab2" hidden><i
                                                        class="font-13 fa fa-star"></i><i
                                                        class="font-13 fa fa-star"></i><i
                                                        class="font-13 fa fa-star"></i><i
                                                        class="font-13 fa fa-star-o"></i><i
                                                        class="font-13 fa fa-star-o"></i><span
                                                        class="spr-badge-caption">6
                                                        reviews</span></a></div>
                                        </div>
                                        <p class="product-single__price product-single__price-product-template">
                                            <span class="visually-hidden">Regular price</span>
                                            <span class="product-price__price product-price__price-product-template">
                                                <span id="ProductPrice-product-template"><span
                                                        class="money">LKR&nbsp;<?php echo e(number_format($item->product_price, 2)); ?></span>&nbsp;
                                                    <?php if($item->cutted_price != null): ?>
                                                        <span class="money"
                                                            style="font-size: 13px;color:rgb(170, 169, 169)"><strike>LKR&nbsp;<?php echo e(number_format($item->cutted_price, 2)); ?></strike></span>
                                                    <?php endif; ?>
                                                </span>
                                                <span style="font-size: 13px;color:rgb(170, 169, 169)">
                                                    <?php if($item->cutted_price > $item->product_price): ?>
                                                        <?php
                                                            $cuttedprice_featured = $item->cutted_price;
                                                            $productprice_featured = $item->product_price;
                                                            $percentage_featured =
                                                                (($cuttedprice_featured - $productprice_featured) /
                                                                    $cuttedprice_featured) *
                                                                100;
                                                        ?>
                                                        <span class="discount-percentage"><?php echo e(floor($percentage_featured)); ?>%
                                                            OFF</span>
                                                        <style>
                                                            .discount-percentage {
                                                                background: #ff0000;
                                                                color: white;
                                                                padding: 2px 8px;
                                                                border-radius: 4px;
                                                                font-size: 12px;
                                                                font-weight: bold;
                                                            }
                                                        </style>
                                                    <?php endif; ?>
                                                </span>
                                                <div class="installment-option" style="text-align: left">
                                                    <span style="font-size: 18px;font-weight:550;color:#969292">or 3 X
                                                        <span style="color: #6d6d6d;">LKR</span>
                                                        <?php echo e(number_format($item->product_price / 3, 2)); ?>&nbsp;with</span>
                                                    <img src="<?php echo e(asset('assets/images/kokologo.png')); ?>" alt="Koko"
                                                        style="height: 22px; margin-right: 5px;">

                                                </div>
                                                <div class="installment-option" style="text-align: left">
                                                    <span style="font-size: 18px;font-weight:550;color:#969292">or 3 X
                                                        <span style="color: #6d6d6d;">LKR</span>
                                                        <?php echo e(number_format($item->product_price / 3, 2)); ?>&nbsp;with</span>
                                                    <img src="<?php echo e(asset('assets/images/mintpaylogo.jpg')); ?>"
                                                        alt="Mintpay" style="height: 22px; margin-right: 5px;">

                                                </div>
                                            </span>
                                        </p>
                                        <div class="product-single__description rte">
                                            <p></p>
                                        </div>
                                        <form method="get" action="<?php echo e(route('american.plastic.web.order.checkout')); ?>"
                                            id="product_form" accept-charset="UTF-8"
                                            class="product-form product-form-product-template hidedropdown"
                                            enctype="multipart/form-data">
                                            <?php echo csrf_field(); ?>
                                            <input type="hidden" name="productid" value="<?php echo e($item->id); ?>">
                                            <input type="hidden" name="product_colorprice"
                                                value="<?php echo e($item->product_price); ?>">
                                            <div class="swatch clearfix swatch-0 option1" data-option-index="0">
                                                <div class="product-form__item">
                                                    <label class="header">Color:</label>
                                                    <div id="color-error"
                                                        style="color: red; display: none; font-size: 14px;"></div>
                                                    <?php

                                                        // Fetch ProductColor records associated with $item->id
                                                        $data = App\Models\Productcolor::where('product_id', $item->id)
                                                            ->where('pc_qty', '>', 0)
                                                            ->get();

                                                        // Initialize an array to store color codes and corresponding images
                                                        $color_codes = [];

                                                        // Extract color codes and image paths from ProductColor records
                                                        foreach ($data as $productColor) {
                                                            $color_codes[] = [
                                                                'color' => $productColor->product_color, // Assuming 'color' is the field name in ProductColor model
                                                                'image' => $productColor->color_image,
                                                                // Adjust 'image_path' to match your database field name
                                                            ];
                                                        }
                                                    ?>
                                                    <?php
                                                        try {
                                                            $clickcolor = request()->route('selectedcolor');
                                                            $brown = '#6B4B36';
                                                            $applegreen = '#88DB86';
                                                            $avacadogreen = '#2FCBD4';
                                                            $babyblue = '#61A8F8';
                                                            $babypink = '#f4c2c2';
                                                            $pink = '#C55C82';
                                                            $beige = '#BA9978';
                                                            $black = '#000000';
                                                            $blue = '#0F2D8D';
                                                            $bottlegreen = '#006A4E';
                                                            $clear = '#CAD3D0';
                                                            $coffee = '#6F4E37';
                                                            $cream = '#FFFDD0';
                                                            $darkgrey = '#A9A9A9';
                                                            $green = '#005E3A';
                                                            $grey = '#808080';
                                                            $lemonyellow = '#FEF250';
                                                            $lightorange = '#FFA07A';
                                                            $marblebeige = '#DDD3D1';
                                                            $marbleblue = '#62ADE6';
                                                            $marblegold = '#D4AF37';
                                                            $marbleorange = '#E9CBB9';
                                                            $marblepink = '#A78B8D';
                                                            $marblegreen = '#58C3C2';
                                                            $marblered = '#80355C';
                                                            $metalicblue = '#13598B';
                                                            $metalicred = '#C40233';
                                                            $metalicsilver = '#B4B4B8';
                                                            $metalicviolet = '#9582BB';
                                                            $metalicgold = '#D2C77D';
                                                            $orange = '#D09305';
                                                            $purple = '#A286F4';
                                                            $red = '#FF0000';
                                                            $skyblue = '#6CD2FA';
                                                            $white = '#FFFFFF';
                                                            $yellow = '#E9C500';
                                                            $saffron = '#F4C430';
                                                            $marbleviolet = '#BDB8EE';
                                                            $marblewhite = '#DEE4EE';
                                                            $butttermilk = '#DAD9C6';
                                                            $metalicgreen = '#3D7764';
                                                            $metalicyellow = '#F8B700';
                                                            $coffee = '#6F4E37';
                                                            $cream = '#FFFDD0';
                                                            $darkgray = '#A9A9A9';
                                                            $bottlegreen = '#006A4E';

                                                            $selectcolorvalue = '';
                                                            if ($clickcolor == 'Brown') {
                                                                $selectcolorvalue = $brown;
                                                            } elseif ($clickcolor == 'Applegreen') {
                                                                $selectcolorvalue = $applegreen;
                                                            } elseif ($clickcolor == 'Avocadogreen') {
                                                                $selectcolorvalue = $avacadogreen;
                                                            } elseif ($clickcolor == 'Babyblue') {
                                                                $selectcolorvalue = $babyblue;
                                                            } elseif ($clickcolor == 'Babypink') {
                                                                $selectcolorvalue = $babypink;
                                                            } elseif ($clickcolor == 'Beige') {
                                                                $selectcolorvalue = $beige;
                                                            } elseif ($clickcolor == 'Black') {
                                                                $selectcolorvalue = $black;
                                                            } elseif ($clickcolor == 'Blue') {
                                                                $selectcolorvalue = $blue;
                                                            } elseif ($clickcolor == 'Bottlegreen') {
                                                                $selectcolorvalue = $bottlegreen;
                                                            } elseif ($clickcolor == 'Clear') {
                                                                $selectcolorvalue = $clear;
                                                            } elseif ($clickcolor == 'Coffee') {
                                                                $selectcolorvalue = $coffee;
                                                            } elseif ($clickcolor == 'Cream') {
                                                                $selectcolorvalue = $cream;
                                                            } elseif ($clickcolor == 'Darkgrey') {
                                                                $selectcolorvalue = $darkgrey;
                                                            } elseif ($clickcolor == 'Green') {
                                                                $selectcolorvalue = $green;
                                                            } elseif ($clickcolor == 'Grey') {
                                                                $selectcolorvalue = $grey;
                                                            } elseif ($clickcolor == 'Lemonyellow') {
                                                                $selectcolorvalue = $lemonyellow;
                                                            } elseif ($clickcolor == 'Lightorange') {
                                                                $selectcolorvalue = $lightorange;
                                                            } elseif ($clickcolor == 'Marblebeige') {
                                                                $selectcolorvalue = $marblebeige;
                                                            } elseif ($clickcolor == 'Marbleblue') {
                                                                $selectcolorvalue = $marbleblue;
                                                            } elseif ($clickcolor == 'Marblegold') {
                                                                $selectcolorvalue = $marblegold;
                                                            } elseif ($clickcolor == 'Marbleorange') {
                                                                $selectcolorvalue = $marbleorange;
                                                            } elseif ($clickcolor == 'Marblepink') {
                                                                $selectcolorvalue = $marblepink;
                                                            } elseif ($clickcolor == 'Marblered') {
                                                                $selectcolorvalue = $marblered;
                                                            } elseif ($clickcolor == 'Metallicblue') {
                                                                $selectcolorvalue = $metalicblue;
                                                            } elseif ($clickcolor == 'Metalicred') {
                                                                $selectcolorvalue = $metalicred;
                                                            } elseif ($clickcolor == 'Metallicsilver') {
                                                                $selectcolorvalue = $metalicsilver;
                                                            } elseif ($clickcolor == 'Metalicviolet') {
                                                                $selectcolorvalue = $metalicviolet;
                                                            } elseif ($clickcolor == 'Orange') {
                                                                $selectcolorvalue = $orange;
                                                            } elseif ($clickcolor == 'Purple') {
                                                                $selectcolorvalue = $purple;
                                                            } elseif ($clickcolor == 'Red') {
                                                                $selectcolorvalue = $red;
                                                            } elseif ($clickcolor == 'Skyblue') {
                                                                $selectcolorvalue = $skyblue;
                                                            } elseif ($clickcolor == 'Purewhite') {
                                                                $selectcolorvalue = $white;
                                                            } elseif ($clickcolor == 'Yellow') {
                                                                $selectcolorvalue = $yellow;
                                                            } elseif ($clickcolor == 'Saffron') {
                                                                $selectcolorvalue = $saffron;
                                                            } elseif ($clickcolor == 'Marblegreen') {
                                                                $selectcolorvalue = $marblegreen;
                                                            } elseif ($clickcolor == 'Pink') {
                                                                $selectcolorvalue = $pink;
                                                            } elseif ($clickcolor == 'Metallicgold') {
                                                                $selectcolorvalue = $metalicgold;
                                                            } elseif ($clickcolor == 'Marbleviolet') {
                                                                $selectcolorvalue = $marbleviolet;
                                                            } elseif ($clickcolor == 'Marblewhite') {
                                                                $selectcolorvalue = $marblewhite;
                                                            } elseif ($clickcolor == 'Buttermilk') {
                                                                $selectcolorvalue = $butttermilk;
                                                            } elseif ($clickcolor == 'Metalicgreen') {
                                                                $selectcolorvalue = $metalicgreen;
                                                            } elseif ($clickcolor == 'Metalicyellow') {
                                                                $selectcolorvalue = $metalicyellow;
                                                            }

                                                            $key = 0;
                                                            foreach ($color_codes as $index => $color_entry) {
                                                                if ($color_entry['color'] === $selectcolorvalue) {
                                                                    $key = $index;
                                                                    break;
                                                                }
                                                            }

                                                            $selectedColor = request()->query(
                                                                'selected_color',
                                                                $color_codes[$key]['color'],
                                                            );
                                                        } catch (\Throwable $th) {
                                                            DB::table('error_logs')->insert([
                                                                'message' => $th->getMessage(),
                                                                'file' => $th->getFile(),
                                                                'line' => $th->getLine(),
                                                                'trace' => $th->getTraceAsString(),
                                                                'created_at' => now(),
                                                            ]);
                                                        }
                                                    ?>

                                                    <?php $__currentLoopData = $color_codes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $color): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <div data-value="<?php echo e($color['color']); ?>"
                                                            data-image="<?php echo e(asset('admin/assets/img/product/' . $color['image'])); ?>"
                                                            class="swatch-element color <?php echo e(strtolower($color['color'])); ?> available">
                                                            <input class="swatchInput"
                                                                id="swatch-0-<?php echo e(strtolower($color['color'])); ?>" type="radio"
                                                                name="selected_color" value="<?php echo e($color['color']); ?>"
                                                                data-url="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)])); ?>?id=<?php echo e($item->id); ?>">
                                                            <label class="swatchLbl color small"
                                                                for="swatch-0-<?php echo e(strtolower($color['color'])); ?>"
                                                                style="background-color: <?php echo e(strtolower($color['color'])); ?>;"
                                                                title="<?php echo e(ucfirst($color['color'])); ?>">
                                                            </label>
                                                        </div>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    <script>
                                                        document.addEventListener('DOMContentLoaded', function () {
                                                            const swatchInputs = document.querySelectorAll('.swatchInput');
                                                            swatchInputs.forEach(function (input) {
                                                                input.addEventListener('change', function () {

                                                                    var selectedColor = this.value;
                                                                    var colorselect = ''
                                                                    var colorMap = {
                                                                        '#A78B8D': 'Marblepink',
                                                                        '#80355C': 'Marblered',
                                                                        '#61A8F8': 'Babyblue',
                                                                        '#C55C82': 'Pink',
                                                                        '#FFFFFF': 'Purewhite',
                                                                        '#FF0000': 'Red',
                                                                        '#CAD3D0': 'Clear',
                                                                        '#BA9978': 'Beige',
                                                                        '#88DB86': 'Applegreen',
                                                                        '#DEE4EE': 'Marblewhite',
                                                                        '#BDB8EE': 'Marbleviolet',
                                                                        '#E9CBB9': 'Marbleorange',
                                                                        '#FEF250': 'Lemonyellow', // Duplicate hex code; only one can be kept
                                                                        '#f4c2c2': 'Babypink',
                                                                        '#D2C77D': 'Metallicgold',
                                                                        '#DAD9C6': 'Buttermilk',
                                                                        '#E9C500': 'Yellow',
                                                                        '#D3CBC4': 'Graybeige', // Duplicate hex code; only one can be kept
                                                                        '#0F2D8D': 'Blue',
                                                                        '#005E3A': 'Green',
                                                                        '#58C3C2': 'Marblegreen',
                                                                        '#BF8BFF': 'Violet',
                                                                        '#6B4B36': 'Brown',
                                                                        '#C0C0C0': 'Silver',
                                                                        '#808080': 'Grey',
                                                                        '#6CD2FA': 'Skyblue',
                                                                        '#D09305': 'Orange',
                                                                        '#13598B': 'Metallicblue',
                                                                        '#B4B4B8': 'Metallicsilver',
                                                                        '#9582BB': 'Metalicviolet',
                                                                        '#A286F4': 'Purple',
                                                                        '#62ADE6': 'Marbleblue', // Duplicate name; you may want to rename one
                                                                        '#2FCBD4': 'Avocadogreen',
                                                                        '#FFA07A': 'Lightorange',
                                                                        '#DDD3D1': 'Marblebeige', // Duplicate name; you may want to rename one
                                                                        '#F4C430': 'Saffron',
                                                                        '#000000': 'Black',
                                                                        '#D4AF37': 'Marblegold',
                                                                        '#3D7764': 'Metalicgreen',
                                                                        '#F8B700': 'Metalicyellow',
                                                                        '#6F4E37': 'Coffee',
                                                                        '#FFFDD0': 'Cream',
                                                                        '#A9A9A9': 'Darkgray',
                                                                        '#006A4E': 'Bottlegreen',


                                                                    };

                                                                    // Check the selected color against the colorMap object
                                                                    if (colorMap[selectedColor]) {
                                                                        colorselect = colorMap[selectedColor];
                                                                    } else {
                                                                        colorselect = 'Unknown'; // Handle unknown colors if needed
                                                                    }

                                                                    var id = '<?php echo e($item->id); ?>';
                                                                    const redirectUrl =
                                                                        "<?php echo e(route('american.plastic.web.product.details.color', ['id' => ':id', 'selectedcolor' => ':selectedcolor'])); ?>";
                                                                    const finalUrl = redirectUrl.replace(':id', id).replace(':selectedcolor',
                                                                        colorselect);

                                                                    setTimeout(function () {
                                                                        window.location.href = finalUrl;
                                                                    }, 1000);
                                                                });
                                                            });
                                                        });
                                                    </script>

                                                    <script
                                                        src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                                                    <script>
                                                        $(document).ready(function () {
                                                            // Event listener for color swatch selection
                                                            $(document).on('change', '.swatchInput', function () {
                                                                // Get the selected color
                                                                var selectedColor = $(this).val();

                                                                // Find the corresponding swatch element
                                                                var swatchElement = $('.swatch-element.color[data-value="' + selectedColor + '"]');

                                                                // Get the image path from data-image attribute
                                                                var imagePath = swatchElement.data('image');


                                                                // Update the main image src attribute
                                                                $('#mainImage').attr('src', imagePath);



                                                            });


                                                        });
                                                    </script>


                                                </div>

                                            </div>
                                            
                                            <!-- Product Action -->
                                            <div class="product-action clearfix">
                                                <div class="row">
                                                    <div class="product-form__item--quantity">
                                                        <div class="wrapQtyBtn">
                                                            <div class="qtyField">
                                                                <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                                        class="fa anm anm-minus-r"
                                                                        aria-hidden="true"></i></a>
                                                                <input type="text" id="qty" name="quantity" value="1"
                                                                    class="product-form__input qty">
                                                                <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                                        class="fa anm anm-plus-r"
                                                                        aria-hidden="true"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12 product-form__item--submit">
                                                        <div class="col-md-12 p-0">

                                                            <?php if(Auth::check()): ?>
                                                                <?php
                                                                    $user = Auth::user();
                                                                    $productexists = App\Models\Wishlist::where(
                                                                        'user_id',
                                                                        $user->id,
                                                                    )
                                                                        ->where('product_id', $item->id)
                                                                        ->exists();
                                                                ?>
                                                                <?php if($productexists): ?>
                                                                    <span class="wishlist"><i class="fa fa-heart"
                                                                            style="color: #ce1111"></i></span>
                                                                <?php else: ?>
                                                                    <a href="<?php echo e(route('american.plastic.web.addto.wishlist', ['id' => $item->id])); ?>"
                                                                        title="Add to Wishlist">
                                                                        <i class="icon anm anm-heart-l" aria-hidden="true"></i>
                                                                        <span>Add to
                                                                            Wishlist</span>
                                                                    </a>
                                                                <?php endif; ?>
                                                            <?php else: ?>
                                                                <i class="icon anm anm-heart-l" aria-hidden="true"></i>
                                                                <span>Add to Wishlist</span>
                                                            <?php endif; ?>
                                                            <div class="row py-2 align-items-center">
                                                                <?php if($item->qty != 0): ?>
                                                                    <div class="col-6 col-md-4 mb-2 mb-md-0">
                                                                        <?php if(Auth::user()): ?>
                                                                            <button type="button" name="add"
                                                                                class="btn product-form__cart-submit w-100"
                                                                                id="ordernow"
                                                                                style="border-radius:20px;color:#ffffff;">
                                                                                <span>Buy Now!</span>
                                                                            </button>
                                                                        <?php else: ?>
                                                                            <button type="button" name="add"
                                                                                class="btn product-form__cart-submit w-100"
                                                                                id="showlogin"
                                                                                style="border-radius:20px;color:#ffffff;">
                                                                                <span>Buy Now!</span>
                                                                            </button>
                                                                        <?php endif; ?>

                                                                        <script>
                                                                            // Select the button element
                                                                            var orderButton = document.getElementById('ordernow');

                                                                            // Add a click event listener
                                                                            orderButton.addEventListener('click', function () {
                                                                                // var form = document.getElementById('product_form');
                                                                                const errorDiv = document.getElementById('color-error');

                                                                                event.preventDefault(); // Stop form submission if needed
                                                                                errorDiv.textContent = "Please select a color.";
                                                                                errorDiv.style.display = "block";

                                                                                // Move the error message below the color label if needed
                                                                                const colorContainer = document.getElementById('color-container');
                                                                                colorContainer.insertAdjacentElement('afterend', errorDiv);


                                                                            });
                                                                        </script>
                                                                    </div>
                                                                    <div class="col-6 col-md-4 mb-2 mb-md-0">
                                                                        <?php if(Auth::check()): ?>
                                                                            <?php
                                                                                $user = Auth::user();
                                                                                $productExists = App\Models\Cart::where(
                                                                                    'userid',
                                                                                    $user->id,
                                                                                )
                                                                                    ->where('productid', $item->id)
                                                                                    ->where('color', $selectedColor) // match the selected color
                                                                                    ->exists();
                                                                            ?>
                                                                            <?php if($productExists): ?>
                                                                                <button type="button"
                                                                                    class="btn product-form__cart-submit w-100"
                                                                                    style="border-radius:20px;color:#ffffff;">
                                                                                    <span id="AddToCartText-product-template">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="16" height="16"
                                                                                            fill="currentColor"
                                                                                            class="bi bi-cart-check me-2"
                                                                                            viewBox="0 0 16 16">
                                                                                            <path
                                                                                                d="M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z" />
                                                                                            <path
                                                                                                d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.5-2H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                                                                                        </svg>
                                                                                        Added
                                                                                    </span>
                                                                                </button>
                                                                            <?php else: ?>
                                                                                <button type="button"
                                                                                    class="btn product-form__cart-submit w-100"
                                                                                    id="addToCartBtn"
                                                                                    onclick="addToCart(<?php echo e($item->id); ?>);"
                                                                                    style="border-radius:20px;color:#ffffff;">
                                                                                    <span id="AddToCartText-product-template">
                                                                                        <i class="fas fa-shopping-cart"></i>
                                                                                        Add
                                                                                    </span>
                                                                                </button>
                                                                            <?php endif; ?>
                                                                        <?php else: ?>
                                                                            <button type="button"
                                                                                class="btn product-form__cart-submit w-100"
                                                                                id="addToCartBtn"
                                                                                onclick="addToCart(<?php echo e($item->id); ?>);"
                                                                                style="border-radius:20px;color:#ffffff;">
                                                                                <span id="AddToCartText-product-template">
                                                                                    <i class="fas fa-shopping-cart"></i>
                                                                                    Add
                                                                                </span>
                                                                            </button>
                                                                        <?php endif; ?>
                                                                    </div>
                                                                    <div class="col-12 col-md-2 text-center">
                                                                        <div class="mb-0 svg-container" id="svgicon">
                                                                            <i class="fas fa-share-alt fa-2x"></i>
                                                                            <!-- Share icon -->
                                                                        </div>
                                                                    </div>
                                                                    <script>
                                                                        document.getElementById('svgicon').addEventListener('click', function () {
                                                                            console.log("clickedshare");
                                                                            $('#sharemodal').modal('show');
                                                                        });
                                                                    </script>
                                                                <?php else: ?>
                                                                    <div class="col-12 py-2">
                                                                        <button type="button" name="add"
                                                                            class="btn product-form__cart-submit w-100 red-background">
                                                                            <span>Out Of Stock</span>
                                                                        </button>
                                                                    </div>
                                                                <?php endif; ?>
                                                            </div>

                                                            <style>
                                                                .svg-container {
                                                                    display: flex;
                                                                    justify-content: center;
                                                                    align-items: center;
                                                                    height: 100%;
                                                                }

                                                                .red-background {
                                                                    background-color: red;
                                                                    padding: 10px;
                                                                    color: #ffffff;
                                                                }

                                                                /* Buy Now & Add to Cart button - green brand color */
                                                                .product-form__cart-submit {
                                                                    background: linear-gradient(135deg, #5b8716 0%, #85c226 100%) !important;
                                                                    border-color: #5b8716 !important;
                                                                    color: #ffffff !important;
                                                                    font-family: 'Montserrat', sans-serif;
                                                                    font-weight: 600;
                                                                    letter-spacing: 0.3px;
                                                                    border-radius: 50px;
                                                                    transition: all 0.3s ease;
                                                                    box-shadow: 0 3px 10px rgba(91, 135, 22, 0.25);
                                                                }

                                                                .product-form__cart-submit:hover,
                                                                .product-form__cart-submit:focus {
                                                                    background: linear-gradient(135deg, #4a6f12 0%, #73a820 100%) !important;
                                                                    border-color: #4a6f12 !important;
                                                                    color: #ffffff !important;
                                                                    box-shadow: 0 5px 15px rgba(91, 135, 22, 0.4);
                                                                    transform: translateY(-1px);
                                                                }

                                                                /* Mobile-specific styles */
                                                                @media (max-width: 767.98px) {
                                                                    .product-form__cart-submit {
                                                                        padding: 0.5rem;
                                                                        font-size: 0.9rem;
                                                                    }

                                                                    #svgicon {
                                                                        margin-top: 10px;
                                                                    }
                                                                }
                                                            </style>


                                                        </div>

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

                                            <!-- End Product Action -->
                                        </form>


                                    </div>
                                </div>
                                <!--Product Tabs-->
                                <div class="tabs-listing">
                                    <h3 style="font-family: 'Montserrat', sans-serif;font-weight: 450">Product
                                        Description</h3>
                                    <div class="tab-container">
                                        <div id="tab1" class="tab-content">
                                            <div class="product-description rte">
                                                <p><?php echo $item->product_description; ?></p>
                                            </div>

                                            <!-- Review Section -->
                                            <?php echo $__env->make('web.home.products.review-layout', ['item' => $item], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                        </div>
                                    </div>
                                </div>

                                <!-- JavaScript for Star Rating and Reviews -->
                                <script>
                                    document.addEventListener('DOMContentLoaded', function () {
                                        const stars = document.querySelectorAll('.star');
                                        const ratingInput = document.getElementById('rating-value');

                                        // Star rating interaction
                                        stars.forEach(star => {
                                            star.addEventListener('click', function () {
                                                const value = this.getAttribute('data-value');
                                                ratingInput.value = value;

                                                // Update star display
                                                stars.forEach((s, index) => {
                                                    s.textContent = index < value ? '★' : '☆';
                                                    s.style.color = index < value ? '#ffc107' : '#000';
                                                });
                                            });

                                            // Hover effect
                                            star.addEventListener('mouseover', function () {
                                                const value = this.getAttribute('data-value');
                                                stars.forEach((s, index) => {
                                                    if (index < value) {
                                                        s.textContent = '★';
                                                        s.style.color = '#ffc107';
                                                    }
                                                });
                                            });

                                            star.addEventListener('mouseout', function () {
                                                const currentRating = ratingInput.value;
                                                stars.forEach((s, index) => {
                                                    s.textContent = index < currentRating ? '★' : '☆';
                                                    s.style.color = index < currentRating ? '#ffc107' : '#000';
                                                });
                                            });
                                        });

                                        // Form submission
                                        document.getElementById('review-form').addEventListener('submit', function (e) {
                                            e.preventDefault();
                                            const rating = ratingInput.value;
                                            const reviewText = document.getElementById('review-text').value;
                                            const reviewerName = document.getElementById('review-name').value || 'Anonymous';

                                            if (rating === '0') {
                                                alert('Please select a rating');
                                                return;
                                            }

                                            if (!reviewText.trim()) {
                                                alert('Please write your review');
                                                return;
                                            }

                                            // Create new review element
                                            const reviewItem = document.createElement('div');
                                            reviewItem.className = 'review-item';
                                            reviewItem.style.padding = '15px 0';
                                            reviewItem.style.borderBottom = '1px solid #eee';

                                            const starsDisplay = '★'.repeat(rating) + '☆'.repeat(5 - rating);
                                            const currentDate = new Date().toLocaleDateString('en-US', {
                                                year: 'numeric',
                                                month: 'long',
                                                day: 'numeric'
                                            });

                                            reviewItem.innerHTML = `
            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                <div style="font-weight: bold;">${reviewerName}</div>
                <div style="color: #666; font-size: 14px;">${currentDate}</div>
            </div>
            <div style="color: #ffc107; font-size: 16px; margin: 5px 0;">
                ${starsDisplay}
            </div>
            <p style="margin: 10px 0;">${reviewText}</p>
        `;

                                            // Add to the top of reviews list
                                            document.querySelector('.review-items').prepend(reviewItem);

                                            // Update review count
                                            const reviewCountElement = document.querySelector('.review-sorting div:first-child');
                                            const currentCount = parseInt(reviewCountElement.textContent);
                                            reviewCountElement.textContent = `${currentCount + 1} reviews`;

                                            // Reset form
                                            document.getElementById('review-text').value = '';
                                            document.getElementById('review-name').value = '';
                                            ratingInput.value = '0';
                                            stars.forEach(star => {
                                                star.textContent = '☆';
                                                star.style.color = '#000';
                                            });

                                            alert('Thank you for your review!');
                                        });

                                        // Sorting functionality
                                        document.getElementById('sort-reviews').addEventListener('change', function () {
                                            // In a real implementation, this would fetch sorted reviews from the server
                                            alert('Sorting by: ' + this.value);
                                            // You would typically reload the reviews section with sorted data
                                        });
                                    });
                                </script>
                                <!--End Product Tabs-->
                                <?php echo $__env->make('web.home.products.sharemodal', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                            </div>


                            <!--Product Sidebar-->
                            <div class="col-lg-3 col-md-3 col-sm-12 col-12">
                                <div class="prSidebar sidebar-product">
                                    <!--Product Feature-->
                                    <div class="delivery-service-details" style="font-size: 12px;">
                                        <div class="card delivery-card">
                                            <div class="card-body">
                                                <span class="card-title" style="font-size: 15px;"> Delivery</span>
                                                <?php if(Auth::check()): ?>
                                                    <?php
                                                        $userData = App\Models\Userdata::where(
                                                            'userid',
                                                            Auth::user()->id,
                                                        )->first();
                                                    ?>
                                                    <ul class="list-group list-group-flush">
                                                        <?php if($userData): ?>
                                                            <div
                                                                class="list-group-item d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    <i class="fas fa-map-marker-alt"></i>
                                                                    <?php echo e($userData->address ?? 'Not Updated'); ?>

                                                                </div>
                                                                <div>
                                                                    <span class="change-text"><a
                                                                            href="<?php echo e(route('american.plastic.web.myprofile')); ?>"
                                                                            style="color: #3688d4">CHANGE</a></span>

                                                                </div>
                                                            </div>
                                                            <li class="list-group-item flex-row">
                                                                <div class="left-item">
                                                                    <i class="fas fa-truck"></i> <strong>Standard
                                                                        Delivery
                                                                        :-&nbsp;&nbsp;&nbsp;</strong>
                                                                </div>
                                                                <?php if($userData->city != null): ?>
                                                                    <?php

                                                                        $delivery_Data = App\Models\Area::where(
                                                                            'area_name',
                                                                            $userData->city,
                                                                        )->first();

                                                                    ?>
                                                                    <div class="right-item">
                                                                        <strong>Rs.
                                                                            <?php echo e($delivery_Data->shippingZone->price ?? 0); ?></strong>
                                                                    </div>
                                                                <?php else: ?>
                                                                    <div class="right-item">
                                                                        <strong>Rs. 425</strong>
                                                                    </div>
                                                                <?php endif; ?>

                                                            </li>
                                                        <?php else: ?>
                                                            <li class="list-group-item"><i class="fas fa-map-marker-alt"></i>
                                                                Western, Colombo 1 - 15, Colombo 01</li>
                                                            <li class="list-group-item flex-row">
                                                                <div class="left-item">
                                                                    <i class="fas fa-truck"></i> <strong>Standard
                                                                        Delivery
                                                                        :-&nbsp;&nbsp;&nbsp;</strong>
                                                                </div>
                                                                <div class="right-item">
                                                                    <strong>Rs. 425</strong>
                                                                </div>
                                                            </li>
                                                        <?php endif; ?>


                                                    </ul>
                                                <?php else: ?>
                                                    <ul class="list-group list-group-flush">
                                                        <li class="list-group-item"><i class="fas fa-map-marker-alt"></i>
                                                            Western, Colombo 1 - 15, Colombo 01</li>
                                                        <li class="list-group-item flex-row">
                                                            <div class="left-item">
                                                                <i class="fas fa-truck"></i> <strong>Standard Delivery
                                                                    :-&nbsp;&nbsp;&nbsp;</strong>
                                                            </div>
                                                            <div class="right-item">
                                                                <strong>Rs. 425</strong>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                <?php endif; ?>
                                            </div>
                                            <div class="card-body">
                                                <span class="card-title" style="font-size: 15px;"> Service</span>
                                                <ul class="list-group">
                                                    <li class="list-group-item"><i class="fas fa-shield-alt"></i>
                                                        Warranty not
                                                        available</li>


                                                    <li class="list-group-item">
                                                        <span><i class="fas fa-thumbs-up"></i> Positive Seller
                                                            Ratings</span>

                                                    </li>
                                                    <li class="list-group-item"><i class="fas fa-clock"></i> Ship on
                                                        Time: 96%
                                                    </li>
                                                    <li class="list-group-item" hidden><i class="fas fa-comments"></i>
                                                        Chat
                                                        Response Rate: 100%</li>
                                                </ul>
                                            </div>
                                        </div>


                                    </div>
                                    <style>
                                        .change-text {
                                            /* Add your styles here */
                                            color: #3688d4;
                                            font-weight: bold;
                                        }

                                        .card {
                                            border: none;
                                            border-radius: 10px;
                                            padding: 20px;
                                            background-color: #ffffff;
                                            box-shadow: 2px 2px 4px 8px rgba(0, 0, 0, 0.1);
                                        }

                                        .card-title {
                                            font-size: 1.5rem;
                                            margin-bottom: 15px;
                                            color: #333;
                                        }

                                        .list-group-item {
                                            padding: 10px 0;
                                            border: none;
                                            color: #666;
                                            display: flex;

                                        }

                                        .list-group-item .left-item {
                                            display: flex;
                                            align-items: center;
                                        }

                                        .list-group-item .right-item {
                                            display: flex;
                                            align-items: center;
                                        }

                                        .list-group-item i {
                                            margin-right: 10px;
                                            color: #9a9ea3;
                                        }


                                        .progress {
                                            height: 8px;
                                            /* Adjust height as needed */
                                            background-color: #e9ecef;
                                            /* Background color of the progress bar container */
                                            border-radius: 4px;
                                            /* Rounded corners */
                                            overflow: hidden;
                                            /* Ensures the progress bar doesn't overflow its container */
                                        }

                                        .progress-bar {
                                            height: 100%;
                                            /* Full height of the progress bar */
                                            color: #fff;
                                            /* Text color */
                                            text-align: center;
                                            /* Center-align text inside the progress bar */
                                            line-height: 8px;
                                            /* Match the height of the progress bar */
                                            font-size: 12px;
                                            /* Adjust font size */
                                            background-color: #28a745;
                                            /* Green color for the progress bar */
                                            transition: width 0.6s ease;
                                            /* Smooth transition animation */
                                        }
                                    </style>

                                    <!--End Product Feature-->
                                    <!--Related Product-->
                                    <div class="related-product grid-products clearfix py-2">
                                        <header class="section-header">
                                            <h2 class="section-header__title text-center h2"><span>Related
                                                    Products</span></h2>
                                            <p class="sub-heading">Discover products that beautifully complement your
                                                selection, enhancing your shopping experience with curated
                                                recommendations.</p>
                                        </header>
                                        <div class="grid">
                                            <?php $__currentLoopData = $relatedproduct; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="grid__item">
                                                    <div class="mini-list-item">
                                                        <div class="mini-view_image">
                                                            <a class="grid-view-item__link" href="#">
                                                                <?php
                                                                    $imageArray = explode(',', $item->product_image);
                                                                    $firstImage = $imageArray[0];
                                                                ?>
                                                                <img class="grid-view-item__image"
                                                                    src="<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>"
                                                                    alt="">
                                                            </a>
                                                        </div>
                                                        <div class="details">
                                                            <a class="grid-view-item__title"
                                                                href="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($item->product_name)])); ?>?id=<?php echo e($item->id); ?>"><?php echo e($item->product_name); ?></a>
                                                            <div class="grid-view-item__meta"><span
                                                                    class="product-price__price"><span
                                                                        class="money">LKR&nbsp;<?php echo e(number_format($item->product_price, 2)); ?></span></span>
                                                            </div>
                                                            <div class="product-review">
                                                                <i class="font-13 fa fa-star"></i>
                                                                <i class="font-13 fa fa-star"></i>
                                                                <i class="font-13 fa fa-star"></i>
                                                                <i class="font-13 fa fa-star"></i>
                                                                <i class="font-13 fa fa-star"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                    <!--End Related Product-->
                                    <!--Recently Viewed Product-->

                                    <!--End Recently Viewed Product-->
                                </div>

                            </div>
                            <!--Product Sidebar-->
                        </div>
                    </div>
                    <!--End-product-single-->
                    <?php if($products): ?>
                        <h1 class="underline">Similar Color Products</h1>
                        <style>
                            .underline {
                                border-bottom: 1px solid rgb(185, 184, 184);
                                /* You can adjust the color and thickness */
                                padding-bottom: 5px;
                                /* Adjust the space between the text and the underline */
                            }
                        </style>
                        <div class="row">
                            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $productGroup): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php $__currentLoopData = $productGroup; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="col-md-3 py-4">
                                        <div class="cardd">
                                            <div class="image-container">
                                                <div class="first">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <?php if($product->cutted_price != null): ?>
                                                            <?php
                                                                $cuttedprice_latest = $product->cutted_price;
                                                                $productprice_latest = $product->product_price;
                                                                $percentage_latest =
                                                                    (($cuttedprice_latest - $productprice_latest) /
                                                                        $cuttedprice_latest) *
                                                                    100;
                                                            ?>
                                                            <span class="discount"
                                                                style="font-size: 16px;"><?php echo e(floor($percentage_latest)); ?>%</span>
                                                        <?php else: ?>
                                                            <span class="discount" hidden></span>
                                                        <?php endif; ?>
                                                        <?php if(Auth::check()): ?>
                                                            <?php
                                                                $user = Auth::user();
                                                                $productexists = App\Models\Wishlist::where(
                                                                    'user_id',
                                                                    $user->id,
                                                                )
                                                                    ->where('product_id', $product->id)
                                                                    ->exists();
                                                            ?>
                                                            <?php if($productexists): ?>
                                                                <span class="wishlist"><i class="fa fa-heart"
                                                                        style="color: #ce1111"></i></span>
                                                            <?php else: ?>
                                                                <a href="<?php echo e(route('american.plastic.web.addto.wishlist', ['id' => $product->id])); ?>"
                                                                    title="Add to Wishlist">
                                                                    <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                                </a>
                                                            <?php endif; ?>
                                                        <?php else: ?>
                                                            <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                                <?php
                                                    $imageArray = explode(',', $product->product_image);
                                                    $firstImage_latest = $imageArray[0];
                                                ?>
                                                <a
                                                    href="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($product->product_name)])); ?>?id=<?php echo e($product->id); ?>">
                                                    <img src="<?php echo e(asset('admin/assets/img/product/' . $product->color_image)); ?>"
                                                        class="img-fluid rounded thumbnail-image"
                                                        onerror="this.src='https://i.ibb.co/qpB9ZCZ/placeholder.png'" width="100%">
                                                </a>
                                            </div>
                                            <div class="product-detail-container p-2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <h5 class="dress-name"><a
                                                            href="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($product->product_name)])); ?>?id=<?php echo e($product->id); ?>"><?php echo e($product->product_name); ?></a>
                                                    </h5>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span
                                                        class="new-price"><strong>LKR&nbsp;<?php echo e(number_format($product->product_price, 2)); ?></strong></span>
                                                    <small class="old-price text-right"><del style="font-size: 13px;">
                                                            <?php if($product->cutted_price != null): ?>
                                                                LKR&nbsp;<?php echo e(number_format($product->cutted_price, 2)); ?>&nbsp;
                                                            <?php endif; ?>
                                                        </del></small>
                                                </div>
                                                <div class="installment-option" style="text-align: left">
                                                    <span style="font-size: 15px;font-weight:550;color:#969292">or 3 X
                                                        <span style="color: #6d6d6d;">LKR</span>
                                                        <?php echo e(number_format($product->product_price / 3, 2)); ?>&nbsp;with</span>
                                                    <img src="<?php echo e(asset('assets/images/kokologo.png')); ?>" alt="Koko"
                                                        style="height: 15px; margin-right: 5px;">

                                                </div>
                                                <div class="installment-option" style="text-align: left">
                                                    <span style="font-size: 18px;font-weight:550;color:#969292">or 3 X
                                                        <span style="color: #6d6d6d;">LKR</span>
                                                        <?php echo e(number_format((Auth::check() && Auth::user()->is_corporate ? ($item->cutted_price ?? $item->product_price) : $item->product_price) / 3, 2)); ?>&nbsp;with</span>
                                                    <img src="<?php echo e(asset('assets/images/mintpaylogo.jpg')); ?>" alt="Mintpay"
                                                        style="height: 22px; margin-right: 5px;">

                                                </div>
                                                <div class="d-flex justify-content-between align-items-center pt-1">
                                                    <div>
                                                        <i class="fa fa-star-o rating-star"></i>
                                                        <span class="rating-number">4.8</span>
                                                    </div>
                                                    <?php if($product->order > 0): ?>
                                                        <span class="buy"><?php echo e($product->order + 20); ?>&nbsp;sold</span>
                                                    <?php else: ?>
                                                        <span class="buy">20 sold</span>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    <?php endif; ?>
                    <div class="modal fade" id="sharemodel" tabindex="-1" aria-labelledby="myModelLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="myModelLabel">Share Modal</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>Share this link via</p>
                                    <div class="d-flex align-items-center icons">
                                        <a href="#" class="fs-5 d-flex align-items-center justify-content-center">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                        <a href="#" class="fs-5 d-flex align-items-center justify-content-center">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                        <a href="#" class="fs-5 d-flex align-items-center justify-content-center">
                                            <span class="fab fa-instagram"></span>
                                        </a>
                                        <a href="#" class="fs-5 d-flex align-items-center justify-content-center">
                                            <span class="fab fa-whatsapp"></span>
                                        </a>
                                        <a href="#" class="fs-5 d-flex align-items-center justify-content-center">
                                            <span class="fab fa-telegram-plane"></span>
                                        </a>
                                    </div>
                                    <p>Or copy link</p>
                                    <div class="field d-flex align-items-center justify-content-between">
                                        <span class="fas fa-link text-center"></span>
                                        <input type="text" value="some.com/share">
                                        <button>Copy</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style>
                        .cardd {

                            background-color: #fff;
                            border: none;
                            border-radius: 10px;
                            width: 100%;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

                        }

                        .image-container {
                            width: 100%;
                            position: relative;
                        }

                        .thumbnail-image {
                            border-radius: 10px !important;
                        }


                        .discount {

                            background-color: red;
                            padding-top: 1px;
                            padding-bottom: 1px;
                            padding-left: 4px;
                            padding-right: 4px;
                            font-size: 10px;
                            border-radius: 6px;
                            color: #fff;
                        }

                        .wishlist {

                            height: 25px;
                            width: 25px;
                            background-color: #eee;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 50%;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                        }

                        .first {

                            position: absolute;
                            width: 100%;
                            padding: 9px;
                        }


                        .dress-name {
                            font-size: 13px;
                            font-weight: bold;
                            width: 75%;
                        }





                        .item-size {
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            background: #fff;
                            border: 1px solid grey;
                            color: grey;
                            font-size: 10px;
                            text-align: center;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                        }


                        .rating-star {
                            font-size: 10px !important;
                        }

                        .rating-number {
                            font-size: 10px;
                            color: grey;

                        }

                        .buy {
                            font-size: 12px;
                            color: purple;
                            font-weight: 500;
                        }

                        .voutchers {
                            background-color: #fff;
                            border: none;
                            border-radius: 10px;
                            width: 100%;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            overflow: hidden;

                        }

                        .voutcher-divider {

                            display: flex;

                        }

                        .voutcher-left {
                            width: 60%
                        }

                        .voutcher-name {
                            color: grey;
                            font-size: 9px;
                            font-weight: 500;
                        }

                        .voutcher-code {
                            color: rgb(0, 0, 0);
                            font-size: 14px;
                            font-weight: bold;
                        }

                        .voutcher-right {
                            width: 40%;
                            background-color: red;
                            color: #fff;
                        }

                        .discount-percent {
                            font-size: 12px;
                            font-weight: bold;
                            position: relative;
                            top: 5px;
                        }

                        .off {
                            font-size: 14px;
                            position: relative;
                            bottom: 5px;
                        }

                        .collection-grid-item {
                            padding: 5%;
                        }
                    </style>
                </div>
                <!--#ProductSection-product-template-->
            </div>
            <!--MainContent-->
            <div class="modal fade" id="new_user_login" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content glass-morphism position-relative">
                        <!-- Modern close button -->
                        <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal"
                            aria-label="Close" style="top: 1.5rem; right: 1.5rem; z-index: 1055;"></button>

                        <div class="modal-body px-4 px-md-5 pb-4 pb-md-5 pt-4">
                            <!-- Brand logo space -->
                            <div class="text-center mb-4 mt-2">
                                <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                    alt="American Plastics Logo" style="max-height: 55px; object-fit: contain;">
                            </div>

                            <h2 class="text-center mb-1 fw-600" style="font-family: 'Montserrat', sans-serif;">Sign In
                            </h2>
                            <p class="text-center text-muted mb-4" style="font-family: 'Montserrat', sans-serif;">Hello,
                                Welcome back</p>

                            <form id="login_form">
                                <?php echo csrf_field(); ?>

                                <!-- Modern input fields with floating labels -->


                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path d="M22 6L12 13L2 6" stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1">
                                        <input type="email" class="form-control border-start-0" id="floatingEmaill"
                                            placeholder=" " name="email" required>
                                        <label for="floatingEmail">Email address</label>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path
                                                d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
                                                stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1 position-relative">
                                        <input type="password" class="form-control border-start-0 pe-5"
                                            id="floatingPasswordd" placeholder=" " name="password" required>
                                        <label for="floatingPassword">Password</label>

                                    </div>

                                </div>
                                <span><a href="<?php echo e(route('forget.password.get')); ?>">Forgot Password?</a></span>
                                <!-- Animated submit button -->
                                <button type="submit"
                                    class="btn btn-primary w-100 py-3 mt-2 rounded-pill shadow-sm hover-effect">
                                    <span class="fw-500">Sign in</span>
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" class="ms-2">
                                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </button>
                            </form>

                            <script>
                                // Function to handle form submission
                                $('#login_form').submit(function (event) {
                                    // Prevent default form submission
                                    event.preventDefault();

                                    // Get form data
                                    var formData = $(this).serialize();

                                    // Send AJAX request
                                    $.ajax({
                                        type: 'POST',
                                        url: "<?php echo e(route('american.plastic.user.login')); ?>",
                                        data: formData,
                                        success: function (response) {
                                            // Check if login was successful
                                            if (response.success) {
                                                // Redirect to desired page
                                                window.location.href = "/"; // Replace with your desired URL
                                            } else {
                                                // Handle unsuccessful login (e.g., display error message)
                                                alert("Login failed. Please try again.");
                                            }
                                        },
                                        error: function () {
                                            // Handle AJAX error
                                            toastr.error("Username or password incorrect!", "Error", {
                                                timeOut: 3000,
                                                positionClass: "toast-top-right",
                                                preventDuplicates: true
                                            });
                                        }
                                    });
                                });
                            </script>

                            <div class="text-center text-muted">
                                Not a user?
                                <a href="#" class="text-primary fw-500 text-decoration-none" id="signup-link">Sign
                                    Up</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <script>
            $(document).ready(function () {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
            });

            function checkUserAuthentication() {
                return <?php echo e(Auth::check() ? 'true' : 'false'); ?>;
            }
            // Get the button element

            var orderbtn = document.getElementById('ordernow');
            var addButton = document.getElementById('addToCartBtn');
            var logbutton = document.getElementById('showlogin');

            // Add click event listener to the button
            addButton.addEventListener('click', function () {
                if (!checkUserAuthentication()) {
                    event.preventDefault();

                    return;
                } else {

                }
            });

            logbutton.addEventListener('click', function () {
                if (!checkUserAuthentication()) {
                    // User is not authenticated, show login modal or perform any other action
                    // $('#signupmodal').modal('show');
                    const errorDiv = document.getElementById('color-error');


                    event.preventDefault(); // Stop form submission if needed
                    errorDiv.textContent = "Please select a color.";
                    errorDiv.style.display = "block";

                    // Move the error message below the color label if needed
                    const colorContainer = document.getElementById('color-container');
                    colorContainer.insertAdjacentElement('afterend', errorDiv);


                    return;

                } else {

                }
            });

            orderbtn.addEventListener('click', function () {
                if (!checkUserAuthentication()) {
                    // User is not authenticated, show login modal or perform any other action
                    // $('#signupmodal').modal('show');
                    $('#new_user_login').modal('show');
                    return;
                } else {

                }
            });

            function addToCart(id) {
                var quantity = parseInt($(".qty").val());
                var color = $("input[name='selected_color']:checked").val();
                //var size = $("input[name='selected_size']:checked").val();

                // Check if quantity is a valid number
                if (isNaN(quantity) || quantity < 1) {
                    alert("Please enter a valid quantity.");
                    return;
                }
                // Check if color and size are selected
                if (!color) {
                    // Create a notification element
                    const errorDiv = document.getElementById('color-error');


                    event.preventDefault(); // Stop form submission if needed
                    errorDiv.textContent = "Please select a color.";
                    errorDiv.style.display = "block";

                    // Move the error message below the color label if needed
                    const colorContainer = document.getElementById('color-container');
                    colorContainer.insertAdjacentElement('afterend', errorDiv);

                    return;
                }
                if (!checkUserAuthentication()) {
                    // User is not authenticated, show login modal or perform any other action
                    $('#new_user_login').modal('show');
                    return;
                } else {

                    var quantity = parseInt($(".qty").val());
                    var color = '<?php echo e($selectedColor ?? '#FF0000'); ?>';
                    var size = $("input[name='selected_size']:checked").val();
                    var formData = $("#product_form").serialize();
                    var addToCartUrl =
                        "<?php echo e(route('american.plastic.web.product.addtocart', ['id' => ':id', 'quantity' => ':quantity', 'color' => ':color'])); ?>";
                    addToCartUrl = addToCartUrl.replace(':id', id).replace(':quantity', quantity).replace(':color', color);

                    $.ajax({
                        url: addToCartUrl,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        method: 'POST',
                        data: formData,
                        success: function (response) {
                            console.log(response);
                            window.location.reload();
                        },
                        error: function (error) {
                            $('#new_user_login').modal('show');
                        }
                    });
                }
            }

            window.onload = function () {
                <?php $__currentLoopData = $item; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $items): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    var productName = <?php echo json_encode($productname, 15, 512) ?>;
                    var productDescription = <?php echo json_encode($description, 15, 512) ?>;
                    var productImage = "<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>";
                    var productUrl = window.location.href;

                    // Check if the URL already ends with '.html'
                    if (!productUrl.endsWith('.html')) {
                        // Add '.html' to the end of the URL
                        productUrl += '.html';
                    }

                    // Redirect to the new URL
                    urlnew = productUrl;
                    var productUrl = urlnew;

                    document.querySelector('meta[name="description"]').setAttribute('content', productName);

                    document.getElementById('og-title').setAttribute('content', productName);
                    document.getElementById('og-description').setAttribute('content', productDescription);
                    document.getElementById('og-image').setAttribute('content', productImage);
                    document.getElementById('og-url').setAttribute('content', productUrl);

                    document.getElementById('facebook-share-button').onclick = function () {
                        shareToFacebook(productName, productDescription, productImage, productUrl);
                    };
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            };

            function shareToFacebook(name, des, image, url) {
                console.log(name, des, image);

                var productName = name;
                var productDescription = des;
                var productImage = "<?php echo e(asset('admin/assets/img/product/')); ?>" + "/" + image;
                var productUrl = window.location.href;

                // Ensure the URL ends with .html
                if (!productUrl.endsWith('.html')) {
                    productUrl += '.html';
                }

                // Update Open Graph meta tags
                document.getElementById('og-title').setAttribute('content', productName);
                document.getElementById('og-description').setAttribute('content', productDescription);
                document.getElementById('og-image').setAttribute('content', productImage);
                document.querySelector('meta[name="description"]').setAttribute('content', productName);

                // Construct the Facebook share URL
                let facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?`;
                facebookShareUrl += `u=${encodeURIComponent(productUrl)}`;
                facebookShareUrl += `&quote=${encodeURIComponent(productName + '\n' + productDescription)}`;
                console.log(facebookShareUrl);

                // Opening a new window with the Facebook share URL
                //window.open(facebookShareUrl, '_blank');
            }
        </script>

        <footer class="bg-black text-light py-5" style="font-size: 16px;">
            <!-- New feature boxes section -->
            <div class="container-fluid" style="padding-left: 5%;padding-right:5%;">


                <!-- Rest of your existing footer content -->
                <div class="row">
                    <!-- Existing content columns -->
                    <div class="col-md-6 col-lg-3 mb-4">
                        <a href="<?php echo e(route('american.plastic.web')); ?>">
                            <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>" alt="American Plastics Logo"
                                title="American Plastics" class="mb-4" style="width:45%" />
                        </a>
                        <p class="text-light" style="font-size: inherit;">
                            American Plastics, a premium household products manufacturer, maintains the highest quality
                            standards, offering durable products at a very economical price.
                        </p>
                        <div class="footer-social-icons mt-4 d-flex"
                            style="gap: 10px; padding-top: 5px; flex-wrap: wrap;">
                            <a href="https://www.facebook.com/AmericanPlastics.lk/" target="_blank" class="social-icon"
                                style="width: 40px; height: 40px; background: #3b5998; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-facebook-f"></i>
                            </a>

                            <a href="https://vt.tiktok.com/ZS2h2Eu2A/" target="_blank" class="social-icon"
                                style="width: 40px; height: 40px; background: #000; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-tiktok"></i>
                            </a>

                            <a href="https://www.instagram.com/american_premium_plastics?igsh=MXpnMHMxbDR6MTZy"
                                target="_blank" class="social-icon"
                                style="width: 40px; height: 40px; background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-instagram"></i>
                            </a>

                            <a href="https://youtube.com/@american_plastics?si=5kn735rDc9lTrfhy" target="_blank"
                                class="social-icon"
                                style="width: 40px; height: 40px; background: #ff0000; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2 mb-4">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">Quick Links
                        </h4>
                        <ul class="list-unstyled">
                            <li class="mb-2" style="padding-top: 11px;"><a href="<?php echo e(route('american.plastic.web')); ?>"
                                    class="text-light" style="font-size: inherit;">Home</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.web.about.us')); ?>" class="text-light"
                                    style="font-size: inherit;">About
                                    Us</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.products')); ?>" class="text-light"
                                    style="font-size: inherit;">Our
                                    Products</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a href="#" class="text-light"
                                    style="font-size: inherit;">Events</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.web.contact.us')); ?>" class="text-light"
                                    style="font-size: inherit;">Contact
                                    Us</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-lg-3 mb-4 ">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">Contact Us
                        </h4>
                        <ul class="list-unstyled text-muted ">
                            <li class="d-flex align-items-center mb-3" style="padding-top: 8px;">
                                <script
                                    src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
                                    type="module"></script>
                                <dotlottie-player
                                    src="https://lottie.host/ba34eaa0-e0bd-47e6-b375-414067230c7f/UhML686maM.json"
                                    background="transparent" speed="1" style="width: 50px; height: 50px;" loop
                                    autoplay></dotlottie-player>
                                <span class="text-light" style="font-size: 16px;">281 L6, R.A. De Mel Mawatha, Colombo
                                    03, Sri
                                    Lanka</span>
                            </li>
                            <li class="d-flex align-items-center mb-3" style="padding-top:15px">
                                <script
                                    src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
                                    type="module"></script>
                                <dotlottie-player
                                    src="https://lottie.host/09598272-8886-46a6-a573-60c12d8b6d49/s8qoLyK8zj.json"
                                    background="transparent" speed="1" style="width: 30px; height: 30px;" loop
                                    autoplay></dotlottie-player>
                                <span class="text-light" style="font-size: 16px;">+94 77 286 4877 </span>
                            </li>
                            <li class="d-flex align-items-center" style="padding-top:15px">
                                <script
                                    src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
                                    type="module"></script>
                                <dotlottie-player
                                    src="https://lottie.host/116af796-1826-4962-9b2e-8ea32eb61c70/iABEHxDjr0.json"
                                    background="transparent" speed="1" style="width: 30px; height: 30px;" loop
                                    autoplay></dotlottie-player>
                                <span class="text-light" style="font-size: 16px;">info@americanplastic.lk</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-lg-2 mb-4">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">Rules &
                            Policy</h4>
                        <ul class="list-unstyled text-light">
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.web.privacy.policy')); ?>" class="text-light"
                                    style="font-size: inherit;">Privacy Policy</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.web.terms.conditions')); ?>" class="text-light"
                                    style="font-size: inherit;">Terms & Conditions</a></li>
                            <li class="mb-2" style="padding-top: 11px;"><a
                                    href="<?php echo e(route('american.plastic.web.return.policy')); ?>" class="text-light"
                                    style="font-size: inherit;">Return Policy</a></li>
                        </ul>
                    </div>
                    <div class="col-md-5 col-lg-2 mb-4">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">Find Us</h4>
                        <div class="map" style="padding-top: 11px;">
                            <div class="embed-responsive embed-responsive-4by3 py-2" style="height:65%;">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d495.1069776334746!2d79.85278117940881!3d6.907838159315157!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae25981dba47e21%3A0x402e035ad1601fb0!2sAmerican%20Plastics%20Pvt%20Ltd!5e0!3m2!1sen!2slk!4v1723458025533!5m2!1sen!2slk"
                                    width="500" height="250" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 row">
                    <div class="col-md-6 col-lg-6 p-0">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">Newsletter
                        </h4>
                        <p class="text-light" style="font-size: inherit;">Subscribe to our newsletter to get the
                            latest updates and offers.</p>
                        <form method="post" action="<?php echo e(route('subscribe.user')); ?>">
                            <div class="input-group mb-3">
                                <input type="email" class="form-control" name="subscriber_email"
                                    placeholder="Enter your email" aria-label="Email" aria-describedby="button-addon2"
                                    required>
                                <div class="input-group-append p-0">
                                    <button class="btn btn-primary" type="submit" style="background-color: #ff0000"
                                        id="button-addon2">Subscribe</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-6 p-0" style="text-align: right; padding-top: 20px;">
                        <h4 class="text-lg font-semibold mb-4" style="color:#ffffff; font-size: inherit;">We Accept
                        </h4>
                        <div class="payment-methods">
                            <img src="<?php echo e(asset('admin/assets/img/visa.png')); ?>" alt="Visa" style="width: 240px;">
                            <img src="<?php echo e(asset('assets/images/kokologo.png')); ?>" alt="Ko0koPayment"
                                style="width: 100px; margin-left: 10px;">
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <div class="modal fade" id="signupmodal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content glass-morphism overflow-hidden border-0">
                    <div class="row g-0">
                        <!-- Left Hero Branding Pane -->
                        <div
                            class="col-lg-5 d-none d-lg-flex flex-column justify-content-between p-4 p-xl-5 text-white register-hero-section">
                            <div>
                                <div class="mb-4 d-inline-block bg-white p-2 rounded"
                                    style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);">
                                    <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                        alt="American Plastics Logo"
                                        style="max-height: 35px; object-fit: contain; display: block;">
                                </div>
                                <h3 class="fw-bold mb-3" style="font-family: 'Montserrat', sans-serif;">Join us today
                                </h3>
                                <p class="text-white-50 small" style="line-height: 1.6;">Create your account to unlock
                                    premium features, fast checkout, order tracking, and exclusive updates.</p>
                            </div>

                            <div class="my-4">
                                <div class="benefit-item d-flex align-items-center mb-3">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Order Customization</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Configure product colors
                                            and styles</small>
                                    </div>
                                </div>
                                <div class="benefit-item d-flex align-items-center mb-3">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Secure Encrypted System</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Your personal data is
                                            fully protected</small>
                                    </div>
                                </div>
                                <div class="benefit-item d-flex align-items-center">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                                            <polyline points="22 4 12 14.01 9 11.01" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Corporate Benefits</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Hassle-free corporate
                                            invoicing & tax filing</small>
                                    </div>
                                </div>
                            </div>

                            <div class="text-white-50" style="font-size: 11px;">
                                &copy; <?php echo e(date('Y')); ?> American Plastics.
                            </div>
                        </div>

                        <!-- Right Form Pane -->
                        <div class="col-lg-7 p-4 p-md-5 position-relative bg-white bg-opacity-95">
                            <!-- Modern close button -->
                            <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal"
                                aria-label="Close" style="top: 1.5rem; right: 1.5rem; z-index: 1055;"></button>

                            <div class="d-lg-none text-center mb-4">
                                <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                    alt="American Plastics Logo" style="max-height: 50px; object-fit: contain;">
                            </div>

                            <h2 class="mb-1 fw-700 text-dark"
                                style="font-family: 'Montserrat', sans-serif; font-size: 26px;">Create Account</h2>
                            <p class="text-muted mb-4" style="font-family: 'Montserrat', sans-serif; font-size: 14px;">
                                Fill in details below to start</p>

                            <form id="signup_form" action="<?php echo e(route('american.plastic.user.register')); ?>" method="POST">
                                <?php echo csrf_field(); ?>

                                <!-- Modern input fields with floating labels -->
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21"
                                                stroke="#94A3B8" stroke-width="2" stroke-linecap="round" />
                                            <path
                                                d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1">
                                        <input type="text" class="form-control border-start-0" id="floatingName"
                                            placeholder=" " name="name" required>
                                        <label for="floatingName">Full name</label>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path d="M22 6L12 13L2 6" stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1">
                                        <input type="email" class="form-control border-start-0" id="floatingEmail"
                                            placeholder=" " name="email" required>
                                        <label for="floatingEmail">Email address</label>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path
                                                d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
                                                stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1 position-relative">
                                        <input type="password" class="form-control border-start-0 pe-5"
                                            id="floatingPassword" placeholder=" " name="password"
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                                        <label for="floatingPassword">Password</label>
                                        <button type="button"
                                            class="btn p-1 position-absolute end-0 top-50 translate-middle-y me-2 toggle-password"
                                            style="box-shadow: none; border: none; background: none; z-index: 10;">
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
                                                    stroke="#94A3B8" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 9 12 9 12C9 13.6569 10.3431 15 12 15Z"
                                                    stroke="#94A3B8" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Password Requirements - Initially hidden -->
                                <div id="password-requirements" class="mb-3 small" style="display: none; width: 100%;">
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="flex-grow-1">
                                            <div class="progress" style="height: 4px;">
                                                <div id="password-strength-bar" class="progress-bar" role="progressbar"
                                                    style="width: 0%"></div>
                                            </div>
                                        </div>
                                        <span id="password-strength-text" class="ms-2 small"></span>
                                    </div>
                                    <ul class="list-unstyled mb-0 row">
                                        <li class="col-6 d-flex align-items-center req-length">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>8+ characters</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-uppercase">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Uppercase letter</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-lowercase">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Lowercase letter</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-number">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Number</span>
                                        </li>
                                    </ul>
                                </div>

                                <script>
                                    document.getElementById('floatingPassword').addEventListener('input', function () {
                                        const password = this.value;
                                        const requirementsBox = document.getElementById('password-requirements');

                                        // Show/hide requirements box
                                        if (password.length > 0) {
                                            requirementsBox.style.display = 'block';
                                        } else {
                                            requirementsBox.style.display = 'none';
                                            return;
                                        }

                                        const requirements = {
                                            length: password.length >= 8,
                                            uppercase: /[A-Z]/.test(password),
                                            lowercase: /[a-z]/.test(password),
                                            number: /[0-9]/.test(password)
                                        };

                                        // Update requirement indicators
                                        document.querySelectorAll('.requirement-icon').forEach(icon => {
                                            icon.textContent = '✕';
                                            icon.style.color = '#dc3545';
                                        });

                                        let strength = 0;
                                        const totalRequirements = 4;

                                        if (requirements.length) {
                                            document.querySelector('.req-length .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-length .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.uppercase) {
                                            document.querySelector('.req-uppercase .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-uppercase .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.lowercase) {
                                            document.querySelector('.req-lowercase .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-lowercase .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.number) {
                                            document.querySelector('.req-number .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-number .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }

                                        // Update strength meter
                                        const percentage = (strength / totalRequirements) * 100;
                                        const strengthBar = document.getElementById('password-strength-bar');
                                        const strengthText = document.getElementById('password-strength-text');

                                        strengthBar.style.width = `${percentage}%`;

                                        if (percentage < 25) {
                                            strengthBar.className = 'progress-bar bg-danger';
                                            strengthText.textContent = 'Weak';
                                            strengthText.style.color = '#dc3545';
                                        } else if (percentage < 75) {
                                            strengthBar.className = 'progress-bar bg-warning';
                                            strengthText.textContent = 'Fair';
                                            strengthText.style.color = '#ffc107';
                                        } else if (percentage < 100) {
                                            strengthBar.className = 'progress-bar bg-info';
                                            strengthText.textContent = 'Good';
                                            strengthText.style.color = '#17a2b8';
                                        } else {
                                            strengthBar.className = 'progress-bar bg-success';
                                            strengthText.textContent = 'Strong';
                                            strengthText.style.color = '#28a745';
                                        }
                                    });
                                </script>

                                <!-- Corporate Customer Checkbox -->
                                <div class="form-check mb-4 ms-1 d-flex align-items-center">
                                    <input class="form-check-input me-2" type="checkbox" name="is_corporate" value="1"
                                        id="isCorporate_sp1"
                                        style="cursor: pointer; width: 18px; height: 18px; margin-top: 0; border: 1.5px solid #ced4da;">
                                    <label class="form-check-label text-muted fw-500 mb-0" for="isCorporate_sp1"
                                        style="cursor: pointer; font-size: 14px; user-select: none; line-height: 1.2;">
                                        Register as Corporate Customer (18% Tax apply for orders)
                                    </label>
                                </div>

                                <!-- Animated submit button -->
                                <button type="submit"
                                    class="btn btn-primary w-100 py-3 rounded-pill shadow-sm hover-effect">
                                    <span class="fw-600">Register</span>
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" class="ms-2">
                                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </button>
                            </form>

                            <div class="text-center text-muted mt-4">
                                Already have an account?
                                <a href="#" class="text-primary fw-600 text-decoration-none" id="signin-link"
                                    style="color: #85c226 !important;">Sign in</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            ol,
            ul {
                list-style: none;
            }

            blockquote,
            q {
                -webkit-hyphens: none;
                -moz-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
                quotes: none;
            }

            figure {
                margin: 0;
            }

            :focus {
                outline: 0;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            img {
                border: 0;
                -ms-interpolation-mode: bicubic;
                vertical-align: middle;
            }

            legend {
                white-space: normal;
            }

            button,
            input,
            select,
            textarea {
                font-size: 100%;
                margin: 0;
                max-width: 100%;
                vertical-align: baseline;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            button,
            input {
                line-height: normal;
            }

            input,
            textarea {
                background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
            }

            button,
            input[type="button"],
            input[type="reset"],
            input[type="submit"] {
                line-height: 1;
                cursor: pointer;
                -webkit-appearance: button;
                border: none;
            }

            input[type="checkbox"],
            input[type="radio"] {
                padding: 0;
            }

            input[type="search"] {
                -webkit-appearance: textfield;
            }

            input[type="search"]::-webkit-search-decoration {
                -webkit-appearance: none;
            }

            button::-moz-focus-inner,
            input::-moz-focus-inner {
                border: 0;
                padding: 0;
            }

            /* Repeatable Patterns
-------------------------------------------------------------- */
            *,
            *:before,
            *:after {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            *,
            *:before,
            *:after {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            body {
                font-family: 'Open Sans', sans-serif;
                font-size: 13px;
                line-height: 24px;
                font-weight: 400;
                background-color: #fff;
                color: #656565;
                overflow: hidden;
                position: relative;
            }

            a {
                text-decoration: none;
                color: #333333;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            a:hover,
            a:focus {
                color: #f28b00;
                text-decoration: none;
                outline: 0;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            ul,
            ol {
                padding: 0;
            }

            img {
                max-width: 100%;
                height: auto;
            }

            b,
            strong {
                font-weight: 900;
            }

            uttonb,
            button:hover {
                border: none;
            }

            button:focus {
                outline: none;
            }

            button,
            input[type="button"],
            input[type="reset"],
            input[type="submit"] {
                display: inline-block;
                color: #fff;
                padding: 0px 27px 0 27px;
                height: 48px;
                line-height: 42px;
                font-size: 14px;
                color: #ffffff;
                background: #85c226;
                border-radius: 30px;
                font-weight: 600;
                font-family: "Nunito", sans-serif;
                position: relative;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            button.search-submit-form {
                position: absolute;
                right: 2px;
                top: 7px;
                padding: 0px 10px;
                color: #999999;
                background-color: transparent;
                display: inline-block;
                height: 29px;
                line-height: 31px;
                font-size: 12px;
                border-color: transparent;
                border-left: 1px solid #d0d0d0;
                text-transform: uppercase;
                font-weight: 700;
                border-radius: 0;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            select,
            textarea,
            input[type="text"],
            input[type="password"],
            input[type="datetime"],
            input[type="datetime-local"],
            input[type="date"],
            input[type="month"],
            input[type="time"],
            input[type="week"],
            input[type="number"],
            input[type="url"],
            input[type="search"],
            input[type="tel"],
            input[type="color"],
            input[type="email"] {
                position: relative;
                display: block;
                font-family: 'Open Sans';
                width: 100%;
                line-height: 24px;
                padding: 8px 15px 8px 30px;
                color: #222222;
                border: 2px solid #e5e5e5;
                height: 48px;
                border-radius: 30px;
                background-color: transparent;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            select {
                border: none;
            }

            input[type="search"] {
                width: 250px;
                margin-bottom: 0px;
                border-radius: 0px;
                background-color: #ffffff;
            }

            input[type="email"] {
                padding: 8px 14px;
                color: #555555;
                border: 1px solid #e5e5e5;
                margin-bottom: 20px;
            }

            textarea:focus,
            input[type="text"]:focus,
            input[type="password"]:focus,
            input[type="datetime"]:focus,
            input[type="datetime-local"]:focus,
            input[type="date"]:focus,
            input[type="month"]:focus,
            input[type="time"]:focus,
            input[type="week"]:focus,
            input[type="number"]:focus,
            input[type="email"]:focus,
            input[type="url"]:focus,
            input[type="search"]:focus,
            input[type="tel"]:focus,
            input[type="color"]:focus {
                border: 2px solid #cacaca;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

            textarea {
                width: 100%;
                padding: 11px 18px;
                height: 173px;
            }

            input[type="checkbox"] {
                display: inline;
            }

            textarea:-moz-placeholder,
            textarea::-moz-placeholder,
            input:-moz-placeholder,
            input::-moz-placeholder {
                color: #aeaeae;
                opacity: 1;
            }

            input:-ms-input-placeholder {
                color: #aeaeae;
            }

            textarea::-webkit-input-placeholder,
            input::-webkit-input-placeholder {
                color: #aeaeae;
                opacity: 1;
            }

            .btn {
                background-image: none;
            }

            select,
            textarea,
            input[type="text"],
            input[type="submit"],
            input[type="password"],
            input[type="datetime"],
            input[type="datetime-local"],
            input[type="date"],
            input[type="month"],
            input[type="time"],
            input[type="week"],
            input[type="number"],
            input[type="email"],
            input[type="url"],
            input[type="search"],
            input[type="tel"],
            input[type="color"],
            .uneditable-input,
            .dropdown-menu,
            .navbar .nav>.active>a,
            .navbar .nav>.active>a:hover,
            .navbar .nav>.active>a:focus {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                text-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                -o-box-shadow: none;
                box-shadow: none;
                color: #727272;
            }

            select::-ms-expand {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: 'Nunito', sans-serif;
                font-weight: 400;
            }

            h1 {
                font-size: 32px;
            }

            h2 {
                font-size: 24px;
            }

            h3 {
                font-size: 20px;
                font-weight: 500;
                color: #2d2d2d;
            }

            h4 {
                font-size: 18px;
            }

            .container {
                width: 1170px;
            }

            .clearfix {
                clear: both;
            }

            .left {
                text-align: left;
            }

            .center {
                text-align: center;
            }

            .sale {
                color: #f28b00;
                font-weight: 500;
                font-size: 22px;
                font-family: 'Nunito';
            }

            .regular {
                color: #c5c5c5;
                font-size: 14px;
                text-decoration: line-through;
            }

            .background {
                background-color: #f5f5f5;
            }

            /* aniketrod
-------------------------------------------------------------- */
            .aniketrod {
                position: relative;
            }

            .aniketrod>.overlay {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 909;
                opacity: 0;
                display: none;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .aniketrod>.overlay.show {
                opacity: 1;
                display: block;
            }

            /* Header
-------------------------------------------------------------- */
            #header {
                position: relative;
                z-index: 999;
                background-color: #fff;
            }

            /* Header Top */
            .header-top {
                border-bottom: 1px solid #e5e5e5;
            }

            .header-top.style1 {
                background-color: #f5f5f5;
                padding: 6px 0;
            }

            .header-top.style2 {
                background-color: #ffa020;
                padding: 0px 0;
                border-bottom: none;
            }

            .header-top.style2 ul.flat-support>li>a {
                color: #fff;
            }

            .header-top.style2 ul.flat-support>li {
                border-color: #fec579;
            }

            .header-top.style2 ul.flat-infomation>li.phone {
                color: #fff;
            }

            .header-top.style2 ul.flat-infomation>li.phone>a {
                color: #Fff;
            }

            .header-top.style2 ul.flat-unstyled>li>a {
                color: #fff;
            }

            .header-top.style3 {
                background-color: #f5f5f5;
                padding: 0px 0;
                border-bottom: none;
            }

            .header-top.style4 {
                background-color: #f5f5f5;
                padding: 6px 0 6px;
                border-bottom: none;
            }

            /* Flat Support */
            ul.flat-support li {
                display: inline-block;
                line-height: 38px;
                height: 37px;
            }

            ul.flat-support li a {
                border-right: 1px solid #e5e5e5;
                padding-right: 10px;
                padding-left: 7px;
                font-size: 12px;
                font-weight: 400;
            }

            ul.flat-support li:first-child>a {
                padding-left: 0;
            }

            ul.flat-support li:last-child>a {
                padding-right: 0;
                border-right: none;
            }

            ul.flat-support.style1>li,
            ul.flat-unstyled.style2>li {
                display: inline-block;
                line-height: 27px;
                height: 24px;
            }

            /* Flat Infomation */
            ul.flat-infomation {
                text-align: center;
            }

            ul.flat-infomation li.phone {
                color: #f28b00;
                line-height: 38px;
                height: 37px;
                letter-spacing: -0.5px;
            }

            .grid-right ul.flat-infomation li.phone {
                height: 55px;
                line-height: 59px;
                font-size: 15px;
            }

            /* Flat Unstyled */
            ul.flat-unstyled {
                text-align: right;
                margin-right: 3px;
            }

            ul.flat-unstyled>li {
                display: inline-block;
                line-height: 38px;
                height: 37px;
                position: relative;
            }

            ul.flat-unstyled>li>a {
                border-left: 1px solid #e5e5e5;
                line-height: 1;
                padding-left: 9px;
                padding-right: 6px;
                letter-spacing: -0.5px;
            }

            ul.flat-unstyled>li:last-child>a {
                padding-right: 0;
            }

            ul.flat-unstyled>li:first-child>a {
                border-left: none;
            }

            ul.flat-unstyled>li>a i {
                padding-left: 10px;
                padding-right: 4px;
            }

            ul.flat-unstyled>li:last-child>a i {
                padding-right: 0px;
            }

            ul.flat-unstyled>li>ul {
                background-color: #fff;
                border-radius: 10px;
                padding: 10px 0;
                box-shadow: 0px 2px 3px 0px rgba(72, 72, 72, 0.15);
                opacity: 0;
                visibility: hidden;
                position: absolute;
                left: 0;
                z-index: 99;
                width: 130px;
                text-align: left;
                top: 100px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            ul.flat-unstyled>li>ul:before {
                content: '';
                position: absolute;
                left: 30px;
                top: -8px;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #e5e5e5;
                z-index: 100;
            }

            ul.flat-unstyled>li:hover>ul {
                opacity: 1;
                visibility: visible;
                top: 38px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            ul.flat-unstyled li>ul>li>a {
                display: block;
                padding: 1px 15px;
                line-height: 24px;
                font-size: 12px;
            }

            .flat-unstyled.style1 {
                float: right;
                line-height: 102px;
                height: 101px;
                margin-right: 3px;
            }

            /* Header Middle */
            .header-middle #logo {
                line-height: 97px;
                margin-left: -2px;
                margin-bottom: 7px;
            }

            .header-middle .grid-left #logo {
                margin-bottom: 0px;
            }

            .header-middle .logo.style1 {
                float: left;
                width: 23%;
                margin-right: 0px;
            }

            .header-middle.style1 {
                background-color: #f28b00;
            }

            /* Show Search */
            .show-search {
                display: none;
            }

            .show-search button {
                content: '';
                background: #fff;
                color: #f28b00;
                border-color: transparent;
                height: 45px;
                line-height: 45px;
                width: 45px;
                display: block;
                padding: 0;
                border-radius: 50%;
                position: relative;
            }

            .show-search button:before {
                content: "\f002";
                font-family: fontawesome;
                position: absolute;
                font-size: 18px;
                line-height: 45px;
                left: 50%;
                top: 0px;
                transform: translateX(-50%);
            }

            .show-search>button.active:before {
                content: "\f00d";
            }

            /* Top Search */
            .top-search {
                padding: 27px 0;
                padding-left: 47px;
                margin-right: -21px;
            }

            .top-search form.form-search {
                position: relative;
            }

            .top-search form.form-search .cat-wrap {
                position: absolute;
                z-index: 9;
                padding: 15px 0;
            }

            .top-search form.form-search .cat-wrap-v1 {
                position: absolute;
                z-index: 9;
                padding: 12px 0;
            }

            .top-search form.form-search .cat-wrap select {
                height: 20px;
                line-height: 20px;
                padding: 1px 63px 0 36px;
                border-radius: 0px;
                border-right: 1px solid #e5e5e5;
            }

            .top-search form.form-search .cat-wrap span {
                position: absolute;
                top: 14px;
                right: 22px;
                color: #1b1b19;
                font-size: 14px;
            }

            .top-search form.form-search .cat-wrap-v1 span {
                top: 11px !important;
            }

            .top-search form.form-search .cat-wrap .all-categories {
                position: absolute;
                top: 80px;
                left: 0;
                width: 215px;
                border: 2px solid #484848;
                border-radius: 10px;
                height: 287px;
                background: #fff;
                padding: 10px 20px;
                z-index: 9;
                opacity: 0;
                visibility: hidden;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .top-search form.form-search .cat-wrap .all-categories.show {
                top: 55px;
                opacity: 1;
                visibility: visible;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .top-search form.form-search .cat-wrap .all-categories:before {
                content: '';
                position: absolute;
                border-bottom: 5px solid #484848;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                top: -7px;
                left: 57px;
            }

            .top-search form.form-search .cat-wrap .all-categories .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
                background: #f28b00;
            }

            .top-search form.form-search .cat-wrap .all-categories .cat-list-search .title {
                color: #f28b00;
                line-height: 30px;
            }

            .top-search form.form-search .cat-wrap .all-categories .cat-list-search ul {
                margin-bottom: 5px;
            }

            .top-search form.form-search .cat-wrap .all-categories .cat-list-search ul li {
                padding-left: 9px;
                line-height: 20px;
                cursor: pointer;
            }

            .top-search form.form-search .cat-wrap .all-categories .cat-list-search ul li:hover {
                color: #f28b00;
            }

            .top-search form.form-search .box-search input {
                padding-left: 15px;
                padding-top: 11px;
                height: 49px;
            }

            .top-search form.form-search .box-search .btn-search {
                position: absolute;
                top: 0;
                right: 0;
            }

            .top-search form.form-search .box-search .search-suggestions {
                width: 800px;
                overflow: hidden;
                position: absolute;
                top: 100px;
                left: 0;
                z-index: 9;
                opacity: 0;
                visibility: hidden;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .top-search form.form-search .box-search .search-suggestions.show {
                opacity: 1;
                visibility: visible;
                top: 77px;
            }

            /* Top Search Style1 */
            .top-search.style1 {
                width: 610px;
                padding: 5px 0px 5px 1px;
                float: left;
            }

            .top-search.style1 form.form-search .box-search input {
                background-color: #fff;
                border-color: #fff;
                height: 45px;
                padding-left: 188px;
            }

            .top-search.style1 form.form-search .box-search .btn-search button {
                background: #484848;
                padding: 0px 27px 0 32px;
                height: 45px;
                line-height: 43px;
            }

            .top-search.style1 form.form-search .box-search .btn-search button img {
                margin-top: -3px;
            }

            /* Top Search Style2 */
            .top-search.style2 {
                padding: 28px 0 26px 48px;
                float: left;
                width: 68%;
            }

            .top-search.style2 form.form-search .box-search .btn-search button {
                background: #484848;
                padding: 0 29px 0 30px;
                height: 49px;
                line-height: 39px;
            }

            .top-search.style2 form.form-search .box-search input {
                background-color: #fff;
                border-color: #fff;
            }

            /* Top Search Style3 */
            .top-search.style3 {
                padding-left: 93px;
                margin-right: -37px;
            }

            /* Search Sugguestions */
            .search-suggestions .box-suggestions {
                width: 55%;
                float: left;
                background: #fff;
                padding: 20px 30px;
            }

            .search-suggestions .box-suggestions .title,
            .search-suggestions .box-cat .title {
                color: #f28b00;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 15px;
            }

            .search-suggestions .box-suggestions ul li {
                margin-bottom: 28px;
                overflow: hidden;
            }

            .search-suggestions .box-suggestions ul li .image {
                width: 40px;
                float: left;
                height: 40px;
                line-height: 50px;
                margin-right: 20px;
            }

            .search-suggestions .box-suggestions ul li .info-product {
                overflow: hidden;
            }

            .search-suggestions .box-suggestions ul li .info-product .name a:not(:hover) {
                color: #484848;
            }

            .search-suggestions .box-suggestions ul li .info-product .price .sale {
                color: #484848;
                font-size: 16px;
                font-weight: 500;
                font-family: 'Nunito';
                margin-right: 15px;
            }

            .search-suggestions .box-suggestions ul li .info-product .price .regular {
                font-size: 13px;
            }

            .search-suggestions .box-cat {
                width: 45%;
                float: left;
                background: #f5f5f5;
                padding: 20px 30px;
                height: 541px;
                overflow: hidden;
            }

            .search-suggestions .box-cat li a {
                color: #484848;
                line-height: 30px;
            }

            /* Box Cart */
            .box-cart {
                text-align: right;
                padding: 27px 0;
            }

            .box-cart .inner-box {
                display: inline-block;
                position: relative;
                padding: 0px 0px 0px 15px;
            }

            .box-cart .inner-box>a>div {
                display: inline-block;
            }

            .box-cart .inner-box>a>div.icon-cart {
                height: 48px;
                line-height: 40px;
                width: 48px;
                text-align: center;
                border: 2px solid #e5e5e5;
                background-color: #85c226;
                border-radius: 50%;
                position: relative;
            }

            .box-cart .inner-box>a:hover>div.icon-cart {
                border-color: #f28b00;
            }

            .box-cart .inner-box>a>div.icon-cart span {
                position: absolute;
                top: -3px;
                right: -8px;
                background-color: #f28b00;
                width: 20px;
                height: 20px;
                line-height: 18px;
                color: #f4f4f4;
                font-size: 11px;
                border-radius: 50%;
            }

            .box-cart .inner-box>a>.price {
                font-weight: 600;
                font-size: 16px;
                margin-left: 8px;
            }

            .box-cart .inner-box ul.menu-compare-wishlist li {
                display: inline-block;
                margin-right: 19px;
            }

            .box-cart .inner-box ul.menu-compare-wishlist li a {
                display: inline-block;
                height: 48px;
                width: 48px;
                line-height: 40px;
                text-align: center;
                border: 2px solid #e5e5e5;
                border-radius: 50%;
            }

            .box-cart .inner-box ul.menu-compare-wishlist li a:hover {
                border-color: #f28b00;
            }

            .box-cart .inner-box .dropdown-box {
                padding: 25px 20px 32px;
                position: absolute;
                background-color: #fff;
                border-radius: 8px;
                top: 150px;
                width: 332px;
                right: 0;
                opacity: 0;
                visibility: hidden;
                z-index: 99;
                box-shadow: 0px 2px 3px 0px rgba(72, 72, 72, 0.15);
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .box-cart .inner-box .dropdown-box:before {

                position: absolute;
                top: -7px;
                right: 70px;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid #e5e5e5;
            }

            .box-cart>.inner-box:hover>.dropdown-box {
                top: 55px;
                opacity: 1;
                visibility: visible;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            .box-cart .inner-box .dropdown-box>ul>li {
                position: relative;
                margin-bottom: 30px;
            }

            .box-cart .inner-box .dropdown-box>ul>li .img-product {
                float: left;
                margin-right: 20px;
                width: 64px;
                height: 64px;
                border: 2px solid transparent;
                border-radius: 8px;
                text-align: center;
            }

            .box-cart .inner-box .dropdown-box>ul>li:hover .img-product {
                border-color: #e5e5e5;
            }

            .box-cart .inner-box .dropdown-box>ul>li .info-product {
                text-align: left;
            }

            .box-cart .inner-box .dropdown-box>ul>li .info-product .name {
                margin-bottom: 3px;
                color: #484848;
                font-size: 12px;
                line-height: 20px;
            }

            .box-cart .inner-box .dropdown-box>ul>li .info-product .price {
                color: #f28b00;
            }

            .box-cart .inner-box .dropdown-box>ul>li span.delete {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 18px;
                cursor: pointer;
            }

            .box-cart .inner-box .dropdown-box .total {
                text-align: left;
            }

            .box-cart .inner-box .dropdown-box .total span {
                color: #484848;
                font-weight: bold;
                font-size: 14px;
            }

            .box-cart .inner-box .dropdown-box .total span.price {
                color: #f28b00;
                font-size: 22px;
                font-weight: 500;
                float: right;
            }

            .box-cart .inner-box .dropdown-box .btn-cart {
                margin-top: 30px;
                overflow: hidden;
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.view-cart {
                padding: 10px 33px;
                color: #f28b00;
                border: 2px solid #f28b00;
                border-radius: 30px;
                font-size: 14px;
                font-weight: 600;
                float: left;
                position: relative;
                overflow: hidden;
                z-index: 5;
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.view-cart:hover {
                color: #fff;
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.view-cart:before,
            .box-cart .inner-box .dropdown-box .btn-cart a.check-out:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                background: #f28b00;
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                -webkit-transform-origin: 0 50%;
                transform-origin: 0 50%;
                -webkit-transition-property: transform;
                transition-property: transform;
                -webkit-transition-duration: 0.4s;
                transition-duration: 0.4s;
                -webkit-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.view-cart:hover:before,
            .box-cart .inner-box .dropdown-box .btn-cart a.check-out:hover:before {
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
                -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
                transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.check-out {
                padding: 12px 35px;
                color: #fff;
                border-radius: 30px;
                font-size: 14px;
                font-weight: 600;
                background-color: #484848;
                float: right;
                position: relative;
                overflow: hidden;
                z-index: 5;
            }

            .box-cart .inner-box .dropdown-box .btn-cart a.check-out:hover {
                border-color: transparent;
            }

            /* Header Bottom */
            .header-bottom {
                background-color: #85c226;
            }

            .header-bottom>.container>.row {
                position: relative;
            }

            .header-bottom.style2 {
                background-color: #85c226;
            }

            .header-bottom.style3 {
                background-color: #fff;
            }

            /* Menu Mega
-------------------------------------------------------------- */
            #mega-menu {
                position: relative;
                top: -10px;
                height: 55px;
                width: 260px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            #mega-menu>.btn-mega {
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                font-size: 14px;
                letter-spacing: 0.5px;
                color: #ffffff;
                height: 65px;
                padding-left: 70px;
                line-height: 65px;
                background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                position: relative;
                z-index: 98;
                cursor: pointer;
                box-shadow: 0 4px 15px rgba(133, 194, 38, 0.2);
                transition: all 0.3s ease;
            }

            #mega-menu>.btn-mega:hover {
                background: linear-gradient(135deg, #649618 0%, #92d62a 100%);
                box-shadow: 0 6px 20px rgba(133, 194, 38, 0.35);
            }

            #mega-menu:hover ul.menu {
                top: 0px;
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
            }

            /* Modern Hamburger Icon */
            #mega-menu>.btn-mega>span {
                position: absolute;
                height: 2px;
                width: 18px;
                left: 32px;
                top: 31px;
                background-color: #fff;
                display: inline-block;
                transition: all 0.3s ease;
            }

            #mega-menu>.btn-mega>span:before {
                content: '';
                position: absolute;
                height: 2px;
                width: 18px;
                top: -6px;
                left: 0;
                background-color: #fff;
                transition: all 0.3s ease;
            }

            #mega-menu>.btn-mega>span:after {
                content: '';
                position: absolute;
                height: 2px;
                width: 18px;
                top: 6px;
                left: 0;
                background-color: #fff;
                transition: all 0.3s ease;
            }

            #mega-menu:hover>.btn-mega>span {
                background-color: transparent;
            }

            #mega-menu:hover>.btn-mega>span:before {
                top: 0;
                transform: rotate(45deg);
            }

            #mega-menu:hover>.btn-mega>span:after {
                top: 0;
                transform: rotate(-45deg);
            }

            #mega-menu>ul.menu {
                position: relative;
                z-index: 90;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(0, 0, 0, 0.05);
                border-top: none;
                border-bottom-left-radius: 12px;
                border-bottom-right-radius: 12px;
                top: 15px;
                opacity: 0;
                visibility: hidden;
                height: auto;
                padding: 10px 0;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                transform: translateY(10px);
                transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
            }

            #mega-menu>ul.menu>li {
                position: relative;
            }

            #mega-menu>ul.menu>li>a {
                height: 48px;
                line-height: 48px;
                padding: 0 24px;
                border-bottom: none;
                display: flex;
                align-items: center;
                position: relative;
                font-family: 'Montserrat', sans-serif;
                font-weight: 500;
                font-size: 14px;
                color: #2D3748;
                transition: all 0.25s ease;
            }

            #mega-menu>ul.menu>li:hover>a {
                padding-left: 28px;
                color: #5b8716;
                background-color: rgba(133, 194, 38, 0.06);
            }

            /* Indicator active bar on left */
            #mega-menu>ul.menu>li>a::before {
                content: '';
                position: absolute;
                left: 0;
                top: 10%;
                height: 80%;
                width: 3px;
                background-color: #85c226;
                border-radius: 0 4px 4px 0;
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.25s ease;
            }

            #mega-menu>ul.menu>li:hover>a::before {
                transform: scaleX(1);
            }

            #mega-menu>ul.menu>li>a.dropdown:after {
                content: '\f105';
                position: absolute;
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                right: 24px;
                font-size: 12px;
                color: #A0AEC0;
                transition: transform 0.25s ease;
            }

            #mega-menu>ul.menu>li:hover>a.dropdown:after {
                transform: translateX(4px);
                color: #85c226;
            }

            #mega-menu>ul.menu>li>a .menu-img img {
                display: none;
            }

            #mega-menu>ul.menu>li>a .menu-img {
                margin-right: 12px;
                width: 22px;
                height: 22px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(133, 194, 38, 0.1);
                color: #85c226;
                border-radius: 6px;
                font-size: 10px;
                transition: all 0.25s ease;
            }

            #mega-menu>ul.menu>li>a .menu-img:before {
                content: '✦';
                font-family: inherit;
            }

            #mega-menu>ul.menu>li:hover>a .menu-img {
                background-color: #85c226;
                color: #fff;
                transform: scale(1.1) rotate(45deg);
            }

            #mega-menu>ul.menu>li>a .menu-title {
                color: inherit;
                font-family: inherit;
                font-weight: inherit;
            }

            #mega-menu.style1>ul.menu {
                transform: translateY(0%);
                opacity: 1;
                top: -1px;
                visibility: visible;
                border-width: 1px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            #mega-menu>ul.menu>li:hover>.drop-menu {
                opacity: 1;
                visibility: visible;
                transform: translateX(0%);
            }

            #mega-menu>ul.menu>li .drop-menu {
                transform: translateX(-10%);
                opacity: 0;
                visibility: hidden;
                padding: 27px 7px 27px 0;
                position: absolute;
                top: -1px;
                left: 270px;
                width: 875px;
                border-radius: 10px;
                z-index: -1;
                height: 516px;
                background-color: #fff;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third {
                width: 33.3%;
                float: left;
                padding-left: 42px;
                padding-right: 15px;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third .cat-title {
                color: #f28b00;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 20px;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul li {
                margin-bottom: 5px;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul li a:not(:hover) {
                color: #484848;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third .show a {
                color: #f28b00;
                font-weight: bold;
                position: relative;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third .show a:before {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -4px;
                right: 0;
                background: #f28b00;
                -webkit-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                -o-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third .show a:hover:before {
                width: 100%;
                left: 0;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li {
                border: 2px solid #e5e5e5;
                border-radius: 5px;
                background-color: #e5e5e5;
                height: 110px;
                padding: 30px 10px 30px 18px;
                margin-bottom: 20px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li:hover {
                background-color: #fff;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li .banner-text {
                float: left;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li .banner-text .banner-title {
                font-weight: bold;
                font-size: 18px;
                color: #f28b00;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li .banner-text .more-link a img {
                margin-left: 10px;
            }

            #mega-menu>ul.menu>li .drop-menu>.one-third ul.banner li .banner-img {
                float: right;
            }

            /* Main Navigation
-------------------------------------------------------------- */
            #mainnav {
                padding-left: 30px;
                float: left;
            }

            #mainnav>ul.menu {
                word-spacing: -1px;
            }

            #mainnav>ul.menu>li {
                display: inline-block;
                line-height: 57px;
                height: 55px;
                width: 150px;
            }

            #mainnav ul.menu>li>a {
                display: inline-block;
                color: #fefefe;
                font-size: 16px;
                font-weight: 500;
                padding: 0 21.5px;
                border-right: 1px solid #fec579;
                line-height: 1;
                position: relative;
                z-index: 8;
            }

            #mainnav ul.menu>li>a:after {
                content: '';
                position: absolute;
                bottom: -20px;
                left: -1px;
                opacity: 0;
                background-color: #fff;
                height: 48px;
                width: calc(100% + 2px);
                z-index: -3;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            #mainnav ul.menu>li:hover>a {
                color: #f28b00;
            }

            #mainnav ul.menu>li:hover>a:after {
                opacity: 1;
            }

            #mainnav ul.menu>li:last-child>a {
                border-right: none;
            }

            #mainnav.style1 {
                padding-left: 4px;
                line-height: 104px;
            }

            #mainnav.style1 ul.menu>li>a {
                color: #484848;
                border: none;
                padding: 0;
                font-weight: 500;
                margin-right: 33px;
            }

            #mainnav.style2 {
                padding-left: 55px;
            }

            #mainnav.style2 ul.menu>li {
                margin-top: 24px;
            }

            #mainnav.style2 ul.menu>li>a {
                margin-right: 43.5px;
                text-transform: uppercase;
                font-weight: bold;
                color: #656565;
                padding: 0;
                border-right: 0px;
            }

            #mainnav.style2 ul.menu>li:last-child>a {
                margin-right: 0px;
            }

            #mainnav.style2 ul.menu>li.has-mega-menu:hover>.submenu {
                top: 80px;
            }

            #mainnav.style3 ul.menu>li>a {
                color: #484848;
                border-color: #c9c9c9;
            }

            #mainnav.style4 {
                padding-left: 72px;
            }

            #mainnav ul.menu>li:hover>.submenu {
                opacity: 1;
                visibility: visible;
                top: 55px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }

            #mainnav.style1 ul.menu>li.column-1:hover>.submenu {
                top: 55px;
            }

            #mainnav.style1 ul.menu>li:hover>.submenu {
                top: 80px;
            }

            /* Today Deal */
            .today-deal {
                float: right;
            }

            .today-deal a {
                line-height: 55px;
                color: #ffffff;
                font-size: 14px;
                font-weight: 600;
                position: relative;
            }

            .today-deal a:before {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -4px;
                right: 0;
                background: #fff;
                -webkit-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                -o-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
            }

            .today-deal a:hover:before {
                width: 100%;
                left: 0;
            }

            .today-deal.style1>a {
                color: #f28b00;
            }

            /* Sub Menu */
            ul.menu li.column-1 {
                position: relative;
            }

            ul.menu li.column-1 .submenu {
                width: 263px;
                left: -1px;
                padding: 18px 0;
            }

            ul.menu li.column-1 .submenu>li {
                line-height: 30px;
            }

            ul.menu li.column-1 .submenu>li:last-child {
                border-bottom: none;
            }

            ul.menu li.column-1 .submenu>li>a {
                display: block;
                font-size: 13px;
                padding-left: 22px;
                position: relative;
                font-weight: 500;
                color: #484848;
            }

            ul.menu li.column-1 .submenu>li>a:hover {
                color: #f28b00;
            }

            ul.menu li.column-1 .submenu>li>a i {
                padding-right: 15px;
            }

            .submenu .row:not(:last-child) {
                margin-bottom: 30px;
            }

            .submenu .col-md-4 {
                padding-left: 50px;
            }

            .submenu .cat-title {
                color: #f28b00;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 20px;
            }

            .submenu ul>li {
                margin-bottom: 5px;
                line-height: 24px;
            }

            .submenu .show {
                line-height: 24px
            }

            .submenu .show a {
                color: #f28b00;
                font-weight: 700;
                position: relative;
            }

            .submenu .show a:before {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -4px;
                right: 0;
                background: #f28b00;
                -webkit-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                -o-transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
                transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
            }

            .submenu .show a:hover:before {
                width: 100%;
                left: 0;
            }

            /* Main Navigation Mobile
-------------------------------------------------------------- */
            #mainnav-mobi {
                display: block;
                margin: 0 auto;
                width: 100%;
                position: absolute;
                left: 0;
                z-index: 1000;
                background-color: #222222;
            }

            #mainnav-mobi>ul {
                display: block;
                list-style: none;
                margin: 0;
                padding: 0;
            }

            #mainnav-mobi ul li {
                margin: 0;
                position: relative;
                text-align: left;
                border-top: 1px solid #333333;
                cursor: pointer;
                display: block;
            }

            #mainnav-mobi ul>li>a {
                text-decoration: none;
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
                color: #fff;
                border: none;
            }

            #mainnav-mobi ul.submenu {
                top: 100%;
                left: 0;
                z-index: 2000;
                position: relative;
                background-color: #222222;
            }

            #mainnav-mobi>ul>li>ul>li {
                position: relative;
                border-top: 1px solid #333333;
            }

            #mainnav-mobi ul.submenu>li>a {
                display: block;
                text-decoration: none;
                padding: 0 50px;
                border-top-color: rgba(255, 255, 255, .1);
                -webkit-transition: all 0.2s ease-out;
                -moz-transition: all 0.2s ease-out;
                -o-transition: all 0.2s ease-out;
                transition: all 0.2s ease-out;
            }

            #mainnav-mobi>ul>li>ul>li:first-child a {
                border-top: none;
            }

            #mainnav-mobi ul.submenu>li>a:hover,
            #mainnav-mobi>ul>li>ul>li.active>a {
                color: #fff;
            }

            #mainnav-mobi ul.menu li.has-mega-menu .submenu {
                background: #222222;
                right: 0px;
                width: 100%;
                position: relative;
            }

            #mainnav-mobi ul.menu li.has-mega-menu h3.cat-title {
                color: #fff;
                padding-left: 50px;
                cursor: pointer;
            }

            #mainnav-mobi ul.menu li.has-mega-menu .submenu .row:not(:last-child) {
                margin: 0;
            }

            /* Button Menu */
            .btn-menu,
            .btn-menu-mega {
                display: none;
                position: relative;
                background: transparent;
                cursor: pointer;
                float: right;
                top: 10px;
                width: 25px;
                height: 25px;
                border: 2px solid #fff;
                padding: 15px 18px 17px;
                border-radius: 4px;
                z-index: 8;
                -webkit-transition: all ease .238s;
                -moz-transition: all ease .238s;
                transition: all ease .238s;
            }

            .btn-menu-mega {
                background: #484848;
                border-color: #484848;
            }

            .btn-menu:before,
            .btn-menu:after,
            .btn-menu span,
            .btn-menu-mega:before,
            .btn-menu-mega:after,
            .btn-menu-mega span {
                background-color: #fff;
                -webkit-transition: all ease .238s;
                -moz-transition: all ease .238s;
                transition: all ease .238s;
            }

            .btn-menu:before,
            .btn-menu:after,
            .btn-menu-mega:before,
            .btn-menu-mega:after {
                content: '';
                position: absolute;
                height: 2px;
                width: 25px;
                left: 5px;
                top: 50%;
                -webkit-transform-origin: 50% 50%;
                -ms-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
            }

            .btn-menu span,
            .btn-menu-mega span {
                position: absolute;
                width: 25px;
                height: 2px;
                left: 5px;
                top: 50%;
                overflow: hidden;
                text-indent: 200%;
            }

            .btn-menu-mega span {
                width: 20px;
            }

            .btn-menu:before,
            .btn-menu-mega:before {
                -webkit-transform: translate3d(0, -7px, 0);
                transform: translate3d(0, -7px, 0);
            }

            .btn-menu:after,
            .btn-menu-mega:after {
                width: 25px;
                -webkit-transform: translate3d(0, 7px, 0);
                transform: translate3d(0, 7px, 0);
            }

            .btn-menu.active:after,
            .btn-menu-mega.active:after {
                width: 25px;
            }

            .btn-menu.active span,
            .btn-menu-mega.active span {
                opacity: 0;
            }

            .btn-menu.active:before,
            .btn-menu-mega.active:before {
                -webkit-transform: rotate3d(0, 0, 1, 45deg);
                transform: rotate3d(0, 0, 1, 45deg);
            }

            .btn-menu.active:after,
            .btn-menu-mega.active:after {
                -webkit-transform: rotate3d(0, 0, 1, -45deg);
                transform: rotate3d(0, 0, 1, -45deg);
            }

            .btn-submenu,
            .btn-submenu-child {
                position: absolute;
                right: 0px;
                top: -1px;
                font: 20px/51px 'FontAwesome';
                text-align: center;
                cursor: pointer;
                width: 51px;
                height: 50px;
                background: #333;
            }

            .btn-submenu-child {
                right: 57px;
                top: 0px;
                height: 45px;
                line-height: 46px;
            }

            .btn-submenu:before {
                content: "\f107";
                color: #ffffff;
            }

            .btn-submenu-child:before {
                content: "\f107";
                color: #fff;
            }

            .btn-submenu.active:before,
            .btn-submenu-child.active:before {
                content: "\f106"
            }

            /* Mega Mobile
-------------------------------------------------------------- */
            #mega-mobile {
                display: block;
                margin: 0 auto;
                width: 100%;
                position: absolute;
                left: 0;
                z-index: 1000;
                background-color: #222222;
            }

            #mega-mobile>ul.menu>li>a {
                color: #fff;
                display: block;
                padding: 15px 0;
                cursor: pointer;
                padding-left: 15px;
                border-bottom: 1px solid #333;
                position: relative;
            }

            #mega-mobile>ul.menu>li>a .menu-img {
                margin-right: 18px;
                min-width: 30px;
                display: inline-block;
                text-align: center;
            }

            #mega-mobile>ul.menu>li>a.dropdown .btn-dropdown,
            .btn-dropdown-child {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 14px;
                width: 54px;
                height: 54px;
                background: #262626;
                text-align: center;
                cursor: pointer;
                font: 20px/54px 'FontAwesome';
            }

            .btn-dropdown-child {
                right: 0px;
                width: 44px;
                height: 44px;
                line-height: 44px;
            }

            #mega-mobile>ul.menu>li>a.dropdown .btn-dropdown:after,
            .btn-dropdown-child:after {
                content: '\f107';
            }

            #mega-mobile>ul.menu>li>a.dropdown .btn-dropdown.active:after,
            .btn-dropdown-child.active:after {
                content: '\f106';
            }

            #mega-mobile>ul.menu>li>.drop-menu {
                padding: 0 54px 0 50px;
            }

            #mega-mobile>ul.menu>li>.drop-menu .cat-title {
                position: relative;
                color: #f5f5f5;
                padding: 10px 0;
                border-bottom: 1px solid #333;
            }

            #mega-mobile>ul.menu>li>.drop-menu ul {
                padding-left: 20px;
            }

            #mega-mobile>ul.menu>li>.drop-menu ul li {
                border-bottom: 1px solid #333;
            }

            #mega-mobile>ul.menu>li>.drop-menu ul li a {
                color: #f5f5f5;
                font-size: 12px;
                padding: 8px 0;
                display: block;
            }

            #mega-mobile>ul.menu>li>.drop-menu .show,
            #mega-mobile>ul.menu>li>.drop-menu .one-third:nth-child(3) {
                display: none;
            }


            /* This css for Responsive*/
            @media only screen and (max-width:1900px) {

                footer.style1 {
                    margin: 0px;
                }

                .header-bottom.style1 .grid-left,
                .flat-slider.style1 .grid-left {
                    width: 240px;
                }

                .header-bottom.style1 .grid-right,
                .flat-slider.style1 .grid-right {
                    width: calc(100% - 260px);
                }

                .header-bottom.style1 .grid-right {
                    padding: 7px 15px 7px 15px;
                }

                .header-bottom.style1 .grid-right ul.flat-infomation {
                    margin-right: 5px;
                }

                .header-bottom.style1 .grid-right .top-search.style1 {
                    width: 53%;
                }

                .header-bottom.style1 .grid-left #mega-menu {
                    width: 100%;
                }

                .slider .slider-item.style10 .item-text {
                    width: 50%;
                    padding: 30px;
                }

                .slider .slider-item.style10 .item-image {
                    padding-top: 100px;
                    padding-right: 30px;
                    width: 50%;
                }

                .banner-box.style1 {
                    width: 50%;
                }

                .banner-box.style1.v1 .inner-box {
                    display: none;
                }

                #mainnav.style2 {
                    float: right;
                    padding-left: 0px;
                }

                #mainnav.style2 ul.menu>li.has-mega-menu:hover>.submenu {
                    top: 90px;
                }

                .flat-unstyled.style1 {
                    line-height: 50px;
                    height: 50px;
                    margin-right: 0px;
                }

                .boxed.style2 .container-fluid {
                    width: 1170px;
                    max-width: 100%;
                }

                .counter.style1.v2,
                .bestsellers,
                .featured,
                .hot-sale {
                    width: 50%;
                    padding-left: 15px !important;
                    padding-right: 15px !important;
                }

                footer.style4 {
                    width: 1200px;
                }

                footer.style4 .widget-about {
                    padding-left: 0px;
                }

                footer.style4 .widget-newsletter {
                    padding-right: 0px;
                    margin-left: 0px;
                }

                .boxed.style2 .footer-bottom.style1 p.copyright {
                    margin-left: 0px;
                }

                .boxed.style2 .footer-bottom.style1 p.btn-scroll {
                    margin-right: 0px;
                }


            }

            @media only screen and (min-width:1200px) and (max-width:1366px) {

                #mega-menu>ul.menu>li .drop-menu {
                    left: 258px;
                    width: 879px;
                }

                .flat-location .location-detail {
                    width: 300px;
                }

                .flat-location .location {
                    width: 380px;
                }

                .flat-location #flat-map-2 {
                    width: calc(100% - 300px - 380px);
                }

                .location .location-content .select-location select {
                    width: 92px;
                    margin-right: 7px;
                }

                .location .location-content .select-location .select:before {
                    right: 30px;
                }

                .boxed.style2 .flat-imagebox .container-fluid .box-product .row .col-xl-2 {
                    max-width: 33.333%;
                }


            }

            @media only screen and (max-width:1366px) {

                .product-detail-bar {
                    padding-left: 0px;
                }

                .boxed.style2 .container-fluid {
                    padding: 0 30px;
                }

                .boxed.style2 .container-fluid .flat-row-title {
                    margin-left: 0px;
                    margin-right: 0px
                }

                .flat-highlights.style2 .container-fluid {
                    padding: 20px 30px;
                }

                footer.style4 {
                    width: auto;
                }

                footer.style2 .container-fluid {
                    padding: 40px 30px;
                }

                footer.style4 .widget-categories-ft {
                    padding-left: 60px;
                }


            }

            @media only screen and (max-width:1199px) {

                body.background section.flat-row {
                    margin-left: 15px;
                    margin-right: 15px;
                }

                body.background .flat-imagebox.style4 .owl-carousel-3.owl-theme .owl-controls .owl-nav div.owl-prev {
                    left: -45px;
                }

                body.background .flat-imagebox.style4 .owl-carousel-3.owl-theme .owl-controls .owl-nav div.owl-next {
                    right: -45px;
                }

                #mega-menu>ul.menu>li .drop-menu {
                    width: 704px;
                    left: 255px;
                }

                #mega-menu>ul.menu>li .drop-menu>.one-third {
                    padding-left: 0px;
                    padding-right: 3px;
                }

                .box-cart .inner-box ul.menu-compare-wishlist li {
                    margin-right: 5px;
                }

                .mainnav {
                    padding-left: 0px;
                }

                .mainnav ul.menu>li>a {
                    padding: 0 20px;
                }

                #mega-menu {
                    width: 250px;
                }

                .flat-team {
                    padding: 10px 0 50px;
                }

                ul.brands-tablist {
                    padding: 20px 20px;
                }

                article.main-post.style3,
                article.main-post.style3 .content-post {
                    padding: 0px;
                }

                .table-cart tr td .quanlity input {
                    width: 100%;
                }

                .table-cart tr td .quanlity span.btn-up {
                    right: 20px;
                }

                .flat-location .location,
                .flat-location .location-detail {
                    width: 50%;
                }

                .flat-location #flat-map-2 {
                    width: 100%;
                }

                .flex-control-thumbs li {
                    margin-right: 10px;
                    margin-bottom: 10px;
                }

                .box-cart.style2 .btn-add-cart a {
                    width: 100%;
                }

                .box-cart.style2 .compare-wishlist,
                .box-cart.style2 .btn-add-cart {
                    display: block;
                    margin-left: 0px;
                    text-align: center;
                }

                .imagebox .box-content .cat-name a:before,
                .imagebox .box-content .cat-name a:after {
                    width: 20%;
                }

                .flat-imagebox.style2 .product-wrap .tab-item .row .col-md-6 .product-box .imagebox .box-content .cat-name a:before,
                .flat-imagebox.style2 .product-wrap .tab-item .row .col-md-6 .product-box .imagebox .box-content .cat-name a:after {
                    width: 30%;
                }

                .imagebox.style5 {
                    overflow: hidden;
                }

                .imagebox.style5 .box-text {
                    padding: 20px 0 20px;
                    margin-right: 0px;
                }

                .slider .slider-item.style6 .item-text {
                    padding: 30px 30px;
                }

                .slider .slider-item.style7 {
                    position: relative;
                    height: 400px;
                }

                .slider .slider-item.style7 .item-text {
                    padding: 80px 0 0 30px;
                }

                .slider .slider-item.style7 .item-image {
                    width: 30%;
                    position: absolute;
                    padding: 0;
                    bottom: 0;
                    right: 10px;
                }

                .top-search.style1 {
                    width: 520px;
                    padding-left: 30px;
                }

                .box-cart.style1 .inner-box>a>.price,
                .header-bottom.style1 .grid-right ul.flat-infomation {
                    display: none;
                }

                .mainnav.style1 ul.menu>li>a {
                    margin-right: 22px;
                }

                .slider .slider-item.style8 .item-image {
                    width: 50%;
                    margin-top: 40px;
                }

                .box-6 {
                    width: 50%;
                    padding: 0 10px 0 10px;
                }

                .box-6.big {
                    padding-right: 10px;
                    padding-left: 10px;
                }

                .box-6 .product-box,
                .box-6.big .product-box {
                    width: 100%;
                }

                .header-bottom.style1 .grid-right .top-search.style1 {
                    width: 70%;
                }


            }

            @media only screen and (min-width:992px) and (max-width:1199px) {

                #mainnav ul.menu>li>a {
                    padding: 0 18px;
                }

                .imagebox.style1.v3 .box-price {
                    width: 200px;
                    padding: 30px 2px 0 20px;
                }

                .imagebox.style1.v3 .box-content {
                    width: 250px;
                }

                .imagebox.style1.v3 .box-image {
                    width: calc(100% - 465px);
                }

                .drop-menu {
                    width: 710px;
                    left: 260px;
                }

                .drop-menu>.one-third {
                    padding-left: 0px;
                    padding-right: 0px;
                }

                .drop-menu>.one-third:first-child {
                    padding-left: 15px;
                    n
                }

                .box-right .img-line {
                    padding-left: 45px;
                    margin-top: -100px;
                }

                .box-right .img-line img:first-child {
                    margin-right: -60px;
                }

                .box-cart.style2 .compare-wishlist a.compare {
                    display: block;
                    margin-right: 0px;
                }

                .product-detail.style2 .footer-detail .quanlity-box>div.quanlity {
                    width: 110px;
                    margin-right: 10px;
                }

                .product-detail .footer-detail .quanlity-box>div.colors {
                    display: block;
                    margin-bottom: 20px;
                    margin-left: 0px;
                }

                .counter.style1 .counter-content .count-down .square {
                    width: 55px;
                }

                .top-search form.form-search .box-search .search-suggestions {
                    width: 670px;
                }

                .slider .slider-item .item-text {
                    width: 58%;
                    padding: 80px 40px;
                }

                .slider .slider-item.style5 .item-text {
                    width: 40%;
                }

                .slider .slider-item.style2 .item-text {
                    width: 40%;
                    padding: 30px 40px;
                }

                #mainnav.style1 ul.menu>li>a {
                    padding: 0 12px 0 12.5px;
                    margin-right: 0px;
                }

                #mainnav.style1 ul.menu>li.has-mega-menu .submenu {
                    width: 97%;
                }

                #mainnav.style2 ul.menu>li.has-mega-menu .submenu {
                    width: 97%;
                }


                .flexslider.style2 {
                    width: 56%;
                }

                #mega-menu>ul.menu>li .drop-menu {
                    padding-left: 15px;
                }

                .slider .slider-item.style7 {
                    height: 485px;
                }


            }



            @media only screen and (min-width:992px) {

                ul.submenu {
                    word-spacing: 2px;
                }

                .submenu {
                    position: absolute;
                    top: 100px;
                    right: 15px;
                    width: 1140px;
                    background-color: #fff;
                    opacity: 0;
                    visibility: hidden;
                    z-index: 99;
                    padding: 30px;
                    word-spacing: 2px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
                }


            }

            @media only screen and (min-width:992px) and (max-width:1199px) {
                ul.menu>li.has-mega-menu .submenu {
                    width: 130%;
                }

            }

            @media only screen and (max-width:991px) {

                .header-middle #logo.style1 {
                    line-height: 70px;
                    margin-bottom: 0px;
                }

                ul.flat-infomation.style1 li.phone {
                    line-height: 70px;
                    margin-right: 40px;
                }

                .owl-carousel-11.owl-theme .owl-controls .owl-dots {
                    bottom: 0;
                }

                .btn-menu.style1 {
                    background: #333;
                    top: 17px;
                }

                .btn-menu.style1.v1 {
                    background: transparent;
                    top: 10px;
                }

                .btn-menu.style1.v2 {
                    background: #333;
                    top: 10px;
                }

                .top-search.style1 {
                    width: 370px;
                    padding-left: 0px;
                    right: 15px;
                }

                .top-search.style1 form.form-search .box-search input {
                    padding-left: 20px;
                }

                .flat-row,
                .flat-iconbox.style1 {
                    padding: 30px 0;
                }

                .flat-product-content .container {
                    padding: 30px 15px;
                }

                .box-cart .inner-box>a>.price {
                    display: none;
                }

                .top-search {
                    padding-left: 0px;
                    margin-right: 0px;
                }

                .top-search form.form-search .cat-wrap select {
                    padding: 1px 35px 0 20px;
                }

                .top-search form.form-search .box-search input {
                    padding-left: 140px;
                }

                .btn-menu,
                .btn-menu-mega {
                    display: block;
                }

                .btn-menu-mega {
                    float: left;
                }

                .mainnav>ul.menu>li {
                    height: auto;
                }

                .mainnav ul.menu>li>a:after {
                    width: 0px;
                }

                .mainnav ul.menu>li:hover>.submenu {
                    top: 100%;
                }

                #mainnav-mobi ul>li>a>.submenu {
                    position: relative;
                    top: 0px;
                    right: 0px;
                    width: 100%;
                    background-color: #222222;
                    opacity: 1;
                    visibility: visible;
                    z-index: 99;
                    padding: 30px;
                    word-spacing: 4px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row h3 {
                    word-spacing: 2px;
                    cursor: pointer;
                    font-weight: 400;
                    font-size: 15px;
                    margin-bottom: 0px;
                    padding: 15px 0 15px 20px;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row .btn-submenu {
                    top: -15px;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row ul {
                    padding-left: 30px;
                    word-spacing: 2px;
                    padding-right: 40px;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row ul li {
                    border-top: none;
                    border-bottom: 1px solid #333;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row ul li>a {
                    padding-left: 5px;
                }

                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row:nth-child(2),
                #mainnav-mobi ul.menu li.has-mega-menu .submenu .row .show,
                .box-right .img-line img:first-child,
                .box-left .img-line img:first-child,
                .flat-newsletter .form-newsletter .right {
                    display: none;
                }

                #mainnav-mobi ul>li>a>.submenu li a {
                    color: #484848;
                }

                ul.menu li.column-1 .submenu {
                    width: 100%;
                    background: #222222;
                    border-radius: 0px;
                    position: relative;
                    top: -3px;
                    opacity: 1;
                    word-spacing: 2px;
                    visibility: visible;
                    padding: 0;
                }

                .today-deal {
                    margin-left: 20px;
                }

                .image-about img,
                .box-flexslider,
                .product-detail.style5 {
                    width: 100%;
                }

                .product-detail.style5 {
                    padding: 0 30px;
                }

                .product-detail.style5 .header-detail .reviewed .status-product {
                    text-align: left;
                }

                .product-detail.style5 .header-detail .reviewed .status-product span {
                    display: inline-block;
                }

                .flexslider .slides img {
                    width: auto;
                    max-width: 100%;
                }

                .iconbox.style1 {
                    margin-bottom: 30px;
                }

                .brands-list .brands-item {
                    width: 20%;
                }

                .imagebox.style1.v1 {
                    margin-bottom: 30px;
                }

                .imagebox.style1.v1 .box-content,
                .flat-contact {
                    padding-top: 0px;
                }

                .imagebox.style1.v1 .box-content .cat-name a {
                    font-size: 15px;
                }

                .flat-tab ul.tab-list {
                    padding-left: 0px;
                }

                .flat-tab .tab-content {
                    padding: 30px;
                }

                .progres {
                    padding-right: 0px;
                }

                .progress-circle {
                    text-align: center;
                }

                .progress-circle .circle-item {
                    margin-right: 80px;
                }

                .order-tracking {
                    padding: 50px;
                }

                .term-conditions .text-wrap {
                    margin-bottom: 40px;
                }

                .term-conditions .text-wrap p {
                    padding-right: 0px;
                }

                .table-cart {
                    margin-bottom: 30px;
                }

                .form-login,
                .form-register {
                    padding: 30px;
                }

                .form-coupon {
                    margin-top: 40px;
                }

                .cart-totals form .btn-cart-totals {
                    margin-top: 50px;
                }

                .compare-content .table-compare {
                    width: 840px;
                    overflow: auto;
                }

                .table-compare tr th {
                    padding-left: 20px;
                }

                .blog-pagination span {
                    display: block;
                    float: none;
                    text-align: center;
                }

                ul.flat-pagination.style1,
                .reviewed .status-product,
                .product-detail.style3 .reviewed .status-product {
                    float: none;
                }

                .product-box.style3 {
                    height: 360px;
                    margin-bottom: 30px;
                }

                .imagebox.style1.v3 {
                    min-height: 380px;
                    padding: 15px 20px 20px 20px;
                }

                .imagebox.style1.v3 .box-price {
                    text-align: left;
                    padding: 0px 55px 0 0px;
                }

                .imagebox.style1.v3 .box-image {
                    margin-right: 0px;
                }

                .iconbox.style2 {
                    margin-bottom: 50px;
                }

                .box-right .img-line,
                .box-left,
                .box-right.style1 .img-line {
                    text-align: center;
                    margin-top: 0px;
                }

                .box-left .img-line {
                    margin-bottom: 0px;
                }

                .product-detail .footer-detail .quanlity-box>div.colors {
                    margin-bottom: 20px;
                    margin-right: 20px;
                }

                .box-cart.style2 {
                    margin: 20px 0 20px;
                }

                .box-cart.style2 .btn-add-cart {
                    margin-bottom: 15px;
                }

                .flexslider.style1 .flex-viewport {
                    margin: 50px 0 50px;
                }

                .flexslider.style1 .flex-control-nav {
                    top: auto;
                    margin-top: 0px;
                    width: 100%;
                    position: relative;
                }

                .flexslider.style1 .flex-control-nav li {
                    display: inline-block;
                    width: auto;
                }

                .flexslider.style1 .slides img {
                    display: inline-block;
                    float: none;
                }

                .product-detail.style3 {
                    margin-left: 0px;
                }

                .box-cart.style2 .compare-wishlist,
                .box-cart.style2 .btn-add-cart {
                    text-align: left;
                }

                .box-cart.style2 .btn-add-cart a {
                    width: auto;
                    padding: 0 30px;
                }

                .flat-product-content.style2>.row>.col-md-12>.row {
                    padding: 50px 30px;
                }

                .description-text.style1 .box-text:first-child,
                .description-text.style1 .box-text:nth-child(3),
                .description-text.style1 .box-text:nth-child(4) {
                    margin-right: 0px;
                    margin-top: 30px;
                }

                .description-image.style1 {
                    margin: 0px;
                    text-align: center;
                }

                .box-right.style1 .box-text,
                .box-right.style1 {
                    margin-left: 0px;
                }

                .box-counter .product-item,
                .counter {
                    width: 100%;
                    padding: 0;
                }

                .counter span.special {
                    right: 0px;
                }

                .count-down {
                    text-align: center;
                }

                .count-down .square {
                    margin: 0 15px 15px;
                }

                .count-down .square:last-child {
                    margin-right: 15px;
                }

                .count-down .square .text {
                    margin-left: 0px;
                }

                .imagebox.style3 {
                    padding: 20px 20px;
                }

                .imagebox.style3 .box-image {
                    float: none;
                    margin-right: 0;
                    margin-bottom: 20px;
                    text-align: center;
                }

                .imagebox.style3 .box-image.save span {
                    top: 20px;
                }

                .imagebox.style3 .box-bottom .btn-add-cart a {
                    width: auto;
                    padding: 0 50px;
                }

                .imagebox.style3 .box-content,
                .imagebox.style3 .box-bottom {
                    text-align: center;
                }

                .box-wrap.style1 {
                    height: auto;
                }

                .flat-newsletter .form-newsletter {
                    padding: 50px 20px;
                    margin-top: 30px;
                }

                .flat-newsletter .form-newsletter .left {
                    float: none;
                    text-align: center;
                    padding-top: 0px;
                }

                .widget-categories-ft,
                .box-left .img-product,
                .form-review.style2 {
                    padding-left: 0px;
                }

                .widget-ft {
                    margin-bottom: 20px;
                }

                footer {
                    padding: 30px 0;
                }

                .box-cart .inner-box .dropdown-box:before {
                    right: 15px;
                }

                .top-search form.form-search .box-search .search-suggestions {
                    width: 0;
                }

                .imagebox.style5 .box-text {
                    text-align: center;
                    float: none;
                    width: 100%;
                    margin-right: 0px;
                }

                .flexslider.style1 .slides img {
                    padding-left: 0px;
                }

                .flexslider.style2 {
                    width: 100%;
                    float: left;
                }

                .flexslider.style2 .flex-viewport {
                    margin: 50px 50px 0;
                }

                .flexslider.style2 .flex-control-nav {
                    right: auto;
                    left: 0;
                    width: 20%;
                }

                .slider .slider-item .item-image {
                    display: none;
                }

                .slider .slider-item.style4 .item-text {
                    padding: 80px 48px;
                    width: 100%;
                }

                .slider .slider-item.style5 .item-image,
                .slider .slider-item.style7 .item-image,
                .slider .slider-item.style2 .item-image {
                    display: block;
                }

                .slider .slider-item.style6 .item-text {
                    width: 100%;
                    padding-top: 80px;
                }

                .slider .slider-item.style7 .item-text,
                .slider .slider-item.style2 .item-text {
                    width: 52%;
                    padding-top: 20px;
                }

                .slider .slider-item.style7 .item-text .content-item .regular {
                    display: none;
                }

                .slider .slider-item.style7 .item-image,
                .slider .slider-item.style2 .item-image {
                    width: 45%;
                    padding-right: 20px;
                }

                .slider .slider-item.style8 .item-text .header-item h2 {
                    font-size: 52px;
                }

                .flat-iconbox.style6 .col-md-3 .iconbox {
                    padding: 0 0 !important;
                }

                footer.style4 .widget-menu,
                footer.style4 .widget-categories-ft {
                    padding-left: 0px;
                }

                .flat-unstyled.style1 {
                    height: auto;
                    line-height: 100px;
                }

                .header-middle .grid-left #logo {
                    line-height: 100px;
                    float: left;
                }

                .header-bottom.style1 .grid-left {
                    width: 15%
                }

                .flat-slider.style1 .grid-left {
                    width: 0;
                }

                .header-bottom.style1 .grid-right,
                .flat-slider.style1 .grid-right {
                    width: 100%;
                    margin-left: 0px;
                }

                .slider .slider-item.style10 .item-image {
                    display: block;
                }

                .boxed.style2 .header-bottom .container-fluid {
                    padding: 0 15px;
                }

                .grid-right .show-search {
                    display: block;
                    float: right;
                    margin-top: 4px;
                }

                .grid-right .top-search.style1 {
                    padding: 10px 0;
                    margin-right: 0px;
                    position: absolute;
                    top: 100px;
                    right: 15px;
                    width: 100%;
                    opacity: 0;
                    visibility: hidden;
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
                }

                .header-bottom.style1 .grid-right .top-search.style1.active {
                    top: 64px;
                    opacity: 1;
                    visibility: visible;
                }

                .grid-right .box-cart.style1 {
                    float: right;
                    margin-right: 15px;
                }

                .grid-left .btn-menu {
                    background: #333;
                }

                .owl-carousel-4 .owl-item .imagebox.style4 {
                    height: 340px;
                }


            }

            @media only screen and (min-width:768px) and (max-width:991px) {

                ul.flat-unstyled {
                    margin-left: -30px;
                }

                ul.flat-support {
                    margin-right: -35px;
                }

                .text-about {
                    padding: 30px 50px;
                }

                .imagebox.style1.v3 .box-image {
                    width: 168px;
                }

                .box-owl-carousel .rows .imagebox.style1.v1 {
                    padding: 0 15px;
                }

                .top-search form.form-search .cat-wrap {
                    display: none;
                }

                .top-search form.form-search .box-search input {
                    padding-left: 15px;
                }

                .owl-carousel-3 .imagebox.style4 {
                    height: 310px;
                }

                .banner-box.style2 .inner-box,
                .banner-box.style2 .inner-box:nth-child(2),
                .banner-box.style2 .inner-box a img {
                    width: 100%;
                }

                .banner-box.style2 .inner-box:nth-child(2) {
                    margin-top: 20px;
                }

                .slider .slider-item.style8 .item-image {
                    display: block;
                }

                .slider .slider-item.style8 .item-text {
                    width: 50%;
                    padding-top: 30px;
                }

                .slider .slider-item.style9 .item-text {
                    padding: 25px 20px;
                }
            }

            @media only screen and (max-width:767px) {

                ul.flat-unstyled,
                ul.flat-support {
                    text-align: center;
                }

                .header-middle #logo {
                    text-align: center;
                    line-height: 60px;
                    margin: 0px;
                }

                .top-search {
                    padding: 15px 0 5px;
                }

                .top-search.style1 {
                    padding: 10px 0;
                    margin-right: 0px;
                    position: absolute;
                    top: 100px;
                    right: 0;
                    width: 100%;
                    opacity: 0;
                    visibility: hidden;
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
                }

                .top-search.style1 .cat-wrap {
                    display: none;
                }

                .top-search.style1.active {
                    top: 44px;
                    right: 15px;
                    opacity: 1;
                    visibility: visible;
                    -webkit-transition: all 0.3s ease-in-out;
                    -moz-transition: all 0.3s ease-in-out;
                    -ms-transition: all 0.3s ease-in-out;
                    -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
                }

                .top-search.style1.active form.form-search .box-search input {
                    border: 1px solid #484848;
                }

                .top-search.style2 {
                    padding: 15px 0 15px;
                    width: 100%;
                    float: none;
                }

                .show-search {
                    display: block;
                    float: right;
                    margin-top: 4px;
                }

                .box-cart.style1.v1 {
                    padding: 10px 0 15px;
                    float: none;
                    text-align: center;
                }

                .box-cart.style1 {
                    text-align: right;
                    float: right;
                    margin-right: 15px;
                }

                .slider .slider-item .item-text .header-item h2 {
                    font-size: 44px;
                }

                .product-box.style2.v1 {
                    float: none;
                }

                .iconbox {
                    margin-bottom: 30px;
                }

                .text-about {
                    margin-left: 0px;
                    margin-right: 0px;
                    padding: 30px;
                }

                article.main-post.style4 {
                    text-align: center;
                }

                .member {
                    text-align: center;
                }

                .brands-list .brands-item {
                    width: 25%;
                }

                .progress-circle .circle-item {
                    margin-right: 19px;
                }

                .order-tracking {
                    padding: 30px 30px;
                }

                .order-tracking form .one-half {
                    width: 100%;
                    padding: 0px;
                    margin-bottom: 20px;
                }

                .order-tracking form .btn-track button {
                    margin-top: 0px;
                    margin-left: 0px;
                }

                article.main-post.style2,
                article.main-post .featured-post a img,
                .box-counter.style1 .counter,
                .box-counter.style1 .product-item {
                    width: 100%;
                }

                .box-counter.style1 .product-item {
                    padding-left: 0px;
                }

                .imagebox.style3.v1 .box-image.save span {
                    left: -29px;
                    top: -25px;
                }

                .form-login,
                #shop .sidebar .widget,
                .box-wrap.style1 {
                    margin-bottom: 30px;
                }

                .form-login,
                .form-register {
                    height: 420px;
                }

                .form-login .title,
                .form-register .title {
                    margin-bottom: 40px;
                }

                .sort-product.style1 {
                    padding: 15px 25px;
                }

                .sort-product.style1 .icons,
                .sort-product.style1 .sort {
                    float: none;
                }

                .sort-product .sort>div.popularity {
                    margin-left: 0px;
                }

                .description-image {
                    margin-top: 0px;
                    text-align: center;
                }

                .box-right .img-line {
                    padding-left: 0px;
                }

                .product-detail.style1>span {
                    width: 0px;
                }

                .product-detail.style4 {
                    padding: 15px;
                }

                .counter.style1 {
                    margin-left: 0px;
                    width: 100%;
                    margin-top: 30px;
                    text-align: center;
                }

                .counter.style1 .item-sale {
                    margin: 0px 15px 15px;
                }

                .box-owl-carousel .rows {
                    margin: 0 15px;
                }

                .box-owl-carousel .rows .imagebox.style1.v1 {
                    width: 100%;
                    padding-bottom: 20px;
                    margin-bottom: 0px;
                    border-right: none;
                    border-bottom: 1px solid #e5e5e5;
                }

                .box-owl-carousel .rows .imagebox:nth-child(3),
                .box-owl-carousel .rows .imagebox.style1.v1:nth-child(3) {
                    border-bottom: none;
                }

                .banner-box {
                    display: none;
                }

                .flat-newsletter .form-newsletter .left .title {
                    float: none;
                    margin-right: 0px;
                    margin-bottom: 15px;
                }

                .footer-bottom.style3 {
                    text-align: center;
                }

                .footer-bottom.style3 p.copyright,
                .footer-bottom.style3 .btn-scroll {
                    float: none;
                }

                .product-box.style1.v1 {
                    height: 250px;
                }

                .flat-imagebox.style2 .product-wrap .tab-item .row .col-md-6 .product-box {
                    padding-left: 0px;
                }

                .box-cart {
                    text-align: center;
                    padding: 18px 0;
                }

                .box-cart .inner-box ul.menu-compare-wishlist li {
                    margin-right: 25px;
                }

                .table-wishlist {
                    width: 750px;
                }

                .table-wishlist tbody tr td>div.delete {
                    margin-right: 30px;
                }

                .popup-newsletter .popup-text {
                    width: 100%;
                }

                .popup-newsletter .popup-image {
                    display: none;
                }

                .popup-newsletter .container {
                    width: 720px
                }

                .slider .slider-item.style5 {
                    height: 400px;
                }

                .slider .slider-item.style8 .item-text {
                    width: 100%;
                }

                .slider .slider-item:before {
                    right: 50px;
                }

                .slider .slider-item.style2 .item-text {
                    padding: 20px;
                }

                .divider90 {
                    display: none;
                }

                .owl-carousel-3 .imagebox.style4 {
                    height: 300px;
                }

                .counter.style1.v2,
                .bestsellers,
                .featured,
                .hot-sale,
                .box-6.big {
                    width: 100%;
                }

                .product-wrap.style1 .tab-item {
                    padding: 0 10px;
                }

                .header-middle .grid-left,
                .header-middle .grid-right {
                    width: 100%;
                    margin-left: 0px;
                    text-align: center;
                }

                .header-middle .grid-right .flat-unstyled.style1 {
                    float: none;
                    line-height: 50px;
                }

                .header-middle .grid-left #logo {
                    line-height: 60px;
                }

                .slider .slider-item.style10 .item-text {
                    width: 100%;
                }

                .slider .slider-item.style10 .item-image {
                    display: none;
                }

                .header-bottom.style1 .grid-right .top-search.style1.active {
                    top: 64px;
                }

                .box-filter .widget {
                    width: 50%;
                }


            }

            @media only screen and (max-width:575px) {

                .container {
                    max-width: 100%;
                }

                .header-middle #logo.style1 {
                    float: none;
                    width: 100%;
                }

                ul.flat-infomation.style1 {
                    float: left;
                }

                ul.flat-infomation.style1 li.phone {
                    height: auto;
                }

                ul.flat-infomation.style1 li img {
                    display: none;
                }

                .widget-apps .widget-title h3 {
                    margin-top: 0px;
                }

                ul.app-list li {}

                ul.app-list li.app-store {
                    margin-bottom: 20px;
                    margin-right: 0px;
                }

                .brands-list .brands-item {
                    width: 33.333%;
                }

                .flat-tab ul.tab-list li {
                    padding: 14px 25px;
                }

                .progress-circle .circle-item {
                    margin-right: 0px;
                    display: block;
                    margin-bottom: 30px;
                }

                .progress-circle .circle-item .demo {
                    position: relative;
                    left: 50%;
                    margin-left: -83.5px;
                }

                article.main-post.style1 .featured-post {
                    float: none;
                    margin-right: 0;
                    margin-bottom: 20px;
                }

                article.main-post .featured-post a img,
                .comment-respond .form-comment form .comment-form-name,
                .comment-respond .form-comment form .comment-form-email,
                .comment-respond .form-comment form .comment-form-comment {
                    width: 100%;
                }

                article.main-post.single .content-post .entry-post blockquote {
                    padding-left: 50px;
                }

                article.main-post.single .content-post .entry-post blockquote span {
                    left: 3px;
                }

                .fields-content .field-row .field-one-half,
                #form-contact .form-box.one-half {
                    width: 100%;
                    padding: 0px !important;
                }

                .table-cart table {
                    width: 650px;
                    overflow: hidden;
                }

                .table-cart tr td .quanlity span.btn-up {
                    right: 20px;
                }

                .table-cart tr td .img-product {
                    margin-right: 15px;
                }

                .flat-location .location,
                .flat-location .location-detail,
                .flat-location #flat-map-2 {
                    width: 100%;
                }

                .product-box.style3 {
                    min-height: 580px;
                    height: auto;
                }

                .imagebox.style1.v3 {
                    text-align: center;
                    min-height: 600px;
                    height: auto;
                }

                .imagebox.style1.v3 .box-image,
                .imagebox.style1.v3 .box-content,
                .imagebox.style1.v3 .box-price {
                    width: 100%;
                    padding: 0px;
                    text-align: center;
                }

                .imagebox.style1.v3 .box-price .btn-add-cart a {
                    display: inline-block;
                    padding: 0 40px;
                }

                .flex-control-thumbs {
                    margin-top: 30px;
                }

                .product-detail-bar li {
                    padding: 12px 12px;
                    font-size: 16px;
                }

                .product-detail-bar.style1 li {
                    padding: 12px;
                }

                body.background section.flat-row .container {
                    padding: 10px 15px 0;
                }

                .box-owl-carousel.style1 .imagebox.style7 {
                    width: 100%;
                    border-right: none;
                }

                .popup-newsletter .container {
                    width: 480px
                }

                .flexslider.style2 .flex-viewport {
                    margin: 0 0 30px;
                }

                .flexslider.style2 .flex-control-nav {
                    width: 100%;
                    position: relative;
                    margin-top: 0px;
                }

                .flexslider.style2 .flex-control-thumbs li {
                    float: left;
                    margin-bottom: 10px;
                }

                .slider .slider-item.style6 .item-text {
                    padding-top: 30px;
                }

                .slider .slider-item.style7 .item-text,
                .slider .slider-item.style2 .item-text,
                .box-6 {
                    width: 100%;
                }

                .slider .slider-item.style7 .item-image,
                .slider .slider-item.style2 .item-image {
                    display: none;
                }

                .slider .slider-item.style2 .item-text {
                    padding: 20px 20px;
                }

                .slider .slider-item.style4 .item-text .header-item h2 {
                    font-size: 50px;
                }

                .boxed.style1 .flat-row.flat-highlights {
                    padding-top: 30px;
                }

                .box-6.big .imagebox .box-bottom .btn-add-cart a {
                    padding: 0 35px;
                }

                .boxed.style2 .footer .container-fluid {
                    padding: 0 15px;
                }

                .imagebox.style3 .box-bottom .btn-add-cart a {
                    padding: 0 35px;
                    width: 100%;
                    margin-left: 0px;
                }

                .imagebox.style3 .box-bottom .compare-wishlist {
                    text-align: center;
                }

                .imagebox.style3 .box-bottom .compare-wishlist a.compare {
                    margin-left: 0px;
                }

                .box-filter .widget {
                    width: 100%;
                }


                .slider .slider-item .item-text .header-item h2 {
                    font-size: 40px;
                }

            }

            @media only screen and (min-width:480px) and (max-width:767px) {

                .banner-box .inner-box a {
                    margin-top: 30px;
                    text-align: center;
                }

                .slider .slider-item.style5 .item-image {
                    width: 43%;
                    padding-right: 30px;
                }


            }

            @media only screen and (min-width:480px) {}

            @media only screen and (max-width:480px) {

                .flat-breadcrumb ul.breadcrumbs li.trail-item a {
                    margin-right: 10px;
                }

                .wrap-error .content-error .form-search-error {
                    padding: 30px 30px;
                }

                .wrap-error .content-error .form-search-error form .search-input input {
                    width: 100%;
                    margin-right: 0px;
                    display: block;
                    margin-bottom: 15px;
                }

                .brands-list .brands-item {
                    width: 50%;
                }

                .progres .progress-item .perc span {
                    top: 17px;
                }

                .btn-radio.style2 .radio-info label {
                    width: 180px;
                }

                .accordion-toggle .toggle-title:before {
                    right: 19.5px;
                }

                .accordion-toggle .toggle-title:after {
                    right: 12.5px;
                }

                .tabs ul.menu-tab {
                    margin-bottom: 20px;
                }

                .tabs ul.menu-tab li {
                    margin-right: 15px;
                    font-size: 16px;
                }

                ol.comment-list li.comment .comment-text .comment-metadata .name {
                    float: none;
                }

                ol.comment-list li.comment .comment-text .comment-metadata .queue {
                    text-align: left;
                    line-height: 24px;
                }

                .cart-totals {
                    padding: 35px 20px 30px 30px;
                }

                .btn-order {
                    padding: 0px;
                }

                .form-coupon {
                    padding: 30px 15px;
                }

                .form-coupon form input {
                    width: 100%;
                    margin-bottom: 20px;
                    margin-right: 0px;
                }

                .sort-product .icons,
                .sort-product .sort,
                .wrap-imagebox .flat-row-title span {
                    float: none;
                }

                .sort-product .sort>div {
                    margin-left: 0px;
                    margin-bottom: 15px;
                    display: block;
                }

                .sort-product .sort>div select {
                    width: 100% !important;
                }

                .main-shop .wrap-imagebox .flat-row-title h3 {
                    display: block;
                    float: none;
                    padding: 0px 0 10px;
                }

                .owl-carousel-4.owl-theme .owl-controls .owl-nav div.owl-prev,
                .owl-carousel-4.owl-theme .owl-controls .owl-nav div.owl-next {
                    border-radius: 50%;
                    border: 1px solid #e5e5e5;
                    left: -15px;
                    width: 45px;
                    height: 45px;
                    line-height: 42px;
                    background-color: #fff;
                }

                .owl-carousel-4.owl-theme .owl-controls .owl-nav div.owl-next {
                    right: -15px;
                    left: auto;
                }

                .product-detail {
                    padding: 20px;
                }

                .rating .queue-box li span,
                .rating .score .queue {
                    display: block;
                }

                .rating .queue-box li span.numb-star,
                .rating .score .queue {
                    margin-left: 0px;
                }

                .rating .score .queue {
                    margin-top: 20px;
                }

                .product-tab ul.tab-list li,
                .product-tab ul.tab-list li.active {
                    margin-right: 18px;
                    font-weight: 300;
                    font-size: 16px;
                }

                .product-tab ul.tab-list li {
                    margin-right: 15px;
                }

                .product-tab ul.tab-list li:hover {
                    font-weight: 400;
                }

                .banner-box {
                    margin-bottom: 20px;
                }

                .banner-box.one-half .inner-box {
                    width: 100%;
                    margin-bottom: 20px;
                }

                .banner-box.one-half {
                    margin-bottom: 0px;
                }

                .banner-box .inner-box a img,
                .banner-box.style2 .inner-box:nth-child(2) {
                    width: 100%;
                }

                .imagebox.style3 .box-content,
                .imagebox.style3 .box-bottom {
                    text-align: left;
                }

                .flat-newsletter .form-newsletter .left form {
                    display: block;
                }

                .flat-newsletter .form-newsletter .left form input {
                    width: 100%;
                }

                .flat-imagebox.style2 .product-wrap .tab-item .row .col-md-6 .product-box .imagebox .box-bottom .btn-add-cart a {
                    padding: 0 30px;
                }

                .top-search.style1 {
                    width: 290px;
                }

                .top-search form.form-search .cat-wrap {
                    display: none;
                }

                .top-search form.form-search .box-search input {
                    padding-left: 15px;
                }

                .box-cart .inner-box .dropdown-box {
                    right: -57px;
                    width: 310px;
                    padding: 25px 15px;
                }

                .box-cart .inner-box .dropdown-box:before {
                    right: 73px;
                }

                .popup-newsletter .container {
                    width: 320px
                }

                .popup-newsletter .popup-text h2 {
                    font-size: 20px;
                }

                .popup-newsletter .popup-text p.subscribe {
                    margin: 15px 0 15px;
                }

                .popup-newsletter .popup-text .form-popup .checkbox {
                    margin-top: 0px;
                }

                .slider .slider-item.style4 .item-text {
                    padding: 15px 10px;
                }

                .slider .slider-item.style8 .item-text {
                    padding: 25px;
                }

                .owl-carousel-3 .imagebox.style4 {
                    height: 310px;
                }

                .slider .slider-item.style10 .item-text .header-item h2 {
                    font-size: 50px;
                }

                .header-bottom.style1 .grid-right .top-search.style1 {
                    width: 91%;
                }

                .owl-carousel-4 .imagebox.style4 {
                    text-align: center;
                }

                .slider .slider-item .item-text {
                    width: 100%;
                    padding: 30px !important;
                }

                .owl-carousel-item .product-box.style1:last-child {
                    margin-bottom: 80px;
                }

                .slider .slider-item.style7 .item-text .header-item h2 {
                    margin-top: 0px;
                    margin-bottom: 0px;
                }

                .box-cart.style1.v1 .inner-box .dropdown-box {
                    right: -80px;
                }

                .box-cart.style1.v1 .inner-box .dropdown-box:before {
                    right: 95px;
                }

                .slider .slider-item.style8 .item-text .header-item h2 {
                    line-height: 42px;
                }

                .flat-breadcrumb ul.breadcrumbs li.trail-item {
                    margin-right: 6px;
                }

                .slider .slider-item:before,
                .slider .slider-item.style1:before {
                    right: 20px;
                }

            }

            @media (max-width:320px) {}

            /* Modern glass morphism effect */
            .glass-morphism {
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.18);
                border-radius: 16px;
            }

            /* Scope input groups within glass-morphism modals for perfect alignment */
            .glass-morphism .input-group {
                border-radius: 8px;
                overflow: visible;
                display: flex;
                align-items: stretch;
            }

            .glass-morphism .input-group-text {
                border-top-left-radius: 8px !important;
                border-bottom-left-radius: 8px !important;
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                border: 1px solid #E2E8F0;
                border-right: none;
                background-color: #F8FAFC !important;
                min-width: 48px;
                height: 52px !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .glass-morphism .form-floating {
                flex: 1 1 auto;
                width: 1%;
                height: 52px !important;
            }

            .glass-morphism .form-control {
                border-top-right-radius: 8px !important;
                border-bottom-right-radius: 8px !important;
                border-top-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                border: 1px solid #E2E8F0;
                border-left: none;
                height: 52px !important;
                padding-left: 12px;
                box-shadow: none !important;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .glass-morphism .form-floating>label {
                padding-left: 12px;
                color: #94A3B8;
                transition: all 0.2s ease;
            }

            .glass-morphism .form-floating>.form-control:focus~label,
            .glass-morphism .form-floating>.form-control:not(:placeholder-shown)~label {
                transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
                color: #85c226;
            }

            .glass-morphism .input-group:focus-within {
                box-shadow: 0 0 0 2px rgba(133, 194, 38, 0.2) !important;
                border-radius: 8px;
            }

            .glass-morphism .input-group:focus-within .input-group-text,
            .glass-morphism .input-group:focus-within .form-control {
                border-color: #85c226 !important;
            }

            .glass-morphism .input-group:focus-within .input-group-text svg * {
                stroke: #85c226 !important;
            }

            /* Password requirements styling */
            .glass-morphism #password-requirements {
                background-color: #f8f9fa;
                border-radius: 8px;
                padding: 12px;
                border: 1px solid #e9ecef;
            }

            .glass-morphism #password-requirements ul {
                margin-top: 8px;
                padding-left: 0;
            }

            .glass-morphism #password-requirements li {
                margin-bottom: 6px;
                font-size: 13px;
                color: #495057;
                display: flex;
                align-items: center;
            }

            .glass-morphism .requirement-icon {
                width: 16px;
                display: inline-block;
                text-align: center;
            }

            /* Progress bar styling */
            .glass-morphism .progress {
                background-color: #e9ecef;
                border-radius: 2px;
            }

            .glass-morphism .progress-bar {
                transition: width 0.3s ease, background-color 0.3s ease;
            }

            /* Split layout registration styles */
            .glass-morphism.overflow-hidden {
                border-radius: 16px !important;
            }

            .register-hero-section {
                background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .register-hero-section::before {
                content: '';
                position: absolute;
                top: -20%;
                right: -20%;
                width: 250px;
                height: 250px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 50%;
                pointer-events: none;
            }

            .register-hero-section::after {
                content: '';
                position: absolute;
                bottom: -10%;
                left: -10%;
                width: 150px;
                height: 150px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 50%;
                pointer-events: none;
            }

            .register-hero-section .benefit-item {
                transition: transform 0.2s ease;
            }

            .register-hero-section .benefit-item:hover {
                transform: translateX(5px);
            }

            .register-hero-section .rounded-circle {
                transition: background-color 0.2s ease;
            }

            .register-hero-section .benefit-item:hover .rounded-circle {
                background-color: rgba(255, 255, 255, 0.3) !important;
            }

            .glass-morphism .btn-primary.hover-effect {
                background: linear-gradient(90deg, #85c226 0%, #6fa61d 100%) !important;
                border: none !important;
                color: #ffffff !important;
                transition: all 0.3s ease;
            }

            .glass-morphism .btn-primary.hover-effect:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(133, 194, 38, 0.35) !important;
            }

            /* Button hover effect */
            .hover-effect {
                transition: all 0.3s ease;
                transform: translateY(0);
            }

            .hover-effect:hover {
                transform: translateY(-2px);
                background-color: #85c226 !important;
                border-color: #85c226 !important;
                box-shadow: 0 4px 12px rgba(133, 194, 38, 0.35);
            }

            /* Social buttons */
            .social-btn {
                transition: all 0.2s ease;
                border: 1px solid #E2E8F0;
            }

            .social-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            /* Password toggle button */
            .toggle-password {
                background: transparent;
                border: none;
                cursor: pointer;
            }

            /* Close button */
            .btn-close {
                position: absolute;
                right: 0;
                top: 0;
                padding: 1rem;
                opacity: 0.5;
                transition: opacity 0.2s ease;
            }

            .btn-close:hover {
                opacity: 1;
            }

            .cart-empty-message {
                text-align: center;
                padding: 1.5rem;
                color: #333;
            }

            .empty-cart-icon {
                margin-bottom: 1rem;
                color: #6c757d;
                opacity: 0.7;
            }

            .cart-empty-message h3 {
                font-size: 1.25rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: #212529;
            }

            .text-muted {
                color: #6c757d;
                margin-bottom: 1.5rem;
                font-size: 0.9rem;
            }

            .btn {
                display: inline-block;
                font-weight: 400;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                padding: 0.375rem 0.75rem;
                border-radius: 0.25rem;
                transition: all 0.15s ease;
                text-decoration: none;
            }

            .btn-primary {
                color: #fff;
                background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
                border-color: #5b8716;
                font-weight: 600;
                transition: all 0.3s ease;
                box-shadow: 0 3px 10px rgba(91, 135, 22, 0.25);
            }

            .btn-primary:hover,
            .btn-primary:focus {
                background: linear-gradient(135deg, #4a6f12 0%, #73a820 100%);
                border-color: #4a6f12;
                color: #fff;
                box-shadow: 0 5px 15px rgba(91, 135, 22, 0.4);
                transform: translateY(-1px);
            }

            .btn-outline-primary {
                color: #5b8716;
                border: 1px solid #5b8716;
                background-color: transparent;
                transition: all 0.3s ease;
            }

            .btn-outline-primary:hover {
                background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
                color: #fff;
                border-color: #5b8716;
            }

            .d-flex {
                display: flex;
            }

            .gap-2 {
                gap: 0.5rem;
            }

            .mt-3 {
                margin-top: 1rem;
            }

            .px-4 {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        </style>
        <!--End Quick View popup-->
        <!-- Modal -->
        <div class="modal fade" id="signupmodal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content glass-morphism overflow-hidden border-0">
                    <div class="row g-0">
                        <!-- Left Hero Branding Pane -->
                        <div
                            class="col-lg-5 d-none d-lg-flex flex-column justify-content-between p-4 p-xl-5 text-white register-hero-section">
                            <div>
                                <div class="mb-4 d-inline-block bg-white p-2 rounded"
                                    style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);">
                                    <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                        alt="American Plastics Logo"
                                        style="max-height: 35px; object-fit: contain; display: block;">
                                </div>
                                <h3 class="fw-bold mb-3" style="font-family: 'Montserrat', sans-serif;">Join us today
                                </h3>
                                <p class="text-white-50 small" style="line-height: 1.6;">Create your account to unlock
                                    premium features, fast checkout, order tracking, and exclusive updates.</p>
                            </div>

                            <div class="my-4">
                                <div class="benefit-item d-flex align-items-center mb-3">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Order Customization</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Configure product colors
                                            and styles</small>
                                    </div>
                                </div>
                                <div class="benefit-item d-flex align-items-center mb-3">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Secure Encrypted System</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Your personal data is
                                            fully protected</small>
                                    </div>
                                </div>
                                <div class="benefit-item d-flex align-items-center">
                                    <div class="me-3 d-flex align-items-center justify-content-center rounded-circle"
                                        style="width: 36px; height: 36px; min-width: 36px; background-color: rgba(255, 255, 255, 0.2) !important;">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" class="text-white">
                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                                            <polyline points="22 4 12 14.01 9 11.01" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-600 text-white small">Corporate Benefits</h6>
                                        <small class="text-white-50" style="font-size: 11px;">Hassle-free corporate
                                            invoicing & tax filing</small>
                                    </div>
                                </div>
                            </div>

                            <div class="text-white-50" style="font-size: 11px;">
                                &copy; <?php echo e(date('Y')); ?> American Plastics.
                            </div>
                        </div>

                        <!-- Right Form Pane -->
                        <div class="col-lg-7 p-4 p-md-5 position-relative bg-white bg-opacity-95">
                            <!-- Modern close button -->
                            <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal"
                                aria-label="Close" style="top: 1.5rem; right: 1.5rem; z-index: 1055;"></button>

                            <div class="d-lg-none text-center mb-4">
                                <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>"
                                    alt="American Plastics Logo" style="max-height: 50px; object-fit: contain;">
                            </div>

                            <h2 class="mb-1 fw-700 text-dark"
                                style="font-family: 'Montserrat', sans-serif; font-size: 26px;">Create Account</h2>
                            <p class="text-muted mb-4" style="font-family: 'Montserrat', sans-serif; font-size: 14px;">
                                Fill in details below to start</p>

                            <form id="signup_form" action="<?php echo e(route('american.plastic.user.register')); ?>" method="POST">
                                <?php echo csrf_field(); ?>

                                <!-- Modern input fields with floating labels -->
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21"
                                                stroke="#94A3B8" stroke-width="2" stroke-linecap="round" />
                                            <path
                                                d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1">
                                        <input type="text" class="form-control border-start-0" id="floatingName"
                                            placeholder=" " name="name" required>
                                        <label for="floatingName">Full name</label>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path d="M22 6L12 13L2 6" stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1">
                                        <input type="email" class="form-control border-start-0" id="floatingEmail"
                                            placeholder=" " name="email" required>
                                        <label for="floatingEmail">Email address</label>
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-transparent">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
                                                stroke="#94A3B8" stroke-width="2" />
                                            <path
                                                d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
                                                stroke="#94A3B8" stroke-width="2" />
                                        </svg>
                                    </span>
                                    <div class="form-floating flex-grow-1 position-relative">
                                        <input type="password" class="form-control border-start-0 pe-5"
                                            id="floatingPassword" placeholder=" " name="password"
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                                        <label for="floatingPassword">Password</label>
                                        <button type="button"
                                            class="btn p-1 position-absolute end-0 top-50 translate-middle-y me-2 toggle-password"
                                            style="box-shadow: none; border: none; background: none; z-index: 10;">
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
                                                    stroke="#94A3B8" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                                <path
                                                    d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 9 12 9 12C9 13.6569 10.3431 15 12 15Z"
                                                    stroke="#94A3B8" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Password Requirements - Initially hidden -->
                                <div id="password-requirements" class="mb-3 small" style="display: none; width: 100%;">
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="flex-grow-1">
                                            <div class="progress" style="height: 4px;">
                                                <div id="password-strength-bar" class="progress-bar" role="progressbar"
                                                    style="width: 0%"></div>
                                            </div>
                                        </div>
                                        <span id="password-strength-text" class="ms-2 small"></span>
                                    </div>
                                    <ul class="list-unstyled mb-0 row">
                                        <li class="col-6 d-flex align-items-center req-length">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>8+ characters</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-uppercase">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Uppercase letter</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-lowercase">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Lowercase letter</span>
                                        </li>
                                        <li class="col-6 d-flex align-items-center req-number">
                                            <span class="me-1 requirement-icon">✕</span>
                                            <span>Number</span>
                                        </li>
                                    </ul>
                                </div>

                                <script>
                                    document.getElementById('floatingPassword').addEventListener('input', function () {
                                        const password = this.value;
                                        const requirementsBox = document.getElementById('password-requirements');

                                        // Show/hide requirements box
                                        if (password.length > 0) {
                                            requirementsBox.style.display = 'block';
                                        } else {
                                            requirementsBox.style.display = 'none';
                                            return;
                                        }

                                        const requirements = {
                                            length: password.length >= 8,
                                            uppercase: /[A-Z]/.test(password),
                                            lowercase: /[a-z]/.test(password),
                                            number: /[0-9]/.test(password)
                                        };

                                        // Update requirement indicators
                                        document.querySelectorAll('.requirement-icon').forEach(icon => {
                                            icon.textContent = '✕';
                                            icon.style.color = '#dc3545';
                                        });

                                        let strength = 0;
                                        const totalRequirements = 4;

                                        if (requirements.length) {
                                            document.querySelector('.req-length .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-length .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.uppercase) {
                                            document.querySelector('.req-uppercase .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-uppercase .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.lowercase) {
                                            document.querySelector('.req-lowercase .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-lowercase .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }
                                        if (requirements.number) {
                                            document.querySelector('.req-number .requirement-icon').textContent = '✓';
                                            document.querySelector('.req-number .requirement-icon').style.color = '#28a745';
                                            strength++;
                                        }

                                        // Update strength meter
                                        const percentage = (strength / totalRequirements) * 100;
                                        const strengthBar = document.getElementById('password-strength-bar');
                                        const strengthText = document.getElementById('password-strength-text');

                                        strengthBar.style.width = `${percentage}%`;

                                        if (percentage < 25) {
                                            strengthBar.className = 'progress-bar bg-danger';
                                            strengthText.textContent = 'Weak';
                                            strengthText.style.color = '#dc3545';
                                        } else if (percentage < 75) {
                                            strengthBar.className = 'progress-bar bg-warning';
                                            strengthText.textContent = 'Fair';
                                            strengthText.style.color = '#ffc107';
                                        } else if (percentage < 100) {
                                            strengthBar.className = 'progress-bar bg-info';
                                            strengthText.textContent = 'Good';
                                            strengthText.style.color = '#17a2b8';
                                        } else {
                                            strengthBar.className = 'progress-bar bg-success';
                                            strengthText.textContent = 'Strong';
                                            strengthText.style.color = '#28a745';
                                        }
                                    });
                                </script>

                                <!-- Corporate Customer Checkbox -->
                                <div class="form-check mb-4 ms-1 d-flex align-items-center">
                                    <input class="form-check-input me-2" type="checkbox" name="is_corporate" value="1"
                                        id="isCorporate_sp2"
                                        style="cursor: pointer; width: 18px; height: 18px; margin-top: 0; border: 1.5px solid #ced4da;">
                                    <label class="form-check-label text-muted fw-500 mb-0" for="isCorporate_sp2"
                                        style="cursor: pointer; font-size: 14px; user-select: none; line-height: 1.2;">
                                        Register as Corporate Customer (18% Tax apply for orders)
                                    </label>
                                </div>

                                <!-- Animated submit button -->
                                <button type="submit"
                                    class="btn btn-primary w-100 py-3 rounded-pill shadow-sm hover-effect">
                                    <span class="fw-600">Register</span>
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" class="ms-2">
                                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </button>
                            </form>

                            <div class="text-center text-muted mt-4">
                                Already have an account?
                                <a href="#" class="text-primary fw-600 text-decoration-none" id="signin-link"
                                    style="color: #85c226 !important;">Sign in</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            /* Modern glass morphism effect */
            .glass-morphism {
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.18);
                border-radius: 16px;
            }

            /* Scope input groups within glass-morphism modals for perfect alignment */
            .glass-morphism .input-group {
                border-radius: 8px;
                overflow: visible;
                display: flex;
                align-items: stretch;
            }

            .glass-morphism .input-group-text {
                border-top-left-radius: 8px !important;
                border-bottom-left-radius: 8px !important;
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                border: 1px solid #E2E8F0;
                border-right: none;
                background-color: #F8FAFC !important;
                min-width: 48px;
                height: 52px !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .glass-morphism .form-floating {
                flex: 1 1 auto;
                width: 1%;
                height: 52px !important;
            }

            .glass-morphism .form-control {
                border-top-right-radius: 8px !important;
                border-bottom-right-radius: 8px !important;
                border-top-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                border: 1px solid #E2E8F0;
                border-left: none;
                height: 52px !important;
                padding-left: 12px;
                box-shadow: none !important;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .glass-morphism .form-floating>label {
                padding-left: 12px;
                color: #94A3B8;
                transition: all 0.2s ease;
            }

            .glass-morphism .form-floating>.form-control:focus~label,
            .glass-morphism .form-floating>.form-control:not(:placeholder-shown)~label {
                transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem);
                color: #85c226;
            }

            .glass-morphism .input-group:focus-within {
                box-shadow: 0 0 0 2px rgba(133, 194, 38, 0.2) !important;
                border-radius: 8px;
            }

            .glass-morphism .input-group:focus-within .input-group-text,
            .glass-morphism .input-group:focus-within .form-control {
                border-color: #85c226 !important;
            }

            .glass-morphism .input-group:focus-within .input-group-text svg * {
                stroke: #85c226 !important;
            }

            /* Password requirements styling */
            .glass-morphism #password-requirements {
                background-color: #f8f9fa;
                border-radius: 8px;
                padding: 12px;
                border: 1px solid #e9ecef;
            }

            .glass-morphism #password-requirements ul {
                margin-top: 8px;
                padding-left: 0;
            }

            .glass-morphism #password-requirements li {
                margin-bottom: 6px;
                font-size: 13px;
                color: #495057;
                display: flex;
                align-items: center;
            }

            .glass-morphism .requirement-icon {
                width: 16px;
                display: inline-block;
                text-align: center;
            }

            /* Progress bar styling */
            .glass-morphism .progress {
                background-color: #e9ecef;
                border-radius: 2px;
            }

            .glass-morphism .progress-bar {
                transition: width 0.3s ease, background-color 0.3s ease;
            }

            /* Split layout registration styles */
            .glass-morphism.overflow-hidden {
                border-radius: 16px !important;
            }

            .register-hero-section {
                background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .register-hero-section::before {
                content: '';
                position: absolute;
                top: -20%;
                right: -20%;
                width: 250px;
                height: 250px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 50%;
                pointer-events: none;
            }

            .register-hero-section::after {
                content: '';
                position: absolute;
                bottom: -10%;
                left: -10%;
                width: 150px;
                height: 150px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 50%;
                pointer-events: none;
            }

            .register-hero-section .benefit-item {
                transition: transform 0.2s ease;
            }

            .register-hero-section .benefit-item:hover {
                transform: translateX(5px);
            }

            .register-hero-section .rounded-circle {
                transition: background-color 0.2s ease;
            }

            .register-hero-section .benefit-item:hover .rounded-circle {
                background-color: rgba(255, 255, 255, 0.3) !important;
            }

            .glass-morphism .btn-primary.hover-effect {
                background: linear-gradient(90deg, #85c226 0%, #6fa61d 100%) !important;
                border: none !important;
                color: #ffffff !important;
                transition: all 0.3s ease;
            }

            .glass-morphism .btn-primary.hover-effect:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(133, 194, 38, 0.35) !important;
            }

            /* Button hover effect */
            .hover-effect {
                transition: all 0.3s ease;
                transform: translateY(0);
            }

            .hover-effect:hover {
                transform: translateY(-2px);
                background-color: #85c226 !important;
                border-color: #85c226 !important;
                box-shadow: 0 4px 12px rgba(133, 194, 38, 0.35);
            }

            /* Social buttons */
            .social-btn {
                transition: all 0.2s ease;
                border: 1px solid #E2E8F0;
            }

            .social-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            /* Password toggle button */
            .toggle-password {
                background: transparent;
                border: none;
                cursor: pointer;
            }

            /* Close button */
            .btn-close {
                position: absolute;
                right: 0;
                top: 0;
                padding: 1rem;
                opacity: 0.5;
                transition: opacity 0.2s ease;
            }

            .btn-close:hover {
                opacity: 1;
            }
        </style>

        <script>
            // Password toggle functionality
            document.querySelectorAll('.toggle-password').forEach(button => {
                button.addEventListener('click', function () {
                    const input = this.closest('.form-floating').querySelector('input');
                    const icon = this.querySelector('svg');

                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.innerHTML = `<path d="M12 5C5 5 1 12 1 12C1 12 5 19 12 19C19 19 23 12 23 12C23 12 19 5 12 5Z" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M1 1L23 23" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"/>`;
                    } else {
                        input.type = 'password';
                        icon.innerHTML =
                            `<path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`;
                    }
                });
            });
        </script>

        <div class="modal fade" id="loginmodal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content glass-morphism position-relative">
                    <!-- Modern close button -->
                    <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close"
                        style="top: 1.5rem; right: 1.5rem; z-index: 1055;"></button>

                    <div class="modal-body px-4 px-md-5 pb-4 pb-md-5 pt-4">
                        <!-- Brand logo space -->
                        <div class="text-center mb-4 mt-2">
                            <img src="<?php echo e(asset('assets/images/logo/americanlogo.png')); ?>" alt="American Plastics Logo"
                                style="max-height: 55px; object-fit: contain;">
                        </div>

                        <h2 class="text-center mb-1 fw-600" style="font-family: 'Montserrat', sans-serif;">Sign In</h2>
                        <p class="text-center text-muted mb-4" style="font-family: 'Montserrat', sans-serif;">Hello,
                            Welcome back</p>

                        <form id="login_form">
                            <?php echo csrf_field(); ?>

                            <!-- Modern input fields with floating labels -->


                            <div class="input-group mb-3">
                                <span class="input-group-text bg-transparent">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z"
                                            stroke="#94A3B8" stroke-width="2" />
                                        <path d="M22 6L12 13L2 6" stroke="#94A3B8" stroke-width="2" />
                                    </svg>
                                </span>
                                <div class="form-floating flex-grow-1">
                                    <input type="email" class="form-control border-start-0" id="floatingEmaill"
                                        placeholder=" " name="email" required>
                                    <label for="floatingEmail">Email address</label>
                                </div>
                            </div>

                            <div class="input-group mb-3">
                                <span class="input-group-text bg-transparent">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
                                            stroke="#94A3B8" stroke-width="2" />
                                        <path
                                            d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
                                            stroke="#94A3B8" stroke-width="2" />
                                    </svg>
                                </span>
                                <div class="form-floating flex-grow-1 position-relative">
                                    <input type="password" class="form-control border-start-0 pe-5"
                                        id="floatingPasswordd" placeholder=" " name="password" required>
                                    <label for="floatingPassword">Password</label>

                                </div>

                            </div>
                            <span><a href="<?php echo e(route('forget.password.get')); ?>">Forgot Password?</a></span>
                            <!-- Animated submit button -->
                            <button type="submit"
                                class="btn btn-primary w-100 py-3 mt-2 rounded-pill shadow-sm hover-effect">
                                <span class="fw-500">Sign in</span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" class="ms-2">
                                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </form>

                        <script>
                            // Function to handle form submission
                            $('#login_form').submit(function (event) {
                                // Prevent default form submission
                                event.preventDefault();

                                // Get form data
                                var formData = $(this).serialize();

                                // Send AJAX request
                                $.ajax({
                                    type: 'POST',
                                    url: "<?php echo e(route('american.plastic.user.login')); ?>",
                                    data: formData,
                                    success: function (response) {
                                        // Check if login was successful
                                        if (response.success) {
                                            // Redirect to desired page
                                            window.location.href = "/"; // Replace with your desired URL
                                        } else {
                                            // Handle unsuccessful login (e.g., display error message)
                                            alert("Login failed. Please try again.");
                                        }
                                    },
                                    error: function () {
                                        // Handle AJAX error
                                        toastr.error("Username or password incorrect!", "Error", {
                                            timeOut: 3000,
                                            positionClass: "toast-top-right",
                                            preventDuplicates: true
                                        });
                                    }
                                });
                            });
                        </script>

                        <div class="text-center text-muted">
                            Not a user?
                            <a href="#" class="text-primary fw-500 text-decoration-none" id="signup-link">Sign
                                Up</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('body').on('click', '#loginLink', function () {

                window.location.href = "<?php echo e(route('american.plastic.web')); ?>?show_modal=login_success";
            });
            $('body').on('click', '#signup-link', function () {
                window.location.href = "<?php echo e(route('american.plastic.web')); ?>?show_modal=register_success";
            });
            $('body').on('click', '#signin-link', function () {
                $('#loginmodal').modal('show');
                $('#signupmodal').modal('hide');
            });
        </script>

        <!-- Including Jquery -->

        <script src="<?php echo e(asset('assets/js/vendor/jquery-3.3.1.min.js')); ?>"></script>
        <script src=" <?php echo e(asset('assets/js/vendor/modernizr-3.6.0.min.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/vendor/jquery.cookie.js')); ?>"></script>
        <script src=" <?php echo e(asset('assets/js/vendor/wow.min.js')); ?>"></script>
        <!-- Including Javascript -->
        <script src="<?php echo e(asset('assets/js/bootstrap.min.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/plugins.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/popper.min.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/lazysizes.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/main.js')); ?>"></script>

        <script src="<?php echo e(asset('assets/js/vendor/photoswipe.min.js')); ?>"></script>
        <script src="<?php echo e(asset('assets/js/vendor/photoswipe-ui-default.min.js')); ?>"></script>
        <script>
            $(function () {
                var $pswp = $('.pswp')[0],
                    image = [],
                    getItems = function () {
                        var items = [];
                        $('.lightboximages a').each(function () {
                            var $href = $(this).attr('href'),
                                $size = $(this).data('size').split('x'),
                                item = {
                                    src: $href,
                                    w: $size[0],
                                    h: $size[1]
                                }
                            items.push(item);
                        });
                        return items;
                    }
                var items = getItems();

                $.each(items, function (index, value) {
                    image[index] = new Image();
                    image[index].src = value['src'];
                });
                $('.prlightbox').on('click', function (event) {
                    event.preventDefault();

                    var $index = $(".active-thumb").parent().attr('data-slick-index');
                    $index++;
                    $index = $index - 1;

                    var options = {
                        index: $index,
                        bgOpacity: 0.9,
                        showHideOpacity: true
                    }
                    var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                    lightBox.init();
                });
            });
        </script>
        <!--For Newsletter Popup-->
        <script>
            jQuery(document).ready(function () {
                jQuery('.closepopup').on('click', function () {
                    jQuery('#popup-container').fadeOut();
                    jQuery('#modalOverly').fadeOut();
                });

                var visits = jQuery.cookie('visits') || 0;
                visits++;
                jQuery.cookie('visits', visits, {
                    expires: 1,
                    path: '/'
                });
                console.debug(jQuery.cookie('visits'));
                if (jQuery.cookie('visits') > 1) {
                    jQuery('#modalOverly').hide();
                    jQuery('#popup-container').hide();
                } else {
                    var pageHeight = jQuery(document).height();
                    jQuery('<div id="modalOverly"></div>').insertBefore('body');
                    jQuery('#modalOverly').css("height", pageHeight);
                    jQuery('#popup-container').show();
                }
                if (jQuery.cookie('noShowWelcome')) {
                    jQuery('#popup-container').hide();
                    jQuery('#active-popup').hide();
                }
            });

            jQuery(document).mouseup(function (e) {
                var container = jQuery('#popup-container');
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    container.fadeOut();
                    jQuery('#modalOverly').fadeIn(200);
                    jQuery('#modalOverly').hide();
                }
            });

            var signup = document.getElementById("signup-link").querySelector('a');
            var signin = document.getElementById("signin-link").querySelector('a');
            signup.onclick = function () {
                $('#loginmodal').modal('hide');
                $('#signupmodal').modal('show');
            }
            signin.onclick = function () {
                $('#loginmodal').modal('show');
                $('#signupmodal').modal('hide');
            }
        </script>
        <!--End For Newsletter Popup-->
    </div>
</body>

<!-- belle/index.html   11 Nov 2019 12:20:55 GMT -->

</html><?php /**PATH /home/amerbofz/public_html/resources/views/web/home/products/singleproduct.blade.php ENDPATH**/ ?>