/*
====================================================

* 	[Master Stylesheet]
	
	Template Name 	:  Ultimateapp
	Version    		:  1.0
	Author     		:  W3Engineers Ltd.
	Author URI 		:  https://themeforest.net/user/w3engineers 

====================================================
	
	TOC
	
	1. PRIMARY STYLES
		RESPONSIVE 
	2. COMMON STYLES
		RESPONSIVE 
		SLOPED SIDE 
	3. GO TOP
	4. SWIPER SLIDER STYLING
		SWIPER SIDED CRONTROL 
		SWIPER TWO SIDED CRONTROL 
		BOTTOM ALIGN 
		RESPONSIVE 
		TOP ALIGN 
	5. PRELOADER STYLING
	6. MENU STYLING
		LOGO 
		MENU RIGHT AREA 
		MAIN MENU 
		DROPDOWN 
		DROPDOWN MULTI LEVEL 
		DROPDOWN HOVER EFFECT 
		NAV ICON 
		RESPONSIVE 
	7. SLIDER STYLING
		RESPONSIVE 
	8. FEATURES
		RESPONSIVE 
	9. HOW IT WORKS STYLING
	10. VIDEO STYLING
		RESPONSIVE 
	11. FEATURED STYLING
		RESPONSIVE 
	12. COUNTER SECTION
		RESPONSIVE 
	13. SCREENS
		RESPONSIVE 
	14. QUOTO SECTION
		RESPONSIVE 
	15. DOWNLOAD SECTION
		RESPONSIVE 
	16. BLOG POST STYLING
		RESPONSIVE 
	17. NEWSLETTER STYLING
		RESPONSIVE 
	18. FREQUENT QUESTIONS STYLING
		RESPONSIVE 
	19. CONTACT US STYLING
	20. FOOTER STYLING
		RESPONSIVE 
	
	
====================================================


/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
2. COMMON STYLES
--------------------------------- */

.transparent-layer{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
	background: url(../images/bg-shape-9.png) no-repeat center center; background-size: cover; opacity: .05; }
	
/* common/primary-styles.css */


/* ---------------------------------
3. GO TOP
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
4. SWIPER SLIDER STYLING
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
5. PRELOADER STYLING
--------------------------------- */

/* common/primary-styles.css */


/* ---------------------------------
6. MENU STYLING
--------------------------------- */

/* common/header-styles.css */


	
/* ---------------------------------
7. SLIDER STYLING
--------------------------------- */

.main-slider{ position: relative; height: 800px; width: 100%; z-index: 1; overflow: hidden; }
	
.main-slider .slider-bg-color{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -2; 
	-webkit-transform-origin: top; transform-origin: top; 
	-webkit-animation: slider-anim-1 1s forwards; animation: slider-anim-1 1s forwards; }

.curved-bg{ position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: -1; 
	background: url(../images/bg-shape-4.png) no-repeat center bottom; background-size: 100%; }
	
.p-shape-wrapper{ position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 1; 
	-webkit-transition: all .5s; transition: all .5s; }
	
.p-shape-wrapper .p-shape{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; }

.p-shape-wrapper .p-shape.shape-1{ background: url(../images/bg-shape-5.png) no-repeat right top; background-size: 40%; }
.p-shape-wrapper .p-shape.shape-2{ background: url(../images/bg-shape-6.png) no-repeat left bottom; background-size: 40%; }
.p-shape-wrapper .p-shape.shape-3{ background: url(../images/bg-shape-7.png) no-repeat 20% -100px; background-size: 30%; }
.p-shape-wrapper .p-shape.shape-4{ background: url(../images/bg-shape-8.png) no-repeat 80% 100%; background-size: 40%; }

.main-slider .slider-screen{ max-width: 600px; position: absolute; bottom: 0; right: 0;
	-webkit-animation: slider-anim-2 1s forwards; animation: slider-anim-2 1s forwards; }

.main-slider .slider-content{ padding-bottom: 50px; color: #fff; }

.main-slider .slider-content .title{ opacity: 0; line-height: 1.2; 
	-webkit-animation: slider-anim-3 .5s .2s forwards; animation: slider-anim-3 .5s .2s forwards; }

.main-slider .slider-content .btn{ padding: 15px 25px; margin-top: 30px; opacity: 0;
	-webkit-animation: slider-anim-3 .5s .4s forwards; animation: slider-anim-3 .5s .4s forwards; }

.main-slider .display-table-cell{ width: 50%; }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
	
	.main-slider .slider-screen{ position: static; padding-left: 30px; }
	
}

