
 .intro{
    background-color: #f6feff;
    .comming-soon-lable {
       position: absolute;
       left: auto;
       right: -70px;
       top: 40px;
       background: $danger;
       color: $white;
       text-align: center;
       padding: 10px 15px;
       border-radius: 5px;
       transform: rotate(45deg);
       width: 260px;
   }
    .link-dasable{
        pointer-events: none;
    }
    #butter {
       z-index: -1;
   }
    #loading {
       background-color: $body-bg;
       height: 100%;
       width: 100%;
       position: fixed;
       margin-top: 0px;
       top: 0px;
       left: 0px;
       bottom: 0px;
       overflow: hidden !important;
       right: 0px;
       z-index: 999999;
   }
   #loading-center {
       background: url(../images/loader.gif) no-repeat scroll center center;
       background-size: 20%;
       width: 100%;
       height: 100%;
       position: relative;
   }
    h1,h2,h3,h4,h5,h6{
       margin-bottom: 0;
       color:$body-title;
       letter-spacing: -0.02em;
    }
    .font-weight-700{
        font-weight: 700;
    }
    .font-weight-400{
        font-weight: 400;
    }
    .counter-title {
       font-size: 60px;
   }
   .count-detail {
       &:first-child {
           &:before {
               border: 0;
           }
       }
       &:before {
           content: "";
           border-left: 1px solid $border-color;
           position: absolute;
           left: -50px;
           width: 1px;
           height: 100%;
       }
   }
}
.content-page {
   position: relative;
   overflow: hidden;
   z-index: 9;
}
.slick-slide{
   img {
       box-shadow: 0 0px 30px -5px rgba(68 ,130 ,245 , 0.2);
       @if $enable-rounded == true {
           @include radius-mixin($border-radius);
       }
    }
    a{
       &:focus{
           outline:none!important;
       }
    }
}
.card {
	&.inner-pages {
        a {
            .image {
                height: 450px;
                /*width: 100%;
                object-fit: cover;
                object-position: top;
                height: 300px;
                @if $enable-transitions == true {
                    @include transition-mixin(5s all ease);
                }*/
            }
        }
        /*&:hover {
            a {
                img {
                    object-position: bottom;
                    @if $enable-transitions == true {
                        @include transition-mixin(2s all ease);
                    }
                }
            }
        }*/
	}
}
.text-black{
    color:$black!important;
}
.container-fluid {
   padding: 0 100px;
}
//  counter
#page-counter {
   padding: 30px 0;
}

.intro {
   section {
       position: relative;
       margin: 110px 0;
       width: 100%;
       clear: both;
       z-index: 0;
       overflow: hidden;
   }
   section.pack-builder{
       padding:100px 0 0;
   }
   .block-title-section{
       height: 700px;
   }
   .app-intro.lts{
       padding:100px 0!important;
   }
   #package {
       .packge-content {
           margin-left: 110px;
       }
   }
}

.pack-font{
   font-size: 2.5em;
   line-height: 1;
   position: relative;
   display: inline-block;
   z-index: 9;

   .pack-effect {
       position: relative;
       &:before {
           content: "";
           border-bottom: 10px solid rgba(70, 90, 247, 0.43);
           height: 10px;
           width: 90%;
           position: absolute;
           right: 0;
           bottom: 5px;
           z-index: -1;
           @if $enable-rounded == true {
               @include radius-mixin($border-radius);
           }
       }
   }
}
.small-text{
   font-size: 20px;
}

.purchase-btn-fixed {
   position: fixed;
   bottom: 110px;
   right: 32px;
   height: 60px;
   background: $primary-light;
   @include shadow-mixin( 0 2px 4px rgba(0,0,0,.07));
   border-radius: 30px;
   color:$white;
   padding-right: 10px;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   z-index: 999;
   color:$white!important;
   &:before {
       content: "";
       position: absolute;
       z-index: 0;
       left: 50%;
       top: 50%;
       @include transform-mixin( translateX(-50%) translateY(-50%));
       display: block;
       width: 70px;
       height: 70px;
       background: $primary-light;
       @if $enable-rounded == true {
           @include radius-mixin($border-radius-circle);
       }
       animation: pulse-border 1500ms ease-out infinite;
   }
}
.p-icon{
   height: 40px;
   width: 40px;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   position: relative;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   background-color: $primary;
  @if $enable-rounded == true {
       @include radius-mixin($border-radius-circle);
   }
   margin: 10px 0 10px 10px;
   @include transition-mixin(all cubic-bezier(.4,0,.2,1) .4s);
}

