/*--------------------------------------------------------------------------------------
Theme Name: MOBI APP
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly MOBI APP HTML5 Apps Landing template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: ThemeCTG
Version: 1.0
----------------------------------------------------------------------------------------
    1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 DROPDOWN MENU
        2.3 WELCOME TEXT AREA
    3. FEATURES AREA
        3.1 FEATURES BOTTOM AREA
    4. ABOUT AREA
    5. CLIENT AREA
    6. VIDEO AREA
    7. SCREENSHOT AREA
    8. TESTMONIAL AREAS
    9. PRICE AREA
    10. DOWNLOAD AREA
    11. SUBSCRIBER AREA
    12. FOOTER AREA
    13. SCROLL TO TOP
----------------------------------------------------------------------------------------*/


/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:400,700');
.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

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

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button:focus {
    outline: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    color: #666666;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #666666;
}

a:hover {
    text-decoration: none
}

.navbar-toggle {
    border: 2px solid #66ccff;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #66ccff none repeat scroll 0 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.area-title {
    margin-bottom: 80px;
}

.area-title h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 30px;
    padding: 0 10px;
    position: relative;
    text-transform: uppercase;
}

.area-title span {
    position: relative;
    height: 1px;
    width: 90px;
    background: #00aeff;
    display: inline-block;
    margin-bottom: 40px;
}