@media only screen and (max-width: 767px) {
	
	.main-slider{ text-align: center; padding-top: 100px; height: auto; }
	
	.main-slider .display-table-cell{ width: 100%; display: block; }
	
	.main-slider .slider-screen{ max-width: 350px; float: none; margin: 0 auto; padding-left: 0; }
	
	.main-slider .slider-content{ padding-bottom: 50px; }
	
}

@-webkit-keyframes slider-anim-1{
	0%{ -webkit-transform: scaleY(1.02); }
	100%{ -webkit-transform: scaleY(1);}
}

@-webkit-keyframes slider-anim-2{
	0%{ -webkit-transform: translateY(10px);}
	100%{ -webkit-transform: translateY(1px);}
}

@-webkit-keyframes slider-anim-3{
	0%{ opacity: 0; -webkit-transform: translateY(10px);}
	100%{ opacity: 1; -webkit-transform: translateX(0);}
}

@keyframes slider-anim-1{
	0%{ transform: scaleY(1.02); }
	100%{ transform: scaleY(1);}
}

@keyframes slider-anim-2{
	0%{ transform: translateY(10px);}
	100%{ transform: translateY(1px);}
}

@keyframes slider-anim-3{
	0%{ opacity: 0; transform: translateY(10px);}
	100%{ opacity: 1; transform: translateX(0);}
}

	
	
	
/* ---------------------------------
8. FEATURES
--------------------------------- */

.services-section .service{ position: relative; margin-bottom: 30px; }

.services-section .service .title{ margin-bottom: 10px; }

.services-section .service-left .left-area{ text-align: right; margin-right: 80px; }

.services-section .service-left .right-area{ position: absolute; right: 0; width: 60px; top: 5px; text-align: right; }

.services-section .service-right .right-area{ text-align: left; margin-left: 80px; }

.services-section .service-right .left-area{ position: absolute; left: 0; width: 60px; top: 5px; text-align: left;  }
	
.services-section .service i{ height: 65px; width: 65px; }

.services-section .service-image{ padding: 0 50px; margin-bottom: 30px; }


.services-icon{ height: 60px; width: 60px; }

.icon-easy-use{ background: url(../images/feature_icon_1.png) no-repeat; background-size: cover; }

	
/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.services-section .service-left .left-area{ margin-right: 50px; }

	.services-section .service-left .right-area{ width: 50px; }

	.services-section .service-right .right-area{ margin-left: 50px; }

	.services-section .service-right .left-area{ width: 50px; }

	.services-section .service-image{ padding: 0 30px; }
	
}

@media only screen and (max-width: 767px) {
	
	.services-section{ text-align: center; }
	
	.services-section .service{ display: inline-block; }
	
	.services-section .service-image{ display: none; }
	
	.services-section .display-table-cell{ display: block; width: 100%; }
	
	.services-section .service-right .left-area,
	.services-section .service-left .right-area{ position: static; width: 100%; left: 0; text-align: center;  }

	.services-section .service-right .right-area,
	.services-section .service-left .left-area{ margin: 0px; text-align: center; }
	
	.services-section .service .title{ margin: 10px 0; }
	
}



/* ---------------------------------
9. HOW IT WORKS STYLING
--------------------------------- */

