```html
<script>
document.addEventListener('DOMContentLoaded', function () {
    const productListUrl = "https:\/\/babatelecom.in\/product-list";

    function getCheckedValues(selector) {
        return Array.from(document.querySelectorAll(selector + ':checked'))
            .map(function (checkbox) {
                return String(checkbox.value);
            });
    }

    function buildFilterUrl() {
        const params = new URLSearchParams(window.location.search);

        const categoryIds = getCheckedValues('.category-checkbox');
        const subCategoryIds = getCheckedValues('.sub-category-checkbox');

        if (categoryIds.length > 0) {
            params.set('category_id', categoryIds.join(','));
        } else {
            params.delete('category_id');
        }

        if (subCategoryIds.length > 0) {
            params.set('sub_category_id', subCategoryIds.join(','));
        } else {
            params.delete('sub_category_id');
        }

        const propertyValueIds = getCheckedValues('.property-value-checkbox');

        if (propertyValueIds.length > 0) {
            params.set('property_values', propertyValueIds.join(','));
        } else {
            params.delete('property_values');
        }

        const brandIds = getCheckedValues('.brand-checkbox');

        if (brandIds.length > 0) {
            params.set('brands', brandIds.join(','));
        } else {
            params.delete('brands');
        }

        const query = params.toString().replace(/%2C/gi, ',');

        return productListUrl + (query ? '?' + query : '');
    }

    // Category checkbox
    document.querySelectorAll('.category-checkbox').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            const categoryId = String(this.value);

            if (!this.checked) {
                // Uncheck only the subcategories of this category
                document.querySelectorAll('.sub-category-checkbox').forEach(function (subCheckbox) {
                    if (String(subCheckbox.dataset.categoryId) === categoryId) {
                        subCheckbox.checked = false;
                    }
                });
            }

            window.location.href = buildFilterUrl();
        });
    });

    // Subcategory checkbox
    document.querySelectorAll('.sub-category-checkbox').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            const categoryId = String(this.dataset.categoryId);

            if (this.checked) {
                // Automatically check the parent category
                document.querySelectorAll('.category-checkbox').forEach(function (categoryCheckbox) {
                    if (String(categoryCheckbox.value) === categoryId) {
                        categoryCheckbox.checked = true;
                    }
                });
            }

            window.location.href = buildFilterUrl();
        });
    });

    // Property filters
    document.querySelectorAll('.property-value-checkbox').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            window.location.href = buildFilterUrl();
        });
    });

    // Brand filters
    document.querySelectorAll('.brand-checkbox').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            window.location.href = buildFilterUrl();
        });
    });
});
</script>
```

