@media (max-width: 575px) {
.col-sm-6{width: 50%;}
}

/*=============================================
    04: Banner
==============================================*/
    /*4.1: main banner 01*/
.banner-inner-area {
    padding: 217px 0 96px;
    position: relative;
    overflow: hidden;
}
.banner-area1 .banner-text-wrap h1 {
    font-weight: 600;
    line-height: 80px;
    margin-bottom: 20px;
}
.banner-inner-area.banner-area1:before{
    background: url(../img/app/main-base.png);
    background-position: top right;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    top: 0%;
    right: -5%;
    position: absolute;
    content: "";
}
/* .banner-inner-area.banner-area1:before{
    background: url(../img/banner/base.png);
    background-position: top right;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    top: 0%;
    right: -21%;
    position: absolute;
    content: "";
} 
 .banner-inner-area.banner-area1:after {
    background: url(../img/banner/base2.png);
    background-position: top right;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    top: 36%;
    right: -16%;
    position: absolute;
    content: "";
    z-index: -1;
} 
*/


.banner-area1 .banner-text-wrap{
    padding: 0;
}
.banner-text-inner h1 {
    color: var(--color-default);
    margin-bottom: 10px;
}

.banner-text-inner p {
    margin-bottom: 43px;
}

.banner-text-inner .btn {
    background:var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
	
}
.banner-text-inner .btn:hover {
    background:var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
}
.banner-text-inner .btn:before{
    background:var(--color-secondary-dark);
}
.banner-text-inner .btn + .btn {
    border-color: var(--color-indigo);
    color: var(--color-indigo);
    margin-left: 10px;
	background: var(--color-white);
}

.banner-text-inner .btn + .btn:hover {
    color:var(--color-white);
    border-color: var(--color-indigo);
    background: var(--color-indigo);
}
.banner-text-inner .btn + .btn:hover:before {
    background:  var(--color-indigo);
}

.banner-image{
    -webkit-animation: bounce 1s ease-in-out 0s infinite alternate;
            animation: bounce 1s ease-in-out 0s infinite alternate;
}
.main-header.sticky .logo .main-logo2 {
    display: none;
}
@keyframes bounce{
    0%{
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
    100%{
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px)
    }
}
.banner-inner-area .banner-text-inner{position: relative;}
.banner-shape-inner .shape {
    position: absolute;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;z-index: -1;
}
.banner-shape-inner .shape i{font-size: 30px;}

.banner-shape-inner .shape1 {
    top: -34%;
    left: -12%;
	color:rgba(var(--color-orange-rgb),.5) ;
}

.banner-shape-inner .shape2 {
    top: -24%;
    left: 37%;
	color:rgba(var(--color-indigo-rgb),.5) ;
}

.banner-shape-inner .shape3 {
    top: -34%;
    left: 114%;
	color:rgba(var(--color-green-rgb),.5) ;
}

.banner-shape-inner .shape4 {
    top: -5%;
    right: 13%;
	color:rgba(var(--color-cyan-rgb),.5) ;
}

.banner-shape-inner .shape5 {
    top: 43%;
    left: 49%;
	color:rgba(var(--color-blue-rgb),.5)
}

.banner-shape-inner .shape6 {
    top: 53%;
    left: -12%;
	color:rgba(var(--color-teal-rgb),.5) 
}

.banner-shape-inner .shape7 {top: 103%;right: -6%;
color:rgba(var(--color-red-rgb),.5) }

