<?php include("header.php") ?>

<style>
    /* jssor slider loading skin spin css */
    .jssorl-009-spin img {
        animation-name: jssorl-009-spin;
        animation-duration: 1.6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @media screen and (max-width:992px) {
        .wthree_banner_bottom_left img {
            display: none;
        }

    }

    @keyframes jssorl-009-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto;
        top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
    </div>

    <!-- Slides Container -->
    <div u="slides" style="position: absolute; left: -1px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
        <div>
            <img data-u="image" src="images/banner/banner1.jpg" />
        </div>
        <div>
            <img data-u="image" src="images/banner/banner2.jpg" />
        </div>
        <div>
            <img data-u="image" src="images/banner/banner1.jpg" />
        </div>
    </div>

    <!--#region Bullet Navigator Skin Begin -->
    <!-- Help: https://www.jssor.com/development/slider-with-bullet-navigator.html -->
    <style>
        .jssorb031 {
            position: absolute;
        }

        .jssorb031 .i {
            position: absolute;
            cursor: pointer;
        }

        .jssorb031 .i .b {
            fill: #000;
            fill-opacity: 0.5;
            stroke: #fff;
            stroke-width: 1200;
            stroke-miterlimit: 10;
            stroke-opacity: 0.3;
        }

        .jssorb031 .i:hover .b {
            fill: #fff;
            fill-opacity: .7;
            stroke: #000;
            stroke-opacity: .5;
        }

        .jssorb031 .iav .b {
            fill: #fff;
            stroke: #000;
            fill-opacity: 1;
        }

        .jssorb031 .i.idn {
            opacity: .3;
        }
    </style>
    <div data-u="navigator" class="jssorb031" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
        <div data-u="prototype" class="i" style="width:16px;height:16px;">
            <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <circle class="b" cx="8000" cy="8000" r="5800"></circle>
            </svg>
        </div>
    </div>
    <!--#endregion Bullet Navigator Skin End -->

    <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: https://www.jssor.com/development/slider-with-arrow-navigator.html -->
    <style>
        .jssora051 {
            display: block;
            position: absolute;
            cursor: pointer;
        }

        .jssora051 .a {
            fill: none;
            stroke: #fff;
            stroke-width: 360;
            stroke-miterlimit: 10;
        }

        .jssora051:hover {
            opacity: .8;
        }

        .jssora051.jssora051dn {
            opacity: .5;
        }

        .jssora051.jssora051ds {
            opacity: .3;
            pointer-events: none;
        }
    </style>
    <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
        <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
        </svg>
    </div>
    <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
        <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
        </svg>
    </div>
    <!--#endregion Arrow Navigator Skin End -->

    <a style="display: none" href="https://www.jssor.com">Bootstrap Carousel</a>
</div>
<!-- Jssor Slider End -->



<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<script>
    jQuery(document).ready(function($) {

        var options = {
            $FillMode: 2, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $AutoPlay: 1, //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
            $Idle: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $ArrowKeyNavigation: 1, //[Optional] Steps to go for each navigation request by pressing arrow key, default value is 1.
            $SlideEasing: $Jease$.$OutQuint, //[Optional] Specifies easing for right to left animation, default value is $Jease$.$OutQuad
            $SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide, default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
            $Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)

            $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
                $Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 8, //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 8, //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                $Scale: false //Scales bullets navigator or not while slider scale
            },

            $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var bodyWidth = document.body.clientWidth;
            if (bodyWidth)
                jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
            else
                window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>





<!-- Home Section 1 Start -->
<!-- <div class="h-section1">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2"></div>
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p>

            </div>
        </div>

        <div class="row">
            <div class="part2">
                <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"></div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                    <div class="h-img1">
                        <img src="images/h-img1.png" alt="" title="" />
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="part2">
                        <h1> New Round Neck T-Shirts </h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                        <div class="team-bottom2"><a href="products.php">Shop Now</a></div>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div> -->
<!-- Home Section 1 End -->




<!-- H-Section 2 Start  -->
<!-- <div class="banner-bottom h-section2">
    <div class="">
        <div class="col-md-5 wthree_banner_bottom_left">
            <div class="video-img">
                <img src="images/h-img2.png" alt="" title="" />
            </div>

        </div>
        <div class="col-md-7 wthree_banner_bottom_right">
            <div class="row printed">
                <div class="col-md-12 col-sm-12">
                    <h2> Brand New Printed T-Shirts </h2>
                    <div class="team-bottom2 p-t-50"><a href="products.php">Shop Now</a></div>
                </div>
            </div>
            <div class="row printed2">
                <div class="height-100"></div>
                <div class="col-md-4 col-sm-6">
                    <img src="images/h-printed1.png" alt="" title="" class="img-responsive" />
                    <h6>Adventure </h6>
                </div>
                <div class="col-md-4 col-sm-6">
                    <img src="images/h-printed2.png" alt="" title="" class="img-responsive" />
                    <h6> Retro</h6>
                </div>
                <div class="col-md-4 col-sm-6">
                    <img src="images/h-printed3.png" alt="" title="" class="img-responsive" />
                    <h6>Festival </h6>
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="more-btn"> <a href="products.php">& More </a> </div>
                </div>
            </div>
        </div>

    </div>
    <div class="clearfix"> </div>
</div> -->
<!-- //H-Section 2  End -->





<!-- Home Section 3 Start -->
<div class="h-section3">
    <div class="container">
        <div class="row">
            <div class="part2">
                <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"> </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="part2">
                        <h1>Who we are</h1>
                        <p>Welcome to <b>T&C Sports</b>, your ultimate destination for all things cricket! Established in [Year],
                            we are passionate about the sport and dedicated to providing the highest quality products and services to cricket enthusiasts around the world.</p>
                        <div class="team-bottom2"><a href="products.php">Shop Now</a></div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                    <div class="h-img1">
                        <img src="images/h-img3.png" alt="" title="" />
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- Home Section 3 End -->



<style>
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        background: none;
    }
</style>





<div class="h-section4">
    <!-- banner-bottom -->
    <div class="banner-bottom" style="padding:0;">
        <div class="container-fluid">
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12  wthree_banner_bottom_left">
                <img src="images/c-img1.png" alt="">
                <h2>
                    Brand New <br>
                    Collections
                </h2>
            </div>
            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 wthree_banner_bottom_right">
                <h1>Featured Products</h1>
                <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#all" id="all-tab" role="tab" data-toggle="tab" aria-controls="all">All</a></li>
                        <li role="presentation"><a href="#round" role="tab" id="round-tab" data-toggle="tab" aria-controls="round">Batting Legguards</a></li>
                        <li role="presentation"><a href="#collar" role="tab" id="collar-tab" data-toggle="tab" aria-controls="collar">Batting Gloves</a></li>
                        <li role="presentation"><a href="#custom" role="tab" id="custom-tab" data-toggle="tab" aria-controls="custom">Bags</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="all" aria-labelledby="home-tab">
                            <div class="agile_ecommerce_tabs">

                                <div class=" col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/bagb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb4.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb2.png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            Kit bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'bag2.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class=" col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadblack.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (3).png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            Black Batting Pads RH
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Type:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class=" col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/gloveb1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class=" col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/glovebl1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class=" col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/baglo1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            NB Blue Kit Bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            B P Clads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <!-- <div class="clearfix"> </div> -->

                                <!-- <div class="team-bottom2" style="margin: 5% 0 0 0;"><a href="products.php">Shop Now</a></div> -->
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="round" aria-labelledby="round-tab">
                            <div class="agile_ecommerce_tabs">

                                <div class=" col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadblack.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadblack (3).png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            Black Batting Pads RH
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Type:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadwhite.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwhite (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwhite.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwhite (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwhite.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwhite (2).png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            T & C Batting Pads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadwb.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwb (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadwb (3).png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            T & C Batting Pads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            B P Clads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (3).png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            B P Clads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                            <img src="images/batting/batpadcolor (2).png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            B P Clads
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>


                                <!-- <div class="clearfix"> </div> -->

                                <!-- <div class="team-bottom2" style="margin: 5% 0 0 0;"><a href="products.php">Shop Now</a></div> -->
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="collar" aria-labelledby="collar-tab">
                            <div class="agile_ecommerce_tabs">


                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/gloveb1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/gloveb3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/glovebl1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebl3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/glovebr1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebr2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebr3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebr1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebr2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovebr3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/gloves/glovew1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovew2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovew3.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovew1.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovew2.png" alt=" " class="img-responsive" />
                                            <img src="images/gloves/glovew3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            Batting Gloves
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>



                                <!-- <div class="clearfix"> </div> -->

                                <!-- <div class="team-bottom2" style="margin: 5% 0 0 0;"><a href="products.php">Shop Now</a></div> -->
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="custom" aria-labelledby="custon-tab">
                            <div class="agile_ecommerce_tabs">

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/bagb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb4.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/bagb2.png" alt=" " class="img-responsive" />

                                        </div>
                                        <h2>
                                            Kit bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'bag2.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/baglb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglb2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglb3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglb1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglb2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglb3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            NB Kit bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/baglbla1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglbla2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglbla3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglbla1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglbla2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglbla3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            SS super select kit bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-4  col-md-4 col-sm-6 col-xs-6 agile_ecommerce_tab_left">
                                    <div class="white-bg">
                                        <div class="hs-wrapper">
                                            <img src="images/bags/baglo1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo3.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo1.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo2.png" alt=" " class="img-responsive" />
                                            <img src="images/bags/baglo3.png" alt=" " class="img-responsive" />
                                        </div>
                                        <h2>
                                            NB Blue Kit Bag
                                        </h2>
                                        <h3>
                                            <table>
                                                <tr>
                                                    <td>Sizes:</td>
                                                    <td>M </td>
                                                    <td>L </td>
                                                    <td>XL </td>
                                                    <td>XXL</td>
                                                </tr>
                                                <tr>
                                                    <td>Colours:</td>
                                                    <td><img src="images/color/black.png" alt=""></td>
                                                    <td><img src="images/color/blue.png" alt=""></td>
                                                    <td><img src="images/color/green.png" alt=""></td>
                                                    <td><img src="images/color/red.png" alt=""></td>
                                                </tr>
                                            </table>
                                        </h3>
                                        <button onclick="window.location.href = 'single.php';">
                                            Shop Now
                                        </button>
                                    </div>
                                </div>


                                <!-- <div class="clearfix"> </div> -->

                                <!-- <div class="team-bottom2" style="margin: 5% 0 0 0;"><a href="products.php">Shop Now</a></div> -->
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal video-modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModal6">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <section>
                <div class="modal-body">
                    <div class="col-md-5 modal_body_left">
                        <img src="images/39.png" alt=" " class="img-responsive" />
                    </div>
                    <div class="col-md-7 modal_body_right">
                        <h4>Lorem ipsum</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                        <div class="rating">
                            <div class="rating-left">
                                <div class="icon-star img-responsive"></div>
                            </div>
                            <div class="rating-left">
                                <div class="icon-star img-responsive"></div>
                            </div>
                            <div class="rating-left">
                                <div class="icon-star img-responsive"></div>
                            </div>
                            <div class="rating-left">
                                <div class="icon-star-o img-responsive"></div>
                            </div>
                            <div class="rating-left">
                                <div class="icon-star-o img-responsive"></div>
                            </div>

                            <!-- <div class="clearfix"> </div> -->
                        </div>
                        <div class="modal_body_right_cart simpleCart_shelfItem">
                            <p><span>Rs.320</span> <i class="item_price">Rs.250</i></p>
                            <p><a class="item_add" href="#">Add to cart</a></p>
                        </div>
                        <h5>Size</h5>
                        <div class="color-quality">
                            <ul>
                                <li><a href="#">M</a></li>
                                <li><a href="#">L</a></li>
                                <li><a href="#">XL</a></li>
                                <li><a href="#">XXL</a></li>
                            </ul>
                        </div>
                        <h5>Color</h5>
                        <div class="color-quality">
                            <ul>
                                <li><a href="#"><span></span>Red</a></li>
                                <li><a href="#" class="brown"><span></span>Yellow</a></li>
                                <li><a href="#" class="purple"><span></span>Purple</a></li>
                                <li><a href="#" class="gray"><span></span>Violet</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- <div class="clearfix"> </div> -->
                </div>
            </section>
        </div>
    </div>
</div>

<!-- Home Section 3 Start -->
<div class="h-section5">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <img class="img-fluid" src="images/order.png" alt="">
            </div>
            <div class="col-md-3">
                <div class="black-bg">
                    <h3>We Welcome</h3>
                    <h2>Bulk Orders</h2>
                    <form action="contact_save.php" method="post" id="contact-form">
                        <div class="contact_input_area">
                            <!-- Form Group -->
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="text" class="form-control mb-30" name="name" id="name" placeholder="Name">
                                    <div class="error-message" style="color:red" id="name-error"></div>
                                </div>
                            </div>
                            <!-- Form Group -->
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="text" class="form-control mb-30" name="phone" id="phone" placeholder="Mobile Number">
                                    <div class="error-message" id="phone-error" style="color:red"></div>
                                </div>
                            </div>
                            <!-- Form Group -->
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="email" class="form-control mb-30" name="email" id="email" placeholder="E-mail">
                                    <div class="error-message" id="email-error" style="color:red"></div>
                                </div>
                            </div>
                            <!-- Form Group -->
                            <div class="col-12">
                                <div class="form-group">
                                    <textarea name="message" class="form-control mb-30" name="message" id="message" cols="30" rows="3" placeholder="Comments"></textarea>
                                    <div class="error-message" id="message-error" style="color:red"></div>
                                </div>
                            </div>

                        </div>
                        <div class="col-12" style="text-align: center;">
                            <br>
                            <button type="submit" class="btn confer-btn">Submit<i class="zmdi zmdi-long-arrow-right"></i></button>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>
</div>
<!-- Home Section 3 End -->
<script>
    document.getElementById('contact-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent form submission

        // Clear previous error messages
        document.querySelectorAll('.error-message').forEach(function(element) {
            element.textContent = '';
        });

        // Validate fields
        let isValid = true;

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const message = document.getElementById('message').value;

        if (name === '') {
            document.getElementById('name-error').textContent = 'Name is required';
            isValid = false;
        }

        if (email === '') {
            document.getElementById('email-error').textContent = 'Email is required';
            isValid = false;
        } else if (!validateEmail(email)) {
            document.getElementById('email-error').textContent = 'Invalid email format';
            isValid = false;
        }

        if (phone === '') {
document.getElementById('phone-error').textContent = 'Phone number is required';
            isValid = false;
        }

        if (message === '') {
            document.getElementById('message-error').textContent = 'Message is required';
            isValid = false;
        }

        // If the form is valid, send the data using fetch API
        if (isValid) {
            fetch('contact_save.php', {
                    method: 'POST',
                    body: new FormData(document.getElementById('contact-form'))
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        Toastify({
                            text: data.message,
                            duration: 3000,
                            close: true,
                            gravity: "top", // `top` or `bottom`
                            position: "right", // `left`, `center` or `right`
                            backgroundColor: "green",
                        }).showToast();
                        document.getElementById('contact-form').reset();
                    } else {
                        Toastify({
                            text: data.message,
                            duration: 3000,
                            close: true,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "red",
                        }).showToast();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Toastify({
                        text: "An error occurred. Please try again later.",
                        duration: 3000,
                        close: true,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "red",
                    }).showToast();
                });
        }
    });

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }
</script>

<?php include("footer.php") ?>