<script>
    document.addEventListener('DOMContentLoaded', function () {

        const sortBy = document.getElementById('SortBy');

        function applySort(sortValue) {
            const params = new URLSearchParams(window.location.search);

            params.set('sortby', sortValue);

            window.location.href = "https://babatelecom.in/product-list?" + params.toString().replace(/%2C/g, ',');
        }

        if (sortBy) {
            sortBy.addEventListener('change', function () {
                applySort(this.value);
            });
        }

        document.querySelectorAll('.pro-li a[data-sort]').forEach(function (link) {
            link.addEventListener('click', function () {
                applySort(this.getAttribute('data-sort'));
            });
        });

    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

        $(document).on('submit', '#dealershipApplicationForm', function (e) {
            e.preventDefault();

            var form = $(this);
            var submitButton = $('#submitDealershipApplication');

            $('.name-error').html('');
            $('.email-error').html('');
            $('.mobile-error').html('');
            $('.comment-error').html('');
            $('.brand_id-error').html('');
            $('#dealership-form-message').html('');

            submitButton.prop('disabled', true).text('Submitting...');

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form.serialize(),
                dataType: 'json',

                success: function (response) {
                    if (response.status === 'success') {
                        form[0].reset();

                        window.location.href = "https://babatelecom.in/thank-you";
                    }
                },

                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON) {
                        var response = xhr.responseJSON;

                        if (response.errors) {
                            $.each(response.errors, function (key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                        } else {
                            $('#dealership-form-message').html(
                                '<div class="alert alert-danger">' +
                                (response.message || 'Please check your details.') +
                                '</div>'
                            );
                        }
                    } else {
                        $('#dealership-form-message').html(
                            '<div class="alert alert-danger">' +
                            'Something went wrong. Please try again.' +
                            '</div>'
                        );
                    }
                },

                complete: function () {
                    submitButton.prop('disabled', false)
                        .text('Submit Application');
                }
            });
        });

    $(document).on('input', '#dealership_mobile', function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 10);
    });

});
</script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- title -->
        <title> Product List | Baba Telecom - Mobile Accessories </title>
        <!-- favicon -->
        <link rel="icon" type="image/x-icon" href="/frontend/img/favicon/favicon2.png">
        <!-- bootstrap css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="/frontend/css/bootstrap-icons.css">
        <!-- magnific-popup css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/magnific-popup.css">
        <!-- fontawesome css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/all.min.css">
        <!--fether css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/feather.css">
        <!-- animate css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/animate.min.css">
        <!-- owl-carousel css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/owl.carousel.min.css">
        <link rel="stylesheet" type="text/css" href="/frontend/css/owl.theme.default.min.css">
        <!-- swiper css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/swiper-bundle.min.css">
        <!-- slick slider css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/slick.css">
        <!-- collection css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/collection.css">
        <!-- blog css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/blog.css">
        <!-- other-pages css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/other-pages.css">
        <!-- product-page css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/product-page.css">
        <!-- style css -->
        <link rel="stylesheet" type="text/css" href="/frontend/css/style9.css">
        <link rel="stylesheet" type="text/css" href="/frontend/css/tcul.css">
    </head>
    <style>
    /* Fixed-height, scrollable categories dropdown */
    #collapse-shop {
        max-height: 450px;
        overflow-y: auto;
        overflow-x: hidden;
    }

   
    /* Optional: style scrollbar */
    #collapse-shop::-webkit-scrollbar {
        width: 6px;
    }

    #collapse-shop::-webkit-scrollbar-thumb {
        background: #4badaf;
        border-radius: 10px;
    }

    #collapse-shop::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .subcategory-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .subcategory-list li {
        margin-bottom: 8px;
    }

    .subcategory-link {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .subcategory-link img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50px;
        flex-shrink: 0;
        border: 1px solid grey;
        padding: 5px
    }

    .subcategory-link span {
        font-size: 16px;
        line-height: 1.4;
        color: #848386;
        font-weight: 500;
    }
    .subcategory-link span:hover {
        color: #4badaf;
    }

    </style>

        <body>
        <!-- popup-wrapper start -->
        <div class="popup-wrapper" id="popup-wrapper">
            <div class="modal fade" id="mymodal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
                            <div class="popup-info">
                                <div class="popup-wrap  popup-image">
                                    <img src="/frontend/img/popup/popup-img.jpg" class="img-fluid" alt="popup-img">
                                </div>
                                <div class="popup-wrap  popup-text-news">
                                    <div class="popup-text">
                                        <h2>Newsletter</h2>
                                        <p>Sign up here to get 20% off on your next purchase, special offers and other discount information.</p>
                                    </div>
                                    <div class="popup-newsletter">
                                        <form  action="https://spacingtech.com/contact#contact_form" method="post" class="contact-form">
                                            <div class="subscribe-block">
                                                <input type="email" placeholder="Enter your mail.. " class="email">
                                                <div class="popup-button">
                                                    <button type="submit" class="btn btn-style popup-btn"><span>Subscribe</span></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- popup-wrapper end -->
        <!-- notification-bar start -->
        <div class="notification-bar">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <ul class="notification-content">
                            <li class="notify-wrap noti-text-wrap">
                                <div class="noti-text">
                                    <p>Welcome to Baba Telecom | Mobile Accessories — Connecting You Everyday!</p>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- notification-bar end -->
        <!-- header start -->
        <header class="main-header" id="stickyheader">
            <div class="header-top-area">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="header-area">
                                <div class="header-element toggler-wrap">
                                    <div class="toggler-wrapper">
                                        <button class="toggler-btn">
                                        <span class="toggler-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="header-element header-logo">
                                    <div class="header-theme-logo">
                                        <a href="https://babatelecom.in" class="theme-logo">
                                            <img src="/frontend/tcul-img/site-logo-1.png" class="img-fluid" alt="logo">
                                        </a>
                                    </div>
                                </div>
                                <div class="header-element header-search">
                                    <div class="side-wrap search-wrap">
                                        <div class="search-crap">
                                            <div class="search-content">
                                               <div class="search-box" style="position: relative;">
                                                    <form action="https://babatelecom.in/product-list" method="get" class="search-bar" id="product-search-form">

                                                        
                                                        
                                                        
                                                        
                                                        
                                                        <div class="form-search">
                                                            <input type="search"
                                                                name="search"
                                                                id="product-search-input"
                                                                value=""
                                                                placeholder="Search Products"
                                                                class="search-input"
                                                                autocomplete="off">

                                                            <button type="submit" class="search-btn">
                                                                <span>Search</span>
                                                            </button>
                                                        </div>

                                                        <div id="product-search-results"
                                                            class="list-group position-absolute w-100 bg-white shadow"
                                                            style="display:none; z-index:9999; top:100%; left:0; max-height:350px; overflow-y:auto;">
                                                        </div>
                                                    </form>
                                                    <div class="search-results"
                                        style="display:none; position:absolute; top:100%; left:0; width:100%; z-index:9999; background:#fff;">
                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="header-element header-icon header-two-icons">
                                    <div class="header-icon-block">
                                        <ul class="shop-element">
                                            <li class="side-wrap wishlist-wrap">
                                                <div class="wishlist-wrapper">
                                                    <a href="javascript:void(0)">
                                                        <span class="wishlist-icon-count">
                                                            <span class="wishlist-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></span>
                                                            <span class="wishlist-count">0</span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="side-wrap cart-wrap">
                                                <div class="cart-wrapper">
                                                    <a href="javascript:void(0)" class="js-cart-drawer">
                                                        <span class="cart-icon-count">
                                                            <span class="cart-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg></span>
                                                            <span class="cart-count">4</span>
                                                        </span>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-bottam start -->
            <div class="header-bottom-area">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="side-wrap search-wrap">
                                <div class="search-crap">
                                    <div class="search-content">
                                        <div class="search-box">
                                            <form action="https://babatelecom.in/product-list" method="get" class="search-bar">

                                                                                                                                                                                                
                                                <div class="form-search">
                                                    <input type="search"
                                                        name="search"
                                                        value=""
                                                        placeholder="Search Products"
                                                        class="search-input">

                                                    <button type="submit" class="search-btn">
                                                        <span>Search</span>
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-menu-area">
                                <div class="main-block">
                                    <nav class="main-navigation navbar-expand-xl">
                                        <div class="navbar-collapse" id="navbarContent">
                                            <!-- categor-menu start -->
                                            <!-- categor-menu end -->
                                            <!-- header-menu start -->
                                            <div class="header-menu">
                                                <a href="#main-collapse" class="header-info collapsed" data-bs-toggle="collapse" aria-expanded="false">
                                                <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                                                <span>Menu</span></a>
                                                <div class="mainmenu-content collapse show" id="main-collapse">
                                                    <div class="main-wrap">
                                                        <ul class="main-menu">
                                                            <li class="menu-link">
                                                                <a href="https://babatelecom.in" class="link-title">
                                                                    <span class="sp-link-title">Home</span>
                                                                </a>
                                                            </li>
                                                            <li class="menu-link">
                                                               <!-- <a href="https://babatelecom.in/product-list" class="link-title">
                                                                    <span class="sp-link-title">Categories
                                                                        <span class="menu-arrow">
                                                                            <i class="fa-solid fa-angle-down"></i>
                                                                        </span>
                                                                    </span>
                                                                </a> -->
                                                                <a href="#colection" class="link-title">
                                                                    <span class="sp-link-title">Categories</span>
                                                                    <span class="menu-arrow">
                                                                        <i class="fa-solid fa-angle-down"></i>
                                                                    </span>
                                                                </a>
                                                               <div class="menu-dropdown menu-banner collapse" id="collapse-shop">
                                                                    <ul class="ul">
                                                                                                                                                                                                                            <li class="menubanner-li">
                                                                                <div class="menubanner-img">

                                                                                    <a href="https://babatelecom.in/product-list" class="collection-title mt-4" style="text-align: left; margin: 0px 0px 10px 10px; ">
                                                                                        <h6><span>Computer Accessories</span></h6>
                                                                                    </a>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=5&amp;category_id=2"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Keyboard">
                                                                                                
                                                                                                <span>Keyboard</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=6&amp;category_id=2"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Mouse">
                                                                                                
                                                                                                <span>Mouse</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=7&amp;category_id=2"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Webcam">
                                                                                                
                                                                                                <span>Webcam</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=8&amp;category_id=2"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Mouse Pad">
                                                                                                
                                                                                                <span>Mouse Pad</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                    </div>
                                                                            </li>
                                                                                                                                                    <li class="menubanner-li">
                                                                                <div class="menubanner-img">

                                                                                    <a href="https://babatelecom.in/product-list" class="collection-title mt-4" style="text-align: left; margin: 0px 0px 10px 10px; ">
                                                                                        <h6><span>Printers &amp; Scanners</span></h6>
                                                                                    </a>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=17&amp;category_id=5"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Inkjet Printer">
                                                                                                
                                                                                                <span>Inkjet Printer</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=18&amp;category_id=5"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Laser Printer">
                                                                                                
                                                                                                <span>Laser Printer</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=19&amp;category_id=5"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Multifunction Printer">
                                                                                                
                                                                                                <span>Multifunction Printer</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=20&amp;category_id=5"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Scanner">
                                                                                                
                                                                                                <span>Scanner</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                    </div>
                                                                            </li>
                                                                                                                                                    <li class="menubanner-li">
                                                                                <div class="menubanner-img">

                                                                                    <a href="https://babatelecom.in/product-list" class="collection-title mt-4" style="text-align: left; margin: 0px 0px 10px 10px; ">
                                                                                        <h6><span>Computers &amp; Laptops</span></h6>
                                                                                    </a>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=9&amp;category_id=3"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Laptops">
                                                                                                
                                                                                                <span>Laptops</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=10&amp;category_id=3"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Gaming Laptops">
                                                                                                
                                                                                                <span>Gaming Laptops</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=11&amp;category_id=3"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Desktop Computers">
                                                                                                
                                                                                                <span>Desktop Computers</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=12&amp;category_id=3"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="All-in-One PC">
                                                                                                
                                                                                                <span>All-in-One PC</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                    </div>
                                                                            </li>
                                                                                                                                                    <li class="menubanner-li">
                                                                                <div class="menubanner-img">

                                                                                    <a href="https://babatelecom.in/product-list" class="collection-title mt-4" style="text-align: left; margin: 0px 0px 10px 10px; ">
                                                                                        <h6><span>Cameras</span></h6>
                                                                                    </a>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=1&amp;category_id=1"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="DSLR Camera">
                                                                                                
                                                                                                <span>DSLR Camera</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=2&amp;category_id=1"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Mirrorless Camera">
                                                                                                
                                                                                                <span>Mirrorless Camera</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=3&amp;category_id=1"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Action Camera">
                                                                                                
                                                                                                <span>Action Camera</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=4&amp;category_id=1"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="CCTV Camera">
                                                                                                
                                                                                                <span>CCTV Camera</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                    </div>
                                                                            </li>
                                                                                                                                                    <li class="menubanner-li">
                                                                                <div class="menubanner-img">

                                                                                    <a href="https://babatelecom.in/product-list" class="collection-title mt-4" style="text-align: left; margin: 0px 0px 10px 10px; ">
                                                                                        <h6><span>Mobile &amp; Tablets</span></h6>
                                                                                    </a>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=13&amp;category_id=4"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Smartphones">
                                                                                                
                                                                                                <span>Smartphones</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=14&amp;category_id=4"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Feature Phones">
                                                                                                
                                                                                                <span>Feature Phones</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=15&amp;category_id=4"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Tablets">
                                                                                                
                                                                                                <span>Tablets</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                        <ul class="subcategory-list">
                                                                                        <li>
                                                                                            <a href="https://babatelecom.in/product-list?sub_category_id=16&amp;category_id=4"
                                                                                            class="subcategory-link">
                                                                                                                                                                                                    <img src="https://babatelecom.in/no-images.jpg"
                                                                                                    class="img-fluid"
                                                                                                    alt="Smart Watches">
                                                                                                
                                                                                                <span>Smart Watches</span>
                                                                                            </a>
                                                                                        </li>
                                                                                    </ul>
                                                                                                                                                                    </div>
                                                                            </li>
                                                                        
                                                                    </ul>
                                                                </div>
                                                            </li>
                                                                                                                            
                                                            <li class="menu-link">
                                                                <a href="https://babatelecom.in/corporate-gifting" class="link-title">
                                                                    <span class="sp-link-title">Corporate Gifting</span>
                                                                </a>
                                                            </li>

                                                            <li class="menu-link">
                                                                <a href="https://babatelecom.in/about-us" class="link-title">
                                                                    <span class="sp-link-title">About Us</span>
                                                                </a>
                                                            </li>
                                                            <li class="menu-link">
                                                                <a href="https://babatelecom.in/contact-us" class="link-title">
                                                                    <span class="sp-link-title">Support</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- header-menu end -->
                                        </div>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header end -->
        <!-- main section start-->