.scroll-nav.n-fixed{
   position: fixed;
   top:0;
   left:0;
   right:0;
   width:100%;
   z-index:999!important;
   background-color: $primary;
   -webkit-animation-name: animationFade;
   -o-animation-name: animationFade;
   animation-name: animationFade;
   -webkit-animation-duration: 0.7s;
   -o-animation-duration: 0.7s;
   animation-duration: 0.7s;
   -webkit-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
   border-radius:0;
   border-color:transparent;
   @include shadow-mixin(0px 0px 8px 0px rgba(0, 0, 0, 0.1));
}

.package-wrapper{
   .counter-title{
       font-weight: 700;
       font-size: 50px;
   }
   .count-text{
       font-size: 24px;
   }
   .figma-img{
       width: 45px;
       margin-bottom: 10px;
   }
}
.techno{
   .tech-box{
       h4{
           font-size: 26px;
           a{
               color:$white;
           }
       }
   }
   .right-sec{
       h2,p,span{
           color: $white;
       }
   }
}
.scroll-section {
   section {
       margin-bottom: -45px;
   }
}
.techno-color {
   padding: 100px 0;
}

.section-video {
   > iframe {
       background: white;
       padding: 5px;
       box-shadow: 0 10px 30px rgba(68,130,245,.2);
       border-radius: 5px;
   }
}
.ly-box{
   margin-bottom:50px;
    .card{
       margin-bottom: 25px;
   }
   .ly-title {
       h4 {
           a {
               color:$black;
               font-weight: 600;
           }
       }
   }
}

// product box
.title-wrapper{
   margin-bottom: 40px;
   position: relative;
}
.section-title{
   margin-bottom: 50px;
   .bFont{
       font-size: 95px;
   }
   .mFont{
       font-weight: 700;
       color:$black;
       font-size: 40px;
   }

}

.bg-icon-2{
   position: absolute;
   right: -58px;
   top: 50%;
   @include transform-mixin( translateY(-50%));
   width: 150px;
}
.bg-icon{
   position: absolute;
   right: -50px;
   top: 43%;
}
.bg-icon3{
   position: absolute;
   right: -50px;
   top: 39%;
}

//App Intro
.app-intro{
   padding:20px 0 0!important;
}
.app-intro-img{
   position: absolute;
   right: -82px;
   top: -20px;
   @include opacity-mixin(.1);
   -webkit-animation: bounces 2s infinite alternate;
   animation: bounces 2s infinite alternate;
}
.land-intro-img{
   position: absolute;
   left: -82px;
   top: -20px;
   @include opacity-mixin(.1);
   -webkit-animation: bounces 2s infinite alternate;
   animation: bounces 2s infinite alternate;
}
#app{
   .card {
       position: relative;
       width: 100%;
       padding: 5px;
       //overflow: hidden;
       @include shadow-mixin(0 10px 30px rgba(68 ,130 ,245 , 0.2));
       @if $enable-transitions == true {
           @include transition-mixin(all 0.3s ease-in-out);
       }
       @if $enable-rounded == true {
            @include radius-mixin(20px);
       }
       &:hover{
           .box-title {
               bottom: 0;
               @if $enable-transitions == true {
                   @include transition-mixin(all 0.3s ease-in-out);
               }
           }
       }
   }
   .image-mobile {
        position: absolute;
        z-index: 99;
        bottom: -60px;
        top: auto;
        right: -50px;
    }
   .box-inner {
        padding: 0 100px;
    }
    .box-row {
        margin: 0 -100px;
    }
   .box-title {
       position: absolute;
       left: 0;
       right: 0;
       bottom: -60px;
       color: $white !important;
       margin: 0;
       display: block;
       padding: 15px;
       @if $enable-transitions == true {
           @include transition-mixin(all 0.3s ease-in-out);
       }
   }
}


//Package Builder
.white-sec{
   background:$white;
   height:400px;
   z-index:0;
   .cir-full {
       left: 50%;
       top: 23%;
       @include transform-mixin( translateX(-50%));
   }
}

.screens-img {
   img{
       border:3px solid $black;
       @if $enable-rounded == true {
           @include radius-mixin($border-radius);
       }
       height:265px;
   }
}