.works-section{ text-align: center; background: #edf1f5; }

.works-section .works{ margin-bottom: 30px; }

.works-section .works .icon{ font-size: 4em; }

.works-section .works .title{ margin: 15px 0; }

.dotted-steps{ position: absolute; top: -20px; left: 20px; right: 0px; height: 120px; opacity: .1; z-index: -1;
	background: url(../images/steps-dots.png) no-repeat center; background-size: 100% 100%; }

.work-icon{ height: 100px; width: 100px; position: relative;
	background: url(../images/works-icon.png) no-repeat center; background-size: cover; }

.work-icon:after{ content:''; position: absolute; top: -20px; left: 0; right: 0; height: 120px; width: 120px; z-index: -1; }

.work-icon.bg-1:after{ background: url(../images/shape-3.png) no-repeat; background-size: cover; }
.work-icon.bg-2:after{ background: url(../images/shape-4.png) no-repeat; background-size: cover; }
.work-icon.bg-3:after{ background: url(../images/shape-5.png) no-repeat; background-size: cover; }

.work-icon-register{ background-position: -2% 50%; }
.work-icon-login{ background-position: 51% 50%; }
.work-icon-order{ background-position: 105% 50%; }



/* ---------------------------------
10. VIDEO STYLING
--------------------------------- */

.video-section{ position: relative; z-index: 1; padding: 100px 0 0; margin-bottom: 200px; }

.video-section,
.video-section .pre-heading,
.video-section p{ color: #fff; }

.video-section .desc{ text-align: center; max-width: 700px; margin: 0 auto 80px; }

.video-section .desc .main-title{ margin: 0 0 15px; }

.video-section .video{ border-radius: 7px; overflow: hidden; min-height: 400px; position: relative; z-index: 1; margin-bottom: -200px;
	box-shadow: 10px 20px 100px rgba(0,0,0,.3);
	background: url(../images/video-bg.jpg) no-repeat; background-size: cover; }

.video-section .video:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; 
	background: rgba(0,0,0,.3); }

.video-section .video .icon-play-btn{ position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; z-index: 1;
	display: inline-block; height: 80px; width: 80px; background: url(../images/play-btn.png) no-repeat; background-size: cover; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.video-section{ padding: 80px 0 0; }
	
	.video-section .desc{ margin: 0 auto 50px; }
	
}

@media only screen and (max-width: 767px) {
	
	.video-section{ padding: 50px 0 0; }
	
}


/* ---------------------------------
11. FEATURED STYLING
--------------------------------- */

.feature-section .desc{ margin: 15px 0 30px; }

.feature-section .featured-image{ width: 400px; margin: 0 auto 30px; padding-left: 30px; }

.feature-section .btn{ margin-bottom: 30px; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.feature-section{ text-align: center; }
	
	.feature-section .display-table,
	.feature-section .display-table-cell{ width: 100%; display: block; }

	.feature-section .featured-image{ margin-top: 50px; padding: 0 15px; }

}

@media only screen and (max-width: 479px) {
	
	.feature-section .featured-image{ width: 100%; margin: 0 auto 30px; }

}


/* ---------------------------------
12. COUNTER SECTION
--------------------------------- */

.counter-section{ position: relative; text-align: center; color: #fff; }

.counter-section .pre-heading{ color: #eee; }

.counter-section .counter{ margin-bottom: 30px; position: relative; display: inline-block; }

.counter-section .counter .icon{ position: absolute; top: 10px; left: 0; width: 50px; font-size: 50px; }

.counter-section .counter .counter-info{ margin-left: 70px; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.counter-section .counter-wrapper{ padding: 80px 0 50px; }
	
	.counter-section .counter .icon{ position: static; display: block; width: 100%; font-size: 40px; }

	.counter-section .counter .counter-info{ margin-left: 0px; margin-top: 5px; }	
	
}

@media only screen and (max-width: 767px) {

	.counter-section .counter-wrapper{ padding: 50px 0 20px; }

}

@media only screen and (max-width: 479px) {

	.counter-wrapper .col-xs-3{ width: 50%; }

}


/* ---------------------------------
13. SCREENS
--------------------------------- */

.app-screen-section{ padding: 100px 0 120px; background: #fff;  }

.app-screen-section .app-screen-area{ position: relative; }

.app-screen-section .swiper-container{ margin: 0 -10px; }

.app-screen-section .swiper-slide{ margin-bottom: 40px; opacity: .5;
	-webkit-transition: all .2s ease-out; transition: all .2s ease-out; 
	-webkit-transform: scale(.9); transform: scale(.9); }

.app-screen-section .swiper-slide-active{ z-index: 100; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

.app-screen-section .swiper-slide-active,
.app-screen-section .swiper-slide-prev,
.app-screen-section .swiper-slide-next{ box-shadow: 1px 10px 50px rgba(0,0,0,.15); } 


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.app-screen-section{ padding: 80px 0 100px; }
	
	.app-screen-section .swiper-slide-active,
	.app-screen-section .swiper-slide-prev,
	.app-screen-section .swiper-slide-next{ box-shadow: none; } 

}

@media only screen and (max-width: 767px) {
	
	.app-screen-section{ padding: 50px 0 70px; }
	
	.app-screen-section .swiper-slide{ margin-bottom: 25px; }
	
}

@media only screen and (max-width: 479px) {

	.app-screen-section .swiper-container{ margin: 0px; }
	
	.app-screen-section .swiper-slide{ border: 1px solid #ddd; }
	
}



/* ---------------------------------
14. QUOTO SECTION
--------------------------------- */

.quoto-section{ background: #edf1f5; }

.quoto-section .swiper-container{ padding: 0 15px; margin: 0 -35px; }

.quoto-section .swiper-slide{ -webkit-transition: all .2s; transition: all .2s; 
	-webkit-transform: scale(.85); transform: scale(.85); }

.quoto-section .swiper-slide-active{ z-index: 100; -webkit-transform: scale(1); transform: scale(1); }

.quoto-section .quoto-swpr-wrapper{ position: relative; }

.quoto-section .quoto{ position: relative; margin-bottom: 30px; }

.quoto-section .quoto .desc{ font-size: 1.3em; }

.quoto-section .quoto .icon{ font-size: 25px; float: left; display: inline-block; margin: -5px 15px 0 0; color: #035ccc; }

.quoto-section .quoto-desc{ padding: 35px 40px; margin-bottom: 30px; border-radius: 5px; position: relative; 
	box-shadow: 0px 10px 25px rgba(0,0,0,.08); background: #fff; }

.quoto-section .quoto-desc .quoto-triangle{ position: absolute; width: 30px; height: 30px; left: 0; bottom: -26px; overflow: hidden; }

.quoto-section .quoto-desc .quoto-triangle:after{ content:''; border-radius: 1px; position: absolute; top: -15px; left: -13px; 
	height: 100%; width: 100%; border-radius: 2px;
	box-shadow: -10px 20px 50px rgba(0,0,0,.1); background: #fff;
    -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	
.quoto-section .author{ position: relative; margin-left: 0px; }

.quoto-section .author .profile-image{ width: 60px; height: 60px; border-radius: 60px; overflow: hidden; }

.quoto-section .author .author-info{ position: absolute; left: 80px; top: 50%; 
	-webkit-transform: translateY(-50%); transform: translateY(-50%); }

.quoto-section .author .author-info .designation{ margin-top: 5px; color: #035ccc; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.quoto-section .swiper-container{ padding: 0 0px; margin: 0 -15px; }
	
	.quoto-section .quoto{ margin-left: 15px; margin-right: 15px; } 

}

@media only screen and (max-width: 767px) {
	
	.quoto-section .quoto-swpr-wrapper{ padding-top: 20px; }
	
}

@media only screen and (max-width: 479px) {
	
	.quoto-section .quoto-desc{ padding: 20px; }
	
}


/* ---------------------------------
15. DOWNLOAD SECTION
--------------------------------- */

.download-section{ position: relative; text-align: center; color: #fff; }

.download-section .pre-heading,
.download-section p{ color: #eee; }

.download-section .desc{ margin: 30px auto 20px; max-width: 700px; }

.download-section .download-btn{ margin: 10px 10px 0px 0; width: 450px; }

.download-section .download-btn:last-child{ margin: 10px 10px 0px 0; width: 450px; }

/* RESPONSIVE */

@media only screen and (max-width: 479px) {
	
	.download-section .download-btn{ width: 150px !important; }
	
}



/* ---------------------------------
16. BLOG POST STYLING
--------------------------------- */

.blog-section .blog-post{ background: #fff; margin-bottom: 30px; box-shadow: 3px 10px 50px rgba(0,0,0,.1); }

.blog-section .blog-post .blog-img{ display: block; position: relative; }

.blog-section .blog-post .blog-img .category{ position: absolute; top: 15px; right: 15px; padding: 5px 10px; border-radius: 2px; color: #fff; }

.blog-section .blog-post .blog-info{ padding: 25px 25px 5px; overflow: hidden; }

.blog-section .blog-post .date{ margin-top: 10px; color: #666; }

.blog-section .blog-post .desc{ padding: 20px 0; }

.blog-section .blog-post .read-more-btn{ display: block; letter-spacing: 2px; padding: 15px 25px;background: #eaf1f3; }

.blog-section .blog-post .read-more-btn:focus,
.blog-section .blog-post .read-more-btn:hover{ background: #111; color: #fff; }



/* ---------------------------------
17. NEWSLETTER STYLING
--------------------------------- */

.newsletter-section{ padding: 80px 0; position: relative; z-index: 1; background-size: cover; color: #fff; }

.newsletter-section .desc{ padding: 0px 20px; margin: 10px 0 30px; line-height: 1.6; color: #eee; }

.newsletter-area{ height: 50px; width: 100%; position: relative; z-index: 1; }

.newsletter-area .email-input{ position: absolute; width: 100%; top: 0; left: 0; bottom: 0; padding: 0 80px 0 20px; 
	height: 50px; line-height: normal; z-index: -5; border: 1px solid #fff; background: #fff; }

.newsletter-area .submit-btn{ position: absolute; width: 60px; font-size: 30px; line-height: 50px;
	top: 0; right: 0; bottom: 0; border: 0; outline: 0; background: none; border-left: 1px solid #aaa; color: #333; }

.newsletter-area .submit-btn:focus,
.newsletter-area .submit-btn:hover{ background: #0c98cf; color: #fff; }

.newsletter-area .email-input:focus + .submit-btn{ border-color: #aaa; }

.newsletter-area .email-input:focus{ border-color: #aaa!important; color: #000; }
	
	
.newsletter-area ::-webkit-input-placeholder { color: #aaa; }

.newsletter-area ::-moz-placeholder { color: #aaa; }

.newsletter-area :-ms-input-placeholder { color: #aaa; }

.newsletter-area :-moz-placeholder { color: #aaa; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	.newsletter-section{ margin: 0px; }

}
@media only screen and (max-width: 767px) {

	.newsletter-section{ padding: 50px 0px; margin: 0px; }
	
}
	
	
/* ---------------------------------
18. FREQUENT QUESTIONS STYLING
--------------------------------- */

.faq-section .answer{ margin-bottom: 30px; }

.faq-section .answer .desc{ margin-top: 15px; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.faq-section{ text-align: center; }
	
}	


/* ---------------------------------
19. CONTACT US STYLING
--------------------------------- */

.map-section{ position: relative; padding-top: 250px; margin: 100px 0 -400px; }

/* MAP STYLING */

.map-wrapper{ position: absolute; top: -100px; bottom: 400px; left: 0; right: 0; }

#map{ height: 100%; width: 100%; }


/* CONTACT AREA */

.contact-section .contact-area{ position: relative; z-index: 10; margin-left: 50px; box-shadow: 1px 10px 50px rgba(0,0,0,.15); }

.contact-section .heading-area{ margin-bottom: 30px; }

.contact-section .contact-area .left-area{ padding: 30px 30px 20px; width: 350px; position: absolute; top: 40px; bottom: 40px; 
	left: -50px; border-radius: 5px; box-shadow: 1px 10px 50px rgba(0,0,0,.15); color: #fff; }

.contact-section .contact-area .left-area li{ margin-bottom: 15px; position: relative; padding-left: 25px; }

.contact-section .contact-area .left-area li i{ position: absolute; top: 5px; left: 0; }

.contact-section .contact-area .right-area{ border-radius: 5px; padding: 50px; padding-left: 350px; background: #eaf1f3; }

.contact-section .contact-area .right-area input{ padding: 0 15px; width: 100%; height: 45px; margin-bottom: 20px; border-radius: 3px;
	background: #fff; }

.contact-section .contact-area .right-area textarea{ border-radius: 3px; padding: 15px; width: 100%; margin-bottom: 20px; 
	border: 1px solid transparent; }

.contact-section .contact-area .right-area input:focus,
.contact-section .contact-area .right-area textarea:focus{ border: 1px solid #aaa; }

.contact-section .contact-area .right-area button{ padding: 12px 30px; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.contact-section .contact-area .left-area{ padding: 20px 20px 10px; width: 220px; }
	
	.contact-section .contact-area .right-area{ padding: 50px 30px; padding-left: 190px; }
	
}

@media only screen and (max-width: 479px) {
	
	.map-wrapper{ height: 650px; }
	
	.contact-section{ text-align: center; }
	
	.contact-section .contact-area{ margin: 0; }
	
	.contact-section .contact-area .left-area{ border-radius: 5px 5px 0 0;  }
	
	.contact-section .contact-area .right-area{ border-radius: 0 0 5px 5px; }
	
	.contact-section .contact-area .left-area li{ padding-left: 0px; display: block; }
	
	.contact-section .contact-area .left-area li i{ display: none; }
	
	.contact-section .contact-area .left-area{ position: static; padding: 50px 30px 40px; width: 100%; }
	
	.contact-section .contact-area .right-area{ padding: 50px 30px; }
	
}



/* ---------------------------------
20. FOOTER STYLING
--------------------------------- */

footer{ padding-top: 520px; }


/* RESPONSIVE */

@media only screen and (max-width: 479px) {
	
	footer{ padding-top: 300px; }
	
}

/* common/footer-styles.css */