<main>
    <!-- breadcrumb start -->
    <section class="breadcrumb-area">
        <div class="container">
            <div class="col">
                <div class="row">
                    <div class="breadcrumb-index">
                      <h1 class="breadcrumb-heading">All Products</h1>
                        <!-- breadcrumb-list start -->
                        <ul class="breadcrumb-ul">
                            <li class="breadcrumb-li">
                                <a class="breadcrumb-link" href="https://babatelecom.in">Home</a>
                            </li>
                            <li class="breadcrumb-li">
                                <span class="breadcrumb-text">Shop</span>
                            </li>
                        </ul>
                        <!-- breadcrumb-list end -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb end -->
    <!-- collection start -->
      <!-- <h6 data-animate="animate__fadeInUp" class="st-title">Collection left (23)</h6> -->
    <section class="main-content-wrap bg-color shop-page section-ptb">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="pro-grli-wrapper left-side-wrap">
                        <div class="pro-grli-wrap product-grid">
                            <div class="collection-img-wrap">
                                <h6 class="st-title">
                                    Total Products (0)</h6>
                                <!-- collection info start -->
                                <!-- <div class="collection-info">
                                    <div class="collection-image" data-animate="animate__fadeInUp">
                                        <img src="/frontend/tcul-img/sale-banner.png" class="img-fluid" alt="sale-banner">
                                    </div>
                                </div> -->
                                <!-- collection info end -->
                            </div>
                            <!-- shop-top-bar start -->
                            <div class="shop-top-bar wow">
                                <div class="product-filter without-sidebar">
                                    <button class="filter-button" type="button"><i
                                            class="fa-solid fa-filter"></i><span>Filter</span></button>
                                </div>
                                <div class="product-view-mode">
                                    <!-- shop-item-filter-list start -->
                                    <a href="javascript:void(0)" class="list-change-view grid-three active"
                                        data-grid-view="3"><i class="fa-solid fa-border-all"></i></a>
                                    <a href="javascript:void(0)" data-grid-view="1" class="list-change-view list-one"><i
                                            class="fa-solid fa-list"></i></a>
                                    <!-- shop-item-filter-list end -->
                                </div>
                                <!-- product-short start -->
                                <div class="product-short">
                                    <label for="SortBy">Sort by:</label>
                                    <select class="nice-select" name="sortby" id="SortBy">
                                        <option value="title-ascending"
                                            >
                                            Alphabetically, A-Z
                                        </option>

                                        <option value="title-descending"
                                            >
                                            Alphabetically, Z-A
                                        </option>
                                        <option value="created-descending"
                                            >
                                            Date, new to old
                                        </option>
                                        <option value="created-ascending"
                                            >
                                            Date, old to new
                                        </option>
                                    </select>

                                    <a href="javascript:void(0)" class="short-title">
                                        <span class="sort-title">Best Products</span>
                                        <span class="sort-icon"><i class="bi bi-chevron-down"></i></span>
                                    </a>
                                    <a href="javascript:void(0)" class="short-title short-title-lg">
                                        <span class="sort-title">Best Products</span>
                                        <span class="sort-icon"><i class="bi bi-chevron-down"></i></span>
                                    </a>

                                    <ul class="pro-ul collapse">
                                        <li class="pro-li">
                                            <a href="javascript:void(0)" data-sort="title-ascending">
                                                Alphabetically, A-Z
                                            </a>
                                        </li>

                                        <li class="pro-li">
                                            <a href="javascript:void(0)" data-sort="title-descending">
                                                Alphabetically, Z-A
                                            </a>
                                        </li>
                                        <li class="pro-li">
                                            <a href="javascript:void(0)" data-sort="created-descending">
                                                Date, new to old
                                            </a>
                                        </li>

                                        <li class="pro-li">
                                            <a href="javascript:void(0)" data-sort="created-ascending">
                                                Date, old to new
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- product-short end -->
                            </div>
                            <!-- shop-top-bar end -->
                            <!-- Latest-product start -->
                            <div class="special-product grid-3">
                                <div class="collection-category">
                                    <div class="row">
                                        <div class="col">
                                            <div class="collection-wrap">
                                                <ul class="product-view-ul">
                                                    
                                                </ul>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Latest-product end -->
                                                  </div>
                        <div class="pro-grli-wrap product-sidebar">
                            <div class="pro-grid-block">
                                <div class="shop-sidebar-inner">
                                    <div class="shop-sidebar-wrap filter-sidebar">
                                        <!-- button start -->
                                        <button class="close-sidebar" type="button">
                                            <i class="fa-solid fa-xmark"></i>
                                        </button>
                                        <!-- button end -->
                                        <!-- filter-form start -->
                                        <div class="facets">
                                           <form class="facets-form" method="GET" action="https://babatelecom.in/product-list">
                                            <div class="shop-sidebar">
                                                    <h6 class="shop-title">Categories </h6>
                                                    <a href="https://babatelecom.in/product-details#collapse-5" data-bs-toggle="collapse"
                                                        class="shop-title shop-title-lg" data-animate="">
                                                        Categories<i class=""></i>
                                                    </a>
                                                    <div class="collapse show shop-element" id="collapse-5">
                                                        <ul class="brand-ul scrollbar">
                                                                                                                            <li class="cat-checkbox">
                                                                    <label class="checkbox-label">
                                                                      <input type="checkbox" name="category_id"
                                                                            value="1" class="cust-checkbox category-checkbox"
                                                                            >
                                                                        <span class="check-name">Cameras</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                                                                            <li class="cat-checkbox">
                                                                    <label class="checkbox-label">
                                                                      <input type="checkbox" name="category_id"
                                                                            value="2" class="cust-checkbox category-checkbox"
                                                                            >
                                                                        <span class="check-name">Computer Accessories</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                                                                            <li class="cat-checkbox">
                                                                    <label class="checkbox-label">
                                                                      <input type="checkbox" name="category_id"
                                                                            value="3" class="cust-checkbox category-checkbox"
                                                                            >
                                                                        <span class="check-name">Computers &amp; Laptops</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                                                                            <li class="cat-checkbox">
                                                                    <label class="checkbox-label">
                                                                      <input type="checkbox" name="category_id"
                                                                            value="4" class="cust-checkbox category-checkbox"
                                                                            >
                                                                        <span class="check-name">Mobile &amp; Tablets</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                                                                            <li class="cat-checkbox">
                                                                    <label class="checkbox-label">
                                                                      <input type="checkbox" name="category_id"
                                                                            value="5" class="cust-checkbox category-checkbox"
                                                                            >
                                                                        <span class="check-name">Printers &amp; Scanners</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                                                                    </ul>
                                                    </div>
                                                </div>
                                              <div class="shop-sidebar" id="subcategory-filter" style="display: none;">
                                                    <h6 class="shop-title">Sub Categories</h6>

                                                    <a href="https://babatelecom.in/product-details#collapse-5" data-bs-toggle="collapse"
                                                        class="shop-title shop-title-lg" data-animate=""> Categories<i class=""></i>
                                                    </a>
                                                    <div class="collapse show shop-element" id="collapse-5">
                                                        <ul class="brand-ul scrollbar">
                                                            
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                    <!-- Product-Categories end -->
                                                    <!-- <div class="shop-sidebar sidebar-filter">
                                                        <h6 class="shop-title" data-animate="animate__fadeInUp">Filter
                                                        </h6>
                                                        <a href="javascript:void(0)" class="shop-title shop-title-lg"
                                                            data-animate="animate__fadeInUp">Filter</a>
                                                        <div class="filter-info" data-animate="animate__fadeInUp">
                                                            <span class="filter-count-text">23 products</span>
                                                            <span class="loading-spinner"><svg aria-hidden="true"
                                                                    focusable="false" role="presentation"
                                                                    class="spinner" viewBox="0 0 66 66"
                                                                    xmlns="http://www.w3.org/2000/svg">
                                                                    <circle class="path" fill="none" stroke-width="6"
                                                                        cx="33" cy="33" r="30"></circle>
                                                                </svg></span>
                                                        </div>
                                                    </div> -->
                                                    <div class="shop-sidebar sidebar-price">
                                                        <h6 class="shop-title" data-animate="animate__fadeInUp">Price
                                                        </h6>
                                                        <a href="https://babatelecom.in/product-details#collapse-3" data-bs-toggle="collapse"
                                                            class="shop-title shop-title-lg"
                                                            data-animate="animate__fadeInUp">Price</a>
                                                        <div class="filter-info" data-animate="animate__fadeInUp">
                                                            <span class="shop-price">The highest price is $89.00</span>
                                                            <facet-remove><a href="javascript:void(0)"
                                                                    class="reset-text">Reset</a></facet-remove>
                                                        </div>
                                                        <!-- Product-price start -->
                                                        <div class="collapse price-wrap" id="collapse-3">
                                                            <price-range class="price-range">
                                                                <div class="price-range-group group-range">
                                                                    <input type="range" class="range" min="0" max="89"
                                                                        value="0" id="range1">
                                                                    <input type="range" class="range" min="0" max="89"
                                                                        value="89" id="range2">
                                                                </div>
                                                                <div class="price-input-group group-input"
                                                                    data-animate="animate__fadeInUp">
                                                                    <div class="price-range-input input-price">
                                                                        <label class="label-text">From</label>
                                                                        <span class="price-value">$</span>
                                                                        <span id="demo1" class="price-field">0</span>
                                                                    </div>
                                                                    <span class="price-range-delimeter">-</span>
                                                                    <div class="price-range-input input-price">
                                                                        <label class="label-text">To</label>
                                                                        <span class="price-value">$</span>
                                                                        <span id="demo2" class="price-field">89</span>
                                                                    </div>
                                                                </div>
                                                            </price-range>
                                                        </div>
                                                        <!-- Product-price end -->
                                                        <!-- More-filters start -->
                                                        <div class="shop-sidebar sidebar-open">
                                                            <h6 class="shop-title" data-animate="animate__fadeInUp">More
                                                                filters</h6>
                                                            <a href="https://babatelecom.in/product-details#collapse-6"
                                                                data-bs-toggle="collapse"
                                                                class="shop-title shop-title-lg"
                                                                data-animate="animate__fadeInUp">More filters<i
                                                                    class="fa fa-angle-down"></i></a>
                                                            <div class="filter-info" data-animate="animate__fadeInUp">
                                                                <span class="shop-price">0 selected</span>
                                                                <facet-remove>
                                                                    <a href="javascript:void(0)"
                                                                        class="reset-text">Reset</a>
                                                                </facet-remove>
                                                            </div>
                                                            <div class="collapse shop-element shop-flavor"
                                                                id="collapse-6">
                                                                <ul class="brand-ul scrollbar">
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 16gb">
                                                                            <input type="checkbox" value="16gb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Air
                                                                                conditioner</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 32gb">
                                                                            <input type="checkbox" value="32gb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Portable
                                                                                speaker</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 64gb">
                                                                            <input type="checkbox" value="64gb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Wireless
                                                                                earbuds</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 500gb">
                                                                            <input type="checkbox" value="500gb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Ev charging
                                                                                plug</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 1tb">
                                                                            <input type="checkbox" value="1tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">DVD player
                                                                                slot</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 2tb">
                                                                            <input type="checkbox" value="2tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Verse
                                                                                earphones</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Video shoot
                                                                                drone</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Collection
                                                                                right</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Wifro wi-fi
                                                                                camera</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Movie projector
                                                                                S8</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Wireless
                                                                                headphones</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                    <li class="cat-checkbox"
                                                                        data-animate="animate__fadeInUp">
                                                                        <label class="checkbox-label 3tb">
                                                                            <input type="checkbox" value="3tb"
                                                                                class="cust-checkbox">
                                                                            <span class="check-name">Stylish for
                                                                                trimmer</span>
                                                                            <span class="count-check">(12)</span>
                                                                            <span class="cust-check"></span>
                                                                        </label>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <!-- More-filters end -->
                                                    </div>
                                                   <div class="shop-sidebar sidebar-product" id="property-filter" style="display: none;">
                                                        <h6 class="shop-title" >Properties</h6>
                                                        <a href="https://babatelecom.in/product-details#collapse-2" data-bs-toggle="collapse"
                                                            class="shop-title shop-title-lg">Properties</a>
                                                        <div class="collapse filter-element" id="collapse-2">
                                                            <ul class="brand-ul scrollbar">
                                                               
                                                                
                                                            </ul>

                                                        </div>
                                                    </div>
                                                    <div class="shop-sidebar sidebar-wedget sidebar-availability">
                                                        <h6 class="shop-title" data-animate="animate__fadeInUp">
                                                            Availability</h6>
                                                        <a href="https://babatelecom.in/product-details#collapse-1"
                                                            class="shop-title shop-title-lg" data-bs-toggle="collapse"
                                                            data-animate="animate__fadeInUp">Availability</a>
                                                        <div class="filter-info" data-animate="animate__fadeInUp">
                                                            <span class="shop-price no-js-hidden">0 selected</span>
                                                            <facet-remove>
                                                                <a href="javascript:void(0)" class="reset-text">Reset</a>
                                                            </facet-remove>
                                                        </div>
                                                        <div class="collapse filter-element" id="collapse-1"
                                                            data-animate="animate__fadeInUp">
                                                            <ul class="brnad-ul scrollbar">
                                                                <li class="availability">
                                                                    <label
                                                                        class="cust-checkbox-label availability in-stock">
                                                                        <input type="checkbox"
                                                                            name="filter.v.availability" value="1"
                                                                            class="cust-checkbox">
                                                                        <span class="filter-name">In stock</span>
                                                                        <span class="count-check">(23)</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                                <li class="availability">
                                                                    <label
                                                                        class="cust-checkbox-label availability in-stock">
                                                                        <input type="checkbox"
                                                                            name="filter.v.availability" value="1"
                                                                            class="cust-checkbox">
                                                                        <span class="filter-name">Out of stock</span>
                                                                        <span class="count-check">(1)</span>
                                                                        <span class="cust-check"></span>
                                                                    </label>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="shop-sidebar sidebar-wedget">
                                                        <h6 class="shop-title" data-animate="animate__fadeInUp">Brand
                                                        </h6>
                                                        <a href="https://babatelecom.in/product-details#reset" data-bs-toggle="collapse"
                                                            class="shop-title shop-title-lg"
                                                            data-animate="animate__fadeInUp">Brand</a>
                                                        <!-- <div class="filter-info" data-animate="animate__fadeInUp">
                                                            <span class="shop-price no-js-hidden">0 selected</span>
                                                            <facet-remove>
                                                                <a href="javascript:void(0)" class="reset-text">Reset</a>
                                                            </facet-remove>
                                                        </div> -->
                                                        <div class="collapse filter-element" id="reset" data-animate="animate__fadeInUp">
                                                            <ul class="brand-ul scrollbar">
                                                             

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="9"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Globestar
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="2"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Dell
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="3"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                HP
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="4"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Lenovo
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="5"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                One-Plus
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="6"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Samsung
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="7"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Sony
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="8"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                >

                                                                            <span class="filter-name">
                                                                                Xaomi
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                
                                                                    <li class="brand-li">

                                                                        <label class="cust-checkbox-label">

                                                                            <input
                                                                                type="checkbox"
                                                                                name="brands"
                                                                                value="1"
                                                                                class="cust-checkbox brand-checkbox"
                                                                                checked>

                                                                            <span class="filter-name">
                                                                                Apple
                                                                            </span>

                                                                            <span class="cust-check"></span>

                                                                        </label>

                                                                    </li>

                                                                                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- filter-form end -->
                                    </div>
                                </div>
                                <!-- sidebar img start -->
                                <div class="sidebar-banner banner-hover">
                                    <a href="https://babatelecom.in/product-details" class="sidebar-img banner-img">
                                        <span class="sidebar-banner-image" data-animate="animate__fadeInUp">
                                            <img src="/frontend/tcul-img/side-sale-banner.png" class="img-fluid" alt="side-banner">
                                        </span>
                                        <span class="sidebar-banner-icon"><i class="bi bi-arrow-right-short"></i></span>
                                    </a>
                                </div>
                                <!-- sidebar img start -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- collection end -->