@keyframes rotate2d {
    0% {
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }    
}
.rotate2d {
    -webkit-animation: rotate2d 2s linear infinite;
    animation: rotate2d 1s linear infinite;
}
@-webkit-keyframes rotate-2d {
    0% {
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
    100% {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }    
}
@keyframes rotate-2d {
    0% {
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
    100% {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }    
}
.rotate-2d {
    -webkit-animation: rotate-2d 2s linear infinite;
    animation: rotate-2d 1s linear infinite;
}

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

@keyframes rotate3d {
    0% {
       -webkit-transform: rotateY(0deg);
               transform: rotateY(0deg);
   }
    100% {
        -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
    }    
}
.rotate3d {
    -webkit-animation: rotate3d 2s linear infinite;
    animation: rotate3d 1s linear infinite;
}

.app-slider {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
		margin-top: 20px;
		
      }
.app-slider .swiper-wrapper{padding-bottom: 60px;}
   .app-slider .swiper-slide {
       width:33.33%;
               height: 100%;
      }
	 .app-slider .swiper-slide-thumb-active {
	          opacity: 1;
	        }
	  
	    
			
			 .app-slider .single-feature-inner{text-align: center;padding:50px 10%;margin: 0 10%; border:var(--color-white) 4px solid;border-radius: 10px;background: #fff;}
			  .app-slider .swiper-slide-active .single-feature-inner{border:var(--color-primary-light) 4px solid;}
			  .app-slider .single-feature-inner h5{font-weight: bold;}
			  .app-slider .single-feature-inner p{color: var(--color-gray);}
			   .app-slider .single-feature-inner .feature-icon{width: 120px;height: 120px;margin: 0 auto 20px;}
			   .app-slider .single-feature-inner .feature-icon img{width: 100%;}
			
			   .single-counter .counter {
			       font-size: 60px;
			       font-weight: 200;
			       color: var(--color-primary);
			       line-height: 42px;
			       margin-bottom: 21px;
			       display: block;
			   }
			   
			   .download-app-inner {
			       padding: 0 60px;
			   }
			   
			   .download-app-inner h2.h1 {
			       font-size: 30px;
			       font-weight: 600;
			       line-height: 60px;
			       margin-bottom: 18px;
			   }
			   
			   .download-app-inner h3 {
			       font-size: 24px;
			       color: var(--color-secondary);
			       font-weight: 400;
			       margin-bottom: 80px;
			   }
			   .download-app-inner .btn {
			       border-color:var(--color-primary);
			       color: #fff;
			       background: var(--color-primary);
			       margin-bottom: 4px;
			       font-size: 20px;
			       font-weight: 600;
			       padding: 23px 60px;border-radius:50px;
			   }
			   
			   .download-app-inner .btn:hover {
			       border-color: var(--color-secondary-dark);
			       background: var(--color-secondary-dark);
			   }
			   .download-app-inner .btn:hover:before {
			       background: var(--color-secondary-dark);
			       border-color:var(--color-secondary-dark);
			       -webkit-transform: scale(30);
			               transform: scale(30);
			   }
.app-footer{background: url(../img/app/app-footer-bg.png) center top no-repeat;background-size: 100%;}
.theme-video-wrap .video-btn {
    height: 125px;
    width: 125px;
    background: #fff;
    line-height: 125px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 50%;
    font-size: 30px;
    padding-left: 10px;
}

.teheme-video-wrap {
    position: relative;
}
.theme-video-wrap {
    padding-top: 325px;
    padding-bottom: 325px;
}

section.app-video {
    background-image: url(../img/app/video-bg.jpg);
    background-size: cover;
    background-position: 0% 78%;
    background-repeat: no-repeat;
    position: relative;
}

section.app-video:before {
    content: '';
    background:rgba(var(--color-secondary-rgb),.5);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.theme-video-wrap .video-btn:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    background: #fff;
    left: 0;
    border-radius: 50%;
    -webkit-animation: scale 1s linear infinite;
            animation: scale 1s linear infinite;
    opacity: .9;
    -webkit-transform: scale(1);
            transform: scale(1);
}
.theme-video-wrap .video-btn i{font-size:60px;}
@-webkit-keyframes scale{
    0%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50%{
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: .9;
    }
    100%{
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
        background: transparent;
    }
}

@keyframes scale{
    0%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50%{
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: .9;
    }
    100%{
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
        background: transparent;
    }
}
.app-slider2-bg{padding: 20px 0;
		}
.app-slider2 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;padding-bottom: 20px;
		background: url(../img/app/mockup1.png)  top  center  no-repeat;background-size:contain;
      }
.app-slider2 .swiper-wrapper{padding-bottom: 60px;}
   .app-slider2 .swiper-slide {
       width:20%;
               height: 100%;
				padding:2%;position: relative;
      }
	  .app-slider2 .swiper-slide img{width: 100%;opacity: .5;}
	
	  
			  .app-slider2 .swiper-slide-active img {opacity: 1;}
			  .app-slider2 .swiper-slide-active::before{content: '';position: absolute;;}
			@media (max-width: 575px) {
				
				section.app-video{background-position:80% 0;}
				.download-app-inner h2.h1{font-size: 20px;line-height: 40px;}
				.download-app-inner h3{font-size: 16px;line-height: 30px;}
				.download-app-inner .btn{padding: 15px 50px;}
				.app-slider2 .swiper-slide {
								padding:15%;
				   }
				   .border-top{padding:15vw 3vw;}
				   .single-counter .counter{font-size:40px;}
				   .banner-inner-area.banner-area1:before{background-size:contain;background-position: 0 50%;}
				   .banner-inner-area{padding: 100px 0  0;}
				   .banner-inner-area .banner-text-inner{padding-bottom: 100px;}
				}