<!doctype html>
<html lang="en" class="light-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,700&family=Oswald:wght@600&family=Roboto:wght@700&display=swap" rel="stylesheet">
    <title>Synrok - Mobile HTML Template</title>

    <!-- Plugins -->
    <?php
    include('headerlink.php');
    ?>

    <style>
        .features-section .card-body h5 {
            font-size: 16px;
        }

        body {
            font-family: 'Oswald', sans-serif;
        }

        .terms {
            font-size: 14px;
        }
    </style>

</head>

<body>

    <!--page loader-->
    <div class="loader-wrapper">
        <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
            <div class="spinner-border text-white" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    <!--end loader-->

    <!--start wrapper-->
    <div class="wrapper">
        <!--start to header-->
        <header class="top-header background fixed-top border-bottom d-flex align-items-center">
            <nav class="navbar navbar-expand w-100 p-0 gap-3 align-items-center">
                <div class="nav-button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidenav"><a href="javascript:;"><i class="bi bi-list text-white"></i></a></div>
                <div class="brand-logo ">
                    <h1 style="font-size: 20px;  margin: 2px;" class="text-white">DSP SHIPPER</h1>
                </div>
                <form class="searchbar">
                    <div class="position-absolute top-50 translate-middle-y search-icon start-0"><i class="bi bi-search"></i></div>
                    <input class="form-control px-5" type="text" placeholder="Search for anything">
                    <div class="position-absolute top-50 translate-middle-y end-0 search-close-icon"><i class="bi bi-x-lg"></i></div>
                </form>
                <ul class="navbar-nav ms-auto d-flex align-items-center top-right-menu">
                    <li class="nav-item">

                    </li>
                </ul>
            </nav>
        </header>
        <!--end to header-->

        <!--start to page content-->
        <div class="page-content">
            <!--start features-->
            <div class="features-section">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3">
                    <!-- Card 1 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card1 rounded-3 new-card border-0 shadow-sm text-center shadow">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3">
                                    <i class="fa fa-smile-o fw-bold p-2 " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">USER NAME</h5>
                                <p>Hello Demouser</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 2 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card2 rounded-3 new-card  border-0 shadow-sm text-center shadow">
                            <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3 p-2  ">
                                    <i class="fa fa-usd " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold mb-0 text-white">CREDIT</h5>
                                <p class="">3248</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 3 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card3 rounded-3 new-card border-0 shadow-sm text-center shadow">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3 p-2 text-light">
                                    <i class="fa fa-shopping-bag " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">YOUR ORDER</h5>
                                <p>4</p>
                            </div>
                        </div>
                    </div>
                    <!-- Card 4 -->
                    <div class="col-6 col-sm-6 col-md-3">
                        <div class="card card4 rounded-3 new-card border-0 shadow-sm text-center shadow">
                            <div class="card-body  d-flex flex-column justify-content-center align-items-center">
                                <div class="noti-box mb-3  text-light p-2">
                                    <i class="fa fa-shopping-cart " aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <h5 class="fw-bold  mb-0 text-white">PANEL ORDER</h5>
                                <p>94</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <!-- Left col -->
                <section class="col-lg-7 mt-3">
                    <!-- TO DO List -->
                    <div class="card my-3 shadow">
                        <div class="card-header custom-box-shadow" style="color: #fff; height: 45px; background: linear-gradient(to right, #ff5733, #c70039);">
                            <h3 class="card-title text-white px-2 fw-bold" style="font-size: 20px;">
                                <i class="ion ion-clipboard mr-1"></i>
                                Terms & Conditions
                            </h3>
                        </div>



                        <!-- /.card-header -->
                        <div class="card-body shadow">
                            <ul class="todo-list fw-bold text-dark m-0 p-0" data-widget="todo-list">
                                <ul style="padding: 0; list-style: none;">

                                    <li class="text-item mb-2 terms">1. Track will be updated in 2 working days.</li>

                                    <li class="text-item mb-2 terms">2. Order will not be cancelled for any reason.</li>

                                    <li class="text-item mb-2 terms">3. We don't have any refund or return policy.</li>

                                    <li class="text-item mb-2 terms">4. If the package is not delivered to the destination, we will reship it in 2 working days.</li>

                                    <li class="text-item mb-2 terms">5. If a different product is delivered to the receiver, we will reship it in 2 working days.</li>

                                    <li class="text-item mb-2 terms">6. We take responsibility until the delivery destination.</li>

                                    <li class="text-item mb-2 terms">7. If the quantity delivered is less than what you ordered, we will reship the remaining quantity in 2 working days.</li>

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


                    </div>
                    <!-- /.card -->
                </section>

                <section class="col-lg-5 py-3">

                    <!-- video card -->
                    <div class="card shadow" style="height:100%;">
                        <div class="card-header" style="color: #ffff;background-color: #343a40; height:45px">
                            <h3 class="card-title text-white fw-bold px-2" style="font-size:20px">
                                <i class="ion ion-pause-circle  mr-1"></i>
                                Video Section
                            </h3>

                        </div>
                        <div class="card-body shadow">
                            <div id="video" style="height: 250px; width: 100%;">
                                <video style="height: 250px; width: 100%;" controls>
                                    <source src="vlc.mp4" type="video/mp4">
                                </video>

                            </div>

                        </div>
                    </div>
                    <!-- /.card -->
                </section>
                <!-- right col -->
            </div>

            <div class="py-2"></div>
        </div>
        <!--end to page content-->


        <!--start to footer-->


        <?php
        include('footer.php');
        ?>



        <!--end to footer-->


        <!--start sidenav-->
        <?php
        include('sidebar.php');
        ?>
        <!--end sidenav-->


    </div>
    <!--end wrapper-->


    <!--JS Files-->
    <script src="assets/js/bootstrap.bundle.min.js"></script>

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/cookies-theme-switcher.js"></script>
    <script src="assets/plugins/metismenu/metisMenu.min.js"></script>
    <script src="assets/plugins/slick/slick.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/index.js"></script>
    <script src="assets/js/loader.js"></script>

</body>

</html>