</main>

<div class="modal fade" id="dealershipApplicationModal" tabindex="-1" aria-labelledby="dealershipApplicationLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="border-radius: 8px;">
            <div class="modal-header">
                <h5 class="modal-title" id="dealershipApplicationLabel">
                    Apply for Authorised Dealership
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="dealershipApplicationForm" action="https://babatelecom.in/authorise-dealers/store" method="POST">
                <input type="hidden" name="_token" value="w9hFRIfJjgEha6eSJAQfYpLMG6CSq9TTs2V5qAyK">                <div class="modal-body p-4">
                    
                    <input type="hidden" name="brand_id" id="dealership_brand_id">
                    <div id="brand_id-error" class="text-danger mb-2"></div>
                    <div class="row g-4">
                        
                        <div class="col-md-6">
                            <label for="dealership_name" class="form-label fw-bold"> Name </label><span class="text-danger name-error"></span>
                            <input type="text" name="name" id="dealership_name" class="form-control" placeholder="Name" style="height: 54px; font-size: 16px;">
                            <div id="name-error" class="text-danger"></div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="dealership_email" class="form-label fw-bold"> Email address </label>
                            <input type="email" name="email" id="dealership_email"
                                class="form-control" placeholder="Email address" style="height: 54px; font-size: 16px;">
                            <div id="email-error" class="text-danger"></div>
                        </div>
                        
                        <div class="col-12">
                            <label for="dealership_mobile" class="form-label fw-bold">Phone number </label>
                            <input type="tel" name="mobile" id="dealership_mobile" class="form-control" maxlength="10"
                                inputmode="numeric" placeholder="Phone number" style="height: 54px; font-size: 16px;">
                            <div id="mobile-error" class="text-danger"></div>
                        </div>
                        
                        <div class="col-12">
                            <label for="dealership_comment" class="form-label fw-bold">Message</label>
                            <textarea name="comment" id="dealership_comment" class="form-control" rows="7"
                                placeholder="Message" style="font-size: 16px; min-height: 200px; resize: vertical;"></textarea>
                            <div id="comment-error" class="text-danger"></div>
                        </div>
                    </div>
                    <div id="dealership-form-message" class="mt-3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="submitDealershipApplication" class="btn"
                        style="background-color: #4DADAF; color: #fff; padding: 10px 22px;"> Submit Application</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dealershipModal = document.getElementById('dealershipApplicationModal');

        if (!dealershipModal) {
            return;
        }

        const selectedBrand = null;

        dealershipModal.addEventListener('show.bs.modal', function () {
            if (!selectedBrand) {
                document.getElementById('dealership_brand_id').value = '';
                document.getElementById('dealershipBrandName').textContent = '';
                return;
            }

            document.getElementById('dealership_brand_id').value = selectedBrand.id;
            document.getElementById('dealershipBrandName').textContent = selectedBrand.name;
        });
    });