//Inner Pages

.inner-box{
   padding:15px;
}


// Menu style
.section-mountain {
   height: 400px;
   position: relative;
   overflow: hidden;
   margin-top: -200px;
   z-index: -1;
   &:before{
       position: absolute;
       content: "";
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       width: 100%;
       background: url(../images/intro/slider/blur-img.png)no-repeat center top;
       background-size: cover;

   }
   &::after{
       position: absolute;
       content: "";
       top: 20%;
       bottom: 0;
       left: 0;
       right: 0;
       width: 100%;
       background: url(../images/intro/slider/mountain.png)no-repeat center bottom;
       background-size: cover;
   }
}

// core-feature
.featured-items {
   margin-top: 100px;
   .figma-img {
       width: 60px;
   }
   .figma-img.s-icon{
       width: 23px;
   }
   .feature-content {
       box-shadow: 0 10px 30px rgba(68,130,245,.2);
       .feature-icon {
           display: inline-block;
           @if $enable-rounded == true {
               @include radius-mixin($border-radius);
           }
           height: 80px;
           width: 80px;
           line-height: 75px;
           text-align: center;
           background: $white;
       }
   }
   .feature-detail {
       h6 {
           color: $body-text;
           text-align: left;
       }
   }

}

// elements

// LTS
.lts-section {
   h1.lts-font {
       font-size: 200px;
       line-height: 160px;
       margin: 30px 0;
   }
   .bFont {
       font-size: 60px;
       margin-bottom: 20px;
   }
   h5{
       font-size: 40px;
   }
}

//Charts
.sec-higlight-box{
   position: absolute;
   left:50%;
   top:50%;
   @include transform-mixin( translate(-50%,-50%));
   display: inline-block;
   background: rgba(71,136,255,0.8);
   background: $primary;
   padding:60px;
   color:$white;
   @if $enable-rounded == true {
       @include radius-mixin($border-radius);
   }
}
.all-charts{
   overflow: hidden;
}
.charts-icons {
   display: flex;
   flex-wrap: wrap;
}
.chart-box {
   width: 12.5%;
   text-align:center;
   img {
       @include shadow-mixin(0 16px 40px 0 rgba(0,0,0,.0392157));
   }
}
.chart-box:nth-child(2n+0){
   margin-top: 70px;
}

#back-to-top{
   .top {
       z-index: 999;
       position: fixed;
       margin: 0px;
       color: $white;
       background: $primary;
       position: fixed;
       bottom: 30px;
       right: 40px;
       z-index: 999;
       font-size: 20px;
       width: 45px;
       height: 45px;
       text-align: center;
       line-height: 45px;
       @if $enable-rounded == true {
           @include radius-mixin($border-radius-circle);
       }
       @if $enable-transitions == true {
           @include transition-mixin(all 0.3s ease-in-out);
       }
       &:hover{
           background: $white;
           color: $primary;
       }
   }
}
#main-layouts {
   #app {
       .card {
           &:hover {
               margin-top: 0;
           }
       }
   }
}
.col-lg-5-c{
   text-align: center;
}

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

@media(max-width:1500px){
   .charts-icons{
       justify-content: center;
   }
}

@media(min-width:1300px) and (max-width:1500px){
   .chart-box{
       width: 15.5%;
   }
   .center-border.left {
           &:before {
               left: 0px !important;
               right: auto;
           }
       }
   
}
@media (max-width: 1399px) {
   .intro {
       #package {
           .packge-content {
               margin-left: 90px;
           }
           .count-detail {
               &:before {
                   left: -30px;
               }
           }
       }
   }
}
@media(max-width:1299px){
   .chart-box{
       width: 21.5%;
   }
   .center-border.left {
           &:before {
               left: 0px !important;
               right: auto;
           }
       }
}
@media(max-width:1199px) and (min-width:992px){
   .screens-img{
       img{
           height:192px;
       }
   }
   
   .intro {
       #package {
           .packge-content {
               margin-left: 30px;
           }
           .count-detail {
               &:before {
                   left: -20px;
               }
           }
       }
   }
   #app {
    .box-inner {
        padding: 0 50px;
    }
     .box-row {
         margin: 0 -50px;
     }
   }
}
@media(min-width:1024px){
   .section-title{
       .mFont{
           width:61%;
       }
   }
}

