/*
Author       : Syed Ekram.
Template Name: Shopna - Responsive App Landing Page
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START FEATURES DESIGN
    05. START WHY US DESIGN
    06. START APP DESCRIBE DESIGN
    07. START APP DESCRIBE WITH VIDEO DESIGN
    08. START TESTIMONIAL DESIGN
    09. START OUR SERVICE DESIGN
    10. START APP SCREENSHOT DESIGN
    11. START APP PRICING DESIGN
    12. START APP DOWNLOAD DESIGN
    13. START CONTACT FORM DESIGN
    14. START MAP DESIGN
    15. START NEWSLETTER & SOCIAL PROFILE DESIGN
    16. START FOOTER DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    background-color: #fff;
    color: #222;
    font-family: "Source Sans Pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
}
a {
    font-family: "Montserrat",sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
.status,
.status-mes {
    background-image: url(../img/status.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}
.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}
.status-mes h4 {
    color: #333;
    margin-top: 30px;
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: #00bcd4 none repeat scroll 0 0;
    border-radius: 50px;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    height: 40px;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 5px 12px;
    position: fixed;
    right: 5px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
}
.topcontrol:hover {
    background: #222;
    color: #fff;
}
/*END SCROLL TO TOP*/
.section-padding { padding: 60px 0 }
/*START SECTION TITLE DESIGN*/
.section-title { margin-bottom: 60px }
.section-title  h2 {
    font-family: 'Playball', cursive;
    font-size: 48px;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
    text-transform: capitalize;
}
@media only screen and (max-width:768px) { 
    .section-title  h2 { font-size: 38px }
}
@media only screen and (max-width:320px) { 
    .section-title  h2 { font-size: 24px }
}
.section-title h2 span { color: #00bcd4 }
.section-title-white {
    color: #fff !important;
    position: relative;
}
.section-title div {
    background: #00bcd4  none repeat scroll 0 0;
    display: block;
    height: 3px;
    position: relative;
    margin: 15px auto;
    width: 80px;
}
.section-title p { position: relative }
/*END SECTION TITLE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02. START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #00bcd4  !important;
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: #00bcd4  !important;
    background-color: transparent;
}
.navbar-brand { padding: 0px }
.navbar-brand img { width: 150px }
@media only screen and (max-width:480px) { 
.navbar-brand img {margin-left: 10px;}
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #fff;
}
.menu-top {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-top: -80px;
}
.menu-top li a {
    color: #fff !important;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}
.menu-top li a:hover { color: #00bcd4 !important }
@media only screen and (max-width:768px) { 
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
    }
}
@media only screen and (max-width:480px) { 
    .menu-top {
        background-color: #fff;
        margin-top: -95px;
    }
    .navbar-default .navbar-nav > li > a { color: #313131  !important }
}
.navbar-default.menu-shrink {
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    width: 100%;
    margin-top: 0px;
}
@media only screen and (max-width:480px) { 
    .menu-top {
        color: #fff !important;
        margin-left: 0px;
    }
}
.navbar-default.menu-shrink li a { color: #313131!important}
.navbar-default.menu-shrink li a:hover { color: #00bcd4  !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #00bcd4}
/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
.slider { height: 700px }
.slider { position: relative }
.slider:before {
    background: rgba(0, 0, 0, 0.4) -webkit-linear-gradient(right, #9c27b0 0%, #fe275a 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0.4) linear-gradient(to left, #9c27b0 0%, #fe275a 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
.hero-text h2 {
    color: #fff;
    font-family: "Playball",cursive,sans-serif;
    font-size: 70px;
    line-height: 92px;
    margin: 0;
    padding-top: 200px;
    text-transform: capitalize;
}
@media only screen and (max-width:480px) { 
    .hero-text h2 {
        font-size: 40px;
        line-height: 56px;
    }
}
@media only screen and (max-width:360px) { 
    .hero-text h2 {
        font-size: 30px;
        line-height: 40px;
    }
}
.hero-text p {
    color: #fff;
    letter-spacing: 1px;
    margin: 0 auto;
    padding-bottom: 35px;
    padding-top: 15px;
    text-transform: capitalize;
    width: 80%;
    font-size: 18px;
}
@media only screen and (max-width:768px) { 
    .hero-text p { width: 100% }
}
.btn-home-bg-one {
    background: #00bcd4;
    border: 2px solid #00bcd4;
    border-radius: 0;
    color: #fff;
    margin-right: 10px;
    padding: 10px 30px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
.btn-home-bg-one{  margin: 20px 20px 0 0; }
}
.btn-home-bg-one:hover,
.btn-home-bg-one:focus {
    background: #fff;
    border: 2px solid #fff;
    color: #333;
}
.btn-home-bg-two {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
    padding: 10px 30px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
.btn-home-bg-two{  margin: 20px 20px 0 0; }
}
.btn-home-bg-two:hover,
.btn-home-bg-two:focus {
    background: #fff;
    border: 2px solid #fff;
    color: #333;
}
/*START HTML5 VIDEO*/
.html-video {
    top: 0%;
    left: 0%;
    max-height: 700px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.html-video:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #00bcd4 0%, #E91E63 100%) repeat scroll 0 0;
  opacity: 0.8;
  content: "";
  left: 0;
  top: 0;
}
.slider-caption {
    position: absolute;
    top: 45%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.slider-caption h2 { padding-top: 100px }
video { min-width: 100% }

.slider_html { position: relative }
.slider_html:before {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
/*END HTML5 VIDEO*/
/*START HOME GRADIENT NONE OVERLAY*/
.slider_gradient_none{ position: relative;height: 700px}
.slider_gradient_none:before {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
/*END HOME GRADIENT NONE OVERLAY*/

/*START HOME PARALLAX OVERLAY*/
.slider_parallax { position: relative;height:750px; }
.slider_parallax:before {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
/*END HOME PARALLAX OVERLAY*/

/*START HOME SOLID BACKGROUND*/
.slider_transparent { position: relative;height:750px; }
.slider_transparent:before {
    background:rgba(28,187, 200, 0.8);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
/*END HOME SOLID BACKGROUND*/

/*START ROTATOR BACKGROUND*/
.slider_rotator { position: relative;height:750px; }
.slider_rotator:before {
    background:rgba(0,0,0,0.6);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    width: 100%;
}
/*END ROTATOR BACKGROUND*/

/*START HOME SLIDESHOW*/
#home-slider {
    overflow: hidden;
    position: relative;
}
.caption {
    position: absolute;
    top: 15%;
    margin-top: -104px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 15;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
}
.carousel-fade .carousel-inner .item {
    filter: alpha(opacity=0);
    -webkit-transition-property: opacity;
    transition-property: opacity;
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
	 position: relative;
}
.carousel-fade .carousel-inner .item:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0.8;
  content: "";
  left: 0;
  top: 0;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-control { z-index: 2 }
.left-control,
.right-control {
background: none;
color: #fff;
font-size: 24px;
height: 51px;
line-height: 48px;
position: absolute;
text-align: center;
top: 50%;
transition: all 0.2s ease 0s;
width: 51px;
z-index: 20;
border: 1px solid #fff;
border-radius: 50px;
}
@media only screen and (max-width:480px) { 
    .left-control,
    .right-control { display: none }
}
.left-control { left: -51px }
.right-control { right: -51px }
.left-control:hover,
.right-control:hover {
    background-color: #00bcd4;
	border: 1px solid #00bcd4;
    color: #fff;
}
#home-slider:hover .left-control { left: 30px }
#home-slider:hover .right-control { right: 30px }
#home-slider .fa-angle-down {
    position: absolute;
    left: 50%;
    bottom: 50px;
    color: #fff;
    display: inline-block;
    width: 24px;
    margin-left: -12px;
    font-size: 24px;
    line-height: 24px;
    z-index: 999;
    -webkit-animation: bounce 3000ms infinite;
    animation: bounce 3000ms infinite;
}
/*END HOME SLIDESHOW*/
/*START FLEX SLIDER*/
.flexslider {
border: none;
z-index: 1;
height: 650px;
overflow: hidden;
margin: 0;
position: relative;
}

.flex-direction-nav a:before {
color: #fff;
content: "";
display: inline-block;
font-size: 60px;
line-height: 40px;
}

.flex-direction-nav li.flex-nav-prev a.flex-prev:before {
font-family: FontAwesome;
content: "\f104";
}

.flex-direction-nav li.flex-nav-next a.flex-next:before {
font-family: FontAwesome;
content: "\f105";
}

.flexslider:hover .flex-direction-nav li.flex-nav-prev a {
left: 25px;
}

.flex-direction-nav a {
width: 24px;
height: 40px;
}

.flexslider:hover .flex-direction-nav li.flex-nav-next a {
right: 25px;
}
.slider_text {
margin: 0 auto;
max-width: 100%;
position: absolute;
text-align: center;
top: 49%;
transform: translateY(-50%);
width: 100%;
z-index: 2;
}

.slider_text h2 {
    color: #fff;
    font-family: "Playball",cursive,sans-serif;
    font-size: 70px;
    line-height: 92px;
    margin: 0;
    text-transform: capitalize;
}

.slider_text p {
    color: #fff;
    letter-spacing: 1px;
    margin: 0 auto;
    padding-bottom: 35px;
    padding-top: 15px;
    text-transform: capitalize;
    width: 80%;
    font-size: 18px;
}

.flexslider .slides > li {
height: 750px;
position: relative;
}

.flexslider ul.slides:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
.flexslider .slides > li img {
min-height: 100%;
object-fit: cover;
}
/*END FLEX SLIDER*/
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04.START FEATURES DESIGN
* ----------------------------------------------------------------------------------------
*/
.feature-icon-box {
    padding: 35px 22px 28px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.feature-icon-box:hover { background: #040e18 }
.feature_icon_box_bg_one { background: #2196f3 }
.feature_icon_box_bg_two { background: #f44336 }
.feature_icon_box_bg_three { background: #ff9800 }
.feature_icon_box_bg_four { background: #9c27b0 }
.feature_icon_box_bg_five { background: #00bcd4 }
.feature_icon_box_bg_six { background: #c0ca33 }
.icon-box-icon {
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #333;
    display: inline-block;
    font-size: 25px;
    height: 65px;
    line-height: 65px;
    margin-bottom: 30px;
    text-align: center;
    width: 65px;
    -webkit-transition: .5s;
            transition: .5s;
    position: relative;
}
.icon-box-icon:after {
    border: 5px solid #e8e8e9;
    border-radius: 50%;
    content: "";
    height: 75px;
    left: -6px;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: -6px;
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
    width: 75px;
}
.feature-icon-box:hover .icon-box-icon:after {
    left: -6px;
    opacity: 1;
    filter: alpha(opacity=100);
    top: -6px;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}
.feature-icon-box:hover .icon-box-icon {
    background: #00bcd4;
    color: #fff;
    border-color: #00bcd4;
}
.icon-box-info h4 {
    margin: 0 0 20px;
    color: #fff;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
    .icon-box-info h4 { font-size: 14px }
}
@media only screen and (max-width:480px) { 
    .icon-box-info h4 { font-size: 18px }
}
.icon-box-info p { color: #fff }
/*
* ----------------------------------------------------------------------------------------
* 04.END FEATURES DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 05.START WHY US DESIGN
* ----------------------------------------------------------------------------------------
*/
.why-choose-us { position: relative }
.why-choose-us:before {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
@media only screen and (max-width:768px) { 
    .mt60 { margin-top: 60px }
}
.why-choose-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
    margin-top: 0;
    text-transform: uppercase;
}
@media only screen and (max-width:360px) { 
    .why-choose-title { font-size: 18px }
}
.single_why {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    margin-bottom: 25px;
    overflow: hidden;
    padding: 20px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_why_mbnone { margin-bottom: 0px }
.single_why:hover {
    background: #fff;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.2);
}
.why-box-icon {
    background: #00bcd4 none repeat scroll 0 0;
    border: 1px solid #00bcd4;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    float: left;
    font-size: 25px;
    height: 65px;
    line-height: 65px;
    margin-bottom: 30px;
    margin-right: 20px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
    width: 65px;
}
.why-box-icon:after {
    border: 5px solid #e8e8e9;
    border-radius: 50%;
    content: "";
    height: 75px;
    left: -6px;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: -6px;
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
    width: 75px;
}
.single_why:hover .why-box-icon:after {
    left: -6px;
    opacity: 1;
    filter: alpha(opacity=100);
    top: -6px;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}
.single_why h4 {
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
	overflow: hidden;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_why:hover h4 { color: #333 }
.single_why p {
color: #fff;
overflow: hidden;
transition: all 0.4s ease 0s;
}
.single_why:hover p { color: #333 }
.why_us_img {
    margin: auto auto 0px;
    max-width: 350px;
}
/*
* ----------------------------------------------------------------------------------------
* 05.END WHY US DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 06.START APP DESCRIBE DESIGN
* ----------------------------------------------------------------------------------------
*/
.description_text {
    background: #fff none repeat scroll 0 0;
    border-bottom: 3px solid #00bcd4;
    border-top: 3px solid #00bcd4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 52px;
    padding: 30px;
}
@media only screen and (max-width:480px) { 
.description_text{ margin-top:0px;}
}
.description_text h3 {
    color: #00bcd4;
    font-family: "Playball",cursive;
    font-size: 45px;
    line-height: 60px;
    margin: 0 0 20px;
    text-transform: capitalize;
}
@media only screen and (max-width:480px) { 
    .description_text h3 {
        font-size: 26px;
        line-height: 40px;
    }
}
.description_text p { text-align: justify }
.description_text_mbnone { margin-bottom: 0px!important }
.description_text_img {
    margin: auto auto 0px;
    max-width: 350px;
}
/*
* ----------------------------------------------------------------------------------------
* 06.END APP DESCRIBE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 07.START APP DESCRIBE WITH VIDEO DESIGN
* ----------------------------------------------------------------------------------------
*/
.app-describe-with-video { background: #f7f7f7 }
.description_video iframe {
    border: medium none;
    height: 350px;
    width: 100%;
}
.description_video_text {
    background: #fff none repeat scroll 0 0;
    border-bottom: 3px solid #00bcd4;
    border-top: 3px solid #00bcd4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 30px;
}
.description_video_text h3 {
    color: #00bcd4;
    font-family: "Playball",cursive;
    font-size: 45px;
    line-height: 60px;
    margin: 0 0 20px;
    text-transform: capitalize;
}
@media only screen and (max-width:480px) { 
    .description_video_text h3 {
        font-size: 26px;
        line-height: 40px;
    }
}
@media only screen and (max-width:320px) { 
    .description_video_text h3 {
        font-size: 24px;
        line-height: 40px;
    }
}
.description_video_text p { text-align: justify }
.description_video_text_mbnone { margin-bottom: 0px!important }
/*
* ----------------------------------------------------------------------------------------
* 07.END APP DESCRIBE WITH VIDEO DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 08.START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.app-testimonial { position: relative }
.app-testimonial:before {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
.single_testimonial {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    padding: 40px;
}
@media only screen and (max-width:360px) { 
    .single_testimonial { padding: 20px }
}
.single_testimonial img {
    border: 4px solid #00bcd4;
    border-radius: 50px;
    float: left;
    height: 100px;
    margin-right: 10px;
    width: 100px;
}
.single_testimonial h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
.single_testimonial p { text-align: justify; color: #fff; }
.single_testimonial i { color: #00bcd4 }
/*
* ----------------------------------------------------------------------------------------
* 08.END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 09.START OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.single_service {
    padding: 80px 20px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_service:hover { background: #fff }
.single_service i {
    font-size: 30px;
    color: #fff;
    margin-bottom: 12px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_service:hover i { color: #00bcd4 }
.single_service h4 {
    color: #fff;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.single_service:hover h4 { color: #00bcd4 }
.single_service p {
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
    color: #fff;
}
.single_service:hover p { color: #333 }
.single_service_bg_one { background: #f44336 }
.single_service_bg_two { background: #00bcd4 }
.single_service_bg_three { background: #9c27b0 }
.single_service_bg_four { background: #ff9800 }
/*
* ----------------------------------------------------------------------------------------
* 09.END OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 10.START APP SCREENSHOT DESIGN
* ----------------------------------------------------------------------------------------
*/
.sin-screenshot { z-index: 9 }
.sin-screenshot a {
    display: block;
    position: relative;
}
.sin-screenshot a:before {
    background: #24141e none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.6;
    filter: alpha(opacity=60);
    position: absolute;
    right: 0;
    top: 0;
}
.sin-screenshot a:hover:before {
    opacity: 0.2;
    filter: alpha(opacity=20);
}
.screenshot-carousel { z-index: 9 }
.screenshot-carousel img { width: 100% }
/*
* ----------------------------------------------------------------------------------------
* 10.END APP SCREENSHOT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 11.START APP PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
.pricing-table {
    background-color: #fff;
    border: 1px solid #e8e8e9;
    box-shadow: 1px 1px 1px 0 #f4f4f4;
    position: relative;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.pricing-table:hover { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) }
@media only screen and (max-width:480px) { 
    .pricing-table { margin-bottom: 40px }
}
.pricing-table h3 {
    color: #333;
    font-size: 20px;
    margin-bottom: 25px;
    padding: 25px 15px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0;
}
.price {
    background: #00bcd4 none repeat scroll 0 0;
    border-radius: 500px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    color: #fff;
    display: inline-block;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    height: 124px;
    line-height: 20px;
    margin-bottom: 30px;
    width: 124px;
}
.price span {
    display: block;
    font-size: 32px;
    margin-top: 39px;
}
.pricing-list {
    border-top: 1px dashed #eaeaea;
    list-style: outside none none;
    margin-bottom: 0;
    text-align: center;
}
.pricing-list li {
    border-bottom: 1px dashed #eaeaea;
    font-size: 18px;
    padding: 8px 15px;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.pricing-list li:hover { background: rgba(0,0,0,0.020) }
.pricing-btn { padding: 30px 0 }
/*START PRICING BTN STYLE*/
.btn-pricing-bg {
background: #00bcd4 none repeat scroll 0 0;
border: 2px solid #00bcd4;
border-radius: 2px;
box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
color: #fff;
font-family: montserrat,sans-serif;
font-size: 12px;
padding: 10px 30px;
text-transform: uppercase;
transition: all 0.2s ease 0s;
}
.btn-pricing-bg:hover,
.btn-pricing-bg:focus {
    background: #040e18;
    color: #fff;
    border: 2px solid #040e18;
}
/*END PRICING BTN STYLE*/
/*
* ----------------------------------------------------------------------------------------
* 11.END APP PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 12.START APP DOWNLOAD DESIGN
* ----------------------------------------------------------------------------------------
*/
.app-download { position: relative }
.app-download:before {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
.download_overlay {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    padding: 40px;
    overflow: hidden;
}
.download_app h3 {
    color: #fff;
    margin: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.download_app a {
    background: #00bcd4 none repeat scroll 0 0;
    border: medium none;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    margin: 5px;
    padding: 16px 25px;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.download_app a:hover,
.download_app a:focus {
    background: #fff;
    color: #333;
}
.download_app a i { margin-right: 10px }
/*
* ----------------------------------------------------------------------------------------
* 12.END APP DOWNLOAD DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 13.START CONTACT FORM DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact-us { background: #f7f7f7 }
/*START CONTACT ADDRESS*/
.contact-info {
    background: #fff none repeat scroll 0 0;
    padding: 25px 25px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
		height: 430px;
}
@media only screen and (max-width:1280px) { 
.contact-info {padding: 15px 25px;:}
}
.contact-info:hover { box-shadow: none }
.contact-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-info ul li {
    margin-bottom: 30px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.contact-info ul li.contact-info-mbnone { margin-bottom: 0px }
.contact-info ul li h4 {
    font-size: 16px;
    margin: 0;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.contact-info ul li p { }
/*END CONTACT ADDRESS*/
/*START CONTACT FORM*/
.contact {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 35px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
			height: 430px;
}
.contact:hover { box-shadow: none }
.form-control {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    border-radius: 0;
    box-shadow: none;
    color: #333;
    font-family: "Montserrat",sans-serif;
    height: 45px;
    padding-left: 10px;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.form-control:hover,
.form-control:focus {
    border: 1px solid #00bcd4;
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
}
.actions { margin-top: 30px }
.btn-contact-bg {
    background: #00bcd4 none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    padding: 10px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #333;
    border: 1px solid #333;
    color: #fff;
}
.success {
    background: #fff none repeat scroll 0 0;
    color: #00bcd4;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}
/*END CONTACT FORM*/
/*
* ----------------------------------------------------------------------------------------
* 13.END CONTACT FORM DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 14.START MAP DESIGN
* ----------------------------------------------------------------------------------------
*/
.map { height: 400px }
/*
* ----------------------------------------------------------------------------------------
* 14.END MAP DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 15.START NEWSLETTER & SOCIAL PROFILE DESIGN
* ----------------------------------------------------------------------------------------
*/
.newsletter {
    background: #040e18;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.newsletter_title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: uppercase;
    margin-top: 0;
}
@media only screen and (max-width:480px) { 
.newsletter_title {font-size: 18px;}
}
/*START NEWSLETTER FORM*/
.subscribe_input i {
    font-size: 60px;
    margin-bottom: 30px;
}
.subscribe_input input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    float: left;
    width: 400px;
}
@media only screen and (max-width:768px) { 
    .subscribe_input input {
        float: left;
        margin-bottom: 20px;
        width: 100%;
    }
}
@media only screen and (max-width:480px) { 
    .subscribe_input input {
        float: none;
        margin-bottom: 20px;
    }
}
.subscribe_input button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    color: #fff;
    font-family: "Montserrat",sans-serif;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
    margin-left: 20px;
}
.subscribe_input button:hover {
    background: #fff;
    border: 1px solid #fff;
    color: #222;
}
/*END NEWSLETTER FORM*/
/*START SOCIAL PROFILE*/
.footer_social { padding-top: 60px }
.footer_social h4 {
    color: #fff;
    font-size: 24px;
    margin: 0;
}
.footer_social span {
    background: #fff none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 20px auto 25px;
    width: 75px;
}
.social_icon ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.social_icon ul li { display: inline }
.social_icon ul li a i {
    border-radius: 0px;
    color: #fff;
    font-size: 20px;
    height: 45px;
    margin: 2px;
    padding: 13px;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
    width: 45px;
}
.social_icon ul li a i:hover {
    background: #fff;
    color: #333;
}
.facebook { background: #345289 }
.twitter { background: #006E99 }
.dribbble { background: #FF4C83 }
.instagram { background: #8B5C42 }
.google { background: #D14031 }
.youtube { background: #CF1711 }
/*END SOCIAL PROFILE*/
/*
* ----------------------------------------------------------------------------------------
* 15.END NEWSLETTER & SOCIAL PROFILE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 16.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
    padding: 30px 0;
    background-color: #09121B;
}
.footer_copyright {
    color: #fff;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    margin: 0;
    text-transform: capitalize;
}
/*
* ----------------------------------------------------------------------------------------
* 16.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/