</script>


<!-- main section end-->
                                            
        <!-- footer start -->
        <section class="footer-area section-ptb">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="footer-list">
                            <ul class="footer-ul">
                                <li class="footer-li footer-content-info footer-li-logo" data-animate="animate__fadeInUp">
                                    <div class="footer-content">
                                        <div class="footer-logo">
                                            <a href="https://babatelecom.in" class="theme-logo">
                                                <img src="/frontend/tcul-img/footer-site-logo.png" class="img-fluid" alt="footer-logo">
                                            </a>
                                        </div>
                                        <div class="footer-info">
                                            <p>There are many variations of passages of lorem ipsum available, but the majorited have suffered alteration.</p>
                                        </div>
                                        <div class="footer-social">
                                            <ul class="social-icon">
                                                <!-- facebook-icon start -->
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <span class="icon-social facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></span>
                                                    </a>
                                                </li>
                                                <!-- facebook-icon end -->
                                                <!-- twitter-icon start -->
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <span class="icon-social twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></span>
                                                    </a>
                                                </li>
                                                <!-- twitter-icon end -->
                                                <!-- linkedin-icon start -->
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <span class="icon-social blog-rss"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"></path></svg></span>
                                                    </a>
                                                </li>
                                                <!-- linkedin-icon end -->
                                                <!-- instagram-icon start -->
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <span class="icon-social instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></span>
                                                    </a>
                                                </li>
                                                <!-- instagram-icon end -->
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="footer-li footer-menu" data-animate="animate__fadeInUp">
                                    <ul class="ftlist-ul">
                                        <li class="ftlist-li">
                                            <h6 class="ftlist-title">Information</h6>
                                            <a href="#footer-my-account" class="ftlist-title" data-bs-toggle="collapse" aria-expanded="false">
                                                <span>Information</span>
                                                <span><i class="fa-solid fa-chevron-down"></i></span>
                                            </a>
                                            <ul class="ftlink-ul collapse" id="footer-my-account">
                                                <li class="ftlink-li">
                                                    <a href="https://babatelecom.in/about-us">About us</a>
                                                </li>
                                                <li class="ftlink-li">
                                                    <a href="https://babatelecom.in/contact-us">Contact us</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer-li footer-menu" data-animate="animate__fadeInUp">
                                    <ul class="ftlist-ul">
                                        <li class="ftlist-li">
                                            <h6 class="ftlist-title">Company</h6>
                                            <a href="#footer-extras" class="ftlist-title" data-bs-toggle="collapse" aria-expanded="false">
                                                <span>Company</span>
                                                <span><i class="fa-solid fa-chevron-down"></i></span>
                                            </a>
                                            <ul class="ftlink-ul collapse" id="footer-extras">
                                                <li class="ftlink-li">
                                                    <a href="javascript:void(0)">Privacy policy</a>
                                                </li>
                                                <li class="ftlink-li">
                                                    <a href="javascript:void(0)">Terms &amp; condition</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                              
                                <li class="footer-li footer-menu" data-animate="animate__fadeInUp">
                                    <ul class="ftlist-ul">
                                        <li class="ftlist-li">
                                            <h6 class="ftlist-title">Collections</h6>

                                            <a href="#footer-products" class="ftlist-title"
                                                data-bs-toggle="collapse" aria-expanded="false">
                                                <span>Collections</span>
                                                <span><i class="fa-solid fa-chevron-down"></i></span>
                                            </a>

                                           <ul class="ftlink-ul collapse" id="footer-products">
                                                                                            </ul>
                                        </li>
                                    </ul>
                                </li>


                                <li class="footer-li footer-contact" data-animate="animate__fadeInUp">
                                    <ul class="ftlist-ul">
                                        <li class="ftlist-li">
                                            <h6 class="ftlist-title">Store information</h6>
                                            <a href="#footer-store-information" class="ftlist-title" data-bs-toggle="collapse" aria-expanded="false">
                                                <span>Store information</span>
                                                <span><i class="fa-solid fa-chevron-down"></i></span>
                                            </a>
                                            <ul class="ftcontact-ul collapse" id="footer-store-information">
                                                <li class="ftcontact-li">
                                                    <div class="ft-contact-add ft-contact-place">
                                                        <span class="ft-contact-icon"><i class="fa-solid fa-location-dot"></i></span>
                                                        <span class="ft-contact-address">
                                                            <!-- <span>Baba Telecom</span> -->
                                                            <span>India</span>
                                                        </span>
                                                    </div>
                                                </li>
                                                <li class="ftcontact-li">
                                                    <div class="ft-contact-add">
                                                        <span class="ft-contact-icon"><i class="fa-solid fa-phone"></i></span>
                                                        <a href="" class="ft-contact-address">+91 8007363131</a>
                                                    </div>
                                                </li>
                                                
                                                <li class="ftcontact-li">
                                                    <div class="ft-contact-add">
                                                        <span class="ft-contact-icon"><i class="fa-solid fa-at"></i></span>
                                                        <a href="" class="ft-contact-address">support@babatelecom.in</a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- footer end -->
        <!-- footer-copyright start -->
        <footer class="ft-copyright-area bt">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="ft-copyright">
                            <ul class="ft-copryright-ul">
                                <li class="ft-copryright-li ft-copyright-text">
                                    <p>Copyright 2026 Baba Telecom</p>
                                </li>
                                <!-- <li class="ft-copryright-li ft-payment">
                                    <ul class="payment-icon">
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-1.jpg" class="img-fluid" alt="pay1">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-2.jpg" class="img-fluid" alt="pay2">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-3.jpg" class="img-fluid" alt="pay3">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-4.jpg" class="img-fluid" alt="pay4">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-5.jpg" class="img-fluid" alt="pay5">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="/frontend/img/payment/pay-6.jpg" class="img-fluid" alt="pay6">
                                            </a>
                                        </li>
                                    </ul>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-copyright end -->
        <!-- mobile-menu start -->
        <div class="mobile-menu" id="mobile-menu">
            <div class="box-header">
                <button class="close-box" type="button"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="navbar-collapse">
                <!-- categor-menu start -->
                <div class="categor-menu">
                    <a href="#categor-collapse" class="cate-info collapsed" data-bs-toggle="collapse" aria-expanded="false">
                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                    <span>Top Categories</span></a>
                    <div class="catwrap collapse" id="categor-collapse">
                        <ul class="main-menu">
                            <li class="menu-link">
                                <a href="javascript:void(0)" class="link-title link-title-lg">
                                    <img src="/frontend/img/cat/cat-icon2.png" class="img-fluid" alt="Smartphone">
                                    <span class="sp-link-title">Headphones</span>
                                </a>
                            </li>
                            <li class="menu-link">
                                <a href="javascript:void(0)" class="link-title link-title-lg">
                                    <img src="/frontend/img/cat/cat-icon2.png" class="img-fluid" alt="Smartphone">
                                    <span class="sp-link-title">Earphones</span>
                                </a>
                            </li>
                            <li class="menu-link">
                                <a href="javascript:void(0)" class="link-title link-title-lg">
                                    <img src="/frontend/img/cat/cat-icon11.png" class="img-fluid" alt="Computer">
                                    <span class="sp-link-title">Mobile Covers</span>
                                </a>
                            </li>
                            <li class="menu-link">
                                <a href="javascript:void(0)" class="link-title link-title-lg">
                                    <img src="/frontend/img/cat/cat-icon11.png" class="img-fluid" alt="Computer">
                                    <span class="sp-link-title">Bluetooth</span>
                                </a>
                            </li>
                            <li class="menu-link">
                                <a href="javascript:void(0)" class="link-title link-title-lg">
                                    <img src="/frontend/img/cat/cat-icon11.png" class="img-fluid" alt="Computer">
                                    <span class="sp-link-title">Smartwatch</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- categor-menu end -->
                <!-- header-menu start -->
                <div class="header-menu">
                    <a href="#main-collapse" class="header-info collapsed" data-bs-toggle="collapse" aria-expanded="false">
                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                    <span>Menu</span></a>
                    <div class="mainmenu-content collapse show" id="main-collapse">
                        <div class="main-wrap">
                            <ul class="main-menu">
                                <li class="menu-link">
                                    <a href="https://babatelecom.in" data-bs-toggle="collapse" class="link-title link-title-lg">
                                        <span class="sp-link-title">Home</span>
                                    </a>
                                </li>
                                <li class="menu-link">
                                    <a href="https://babatelecom.in/product-list#collapse-shop" data-bs-toggle="collapse" class="link-title link-title-lg">
                                        <span class="sp-link-title">Products</span>
                                        <span class="menu-arrow"><i class="fa-solid fa-angle-down"></i></span>
                                    </a>
                                    <div class="menu-dropdown menu-banner collapse" id="collapse-shop">
                                        <ul class="ul">
                                            <li class="menubanner-li">
                                                <div class="menubanner-img">
                                                    <a href="https://babatelecom.in/product-list" class="banner-img">
                                                        <img src="/frontend/img/menu/home2-menu1.jpg"  class="img-fluid" alt="menu-banner1">
                                                    </a>
                                                    <a href="https://babatelecom.in/product-list" class="collection-title">
                                                        <span>Earphones</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="menubanner-li">
                                                <div class="menubanner-img">
                                                    <a href="https://babatelecom.in/product-list" class="banner-img">
                                                        <img src="/frontend/img/menu/home2-menu2.jpg" class="img-fluid" alt="menu-banner2">
                                                    </a>
                                                    <a href="https://babatelecom.in/product-list" class="collection-title">
                                                        <span>Electronic</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="menubanner-li">
                                                <div class="menubanner-img">
                                                    <a href="https://babatelecom.in/product-list" class="banner-img">
                                                        <img src="/frontend/img/menu/home2-menu3.jpg" class="img-fluid" alt="menu-banner3">
                                                    </a>
                                                    <a href="https://babatelecom.in/product-list" class="collection-title">
                                                        <span>Headphones</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li class="menubanner-li">
                                                <div class="menubanner-img">
                                                    <a href="https://babatelecom.in/product-list" class="banner-img">
                                                        <img src="/frontend/img/menu/home2-menu4.jpg" class="img-fluid" alt="menu-banner4">
                                                    </a>
                                                    <a href="https://babatelecom.in/product-list" class="collection-title">
                                                        <span>Speakers</span>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="menu-link">
                                    <a href="#colection" data-bs-toggle="collapse" class="link-title link-title-lg">
                                        <span class="sp-link-title">Collection</span>
                                        <span class="menu-arrow"><i class="fa-solid fa-angle-down"></i></span>
                                    </a>
                                    <div class="menu-dropdown menu-mega collapse" id="colection">
                                        <ul class="ul container p-0">
                                            <li class="menumega-li">
                                                <a href="#accessories" class="menumega-title" data-bs-toggle="collapse" aria-expanded="false">
                                                    <span class="sp-link-title">Accessories</span>
                                                    <span class="menu-arrow"><i class="fa-solid fa-angle-down"></i></span>
                                                </a>
                                                <div class="menumegasup-dropdown collapse" id="accessories">
                                                    <ul class="menumegasup-ul">
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Camera</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Bluetooth</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Headphone</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Cover</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Boat</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Watch</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="menumega-li">
                                                <a href="#computer" class="menumega-title" data-bs-toggle="collapse" aria-expanded="false">
                                                    <span class="sp-link-title">Computer</span>
                                                    <span class="menu-arrow"><i class="fa-solid fa-angle-down"></i></span>
                                                </a>
                                                <div class="menumegasup-dropdown collapse" id="computer">
                                                    <ul class="menumegasup-ul">
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">HP</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Dell</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Lenovo</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Macbook</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Acer</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="menumega-li">
                                                <a href="#smartphone" class="menumega-title" data-bs-toggle="collapse" aria-expanded="false">
                                                    <span class="sp-link-title">Smartphone</span>
                                                    <span class="menu-arrow"><i class="fa-solid fa-angle-down"></i></span>
                                                </a>
                                                <div class="menumegasup-dropdown collapse" id="smartphone">
                                                    <ul class="menumegasup-ul">
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Apple</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Nokia</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Realme</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Samsung</span>
                                                            </a>
                                                        </li>
                                                        <li class="menumegasup-li">
                                                            <a href="https://babatelecom.in/product-list" class="menumegasup-title">
                                                                <span class="sp-link-title">Redmi</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="menumega-li shop-banner-li">
                                                <div class="shop-banner">
                                                    <a href="https://babatelecom.in/product-list">
                                                        <img src="/frontend/img/menu/collectione-banner.jpg" class="img-fluid" alt="collectione-banner">
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="menu-link">
                                    <a href="https://babatelecom.in/about-us" class="link-title link-title-lg">
                                        <span class="sp-link-title">About Us</span>
                                    </a>    
                                </li>
                                <li class="menu-link">
                                    <a href="https://babatelecom.in/contact-us" class="link-title link-title-lg">
                                        <span class="sp-link-title">Contact Us</span>
                                    </a>    
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- header-menu end -->
            </div>
        </div>
        <!-- mobile-menu start -->
        <!-- search-modal start -->
        <div class="search-modal modal fade" id="searchmodal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="search-content">
                                        <div class="search-box">
                                            <button type="button" class="search-close" data-bs-dismiss="modal"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span></button>
                                            <form action="https://spacingtech.com/search" method="get" class="search-bar">
                                                <div class="form-search">
                                                    <input type="search" name="q" placeholder="Search here" onclick="location.href=''" class="search-input">
                                                    <button type="submit" class="search-btn"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span></button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- search-modal end -->
        <!-- cart-drawer start -->
        <div class="cart-drawer" id="cart-drawer">
            <form action="#" method="post" class="drawer-contents">
                <div class="drawer-fixed-header">
                    <div class="drawer-header">
                        <h6 class="drawer-header-title">Cart</h6>
                        <div class="drawer-close">
                            <button type="button" class="drawer-close-btn"><span class="drawer-close-icon"><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span></button>
                        </div>
                    </div>
                </div>
                <div class="drawer-cart-empty">
                    <div class="drawer-scrollable">
                        <h2>Your cart is currently empty</h2>
                        <a href="javascript:void(0)" class="btn btn-style2">Continue shopping</a>
                    </div>
                </div>
                <div class="drawer-inner">
                    <div class="drawer-scrollable">
                        <ul class="cart-items">
                            <li class="cart-item">
                                <div class="cart-item-info">
                                    <div class="cart-item-image">
                                        <a href="javascript:void(0)">
                                            <img src="/frontend/img/cart/mini-cart5.jpg" class="img-fluid" alt="cart-1">
                                        </a>
                                    </div>
                                    <div class="cart-item-details">
                                        <div class="cart-item-sub">
                                            <div class="cart-item-name">
                                                <a href="javascript:void(0)">Headphone</a>
                                            </div>
                                            <div class="cart-item-price">
                                                <span class="cart-price">$250.00</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Color:</h6>
                                                <span>Black</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Size:</h6>
                                                <span>XL</span>
                                            </div>
                                        </div>
                                        <div class="cart-qty-price-remove">
                                            <div class="cart-item-qty">
                                                <div class="js-qty-wrapper">
                                                    <div class="js-qty-wrap">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-minus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                        <input type="text" class="js-qty-num" name="name" value="1" pattern="[0-9]*">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-plus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-item-remove">
                                                <button type="button" class="cart-remove text-danger"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="cart-item">
                                <div class="cart-item-info">
                                    <div class="cart-item-image">
                                        <a href="javascript:void(0)">
                                            <img src="/frontend/img/cart/mini-cart6.jpg" class="img-fluid" alt="cart-2">
                                        </a>
                                    </div>
                                    <div class="cart-item-details">
                                        <div class="cart-item-sub">
                                            <div class="cart-item-name">
                                                <a href="javascript:void(0)">Earbuds</a>
                                            </div>
                                            <div class="cart-item-price">
                                                <span class="cart-price">$190.00</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Color:</h6>
                                                <span>Black</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Size:</h6>
                                                <span>XL</span>
                                            </div>
                                        </div>
                                        <div class="cart-qty-price-remove">
                                            <div class="cart-item-qty">
                                                <div class="js-qty-wrapper">
                                                    <div class="js-qty-wrap">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-minus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                        <input type="text" class="js-qty-num" name="name" value="1" pattern="[0-9]*">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-plus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-item-remove">
                                                <button type="button" class="cart-remove text-danger"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="cart-item">
                                <div class="cart-item-info">
                                    <div class="cart-item-image">
                                        <a href="javascript:void(0)">
                                            <img src="/frontend/img/cart/mini-cart3.jpg" class="img-fluid" alt="cart-3">
                                        </a>
                                    </div>
                                    <div class="cart-item-details">
                                        <div class="cart-item-sub">
                                            <div class="cart-item-name">
                                                <a href="javascript:void(0)">Watch</a>
                                            </div>
                                            <div class="cart-item-price">
                                                <span class="cart-price">$220.00</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Color:</h6>
                                                <span>Black</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Size:</h6>
                                                <span>XL</span>
                                            </div>
                                        </div>
                                        <div class="cart-qty-price-remove">
                                            <div class="cart-item-qty">
                                                <div class="js-qty-wrapper">
                                                    <div class="js-qty-wrap">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-minus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                        <input type="text" class="js-qty-num" name="name" value="1" pattern="[0-9]*">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-plus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-item-remove">
                                                <button type="button" class="cart-remove text-danger"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="cart-item">
                                <div class="cart-item-info">
                                    <div class="cart-item-image">
                                        <a href="javascript:void(0)">
                                            <img src="/frontend/img/cart/mini-cart9.jpg" class="img-fluid" alt="cart-4">
                                        </a>
                                    </div>
                                    <div class="cart-item-details">
                                        <div class="cart-item-sub">
                                            <div class="cart-item-name">
                                                <a href="javascript:void(0)">Cemera</a>
                                            </div>
                                            <div class="cart-item-price">
                                                <span class="cart-price">$250.00</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Color:</h6>
                                                <span>Black</span>
                                            </div>
                                            <div class="cart-item-variants">
                                                <h6>Size:</h6>
                                                <span>XL</span>
                                            </div>
                                        </div>
                                        <div class="cart-qty-price-remove">
                                            <div class="cart-item-qty">
                                                <div class="js-qty-wrapper">
                                                    <div class="js-qty-wrap">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-minus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                        <input type="text" class="js-qty-num" name="name" value="1" pattern="[0-9]*">
                                                        <button type="button" class="js-qty-adjust ju-qty-adjust-plus"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-item-remove">
                                                <button type="button" class="cart-remove text-danger"><span><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="drawer-notes">
                            <label for="cartnote">Order note</label>
                            <textarea name="note" class="cart-notes" id="cartnote"></textarea>
                        </div>
                    </div>
                    <div class="drawer-footer">
                        <div class="drawer-total">
                            <span class="drawer-subtotal">Subtotal</span>
                            <span class="drawer-totalprice">$880.00</span>
                        </div>
                        <div class="drawer-ship-text">
                            <span>Shipping, taxes, and discount codes calculated at checkout</span>
                        </div>
                        <div class="drawer-cart-checkout">
                            <div class="cart-checkout-btn">
                                <button type="button" onclick="location. href=''" class="btn btn-style">Checkout</button>
                                <button type="button" onclick="location. href=''" class="btn btn-style2">View cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- cart-drawer end -->
        <!-- quickview modal start -->
        <div class="productmodal">
            <div class="modal fade" id="quickview">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-quickview">Quickview</h6>
                            <button type="button" class="close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
                        </div>
                        <div class="modal-body">
                            <!-- quickview-sliderstart -->
                            <div class="quickview-slider">
                                <div class="swiper gallery-top">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p8.jpg" class="img-fluid" alt="p-1"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p9.jpg" class="img-fluid" alt="p-2"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p10.jpg" class="img-fluid" alt="p-3"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p11.jpg" class="img-fluid" alt="p-4"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p12.jpg" class="img-fluid" alt="p-5"></a>
                                        </div>
                                    </div>
                                    <div class="swiper-button">
                                        <button class="quick-prev"><i class="fas fa-chevron-left"></i></button>
                                        <button class="quick-next"><i class="fas fa-chevron-right"></i></button>
                                    </div>
                                </div>
                                <div class="swiper gallery-thumbs">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p8.jpg" class="img-fluid" alt="p-1"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p9.jpg" class="img-fluid" alt="p-2"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p10.jpg" class="img-fluid" alt="p-3"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p11.jpg" class="img-fluid" alt="p-4"></a>
                                        </div>
                                        <div class="swiper-slide">
                                            <a href="javascript:void(0)"><img src="/frontend/img/product/home2-p12.jpg" class="img-fluid" alt="p-5"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- quickview-slider end -->
                            <!-- quick-view-content start -->
                            <div class="quick-view-content">
                                <div class="pro-nprist">
                                    <!-- product-title start -->
                                    <div class="product-title">
                                        <span>Electon-store</span>
                                        <h6>Boat</h6>
                                    </div>
                                    <!-- product-title end -->
                                    <!-- product-price start -->
                                    <div class="product-price">
                                        <div class="pro-price-box">
                                            <span class="new-price">$237.00</span>
                                            <span class="old-price">$250.00</span>
                                        </div>
                                    </div>
                                    <!-- product-price end -->
                                    <!-- product-rating start -->
                                    <div class="product-ratting">
                                        <span class="pro-ratting">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="far fa-star"></i>
                                        </span>
                                    </div>
                                    <!-- product-rating end -->
                                    <!-- product-desc start -->
                                    <div class="product-desc">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magn</p>
                                    </div>
                                    <!-- product-desc end -->
                                    <form id="add-item-qv" action="" method="post">
                                        <div class="quick-view-select">
                                            <div class="quick-view-text">
                                                <div class="selector-wrapper">
                                                    <label>Size:</label>
                                                    <select data-option="option1" id="product-size">
                                                        <option value="2tb">2tb</option>
                                                        <option value="3tb">3tb</option>
                                                        <option value="4tb">4tb</option>
                                                    </select>
                                                </div>
                                                <div class="selector-wrapper">
                                                    <label>Color:</label>
                                                    <select class="single-option-selector" data-option="option2" id="product-color">
                                                        <option value="black">black</option>
                                                        <option value="gray">gray</option>
                                                        <option value="brown">brown</option>
                                                    </select>
                                                </div>
                                                <div class="selector-wrapper">
                                                    <div class="pro-qty-wrap">
                                                        <h6>Quantity:</h6>
                                                        <div class="product-quantity">
                                                            <div class="cart-plus-minus">
                                                                <button class="dec qtybutton minus"><i class="fa-solid fa-minus"></i></button>
                                                                <input value="1" type="text" name="quantity" pattern="[0-9]*">
                                                                <button class="inc qtybutton plus"><i class="fa-solid fa-plus"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="quickview-buttons">
                                            <button type="button" onclick="location.href='javascript:void(0)'" class="btn btn-style">Add to cart</button>
                                            <a href="javascript:void(0)" class="btn btn-style">
                                                <span class="icon"><i class="fa-regular fa-heart"></i></span>
                                                <span>Add to wishlist</span>
                                            </a>
                                        </div> -->
                                    </form>
                                    <!-- product-title end -->
                                </div>
                            </div>
                            <!-- quick-view-content end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- quickview modal end -->
        <!-- bg-scren start -->
        <div class="bg-screen"></div>
        <!-- bg-scren end -->
        <!-- bottom-menu start -->
        <div class="bottom-menu">
            <ul class="bottom-menu-element">
                <li class="bottom-menu-wrap">
                    <div class="bottom-menu-wrapper">
                        <a href="https://babatelecom.in" class="bottom-menu-home">
                            <span class="bottom-menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></span>
                            <span class="bottom-menu-title">Home</span>
                        </a>
                    </div>
                </li>
                <li class="bottom-menu-wrap">
                    <div class="bottom-menu-wrapper">
                        <a href="javascript:void(0)" class="bottom-menu-user">
                            <span class="bottom-menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
                            <span class="bottom-menu-title">Account</span>
                        </a>
                    </div>
                </li>
                <li class="bottom-menu-wrap">
                    <div class="bottom-menu-wrapper">
                        <a href="" class="bottom-menu-collection">
                            <span class="bottom-menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></span>
                            <span class="bottom-menu-title">Products</span>
                        </a>
                    </div>
                </li>
                <li class="bottom-menu-wrap">
                    <div class="bottom-menu-wrapper">
                        <a href="https://babatelecom.in#searchmodal" data-bs-toggle="modal" class="bottom-menu-search">
                            <span class="bottom-menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span>
                            <span class="bottom-menu-title">search</span>
                        </a>
                    </div>
                </li>
                <li class="bottom-menu-wrap">
                    <div class="bottom-menu-wrapper">
                        <a href="javascript:void(0)" class="bottom-menu-wishlist">
                            <span class="bottom-menu-icon-wrap">
                                <span class="bottom-menu-icon"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></span>
                                <span class="bottom-menu-counter wishlist-counter">0</span>
                            </span>
                            <span class="bottom-menu-title">Wishlist</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- bottom-menu end -->
        <!-- jquery js -->
        <script src="/frontend/js/jquery-3.6.3.min.js"></script>
        <!-- bootstrap js -->
        <script src="/frontend/js/popper.min.js"></script>
        <script src="/frontend/js/bootstrap.min.js"></script>
        <!-- magnific-popup js -->
        <script src="/frontend/js/jquery.magnific-popup.min.js"></script>
        <!-- owl-carousel js -->
        <script src="/frontend/js/owl.carousel.min.js"></script>
        <!-- swiper-slider js -->
        <script src="/frontend/js/swiper-bundle.min.js"></script>
        <!-- slick js -->
        <script src="/frontend/js/slick.min.js"></script>
        <!-- waypoints js -->
        <script src="/frontend/js/waypoints.min.js"></script>
        <!-- counter js -->
        <script src="/frontend/js/counter.js"></script>
        <!-- foo-typewriter js -->
        <script src="/frontend/js/typewriter.js"></script>
        <!-- main js -->
        <script src="/frontend/js/main.js"></script>
    </body>
