/**
    Theme Name:Rappix - App Landing Page
    Author:Freekytheme
    Version:1.0;

    */
    /**
    * Table of Contents
    * 1.0 - Fonts
    * 2.0 - Reset css
    * 3.0 - Common
    * 4.0 - Navbar
    * 5.0 - Banner
    * 6.0 - Counter
    * 7.0 - Feature
    * 8.0 - testimonial
    * 9.0 - Screenshot
    * 10.0 - Team
    * 11.0 - Pricing
    * 12.0 - Blog
    * 13.0 - FAQ
    * 14.0 - process
    * 15.0 - Footer
    * 16.0 - Responsive

    /* ==========================================================================
    1.0 Fonts
    ========================================================================== */ 

    /*Josefin sans font*/
    @font-face {
        font-family: 'josefin sans';
        src: url('../fonts/josefin-sans/josefinsans-bold-webfont.eot');
        src: url('../fonts/josefin-sans/josefinsans-bold-webfont-1.eot') format('embedded-opentype'),
            url('../fonts/josefin-sans/josefinsans-bold-webfont.woff2') format('woff2'),
            url('../fonts/josefin-sans/josefinsans-bold-webfont.woff') format('woff'),
            url('../fonts/josefin-sans/josefinsans-bold-webfont.ttf') format('truetype');
        font-weight: 700;

    }

    @font-face {
        font-family: 'josefin sans';
        src: url('../fonts/josefin-sans/josefinsans-semibold-webfont.eot');
        src: url('../fonts/josefin-sans/josefinsans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/josefin-sans/josefinsans-semibold-webfont.woff2') format('woff2'),
            url('../fonts/josefin-sans/josefinsans-semibold-webfont.woff') format('woff'),
            url('../fonts/josefin-sans/josefinsans-semibold-webfont.ttf') format('truetype');
        font-weight: 600;

    }

    @font-face {
        font-family: 'josefin sans';
        src: url('../fonts/josefin-sans/josefinsans-regular-webfont.eot');
        src: url('../fonts/josefin-sans/josefinsans-regular-webfont-1.eot') format('embedded-opentype'),
            url('../fonts/josefin-sans/josefinsans-regular-webfont.woff2') format('woff2'),
            url('../fonts/josefin-sans/josefinsans-regular-webfont.woff') format('woff'),
            url('../fonts/josefin-sans/josefinsans-regular-webfont.ttf') format('truetype');
        font-weight: 400;

    }

    @font-face {
        font-family: 'josefin sans';
        src: url('../fonts/josefin-sans/josefinsans-light-webfont.eot');
        src: url('../fonts/josefin-sans/josefinsans-light-webfont-1.eot') format('embedded-opentype'),
            url('../fonts/josefin-sans/josefinsans-light-webfont.woff2') format('woff2'),
            url('../fonts/josefin-sans/josefinsans-light-webfont.woff') format('woff'),
            url('../fonts/josefin-sans/josefinsans-light-webfont.ttf') format('truetype');
        font-weight: 300;

    }



    /*open sams*/
    @font-face {
        font-family: 'open sans';
        src: url(../fonts/open-sans/opensans-semibold-webfont.eot);
        src: url(../fonts/open-sans/opensans-semibold-webfont-1.eot) format('embedded-opentype'), 
        url(../fonts/open-sans/opensans-semibold-webfont.woff2) format('woff2'), 
        url(../fonts/open-sans/opensans-semibold-webfont.woff) format('woff'), 
        url(../fonts/open-sans/opensans-semibold-webfont.ttf) format('truetype');
        font-weight: 600
    }

    @font-face {
        font-family: 'open sans';
        src: url(../fonts/open-sans/opensans-regular-webfont.eot);
        src: url(../fonts/open-sans/opensans-regular-webfont-1.eot) format('embedded-opentype'), 
        url(../fonts/open-sans/opensans-regular-webfont.woff2) format('woff2'), 
        url(../fonts/open-sans/opensans-regular-webfont.woff) format('woff'), 
        url(../fonts/open-sans/opensans-regular-webfont.ttf) format('truetype');
        font-weight: 400
    }
    /* ==========================================================================
    2.0 Reset css
    ========================================================================== */
    body,
    html {
        overflow-x: hidden;
        font-size: .98em;
        color: #6e7898;
        font-family: 'open sans', sans-serif;
        font-weight: 400;
        line-height: 1.6;
        white-space: normal;
        -webkit-text-size-adjust: 100%;
        font-variant-ligatures: none;
        -webkit-font-variant-ligatures: none;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-smoothing: antialiased;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family:'josefin sans', sans-serif;
        font-weight: 700;
        color: #1f2a4b;
        margin: 0 0 10px 0;
        line-height: 1.4;
        letter-spacing: -.01em
    }

    h1 {
        font-size: 4.5em;
        line-height: 1.1;
    }

    h2 {
        font-size: 3.75em;
        line-height: 1.2;
    }

    h3 {
        font-size: 3.5em;
        line-height: 1.3;
    }

    h4 {
        font-size: 2.5em
    }

    h5 {
        font-size: 1.25em
    }

    h6 {
        font-size: 1.025em
    }

    ul {
        padding: 0
    }

    li {
        list-style: none;
        margin-bottom: 10px
    }

    a {
        transition: .5s;
        -webkit-transition: .5s;
        text-decoration: none;
        outline: 0;
        color: inherit
    }

    .nav>li>a:focus,
    .nav>li>a:hover,
    li>a:focus,
    li>a:hover {
        background-color: transparent;
        border-color: transparent
    }

    .nav>li>a,
    ul {
        padding: 0
    }

    a,
    a:active,
    a:focus {
        outline: 0;
        text-decoration: none;
    }

    a,
    a:active,
    a:focus
    a:hover {
        text-decoration: none!important;
    }

    .btn i,
    .btn p,
    .btn span,
    .overly * {
        z-index: 1
    }

    .btn,
    .meta-head {
        letter-spacing: .2px
    }

    .btn,
    .meta {
        line-height: 1
    }

    li {
        list-style: none;
        margin-bottom: 10px
    }

    a {
        transition: .5s;
        -webkit-transition: .5s;
        color: inherit
    }

    .nav>li>a:focus,
    .nav>li>a:hover,
    li>a:focus,
    li>a:hover {
        background-color: transparent;
        border-color: transparent
    }

    a:active,
    a:focus {
        -moz-outline: 0
    }

    a:hover {
        color: #702dda
    }


    /* ==========================================================================
    3.0 Common css
    ========================================================================== */
    .sec-pad {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .sec-pad-sm {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .sec-pad-lg {
        padding: 40px 0
    }

    img {
        max-width: 100%;
        height: auto
    }

    .section-text {
        max-width: 750px;
        margin: 0 auto 60px auto
    }

    .meta {
        font-size: 12px;
    }

    .meta-head {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #9699a8;
    }

    p.large {
        font-size: 1.2em
    }

    .light {
        color: #fff
    }

    .light .icon,
    .light .meta-head,
    .light h1,
    .light h2,
    .light h3,
    .light h4,
    .light h5,
    .light h6 {
        color: #fff
    }

    .icon {
        color: #cacbcc;
        margin-bottom: 5px
    }

    .icon-lg {
        font-size: 3em;
        margin-bottom: 10px
    }

    .icon-md {
        font-size: 2.5em
    }

    .icon-sm {
        font-size: 2em
    }

    .icon-xs {
        font-size: 1.5em
    }
    .bg-rad-anim {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    animation: morphing 10s infinite;
    overflow: hidden;
    }
    @-moz-keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;  }
    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
    }
    @-webkit-keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
    }
    @-o-keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
    }
    @keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
    }
    .parallax-bg {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: 50% 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover
    }
    .logo img{
        max-width: 150px;
    }

    .sub-input .custom-form {
        position: relative
    }

    .sub-input .custom-form .form-control {
        height: 60px;
        border: 0;
        background-color: #fff;
        padding: 0 0 0 20px;
        font-size: 14px
    }

    .custom-form .form-control:focus {
        -webkit-box-shadow: inset 0 1px 1px transparent, 0 0 8px rgba(102, 175, 233, 0);
        box-shadow: inset 0 1px 1px transparent, 0 0 8px rgba(102, 175, 233, 0)
    }

    .sub-input .result-box {
        font-size: 16px;
        font-weight: 400;
    }

    .sub-input .custom-form .btn {
        position: absolute;
        margin: 0;
        top: 5px;
        right: 5px;
        bottom: 5px;
        box-shadow: 0 0 0 transparent;
        font-size: 16px;
    }
    .sub-input .custom-form .btn:focus{
        color: #fff;
    }

    .bg-gray {
    background: #F0F1FF;
    }
    .bg-memphis{
        background: url(../image/bg-memphis.png) center bottom no-repeat;
        background-size: contain;
    }

    .grdnt-blue:not(.overly) {
        background-image: -webkit-linear-gradient(90deg, #5722ff 0, #8103ff 51%, #5722ff 100%);
        background-image: linear-gradient(90deg, #5722ff 0, #8103ff 51%, #5722ff 100%)
    }

    .grdnt-purple:not(.overly) {
        background-image: -webkit-linear-gradient(135deg, #9a55f5 0, #b44ee8 51%, #9a55f5 100%);
        background-image: linear-gradient(135deg, #9a55f5 0, #b44ee8 51%, #9a55f5 100%)
    }

    .grdnt-orange:not(.overly) {
        background-image: linear-gradient(135deg, #ffa03a 0, #f4be56 51%, #ffa03a 100%);
        background-image: -webkit-linear-gradient(135deg, #ffa03a 0, #f4be56 51%, #ffa03a 100%)
    }

    .grdnt-cyan:not(.overly) {
        background-image: -webkit-linear-gradient(45deg, #35abe6 0, #3bbeff 51%, #35abe6 100%);
        background-image: linear-gradient(45deg, #35abe6 0, #3bbeff 51%, #35abe6 100%)
    }

    .grdnt-green:not(.overly) {
        background-image: -webkit-linear-gradient(45deg, #00c9fd 0, #81ee8e 51%, #00c9fd 100%);
        background-image: linear-gradient(45deg, #00c9fd 0, #81ee8e 51%, #00c9fd 100%)
    }

    .grdnt-yellow:not(.overly) {
        background-image: -webkit-linear-gradient(130deg, #ffa159 0, #ff39b4 51%, #ffa159 100%);
        background-image: linear-gradient(130deg, #ffa159 0, #ff39b4 51%, #ffa159 100%)
    }
    .grdnt-blue.overly:before {
        background-image: -webkit-linear-gradient(90deg, #5722ff 0, #8103ff 51%, #5722ff 100%);
        background-image: linear-gradient(90deg, #5722ff 0, #8103ff 51%, #5722ff 100%);
    }

    .grdnt-purple.overly:before {
        background-image: -webkit-linear-gradient(135deg, #6d1bc6 0, #fa0076 51%, #6d1bc6 100%);
        background-image: linear-gradient(135deg, #6d1bc6 0, #fa0076 51%, #6d1bc6 100%)
    }

    .grdnt-orange.overly:before {
        background-image: linear-gradient(135deg, #ffa03a 0, #f4be56 51%, #ffa03a 100%);
        background-image: -webkit-linear-gradient(135deg, #ffa03a 0, #f4be56 51%, #ffa03a 100%)
    }

    .grdnt-cyan.overly:before {
        background-image: -webkit-linear-gradient(45deg, #8089ff 0, #54ceff 51%, #8089ff 100%);
        background-image: linear-gradient(45deg, #8089ff 0, #54ceff 51%, #8089ff 100%)
    }

    .grdnt-green.overly:before {
        background-image: -webkit-linear-gradient(45deg, #00c9fd 0, #81ee8e 51%, #00c9fd 100%);
        background-image: linear-gradient(45deg, #00c9fd 0, #81ee8e 51%, #00c9fd 100%)
    }
    .grdnt-yellow.overly:before {
        background-image: -webkit-linear-gradient(130deg, #ffa159 0, #ff39b4 51%, #ffa159 100%);
        background-image: linear-gradient(130deg, #ffa159 0, #ff39b4 51%, #ffa159 100%)
    }

    a[class*=grdnt-],
    p[class*=grdnt-],
    button[class*=grdnt-],
    div[class*=grdnt-],
    div[class*=grdnt-].overly:before,
    footer[class*=grdnt-],
    footer[class*=grdnt-].overly:before,
    header[class*=grdnt-],
    header[class*=grdnt-].overly:before,
    input[class*=grdnt-],
    nav[class*=grdnt-],
    section[class*=grdnt-],
    section[class*=grdnt-].overly:before {
        transition: .5s;
        -webkit-transition: .5s;
        background-size: 250% auto
    }

    a[class*=grdnt-]:hover,
    button[class*=grdnt-],
    input[class*=grdnt-]:hover {
        color: #fff;
        background-position: right center
    }

    [class*=bg-trans]:before,
    [class*=style-]:after {
        position: absolute;
        background-size: 100% !important;
        content: '';
        left: -1px;
        right: -1px;
        bottom: -1px;
        top: 0;
    }

    .style-wave:after {
        background: url(../image/img-wave.png) bottom no-repeat;
        z-index: 1;
    }
    .style-wave-2:after {
        background: url(../image/img-wave-2.png) bottom no-repeat;
        z-index: 1;
    }

    .style-curve:after {
        background: url(../image/img-curve.png) bottom no-repeat;
        z-index: 1;
    }
    .style-angle:after {
        background: url(../image/img-angle.png) bottom no-repeat;
        z-index: 2;
    }


    .jump-anim {

        animation-name: fetureanimate;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        -webkit-animation-name: fetureanimate;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: fetureanimate;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: fetureanimate;
        -ms-animation-duration: 3s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        -o-animation-name: fetureanimate;
        -o-animation-duration: 3s;
        -o-animation-iteration-count: infinite;
        -o-animation-timing-function: linear;

    }
    @keyframes fetureanimate {
        0%, 100% {
            -webkit-transform: translateY(-40px);
            transform: translateY(-40px)
        }

        50% {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px)
        }

    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0,20%,0);
        }

        to {
            opacity: 1;
            transform: none;
        }

    }
    .bg-trans-1:before {
        background: url(../image/bg-trans-1.png) center bottom no-repeat;
        background-size: cover!important;
    }
    .bg-trans-2:before {
        background: url(../image/bg-trans-2.png) left top no-repeat;
        background-size: contain!important;
    }
    .bg-solid {
        background: #3ac8fc
    }

    .overly {
        position: relative
    }

    .overly * {
        position: relative;
        z-index: 2
    }

    .overly:before {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: .8;
    }

    .brdr-btm {
        border-bottom: 1px solid #e1e1e1;
    }

    .pd-10 {
        padding: 10px
    }

    .pd-20 {
        padding: 20px
    }

    .pd-30 {
        padding: 30px
    }

    .pt-0 {
        padding-top: 0
    }

    .pb-0 {
        padding-bottom: 0
    }

    .p-0 {
        padding: 0
    }
    .mg-0{
            margin: 0
        }

    .w-100 {
        width: 100%
    }

    .h-100 {
        height: 100%
    }
    .scroll-item {
        position: absolute
    }

    .spce {
        clear: both;
        height: 20px;
        width: 100%
    }

    .spce.xs {
        height: 5px
    }

    .spce.sm {
        height: 10px
    }

    .spce.md {
        height: 40px
    }

    .spce.lg {
        height: 60px
    }

    .bg-animate {
        position: relative
    }

    .bg-animate:not(.hero) [class*=rect] {
        z-index: -1
    }

    .bg-animate .rect1,
    .bg-animate .rect5 {
        position: absolute;
        top: 10%;
        right: 40px;
        -webkit-animation: mover 15s infinite linear;
        animation: mover 15s infinite linear
    }

    .bg-animate .rect2 {
        position: absolute;
        left: 25%;
        top: 15%;
        -webkit-animation: rotate3d 4s linear infinite;
        animation: rotate3d 4s linear infinite;
    }

    .bg-animate .rect3 {
        position: absolute;
        top: 50%;
        left: 10%;
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    .bg-animate .rect4,
    .bg-animate .rect6 {
        position: absolute;
        top: 35%;
        right: 35%;
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }

    .bg-animate .rect5 {
        top: 20%;
        left: 20px
    }

    .bg-animate .rect6 {
        top: 15%;
        right: 40%
    }

    @-webkit-keyframes mover {
        0% {
            -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0)
        }
        20% {
            -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg)
        }
        40% {
            -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg)
        }
        60% {
            -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg)
        }
        80% {
            -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg)
        }
        100% {
            -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0)
        }
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
        0% {
            -webkit-transform: rotate(0)
        }
        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes rotate3d {
        0% {
            -webkit-transform: rotateY(0);
            transform: rotateY(0)
        }
        100% {
            -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }
    }

    .flx-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }

    .align-flx-end {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end
    }

    .align-flx-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        -webkit-box-pack: center
    }

    .nav-tabs li a,
    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
        background: 0 0;
        border: 0;
        color: inherit
    }

    .nav-tabs {
        border-bottom: 0
    }

    

    .list-style {
        position: relative;
        margin-top: 30px
    }

    .list-style li {
        padding-left: 30px
    }

    [class*=grdnt-] .list-style li:before,
    div[class*=grdnt-] .list-style li:before {
        color: #fff
    }

    .list-style li:before {
        position: absolute;
        content: '\f00c';
        left: 0;
        top: 3px;
        color: #0facf3;
        font-family: FontAwesome
    }

    .fw-300 {
        font-weight: 300
    }

    .fw-400 {
        font-weight: 400
    }

    .fw-600 {
        font-weight: 600
    }

    .fw-700 {
        font-weight: 700
    }

    .clr-green {
        color: #46da60
    }

    .clr-blue {
        color: #5b63fb
    }

    .clr-red {
        color: #ed3e44
    }

    .clr-cyan {
        color: #4693f8
    }

    .social-holder a {
        margin-right: 15px
    }

    .social-holder a:last-child {
        margin-right: 0
    }

    .btn-holder {
        margin-top: 30px
    }
    .btn-holder > a img {
        margin-right: 10px
    }


    .btn {
        display: inline-block;
        text-align: center;
        position: relative;
        color: #fff;
        padding: 14px 28px;
        background: 0 0;
        font-family: 'open sans';
        font-weight: 600;
        transition: .5s;
        -webkit-transition: .5s;
        border-radius: 5px;
        border: 0;
        margin-top: 5px;
        margin-right: 10px
    }

    .btn span {
        position: relative;
        z-index: 1;
        font-size: 15px;
        text-align: left;
        margin: 0;
        text-transform: capitalize
    }

    .btn i {
        margin-right: 8px;
        font-size: 22px;
        z-index: 1;
        position: relative
    }

    .btn i+span {
        vertical-align: top;
        margin-top: 3px;
        display: inline-block
    }

    .btn-sm {
        font-size: .575em;
        padding: 10px 30px
    }

    .btn-round {
        transition: .5s;
        -webkit-transition: .5s;
        position: relative;
        border-radius: 50%;
        background: #fff;
        font-size: 22px;
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto
    }

    .btn-round:after {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        content: '';
        border-radius: 50%;
        display: block;
        background: rgba(255, 255, 255, .8);
        width: 80%;
        height: 80%;
        animation: grow-scnd 1.5s infinite;
        -o-animation: grow-scnd 1.5s infinite;
        -moz-animation: grow-scnd 1.5s infinite;
        -webkit-animation: grow-scnd 1.5s infinite;
        -ms-animation: grow-scnd 1.5s infinite;
        animation-delay: 0s;
        animation-timing-function: ease-in-out
    }
    .btn-round:hover{
        color: #fff;
    }
    .btn-round span {
        color: #fff;
        font-size: 18px
    }

    .btn-white {
        background-color: #fff;
        border: 1px solid #fff;
        color: #3e2a75;
    }

    .btn-border {
        color: #fff;
        background: 0 0;
        border: 1px solid #fff;
        box-shadow: 0 0 0 transparent
    }

    .btn-border:hover {
        background: #fff;
        color: #3e2a75;
    }
    .btn-over{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    [class*=grdnt-].btn.fill {
        color: #6b1aff
    }

    [class*=grdnt-].btn.fill:before {
        position: absolute;
        content: '';
        background: #fff;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border-radius: 5px;
        transition: .5s;
    }
    [class*=grdnt-].btn.fill:hover:before{
        background: transparent;
    }
    [class*=grdnt-].btn.fill:hover .clip-txt{
    -webkit-text-fill-color:#fff;
    }
    .grdnt-purple .btn-white {
        color: #6b1aff
    }

    .grdnt-purple .btn-white:hover {
        color: #550bdd
    }

    .grdnt-purple .btn-border:hover {
        color: #6b1aff
    }

    .grdnt-orange .btn-white {
        color: #fe2553
    }

    .grdnt-orange .btn-white:hover {
        color: #f52278
    }

    .grdnt-orange .btn-border:hover {
        color: #fe2553
    }

    .grdnt-blue .btn-white {
        color: #6b1aff
    }

    .grdnt-blue .btn-white:hover {
        color: #281483
    }

    input.btn:hover {
        color: #fff

    }
    [class*=icon-bg] {
        border-radius: 50%;
        color: #fff;
        margin: 0 auto;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center
    }
    .icon-shad [class*=icon-bg-].grdnt-orange, .icon-shad [class*=icon-bg].grdnt-orange {
        box-shadow: 0 20px 38px rgba(244, 186, 75, .7);
    }
    .icon-shad [class*=icon-bg-].grdnt-purple, .icon-shad [class*=icon-bg].grdnt-purple {
        box-shadow: 0 20px 38px rgba(200, 119, 251, .7);
    }
    .icon-shad [class*=icon-bg-].grdnt-cyan, .icon-shad [class*=icon-bg].grdnt-cyan {
        box-shadow: 0 20px 38px rgba(59, 190, 255, .4);
    }
    .icon-shad [class*=icon-bg-].grdnt-blue, .icon-shad [class*=icon-bg].grdnt-blue{
        box-shadow: 0 20px 38px rgba(82, 37, 220, .4);
    }
    .icon-bg {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
        font-size: 2.5em
    }

    .icon-bg-md {
        width: 60px;
        height: 60px;
        font-size: 1.5em
    }
    .icon-bg-lg {
        width: 80px;
        height: 80px;
        font-size: 2em
    }
    .icon-bg-sm {
        width: 50px;
        height: 50px;
        font-size: 1em
    }

    .hover-grow [class*=icon-bg-],
    .hover-grow [class*=icon-bg] {
        transition: all 1.5s;
        -webkit-transition: all 1.5s;
        z-index: 1
    }

    .hover-grow [class*=icon-bg-]:after,
    .hover-grow [class*=icon-bg-]:before,
    .hover-grow [class*=icon-bg]:after,
    .hover-grow [class*=icon-bg]:before {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        content: '';
        border-radius: 50%;
        z-index: -1;
        display: block
    }

    .hover-grow .list:hover [class*=icon-bg-],
    .hover-grow .list:hover [class*=icon-bg] {
        transform: scale(1.3)
    }

    .hover-grow .list:hover [class*=icon-bg-]:before,
    .hover-grow .list:hover [class*=icon-bg]:before {
        background: rgba(0, 0, 0, .3);
        width: 0;
        height: 0;
        animation: grow 1.5s infinite;
        -o-animation: grow 1.5s infinite;
        -moz-animation: grow 1.5s infinite;
        -webkit-animation: grow 1.5s infinite;
        -ms-animation: grow 1.5s infinite;
        animation-delay: 0s;
        animation-timing-function: ease-in-out
    }

    .hover-grow .list:hover [class*=icon-bg-]:after,
    .hover-grow .list:hover [class*=icon-bg]:after {
        background: rgba(0, 0, 0, .3);
        width: 0;
        height: 0;
        animation: grow-scnd 1.5s infinite;
        -o-animation: grow-scnd 1.5s infinite;
        -moz-animation: grow-scnd 1.5s infinite;
        -webkit-animation: grow-scnd 1.5s infinite;
        -ms-animation: grow-scnd 1.5s infinite;
        animation-delay: 0s;
        animation-timing-function: ease-in-out
    }

    .hover-grow [class*=icon-bg-],
    .hover-grow [class*=icon-bg] {
        transition: all 1.5s;
        -webkit-transition: all 1.5s;
        z-index: 1
    }

    .hover-grow [class*=icon-bg-]:after,
    .hover-grow [class*=icon-bg-]:before,
    .hover-grow [class*=icon-bg]:after,
    .hover-grow [class*=icon-bg]:before {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        -o-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        content: '';
        border-radius: 50%;
        z-index: -1;
        display: block
    }

    [class*=grdnt-] .hover-grow .list:hover [class*=icon-bg-]:before,
    [class*=grdnt-] .hover-grow .list:hover [class*=icon-bg]:before {
        background: rgba(255, 255, 255, .8)
    }

    [class*=grdnt-] .hover-grow .list:hover [class*=icon-bg-]:after,
    [class*=grdnt-] .hover-grow .list:hover [class*=icon-bg]:after {
        background: rgba(255, 255, 255, .8)
    }

    @-webkit-keyframes grow {
        0% {
            width: 0%;
            height: 0%;
            opacity: 1
        }
        100% {
            width: 200%;
            height: 200%;
            opacity: 0
        }
    }

    @keyframes grow-scnd {
        0% {
            width: 0;
            height: 0;
            opacity: 1
        }
        50% {
            width: 0;
            height: 0;
            opacity: 1
        }
        100% {
            width: 200%;
            height: 200%;
            opacity: 0
        }
    }



    [class*=grad-] .clip-txt,
    [class*=grad-] .meta-head:before,
    [class*=grad-] .owl-item .profile-img:before,
    [class*=grad-] .faq .more-less,
    [class*=grad-] .owl-item:after,
    [class*=grad-] .pricing-btn .toggler--is-active{
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .grad-prple .clip-txt,
    .grad-prple .owl-item .profile-img:before,
    .grad-prple .faq .more-less,
    .grad-prple .pricing-btn .toggler--is-active{
        background-image: linear-gradient(to right, #4222f1 0, #ed3ea4 100%);
        background-image: -webkit-linear-gradient(to right, #4222f1 0, #ed3ea4 100%)
    }

    .grad-prple .owl-item:after {
        background: linear-gradient(to right, #4222f1 0, #ed3ea4 100%);
        background: -webkit-linear-gradient(to right, #4222f1 0, #ed3ea4 100%)
    }

    .grad-orange .clip-txt,
    .grad-orange .owl-item .profile-img:before,
    .grad-orange .faq .more-less,
    .grad-orange .pricing-btn .toggler--is-active,
    .grad-orange .team-mem-col .team-hover .team-hover-content a:hover i {
        background-image: linear-gradient(135deg, #fe2553 0, #ff6351 100%);
        background-image: -webkit-linear-gradient(45deg, #fe2553 0, #ff6351 100%)
    }

    .grad-orange .owl-item:after {
        background: linear-gradient(135deg, #fe2553 0, #ff6351 100%);
        background: -webkit-linear-gradient(135deg, #fe2553 0, #ff6351 100%)
    }

    .grad-blue .clip-txt,
    .grad-blue .owl-item .profile-img:before,
    .grad-blue .faq .more-less,
    .grad-blue .pricing-btn .toggler--is-active,
    .grad-blue .team-mem-col .team-hover .team-hover-content a:hover i {
        background-image: linear-gradient(90deg, #5722ff 0, #8103ff 100%);
        background-image: -webkit-linear-gradient(90deg, #5722ff 0, #8103ff 100%);
    }

    .grad-blue .owl-item:after {
        background: linear-gradient(135deg, #5722ff 0, #8103ff 100%);
        background: -webkit-linear-gradient(135deg, #5722ff 0, #8103ff 100%)
    }
    .grad-yellow .clip-txt,
    .grad-yellow .owl-item .profile-img:before,
    .grad-yellow .faq .more-less,
    .grad-yellow .pricing-btn .toggler--is-active,
    .grad-yellow .team-mem-col .team-hover .team-hover-content a:hover i {
        background-image: linear-gradient(130deg, #ffa159 0, #ff39b4 100%);
        background-image: -webkit-linear-gradient(130deg, #ffa159 0, #ff39b4 100%);
    }

    .grad-yellow .owl-item:after {
        background: linear-gradient(130deg, #ffa159 0, #ff39b4 100%);
        background: -webkit-linear-gradient(130deg, #ffa159 0, #ff39b4 100%)
    }

    .feat-slide .owl-item:after {
        content: "";
        display: block;
        height: .25em;
        position: absolute;
        top: 100%;
        width: 0%;
        left: 50%;
        transform: translate(-50%);
        transition: all .5s;
        -webkit-transition: all .5s;
        background-size: 200% auto
    }


    .slide-side {
        position: relative
    }

    .app-slide,
    .app-slide-auto {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 237px;
        overflow: hidden;
        border-radius: 20px;
    }
    .app-slide img,
    .app-slide-auto img{
        border-radius: 20px;
    }

    .slide-side .phone {
        position: relative;
        z-index: 2;
    }

    .left-dir-col [class*=icon-],
    .left-dir-col.icon,
    .navbar-custom .right-nav {
        float: right
    }
    .shad-item:not(.light) .item{
        border: 1px solid rgba(0, 0, 0, 0.09);
        border-radius: 10px;
        padding: 30px 40px;
        background: #fff;
        transition: 0.5s;
        cursor: pointer;
    }
    .shad-item.light .item{
        border-radius: 10px;
        padding: 30px 40px;
        transition: 0.5s;
    }
    .shad-item.style-2 .item{
        background: #F0F1FF;
        border:0;
    }
    .shad-item .item:hover{
        transform: translateY(-20px);
    }
    .active,
    .carousel,
    .item {
        height: 100%
    }

    .carousel-inner {
        height: 100%;
        overflow: visible
    }

    .carousel-fade .carousel-inner .item {
        opacity: 0;
        transition-property: opacity;
        -webkit-transition-property: opacity
    }

    .carousel-fade .carousel-inner .active {
        opacity: 1
    }

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1
    }

    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
        opacity: 1
    }

    @media all and (transform-3d),
    (-webkit-transform-3d) {
        .carousel-fade .carousel-inner>.item.active.right,
        .carousel-fade .carousel-inner>.item.next {
            opacity: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
        .carousel-fade .carousel-inner>.item.active.left,
        .carousel-fade .carousel-inner>.item.prev {
            opacity: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
        .carousel-fade .carousel-inner>.item.active,
        .carousel-fade .carousel-inner>.item.next.left,
        .carousel-fade .carousel-inner>.item.prev.right {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
    }

    .fade-left {
        -webkit-animation: fadeinLeft .6s ease-in-out;
        -moz-animation: fadeinLeft .6s ease-in-out;
        animation-duration: .6s;
        -o-animation: fadeinLeft .6s ease-in-out;
        -ms-animation: fadeinLeft .6s ease-in-out;
        animation: fadeinLeft .6s ease-in-out;
        animation-duration: .6s;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s
    }

    @-webkit-keyframes fadeinLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0)
        }
    }

    @-moz-keyframes fadeinLeft {
        0% {
            opacity: 0;
            -moz-transform: translateX(20%)
        }
        100% {
            opacity: 1;
            -moz-transform: translateX(0)
        }
    }

    @keyframes fadeinLeft {
        0% {
            opacity: 0;
            transform: translateX(20%)
        }
        100% {
            opacity: 1;
            transform: translateX(0)
        }
    }

    .fade-up {
        -webkit-animation: fadeinUp .6s ease-in-out;
        -moz-animation: fadeinUp .6s ease-in-out;
        animation-duration: .6s;
        -o-animation: fadeinUp .6s ease-in-out;
        -ms-animation: fadeinUp .6s ease-in-out;
        animation: fadeinUp .6s ease-in-out;
        animation-duration: .6s;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s
    }

    @-webkit-keyframes fadeinUp {
        0% {
            opacity: 0;
            -webkit-transform: translateY(20%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0)
        }
    }

    @-moz-keyframes fadeinUp {
        0% {
            opacity: 0;
            -moz-transform: translateY(20%)
        }
        100% {
            opacity: 1;
            -moz-transform: translateY(0)
        }
    }

    @keyframes fadeinUp {
        0% {
            opacity: 0;
            transform: translateY(20%)
        }
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .carousel-control {
        width: auto;
        opacity: 1
    }

    .carousel-control.left,
    .carousel-control.right {
        background-image: none;
        filter: none;
        top: -20%
    }

    .quote .quote-text:after,
    .rating-list li,
    .social-holder a {
        display: inline-block;
        margin-bottom: 0
    }

    .rating-list li {
        margin-right: 3px;
        line-height: 1;
        font-size: 14px;
    }

    .rating-list li:last-child {
        margin-left: 8px;
        color: #252a32;
        font-size: 16px
    }


    .rating-list li i {
        color: #ffdd65;
    }

    .social-holder a {
        margin-right: 15px;
        font-size: 12px;
    }

    .social-holder a:last-child {
        margin-right: 0
    }

    .hide-block {
        overflow: hidden
    }

    .hide-block img {
        position: relative;
        margin-bottom: -200px
    }

    .hide-block a img {
        margin-bottom: 0
    }

    .social-holder li {
        display: inline-block
    }

    .social-holder a {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .2)
    }

    .social-holder a:hover {
        background: rgba(0, 0, 0, .3);
        color: #fff
    }

    .quote .owl-dots,
    .screen .owl-dots {
        width: 200px;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center
    }

    .quote .owl-dot,
    .screen .owl-dot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        display: inline-block;
        margin: 10px;
        background: #b8bbc5
    }

    .quote .owl-dot.active,
    .screen .owl-dot.active {
        background: #6b1aff
    }

    [class*=grdnt] .quote .owl-dot,
    [class*=grdnt] .screen .owl-dot,
    div[class*=grdnt] .screen .owl-dot {
        background: rgba(255, 255, 255, .3)
    }

    [class*=grdnt] .quote .owl-dot.active,
    [class*=grdnt] .screen .owl-dot.active,
    div[class*=grdnt] .screen .owl-dot.active {
        background: #fff
    }

    [class*=bg-trans],
    [class*=style-] {
        position: relative
    }

    .contact-form .form-control {
        border: 0;
        border-radius: 5px;
        box-shadow: 0 0 0 transparent;
        height: 45px;
    }

    .contact-form textarea.form-control {
        height: 70px;
        padding-top: 15px
    }

    #preloader {
        position:fixed;
        bottom: 0;
        top:0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: #fff;
    }

    #status {
        width: 137px;
        height: 81px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url(../image/loading.gif);
        background-repeat: no-repeat;
        background-position: center;
    }

    /*Ajax contact form CSS*/

    .success {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #468847;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
            border-radius: 4px;
    }

    .error {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid rgba(185, 74, 72, 0.3);
    -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
            border-radius: 4px;
    }

    /* ==========================================================================
        4.0 Navbar Styling
    ========================================================================== */
    .navbar-custom {
        border: none;
        background-color: rgb(30 35 41);;
        padding: 10px;
        -webkit-transition: padding .5s;
        -moz-transition: padding .5s;
        transition: padding .5s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .navbar-custom:not(.navbar-fixed-top) {
        z-index: 10
    }

    .navbar-custom.affix {
        padding: 4px 0 !important;
        position: fixed
    }

    .navbar-custom .right-nav .nav-btn {
        float: right;
        margin-left: 20px
    }

    .navbar-custom.affix .right-nav .nav-btn .btn.btn-white {
        border-color: #702dda;
        color: #702dda
    }

    .navbar-custom.affix .right-nav .nav-btn .btn.btn-white:hover {
        background: #702dda;
        color: #fff
    }

    .navbar-custom .navbar-brand {
        margin-left: 0 !important;
        padding: 0;
        transition: .5s;
        -webkit-transition: .5s
    }

    .navbar-custom.affix .navbar-brand {
        padding: 0
    }

    .navbar-custom .navbar-brand.logo-clr,
    .navbar-custom.affix .navbar-brand.logo-light {
        opacity: 0;
        width: 0
    }

    .navbar-custom .navbar-brand.logo-light,
    .navbar-custom.affix .navbar-brand.logo-clr {
        opacity: 1;
        width: auto;
        height: auto
    }


    .navbar-custom .navbar-toggle {
        border: 0;
        text-transform: uppercase;
        color: #fff;
        font-size: 24px;
        margin-right: 0;
        padding: 0 0 0 12px;
        transition: .5s;
        -webkit-transition: .5s
    }

    .navbar-custom .navbar-toggle:hover {
        background: 0 0;
        opacity: .7
    }

    .navbar-custom.affix .navbar-toggle {
        color: #37404d
    }

    .navbar-custom ul li {
        margin: 0 15px;
    }

    .navbar-custom ul li a {
        color: #fff;
        opacity: .8;
        padding: 15px 0;
        font-size: 16px;
        line-height: 1;
        font-family:'josefin sans', sans-serif;
        font-weight: 400;
        letter-spacing: -.001em;
    }

    .navbar-custom.affix ul li a {
        color: inherit
    }

    .navbar-custom.affix ul li a:hover,
    .navbar-custom.affix ul li.active a {
        color: #424242
    }

    .navbar-custom ul li.active a {
        position: relative;
        transition: .5s;
        -webkit-transition: .5s;
        opacity: 1;
    }

    .navbar-custom ul li a:hover {
        color: #fff
    }


    .navbar-custom:not(.affix) ul li.active a {
        color: #f4a424 !important;   
    }   


    .navbar-custom:not(.affix) ul li a {
        color: #ffffff;
    }


    .navbar-custom.affix {
        padding: 20px 0;
        border-bottom: 0;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2);
        box-shadow: 0 0 15px rgba(0, 0, 0, .2);
        background: rgb(30 35 41);
    }

    .navbar-custom.affix ul li a:hover:after,
    .navbar-custom.affix ul li.active a:after {
        background: #702dda
    }

    .navbar-custom .nav-btn .btn {
        padding: 14px 25px;
        margin: 0
    }

    .navbar-custom.affix .nav-btn .btn {
        border-color: rgba(62, 42, 117,.1 );
        color: #3e2a75;
    }
    .navbar-custom.affix .nav-btn .btn:hover {
        border-color: rgba(62, 42, 117, .3);
        color: #3e2a75;
    }

   
    .navbar-custom ul li a,
    .navbar-custom.affix ul li a {
        color: #ffffff !important;  
        opacity: 1;                    
    }

   
    .navbar-custom ul li.active a,
    .navbar-custom.affix ul li.active a {
        color: #f4a424 !important;     
    }

  
    .navbar-custom ul li a:hover {
        color: #f4a424 !important;
    }

    
    .navbar-custom ul li a {
    font-size: 19px !important;   
    font-weight: 500;             
    letter-spacing: 0.5px;        
    }

    .navbar-custom .container {
    max-width: 1100px;  
    }



    /* ==========================================================================
    5.0 Banner Styling
    ========================================================================== */
    .hero {
        position: relative;
        background:#4e2057;
        padding-top: 150px;
        padding-bottom: 120px;
    }
    .hero.style-curve{
        padding-top: 120px;
        padding-bottom: 0;
        height: 850px;
        overflow: hidden;
    }
    .hero.style-curve .img-pre{
        z-index: 0;
    }
    .hero.style-wave, .hero.style-wave-2{
        padding-top: 150px;
        padding-bottom: 300px;
        overflow: hidden;
    }
    .hero .img-pre.right{
        position: absolute;
        right: -300px;
        bottom: 0;
        max-width: 900px;
        z-index: 0;
    }
    .hero .img-pre .circle-bg{
        border-radius: 50%;
        height: 450px;
        width: 450px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .intro-text {
        margin-top: 40px
    }

    .hero-single {
        padding-top: 200px;
        padding-bottom: 300px;
    }

    .hero-content {
        z-index: 3;
        position: relative
    }

    .hero.app-banner {
        height: 700px
    }

    .hero .hero-content.intro-center {
        position: static;
        padding-top: 150px
    }

    .hero-content .sub-input .btn {
        right: 8px
    }

    .hero-content .intro-text .intro-heading {
        font-size: 48px;
        margin-bottom: 20px;
        font-weight: 400;
        line-height: 60px
    }

    /* ==========================================================================
        6.0 Counter Styling
    ========================================================================== */
    .count{
            font-size: 72px;
            float: left;
            line-height: 1;
            font-family: 'josefin sans', sans-serif;
            font-weight: 300;
    }
    .count + p{
            overflow: hidden;
            padding-left: 20px;
            margin-top: 10px;
    }
    /* ==========================================================================
        7.0 feature Styling
    ========================================================================== */ 
    .left-dir-col {
        text-align: right
    }

    .left-dir-col .icon {
        float: right;
    }

    .left-dir-col .text {
        margin-right: 80px;
        overflow: hidden;
    }

    .right-dir-col .icon, .right-dir-col [class*=icon-] {
        float: left;
    }
    .right-dir-col .flx-container .icon, .right-dir-col .flx-container [class*=icon-] {
        margin: 0;
    }
    .right-dir-col .text {
        padding-left: 20px;
        overflow: hidden;
    }

    .left-dir-col .list,
    .right-dir-col .list {
        transition: .6s;
        -webkit-transition: .6s;
        cursor: default;
    }
    .shad-box-list{
        position: relative;
        left: 60px;
        z-index: 1;
        min-width: 500px;
    }
    .shad-box-list .list{
        box-shadow: 0 0 100px rgba(0,0,0,.2);
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 20px;
        background: rgba(255,255,255,0.95);
        transition: 0.5s;
        cursor: pointer;
    }
    .shad-box-list .list:hover{
        transform: translateX(10px);
    }
    .feat-tag .list{
        display: inline-block;
        background: #F0F1FF;
        border-radius: 50px;
        padding: 10px 30px;
        margin: 0 10px 20px 10px;
    }
    .feat-tag .list .icon{
        font-size: 20px;
        line-height: 0;
    }
    .feat-tag .list .text{
        padding-left: 10px;
    }
    .feat-tag .list h6{
        line-height: 1;
        margin-top: 4px;
        margin-bottom: 0;
    }
    .feat-op{
        background:rgba(255,255,255,.9);
        padding: 20px;
    }
    .bg-mockup {
    position: relative;
    display: block;      /* center karne ke liye block */
    margin: -70px auto 0;  /* upar ka same, left-right auto = center */
    z-index: -1;
    text-align: center;  /* extra safety */
    }

    .bg-mockup img {
    width: 100%;          /* jitna bara chahiye utna number badha do: 80, 90, 100 */
    max-width: 800px;    /* maximum size control */
    height: 800px;
    display: inline-block;
    }

    /* ==========================================================================
    8.0 screenshot Styling
    ========================================================================== */
    .screenshot .owl-carousel .owl-item img {
        width: auto;
        -webkit-transition: .3s;
        transition: .3s
    }
    /* ==========================================================================
    9.0 Testimonial Styling
    ========================================================================== */
    .quote .quote-text {
        padding: 40px;
        border-radius: 50px 50px 0 50px;
        position: relative;
        float: left;
        width: 80%;
    }
    .quote .owl-item .profile-img{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .quote .owl-item .profile-img:before{
        position: absolute;
        content: '\e67e';
        font-family: 'themify';
        font-size: 60px;
        top: -110px;
        left: 50%;
        color: #fff;
        transform: translateX(-50%);

    }
    .quote .owl-item img {
        height: 80px;
        width: 80px;
        border-radius: 30px 30px 30px 0;
        margin-left:  25px;
    }

    .quote .profile{
        overflow: hidden;
        line-height:0;
        margin-top: 5px;
    }
    /* ==========================================================================
    10.0 Pricing Styling
    ========================================================================== */
    .pricing-btn .toggle,
    .toggler {
        display: inline-block;
        vertical-align: middle;
        margin: 10px
    }

    .pricing-btn .toggler {
        color: #ddd;
        transition: .2s;
        font-weight: 700
    }

    .pricing-btn .toggler--is-active {
        color: #9d1726
    }

    .pricing-btn .b {
        display: block
    }

    .pricing-btn .toggle {
        position: relative;
        width: 80px;
        height: 35px;
        border-radius: 100px;
        background-color: #9d1726;
        overflow: hidden;
        box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .05)
    }

    .pricing-btn .check {
        position: absolute;
        display: block;
        cursor: pointer;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 6
    }

    .pricing-btn .check:checked~.switch {
        right: 2px;
        left: 57.5%;
        transition: .25s cubic-bezier(.785, .135, .15, .86);
        transition-property: left, right;
        transition-delay: .08s, 0s
    }

    .pricing-btn .switch {
        position: absolute;
        left: 2px;
        top: 2px;
        bottom: 2px;
        right: 57.5%;
        background-color: #fff;
        border-radius: 36px;
        z-index: 1;
        transition: .25s cubic-bezier(.785, .135, .15, .86);
        transition-property: left, right;
        transition-delay: 0s, .08s;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
    }

    .pricing .model {
        height: auto;
        transition: .3s
    }

    .pricing .none {
        height: 0;
        overflow: hidden;
        opacity: 0
    }

    .pricing .pricing-table {
        transition: .5s;
        -webkit-transition: .5s;
        border-radius: 10px;
        padding: 3px;
    }
    .pricing .pricing-table:not([class*="grdnt-"]) {
        background:#E5E5E5;
    }
    .pricing .pricing-table .inner{
        background:#fff;
        border-radius: 10px;
    }

    .pricing .pricing-table.feat {
        box-shadow: 0 1px 25px rgba(0, 0, 0, .1);
        border: 0
    }

    .pricing .pricing-header {
        padding: 30px 0;
    }

    .pricing .pricing-footer {
        padding: 20px 0;
    }
    .pricing .pricing-footer .btn{
        width: 80%;
    }

    /* ==========================================================================
    10.5 Platform Highlights (cards)
    ========================================================================== */

    /* Platform Highlights cards redesign */
    .platform-highlights {
    background: #ffffff;
    }

    .platform-highlights .section-title {
    margin-bottom: 40px;
    font-weight: 700;
    color: #000 !important;
    }

    .platform-highlights .feature-card {
    background: #ffffff;
    border: 1px solid #515359;
    border-radius: 10px;
    padding: 30px 20px;
    margin-bottom: 30px;
    text-align: center;
    height: 100%;
    }

    .platform-highlights .feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 70%;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 30px;
    color: #f4a424;
    }

    .platform-highlights .feature-card h5 {
    font-weight: 700;
    margin-bottom: 10px;
    }

    .platform-highlights .feature-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    }

    /* Force visible text inside Platform Highlights cards */
    .platform-highlights .feature-card h5,
    .platform-highlights .feature-card p {
    color: #1a1a1a !important;   /* dark text */
    }

    .platform-highlights .feature-card p {
    opacity: 0.8;
    }

    /* Make icons stay orange */
    .platform-highlights .feature-icon i {
    color: #f4a424 !important;
    }

    /* ==========================================================================
    11.0 Team Styling
    ========================================================================== */
    .team-mem-col .link {
        position: relative;
        overflow: hidden;
        width: 170px;
        height: 170px;
        display: inline-block;
        margin: 0 auto;
        border-radius: 50%
    }

    .team-mem-col .team-hover {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out
    }

    .team-mem-col .team-hover .team-hover-content {
        color: #000;
        position: absolute;
        width: 70%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .team-mem-col .team-hover .team-hover-content .extra-link {
        font-size: 10px;
        width: 100%
    }

    .team-mem-col .team-hover .team-hover-content li {
        display: inline-block
    }

    .team-mem-col .team-hover .team-hover-content a {
        padding: 10px;
        height: 28px;
        width: 28px;
        border-radius: 50px;
        margin-right: 4px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center
    }
    .team-mem-col .link:hover .team-hover {
        opacity: 1
    }
    .team-mem-col .member-name{
        line-height: 0;
    }
    /* ==========================================================================
    12.0 Blog Styling
    ========================================================================== */
    .post-col{
        -webkit-box-shadow: 0 0 45px rgba(0,0,0,.1);
        -moz-box-shadow: 0 0 45px rgba(0,0,0,.1);
        box-shadow: 0 0 45px rgba(0,0,0,.1);
        transition:0.5s;
        -webkit-transition:0.5s;
        background: #fff;
        border-radius: 5px;
    }
    .post-col a:hover{
        color: inherit;
    }
    .post-col:hover{
        transform:translateY(-10px);
        -webkit-transform:translateY(-10px);
    }
    .post-col .post-content{
        padding: 0 30px 30px 30px;
    }
    .post-meta{
        margin: 0; 
    }
    .post-meta li{
        margin-right: 15px;
        display: inline-block;
        float: right;
    }
    .post-meta li:first-child{
        float: left;
    }
    .post-meta li a{
        font-size: 0.975em;
        color: #b4bcca;
        transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .post-meta li i{
        margin-right: 5px;
    }
    .post .post-col a img{
        width: 100%;
        transition: .5s;
        -webkit-transition:.5s;
    }
    .post .post-col:hover a img{
        opacity: 0.7;
    }

    .blog a:not(.btn) {
        display: block
    }

    .blog a:not(.btn):hover {
        color: inherit
    }

    .blog .tags a {
        display: inline-block;
        padding: 3px 10px;
        color: #a8a8a8;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 13px;
        background: #fff;
    }

    .blog .tags a.active {
        background: #c9c9cb;
        color: #fff;
        border: 0
    }

    .blog .post-col {
        box-shadow: 0 0 0 transparent
    }

    .blog .post-content {
        padding: 0
    }

    .blog .post-col:hover {
        transform: none
    }

    .blog .custom-form .form-control,
    .blog .sub-input .custom-form .form-control {
        height: 50px;
        background: #F0F1FF;
        box-shadow: 0 0 0 transparent;
        border-radius: 5px;
        border: 0;
    }

    .blog .sub-input .custom-form .btn {
        text-transform: uppercase;
        border-radius: 0 5px 5px 0;
        margin: 0;
        padding: 15px;
        color: #000
    }

    .blog .custom-form textarea {
        height: 120px !important
    }

    .blog .sub-input .custom-form .btn i {
        margin: 0
    }

    .blog .feature-text {
        padding: 26px;
        background: #300f49;
        font-size: 18px;
        line-height: 30px;
        margin: 50px 0;
    }
    /* ==========================================================================
    13.0 Faqs Styling
    ========================================================================== */
    .faq .panel-group .panel {
        border-radius: 0;
        box-shadow: none;
        border: 0px;
    }
    .faq .panel-default > .panel-heading {
        padding: 0;
        border-radius: 0;
        border: 0px;
    }

    .faq .panel-title, .glyphicon{
        font-size: 16px;
        font-weight: 600;
    }
    .glyphicon{
        padding:8px;
        font-size: 24px;
    }

    .faq .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }
    .faq .panel-title > a:hover{
        color: inherit;
    }

    .faq .more-less {
        color: #fff;
    }

    .faq .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border: 0px;
    }
    .faq-wrapper {
        border: 1px solid rgba(0, 0, 0, 0.09);
        border-radius: 10px;
        padding: 40px 50px;
        background:#fff;
    }
    /* ==========================================================================
    14.0 Process Styling
    ========================================================================== */
    .process [class*="col-"]{
        padding: 0 80px;
    }
    .process [class*="col-"]:after{
        position:absolute;
        content: "\e649";
        font-family: 'themify';
        font-size: 48px;
        top: 50%;
        right: 0;
        color: #cfcade;
    }
    .process [class*="col-"]:last-child:after{
        display: none;
    }

    /* ==========================================================================
    15.0 Footer Styling
    ========================================================================== */

    .footer-wrapper .navbar-brand{
        display: block;
        height: auto;
        padding: 0;
    }
    .footer-wrapper li a, .footer-wrapper p{
        opacity: .9;
    }
    .footer-wrapper li a:hover{
        opacity: 1;
        color: #fff;
    }
    .footer-wrapper .copyright {
        font-size: .9em;
        padding: 40px 0;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }
    .footer-wrapper .subscribe-box{
        background: rgba(0,0,0,.1);
        border-radius: 5px;
        margin-bottom: 60px;
        padding: 30px 20px;
        line-height: 0;
    }
    .footer-wrapper .subscribe-box .heading{
        margin-bottom: 0;
    }
    .footer-wrapper .subscribe-box .form-group{
        margin-bottom: 0;
    }
    .footer-wrapper .subscribe-box .btn:hover{
        color: #fff;
    }

    /* ==========================================================================
    16.0 Footer Styling
    ========================================================================== */
    @media only screen and (min-width :1900px) {
        .bg-trans:before,
        [class*=bg-trans]:before,
        [class*=style-]:after {
            background-size: 100% !important
        }
        .hero .img-pre.right{
            max-width: 950px;
            right: 0;
        }
    }

    @media only screen and (max-width :992px) {
        body {
            font-size: .9em
        }
        h1 {
            font-size: 3em
        }
        h2 {
            font-size: 2.75em
        }
        h3 {
            font-size: 2.5em
        }
        h4 {
            font-size: 1.75em
        }
        h5 {
            font-size: 1.5em
        }
        h6 {
            font-size: 1.25em
        }
        .container {
            padding-left: 30px;
            padding-right: 30px;
        }
        .icon-bg-md {
            width: 50px;
            height: 50px
        }
        .sec-pad {
            padding-top: 70px;
            padding-bottom: 70px
        }
        .sec-pad-lg {
            padding-top: 90px;
            padding-bottom: 90px
        }
        .pt-0 {
            padding-top: 0
        }
        .pb-0 {
            padding-bottom: 0
        }
        .p-0 {
            padding: 0
        }
        .parallax-bg.cta{
            visibility: hidden;
        }
        .social-holder a {
            height: 40px;
            width: 40px
        }
        .res-center {
            text-align: center;
            padding: 70px;
            float: none
        }
        .res-center .icon {
            float: none;
            margin-bottom: 10px
        }
        .res-center .left-dir-col .text,
        .res-center .right-dir-col .text {
            text-align: center;
            margin: 0
        }
        .res-margin {
            margin-bottom: 70px
        }
        .shad-box-list {
            min-width: 400px;
        }
        .flx-off-sm {
            display: block
        }
        .btn {
            padding: 10px 24px;
            margin-right: 5px
        }
        .btn i {
            font-size: 16px
        }
        .btn span {
            font-size: 12px
        }
        .btn i+span {
            margin-top: 2px
        }
        .process [class*="col-"] {
            padding: 0 30px;
        }
        .process [class*="col-"]::after {
            font-size: 30px;
        }
        .navbar-custom ul li {
            margin: 0 10px
        }
        .navbar-custom ul li a {
            font-size: 14px;
        }
        .navbar-custom .nav-btn .btn {
            padding: 13px 15px;
            font-size: 13px;
        }
        .hero {
            padding-top: 150px;
            padding-bottom: 150px
        }
        .hero .img-pre.right{
            max-width: 800px;
        }
        .hero .img-pre .circle-bg {
            height: 320px;
            width: 320px;
        }
        .hero-content .mockup {
            top: 30px;
            max-width: 350px
        }
        .hero-single {
            height: 300px;
            padding-top: 90px;
        }
        .count{
            font-size: 48px;
        }
        .count + p {
            padding-left: 10px;
            margin-top: 0px;
        }
        .feature .section-text {
            padding: 0 40px 10px 40px
        }
        .footer-wrapper .nav {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
    }

    @media only screen and (max-width :767px) {
        .container {
            padding-left: 80px;
            padding-right: 80px;
            max-width: 100%
        }
        .navbar-custom ul li a:hover:before,
        .navbar-custom ul li.active a:before {
            width: 0%
        }
        .res-center-sm {
            padding: 50px;
            text-align: center;
            float: none
        }
        .right-dir-col.res-center-sm .flx-container .icon, .right-dir-col.res-center-sm .flx-container [class*="icon-"] {
            margin: 0 auto 10px auto;
        }
        .res-center-sm .icon, .res-center-sm [class*="icon-"] {
            float: none;
            margin-bottom: 10px
        }
        .res-center-sm.left-dir-col .text,
        .res-center-sm.right-dir-col .text {
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .process [class*="col-"] {
            padding: 0px 30px 50px 30px;
        }
        .process [class*="col-"]::after {
            content: "\e64b";
            font-size: 30px;
            top: 80%;
            right: 47%;

        }
        .shad-box-list {
            position: static;
            left: 0px;
        }
        .pt-0 {
            padding-top: 0
        }
        .pb-0 {
            padding-bottom: 0
        }
        .p-0 {
            padding: 0
        }
        .count{
            float: none;
            text-align: center;
        }
    .count + p{
            padding: 0;
            text-align: center;
        }
        .quote .owl-item {
            padding: 10px
        }
        .navbar-header {
            max-width: 100%
        }
        .tab-horizon .tab-menu .tab-list li {
            padding: 10px
        }
        .flx-off-xs {
            display: block
        }
        .res-margin,
        .res-margin-sm {
            margin-bottom: 50px
        }
        .style-wave-2{
            padding-bottom: 0!important;
        }
        .hero:not(.style-angle, .style-flate) {
            height: 1150px;
            padding: 100px 0;
        }
        .hero .img-pre {
            margin-top: 30px;
            width: auto;
        }
        .hero .img-pre.right{
            max-width: 500px;
            right: -100px;
            bottom: -50px;
        }
        .shad-box-list {
            min-width: auto;
        }
        .navbar-custom,
        .navbar-custom.affix {
            padding: 15px 0
        }
        .navbar-custom .navbar-brand {
            padding: 6px 0 0 0
        }
        .navbar-custom ul li {
            margin: 0 10px
        }
        .navbar-custom ul li a {
            font-weight: 400;
            color: inherit;
            padding-left: 30px;
            text-align: left;
            border-bottom: 1px solid #eaeaea;
        }
        .navbar-custom ul li a:hover {
            color: #0facf3;
        }
        .navbar-custom ul li a:hover,
        .navbar-custom ul li.active a {
            color: #424242;
            border-bottom: 1px solid #eaeaea;
        }
        .navbar-custom .nav-btn .btn {
            margin: 15px 0;
            border-color: rgba(0, 0, 0, .2);
            color: #424242;
        }
        .navbar-custom:not(.navbar-fixed-top) .container {
            width: 100%
        }
        .navbar-custom ul li a::after {
            height: 0
        }
        .navbar-custom .right-nav {
            float: none
        }
        .navbar-custom .right-nav .nav-btn {
            text-align: left;
            float: none
        }
        .navbar-collapse {
            background: #fff;
            padding:0;
            overflow-x: hidden;
            margin-top: 15px
        }
        .navbar-nav {
            margin: 0 -15px;
        }
        .sec-pad,
        .sec-pad-lg {
            padding-top: 70px;
            padding-bottom: 70px
        }
        .pt-0 {
            padding-top: 0
        }
        .pb-0 {
            padding-bottom: 0
        }
        .p-0 {
            padding: 0
        }
        .spce {
            height: 15px;
        }
        .spce.lg {
            height: 40px
        }
        .tab-container {
            margin-left: 0
        }
        .tab-list li {
            display: block
        }
        .tab-list li a {
            padding: 3px 6px
        }
        .screenshot .owl-carousel {
            margin-top: 0;
            margin-bottom: 0
        }
        .btn-holder {
            margin-top: 10px
        }
        .pricing {
            padding: 0 40px 0 40px
        }
        .pricing .pricing-table,
        .pricing .pricing-table.main {
            transform: scale(1)
        }
        .parallaxie {
            background-attachment: scroll !important;
            background-position: 50% 50% !important
        }
    }

    @media only screen and (max-width :480px) {
        .pt-0 {
            padding-top: 0
        }
        .pb-0 {
            padding-bottom: 0
        }
        .p-0 {
            padding: 0
        }
        .btn {
            padding: 10px 15px;
            font-size: .775em
        }
        .icon-bg {
            width: 80px;
            height: 80px;
            font-size: 2em
        }
        .sub-input .custom-form .form-control {
            height: 50px
        }
        .tab .slide-side .phone {
            width: 200px
        }
        .app-slide {
            position: absolute;
            top: 50%
        }
        .app-slide img {
            width: 176px !important
        }
        .feat-slide .owl-item {
            padding: 10px
        }
        .tab-horizon .tab-menu .tab-list li {
            padding: 5px 7px;
            font-size: 10px
        }
        .res-center-xs {
            text-align: center;
            float: none
        }
        .res-center-xs .icon {
            float: none;
            margin-bottom: 10px
        }
        .res-center-xs .left-dir-col .text,
        .res-center-xs .right-dir-col .text {
            text-align: center;
            margin: 0
        }
        .res-center-sm,
        .res-center-xs {
            padding: 20px
        }
        .res-margin,
        .res-margin-sm,
        .res-margin-xs {
            margin-bottom: 25px
        }
        .pricing {
            padding: 0
        }
        .container {
            padding-left: 35px;
            padding-right: 35px
        }
        .section-text {
            margin: 0 auto 40px auto
        }
        .blog .sub-input .custom-form .btn {
            width: auto;
            position: absolute;
            height: 100%
        }
        .sub-input .custom-form label {
            top: 14%;
        }
    }

    @media only screen and (max-width :360px) {
        .navbar-brand img {
            width: 120px;
            margin-top: 8px;
            margin-bottom: 8px
        }
        .pt-0 {
            padding-top: 0
        }
        .pb-0 {
            padding-bottom: 0
        }
        .p-0 {
            padding: 0
        }
    }

    .hero.intro {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .hero.intro.style-wave:after {
        background-size: cover !important
    }

    .demo div[class*=col-] a {
        display: block;
        border: #dbdbdb;
        transition: .5s;
        -webkit-transition: .5s;
        box-shadow: 0 6px 45px rgba(169, 169, 169, .1)
    }

    .demo div[class*=col-] a:hover {
        box-shadow: 0 20px 70px rgba(0, 0, 0, .2);
        transform: translateY(-5%)
    }
        
    .demo div[class*="col-"] a img {
        border-radius: 20px;
        box-shadow: 0 6px 45px rgba(169,169,169,.1);
    }
    @media only screen and (max-width :991px) {
        .hero.intro {
            height: auto;
        }
        .hero.intro .parallax-bg {
            background-size: 100%;
            background-position: 50% 30%
        }
        .demo [class*=col] {
            margin-bottom: 30px
        }
    }

    /* Custom footer contact section */
    .footer-contact {
    border: 1px solid rgba(255, 255, 255, 0.027);
    border-radius: 8px;
    padding: 20px 30px;
    /* margin-bottom: 40px; */
    background: rgba(0,0,0,0.2);
    /* background-color: rgb(30 35 41); */
    color: #ffffff;
    }
    .footer-list-contact{
        display: flex;
        align-items: center;
        gap: 3px;
    }
    .custom-f-blue{
        color: #1877F2 !important;
    }
    .linkidin-color{
        color: #0A66C2 !important;
    }
    .g-custom-color{
        color: rgb(177, 58, 58);
    }
    .footer-list-contact li a{
        background-color: rgb(24 28 33);
    }
    .x-custom{
        color: white;
    }
    .footer-contact h4 {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 700;   
    }
    .footer-contact p {
    margin: 0;
    font-size: 14px;
    }

    /* EV logo circle */
    .ev-logo {
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    }
    .ev-logo small {
    font-size: 10px;
    font-weight: 300;
    }

    /* Footer widgets styling */
    .footer-widgets h6 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 16px;
    }
    .footer-widgets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .footer-widgets ul li {
    margin-bottom: 6px;
    }
    .footer-widgets ul li a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    }
    .footer-widgets ul li a:hover {
    text-decoration: underline;
    }

    /* Footer divider line */
    .footer-line {
    border-color: rgba(255,255,255,0.2);
    margin-top: 40px;
    margin-bottom: 20px;
    }

    /* Copyright text */
    .footer-wrapper .copyright {
    text-align: center;
    font-size: 14px;
    margin: 0;
    color: #ffffff;
    }


    
    #overview {
    background: #ffffff !important;
    position: relative;
    z-index: 2;
    }

    #overview h1,
    #overview h2,
    #overview h3,
    #overview h4,
    #overview h5,
    #overview h6,
    #overview p,
    #overview span,
    #overview li {
    color: #000000 !important;
    }

    /* Comparison section styling */
    .comparison-section {
    background: #ffffff;
    
    }

    .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    }

    .comparison-table th,
    .comparison-table td {
    border-top: 1px solid #e4e8f0;
    border-bottom: 1px solid #e4e8f0;
    border-left: none;
    border-right: none;
    padding: 12px 15px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
    }

    .comparison-table thead {

    font-weight: 700;
    }

    
    .comparison-section,
    .comparison-section th,
    .comparison-section td,
    .comparison-section h3 {
    color: #1f2a4b;   
    }

    
    #feature.platform-highlights {
    padding-bottom: 0px;  
    }

    #overview.sec-pad-lg {
    padding-top: 0px;      
    }


    .feature-icon {
    width: 90px;
    height: auto;
    margin-bottom: 10px;
    }
    .icon-md {
    margin-bottom: 10px;
    }
    .text h6 {
    color: #000 !important;
    font-weight: 600;
    }

    .kf-icon {
    width: 115px;
    height: 115px;
    display: block;
    margin: 0 auto 10px;
    gap: 100px !important;
    }

    
    .kf-row {
    display: flex; 
    align-items: flex-start;
    flex-wrap: wrap;

     gap: 80px 30px;    /* 👉 icons ke beech horizontal space */

    }

    .kf-row > [class*="col-"] {

    float: none;                       
    }


    .grdnt-yellow {
    background: #f3a423 !important;
    background-image: none !important;
    }

    /* Custom footer gradient */
    .footer-gradient {
    background-color:  rgb(30 35 41);
    }

    .ev-logo {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;        
    }

    .ev-logo-img {
    width: 50px;              
    height: 50px;
    display: block;
    }

    .nav-ev-logo {
    max-height: 80px;   
    width: 200px;
    }


    .sec-pad-lg + .sec-pad-lg {
    margin-top: 0 !important;          
    }

    
    .items.feat-op {
    margin-bottom: 0 !important;
    }
    .bg-mockup {
    margin-bottom: 0 !important;
    }

    /* About Section Phone Image Bigger */
    .about-phone {
        width: 380px !important;     
        max-width: 400%;
        transform: scale(1.5);       
        margin-bottom: 20px;
    }


    .hero .phone {
        width: 360px !important;     
        max-width: 100%;
        height: 600px;
    }

.ph-icon {
  width: 150px !important;   
  height: auto !important;
}

/* Platform Highlights icon box bigger */
.platform-highlights .feature-icon {
  width: 140px !important;    /* yahan size control karo */
  height: 100px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0px;
}

.platform-highlights .feature-icon img,
.platform-highlights .feature-icon i,
.platform-highlights .ph-icon {
  width: 80% !important;      
  height: auto !important;
}

.feature-bg {
  position: relative;
  background-image: url("../image/Icons Purple and image/Images/Phones.png");
  background-repeat: no-repeat;
  background-position: center bottom -120px;
  background-size: 850px auto;
  padding-bottom: 350px;
}

/* 🔥 Fix: Scroll hone par Get in Touch button ko white kar do */
.navbar-custom.affix .nav-btn .btn.btn-border {
    color: #ffffff ;       /* text black or white jo chaho */
    border-color: #ffffff !important; 
}

.navbar-custom.affix .nav-btn .btn.btn-border:hover {
    background: #000 !important;  
    color: #fff !important;
}



/* iliyans styling */
.navbar-custom{
    padding-bottom: 0px !important;

}
.custom-flex{
    display: flex;
    align-items: center;
}
.custom-footer-item-center{
    display: flex;
    justify-content: end;
}
.custom-end{
    display: flex;
    justify-content: end;
}
.custom-line{
    line-height: 1.1;
}
.custom-pfont{
    font-size: 2.5em;
}
.custom-space-flex{
    padding: 5px 0px !important;
}
.custom-p{
    padding: 8px;
}
/* .abt-icon{
    height: 150px;
    width: 150px;
} */
.custom-list{
    display: flex;
    align-items: center;
}
.custom-mb-0{
    margin-bottom: 0px !important;
}
.footer-main-logo{
    width: 200px;
    height: 150px;
}
.custom-footer-flex{
    margin-top: 20px;
    margin: 20px;
    display: flex;
    align-items: center;
}
.analytics-list{
    margin-left: 0px;
    padding-left: 0px;
}
.analytics-list li{
    display: flex;
    gap: 2px;
    margin-bottom: 0px !important;
    align-items: start;
}
.analytics-list li img{
    width: 20px;
    margin-top: 3px;
    height: 20px;
}
.custom-feature-height{
    height: 300px !important;
}
.custom-center-nav{
    display: flex;
    align-items: center;
    height: 70px;
}
.js-sans{
    font-family: "josefin sans", sans-serif;
}
.text-light{
    color: #fff;
}
.custom-alignment-20{
    width: 20%;
}
.custom-alignment-80{
    width: 80%;
}

/* custom form start */
.form-section{
    background-color: #4e2057;
}
.sec-form{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
}
.custom-form-spacing{
    display: flex;
    padding: 50px;
    justify-content: space-around;
    padding-top: 120px;
    color: white;
    align-items: center;
}
.custom-form-spacing h2,p{
    color: #fff;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.custom-form-color{
    /* width: 570px; */
    width: 600px;
    background-color: rgb(30 35 41);
    border-radius: 20px;
    padding: 20px;
}
.custom-form-wrap{
    display: flex;
    justify-content: space-between;
}
.custom-form-wrap input{
    padding: 10px;
    color: black;
    border-radius: 5px;
    margin-bottom: 10px;
}
.form-inner-wrap textarea{
    color:  black !important;
}
.form-inner-wrap{
    display: flex;
    flex-direction: column;
}
.form-inner-wrap input::placeholder{
    color: #999292;
    font-size: 14px;
}
.form-inner-wrap textarea{
    border-radius: 5px;
    height: 100px;
}
.send-btn{
    background-color: #f4a424;
    border-radius: 10px;
    padding: 10px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.active-touch{
    background-color: #fff !important;
    color: black;
}
.send-btn:hover{
    background-color: #300f49;
    color: white;
}
.custom-copy-flex{
    display: flex;
    align-items: center;
    /* gap: 1px; */
    justify-content: center;
}

/* custom form end */

.text-dark{
    color: black !important;
}
.video-img{
    width: 400px;
}
.video-img-1{
    width: 450px;
}
/* iliyan styling end */

@media (max-width:800px){
.video-img{
    height: 400px;
    width: 230px;
}
.custom-img-pre{
    margin-top: 30px !important;
}
.video-img-1{
    height: 270px;
    width: 270px;
}

    .sec-form{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    align-items: center;
}
.custom-form-spacing{
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-around;
    padding-top: 120px;
    color: white;
    align-items: center;
}
.custom-form-spacing h2,p{
    color: #fff;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.custom-form-color{
    /* width: 570px; */
    width: 300px;
    background-color: rgb(30 35 41);
    border-radius: 20px;
    padding: 20px;
}
.custom-form-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.custom-form-wrap input{
    padding: 10px;
    color: black;
    border-radius: 5px;
    margin-bottom: 10px;
}
.form-inner-wrap textarea{
    color:  black !important;
}
.form-inner-wrap{
    display: flex;
    flex-direction: column;
}
.form-inner-wrap input::placeholder{
    color: #999292;
    font-size: 14px;
}
.form-inner-wrap textarea{
    border-radius: 5px;
    height: 100px;
}
.send-btn{
    padding: 10px;
    margin-top: 20px;
}



    .navbar-custom .navbar-toggle{
        top: 25px;
    }
    .custom-alignment-20{
    width: 100%;
}
.hero .phone {
    width: 100% !important;
    max-width: 100%;
    height: 100%;
}
.custom-feature-height{
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    gap: 1px;
    height: 300px !important;
}
.custom-alignment-80{
    width: 100%;
}
    .custom-flex{
        display:flex;
        flex-direction: column;
        text-align: center;
    }
    .analytics-list li img{
        margin-top: 1px;
    }
    .analytics-list li p{
        text-align: start;
    }
    .custom-center-footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-contact h4{
        font-size: 17px;
    }
    .footer-contact{
        text-align: center;
        padding: 10px;
    }
.sm-custom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     gap: 10px;
}
.feature-bg {
    position: relative;
    background-image: url(../image/2-phone.png);
    background-repeat: no-repeat;
    background-position: center bottom 0px;
    background-size: 430px auto;
    padding-bottom: 350px;
}
.custom-footer-flex{
    display: flex;
    flex-direction: column;
}
.custom-list{
    display: flex;
    flex-direction: column;
   
}
.navbar-brand img {
        width: 120px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
.custom-sm-style{
    display: flex;
    justify-content: center;
}
.navbar-custom .nav-btn .btn {
        margin: 15px 0;
        border-color: rgba(0, 0, 0, .2);
        color: #424242 !important;
    }
.custom-center-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
}

.footer-main-logo{
    height: 140px;
}
.custom-mt-sm{
    margin-top: 20px;
}
.custom-mt-sm {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        display: flex;
        margin-top: 20px;
    }
    .navbar-custom ul li a{
        color: black !important;
    }
    .navbar-custom ul li a, .navbar-custom.affix ul li a{
        color: black !important;
    }
}
.safari .grdnt-yellow {
    background-color: #f4a427 !important;
  }
  .orange-bg{
    background-color: #f4a424;
  }




  @supports (-webkit-touch-callout: none) {
  .video-img-1 {
    mix-blend-mode: screen;
  }
}