<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="horizontal" data-nav-style="menu-hover" data-theme-mode="light">
        
    <head>
        <!-- META DATA -->
        <meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Spruko Technologies Private Limited">
        <meta name="keywords" content="Hosting Website Templates, PHP Hosting Website Template, Hosting PHP Template, Professional Hosting PHP Template, Top Web Hosting PHP Templates, Web Hosting PHP Template, web hosting Bootstrap template, This professional Hosting PHP Template, Web Hosting Template, Bootstrap hosting template, Web Hosting Template Bootstrap, Bootstrap Web Hosting Template, Web Hosting Programming Template.">

        <!-- TITLE -->
        <title>Hostma – PHP Modern Web Hosting Template </title>
        
        <!-- FAVICON -->
        <link rel="icon" href="../assets/images/brand/favicon.ico" type="image/x-icon">
        
        <?php include '../layouts/styles.php'; ?>

    </head>

    <body class="main-body light-theme custom-page">

        <!-- BACK-TO-TOP -->
        <a href="#top" id="back-to-top" class="back-to-top rounded-circle shadow all-ease-03 fade-in">
            <i class="fe fe-arrow-up"></i>
        </a>
        <!-- END BACK-TO-TOP -->

        <!-- PAGE -->
        <div class="page">
            <div class="head_menu_container">

                <!-- HEADER -->
                <?php include '../layouts/header.php'; ?>

                <!-- END HEADER -->

                <!-- SIDEBAR -->
                <?php include '../layouts/sidebar.php'; ?>

                <!-- END SIDEBAR -->
            </div>

            <!-- MAIN-CONTENT -->
            <div class="main-content app-content">
                <section class="section banner-section bg-pattern-1">
                    <img src="../assets/images/patterns/2.png" alt="img" class="patterns-6 op-1 z-index-0 top-14p">
                    <img src="../assets/images/patterns/2.png" alt="img" class="patterns-1 op-1">
                    <div class="container">
                        <div class="heading-section">
                            <div class="heading-subtitle"><span class="tx-primary tx-16 fw-semibold">Switcher</span></div>
                            <div class="heading-title">Switcher <span class="tx-primary">Styles</span></div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-lg-5">
                                <div class="card">
                                    <div class="card-body w-100" id="switcher-canvas">
                                        <div class="">
                                            <p class="switcher-style-head">Theme Color Mode:</p>
                                            <div class="row switcher-style">
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-light-theme">
                                                            Light
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="theme-style" id="switcher-light-theme" checked>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-dark-theme">
                                                            Dark
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="theme-style" id="switcher-dark-theme">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <p class="switcher-style-head">Directions:</p>
                                            <div class="row switcher-style">
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-ltr">
                                                            LTR
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="direction" id="switcher-ltr" checked>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-rtl">
                                                            RTL
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="direction" id="switcher-rtl">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <p class="switcher-style-head">Layout Width Styles:</p>
                                            <div class="row switcher-style">
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-full-width">
                                                            Full Width
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="layout-width" id="switcher-full-width" checked>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-check switch-select">
                                                        <label class="form-check-label" for="switcher-boxed">
                                                            Boxed
                                                        </label>
                                                        <input class="form-check-input" type="radio" name="layout-width" id="switcher-boxed">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="theme-colors">
                                            <p class="switcher-style-head">Theme Primary:</p>
                                            <div class="d-flex align-items-center switcher-style">
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-primary-1" type="radio"
                                                        name="theme-primary" id="switcher-primary">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-primary-2" type="radio"
                                                        name="theme-primary" id="switcher-primary1">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-primary-3" type="radio" 
                                                        name="theme-primary" id="switcher-primary2">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-primary-4" type="radio" 
                                                        name="theme-primary" id="switcher-primary3">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-primary-5" type="radio" 
                                                        name="theme-primary" id="switcher-primary4">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1 ps-0 mt-1 color-primary-light">
                                                    <div class="theme-container-primary"></div>
                                                    <div class="pickr-container-primary"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="theme-colors">
                                            <p class="switcher-style-head">Theme Background:</p>
                                            <div class="d-flex align-items-center switcher-style">
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-bg-1" type="radio"
                                                        name="theme-background" id="switcher-background" checked>
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-bg-2" type="radio"
                                                        name="theme-background" id="switcher-background1">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-bg-3" type="radio" name="theme-background"
                                                        id="switcher-background2">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-bg-4" type="radio"
                                                        name="theme-background" id="switcher-background3">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1">
                                                    <input class="form-check-input color-input color-bg-5" type="radio"
                                                        name="theme-background" id="switcher-background4">
                                                </div>
                                                <div class="form-check switch-select me-sm-3 me-1 ps-0 mt-1 color-bg-transparent">
                                                    <div class="theme-container-background"></div>
                                                    <div class="pickr-container-background"></div>
                                                </div>
                                            </div>
                                        </div>            
                                    </div>
                                    <div class="d-flex justify-content-center gap-2 p-4 border-top">
                                        <a href="https://spruko.com/licenses" role="button" class="btn btn-primary">Licenses</a>
                                        <a href="https://themeforest.net/user/spruko/portfolio" role="button" class="btn btn-secondary">Our Portfolio</a>
                                        <button id="reset-all" class="btn btn-danger">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!-- END MAIN-CONTENT -->

            <!-- FOOTER -->
            <?php include '../layouts/footer.php'; ?>

            <!-- END FOOTER -->
        </div>
        <!-- END PAGE -->

        <!-- ACCEPT-COOKIE -->
        <?php include '../layouts/accept-cookie.php'; ?>

        <!-- END ACCEPT-COOKIE -->

        <!-- SCRIPTS -->
        <?php include '../layouts/scripts.php'; ?>

        <!-- PICKER JS -->
        <script src="../assets/js/picker.js"></script>

        <!-- STICKY JS -->
        <script src="../assets/js/sticky.js"></script>

        <!-- CUSTOM JS -->
        <script src="../assets/js/custom.js"></script>

        <!-- END SCRIPTS -->

    </body>
</html>