</html>
<script>

$(document).ready(function () {
    $('.search-box').each(function () {
        let box = $(this);
        let input = box.find('input[name="search"]');
        let results = box.find('.search-results');
        let timer;
        let request;
        if (!input.length || !results.length) {
            return;
        }
        input.on('input', function () {
            clearTimeout(timer);
            if (request) {
                request.abort();
            }
            let search = $.trim(input.val());
            if (search.length < 2) {
                results.empty().hide();
                return;
            }
            timer = setTimeout(function () {
                request = $.ajax({
                    url: "https://babatelecom.in/product-list",
                    type: "GET",
                    data: {
                        search: search
                    },
                    dataType: "json",
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function (data) {
                        results.empty();
                        function addItems(items, type) {
                            if (!Array.isArray(items)) {
                                return;
                            }
                            $.each(items, function (index, item) {
                                let link;
                                if (type === 'products') {
                                    link = "https://babatelecom.in/product-details" +
                                        '?product_id=' + encodeURIComponent(item.id);
                                } else if (type === 'brands') {
                                    link = "https://babatelecom.in/product-list" +
                                        '?brands=' + encodeURIComponent(item.id);
                                }  else if (type === 'subCategories') {
                                    link = "https://babatelecom.in/product-list" +
                                        '?category_id=' + encodeURIComponent(item.category_id) +
                                        '&sub_category_id=' + encodeURIComponent(item.id);
                                }
                                else  {
                                    link = "https://babatelecom.in/product-list" +
                                        '?category_id=' + encodeURIComponent(item.id);
                                }
                                let row = $('<a>')
                                    .attr('href', link)
                                    .attr('style', 'display:flex;align-items:center;gap:5px;padding:5px 10px;color:#222;text-decoration:none;border-bottom:1px solid #eee;background:#fff;min-height:42px;');
                                if (item.photo) {
                                    $('<img>')
                                        .attr({
                                            src: "https://babatelecom.in/storage/" + item.photo,
                                            alt: item.name
                                        })
                                        .attr('style', 'width:30px;height:30px;object-fit:contain;flex-shrink:0;')
                                        .on('error', function () {
                                            $(this).hide();
                                        })
                                        .appendTo(row);
                                }

                               $('<span>')
                                .text(item.name)
                                .attr('style', 'font-size:13px;font-weight:500;line-height:1.2;margin:0;padding:0;')
                                .appendTo(row);

                                row.appendTo(results);
                            });
                        }

                        // Show all results in one common list
                        addItems(data.products, 'products');
                        addItems(data.brands, 'brands');
                        addItems(data.categories, 'categories');
                        addItems(data.subCategories,'subCategories');

                        if (results.children().length > 0) {
                            results.show();
                        } else {
                            results.hide();
                        }
                    },

                    error: function (xhr, status) {
                        if (status !== 'abort') {
                            results.empty().hide();
                            console.error(
                                'Live search failed:',
                                xhr.responseText
                            );
                        }
                    }
                });

            }, 300);
        });

        // Hide results when clicking outside
        $(document).on('click', function (event) {
            if (!box.is(event.target) &&
                box.has(event.target).length === 0) {
                results.hide();
            }
        });

    });

});


</script>