<!-- Loopple Templates: https://www.loopple.com/templates | Copyright Loopple (https://www.loopple.com) | This copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Blogger Food Landing Page</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
    <link href="https://demos.creative-tim.com/soft-ui-design-system/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="https://demos.creative-tim.com/soft-ui-design-system/assets/css/nucleo-svg.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo e(asset('landing-page/assets/css/theme.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('landing-page/')); ?>">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
        <div class="container">
            <a class="navbar-brand font-weight-bold text-white" href="javascript:;" rel="tooltip"
                title="Designed and Coded by Creative Tim" data-placement="bottom">FOOD</a>
            <a href="javascript:;" class="btn btn-sm  bg-gradient-info  btn-round mb-0 ms-auto d-lg-none d-block">Buy
                Now</a>
            <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
                data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon mt-2">
                    <span class="navbar-toggler-bar bar1"></span>
                    <span class="navbar-toggler-bar bar2"></span>
                    <span class="navbar-toggler-bar bar3"></span>
                </span>
            </button>
            <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
                <ul class="navbar-nav navbar-nav-hover mx-auto">
                    <li class="nav-item dropdown dropdown-hover mx-2">
                        <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"
                            id="dropdownMenuPages6" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            Pages
                            <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-white.svg"
                                alt="down-arrow" class="arrow ms-1">
                        </a>
                        <div class="dropdown-menu dropdown-menu-animation dropdown-xl p-3 border-radius-xl mt-0 mt-lg-3"
                            aria-labelledby="dropdownMenuPages6">
                            <div class="row d-none d-lg-block">
                                <div class="col-12 px-4 py-2">
                                    <div class="row">
                                        <div class="col-4 position-relative">
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center">
                                                        <svg width="12px" height="12px" viewBox="0 0 45 40"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>shop </title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-1716.000000, -439.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g transform="translate(0.000000, 148.000000)">
                                                                            <path
                                                                                d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z"
                                                                                opacity="0.598981585"></path>
                                                                            <path
                                                                                d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z">
                                                                            </path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Landing Pages
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Coworking</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Rental</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Case Study</span>
                                            </a>
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-0 mt-3">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                                        <svg width="12px" height="12px" viewBox="0 0 42 42"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>office</title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-1869.000000, -293.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g transform="translate(153.000000, 2.000000)">
                                                                            <path
                                                                                d="M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z"
                                                                                opacity="0.6"></path>
                                                                            <path
                                                                                d="M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z">
                                                                            </path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Company
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">About Us</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Pricing</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Career</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Work with us</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Terms &amp; Conditions</span>
                                            </a>
                                            <hr class="vertical dark">
                                        </div>
                                        <div class="col-4 position-relative">
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                                        <svg width="12px" height="12px" viewBox="0 0 46 42"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>customer-support</title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-1717.000000, -291.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g transform="translate(1.000000, 0.000000)">
                                                                            <path class="color-background"
                                                                                d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z"
                                                                                opacity="0.59858631"></path>
                                                                            <path class="color-foreground"
                                                                                d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z">
                                                                            </path>
                                                                            <path class="color-foreground"
                                                                                d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z">
                                                                            </path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Support
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Help Center</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Help Center Basic</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Contact Us</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Contact Us Basic</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">FAQ</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Privacy</span>
                                            </a>
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                                        <svg width="12px" height="12px" viewBox="0 0 42 42"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>box-3d-50</title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-2319.000000, -291.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g transform="translate(603.000000, 0.000000)">
                                                                            <path
                                                                                d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                                                                            </path>
                                                                            <path
                                                                                d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
                                                                                opacity="0.7"></path>
                                                                            <path
                                                                                d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
                                                                                opacity="0.7"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Apps
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Mobile App</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Desktop App</span>
                                            </a>
                                            <hr class="vertical dark">
                                        </div>
                                        <div class="col-4">
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                                        <svg width="12px" height="12px" viewBox="0 0 40 44"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>document</title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-1870.000000, -591.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g
                                                                            transform="translate(154.000000, 300.000000)">
                                                                            <path
                                                                                d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                                                opacity="0.603585379"></path>
                                                                            <path
                                                                                d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                                            </path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Blogs
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Single Article</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Blog Posts</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Categories</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Author</span>
                                            </a>
                                            <div
                                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                                <div class="d-inline-block">
                                                    <div
                                                        class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                                        <svg class="" width="12px" height="20px"
                                                            viewBox="0 0 40 40" version="1.1"
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <title>spaceship</title>
                                                            <g stroke="none" stroke-width="1" fill="none"
                                                                fill-rule="evenodd">
                                                                <g transform="translate(-1720.000000, -592.000000)"
                                                                    fill="#FFFFFF" fill-rule="nonzero">
                                                                    <g transform="translate(1716.000000, 291.000000)">
                                                                        <g transform="translate(4.000000, 301.000000)">
                                                                            <path
                                                                                d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z">
                                                                            </path>
                                                                            <path
                                                                                d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z">
                                                                            </path>
                                                                            <path
                                                                                d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
                                                                                opacity="0.598539807"></path>
                                                                            <path
                                                                                d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
                                                                                opacity="0.598539807"></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </div>
                                                Extra
                                            </div>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Automotive</span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">VR <span
                                                        class="badge badge-sm bg-gradient-dark ms-1">Soon</span></span>
                                            </a>
                                            <a href="javascript:;" class="dropdown-item border-radius-md">
                                                <span class="ps-3">Smart Home <span
                                                        class="badge badge-sm bg-gradient-dark ms-1">Soon</span></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-lg-none">
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center">
                                            <svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>shop </title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-1716.000000, -439.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(0.000000, 148.000000)">
                                                                <path
                                                                    d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z"
                                                                    opacity="0.598981585"></path>
                                                                <path
                                                                    d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Landing Pages
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Coworking
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Rental
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Case Study
                                </a>
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0 mt-3">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                            <svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>office</title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-1869.000000, -293.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(153.000000, 2.000000)">
                                                                <path
                                                                    d="M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z"
                                                                    opacity="0.6"></path>
                                                                <path
                                                                    d="M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Company
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    About Us
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Pricing
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Career
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Work with us
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Terms &amp; Conditions
                                </a>
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0 mt-3">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                            <svg width="12px" height="12px" viewBox="0 0 46 42" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>customer-support</title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(1.000000, 0.000000)">
                                                                <path class="color-background"
                                                                    d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z"
                                                                    opacity="0.59858631"></path>
                                                                <path class="color-foreground"
                                                                    d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z">
                                                                </path>
                                                                <path class="color-foreground"
                                                                    d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Support
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Help Center
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Help Center Basic
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Contact Us
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Contact Us Basic
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    FAQ
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Privacy
                                </a>
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                            <svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>box-3d-50</title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(603.000000, 0.000000)">
                                                                <path
                                                                    d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                                                                </path>
                                                                <path
                                                                    d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
                                                                    opacity="0.7"></path>
                                                                <path
                                                                    d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
                                                                    opacity="0.7"></path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Apps
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Mobile App
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Desktop App
                                </a>
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                            <svg width="12px" height="12px" viewBox="0 0 40 44" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>document</title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(154.000000, 300.000000)">
                                                                <path
                                                                    d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                                    opacity="0.603585379"></path>
                                                                <path
                                                                    d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Blogs
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Single Article
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Blog Posts
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Categories
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Author
                                </a>
                                <div
                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                    <div class="d-inline-block">
                                        <div
                                            class="icon icon-shape icon-xs border-radius-md bg-gradient-primary text-center me-2 d-flex align-items-center justify-content-center ps-0">
                                            <svg class="" width="12px" height="20px" viewBox="0 0 40 40"
                                                version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>spaceship</title>
                                                <g stroke="none" stroke-width="1" fill="none"
                                                    fill-rule="evenodd">
                                                    <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(4.000000, 301.000000)">
                                                                <path
                                                                    d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z">
                                                                </path>
                                                                <path
                                                                    d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z">
                                                                </path>
                                                                <path
                                                                    d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
                                                                    opacity="0.598539807"></path>
                                                                <path
                                                                    d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
                                                                    opacity="0.598539807"></path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    Extra
                                </div>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Automotive
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    VR <span class="badge badge-sm bg-gradient-dark ms-1">Soon</span>
                                </a>
                                <a href="javascript:;" class="dropdown-item border-radius-md">
                                    Smart Home <span class="badge badge-sm bg-gradient-dark ms-1">Soon</span>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item dropdown dropdown-hover mx-2">
                        <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"
                            id="dropdownMenuAccount" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            Account
                            <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-white.svg"
                                alt="down-arrow" class="arrow ms-1">
                        </a>
                        <div class="dropdown-menu dropdown-menu-animation dropdown-lg border-radius-xl p-3 mt-0 mt-lg-3"
                            aria-labelledby="dropdownMenuAccount">
                            <div class="row d-none d-lg-flex">
                                <div class="col-6">
                                    <div class="py-6 h-100 w-100 d-flex border-radius-lg position-relative dropdown-image"
                                        style="background-image:url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved8.jpg')">
                                        <div class="mask bg-gradient-primary border-radius-lg"></div>
                                        <div
                                            class="d-flex justify-content-center align-items-center text-center text-white font-weight-bold w-100 z-index-1 flex-column">
                                            <div class="icon icon-shape rounded-circle bg-white shadow text-center">
                                                <i class="ni ni-diamond text-primary text-gradient text-lg"
                                                    aria-hidden="true"></i>
                                            </div>
                                            <span class="text-lg mt-2">Explore our<br>utilities pages</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 ps-0 d-flex justify-content-center flex-column">
                                    <ul class="list-group">
                                        <li
                                            class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                            <a class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1"
                                                id="dropdownSignIn">
                                                <span>Sign In</span>
                                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                    alt="down-arrow" class="arrow">
                                            </a>
                                            <div class="dropdown-menu mt-0 py-3 px-2"
                                                aria-labelledby="dropdownSignIn">
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Side Cover</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Illustration</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Basic</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md" href="javascript:;">
                                                    <span>Simple</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li
                                            class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                            <a class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1"
                                                id="dropdownSignUp">
                                                <span>Sign Up</span>
                                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                    alt="down-arrow" class="arrow">
                                            </a>
                                            <div class="dropdown-menu mt-0 py-3 px-2"
                                                aria-labelledby="dropdownSignUp">
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Side Cover</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Illustration</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Basic</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Simple</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li
                                            class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                            <a class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1"
                                                id="dropdownPasswordReset">
                                                <span>Password Reset</span>
                                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                    alt="down-arrow" class="arrow">
                                            </a>
                                            <div class="dropdown-menu mt-0 py-3 px-2"
                                                aria-labelledby="dropdownPasswordReset">
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Side Cover</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Illustration</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>Basic</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li
                                            class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                            <a class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1"
                                                id="dropdownError">
                                                <span>Error Pages</span>
                                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                    alt="down-arrow" class="arrow">
                                            </a>
                                            <div class="dropdown-menu mt-0 py-3 px-2" aria-labelledby="dropdownError">
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>404</span>
                                                </a>
                                                <a class="dropdown-item ps-3 border-radius-md mb-1"
                                                    href="javascript:;">
                                                    <span>500</span>
                                                </a>
                                            </div>
                                        </li>
                                        <li class="nav-item list-group-item border-0 p-0">
                                            <a href="javascript:;"
                                                class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1">
                                                <span>Coming Soon</span>
                                            </a>
                                        </li>
                                        <li class="nav-item list-group-item border-0 p-0">
                                            <a href="javascript:;"
                                                class="dropdown-item border-radius-md ps-3 d-flex align-items-center justify-content-between mb-1">
                                                <span>2FA Security</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row d-lg-none">
                                <div class="col-12 d-flex justify-content-center flex-column">
                                    <h6
                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">
                                        Sign In
                                    </h6>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Side Cover
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Illustration
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Basic
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Simple
                                    </a>
                                    <h6
                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                        Sign Up
                                    </h6>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Side Cover
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Illustration
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Basic
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Simple
                                    </a>
                                    <h6
                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                        Password Reset
                                    </h6>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Side Cover
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Illustration
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Basic
                                    </a>
                                    <h6
                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center mt-3 px-0">
                                        Error Pages
                                    </h6>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        404
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        500
                                    </a>
                                    <hr class="horizontal dark">
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        Coming Soon
                                    </a>
                                    <a href="javascript:;" class="dropdown-item border-radius-md">
                                        2FA Security
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item dropdown dropdown-hover mx-2">
                        <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"
                            id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            Blocks
                            <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-white.svg"
                                alt="down-arrow" class="arrow ms-1">
                        </a>
                        <div class="dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3"
                            aria-labelledby="dropdownMenuBlocks">
                            <div class="d-none d-lg-block">
                                <ul class="list-group">
                                    <li
                                        class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
                                                </div>
                                                <div class="w-100 d-flex align-items-center justify-content-between">
                                                    <div>
                                                        <h6
                                                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                            Page Sections</h6>
                                                        <span class="text-sm">See all 109 sections</span>
                                                    </div>
                                                    <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                        alt="down-arrow" class="arrow">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Page Headers
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Features
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Pricing
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                FAQ
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Blog Posts
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Testimonials
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Teams
                                            </a>
                                        </div>
                                    </li>
                                    <li
                                        class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <i class="ni ni-laptop text-gradient text-primary"></i>
                                                </div>
                                                <div class="w-100 d-flex align-items-center justify-content-between">
                                                    <div>
                                                        <h6
                                                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                            Navigation</h6>
                                                        <span class="text-sm">See all 9 navigations</span>
                                                    </div>
                                                    <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                        alt="down-arrow" class="arrow">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Navbars
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Nav Tabs
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Pagination
                                            </a>
                                        </div>
                                    </li>
                                    <li
                                        class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <i class="ni ni-badge text-gradient text-primary"></i>
                                                </div>
                                                <div class="w-100 d-flex align-items-center justify-content-between">
                                                    <div>
                                                        <h6
                                                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                            Input Areas</h6>
                                                        <span class="text-sm">See all 19 input areas</span>
                                                    </div>
                                                    <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                        alt="down-arrow" class="arrow">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Newsletter
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Contact Sections
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Inputs
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Forms
                                            </a>
                                        </div>
                                    </li>
                                    <li
                                        class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <i class="ni ni-notification-70 text-gradient text-primary"></i>
                                                </div>
                                                <div class="w-100 d-flex align-items-center justify-content-between">
                                                    <div>
                                                        <h6
                                                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                            Attention Catchers</h6>
                                                        <span class="text-sm">See all 14 examples</span>
                                                    </div>
                                                    <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                        alt="down-arrow" class="arrow">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Alerts
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Notifications
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Modals
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Tooltips &amp; Popovers
                                            </a>
                                        </div>
                                    </li>
                                    <li
                                        class="nav-item dropdown dropdown-hover dropdown-subitem list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <i class="ni ni-app text-gradient text-primary"></i>
                                                </div>
                                                <div class="w-100 d-flex align-items-center justify-content-between">
                                                    <div>
                                                        <h6
                                                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                            Elements</h6>
                                                        <span class="text-sm">See all 32 elements</span>
                                                    </div>
                                                    <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-dark.svg"
                                                        alt="down-arrow" class="arrow">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Avatars
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Badges
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Breadcrumbs
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Buttons
                                            </a>
                                            <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                                Button Groups
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="row d-lg-none">
                                <div class="col-md-12">
                                    <div class="d-flex mb-2">
                                        <div class="icon h-10 me-3 d-flex mt-1">
                                            <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
                                        </div>
                                        <div class="w-100 d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Page Sections</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Page Headers
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Features
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Pricing
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        FAQ
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Blog Posts
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Testimonials
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Teams
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Stats
                                    </a>
                                    <div class="d-flex mb-2 mt-3">
                                        <div class="icon h-10 me-3 d-flex mt-1">
                                            <i class="ni ni-laptop text-gradient text-primary"></i>
                                        </div>
                                        <div class="w-100 d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Navigation</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Navbars
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Nav Tabs
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Pagination
                                    </a>
                                    <div class="d-flex mb-2 mt-3">
                                        <div class="icon h-10 me-3 d-flex mt-1">
                                            <i class="ni ni-badge text-gradient text-primary"></i>
                                        </div>
                                        <div class="w-100 d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Input Areas</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Newsletter
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Contact Sections
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Inputs
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Forms
                                    </a>
                                    <div class="d-flex mb-2 mt-3">
                                        <div class="icon h-10 me-3 d-flex mt-1">
                                            <i class="ni ni-notification-70 text-gradient text-primary"></i>
                                        </div>
                                        <div class="w-100 d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Attention Catchers</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Alerts
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Notifications
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Modals
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Tooltips &amp; Popovers
                                    </a>
                                    <div class="d-flex mb-2 mt-3">
                                        <div class="icon h-10 me-3 d-flex mt-1">
                                            <i class="ni ni-app text-gradient text-primary"></i>
                                        </div>
                                        <div class="w-100 d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Elements</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Avatars
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Badges
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Breadcrumbs
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Buttons
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Button Groups
                                    </a>
                                    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
                                        Dropdowns
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item dropdown dropdown-hover mx-2">
                        <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"
                            id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            Docs
                            <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/down-arrow-white.svg"
                                alt="down-arrow" class="arrow ms-1">
                        </a>
                        <div class="dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg"
                            aria-labelledby="dropdownMenuDocs">
                            <div class="d-none d-lg-block">
                                <ul class="list-group">
                                    <li class="nav-item list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <svg class="text-secondary" width="16px" height="16px"
                                                        viewBox="0 0 40 40" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <title>spaceship</title>
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <g transform="translate(-1720.000000, -592.000000)"
                                                                fill="#FFFFFF" fill-rule="nonzero">
                                                                <g transform="translate(1716.000000, 291.000000)">
                                                                    <g transform="translate(4.000000, 301.000000)">
                                                                        <path class="color-background"
                                                                            d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z">
                                                                        </path>
                                                                        <path class="color-background"
                                                                            d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z">
                                                                        </path>
                                                                        <path class="color-background"
                                                                            d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
                                                                            opacity="0.598539807"></path>
                                                                        <path class="color-background"
                                                                            d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
                                                                            opacity="0.598539807"></path>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <h6
                                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                        Getting Started</h6>
                                                    <span class="text-sm">All about overview, quick start, license and
                                                        contents</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <svg class="text-secondary" width="16px" height="16px"
                                                        viewBox="0 0 40 44" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <title>document</title>
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <g transform="translate(-1870.000000, -591.000000)"
                                                                fill="#FFFFFF" fill-rule="nonzero">
                                                                <g transform="translate(1716.000000, 291.000000)">
                                                                    <g transform="translate(154.000000, 300.000000)">
                                                                        <path class="color-background"
                                                                            d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                                            opacity="0.603585379"></path>
                                                                        <path class="color-background"
                                                                            d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                                        </path>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <h6
                                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                        Foundation</h6>
                                                    <span class="text-sm">See our colors, icons and typography</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <svg class="text-secondary" width="16px" height="16px"
                                                        viewBox="0 0 42 42" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <title>box-3d-50</title>
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <g transform="translate(-2319.000000, -291.000000)"
                                                                fill="#FFFFFF" fill-rule="nonzero">
                                                                <g transform="translate(1716.000000, 291.000000)">
                                                                    <g transform="translate(603.000000, 0.000000)">
                                                                        <path class="color-background"
                                                                            d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                                                                        </path>
                                                                        <path class="color-background"
                                                                            d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
                                                                            opacity="0.7"></path>
                                                                        <path class="color-background"
                                                                            d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
                                                                            opacity="0.7"></path>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <h6
                                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                        Components</h6>
                                                    <span class="text-sm">Explore our collection of fully designed
                                                        components</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <svg class="text-secondary" width="16px" height="16px"
                                                        viewBox="0 0 40 44" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <title>switches</title>
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <g transform="translate(-1870.000000, -440.000000)"
                                                                fill="#FFFFFF" fill-rule="nonzero">
                                                                <g transform="translate(1716.000000, 291.000000)">
                                                                    <g transform="translate(154.000000, 149.000000)">
                                                                        <path class="color-background"
                                                                            d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z"
                                                                            opacity="0.6"></path>
                                                                        <path class="color-background"
                                                                            d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z">
                                                                        </path>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <h6
                                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                        Plugins</h6>
                                                    <span class="text-sm">Check how you can integrate our
                                                        plugins</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="nav-item list-group-item border-0 p-0">
                                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                            <div class="d-flex">
                                                <div class="icon h-10 me-3 d-flex mt-1">
                                                    <svg class="text-secondary" width="16px" height="16px"
                                                        viewBox="0 0 40 40" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink">
                                                        <title>settings</title>
                                                        <g stroke="none" stroke-width="1" fill="none"
                                                            fill-rule="evenodd">
                                                            <g transform="translate(-2020.000000, -442.000000)"
                                                                fill="#FFFFFF" fill-rule="nonzero">
                                                                <g transform="translate(1716.000000, 291.000000)">
                                                                    <g transform="translate(304.000000, 151.000000)">
                                                                        <polygon class="color-background"
                                                                            opacity="0.596981957"
                                                                            points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667">
                                                                        </polygon>
                                                                        <path class="color-background"
                                                                            d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
                                                                            opacity="0.596981957"></path>
                                                                        <path class="color-background"
                                                                            d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z">
                                                                        </path>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <h6
                                                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                        Utility Classes</h6>
                                                    <span class="text-sm">For those who want flexibility, use our
                                                        utility classes</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="row d-lg-none">
                                <div class="col-md-12 g-0">
                                    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                        <div class="d-flex">
                                            <div class="icon h-10 me-3 d-flex mt-1">
                                                <svg class="text-secondary" width="16px" height="16px"
                                                    viewBox="0 0 40 40" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <title>spaceship</title>
                                                    <g stroke="none" stroke-width="1" fill="none"
                                                        fill-rule="evenodd">
                                                        <g transform="translate(-1720.000000, -592.000000)"
                                                            fill="#FFFFFF" fill-rule="nonzero">
                                                            <g transform="translate(1716.000000, 291.000000)">
                                                                <g transform="translate(4.000000, 301.000000)">
                                                                    <path class="color-background"
                                                                        d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z">
                                                                    </path>
                                                                    <path class="color-background"
                                                                        d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z">
                                                                    </path>
                                                                    <path class="color-background"
                                                                        d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
                                                                        opacity="0.598539807"></path>
                                                                    <path class="color-background"
                                                                        d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
                                                                        opacity="0.598539807"></path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Getting Started</h6>
                                                <span class="text-sm">All about overview, quick start, license and
                                                    contents</span>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                        <div class="d-flex">
                                            <div class="icon h-10 me-3 d-flex mt-1">
                                                <svg class="text-secondary" width="16px" height="16px"
                                                    viewBox="0 0 40 44" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <title>document</title>
                                                    <g stroke="none" stroke-width="1" fill="none"
                                                        fill-rule="evenodd">
                                                        <g transform="translate(-1870.000000, -591.000000)"
                                                            fill="#FFFFFF" fill-rule="nonzero">
                                                            <g transform="translate(1716.000000, 291.000000)">
                                                                <g transform="translate(154.000000, 300.000000)">
                                                                    <path class="color-background"
                                                                        d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                                        opacity="0.603585379"></path>
                                                                    <path class="color-background"
                                                                        d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                                    </path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Foundation</h6>
                                                <span class="text-sm">See our colors, icons and typography</span>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                        <div class="d-flex">
                                            <div class="icon h-10 me-3 d-flex mt-1">
                                                <svg class="text-secondary" width="16px" height="16px"
                                                    viewBox="0 0 42 42" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <title>box-3d-50</title>
                                                    <g stroke="none" stroke-width="1" fill="none"
                                                        fill-rule="evenodd">
                                                        <g transform="translate(-2319.000000, -291.000000)"
                                                            fill="#FFFFFF" fill-rule="nonzero">
                                                            <g transform="translate(1716.000000, 291.000000)">
                                                                <g transform="translate(603.000000, 0.000000)">
                                                                    <path class="color-background"
                                                                        d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                                                                    </path>
                                                                    <path class="color-background"
                                                                        d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
                                                                        opacity="0.7"></path>
                                                                    <path class="color-background"
                                                                        d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
                                                                        opacity="0.7"></path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Components</h6>
                                                <span class="text-sm">Explore our collection of fully designed
                                                    components</span>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                        <div class="d-flex">
                                            <div class="icon h-10 me-3 d-flex mt-1">
                                                <svg class="text-secondary" width="16px" height="16px"
                                                    viewBox="0 0 40 44" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <title>switches</title>
                                                    <g stroke="none" stroke-width="1" fill="none"
                                                        fill-rule="evenodd">
                                                        <g transform="translate(-1870.000000, -440.000000)"
                                                            fill="#FFFFFF" fill-rule="nonzero">
                                                            <g transform="translate(1716.000000, 291.000000)">
                                                                <g transform="translate(154.000000, 149.000000)">
                                                                    <path class="color-background"
                                                                        d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z"
                                                                        opacity="0.6"></path>
                                                                    <path class="color-background"
                                                                        d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z">
                                                                    </path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Plugins</h6>
                                                <span class="text-sm">Check how you can integrate our plugins</span>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
                                        <div class="d-flex">
                                            <div class="icon h-10 me-3 d-flex mt-1">
                                                <svg class="text-secondary" width="16px" height="16px"
                                                    viewBox="0 0 40 40" version="1.1"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <title>settings</title>
                                                    <g stroke="none" stroke-width="1" fill="none"
                                                        fill-rule="evenodd">
                                                        <g transform="translate(-2020.000000, -442.000000)"
                                                            fill="#FFFFFF" fill-rule="nonzero">
                                                            <g transform="translate(1716.000000, 291.000000)">
                                                                <g transform="translate(304.000000, 151.000000)">
                                                                    <polygon class="color-background"
                                                                        opacity="0.596981957"
                                                                        points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667">
                                                                    </polygon>
                                                                    <path class="color-background"
                                                                        d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
                                                                        opacity="0.596981957"></path>
                                                                    <path class="color-background"
                                                                        d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z">
                                                                    </path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div>
                                                <h6
                                                    class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                                    Utility Classes</h6>
                                                <span class="text-sm">All about overview, quick start, license and
                                                    contents</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="navbar-nav d-lg-block d-none">
                    <li class="nav-item">
                        <a href="javascript:;" class="btn btn-sm mb-0 me-1 bg-gradient-primary">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <header class="">
        <div class="page-header min-vh-75"
            style="background-image: url(<?php echo e(asset('landing-page/assets/img/besakih1.jpg')); ?>);">
            <span class="mask bg-gradient-dark opacity-7"></span>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-sm-9 text-start">
                        <h1 class="display-2 font-weight-bolder text-white mb-4" spellcheck="false">A Blog for Food
                            Lovers</h1>
                        <p class="lead text-white mb-5">We’re constantly trying to express ourselves and actualize our
                            dreams. If you have the opportunity to play this game. If you have the opportunity to play
                            this game.</p>
                        <a href="javascript:;" class="btn btn-white">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="py-0">
        <div class="row">
            <div class="col-6 text-center mx-auto mt-5 mb-4">
                <h2 spellcheck="false">Latest Blogs</h2>
                <p>See what people from all around the world are saying about our website.
                </p>
            </div>
        </div>
    </section>
    <section class="">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-6 justify-content-center d-flex flex-column">
                            <div class="card rounded-3">
                                <div class="d-block blur-shadow-image">
                                    <img src="https://images.unsplash.com/photo-1568827999250-3f6afff96e66?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNha2V8ZW58MHwwfDB8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60"
                                        alt="img-blur-shadow-blog-2" class="img-fluid shadow rounded-3">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 justify-content-center d-flex flex-column ps-lg-5 pt-lg-0 pt-3">
                            <h6 class="category text-info mt-3">Cooking</h6>
                            <h3>
                                <a href="javascript:;" class="text-darker">A Sweet Cake with Chocolate and
                                    Strawberry</a>
                            </h3>
                            <p>
                                Warner Music Group announced today it’s acquiring the selected assets of the music
                                platform Songkick, including its app for finding concerts and the company’s trademark.
                                Songkick has been involved in a lawsuit against the major… <a href="javascript:;"
                                    class="text-darker icon-move-right text-sm">Read More
                                    <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
                                </a>
                            </p>
                            <p class="author">
                                by <a href="javascript:;" class="ms-1"><span
                                        class="font-weight-bold text-info">Sarah Perez</span></a>, 2 days ago
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 mt-5">
                    <div class="row flex-row-reverse">
                        <div class="col-lg-6 justify-content-center d-flex flex-column">
                            <div class="card rounded-3">
                                <div class="blur-shadow-image">
                                    <img src="https://images.unsplash.com/photo-1562376552-0d160a2f238d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1625&amp;q=80"
                                        alt="img-blur-shadow-blog-2" class="img-fluid shadow rounded-3">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-lg-5 justify-content-center d-flex flex-column pt-lg-0 pt-3">
                            <h6 class="category text-info mt-3">Waffles</h6>
                            <h3>
                                <a href="javascript:;" class="text-darker">Sweet Waffles for a Lazy Sunday</a>
                            </h3>
                            <p>
                                Warner Music Group announced today it’s acquiring the selected assets of the music
                                platform Songkick, including its app for finding concerts and the company’s trademark.
                                Songkick has been involved in a lawsuit against the major… <a href="javascript:;"
                                    class="text-darker icon-move-right text-sm">Read More
                                    <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
                                </a>
                            </p>
                            <p class="author">
                                by <a href="javascript:;" class="ms-1"><span
                                        class="font-weight-bold text-info">Millie Borough</span></a>, 10 days ago
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-0">
        <div class="row">
            <div class="col-6 text-center mx-auto mt-5 mb-4">
                <h2 spellcheck="false">The Most Read</h2>
                <p>See what people from all around the world are saying about our website.
                </p>
            </div>
        </div>
    </section>
    <section class="pb-6">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-lg-0 mb-4">
                    <div class="card">
                        <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
                            <a href="javascript:;" class="d-block">
                                <img src="https://images.unsplash.com/photo-1626645738196-c2a7c87a8f58?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2070&amp;q=80"
                                    class="img-fluid border-radius-lg">
                            </a>
                        </div>

                        <div class="card-body pt-3">
                            <span
                                class="text-gradient text-warning text-uppercase text-xs font-weight-bold my-2">Chicken</span>
                            <a href="javascript:;" class="card-title h5 d-block text-darker">Crispy Chicken with
                                Tomatoes Sauce</a>
                            <p class="card-description mb-4">
                                Use border utilities to quickly style the border and border-radius of an element. Great
                                for images, buttons.
                            </p>
                            <div class="author align-items-center">
                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg"
                                    alt="..." class="avatar shadow">
                                <div class="name ps-3">
                                    <span>Mathew Glock</span>
                                    <div class="stats">
                                        <small>Posted on 28 February</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-lg-0 mb-4">
                    <div class="card">
                        <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
                            <a href="javascript:;" class="d-block">
                                <img src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGZvb2R8ZW58MHwwfDB8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60"
                                    class="img-fluid border-radius-lg">
                            </a>
                        </div>

                        <div class="card-body pt-3">
                            <span class="text-gradient text-info text-uppercase text-xs font-weight-bold my-2">Sea
                                Food</span>
                            <a href="javascript:;" class="text-darker card-title h5 d-block">Shrimps with
                                Avocado</a>
                            <p class="card-description mb-4">
                                Use border utilities to quickly style the border and border-radius of an element. Great
                                for images, buttons.
                            </p>
                            <div class="author align-items-center">
                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/ivana-square.jpg"
                                    alt="..." class="avatar shadow">
                                <div class="name ps-3">
                                    <span>Chriss Smahos</span>
                                    <div class="stats">
                                        <small>Posted 2 min ago</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-lg-0 mb-4">
                    <div class="card">
                        <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
                            <a href="javascript:;" class="d-block">
                                <img src="https://images.unsplash.com/photo-1610614819513-58e34989848b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2069&amp;q=80"
                                    class="img-fluid border-radius-lg">
                            </a>
                        </div>

                        <div class="card-body pt-3">
                            <span class="text-gradient text-warning text-uppercase text-xs font-weight-bold my-2">fast
                                Food</span>
                            <a href="javascript:;" class="text-darker card-title h5 d-block">Burger with Beef
                                Meet</a>
                            <p class="card-description mb-4">
                                Use border utilities to quickly style the border and border-radius of an element. Great
                                for images, buttons.
                            </p>
                            <div class="author align-items-center">
                                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/marie.jpg"
                                    alt="..." class="avatar shadow">
                                <div class="name ps-3">
                                    <span>Elijah Miller</span>
                                    <div class="stats">
                                        <small>Posted now</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 mt-3">
                    <div class="row flex-row-reverse">
                        <div class="col-lg-6 justify-content-center d-flex flex-column">
                            <div class="card rounded-3">
                                <div class="blur-shadow-image">
                                    <img src="https://images.unsplash.com/photo-1616669944447-d65d41a222bd?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2054&amp;q=80"
                                        alt="img-blur-shadow-blog-2" class="img-fluid shadow rounded-3">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-lg-5 justify-content-center d-flex flex-column pt-lg-0 pt-3">
                            <h6 class="category text-info mt-3">Chef Select</h6>
                            <h3>
                                <a href="javascript:;" class="text-darker">Duck Breast by Chef
                                    Julian&nbsp;Salomé</a>
                            </h3>
                            <p>
                                Warner Music Group announced today it’s acquiring the selected assets of the music
                                platform Songkick, including its app for finding concerts and the company’s trademark.
                                Songkick has been involved in a lawsuit against the major… <a href="javascript:;"
                                    class="text-darker icon-move-right text-sm">Read More
                                    <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
                                </a>
                            </p>
                            <p class="author">
                                by <a href="javascript:;" class="ms-1"><span
                                        class="font-weight-bold text-info">Millie Borough</span></a>, 10 days ago
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 text-start">
                    <h4>Get Update with the Newest Blogs</h4>
                    <p class="mb-0">The latest news, articles and resources sent to your inbox weekely.</p>
                </div>
                <div class="col-lg-5 ms-auto text-end mt-4 mt-lg-0">
                    <div class="row">
                        <div class="col-lg-8 col-md-4 col-7">
                            <div class="form-group mb-0">
                                <div class="input-group">
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                                        <input class="form-control" placeholder="Your Email" type="email">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-5 text-start">
                            <button type="button" class="btn bg-gradient-primary mb-0 h-100">Subscribe</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mb-4 mx-auto text-center">
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        Company
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        About Us
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        Team
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        Products
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        Blog
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
                        Pricing
                    </a>
                </div>
                <div class="col-lg-8 mx-auto text-center mb-4 mt-2">
                    <a href="javascript:;" class="text-secondary me-xl-4 me-4">
                        <span class="text-lg fab fa-dribbble" aria-hidden="true"></span>
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-4 me-4">
                        <span class="text-lg fab fa-twitter" aria-hidden="true"></span>
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-4 me-4">
                        <span class="text-lg fab fa-instagram" aria-hidden="true"></span>
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-4 me-4">
                        <span class="text-lg fab fa-pinterest" aria-hidden="true"></span>
                    </a>
                    <a href="javascript:;" class="text-secondary me-xl-4 me-4">
                        <span class="text-lg fab fa-github" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-8 mx-auto text-center mt-1">
                    <p class="mb-0 text-secondary">
                        Copyright © 2022 Soft by Creative Tim &amp; Loopple.
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <div class="loopple-badge">Made with<a href="https://www.loopple.com"><img
                src="https://www.loopple.com/img/loopple-logo.png" class="loopple-ml-1" style="width:55px"></a>
    </div>
    <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/core/bootstrap.min.js"
        type="text/javascript"></script>
    <script src="https://demos.creative-tim.com/soft-ui-design-system/assets/js/soft-design-system.min.js?v=1.0.5"
        type="text/javascript"></script>
    <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/plugins/countup.min.js"
        type="text/javascript"></script>
    <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/plugins/flatpickr.min.js"></script>
    <script>
        if (document.getElementById("state1")) {
            const countUp = new CountUp("state1", document.getElementById("state1").getAttribute("countTo"));
            if (!countUp.error) {
                countUp.start();
            } else {
                console.error(countUp.error);
            }
        }
        if (document.getElementById("state2")) {
            const countUp1 = new CountUp("state2", document.getElementById("state2").getAttribute("countTo"));
            if (!countUp1.error) {
                countUp1.start();
            } else {
                console.error(countUp1.error);
            }
        }
        if (document.getElementById("state3")) {
            const countUp2 = new CountUp("state3", document.getElementById("state3").getAttribute("countTo"));
            if (!countUp2.error) {
                countUp2.start();
            } else {
                console.error(countUp2.error);
            };
        }

        if (document.querySelector('.datepicker-1')) {
            flatpickr('.datepicker-1', {}); // flatpickr
        }

        if (document.querySelector('.datepicker-2')) {
            flatpickr('.datepicker-2', {}); // flatpickr
        }
    </script>
</body>
<?php /**PATH C:\laragon\www\Pendaki_App-main\resources\views/welcome.blade.php ENDPATH**/ ?>