/*
*----------------------------------------------------------------------------------------
Author        : rama hardian sidik
Template Name : Niapps - Multipurpose Agency It Services Bootstrap Template
Version       : 1.0
Filename      : main.css
* ------------------------------------------------------------ ----------- ------
  TABLE OF CONTENT
* ----------------------------------------------------------------------------------------
* 00.COLOR CSS.
* 01.BASE INDEX.  
* 02.GENERAL COMPONENT
    - loadder
    - headder
    - navigation 
    - mobile navigation
    - hero
    - footer
* 03. SECTION BLOCK
    - about section
    - feature section 
    - funfact section
    - testimonials section  
    - gap bottom section 
* 04.ABOUT PAGE.
* 05.SERVICES PAGE.  
* 06.PORTFOLIO PAGE.  
* 07.PRICING PAGE.   
* 08.TEAM PAGE. 
* 09.FAQ PAGE.
* 10.CONTACT PAGE.
* ----------------------------------------------------------------------------------------
*/

        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=Roboto+Slab:wght@300;400&display=swap');
        @import url(./vendor/bootstrap/bootstrap.css);
        @import url(./vendor/fontawesome/all.min.css);
        @import url(./vendor/owlcaraousel/owl.carousel.min.css);
        @import url(./vendor/owlcaraousel/owl.theme.default.min.css);
        @import url(./vendor/aos/aos.css);
        @import url(./vendor/magnific.css);
        /*
* ----------------------------------------------------------------------------------------
* 00.COLOR CSS.
* ----------------------------------------------------------------------------------------
*/

        :root {
            --basezero: #FFFF;
            --base: #EDF1FC;
            --base-two: #3451B5;
            --base-tre: #263F91;
            --base-four: #2AA2E1;
            --base-five: #33A9E9;
            --base-six: #FED82B;
            --color: #1E2434;
            --color-two: #4e5968;
            --color-tre: #FED82B;
            --color-four: #FFFFFF;
            --color-five: #263F91;
            --fontmain: 'Roboto Slab', sans-serif;
            --fontsec: 'Plus Jakarta Sans', sans-serif;
        }

        /*
* ----------------------------------------------------------------------------------------
* 01.BASE INDEX.
* ----------------------------------------------------------------------------------------
*/

        body {
            font-family: var(--fontmain);
            font-size: 13px;
            font-weight: 300;
            height: auto;
            background: var(--light-blue);
            color: var(--white);
            -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        a {
            cursor: pointer;
            text-decoration: none;
        }

        a:hover {
            color: var(--white);
        }

        input,
        textarea {
            position: relative;
            display: block;
            width: 100%;
            padding: 8px 15px 8px 16px;
            color: var(--color);
            border: none;
            font-size: 18px;
            border-bottom: 1px solid #d7d2bd;
            height: 50px;
            border-radius: 4px;
            background-color: var(--basezero);
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        button {
            border: none;
        }

        em {
            display: block;
            position: relative;
            width: 100%;
            text-transform: uppercase;
            font-weight: normal;
            color: red;
            margin: 10px 0;
        }

        textarea {
            height: auto;
            resize: none;
        }

        input:focus,
        textarea:focus {
            outline: none;
            border-bottom: 1px solid #d09900;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        ::placeholder {
            /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: var(--h-grey);
            opacity: .5;
            /* Firefox */
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: var(--h-grey);
        }

        ::-ms-input-placeholder {
            /* Microsoft Edge */
            color: var(--h-grey);
        }

        .inputform {
            height: 50px;
            width: 100%;
            border: none;
            background: var(--base);
            border-radius: 10px;
            padding-left: 20px;
        }

        .inputform:focus-visible {
            outline: none;
        }

        #submitsub {
            background: var(--base-six);
            border: none;
            width: 80px;
            position: absolute;
            height: 50px;
            font-size: 20px;
            right: 5px;
            top: 5px;
            border-radius: 10px;
        }

        .pad-half--sec {
            padding: 100px 0 !important;
        }

        .pad-half {
            padding: 150px 0 100px 0 !important;
        }

        .pad-full {
            padding: 150px 0 !important;
        }

        .pad-full-gap {
            padding: 150px 0 200px 0 !important;
        }

        .pad-up {
            padding: 150px 0 0 0 !important;
        }

        .pad-down {
            padding: 0 0 150px 0 !important;
        }

        .btn-light-line {
            color: var(--color-four);
            border-radius: 5px;
            font-size: 18px;
            font-family: var(--fontsec);
            display: inline-block;
            position: relative;
        }

        .btn-light-line>i {
            position: absolute;
            font-size: 15px !important;
            right: -30px;
        }

        .btn-light-line.non-button--light>i {
            top: 8px;
        }

        .btn-light-line.non-button>i {
            top: 18px;
        }

        .btn-light-line:hover {
            color: var(--color-four);
        }

        .btn-light-line.non-button:hover {
            color: var(--color-two) !important;
        }

        .btn-light-line.non-button--light:hover {
            color: var(--color-four) !important;
        }

        .btn-light {
            background: var(--base-two);
            color: var(--color-four);
            font-family: var(--fontsec);
            border-radius: 100px;
            display: inline-block;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .btn-light:before {
            content: "";
            position: absolute;
            bottom: -250px;
            left: 50%;
            transform: translateX(-50%);
            width: 350px;
            height: 250px;
            background: var(--base-tre);
            border-radius: 50%;
            z-index: -1;
            transition: .7s all ease-in-out;
        }

        .btn-light span {
            display: block;
            width: 100%;
            height: 100%;
            transition: .3s all ease-in-out;
            z-index: 3;
            color: var(--color-four);
            position: relative;
        }

        .btn-light:hover {
            background: var(--base-two);
            color: var(--color-four);
        }

        .btn-light:active {
            background: var(--base-two);
            color: var(--color-four);
        }

        .btn-light:hover:before {
            bottom: -150px;
        }

        .btn-dark {
            background: var(--base);
            color: var(--color-five);
            font-family: var(--fontsec);
            border-radius: 100px;
            display: inline-block;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-dark:active {
            background: var(--base);
            color: var(--color-five);
        }

        .btn-dark:before {
            content: "";
            position: absolute;
            bottom: -250px;
            left: 50%;
            transform: translateX(-50%);
            width: 350px;
            height: 250px;
            background: var(--base-five);
            border-radius: 50%;
            z-index: -1;
            transition: .7s all ease-in-out;
        }

        .btn-dark span {
            display: block;
            width: 100%;
            height: 100%;
            transition: .3s all ease-in-out;
            z-index: 3;
            color: var(--color-five);
            position: relative;
        }

        .btn-dark:hover {
            background: var(--base);
        }

        .btn-dark:hover span {
            color: var(--base);
        }

        .btn-dark:hover:before {
            bottom: -150px;
        }

        .non-button {
            font-size: 18px;
            padding: 10px 0;
            position: relative;
        }

        .small-button {
            font-size: 15px;
            padding: 10px 30px;
        }

        .med-button {
            font-size: 15px;
            padding: 10px 50px;
        }

        .big-button {
            font-size: 18px;
            padding: 10px 60px;
        }

        .h3-extrabig {
            font-family: var(--fontsec);
            font-size: 150px;
            line-height: 1.3;
        }

        .h1-big {
            font-family: var(--fontsec);
            font-size: 56px;
            line-height: 1.3;
        }

        .h1-med {
            font-family: var(--fontsec);
            font-size: 40px;
            line-height: 1.3;
        }

        .h3-tagline {
            font-family: var(--fontsec);
            font-size: 40px;
            line-height: 1.3;
        }

        .h3-medium {
            font-family: var(--fontsec);
            font-size: 30px;
            line-height: 1.5;
        }

        .h3-small {
            font-family: var(--fontsec);
            font-size: 18px;
            line-height: 1.5;
        }

        .h3-big {
            font-family: var(--fontsec);
            font-size: 50px;
            line-height: 1.3;
        }

        .we-reg {
            font-weight: 400;
        }

        .we-med {
            font-weight: 600;
        }

        .we-bold {
            font-weight: 800;
        }

        .col-bgzero {
            background: var(--basezero);
        }

        .col-bgone {
            background: var(--base);
        }

        .col-bgtwo {
            background: var(--base-two);
        }

        .col-bgtre {
            background: var(--base-tre);
        }

        .col-bgfour {
            background: var(--base-four);
        }

        .col-bgfive {
            background: var(--base-five);
        }

        .col-bgsix {
            background: var(--color-tre);
        }

        .col-one {
            color: var(--color);
        }

        .col-two {
            color: var(--color-two);
        }

        .col-tre {
            color: var(--color-tre);
        }

        .col-four {
            color: var(--color-four);
        }

        .col-five {
            color: var(--color-five);
        }

        .titlemini {
            text-transform: uppercase;
            position: relative;
            letter-spacing: 1.5px;
            font-size: 13px;
            z-index: 1;
            padding: 0 65px;
        }

        .titlemini-noline {
            text-transform: uppercase;
            position: relative;
            letter-spacing: 1.5px;
            font-size: 13px;
            z-index: 1;
        }

        .titlemini:after {
            content: '';
            position: absolute;
            height: 2px;
            width: 50px;
            left: 0;
            top: 10px;
            background: var(--base-tre);
        }

        .p-tagline {
            font-size: 18px;
            line-height: 1.7;
        }

        .p-tagline--small {
            font-size: 15px;
            line-height: 1.7;
        }

        .p-tagline--mini {
            font-size: 13px;
            line-height: 1.7;
        }

        .fixi {
            background: var(--color-four);
            -webkit-box-shadow: 0 2px 28px 0 rgb(0 0 0 / 6%);
            box-shadow: 0 2px 28px 0 rgb(0 0 0 / 6%);
            z-index: 9;
        }

        .strip-down:after {
            content: "";
            position: absolute;
            width: 100px;
            height: 5px;
            background: var(--base-six);
            left: 0;
            right: 0;
            bottom: -30px;
            margin: auto;
        }

        .ornament {
            position: absolute;
            top: -450px;
            width: 100%;
            height: 100px;
        }

        .ornament-2 {
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
        }

        .outline {
            position: relative;
            display: inline-block;
            z-index: 1;
        }

        .outline:after {
            content: '';
            position: absolute;
            width: 100%;
            bottom: 5px;
            height: 25px;
            left: 0;
            z-index: -1;
            background: var(--base-six);
        }

        .video-play-button {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            box-sizing: content-box;
            display: block;
            width: 32px;
            height: 44px;
            border-radius: 50%;
            padding: 18px 20px 18px 28px;
            text-decoration: none;
            font-size: 30px;
        }

        .video-play-button:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 80px;
            height: 80px;
            background: var(--base);
            border-radius: 50%;
            animation: pulse 1500ms ease-out infinite;
        }

        .video-play-button:after {
            content: "";
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 80px;
            height: 80px;
            background: var(--base);
            border-radius: 50%;
            transition: all 200ms;
        }

        .video-play-button i {
            display: block;
            position: absolute;
            z-index: 3;
            width: 0;
            top: 30%;
            height: 0;
        }

        .font-main {
            font-family: var(--fontmain) !important;
        }

        .font-sec {
            font-family: var(--fontsec) !important;
        }

        .grad-left:before {
            width: 100%;
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 0;
            background: linear-gradient(to right, rgba(237, 241, 252, 1) 35%, rgba(255, 255, 255, 0) 94%);
        }

        .grad-full:before {
            width: 100%;
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 0;
            background: rgba(237, 241, 252, .9);
        }

        .grad-right:before {
            width: 100%;
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 0;
            background: linear-gradient(to left, rgba(237, 241, 252, 1) 35%, rgba(255, 255, 255, 0) 94%);
        }

        .accordion-item {
            border: none;
        }

        .accordion-button {
            border-top: 1px solid var(--base);
        }

        .accordion-button:focus {
            box-shadow: unset;
        }

        .accordion-button .counter {
            display: inline-block;
            width: 30px;
            height: 30px;
            font-weight: 600;
            vertical-align: middle;
            line-height: 30px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -o-border-radius: 100px;
            border-radius: 100px;
            text-align: center;
            background: var(--base);
            color: var(--base-tre);
            font-size: 12px;
            margin-right: 10px;
        }

        .accordion-button::after {
            background: none;
        }

        .accordion-button:not(.collapsed)::after {
            background-image: unset;
        }

        .accordion-button {
            box-shadow: none;
            background: none;
        }

        .accordion-button:not(.collapsed) {
            color: var(--color-four);
            background: var(--base-two);
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        /* animation */

        @keyframes pulse {
            0% {
                transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
                opacity: 1;
            }

            100% {
                transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
                opacity: 0;
            }
        }

        @-webkit-keyframes float {
            0% {
                transform: translatey(0px);
            }

            50% {
                transform: translatey(-20px);
            }

            100% {
                transform: translatey(0px);
            }
        }

        @keyframes float {
            0% {
                transform: translatey(0px);
            }

            50% {
                transform: translatey(-20px);
            }

            100% {
                transform: translatey(0px);
            }
        }

        /* media query */

        @media screen and (max-width: 1440px) {
            .ornament {
                top: -250px;
            }
        }

        @media screen and (max-width: 999px) {
            .ornament {
                top: -180px;
            }

            .h1-big {
                font-size: 60px;
                line-height: 1.3;
            }

            .h3-tagline {
                font-size: 30px;
                line-height: 1.3;
            }

            .grad-right:before {
                background: linear-gradient(to left, rgba(237, 241, 252, .8) 100%, rgba(255, 255, 255, 0) 94%);
            }

            .grad-left:before {
                background: linear-gradient(to right, rgba(237, 241, 252, .8) 100%, rgba(255, 255, 255, 0) 94%);
            }
        }

        @media screen and (max-width: 1366px) {
            .ornament {
                top: -250px;
            }
        }

        @media screen and (max-width: 1024px) {
            .ornament {
                top: -180px;
            }
        }

        @media screen and (max-width: 899px) {
            .ornament {
                top: -130px;
            }
        }

        @media screen and (max-width:680px) {
            .titlemini {
                font-size: 13px;
            }

            .h3-tagline {
                font-size: 25px;
            }

            .h3-medium {
                font-size: 18px;
            }

            .h3-big {
                font-size: 30px;
            }

            .p-tagline {
                font-size: 15px;
            }

            .p-tagline--small {
                font-size: 13px;
            }
        }

        @media screen and (max-width: 599px) {
            .ornament {
                top: -100px;
            }

            .h3-big {
                font-size: 25px;
            }

            .h1-big {
                font-size: 40px;
                line-height: 1.3;
            }
        }

        @media screen and (max-width: 490px) {
            .ornament {
                top: -70px;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- loadder
* ----------------------------------------------------------------------------------------
*/

        #preloader {
            position: fixed;
            display: table;
            table-layout: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: var(--base);
            z-index: 999999;
        }

        .wrapload {
            position: absolute;
            top: 50%;
            left: 40%;
            transform: translate(-50%, -50%);
        }

        .dotsload {
            position: absolute;
            width: 150px;
            height: 50px;
            transform: scale(0.25, 0.25);
        }

        .dot {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 50%;
            transform: translate(0, -30%);
            opacity: 0;
            border-radius: 50%;
            background-color: var(--base-four);
        }

        .dot-1 {
            animation: animation-dots 1.5s infinite linear 1s;
        }

        .dot-2 {
            animation: animation-dots 1.5s infinite linear 0.5s;
        }

        .dot-3 {
            animation: animation-dots 1.5s infinite linear;
        }

        @-moz-keyframes animation-dots {
            0% {
                left: -350px;
                opacity: 0;
            }

            20% {
                left: 0px;
                opacity: 1;
            }

            80% {
                left: 250px;
                opacity: 1;
            }

            100% {
                opacity: 0;
                left: 550px;
            }
        }

        @-webkit-keyframes animation-dots {
            0% {
                left: -350px;
                opacity: 0;
            }

            20% {
                left: 0px;
                opacity: 1;
            }

            80% {
                left: 250px;
                opacity: 1;
            }

            100% {
                opacity: 0;
                left: 550px;
            }
        }

        @-o-keyframes animation-dots {
            0% {
                left: -350px;
                opacity: 0;
            }

            20% {
                left: 0px;
                opacity: 1;
            }

            80% {
                left: 250px;
                opacity: 1;
            }

            100% {
                opacity: 0;
                left: 550px;
            }
        }

        @keyframes animation-dots {
            0% {
                left: -350px;
                opacity: 0;
            }

            20% {
                left: 0px;
                opacity: 1;
            }

            80% {
                left: 250px;
                opacity: 1;
            }

            100% {
                opacity: 0;
                left: 550px;
            }
        }

        /* media query */

        @media screen and (max-width: 899px) {
            .wrapload {
                left: 25%;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- headder
* ----------------------------------------------------------------------------------------
*/

        #headerwrap {
            position: fixed;
            width: 100%;
            z-index: 99;
        }

        .logobrand {
            position: relative;
            z-index: 9;
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- navigation
* ----------------------------------------------------------------------------------------
*/

        .listnav li {
            list-style: none;
            margin: 0 15px;
            display: inline-block;
            position: relative;
        }

        .listnav li a {
            font-family: var(--fontsec);
            font-weight: 600;
            font-size: 15px;
            color: var(--color);
            position: relative;
        }

        .listnav li a.itemlink:after {
            content: "";
            width: 0px;
            background: var(--base-two);
            height: 2px;
            left: auto;
            bottom: -6px;
            border-radius: 5px;
            z-index: -1;
            right: 0;
            position: absolute;
            transition: ease all 0.3s;
        }

        .listnav li a.itemlink:hover {
            color: var(--base-two);
        }

        .listnav li a.itemlink:hover:after {
            width: 100%;
            left: 0;
            right: auto;
        }

        .listnav li.active a {
            color: var(--base-two);
        }

        .listnav li.active a.itemlink:after {
            width: 100%;
            left: 0;
            right: auto;
        }

        .listnav li.has-child:after {
            font-family: FontAwesome;
            content: "\f078";
            color: var(--color);
            padding-left: 5px;
            font-size: 9px;
            position: relative;
            top: -2px;
        }

        .listnav li.has-child ul.submenu {
            padding: 0;
            width: 180px;
            height: auto;
            position: absolute;
            margin-top: 0;
            left: 0px;
            z-index: 10;
            visibility: hidden;
            opacity: 0;
            border-radius: 10px;
            background: var(--color-four);
            box-shadow: 0px 10px 15px 0px rgba(155, 154, 154, 0.2);
            transition: all .2s ease;
        }

        .listnav li.has-child ul.submenu li {
            margin: 0 !important;
            width: 100%;
            border-bottom: 1px solid rgba(155, 154, 154, 0.1);
            color: var(--color-two);
        }

        .listnav li.has-child ul.submenu li a {
            width: 100%;
            color: var(--color-two);
            font-size: 13px;
            display: inline-block;
            padding: 10px 0 10px 15px;
        }

        .listnav li.has-child ul.submenu li:last-child {
            border-bottom: none;
        }

        .listnav li.has-child ul.submenu li a:hover {
            background: var(--base-two);
            color: var(--color-four) !important;
        }

        .listnav li.has-child ul.submenu li.active a {
            background: var(--base-two);
            color: var(--color-four) !important;
        }

        .listnav li.has-child ul.submenu li.active:first-child a {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .listnav li.has-child ul.submenu li:first-child a:hover {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .listnav li.has-child ul.submenu li:last-child a:hover {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .listnav li.has-child:hover>ul.submenu {
            visibility: visible;
            opacity: 1;
            margin-top: 10px;
        }

        .navicon {
            position: absolute;
            right: 0;
            top: 15px;
            width: 0;
            height: 0;
            padding: 23px 30px;
            cursor: pointer;
            text-align: center;
            z-index: 9;
            border-radius: 5px;
        }

        .navicon__bar {
            left: 25%;
            top: 10px;
            position: absolute;
        }

        .navicon__bar:before,
        .navicon__bar:after {
            content: '';
            position: absolute;
            width: 30px;
            height: 3px;
            background: var(--color);
        }

        .navicon:hover .navicon__bar:before,
        .navicon:hover .navicon__bar:after {
            background: var(--color);
        }

        .navicon__bar:before {
            transform: rotate(0deg) translate(0px, -4px);
        }

        .navicon__bar:after {
            transform: rotate(0deg) translate(0px, 4px);
        }

        .navicon.active .navicon__bar:before {
            transform: rotate(-45deg) translate(0px, 0px);
        }

        .navicon.active .navicon__bar:after {
            transform: rotate(45deg) translate(0px, 0px);
        }

        .navicon.active:hover .navicon__bar .navicon__bar:before {
            transform: rotate(0deg) translate(0px, 0px);
        }

        .navicon.active:hover .navicon__bar .navicon__bar:after {
            transform: rotate(0deg) translate(0px, 0px);
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- mobile navigation
* ----------------------------------------------------------------------------------------
*/

        .menu-mobile {
            position: fixed;
            width: 100%;
            display: none;
            font-family: var(--fontsec);
            height: 100%;
            right: 0;
            left: 0;
            top: 0;
            z-index: 5;
            background: var(--color-four);
        }

        .wrap-navimobile {
            height: 100%;
            padding: 0 30px 150px 30px;
            overflow-x: auto;
        }

        .wrap-navimobile .listnavmobile {
            padding-left: 0;
        }

        .wrap-navimobile .listnavmobile li {
            list-style: none;
            padding: 10px 0;
        }

        .wrap-navimobile .listnavmobile li a {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--color-two);
            text-decoration: none;
        }

        .wrap-navimobile .listnavmobile li a:hover {
            text-decoration: none;
            color: var(--color-five);
        }

        .submenulink-mobile i {
            position: absolute;
            font-size: 13px;
            right: 0;
            top: 10px;
            z-index: -1;
        }

        .submenulink-mobile>a.dropmenu {
            display: block;
            position: relative;
            cursor: pointer;
        }

        .dropdownopen {
            padding-bottom: 20px;
        }

        .submenulink-mobile a.dropmenu>span {
            position: absolute;
            right: 0;
        }

        .submenu-mobile {
            display: none;
            padding: 10px 0;
        }

        .submenu-mobile>li {
            border-bottom: none !important;
        }

        .submenu-mobile>li a {
            font-size: 15px !important;
            color: var(--color-two) !important;
        }

        .menu-mobile.active {
            display: none;
        }

        .submenulink-mobile.opensubmenu ul[class=submenu-mobile] {
            display: block !important;
        }

        /* media query */

        @media (max-width: 999px) {
            .menu-mobile.active {
                display: block;
                padding: 100px 0 0 0;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- hero
* ----------------------------------------------------------------------------------------
*/

        .imghero {
            transform: translatey(0px);
            -webkit-animation: float 6s ease-in-out infinite;
            animation: float 6s ease-in-out infinite;
        }

        .imghero img {
            width: 100%;
        }

        /*
* ----------------------------------------------------------------------------------------
* 02.GENERAL COMPONENT
- footer
* --------     
*/

        .imgfoot img {
            width: 50%;
        }

        .footlink,
        .footlinksosmed {
            padding: 0;
            margin: 0;
        }

        .footlink li {
            list-style: none;
            margin: 10px 0;
        }

        .footlink li a {
            font-size: 15px;
            color: var(--color-four);
        }

        .footlinksosmed li {
            list-style: none;
            margin: 0 15px;
            display: inline-block;
        }

        .footlinksosmed li i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 50%;
            background: var(--base);
        }

        .footlinksosmed li a {
            font-size: 20px;
            color: var(--color-five);
        }

        #footerform .inputform {
            padding: 35px 102px 25px 25px;
        }

        /* media query */

        @media screen and (max-width: 680px) {
            .imgfoot img {
                width: 30%;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 03.SECTION BLOCK.
- about section   
* ----------------------------------------------------------------------------------------
*/

        #aboutsection {
            background: url('../asset/page/bg-cir.png'), var(--base-two);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top center;
        }

        .overlapsection {
            position: relative;
            top: -100px;
        }

        .itemslidewrap {
            padding: 50px 40px;
            color: var(--color-four);
            background: var(--base-five);
            position: relative;
            z-index: 1;
        }

        .itemslidewrap:after {
            content: "";
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            height: 0;
            width: 100%;
            transition: ease all 0.35s;
            background: var(--base-four);
            z-index: -1;
        }

        .itemslidewrap:hover:after {
            bottom: auto;
            top: 0;
            height: 100%;
        }

        .itemslidewrap i {
            font-size: 50px;
        }

        .itemslidewrap h3 {
            font-family: var(--fontsec);
            letter-spacing: 1.3px;
        }

        /*
* ----------------------------------------------------------------------------------------
* 03.SECTION BLOCK.
- feature section   
* ----------------------------------------------------------------------------------------
*/

        .imgagewrap {
            transform: translatey(0px);
            -webkit-animation: float 6s ease-in-out infinite;
            animation: float 6s ease-in-out infinite;
        }

        .imgagewrap img {
            width: 100%;
        }

        /*
* ----------------------------------------------------------------------------------------
* 03.SECTION BLOCK.
- funfact section   
* ----------------------------------------------------------------------------------------
*/

        .itemcount {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-four);
        }

        .counter {
            font-size: 40px;
            letter-spacing: 1.5px;
        }

        /*
* ----------------------------------------------------------------------------------------
* 03.SECTION BLOCK.
- testimonials section   
* ----------------------------------------------------------------------------------------
*/

        #testimonialsection {
            background: url('../asset/page/bg-line-2.png'), var(--base-two);
            background-size: inherit;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .itemtestimonial {
            padding: 80px 50px 20px;
            position: relative;
            background: var(--color-four);
            z-index: 1;
        }

        .itemtestimonial i {
            font-size: 80px;
            position: absolute;
            left: 50px;
            top: 30px;
            opacity: .1;
            color: var(--color-two);
        }

        .itemtestimonial:after {
            content: '';
            width: 100%;
            background: var(--base-two);
            height: 180px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
        }

        .userdetail {
            width: 100%;
        }

        .userdetail img {
            width: 100px !important;
            margin: 30px auto;
            position: relative;
            top: 20px;
            z-index: 1;
            border-radius: 100%;
            outline: 8px solid var(--color-four);
        }

        .clientlist {
            margin: 0;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .imgclient {
            padding: 0;
            max-width: 20%;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
        }

        .imgclient a {
            padding: 0 20px;
            height: 150px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .imgclient a img {
            max-width: 80%;
            vertical-align: middle;
            height: auto;
        }

        /* media query */

        @media screen and (max-width: 999px) {
            .imgclient {
                -webkit-box-flex: 0;
                max-width: 33.33%;
                -ms-flex: 0 0 33.33%;
                flex: 0 0 33.33%;
            }
        }

        @media screen and (max-width: 576px) {
            .imgclient {
                -webkit-box-flex: 0;
                max-width: 50%;
                -ms-flex: 0 0 50%;
                flex: 0 0 50%;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 03.SECTION BLOCK.
- gap bottom section   
* ----------------------------------------------------------------------------------------
*/

        #gapbottom {
            background-image: url(../asset/hero/bottom.jpg);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1;
        }

        #gapbottom:after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: var(--base-two);
            opacity: 0.8;
        }

        .wrapimgbottom {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .wrapimgbottom i {
            position: absolute;
            transform: translate(-55%, -30%);
            left: 50%;
            font-size: 30px;
            width: 50px;
            height: 50px;
            border: 5px solid var(--base-tre);
            border-radius: 100px;
            color: var(--color-five);
            text-align: center;
            padding: 5px 0;
        }

        /*
* ----------------------------------------------------------------------------------------
* 04.ABOUT PAGE.   
* ----------------------------------------------------------------------------------------
*/

        #headersection {
            position: relative;
            z-index: 3;
        }

        .videopromotion {
            width: 100%;
            position: relative;
            height: 400px;
        }

        .dots {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background: var(--base-two);
        }

        .dots:after {
            content: '';
            width: 50%;
            position: absolute;
            top: 10px;
            left: 60px;
            height: 3px;
            border-top: 3px dotted var(--base-two);
        }

        .step-one__count {
            width: 150px;
            height: 150px;
            background-color: var(--base-four);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            border-radius: 50%;
            font-size: 35px;
            color: #fff;
            font-weight: 600;
            margin: 0 auto;
        }

        .step-one__count:after {
            content: '';
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: var(--base-four);
            transform: rotate(45deg);
            border-radius: 77.5px 77px 0px 77.5px;
            transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
        }

        .step-one__count span {
            position: relative;
            z-index: 1;
            font-family: var(--fontsec);
        }

        /* media query */

        @media screen and (max-width: 480px) {
            .step-one__count {
                width: 100px;
                height: 100px;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 05.SERVICES PAGE.   
* ----------------------------------------------------------------------------------------
*/

        .itemservice {
            overflow: hidden;
            padding: 50px 30px;
            border-radius: 5px;
            position: relative;
            z-index: 1;
            transition: ease all 0.35s;
        }

        .itemservice:after {
            content: " ";
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            height: 0;
            width: 100%;
            transition: ease all 0.35s;
            background: var(--base-two);
            z-index: -1;
        }

        .itemservice i {
            font-size: 30px;
            width: 70px;
            height: 70px;
            background: var(--base-two);
            color: var(--color-four);
            text-align: center;
            border-radius: 5px;
            padding: 20px 0;
        }

        .itemservice p {
            color: var(--color-two);
        }

        .itemservice:hover {
            box-shadow: 32px 32px 71px 0px rgba(2, 82, 205, 0.278);
            z-index: 3;
        }

        .itemservice:hover i {
            background: var(--base);
            color: var(--color-five);
        }

        .itemservice:hover p {
            color: var(--color-four);
        }

        .itemservice:hover h3 {
            color: var(--color-four);
        }

        .itemservice:hover:after {
            bottom: auto;
            top: 0;
            height: 100%;
        }

        .itemservice:hover:before {
            height: 10px;
        }

        .overlapsection-down {
            position: relative;
            top: 100px;
        }

        .inneroverlap {
            padding: 50px 60px;
            border-radius: 10px;
            background: url('../asset/page/bg-cir.png'), var(--base-four);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .r-line {
            position: relative;
        }

        .r-line:before {
            position: absolute;
            content: '';
            background: rgba(255, 255, 255, 0.1);
            width: 1px;
            height: 170px;
            top: -28px;
            right: 0px;
        }

        .r-line:last-child:before {
            background: unset;
        }

        /* media query */

        @media screen and (max-width: 480px) {
            .inneroverlap {
                padding: 50px 30px;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 06.PORTFOLIO PAGE.   
* ----------------------------------------------------------------------------------------
*/

        #porfolio-warp {
            position: relative;
            padding-left: 0;
            padding-right: 0;
            z-index: 1;
        }

        .work-content.grid-gutter-md {
            margin-left: -8px;
            margin-right: -8px;
        }

        .portomasonry-item {
            cursor: pointer;
            margin: 0;
            position: relative;
            float: right;
            padding: 20px;
            width: 33.3333%;
            overflow: hidden;
        }

        .content-porto {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 100%;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            -o-transition: all .3s ease;
            transition: all .3s ease;
        }

        .titleporto {
            padding: 50px 30px 20px 30px;
            background: var(--basezero);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .portomasonry-item a {
            position: relative;
        }

        .viewproject {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%) scale(0.6);
            -ms-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 150px;
            height: 150px;
            padding: 30px;
            border-radius: 50%;
            background: var(--base-tre);
            text-align: center;
            opacity: 0;
            font-size: 18px;
            line-height: 1.33333;
            font-weight: 500;
            color: #fff;
            -webkit-transition: all .25s;
            -o-transition: all .25s;
            transition: all .25s;
        }

        .portomasonry-item:hover a .viewproject {
            opacity: 1;
            -webkit-transform: translate(-50%, -50%) scale(1);
            -ms-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
        }

        .filter {
            padding: 0;
        }

        .filter li {
            margin: 10px 15px;
            font-weight: 600;
            font-family: var(--fontsec);
            letter-spacing: 1px;
            display: inline-block;
            list-style: none;
            position: relative;
        }

        .filter li:after {
            content: "";
            width: 0px;
            background: var(--base-tre);
            height: 2px;
            left: auto;
            bottom: -6px;
            z-index: 1;
            right: 0;
            position: absolute;
            transition: ease all 0.3s;
        }

        .filter li.active {
            color: var(--color-five);
        }

        .filter li.active:after {
            width: 100%;
            left: 0;
            right: auto;
        }

        /* media query */

        @media screen and (max-width: 1024px) {
            .portomasonry-item {
                width: 50%;
            }
        }

        @media screen and (max-width: 699px) {
            .portomasonry-item {
                width: 100%;
                padding: 20px 10px;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 07.PRICING PAGE.   
* ----------------------------------------------------------------------------------------
*/

        .priceitem {
            background: var(--basezero);
            border-radius: 5px;
        }

        .titleplan {
            padding: 30px 20px;
            border-bottom: 1px solid var(--base);
        }

        .pricelog {
            font-size: 50px;
        }

        .pricedetail {
            padding: 10px;
        }

        .featureswrap {
            width: 100%;
            display: flex;
            border-radius: 20px;
            padding: 10px 20px;
            cursor: pointer;
            position: relative;
        }

        .featureswrap i {
            font-size: 20px;
        }

        .featureswrap:hover .feature-details {
            display: block;
        }

        /*
* ----------------------------------------------------------------------------------------
* 08.TEAM PAGE.   
* ----------------------------------------------------------------------------------------
*/

        .wrapgap-con {
            background: var(--basezero);
        }

        .imgpoto-detail {
            padding: 30px;
        }

        .imgpoto-detail i {
            font-size: 60px;
            color: var(--color-two);
            opacity: .3;
        }

        .teamlinksosmed {
            padding: 20px 0;
            margin: 0;
            border-top: 1px solid var(--base);
        }

        .teamlinksosmed li {
            list-style: none;
            margin: 0 15px;
            display: inline-block;
        }

        .teamlinksosmed li i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.0rem;
            height: 2.0rem;
            border-radius: 50%;
            background: var(--color);
        }

        .teamlinksosmed li a {
            font-size: 15px;
            color: var(--color-four);
        }

        /* media query */

        @media screen and (max-width: 699px) {
            .wrapgap-con {
                background: none;
            }

            .imgpoto-detail {
                background: var(--basezero);
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 09.FAQ PAGE.   
* ----------------------------------------------------------------------------------------
*/

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .tabnav {
            padding: 0;
        }

        .tabnav li a {
            display: inline-block;
            padding: 10px 30px;
            border: 2px solid var(--base-two);
        }

        .tabnav li {
            list-style: none;
            display: inline-block;
            position: relative;
            margin: 0 10px;
        }

        /* media query */

        @media screen and (max-width: 999px) {
            .tabnav li {
                margin: 10px 10px;
            }
        }

        /*
* ----------------------------------------------------------------------------------------
* 10.CONTACT PAGE.   
* ----------------------------------------------------------------------------------------
*/

        iframe {
            width: 100%;
            height: 450px;
        }

        .wrapinput-half {
            width: 100%;
            position: relative;
        }

        .wrapform {
            z-index: 9;
        }

        /* media query */

        @media screen and (max-width: 999px) {
            .wrapinput-half button {
                width: 100%;
            }
        }



        .m-header {
            display: flex;
            justify-content: space-between;
        }

        .m-header .position-relative {
            flex: 1;
        }

        .f-dfv {
            display: flex;
            align-items: center;
        }

        .f-dfvb {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .m-game {
            max-width: 1320px;
            margin: 100px auto;
        }

        .m-game .pics {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .m-game img {
            width: 100%;
        }

        .m-game .info {
            font-size: 18px;
            line-height: 1.5;
            padding-top: 20px;
        }

        .m-game .info p {
            margin-top: 20px;
        }

        .m-privacy {
            max-width: 1320px;
            margin: 100px auto;
            font-size: 18px;
            line-height: 1.5;
            padding: 0 20px;
        }

        .m-privacy p {
            margin-bottom: 30px;
        }