.area-title span::before {
    content: ' ';
    width: 1px;
    height: 20px;
    background: #00aeff;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.area-title span::after {
    content: ' ';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00aeff;
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.area-title p {
    margin-bottom: 0;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.blue-bg {
    background: #006699;
    color: #fff;
}

.dark-bg {
    background: #282828;
    color: #fff;
}

.gray-bg {
    background: #EBEBEB;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}


/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.top-area-bg {
    background: #0099ff;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}


/*.top-area-bg::before {
    background: #2d2242 ;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}*/


/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.mainmenu-area {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 99;
}

.navbar-header {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-top: 7px;
}

.is-sticky .navbar-header {
    margin-top: 0;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-brand>img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-brand>img {
    max-width: 80%;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 33px 15px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li a:hover,
ul#nav li.active a {
    color: #333;
}

.is-sticky ul#nav li a {
    padding: 20px 15px;
    color: #333333;
}

.is-sticky ul#nav li a:hover,
.is-sticky ul#nav li.active a {
    color: #0099ff;
}

.is-sticky .mainmenu-area {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 999 !important;
}


/*----------------------------------
    2.2 DROPDOWN MENU
-----------------------------------*/

ul.dropdown-menu {
    overflow: hidden;
    width: 200px;
}

ul.dropdown-menu li {
    border-bottom: 1px solid #ccc;
}

ul.dropdown-menu li a {
    color: #666 !important;
    display: block;
    padding: 10px !important;
}

ul.dropdown-menu li:last-child {
    border-bottom: 0 none;
}

ul.dropdown-menu li a:hover {
    color: #66ccff !important;
    padding-left: 20px !important;
}

ul.dropdown-menu li a::after {
    display: none;
}


/*--------------------------
    2.3 WELCOME TEXT AREA
----------------------------*/

.welcome-area {
    height: 100%;
    left: 0;
    padding-top: 100px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

.home-area-mockup {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 50%;
}

.welcome-area-text {
    background: rgba(0, 102, 153, .9) url("file:///C:/Users/Mehedi%20Hasan/Desktop/wave.svg") repeat scroll center top / cover;
    bottom: 0;
    color: #fff;
    padding: 50px 0;
    position: absolute;
    width: 100%;
}

.welcome-text,
.welcome-text h1,
.welcome-text h3 {
    color: #fff;
}

.welcome-text h1 {
    font-size: 60px;
    letter-spacing: 3px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.welcome-text h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

a.home-btn {
    background: #fff none repeat scroll 0 0;
    border-radius: 50px;
    color: #0099ff;
    display: inline-block;
    letter-spacing: 2px;
    margin-top: 50px;
    padding: 12px 40px;
}

a.home-btn i {
    font-size: 24px;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

a.home-btn:hover {
    color: #fff;
    background: #0099ff;
}


/*----------------------------
    3. FEATURES AREA
----------------------------*/

.single-features {
    margin-bottom: 50px;
}

.features-icon {
    border: 1px solid;
    border-radius: 50%;
    font-size: 30px;
    height: 70px;
    margin: 0 auto 20px;
    padding-top: 19px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 70px;
}

.single-features h4 {
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-features:hover .features-icon,
.single-features:hover h4 {
    color: #0099ff;
}

.features-mobile-screen {
    position: relative;
    margin-bottom: -230px;
}

.features-slider {
    height: 100%;
    left: 1%;
    margin: auto;
    position: absolute !important;
    right: 0;
    top: 6%;
    width: 58% !important;
}

.features-slider .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    width: auto;
}


/*-------------------------------
    3.1 FEATURES BOTTOM AREA
--------------------------------*/

.features-bottom-area.section-padding {
    padding-top: 200px;
}

.features-bottom-left-mockup {
    position: relative;
}

.features-mockup-1 {
    left: 0;
    position: absolute;
    top: 50px;
}

.features-mockup-2 {
    left: 60px;
    position: absolute;
    top: 40px;
    width: 80%;
}

.bottom-single-features {
    margin-bottom: 50px;
    padding-left: 80px;
    position: relative;
}

.bottom-single-features:last-child {
    margin-bottom: 0;
}

.bottom-features-icon {
    font-size: 48px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.bottom-single-features h4 {
    letter-spacing: 2px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.bottom-single-features:hover .bottom-features-icon,
.bottom-single-features:hover h4 {
    color: #0099ff;
}


/*-------------------------------
    4. ABOUT AREA
--------------------------------*/

.about-left-img {
    min-height: 530px;
    position: relative;
}

.mockup_one {
    left: 3%;
    position: absolute;
    top: 6%;
    width: 55%;
}

.mockup_two {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
}

.about-content {
    margin-top: 50px;
}

.about-content h2 {
    color: #fff;
    font-size: 30px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}


/*------------------------------
    5. CLIENT AREA
--------------------------------*/

.client-area .owl-item img {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}


/*------------------------------
    6. VIDEO AREA
--------------------------------*/

.video_area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 600px;
    position: relative;
}

.video-area-bg {
    background: rgba(0, 0, 0, 0) url("img/video-bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-area-bg::after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

a.video-area-popup {
    color: #fff;
    display: inline-block;
    font-size: 80px;
    margin-bottom: 50px;
}

.video-area-content h2 {
    color: #fff;
    font-size: 36px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

a.video-area-popup:hover {
    color: #0099ff;
}


/*------------------------------
    7. SCREENSHOT AREA
-------------------------------*/

.screenshots-area {
    padding-bottom: 70px;
}

.screenshots-area .area-title {
    margin-bottom: 50px;
}

.screenshots-area .owl-item img {
    margin: 0 auto;
    max-width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: auto;
}

.screenshots-area .owl-item img:hover {
    box-shadow: 0 0 7px #ebebeb;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.screenshots-area .owl-item {
    padding: 30px 0;
}


/*------------------------------
    8. TESTMONIAL AREAS
-------------------------------*/

.testmonial-slider-area {
    background: #666 none repeat scroll 0 0;
    color: #fff;
    position: relative;
}

.testmonial-area .area-title {
    margin-bottom: 110px;
}

#testmonial-carousel .carousel-indicators {
    height: 130px;
    margin-top: -50px;
    position: inherit;
}

#testmonial-carousel .carousel-indicators li {
    box-shadow: 0 0 0 5px #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    margin: 5px;
    text-indent: inherit;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100px;
    overflow: hidden;
    position: relative;
}

#testmonial-carousel .carousel-indicators li.active {
    height: 120px;
    width: 120px;
    box-shadow: 0 0 0 5px #0099ff
}

#testmonial-carousel .carousel-indicators li img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.testmonial-member-details h4 {
    color: #0099ff;
    display: inline-block;
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 20px;
}

.testmonial-member-details h5 {
    color: #fff;
    letter-spacing: 2px;
}


/*------------------------------
    9. PRICE AREA
--------------------------------*/

.price-content-wrapper {
    margin: 0 15px;
}

.price-heading {
    background: #555555 url(img/price-bg.png) no-repeat center center / cover;
    padding: 60px 0px;
}

.price-heading h5 {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}

.price-heading p {
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}

.price-heading p span {
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 56px;
    color: #ffffff;
    line-height: 0.8;
}

.price-content .price-list {
    background: #555555 none repeat scroll 0 0;
    list-style: outside none none;
    margin: 0;
    padding: 20px 0 70px;
}

.price-content .price-list li {
    border-bottom: 1px solid #00aeff;
    color: #ffffff;
    font-size: 16px;
    margin: 0 60px;
    padding: 15px 0;
    text-transform: capitalize;
}

.price-btn-bg {
    background: #00a4f5 none repeat scroll 0 0;
    min-height: 70px;
    position: relative;
    width: 100%;
}

.price-btn-bg a {
    background: #0099ff;
    border-radius: 100px;
    color: #fff;
    display: inline-block;
    letter-spacing: 0;
    padding: 15px 48px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.price-btn-bg a:hover {
    background: #fff;
    color: #0099ff;
    letter-spacing: 2px;
}


/*------------------------------
    10. DOWNLOAD AREA
-------------------------------*/

.download-area {
    color: #fff;
    position: relative;
}

.download-area-bg {
    background: rgba(0, 0, 0, 0) url("img/download-area-bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.download-area-bg::after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.download-area .area-title h2 {
    color: #fff;
}

.download-btn a {
    background: #fff none repeat scroll 0 0;
    border-radius: 50px;
    color: #0099ff;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0 5px;
    padding: 15px 40px;
}

.download-btn a i {
    font-size: 24px;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.download-btn a:hover {
    background: #0099ff none repeat scroll 0 0;
    color: #fff;
    letter-spacing: 2px;
}


/*--------------------------------
    11. SUBSCRIBER AREA
---------------------------------*/

.subscriber-form form {
    height: 50px;
    position: relative;
    width: 100%;
}

.subscriber-form input {
    border: 1px solid #0099ff;
    border-radius: 50px;
    height: 100%;
    left: 0;
    padding: 10px 15px;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form button {
    background: #0099ff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0 50px 50px 0;
    color: #fff;
    font-family: raleway;
    font-weight: 700;
    height: 100%;
    letter-spacing: 1px;
    min-width: 30%;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.subscriber-form button:hover {
    letter-spacing: 2px;
}

.subscriber-form label {
    color: #0099ff;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: -30px;
    width: 100%;
}

.subscriber-form label.valid {
    top: 10px;
}

.bottom-contact>div {
    padding: 0;
}

.single-contact {
    background: #0099ff none repeat scroll 0 0;
    color: #fff;
    margin-top: 100px;
    min-height: 120px;
    padding-top: 50px;
    position: relative;
    text-align: center;
}

.contact-icon {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px;
    font-size: 40px;
    height: 75px;
    left: 50%;
    margin-left: -37.5px;
    padding-top: 19px;
    position: absolute;
    top: -38px;
    width: 75px;
    color: #0099ff;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-contact:hover .contact-icon {
    background: #0099ff none repeat scroll 0 0;
    color: #fff;
}

.footer-copyright>p {
    margin-bottom: 0;
    margin-top: 5px;
}

.contact-text a {
    color: #fff;
}

.form-control::-webkit-input-placeholder {
    color: #555555;
}

.form-control:-moz-placeholder {
    color: #555555;
}

.form-control::-moz-placeholder {
    color: #555555;
}

.form-control:-ms-input-placeholder {
    color: #555555;
}


/*------------------------------
    12. FOOTER AREA
--------------------------------*/

.footer-area {
    background: #333 none repeat scroll 0 0;
    font-size: 14px;
    padding: 30px 0;
}

.footer-area a {
    color: #fff;
}

.footer-area a:hover {
    color: #0099ff;
}

.footer-menu li {
    display: inline;
}

.footer-menu li a {
    display: inline-block;
    letter-spacing: 1px;
    margin-right: 5px;
    padding: 5px;
    text-transform: uppercase;
}

.footer-copyright>p {
    margin-bottom: 0;
}


/*------------------------------
    13. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
    background: #0099ff none repeat scroll 0 0;
    bottom: 20px;
    box-shadow: 0 0 0 7px transparent;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 7px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 99;
}

a.scrolltotop:hover {
    box-shadow: 0 0 0 0 #272727;
    background: #272727;
}