@media(min-width:992px){
   .col-lg-5-c{
       max-width: 20%;
       flex: 0 0 20%;
   }
   .center-border{
       &:before{
           content: '';
           position: absolute;
           right:-11px;
           top:50%;
           @include transform-mixin( translateY(-50%));
           background: $white;
           width: 2px;
           height:100%;
       }
   }
   .center-border.left{
       &:before{
           left:-30px;
           right:auto;
       }
   }
   .package-wrapper{
       .packge-content{
           padding-left:3.1rem;
       }
   }
}

@media(max-width:991px){
   .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
       padding: 0 30px;
   }
   .slider-top-banner {
       background-position: top 0 right;
   }
   .intro {
       #package {
           .packge-content {
               margin-left: 0px;
           }            
           .count-detail {
               &:before {
                   display: none;
               }
           }
       }
   }
   
}
@media(max-width:768px){
   .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
       padding: 0 15px;
   }
   .right-sec{
       padding-top: 60px;
   }
   .intro {
       section {
           margin: 80px 0;
       }
   }
   .main-slider{
       margin-bottom: 0px;
   }
   .intro {
       section.color-mode {
           padding-top: 50px;
       }
   }
}

@media(max-width:767px){
   .header-wrapper{
       padding: 20px 15px !important;
       >.mr-3{
           margin-right: 0 !important;
       }
   }
   .slider-text{
       p.slider-sub-text{
           display: none;
       }
   }
   .count-detail {
       &:last-child {
           padding-top: 20px;
       }
   }
   .screens-img{
       display: block!important;
       img{
       margin:15px 0;
       display: block;
       margin-left:auto;
       margin-right: auto;
       }
   }
   .app-intro {
       padding: 100px 0!important;
   }
   .footer-main-logo{
       img{
           width: 353px;
       }
   }
}

@media(max-width:675px){
   .chart-box{
       width: 25.5%;
       margin-bottom: 15px;
   }
   .chart-box:nth-child(2n+0) {
       margin-top: 0;
   }
   .slider-text {
       padding-top: 40px;
       img {
           width: 120px;
       }
   }
   .scroll-nav{
       flex-wrap: nowrap;
       overflow-y: hidden;
       overflow-x: auto;
       li{
           a{
               white-space: nowrap;
           }
       }
   }
   .btn-builder{
       display: none;
   }
}

@media(max-width: 575px){
   .header-wrapper{
       flex-direction: column;
   }
   .header-logo{
       margin-bottom: 18px;
   }
   .purchase-btn {
       >span{
           padding-right: 5px;
           margin-right: 5px;
       }
       >img{
           height: 15px !important;
           width: 15px !important;
       }
   }    
   .count-detail {
       padding-top: 20px;
   }
}
@media(max-width:480px){
   .chart-box{
       width: 40%;
   }
   .slider-main-logo{
       img {
           width: 335px;
       }
   }
   .lts-section{
       h1.lts-font{
           font-size:150px;
       }
   }
   .bg-common:before{
       content:none;
   }
   .bg-common:after{
       content:none;
   }
   .footer-main-logo{
       img{
           width: 200px;
       }
   }
   .footer-text{
       h1{
           font-size: 2.3em;
       }
   }
   .slider-copyright{
       left: -55px;
   }
   .slider-breed{
       right: -70px;
   }
   .pack-font {
       font-size: 1.5em;
   }
   .section-title {
       .bFont {
           font-size: 75px;
       }
   }
   .voice-btn-fixed{
       right: 15px;
   }
   #back-to-top{
       .top{
           right: 15px;
       }
   }

}
@media(max-width:360px){
   .chart-box{
       width: 100%;
   }
   .slider-main-logo{
       img {
           width: 280px;
       }
   }
   .slider-text{
       h1 {
           line-height: 38px;
       }
   }
}


@keyframes pulse-border {
   0% { @include transform-mixin( translateX(-50%) translateY(-50%) translateZ(0) scale(1)); @include opacity-mixin(1); }
   100% { @include transform-mixin( translateX(-50%) translateY(-50%) translateZ(0) scale(1.5));  @include opacity-mixin(0); }
}
@keyframes bounces {
   from { transform: translateY(0px); }
   to { transform: translateY(-25px); }
}
@-webkit-keyframes bounces {
   from { transform: translateY(0px); }
   to { transform: translateY(-25px); }
}

@keyframes side {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 100% 0;
 }
}
