body {
            background: #f8f9fa !important;
            overflow-x: hidden;
            font-size: 16px;
            padding: 0 !important;
        }

        .icon-large {
            font-size: 3.3rem !important;
        }

        .demo-card {
            text-align: center;
            color: #4a4a4a;
            text-transform: capitalize;
        }

        .demo-card img {
            border-radius: 8px;
            box-shadow: 0px 2px 14px -3px #00000026;
            margin-right: 1px;
        }

        .demo-card:hover.demo-card img,
        .demo-card:hover span.new {
            transition: 0.4s ease all;
            transform: translateY(-10px);
            box-shadow: rgba(34, 48, 102, 0.1) 0px 18px 27.2px -5px;
        }

        .demo-card span.new {
            color: white;
            background-color: red;
            padding: 2px 9px;
            border-radius: 6px;
            position: absolute;
            z-index: 1;
            right: -12px;
            top: -13px;
            box-shadow: 2px 2px 3px 0px #cecece;
        }

        .demo-card p {
            margin-top: 15px;
        }

        .my-list {
            margin: 0;
            padding: 0;
        }

        .my-list li {
            list-style: none;
            display: inline-block;
            padding: 8px 23px;
            background: #f4fff7f0;
            margin-bottom: 8px;
            margin-left: 5px;
            border-radius: 100px;
        }

        .my-list li:hover {
            background: #f4fff7;
            transition: 0.4s ease all;
            transform: translateY(-2px);
        }

        .my-list li a {
            color: #7b7b7b;
        }

        .my-list li a:hover {
            color: #132763;
        }


        .demo-header {
            z-index: 1000 !important;
            position: relative;
            background: white;
            box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
        }

        .demo-header-transparent {
            background: transparent !important;
            box-shadow: none !important;
            position: absolute;
            width: 100%;
        }

        .demo-header #logo {
            font-size: 21px;
            font-weight: 600;
        }

        .demo-header #logo i {
            font-size: 28px;
        }

        .uk-navbar-nav>li>a {
            font-weight: 600;
            font-size: 15.6px;
            padding: 1.5rem 1.1rem;
            text-transform: inherit;
        }

        .demo-nav>li>a:after {
            background-color: #6e00ff;
            border-radius: 4px;
            content: "";
            margin-top: 35px;
            height: 5px;
            position: absolute;
            transform: scaleX(0);
            transition: transform 0.25s;
            width: 13px;
        }

        .uk-light .demo-nav>li>a:after {
            background-color: rgb(255, 241, 227);

        }

        .demo-nav>.uk-active a:after {
            transform: scaleX(1);
        }

        .uk-navbar-nav>li.uk-active>a {
            color: #6e00ff;
        }

        .demo-hero {
            border-radius: 0 0 50px 50px;
            padding-bottom: 0px;
            margin-bottom: 78px;
        }

        .demo-hero .uk-container {
            padding: 100px 0;
            margin-bottom: -65px;
        }

        .demo-hero .img-hero {
            /* z-index: 19999; */
            position: relative;
        }

        .demo-hero h1,
        .demo-hero p {
            color: white;
        }

        .demo-hero .curve {
            width: 100%;
        }



        #logo {
            position: absolute;
            left: px;
        }

        #logo img {
            width: 38px;
        }

        #logo .logo-inverse {
            display: none;
        }

        .uk-light #logo img {
            /* display: none; */
        }

        .uk-light #logo .logo-inverse {
            display: inline;
        }

        .uk-light .button.primary {
            background-color: white;
            color: orange;
            border-color: white;
        }

        .mobi-head {
            display: none;
            height: 54px;
            padding: 10px;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1;
            justify-content: flex-end;
        }

        @media (max-width: 960px) {
            .demo-hero {
                border-radius: 0;
                margin-bottom: 0;
                margin-top: -50px;
                padding-top: 42px;
                text-align: center;
            }

            .mobi-head {
                display: flex;
            }

            .demo-hero .uk-container {
                padding: 50px 20px !important;
            }

            .demo-hero .img-hero,
            .demo-hero .curve {
                display: none;
            }

            .uk-container {
                padding: 0 30px;
            }
        }