<!DOCTYPE html>
<html lang="zxx">
    <?php require __DIR__ . '/includes/head.php'; ?>

    <body class="bg-body-bg"><?php require __DIR__ . '/includes/loading.php'; ?><?php require __DIR__ . '/includes/sidebar.php'; ?>


        <!-- Start Main Content Area -->
        <div class="container-fluid">
            <div class="main-content d-flex flex-column">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4 mt-1">
                        <h3 class="mb-0">Products Details</h3>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb align-items-center mb-0 lh-1">
                                <li class="breadcrumb-item">
                                    <a href="index.html" class="d-flex align-items-center text-decoration-none">
                                        <i class="ri-home-8-line fs-15 text-primary me-1"></i>
                                        <span class="text-body fs-14 hover">Dashboard</span>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span>E-Commerce</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span>Products</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Products Details</span>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="card bg-white p-20 rounded-10 rounded-bottom-0 border border-white" style="padding-bottom: 50px;">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="pe-60">
                                    <div class="tab-content mb-10" id="myTabContent1">
                                        <div class="tab-pane fade show active" id="details1-tab-pane" role="tabpanel" aria-labelledby="details1-tab" tabindex="0">
                                            <img src="assets/images/product-details1.jpg" class="rounded-10" alt="product-details1">
                                        </div>
                                        <div class="tab-pane fade" id="details2-tab-pane" role="tabpanel" aria-labelledby="details2-tab" tabindex="0">
                                            <img src="assets/images/product-details2.jpg" class="rounded-10" alt="product-details2">
                                        </div>
                                        <div class="tab-pane fade" id="details3-tab-pane" role="tabpanel" aria-labelledby="details3-tab" tabindex="0">
                                            <img src="assets/images/product-details3.jpg" class="rounded-10" alt="product-details3">
                                        </div>
                                        <div class="tab-pane fade" id="details4-tab-pane" role="tabpanel" aria-labelledby="details4-tab" tabindex="0">
                                            <img src="assets/images/product-details4.jpg" class="rounded-10" alt="product-details4">
                                        </div>
                                    </div>
                                </div>

                                <ul class="nav nav-tabs border-0" id="myTab1" role="tablist" style="gap: 10px;">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link p-0 border-0 active" id="details1-tab" data-bs-toggle="tab" data-bs-target="#details1-tab-pane" type="button" role="tab" aria-controls="details1-tab-pane" aria-selected="true">
                                            <img src="assets/images/product-details1.jpg" class="rounded-10" style="width: 100px; height: 100px;" alt="product-details1">
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link p-0 border-0" id="details2-tab" data-bs-toggle="tab" data-bs-target="#details2-tab-pane" type="button" role="tab" aria-controls="details2-tab-pane" aria-selected="false">
                                            <img src="assets/images/product-details2.jpg" class="rounded-10" style="width: 100px; height: 100px;" alt="product-details2">
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link p-0 border-0" id="details3-tab" data-bs-toggle="tab" data-bs-target="#details3-tab-pane" type="button" role="tab" aria-controls="details3-tab-pane" aria-selected="false">
                                            <img src="assets/images/product-details3.jpg" class="rounded-10" style="width: 100px; height: 100px;" alt="product-details3">
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link p-0 border-0" id="details4-tab" data-bs-toggle="tab" data-bs-target="#details4-tab-pane" type="button" role="tab" aria-controls="details4-tab-pane" aria-selected="false">
                                            <img src="assets/images/product-details4.jpg" class="rounded-10" style="width: 100px; height: 100px;" alt="product-details4">
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <div class="product-details-content mt-4 mt-lg-0" style="max-width: 685px;">
                                    <h3 class="mb-10 fs-26">Luxury Rendering</h3>
                                    
                                    <h3 class="mb-12">$150.00 <del class="fs-14 text-body fw-normal ms-1">$180.00</del></h3>
                                    <div style="margin-top: -5px; margin-bottom: 15px;">
                                        <i class="ri-star-fill fs-16 text-warning"></i>
                                        <i class="ri-star-fill fs-16 text-warning"></i>
                                        <i class="ri-star-fill fs-16 text-warning"></i>
                                        <i class="ri-star-fill fs-16 text-warning"></i>
                                        <i class="ri-star-half-fill fs-16 text-warning"></i>
                                        <span class="text-body">(4.5)</span>
                                    </div>

                                    <p class="fs-16" style="line-height: 1.8;">Auctor in nam malesuada auctor ultrices proin condimentum leo cras. Ultrices a quam massa tincidunt dictum luctus cursus. Est eleifend nam hendrerit ultricies elit montes. Molestie blandit orci viverra arcu vitae integer pharetra.</p>
                                    <p class="fs-16 mb-1" style="line-height: 1.8;">100% Original Products</p>
                                    <p class="fs-16" style="line-height: 1.8;">Easy 15 days returns and exchanges</p>

                                    <div class="d-flex my-4" style="gap: 10px;">
                                        <div class="d-inline-block" id="add-to-cart">
                                            <div class="d-flex align-items-center countdown-for-add-to-cart bg-light">
                                                <button id="decrement" class="plus-minus bg-transparent">-</button>
                                                <span id="count">1</span>
                                                <button id="increment" class="plus-minus bg-transparent">+</button>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary text-white fw-normal" style="height: 44px;">
                                            Add To Cart 
                                        </button>
                                    </div>

                                    <ul class="p-0 mb-0 list-unstyled">
                                        <li class="d-flex align-items-center fs-16" style="margin-bottom: 10px;">
                                            <span class="text-secondary">Category:</span>
                                            <span>Jewellery</span>
                                        </li>
                                        <li class="d-flex align-items-center fs-16" style="margin-bottom: 10px;">
                                            <span class="text-secondary">SKU:</span>
                                            <span>APR 517</span>
                                        </li>
                                        <li class="d-flex align-items-center fs-16" style="margin-bottom: 10px;">
                                            <span class="text-secondary">Vendor:</span>
                                            <span>Michael Shelton</span>
                                        </li>
                                        <li class="d-flex align-items-center fs-16" style="margin-bottom: 10px;">
                                            <span class="text-secondary">Availability:</span>
                                            <span class="text-success">In stock 20 items</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-light-50 bg-for-dark-description">
                        <div class="mx-auto" style="max-width: 1326px;">
                            <ul class="nav nav-tabs border-0 tabs-description" id="myTab2" role="tablist" style="gap: 35px;">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link fs-16 text-secondary fw-medium border-0 rounded-0 bg-transparent active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description-tab-pane" type="button" role="tab" aria-controls="description-tab-pane" aria-selected="true" style="padding: 12px 0;">Description</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link fs-16 text-secondary fw-medium border-0 rounded-0 bg-transparent" id="ratings-reviews-tab" data-bs-toggle="tab" data-bs-target="#ratings-reviews-tab-pane" type="button" role="tab" aria-controls="ratings-reviews-tab-pane" aria-selected="false" style="padding: 12px 0;">Ratings & Reviews</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card bg-white p-20 rounded-10 rounded-top-0 border border-white mb-4">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="description-tab-pane" role="tabpanel" aria-labelledby="description-tab" tabindex="0">
                                <div class="mx-auto mb-20" style="max-width: 1326px; margin-top: 10px;">
                                    <p class="fs-16 lh-1-8">Nam dui tempor mi id. Risus nulla amet facilisis eu metus nulla. Nisi interdum nec in lectus amet dis. Pulvinar ut vulputate odio venenatis id urna. Nullam elementum id egestas aliquet leo potenti pellentesque vel tortor. Varius integer facilisi vestibulum ante scelerisque adipiscing at turpis ultricies. Ullamcorper dui in in ultricies sodales in sapien. Elit lectus tincidunt tempus platea praesent. Mi dignissim faucibus fringilla egestas.</p>
                                    <p class="fs-16 lh-1-8">Nulla in consequat nisl quam. Arcu vulputate integer mauris adipiscing felis etiam. Leo morbi euismod egestas turpis velit. Mauris fames convallis aliquet augue semper tortor sem. Amet aliquam urna mus aenean. Eu quam tristique at scelerisque id posuere.</p>
                                    <ul class="p-0 mb-0 list-unstyled last-child-none">
                                        <li class="d-flex align-items-center mb-10">
                                            <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                            <span class="ms-10 fs-16">Consequat imperdiet dolor a pretium.</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-10">
                                            <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                            <span class="ms-10 fs-16">In pulvinar amet sagittis etiam imperdiet non pretium integer.</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-10">
                                            <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                            <span class="ms-10 fs-16">Aenean ut facilisis tristique ut nam nam turpis facilisi vel.</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-10">
                                            <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                            <span class="ms-10 fs-16">Vulputate dui phasellus vitae velit odio habitant</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-10">
                                            <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                            <span class="ms-10 fs-16">Amet porta egestas augue purus tellus orci diam.</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="ratings-reviews-tab-pane" role="tabpanel" aria-labelledby="ratings-reviews-tab" tabindex="0">
                                <div class="mx-auto" style="max-width: 1326px; margin-top: 10px;">
                                    <h3 class="mb-20">Ratings</h3>
                                    <div class="row align-items-center">
                                        <div class="col-xxl-2 col-md-4 col-lg-3">
                                            <h2 class="fw-medium fs-26" style="margin-bottom: 3px;">4.9</h2>
                                            <span class="fs-16 d-block mb-1">Overall Rating</span>
                                            <ul class="p-0 mb-0 list-unstyled d-flex align-items-center" style="gap: 3px;">
                                                <li>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                </li>
                                                <li>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                </li>
                                                <li>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                </li>
                                                <li>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                </li>
                                                <li>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                </li>
                                                <li>
                                                    <span class="position-relative top-2">(158 Reviews)</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-xxl-10 col-md-8 col-lg-9 mt-4 mt-md-0">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <ul class="p-0 mb-0 list-unstyled last-child-none">
                                                        <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <span class="position-relative top-2">(5.00)</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <span class="position-relative top-2">(4.00)</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <span class="position-relative top-2">(3.00)</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <span class="position-relative top-2">(2.00)</span>
                                                        </li>
                                                        <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                            <i class="ri-star-fill text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <i class="ri-star-line text-warning fs-16"></i>
                                                            <span class="position-relative top-2">(1.00)</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flex-grow-1 ms-3 last-child-none">
                                                    <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                        <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                            <div class="progress-bar bg-primary rounded-0" style="width: 80%; height: 4px;"></div>
                                                        </div>
                                                        <span>(120)</span>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                        <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                            <div class="progress-bar bg-primary rounded-0" style="width: 40%; height: 4px;"></div>
                                                        </div>
                                                        <span>(25)</span>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                        <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                            <div class="progress-bar bg-primary rounded-0" style="width: 20%; height: 4px;"></div>
                                                        </div>
                                                        <span>(9)</span>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                        <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                            <div class="progress-bar bg-primary rounded-0" style="width: 8%; height: 4px;"></div>
                                                        </div>
                                                        <span>(3)</span>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                        <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                            <div class="progress-bar bg-primary rounded-0" style="width: 2%; height: 4px;"></div>
                                                        </div>
                                                        <span>(1)</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="card border-0 bg-light p-30 rounded-10 bg-for-dark" style="margin-top: 45px;">
                                                <div class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <span class="position-relative top-1">(5)</span>
                                                </div>
                                                <p class="fs-16 lh-1-8">Risus nulla amet facilisis eu metus nulla. Nisi interdum nec in lectus amet dis. Pulvinar ut vulputate odio venenatis id urna. Nullam elementum id egestas aliquet leo potenti pellentesque vel tortor. Varius integer facilisi vestibulum ante scelerisque adipiscing at turpis ultricies. Ullamcorper dui in in ultricies sodales in sapien. Elit lectus tincidunt tempus platea praesent. Mi dignissim faucibus fringilla egestas.</p>
                                                <div class="d-flex align-items-center">
                                                    <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user1">
                                                    <span class="fs-18 text-secondary ms-3">Mark Stjohn</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="card border-0 bg-light p-30 rounded-10 bg-for-dark" style="margin-top: 45px;">
                                                <div class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <i class="ri-star-fill text-warning fs-16"></i>
                                                    <span class="position-relative top-1">(5)</span>
                                                </div>
                                                <p class="fs-16 lh-1-8">Risus nulla amet facilisis eu metus nulla. Nisi interdum nec in lectus amet dis. Pulvinar ut vulputate odio venenatis id urna. Nullam elementum id egestas aliquet leo potenti pellentesque vel tortor. Varius integer facilisi vestibulum ante scelerisque adipiscing at turpis ultricies. Ullamcorper dui in in ultricies sodales in sapien. Elit lectus tincidunt tempus platea praesent. Mi dignissim faucibus fringilla egestas.</p>
                                                <div class="d-flex align-items-center">
                                                    <img src="assets/images/user2.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user2">
                                                    <span class="fs-18 text-secondary ms-3">Joan Stanley</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <form style="margin-top: 45px;">
                                        <h3 class="mb-20">Your Ratings</h3>
                                        
                                        <div class="ratings mb-20" dir="ltr">
                                            <span class="rating">
                                                <i class="ri-star-fill"></i>
                                            </span>
                                            <span class="rating ms-2">
                                                <i class="ri-star-fill"></i>
                                            </span>
                                            <span class="rating ms-2">
                                                <i class="ri-star-fill"></i>
                                            </span>
                                            <span class="rating ms-2">
                                                <i class="ri-star-fill"></i>
                                            </span>
                                            <span class="rating ms-2">
                                                <i class="ri-star-fill"></i>
                                            </span>
                                        </div>

                                        <div class="mb-20">
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Write comment here..." id="floatingTextarea2" style="height: 152px"></textarea>
                                                <label for="floatingTextarea2">Write comment here...</label>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-primary text-white mb-20">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex-grow-1"></div>

                <?php require __DIR__ . '/includes/footer.php'; ?>

            </div>
        </div>
        <!-- Start Main Content Area -->

        <!-- Start Theme Setting Area -->
        <button class="btn btn-primary theme-settings-btn p-0 position-fixed z-2 text-center rounded-circle" style="bottom: 24px; right: 24px; width: 56px; height: 56px; line-height: 54px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
            <i class="text-white ri-settings-3-fill fs-28" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Click On Theme Settings"></i>
        </button>

        <!-- Start Theme Setting Area -->
        <div class="offcanvas offcanvas-end bg-white border-0" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel" style="box-shadow: 0 4px 20px #2f8fe812 !important; max-width: 300px;">
            <div class="offcanvas-header bg-light p-20">
                <h5 class="offcanvas-title fs-18 fw-medium" id="offcanvasScrollingLabel">Configuration Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body p-0 overflow-hidden">
                <div class="last-child-none" style="max-height: 858px;" data-simplebar>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">RTL Mode</h4>
                        <div class="rtl-btn">
                            <label id="switch">
                                <input type="checkbox" onchange="toggleTheme()" class="toggle-switch rtl-switch" id="slider">
                            </label>
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Sidebar Dark</h4>
                        <div class="sidebar-light-dark" id="sidebar-light-dark">
                            <input type="checkbox" class="toggle-switch sidebar-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Header Dark</h4>
                        <div class="header-light-dark" id="header-light-dark">
                            <input type="checkbox" class="toggle-switch header-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Right Sidebar</h4>
                        <div class="right-sidebar" id="right-sidebar">
                            <input type="checkbox" class="toggle-switch right-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Hide Sidebar</h4>
                        <div class="icon-sidebar" id="icon-sidebar">
                            <input type="checkbox" class="toggle-switch icon-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Bordered Card</h4>
                        <div class="card-border" id="card-border">
                            <input type="checkbox" class="toggle-switch border-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Card Border Radius</h4>
                        <div class="card-radius-square" id="card-radius-square">
                            <input type="checkbox" class="toggle-switch border-radius-switch">
                        </div>
                    </div>
                    
                    <div class="p-20 border-bottom child">
                        <a href="#" class="btn btn-primary text-white">
                            Buy Fila
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Theme Setting Area -->
     
        <!-- Link Of JS File -->
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/sidebar-menu.js"></script>
        <script src="assets/js/quill.min.js"></script>
        <script src="assets/js/data-table.js"></script>
        <script src="assets/js/prism.js"></script>
        <script src="assets/js/clipboard.min.js"></script>
        <script src="assets/js/simplebar.min.js"></script>
        <script src="assets/js/apexcharts.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/fullcalendar.main.js"></script>
        <script src="assets/js/jsvectormap.min.js"></script>
        <script src="assets/js/world-merc.js"></script>
        <script src="assets/js/custom/apexcharts.js"></script>
        <script src="assets/js/custom/echarts.js"></script>
        <script src="assets/js/custom/maps.js"></script>
        <script src="assets/js/custom/custom.js"></script>
    </body>
</html>